katoikia-app/web-ui/web-react/node_modules/prismjs/plugins/previewer-gradient/prism-previewer-gradient.js

216 lines
6.5 KiB
JavaScript

(function() {
if (
typeof self !== 'undefined' && !self.Prism ||
typeof global !== 'undefined' && !global.Prism
) {
return;
}
var 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
}
]
};
Prism.hooks.add('before-highlight', function (env) {
if (env.language && languages[env.language] && !languages[env.language].initialized) {
var lang = languages[env.language];
if (Prism.util.type(lang) !== 'Array') {
lang = [lang];
}
lang.forEach(function(lang) {
var before, inside, root, skip;
if (lang === true) {
// Insert before color previewer if it exists
before = Prism.plugins.Previewer && Prism.plugins.Previewer.byType['color'] ? 'color' : '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, {
'gradient': {
pattern: /(?:\b|\B-[a-z]{1,10}-)(?:repeating-)?(?:linear|radial)-gradient\((?:(?:rgb|hsl)a?\(.+?\)|[^\)])+\)/gi,
inside: {
'function': /[\w-]+(?=\()/,
'punctuation': /[(),]/
}
}
}, root);
env.grammar = Prism.languages[lang];
languages[env.language] = {initialized: true};
}
});
}
});
// Stores already processed gradients so that we don't
// make the conversion every time the previewer is shown
var cache = {};
/**
* Returns a W3C-valid linear gradient
* @param {string} prefix Vendor prefix if any ("-moz-", "-webkit-", etc.)
* @param {string} func Gradient function name ("linear-gradient")
* @param {string[]} values Array of the gradient function parameters (["0deg", "red 0%", "blue 100%"])
*/
var convertToW3CLinearGradient = function(prefix, func, values) {
// Default value for angle
var angle = '180deg';
if (/^(?:-?\d*\.?\d+(?:deg|rad)|to\b|top|right|bottom|left)/.test(values[0])) {
angle = values.shift();
if (angle.indexOf('to ') < 0) {
// Angle uses old keywords
// W3C syntax uses "to" + opposite keywords
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) {
// Angle is shifted by 90deg in prefixed gradients
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(',') + ')';
};
/**
* Returns a W3C-valid radial gradient
* @param {string} prefix Vendor prefix if any ("-moz-", "-webkit-", etc.)
* @param {string} func Gradient function name ("linear-gradient")
* @param {string[]} values Array of the gradient function parameters (["0deg", "red 0%", "blue 100%"])
*/
var convertToW3CRadialGradient = function(prefix, func, values) {
if (values[0].indexOf('at') < 0) {
// Looks like old syntax
// Default values
var position = 'center';
var shape = 'ellipse';
var size = 'farthest-corner';
if (/\bcenter|top|right|bottom|left\b|^\d+/.test(values[0])) {
// Found a position
// Remove angle value, if any
position = values.shift().replace(/\s*-?\d+(?:rad|deg)\s*/, '');
}
if (/\bcircle|ellipse|closest|farthest|contain|cover\b/.test(values[0])) {
// Found a shape and/or size
var shapeSizeParts = values.shift().split(/\s+/);
if (shapeSizeParts[0] && (shapeSizeParts[0] === 'circle' || shapeSizeParts[0] === 'ellipse')) {
shape = shapeSizeParts.shift();
}
if (shapeSizeParts[0]) {
size = shapeSizeParts.shift();
}
// Old keywords are converted to their synonyms
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(',') + ')';
};
/**
* Converts a gradient to a W3C-valid one
* Does not support old webkit syntax (-webkit-gradient(linear...) and -webkit-gradient(radial...))
* @param {string} gradient The CSS gradient
*/
var convertToW3CGradient = function(gradient) {
if (cache[gradient]) {
return cache[gradient];
}
var parts = gradient.match(/^(\b|\B-[a-z]{1,10}-)((?:repeating-)?(?:linear|radial)-gradient)/);
// "", "-moz-", etc.
var prefix = parts && parts[1];
// "linear-gradient", "radial-gradient", etc.
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(',') + ')';
};
if (Prism.plugins.Previewer) {
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>';
});
}
}());