diff --git a/components.js b/components.js index 39e5bdc337..6d76047b7e 100644 --- a/components.js +++ b/components.js @@ -524,6 +524,11 @@ var components = { "require": "previewer-base", "owner": "Golmote" }, + "previewer-time": { + "title": "Previewer: Time", + "require": "previewer-base", + "owner": "Golmote" + }, "autoloader": { "title": "Autoloader", "owner": "Golmote", diff --git a/plugins/previewer-time/index.html b/plugins/previewer-time/index.html new file mode 100644 index 0000000000..eb0ac21309 --- /dev/null +++ b/plugins/previewer-time/index.html @@ -0,0 +1,85 @@ + + + + + + + Previewer: Time ▲ Prism plugins + + + + + + + + + + + + +
+
+ +

Previewer: Time

+

Previewer for CSS times.

+
+ +
+

How to use

+ +

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

+

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

+
+ +
+

Examples

+ +

CSS

+ 
div {
+	transition: all linear 3s;
+}
+ +

Less

+ 
@time: 1s;
+#header a {
+	transition: all linear 2s;
+}
+ +

Sass

+ 
$time: 3s
+@mixin foobar
+	transition: all linear 800ms
+.foo
+	transition: all linear 0.8s
+
+ +

Scss

+ 
$time: 1s;
+.foo {
+	transition: all linear 10s
+}
+ +

Stylus

+ 
time = 3s
+.foo
+	transition: all linear 0.5s
+
+ +
+ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/plugins/previewer-time/prism-previewer-time.css b/plugins/previewer-time/prism-previewer-time.css new file mode 100644 index 0000000000..d0363a2a3b --- /dev/null +++ b/plugins/previewer-time/prism-previewer-time.css @@ -0,0 +1,90 @@ +@-webkit-keyframes prism-previewer-time { + 0% { + stroke-dasharray: 0, 500; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 100, 500; + stroke-dashoffset: 0; + } + 100% { + stroke-dasharray: 0, 500; + stroke-dashoffset: -100; + } +} + +@-o-keyframes prism-previewer-time { + 0% { + stroke-dasharray: 0, 500; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 100, 500; + stroke-dashoffset: 0; + } + 100% { + stroke-dasharray: 0, 500; + stroke-dashoffset: -100; + } +} + +@-moz-keyframes prism-previewer-time { + 0% { + stroke-dasharray: 0, 500; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 100, 500; + stroke-dashoffset: 0; + } + 100% { + stroke-dasharray: 0, 500; + stroke-dashoffset: -100; + } +} + +@keyframes prism-previewer-time { + 0% { + stroke-dasharray: 0, 500; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 100, 500; + stroke-dashoffset: 0; + } + 100% { + stroke-dasharray: 0, 500; + stroke-dashoffset: -100; + } +} + +.prism-previewer-time:before { + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + background: #fff; +} +.prism-previewer-time:after { + margin-top: 4px; +} +.prism-previewer-time svg { + width: 32px; + height: 32px; + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + transform: rotate(-90deg); +} +.prism-previewer-time circle { + fill: transparent; + stroke: hsl(200, 10%, 20%); + stroke-opacity: 0.9; + stroke-width: 32; + stroke-dasharray: 0, 500; + stroke-dashoffset: 0; + -webkit-animation: prism-previewer-time linear infinite 3s; + -moz-animation: prism-previewer-time linear infinite 3s; + -o-animation: prism-previewer-time linear infinite 3s; + animation: prism-previewer-time linear infinite 3s; +} \ No newline at end of file diff --git a/plugins/previewer-time/prism-previewer-time.js b/plugins/previewer-time/prism-previewer-time.js new file mode 100644 index 0000000000..c72f8bb230 --- /dev/null +++ b/plugins/previewer-time/prism-previewer-time.js @@ -0,0 +1,98 @@ +(function() { + + if ( + typeof self !== 'undefined' && !self.Prism || + typeof global !== 'undefined' && !global.Prism + ) { + return; + } + + var 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 + } + ] + }; + + 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, { + 'time': /(?:\b|\B-|(?=\B\.))\d*\.?\d+m?s\b/i + }, root); + env.grammar = Prism.languages[lang]; + + languages[env.language] = {initialized: true}; + } + }); + } + }); + + if (Prism.plugins.Previewer) { + 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 = '' + + '' + + ''; + }); + } + +}()); \ No newline at end of file diff --git a/plugins/previewer-time/prism-previewer-time.min.js b/plugins/previewer-time/prism-previewer-time.min.js new file mode 100644 index 0000000000..0256b4a853 --- /dev/null +++ b/plugins/previewer-time/prism-previewer-time.min.js @@ -0,0 +1 @@ +!function(){if(("undefined"==typeof self||self.Prism)&&("undefined"==typeof global||global.Prism)){var s={css:!0,less:!0,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:!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(e){if(e.language&&s[e.language]&&!s[e.language].initialized){var a=s[e.language];"Array"!==Prism.util.type(a)&&(a=[a]),a.forEach(function(a){var i,r,n,l;a===!0?(i="important",r=e.language,a=e.language):(i=a.before||"important",r=a.inside||a.lang,n=a.root||Prism.languages,l=a.skip,a=e.language),!l&&Prism.languages[a]&&(Prism.languages.insertBefore(r,i,{time:/(?:\b|\B-|(?=\B\.))\d*\.?\d+m?s\b/i},n),e.grammar=Prism.languages[a],s[e.language]={initialized:!0})})}}),Prism.plugins.Previewer&&new Prism.plugins.Previewer("time",function(s){var e=parseFloat(s),a=s.match(/[a-z]+$/i);return e&&a?(a=a[0],this.querySelector("circle").style.animationDuration=2*e+a,!0):!1},"*",function(){this._elt.innerHTML=''})}}(); \ No newline at end of file