MediaWiki:Gadget-prism-plugin-previewers.js

来自萌娘共享
跳转至: 导航搜索

注意:在保存之后,您可能需要清除浏览器缓存才能看到所作出的变更的影响。

  • Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5Ctrl-R(Mac为⌘-R
  • Google Chrome:Ctrl-Shift-R(Mac为⌘-Shift-R
  • Internet Explorer:按住Ctrl的同时单击刷新,或按Ctrl-F5
  • Opera:前往菜单 → 设置(Mac为Opera → Preferences),然后隐私和安全 → 清除浏览数据 → 缓存的图片和文件
/**
 * -------------------------------------------------------------------------
 * !!! DON'T MODIFY THIS PAGE MANUALLY, YOUR CHANGES WILL BE OVERWRITTEN !!!
 * -------------------------------------------------------------------------
 */
var _addText = '{{GHIACode|page=GHIA:MoegirlPediaInterfaceCodes/blob/master/src/gadgets/prism-plugin-previewers/MediaWiki:Gadget-prism-plugin-previewers.js|user=[[U:AnnAngela]]|co-authors=GH:github-actions[bot]、[[U:Bhsd]]|longId=2d5d0ae30421796cfa323a02a78713c0ed261417|shortId=2d5d0ae3|summary=feat(Gadget/prism): 新的代码高亮工具 (#443)|body=<nowiki>Co-authored-by: github-actions[bot] <41898282+github-actions[bot]📧users.noreply.github.com>↩Co-authored-by: Bhsd <55071315+bhsd-harry📧users.noreply.github.com></nowiki>}}'; 

/* <pre> */

"use strict";
(function () {
    if (typeof Prism === 'undefined' || typeof document === 'undefined' || !Function.prototype.bind) {
        return;
    }
    var previewers = {
        'gradient': {
            create: (function () {
                var cache = {};
                var convertToW3CLinearGradient = function (prefix, func, values) {
                    var angle = '180deg';
                    if (/^(?:-?(?:\d+(?:\.\d+)?|\.\d+)(?:deg|rad)|to\b|top|right|bottom|left)/.test(values[0])) {
                        angle = values.shift();
                        if (angle.indexOf('to ') < 0) {
                            if (angle.indexOf('top') >= 0) {
                                if (angle.indexOf('left') >= 0) {
                                    angle = 'to bottom right';
                                }
                                else if (angle.indexOf('right') >= 0) {
                                    angle = 'to bottom left';
                                }
                                else {
                                    angle = 'to bottom';
                                }
                            }
                            else if (angle.indexOf('bottom') >= 0) {
                                if (angle.indexOf('left') >= 0) {
                                    angle = 'to top right';
                                }
                                else if (angle.indexOf('right') >= 0) {
                                    angle = 'to top left';
                                }
                                else {
                                    angle = 'to top';
                                }
                            }
                            else if (angle.indexOf('left') >= 0) {
                                angle = 'to right';
                            }
                            else if (angle.indexOf('right') >= 0) {
                                angle = 'to left';
                            }
                            else if (prefix) {
                                if (angle.indexOf('deg') >= 0) {
                                    angle = (90 - parseFloat(angle)) + 'deg';
                                }
                                else if (angle.indexOf('rad') >= 0) {
                                    angle = (Math.PI / 2 - parseFloat(angle)) + 'rad';
                                }
                            }
                        }
                    }
                    return func + '(' + angle + ',' + values.join(',') + ')';
                };
                var convertToW3CRadialGradient = function (prefix, func, values) {
                    if (values[0].indexOf('at') < 0) {
                        var position = 'center';
                        var shape = 'ellipse';
                        var size = 'farthest-corner';
                        if (/\b(?:bottom|center|left|right|top)\b|^\d+/.test(values[0])) {
                            position = values.shift().replace(/\s*-?\d+(?:deg|rad)\s*/, '');
                        }
                        if (/\b(?:circle|closest|contain|cover|ellipse|farthest)\b/.test(values[0])) {
                            var shapeSizeParts = values.shift().split(/\s+/);
                            if (shapeSizeParts[0] && (shapeSizeParts[0] === 'circle' || shapeSizeParts[0] === 'ellipse')) {
                                shape = shapeSizeParts.shift();
                            }
                            if (shapeSizeParts[0]) {
                                size = shapeSizeParts.shift();
                            }
                            if (size === 'cover') {
                                size = 'farthest-corner';
                            }
                            else if (size === 'contain') {
                                size = 'clothest-side';
                            }
                        }
                        return func + '(' + shape + ' ' + size + ' at ' + position + ',' + values.join(',') + ')';
                    }
                    return func + '(' + values.join(',') + ')';
                };
                var convertToW3CGradient = function (gradient) {
                    if (cache[gradient]) {
                        return cache[gradient];
                    }
                    var parts = gradient.match(/^(\b|\B-[a-z]{1,10}-)((?:repeating-)?(?:linear|radial)-gradient)/);
                    var prefix = parts && parts[1];
                    var func = parts && parts[2];
                    var values = gradient.replace(/^(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\(|\)$/g, '').split(/\s*,\s*/);
                    if (func.indexOf('linear') >= 0) {
                        return cache[gradient] = convertToW3CLinearGradient(prefix, func, values);
                    }
                    else if (func.indexOf('radial') >= 0) {
                        return cache[gradient] = convertToW3CRadialGradient(prefix, func, values);
                    }
                    return cache[gradient] = func + '(' + values.join(',') + ')';
                };
                return function () {
                    new Prism.plugins.Previewer('gradient', function (value) {
                        this.firstChild.style.backgroundImage = '';
                        this.firstChild.style.backgroundImage = convertToW3CGradient(value);
                        return !!this.firstChild.style.backgroundImage;
                    }, '*', function () {
                        this._elt.innerHTML = '<div></div>';
                    });
                };
            }()),
            tokens: {
                'gradient': {
                    pattern: /(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\((?:(?:hsl|rgb)a?\(.+?\)|[^\)])+\)/gi,
                    inside: {
                        'function': /[\w-]+(?=\()/,
                        'punctuation': /[(),]/
                    }
                }
            },
            languages: {
                'css': true,
                'less': true,
                'sass': [
                    {
                        lang: 'sass',
                        before: 'punctuation',
                        inside: 'inside',
                        root: Prism.languages.sass && Prism.languages.sass['variable-line']
                    },
                    {
                        lang: 'sass',
                        before: 'punctuation',
                        inside: 'inside',
                        root: Prism.languages.sass && Prism.languages.sass['property-line']
                    }
                ],
                'scss': true,
                'stylus': [
                    {
                        lang: 'stylus',
                        before: 'func',
                        inside: 'rest',
                        root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside
                    },
                    {
                        lang: 'stylus',
                        before: 'func',
                        inside: 'rest',
                        root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside
                    }
                ]
            }
        },
        'angle': {
            create: function () {
                new Prism.plugins.Previewer('angle', function (value) {
                    var num = parseFloat(value);
                    var unit = value.match(/[a-z]+$/i);
                    var max;
                    var percentage;
                    if (!num || !unit) {
                        return false;
                    }
                    unit = unit[0];
                    switch (unit) {
                        case 'deg':
                            max = 360;
                            break;
                        case 'grad':
                            max = 400;
                            break;
                        case 'rad':
                            max = 2 * Math.PI;
                            break;
                        case 'turn':
                            max = 1;
                    }
                    percentage = 100 * num / max;
                    percentage %= 100;
                    this[(num < 0 ? 'set' : 'remove') + 'Attribute']('data-negative', '');
                    this.querySelector('circle').style.strokeDasharray = Math.abs(percentage) + ',500';
                    return true;
                }, '*', function () {
                    this._elt.innerHTML = '<svg viewBox="0 0 64 64">' +
                        '<circle r="16" cy="32" cx="32"></circle>' +
                        '</svg>';
                });
            },
            tokens: {
                'angle': /(?:\b|\B-|(?=\B\.))(?:\d+(?:\.\d+)?|\.\d+)(?:deg|g?rad|turn)\b/i
            },
            languages: {
                'css': true,
                'less': true,
                'markup': {
                    lang: 'markup',
                    before: 'punctuation',
                    inside: 'inside',
                    root: Prism.languages.markup && Prism.languages.markup['tag'].inside['attr-value']
                },
                'sass': [
                    {
                        lang: 'sass',
                        inside: 'inside',
                        root: Prism.languages.sass && Prism.languages.sass['property-line']
                    },
                    {
                        lang: 'sass',
                        before: 'operator',
                        inside: 'inside',
                        root: Prism.languages.sass && Prism.languages.sass['variable-line']
                    }
                ],
                'scss': true,
                'stylus': [
                    {
                        lang: 'stylus',
                        before: 'func',
                        inside: 'rest',
                        root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside
                    },
                    {
                        lang: 'stylus',
                        before: 'func',
                        inside: 'rest',
                        root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside
                    }
                ]
            }
        },
        'color': {
            create: function () {
                new Prism.plugins.Previewer('color', function (value) {
                    this.style.backgroundColor = '';
                    this.style.backgroundColor = value;
                    return !!this.style.backgroundColor;
                });
            },
            tokens: {
                'color': [Prism.languages.css['hexcode']].concat(Prism.languages.css['color'])
            },
            languages: {
                'css': false,
                'less': true,
                'markup': {
                    lang: 'markup',
                    before: 'punctuation',
                    inside: 'inside',
                    root: Prism.languages.markup && Prism.languages.markup['tag'].inside['attr-value']
                },
                'sass': [
                    {
                        lang: 'sass',
                        before: 'punctuation',
                        inside: 'inside',
                        root: Prism.languages.sass && Prism.languages.sass['variable-line']
                    },
                    {
                        lang: 'sass',
                        inside: 'inside',
                        root: Prism.languages.sass && Prism.languages.sass['property-line']
                    }
                ],
                'scss': false,
                'stylus': [
                    {
                        lang: 'stylus',
                        before: 'hexcode',
                        inside: 'rest',
                        root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside
                    },
                    {
                        lang: 'stylus',
                        before: 'hexcode',
                        inside: 'rest',
                        root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside
                    }
                ]
            }
        },
        'easing': {
            create: function () {
                new Prism.plugins.Previewer('easing', function (value) {
                    value = {
                        'linear': '0,0,1,1',
                        'ease': '.25,.1,.25,1',
                        'ease-in': '.42,0,1,1',
                        'ease-out': '0,0,.58,1',
                        'ease-in-out': '.42,0,.58,1'
                    }[value] || value;
                    var p = value.match(/-?(?:\d+(?:\.\d+)?|\.\d+)/g);
                    if (p.length === 4) {
                        p = p.map(function (p, i) { return (i % 2 ? 1 - p : p) * 100; });
                        this.querySelector('path').setAttribute('d', 'M0,100 C' + p[0] + ',' + p[1] + ', ' + p[2] + ',' + p[3] + ', 100,0');
                        var lines = this.querySelectorAll('line');
                        lines[0].setAttribute('x2', p[0]);
                        lines[0].setAttribute('y2', p[1]);
                        lines[1].setAttribute('x2', p[2]);
                        lines[1].setAttribute('y2', p[3]);
                        return true;
                    }
                    return false;
                }, '*', function () {
                    this._elt.innerHTML = '<svg viewBox="-20 -20 140 140" width="100" height="100">' +
                        '<defs>' +
                        '<marker id="prism-previewer-easing-marker" viewBox="0 0 4 4" refX="2" refY="2" markerUnits="strokeWidth">' +
                        '<circle cx="2" cy="2" r="1.5" />' +
                        '</marker>' +
                        '</defs>' +
                        '<path d="M0,100 C20,50, 40,30, 100,0" />' +
                        '<line x1="0" y1="100" x2="20" y2="50" marker-start="url(#prism-previewer-easing-marker)" marker-end="url(#prism-previewer-easing-marker)" />' +
                        '<line x1="100" y1="0" x2="40" y2="30" marker-start="url(#prism-previewer-easing-marker)" marker-end="url(#prism-previewer-easing-marker)" />' +
                        '</svg>';
                });
            },
            tokens: {
                'easing': {
                    pattern: /\bcubic-bezier\((?:-?(?:\d+(?:\.\d+)?|\.\d+),\s*){3}-?(?:\d+(?:\.\d+)?|\.\d+)\)\B|\b(?:ease(?:-in)?(?:-out)?|linear)(?=\s|[;}]|$)/i,
                    inside: {
                        'function': /[\w-]+(?=\()/,
                        'punctuation': /[(),]/
                    }
                }
            },
            languages: {
                'css': true,
                'less': true,
                'sass': [
                    {
                        lang: 'sass',
                        inside: 'inside',
                        before: 'punctuation',
                        root: Prism.languages.sass && Prism.languages.sass['variable-line']
                    },
                    {
                        lang: 'sass',
                        inside: 'inside',
                        root: Prism.languages.sass && Prism.languages.sass['property-line']
                    }
                ],
                'scss': true,
                'stylus': [
                    {
                        lang: 'stylus',
                        before: 'hexcode',
                        inside: 'rest',
                        root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside
                    },
                    {
                        lang: 'stylus',
                        before: 'hexcode',
                        inside: 'rest',
                        root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside
                    }
                ]
            }
        },
        'time': {
            create: function () {
                new Prism.plugins.Previewer('time', function (value) {
                    var num = parseFloat(value);
                    var unit = value.match(/[a-z]+$/i);
                    if (!num || !unit) {
                        return false;
                    }
                    unit = unit[0];
                    this.querySelector('circle').style.animationDuration = 2 * num + unit;
                    return true;
                }, '*', function () {
                    this._elt.innerHTML = '<svg viewBox="0 0 64 64">' +
                        '<circle r="16" cy="32" cx="32"></circle>' +
                        '</svg>';
                });
            },
            tokens: {
                'time': /(?:\b|\B-|(?=\B\.))(?:\d+(?:\.\d+)?|\.\d+)m?s\b/i
            },
            languages: {
                'css': true,
                'less': true,
                'markup': {
                    lang: 'markup',
                    before: 'punctuation',
                    inside: 'inside',
                    root: Prism.languages.markup && Prism.languages.markup['tag'].inside['attr-value']
                },
                'sass': [
                    {
                        lang: 'sass',
                        inside: 'inside',
                        root: Prism.languages.sass && Prism.languages.sass['property-line']
                    },
                    {
                        lang: 'sass',
                        before: 'operator',
                        inside: 'inside',
                        root: Prism.languages.sass && Prism.languages.sass['variable-line']
                    }
                ],
                'scss': true,
                'stylus': [
                    {
                        lang: 'stylus',
                        before: 'hexcode',
                        inside: 'rest',
                        root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside
                    },
                    {
                        lang: 'stylus',
                        before: 'hexcode',
                        inside: 'rest',
                        root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside
                    }
                ]
            }
        }
    };
    var getOffset = function (element) {
        var elementBounds = element.getBoundingClientRect();
        var left = elementBounds.left;
        var top = elementBounds.top;
        var documentBounds = document.documentElement.getBoundingClientRect();
        left -= documentBounds.left;
        top -= documentBounds.top;
        return {
            top: top,
            right: innerWidth - left - elementBounds.width,
            bottom: innerHeight - top - elementBounds.height,
            left: left,
            width: elementBounds.width,
            height: elementBounds.height
        };
    };
    var TOKEN_CLASS = 'token';
    var ACTIVE_CLASS = 'active';
    var FLIPPED_CLASS = 'flipped';
    var Previewer = function (type, updater, supportedLanguages, initializer) {
        this._elt = null;
        this._type = type;
        this._token = null;
        this.updater = updater;
        this._mouseout = this.mouseout.bind(this);
        this.initializer = initializer;
        var self = this;
        if (!supportedLanguages) {
            supportedLanguages = ['*'];
        }
        if (!Array.isArray(supportedLanguages)) {
            supportedLanguages = [supportedLanguages];
        }
        supportedLanguages.forEach(function (lang) {
            if (typeof lang !== 'string') {
                lang = lang.lang;
            }
            if (!Previewer.byLanguages[lang]) {
                Previewer.byLanguages[lang] = [];
            }
            if (Previewer.byLanguages[lang].indexOf(self) < 0) {
                Previewer.byLanguages[lang].push(self);
            }
        });
        Previewer.byType[type] = this;
    };
    Previewer.prototype.init = function () {
        if (this._elt) {
            return;
        }
        this._elt = document.createElement('div');
        this._elt.className = 'prism-previewer prism-previewer-' + this._type;
        document.body.appendChild(this._elt);
        if (this.initializer) {
            this.initializer();
        }
    };
    Previewer.prototype.isDisabled = function (token) {
        do {
            if (token.hasAttribute && token.hasAttribute('data-previewers')) {
                var previewers = token.getAttribute('data-previewers');
                return (previewers || '').split(/\s+/).indexOf(this._type) === -1;
            }
        } while ((token = token.parentNode));
        return false;
    };
    Previewer.prototype.check = function (token) {
        if (token.classList.contains(TOKEN_CLASS) && this.isDisabled(token)) {
            return;
        }
        do {
            if (token.classList && token.classList.contains(TOKEN_CLASS) && token.classList.contains(this._type)) {
                break;
            }
        } while ((token = token.parentNode));
        if (token && token !== this._token) {
            this._token = token;
            this.show();
        }
    };
    Previewer.prototype.mouseout = function () {
        this._token.removeEventListener('mouseout', this._mouseout, false);
        this._token = null;
        this.hide();
    };
    Previewer.prototype.show = function () {
        if (!this._elt) {
            this.init();
        }
        if (!this._token) {
            return;
        }
        if (this.updater.call(this._elt, this._token.textContent)) {
            this._token.addEventListener('mouseout', this._mouseout, false);
            var offset = getOffset(this._token);
            this._elt.classList.add(ACTIVE_CLASS);
            if (offset.top - this._elt.offsetHeight > 0) {
                this._elt.classList.remove(FLIPPED_CLASS);
                this._elt.style.top = offset.top + 'px';
                this._elt.style.bottom = '';
            }
            else {
                this._elt.classList.add(FLIPPED_CLASS);
                this._elt.style.bottom = offset.bottom + 'px';
                this._elt.style.top = '';
            }
            this._elt.style.left = offset.left + Math.min(200, offset.width / 2) + 'px';
        }
        else {
            this.hide();
        }
    };
    Previewer.prototype.hide = function () {
        this._elt.classList.remove(ACTIVE_CLASS);
    };
    Previewer.byLanguages = {};
    Previewer.byType = {};
    Previewer.initEvents = function (elt, lang) {
        var previewers = [];
        if (Previewer.byLanguages[lang]) {
            previewers = previewers.concat(Previewer.byLanguages[lang]);
        }
        if (Previewer.byLanguages['*']) {
            previewers = previewers.concat(Previewer.byLanguages['*']);
        }
        elt.addEventListener('mouseover', function (e) {
            var target = e.target;
            previewers.forEach(function (previewer) {
                previewer.check(target);
            });
        }, false);
    };
    Prism.plugins.Previewer = Previewer;
    Prism.hooks.add('before-highlight', function (env) {
        for (var previewer in previewers) {
            var languages = previewers[previewer].languages;
            if (env.language && languages[env.language] && !languages[env.language].initialized) {
                var lang = languages[env.language];
                if (!Array.isArray(lang)) {
                    lang = [lang];
                }
                lang.forEach(function (lang) {
                    var before;
                    var inside;
                    var root;
                    var skip;
                    if (lang === true) {
                        before = 'important';
                        inside = env.language;
                        lang = env.language;
                    }
                    else {
                        before = lang.before || 'important';
                        inside = lang.inside || lang.lang;
                        root = lang.root || Prism.languages;
                        skip = lang.skip;
                        lang = env.language;
                    }
                    if (!skip && Prism.languages[lang]) {
                        Prism.languages.insertBefore(inside, before, previewers[previewer].tokens, root);
                        env.grammar = Prism.languages[lang];
                        languages[env.language] = { initialized: true };
                    }
                });
            }
        }
    });
    Prism.hooks.add('after-highlight', function (env) {
        if (Previewer.byLanguages['*'] || Previewer.byLanguages[env.language]) {
            Previewer.initEvents(env.element, env.language);
        }
    });
    for (var previewer in previewers) {
        previewers[previewer].create();
    }
}()); 

/* </pre> */