From 074947e6a688fa2e88d2b4d67408194ff72d6af5 Mon Sep 17 00:00:00 2001 From: Golmote Date: Mon, 21 Sep 2015 09:04:03 +0200 Subject: [PATCH] Plugin: easing previewer --- .../previewer-base/prism-previewer-base.js | 6 +- .../prism-previewer-base.min.js | 2 +- plugins/previewer-easing/index.html | 80 +++++++++++++ .../prism-previewer-easing.css | 29 +++++ .../prism-previewer-easing.js | 109 ++++++++++++++++++ .../prism-previewer-easing.min.js | 1 + 6 files changed, 225 insertions(+), 2 deletions(-) create mode 100644 plugins/previewer-easing/index.html create mode 100644 plugins/previewer-easing/prism-previewer-easing.css create mode 100644 plugins/previewer-easing/prism-previewer-easing.js create mode 100644 plugins/previewer-easing/prism-previewer-easing.min.js diff --git a/plugins/previewer-base/prism-previewer-base.js b/plugins/previewer-base/prism-previewer-base.js index b5f69cd88b..570739f409 100644 --- a/plugins/previewer-base/prism-previewer-base.js +++ b/plugins/previewer-base/prism-previewer-base.js @@ -45,13 +45,14 @@ * @param {string[]|string=} supportedLanguages Aliases of the languages this previewer must be enabled for. Defaults to "*", all languages. * @constructor */ - var Previewer = function (type, updater, supportedLanguages) { + var Previewer = function (type, updater, supportedLanguages, initializer) { this._elt = null; this._type = type; this._clsRegexp = RegExp('(?:^|\\s)' + type + '(?=$|\\s)'); this._token = null; this.updater = updater; this._mouseout = this.mouseout.bind(this); + this.initializer = initializer; var self = this; @@ -84,6 +85,9 @@ this._elt = document.createElement('div'); this._elt.className = 'prism-previewer prism-previewer-' + this._type; document.body.appendChild(this._elt); + if(this.initializer) { + this.initializer(); + } }; /** diff --git a/plugins/previewer-base/prism-previewer-base.min.js b/plugins/previewer-base/prism-previewer-base.min.js index 848b923569..82bdc180af 100644 --- a/plugins/previewer-base/prism-previewer-base.min.js +++ b/plugins/previewer-base/prism-previewer-base.min.js @@ -1 +1 @@ -!function(){if("undefined"!=typeof self&&self.Prism&&self.document){var t=function(t){var e=0,s=0,i=t;if(i.parentNode){do e+=i.offsetLeft,s+=i.offsetTop;while((i=i.offsetParent)&&i.nodeType<9);i=t;do e-=i.scrollLeft,s-=i.scrollTop;while((i=i.parentNode)&&!/body/i.test(i.nodeName))}return{top:s,right:innerWidth-e-t.offsetWidth,bottom:innerHeight-s-t.offsetHeight,left:e}},e=/(?:^|\s)token(?=$|\s)/,s=/(?:^|\s)active(?=$|\s)/g,i=/(?:^|\s)flipped(?=$|\s)/g,o=function(t,e,s){this._elt=null,this._type=t,this._clsRegexp=RegExp("(?:^|\\s)"+t+"(?=$|\\s)"),this._token=null,this.updater=e,this._mouseout=this.mouseout.bind(this);var i=this;s||(s=["*"]),"Array"!==Prism.util.type(s)&&(s=[s]),s.forEach(function(t){"string"!=typeof t&&(t=t.lang),o.byLanguages[t]||(o.byLanguages[t]=[]),o.byLanguages[t].indexOf(i)<0&&o.byLanguages[t].push(i)})};o.prototype.init=function(){this._elt||(this._elt=document.createElement("div"),this._elt.className="prism-previewer prism-previewer-"+this._type,document.body.appendChild(this._elt))},o.prototype.check=function(t){e.test(t.className)&&this._clsRegexp.test(t.className)&&t!==this._token&&(this._token=t,this.show())},o.prototype.mouseout=function(){this._token.removeEventListener("mouseout",this._mouseout,!1),this._token=null,this.hide()},o.prototype.show=function(){if(this._elt||this.init(),this._token)if(this.updater.call(this._elt,this._token.textContent)){this._token.addEventListener("mouseout",this._mouseout,!1);var e=t(this._token);this._elt.className+=" active",e.top-this._elt.offsetHeight>0?(this._elt.className=this._elt.className.replace(i,""),this._elt.style.top=e.top+"px",this._elt.style.bottom=""):(this._elt.className+=" flipped",this._elt.style.bottom=e.bottom+"px",this._elt.style.top=""),this._elt.style.left=e.left+Math.min(200,this._token.offsetWidth/2)+"px"}else this.hide()},o.prototype.hide=function(){this._elt.className=this._elt.className.replace(s,"")},o.byLanguages={},o.initEvents=function(t,e){var s=[];o.byLanguages[e]&&(s=s.concat(o.byLanguages[e])),o.byLanguages["*"]&&(s=s.concat(o.byLanguages["*"])),t.addEventListener("mouseover",function(t){var e=t.target;s.forEach(function(t){t.check(e)})},!1)},Prism.plugins.Previewer=o,Prism.hooks.add("after-highlight",function(t){(o.byLanguages["*"]||o.byLanguages[t.language])&&o.initEvents(t.element,t.language)})}}(); \ No newline at end of file +!function(){if("undefined"!=typeof self&&self.Prism&&self.document){var t=function(t){var e=0,s=0,i=t;if(i.parentNode){do e+=i.offsetLeft,s+=i.offsetTop;while((i=i.offsetParent)&&i.nodeType<9);i=t;do e-=i.scrollLeft,s-=i.scrollTop;while((i=i.parentNode)&&!/body/i.test(i.nodeName))}return{top:s,right:innerWidth-e-t.offsetWidth,bottom:innerHeight-s-t.offsetHeight,left:e}},e=/(?:^|\s)token(?=$|\s)/,s=/(?:^|\s)active(?=$|\s)/g,i=/(?:^|\s)flipped(?=$|\s)/g,o=function(t,e,s,i){this._elt=null,this._type=t,this._clsRegexp=RegExp("(?:^|\\s)"+t+"(?=$|\\s)"),this._token=null,this.updater=e,this._mouseout=this.mouseout.bind(this),this.initializer=i;var n=this;s||(s=["*"]),"Array"!==Prism.util.type(s)&&(s=[s]),s.forEach(function(t){"string"!=typeof t&&(t=t.lang),o.byLanguages[t]||(o.byLanguages[t]=[]),o.byLanguages[t].indexOf(n)<0&&o.byLanguages[t].push(n)})};o.prototype.init=function(){this._elt||(this._elt=document.createElement("div"),this._elt.className="prism-previewer prism-previewer-"+this._type,document.body.appendChild(this._elt),this.initializer&&this.initializer())},o.prototype.check=function(t){e.test(t.className)&&this._clsRegexp.test(t.className)&&t!==this._token&&(this._token=t,this.show())},o.prototype.mouseout=function(){this._token.removeEventListener("mouseout",this._mouseout,!1),this._token=null,this.hide()},o.prototype.show=function(){if(this._elt||this.init(),this._token)if(this.updater.call(this._elt,this._token.textContent)){this._token.addEventListener("mouseout",this._mouseout,!1);var e=t(this._token);this._elt.className+=" active",e.top-this._elt.offsetHeight>0?(this._elt.className=this._elt.className.replace(i,""),this._elt.style.top=e.top+"px",this._elt.style.bottom=""):(this._elt.className+=" flipped",this._elt.style.bottom=e.bottom+"px",this._elt.style.top=""),this._elt.style.left=e.left+Math.min(200,this._token.offsetWidth/2)+"px"}else this.hide()},o.prototype.hide=function(){this._elt.className=this._elt.className.replace(s,"")},o.byLanguages={},o.initEvents=function(t,e){var s=[];o.byLanguages[e]&&(s=s.concat(o.byLanguages[e])),o.byLanguages["*"]&&(s=s.concat(o.byLanguages["*"])),t.addEventListener("mouseover",function(t){var e=t.target;s.forEach(function(t){t.check(e)})},!1)},Prism.plugins.Previewer=o,Prism.hooks.add("after-highlight",function(t){(o.byLanguages["*"]||o.byLanguages[t.language])&&o.initEvents(t.element,t.language)})}}(); \ No newline at end of file diff --git a/plugins/previewer-easing/index.html b/plugins/previewer-easing/index.html new file mode 100644 index 0000000000..f77edebd3f --- /dev/null +++ b/plugins/previewer-easing/index.html @@ -0,0 +1,80 @@ + + + + + + + Previewer: Easing ▲ Prism plugins + + + + + + + + + + + + +
+
+ +

Previewer: Easing

+

Previewer for CSS easing functions.

+
+ +
+

How to use

+ +

You don't need to do anything. With this plugin loaded, a previewer will appear on hovering the easing values in code blocks.

+

This plugin is compatible with CSS, Less, Sass, Scss and Stylus.

+
+ +
+

Examples

+ +

CSS

+ 
div {
+	transition: color 0.3s linear;
+}
+ +

Less

+ 
#header a {
+	transition-timing-function: ease;
+}
+ +

Sass

+ 
.foo
+	transition: color 0.3s ease-in-out
+
+ +

Scss

+ 
$attr: background;
+.foo {
+    transition: #{$attr}-color 0.3s cubic-bezier(0.9,0.1,.2,.4);
+}
+ +

Stylus

+ 
.foo
+	transition: color 0.3s ease-out
+
+ +
+ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/plugins/previewer-easing/prism-previewer-easing.css b/plugins/previewer-easing/prism-previewer-easing.css new file mode 100644 index 0000000000..7b9c7f8352 --- /dev/null +++ b/plugins/previewer-easing/prism-previewer-easing.css @@ -0,0 +1,29 @@ +.prism-previewer-easing { + margin-top: -76px; + margin-left: -30px; + width: 60px; + height: 60px; + background: #333; +} +.prism-previewer-easing.flipped { + margin-bottom: -116px; +} +.prism-previewer-easing svg { + width: 60px; + height: 60px; +} +.prism-previewer-easing circle { + fill: hsl(200, 10%, 20%); + stroke: white; +} +.prism-previewer-easing path { + fill: none; + stroke: white; + stroke-linecap: round; + stroke-width: 4; +} +.prism-previewer-easing line { + stroke: white; + stroke-opacity: 0.5; + stroke-width: 2; +} \ No newline at end of file diff --git a/plugins/previewer-easing/prism-previewer-easing.js b/plugins/previewer-easing/prism-previewer-easing.js new file mode 100644 index 0000000000..b55a6381e7 --- /dev/null +++ b/plugins/previewer-easing/prism-previewer-easing.js @@ -0,0 +1,109 @@ +(function() { + + if ( + typeof self !== 'undefined' && !self.Prism || + typeof global !== 'undefined' && !global.Prism + ) { + return; + } + + var languages = { + 'css': true, + 'less': true, + 'sass': { + 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 + } + ] + }; + + 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) { + 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, { + 'easing': /\bcubic-bezier\((?:-?\d*\.?\d+,\s*){3}-?\d*\.?\d+\)\B|\b(?:linear|ease(?:-in)?(?:-out)?)(?=\s|[;}]|$)/i + }, root); + env.grammar = Prism.languages[lang]; + + languages[env.language] = {initialized: true}; + } + }); + } + }); + + if (Prism.plugins.Previewer) { + 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+/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 = '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + '' + + ''; + }); + } + +}()); \ No newline at end of file diff --git a/plugins/previewer-easing/prism-previewer-easing.min.js b/plugins/previewer-easing/prism-previewer-easing.min.js new file mode 100644 index 0000000000..f2664f79d8 --- /dev/null +++ b/plugins/previewer-easing/prism-previewer-easing.min.js @@ -0,0 +1 @@ +!function(){if(("undefined"==typeof self||self.Prism)&&("undefined"==typeof global||global.Prism)){var e={css:!0,less:!0,sass:{lang:"sass",inside:"inside",root:Prism.languages.sass&&Prism.languages.sass["property-line"]},scss:!0,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}]};Prism.hooks.add("before-highlight",function(r){if(r.language&&e[r.language]&&!e[r.language].initialized){var s=e[r.language];"Array"!==Prism.util.type(s)&&(s=[s]),s.forEach(function(s){var i,a,n,t;s===!0?(i="important",a=r.language,s=r.language):(i=s.before||"important",a=s.inside||s.lang,n=s.root||Prism.languages,t=s.skip,s=r.language),!t&&Prism.languages[s]&&(Prism.languages.insertBefore(a,i,{easing:/\bcubic-bezier\((?:-?\d*\.?\d+,\s*){3}-?\d*\.?\d+\)\B|\b(?:linear|ease(?:-in)?(?:-out)?)(?=\s|[;}]|$)/i},n),r.grammar=Prism.languages[s],e[r.language]={initialized:!0})})}}),Prism.plugins.Previewer&&new Prism.plugins.Previewer("easing",function(e){e={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"}[e]||e;var r=e.match(/-?\d*\.?\d+/g);if(4===r.length){r=r.map(function(e,r){return 100*(r%2?1-e:e)}),this.querySelector("path").setAttribute("d","M0,100 C"+r[0]+","+r[1]+", "+r[2]+","+r[3]+", 100,0");var s=this.querySelectorAll("line");return s[0].setAttribute("x2",r[0]),s[0].setAttribute("y2",r[1]),s[1].setAttribute("x2",r[2]),s[1].setAttribute("y2",r[3]),!0}return!1},"*",function(){this._elt.innerHTML=''})}}(); \ No newline at end of file