From 2fcc7d05577132bd8f31674a663a58c9617f8cba Mon Sep 17 00:00:00 2001 From: Golmote Date: Mon, 5 Oct 2015 09:14:05 +0200 Subject: [PATCH] Plugin: angle previewer --- components.js | 5 + plugins/previewer-angle/index.html | 85 +++++++++++++ .../previewer-angle/prism-previewer-angle.css | 32 +++++ .../previewer-angle/prism-previewer-angle.js | 118 ++++++++++++++++++ .../prism-previewer-angle.min.js | 1 + 5 files changed, 241 insertions(+) create mode 100644 plugins/previewer-angle/index.html create mode 100644 plugins/previewer-angle/prism-previewer-angle.css create mode 100644 plugins/previewer-angle/prism-previewer-angle.js create mode 100644 plugins/previewer-angle/prism-previewer-angle.min.js diff --git a/components.js b/components.js index 4a10f44986..13abdf27ad 100644 --- a/components.js +++ b/components.js @@ -523,6 +523,11 @@ var components = { "require": "previewer-base", "owner": "Golmote" }, + "previewer-angle": { + "title": "Previewer: Angle", + "require": "previewer-base", + "owner": "Golmote" + }, "autoloader": { "title": "Autoloader", "owner": "Golmote", diff --git a/plugins/previewer-angle/index.html b/plugins/previewer-angle/index.html new file mode 100644 index 0000000000..166c84a04d --- /dev/null +++ b/plugins/previewer-angle/index.html @@ -0,0 +1,85 @@ + + + + + + + Previewer: Angle ▲ Prism plugins + + + + + + + + + + + + +
+
+ +

Previewer: Angle

+

Previewer for CSS angles.

+
+ +
+

How to use

+ +

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

+

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

+
+ +
+

Examples

+ +

CSS

+ 
div {
+	transform: rotate(10deg);
+}
+ +

Less

+ 
@angle: 3rad;
+#header a {
+	transform: rotate(.4turn)
+}
+ +

Sass

+ 
$angle: 380grad
+@mixin foobar
+	transform: rotate(-120deg)
+.foo
+	transform: rotate(18rad)
+
+ +

Scss

+ 
$angle: 1.8turn;
+.foo {
+	transform: rotate(-3rad)
+}
+ +

Stylus

+ 
angle = 357deg
+.foo
+	transform: rotate(100grad)
+
+ +
+ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/plugins/previewer-angle/prism-previewer-angle.css b/plugins/previewer-angle/prism-previewer-angle.css new file mode 100644 index 0000000000..31490c3a58 --- /dev/null +++ b/plugins/previewer-angle/prism-previewer-angle.css @@ -0,0 +1,32 @@ +.prism-previewer-angle:before { + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + background: #fff; +} +.prism-previewer-angle:after { + margin-top: 4px; +} +.prism-previewer-angle 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-angle[data-negative] svg { + -webkit-transform: scaleX(-1) rotate(-90deg); + -moz-transform: scaleX(-1) rotate(-90deg); + -ms-transform: scaleX(-1) rotate(-90deg); + -o-transform: scaleX(-1) rotate(-90deg); + transform: scaleX(-1) rotate(-90deg); +} +.prism-previewer-angle circle { + fill: transparent; + stroke: hsl(200, 10%, 20%); + stroke-opacity: 0.9; + stroke-width: 32; + stroke-dasharray: 0, 500; +} \ No newline at end of file diff --git a/plugins/previewer-angle/prism-previewer-angle.js b/plugins/previewer-angle/prism-previewer-angle.js new file mode 100644 index 0000000000..36bc28dd07 --- /dev/null +++ b/plugins/previewer-angle/prism-previewer-angle.js @@ -0,0 +1,118 @@ +(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: '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) { + 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, { + 'angle': /(?:\b|\B-|(?=\B\.))\d*\.?\d+(?:deg|g?rad|turn)\b/i + }, root); + env.grammar = Prism.languages[lang]; + + languages[env.language] = {initialized: true}; + } + }); + } + }); + + if (Prism.plugins.Previewer) { + new Prism.plugins.Previewer('angle', function(value) { + var num = parseFloat(value); + var unit = value.match(/[a-z]+$/i); + var max, 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 = '' + + '' + + ''; + }); + } + +}()); \ No newline at end of file diff --git a/plugins/previewer-angle/prism-previewer-angle.min.js b/plugins/previewer-angle/prism-previewer-angle.min.js new file mode 100644 index 0000000000..e5ca18870f --- /dev/null +++ b/plugins/previewer-angle/prism-previewer-angle.min.js @@ -0,0 +1 @@ +!function(){if(("undefined"==typeof self||self.Prism)&&("undefined"==typeof global||global.Prism)){var a={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:"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(s){if(s.language&&a[s.language]&&!a[s.language].initialized){var e=a[s.language];"Array"!==Prism.util.type(e)&&(e=[e]),e.forEach(function(e){var i,r,n,g;e===!0?(i="important",r=s.language,e=s.language):(i=e.before||"important",r=e.inside||e.lang,n=e.root||Prism.languages,g=e.skip,e=s.language),!g&&Prism.languages[e]&&(Prism.languages.insertBefore(r,i,{angle:/(?:\b|\B-|(?=\B\.))\d*\.?\d+(?:deg|g?rad|turn)\b/i},n),s.grammar=Prism.languages[e],a[s.language]={initialized:!0})})}}),Prism.plugins.Previewer&&new Prism.plugins.Previewer("angle",function(a){var s,e,i=parseFloat(a),r=a.match(/[a-z]+$/i);if(!i||!r)return!1;switch(r=r[0]){case"deg":s=360;break;case"grad":s=400;break;case"rad":s=2*Math.PI;break;case"turn":s=1}return e=100*i/s,e%=100,this[(0>i?"set":"remove")+"Attribute"]("data-negative",""),this.querySelector("circle").style.strokeDasharray=Math.abs(e)+",500",!0},"*",function(){this._elt.innerHTML=''})}}(); \ No newline at end of file