kmx.io/prism.js/plugins/previewer-gradient/prism-previewer-gradient.js

• Show log

  Commit

• Hash : 1d61959b
  Author :
  Date : 2015-10-05T08:47:54
  

  Plugin: gradient previewer: Add variable examples + add support for Sass variables

Download

• plugins/previewer-gradient/prism-previewer-gradient.js

• (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>';
  		});
  	}
  
  }());

Download