OwO表情二改&编辑器工具栏表情 - 易启发资源网

OwO表情二改&编辑器工具栏表情

作者: 易启发

全网最全的网络资源分享网站

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

广告位

好久没有管理优化我的博客了,我这人,一不折腾就是咸鱼,一折腾就像吃了炫迈。之前⑨BIE老说打开我博客电脑要咆哮。本想直接换个主题的,还是算了,懒得重新改。于是我找原因,WP本身就繁重。我测试了一下,打开我的首页,php执行时间为0.8s,蛤?蛤!蛤!
原因就是Crayon Syntax Highlighter这款代码高亮插件。之前我在查看网页源代码的时候就发现,它会把要高亮的代码直接转成html语言。
别说你咋辣么zz,不用highlight.js。因为我以前站点的情况,用起来都差不多,而且Crayon Syntax Highlighter有很多功能。
我这么一关啊,php执行时间从0.8s变成了0.14s,MMP
为了提高用户体验,我到泽泽的博客去看了一下 ,也许我早该用pjax了,咸鱼啊。刚优化了执行时长,也为我全站pjax提供了基础 。
在修改中我遇到了一个问题,也许只有我遇到吧。开始有pjax加载的趋势,然后完全刷新。怀疑人生  ???
这种时候,当然是RTFM啦。原因:超时重定向行为渣渣主机,禁用

$(document).on('pjax:timeout', function(event) {
  // Prevent default timeout redirection behavior
  event.preventDefault()
})

我并没有配合instantclick使用,因为我这会请求过多出现错误,影响浏览统计等等问题。
用酷容和蓝大人体验了一下修改效果,,美滋滋
从最开始我的博客就不怎么支持IE,IE简直。。。当然是原谅它啊。已对IE访问进行美化,能看能用了。
移动端我也进行了一些细节优化,体验比以前更好。
alu表情不能用了(不改了),还是用DIYgay的OwO表情。我发现泽泽的,和之前多说的一样,点击表情输入的是对应文字。啊~我也要换。于是对OwO进行了二改,自己动手,丰衣足食。我的想法是,使用文字代替表情,但是在读取的时候,对于文字替换成表情图片。
以下是我对OwO.min.js进行的修改。我有颜文字、阿鲁和泡泡表情,有文字重复的,于是我用@()和@[]进行区别,以下适合本站,其他酌情修改。

"use strict";

function _classCallCheck(e, t) {
    if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
}

var _createClass = function() {
    function e(e, t) {
        for (var a = 0; a < t.length; a++) {
            var s = t[a];
            s.enumerable = s.enumerable || !1, s.configurable = !0, "value" in s && (s.writable = !0), 
            Object.defineProperty(e, s.key, s);
        }
    }
    return function(t, a, s) {
        return a && e(t.prototype, a), s && e(t, s), t;
    };
}();

!function() {
    var e = function() {
        function e(t) {
            var a = this;
            _classCallCheck(this, e);
            var s = {
                logo:"OwO表情",
                container:document.getElementsByClassName("OwO")[0],
                target:document.getElementsByTagName("textarea")[0],
                position:"down",
                width:"100%",
                maxHeight:"250px",
                api:"https://api.anotherhome.net/OwO/OwO.json"
            };
            for (var n in s) s.hasOwnProperty(n) && !t.hasOwnProperty(n) && (t[n] = s[n]);
            this.container = t.container, this.target = t.target, "up" === t.position && this.container.classList.add("OwO-up");
            var i = new XMLHttpRequest();
            i.onreadystatechange = function() {
                4 === i.readyState && (i.status >= 200 && i.status < 300 || 304 === i.status ? (a.odata = JSON.parse(i.responseText), 
                a.init(t)) :console.log("OwO data request was unsuccessful: " + i.status));
            }, i.open("get", t.api, !0), i.send(null);
        }
        return _createClass(e, [ {
            key:"init",
            value:function(e) {
                var t = this;
                this.area = e.target, this.packages = Object.keys(this.odata);
                for (var a = '\n            <div class="OwO-logo"><span>' + e.logo + '</span></div>\n            <div class="OwO-body" style="width: ' + e.width + '">', s = 0; s < this.packages.length; s++) {
                    //此处开始,也可以根据类型(this.odata[this.packages[s]].type)来判断文字和图片
                    if(s==0){
                    //颜文字
                    a += '\n                <ul class="OwO-items OwO-items-' + this.odata[this.packages[s]].type + '" style="max-height: ' + (parseInt(e.maxHeight) - 53 + "px") + ';">';
                    for (var n = this.odata[this.packages[s]].container, i = 0; i < n.length; i++) a += '\n                    <li class="OwO-item" title="' + n[i].text + '" data-OwO=\'' + n[i].icon + '\'>' + n[i].icon + "</li>";
                    a += "\n                </ul>";
                    }
                    else if(s==1){
                    //阿鲁
                    a += '\n                <ul class="OwO-items OwO-items-' + this.odata[this.packages[s]].type + '" style="max-height: ' + (parseInt(e.maxHeight) - 53 + "px") + ';">';
                    for (var n = this.odata[this.packages[s]].container, i = 0; i < n.length; i++) a += '\n                    <li class="OwO-item" title="' + n[i].text + '" data-OwO="@(' + n[i].text + ')">' + n[i].icon + "</li>";
                    a += "\n                </ul>";
                    }
                    else {
                    //泡泡
                    a += '\n                <ul class="OwO-items OwO-items-' + this.odata[this.packages[s]].type + '" style="max-height: ' + (parseInt(e.maxHeight) - 53 + "px") + ';">';
                    for (var n = this.odata[this.packages[s]].container, i = 0; i < n.length; i++) a += '\n                    <li class="OwO-item" title="' + n[i].text + '" data-OwO="@[' + n[i].text + ']">' + n[i].icon + "</li>";
                    a += "\n                </ul>";
                    }
                    //此处结束
                }
                a += '\n                <div class="OwO-bar">\n                    <ul class="OwO-packages">';
                for (var o = 0; o < this.packages.length; o++) a += "\n                        <li><span>" + this.packages[o] + "</span></li>";
                a += "\n                    </ul>\n                </div>\n            </div>\n            ", 
                this.container.innerHTML = a, this.logo = this.container.getElementsByClassName("OwO-logo")[0], 
                this.logo.addEventListener("click", function() {
                    t.toggle();
                }), this.container.getElementsByClassName("OwO-body")[0].addEventListener("click", function(e) {
                    var a = null;
                    if (e.target.classList.contains("OwO-item") ? a = e.target :e.target.parentNode.classList.contains("OwO-item") && (a = e.target.parentNode), 
                    a) {
                        var s = t.area.selectionEnd, n = t.area.value;
                        //原a.innerHTML读取OwO-item里的html内容,修改为读取data-OwO属性值
                        t.area.value = n.slice(0, s) + a.getAttribute("data-OwO") + n.slice(s), t.area.focus(), 
                        t.toggle();
                    }
                }), this.packagesEle = this.container.getElementsByClassName("OwO-packages")[0];
                for (var c = function(e) {
                    !function(a) {
                        t.packagesEle.children[e].addEventListener("click", function() {
                            t.tab(a);
                        });
                    }(e);
                }, l = 0; l < this.packagesEle.children.length; l++) c(l);
                this.tab(0);
            }
        }, {
            key:"toggle",
            value:function() {
                this.container.classList.contains("OwO-open") ? this.container.classList.remove("OwO-open") :this.container.classList.add("OwO-open");
            }
        }, {
            key:"tab",
            value:function(e) {
                var t = this.container.getElementsByClassName("OwO-items-show")[0];
                t && t.classList.remove("OwO-items-show"), this.container.getElementsByClassName("OwO-items")[e].classList.add("OwO-items-show");
                var a = this.container.getElementsByClassName("OwO-package-active")[0];
                a && a.classList.remove("OwO-package-active"), this.packagesEle.getElementsByTagName("li")[e].classList.add("OwO-package-active");
            }
        } ]), e;
    }();
    "undefined" != typeof module && "undefined" != typeof module.exports ? module.exports = e :window.OwO = e;
}();
//# sourceMappingURL=OwO.min.js.map

  • 分享到:
    打赏
    未经允许不得转载:

    作者: 易启发, 转载或复制请以 超链接形式 并注明出处 易启发资源网
    原文地址: 《OwO表情二改&编辑器工具栏表情》 发布于2020-2-17
    百度[百度已收录] 360[360未收录] 搜狗[搜狗已收录]

    评论

    切换注册

    登录

    忘记密码?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    OwO表情二改&编辑器工具栏表情

    长按图片转发给朋友

    觉得文章有用就打赏一下文章作者

    支付宝扫一扫打赏

    微信扫一扫打赏