Skip to content

Commit

Permalink
Merge pull request #791 from Golmote/prism-previewer-angle
Browse files Browse the repository at this point in the history
Plugin: angle previewer
  • Loading branch information
Golmote committed Oct 10, 2015
2 parents 88173de + b938d2c commit a434c86
Show file tree
Hide file tree
Showing 5 changed files with 241 additions and 0 deletions.
5 changes: 5 additions & 0 deletions components.js
Original file line number Diff line number Diff line change
Expand Up @@ -537,6 +537,11 @@ var components = {
"require": "previewer-base",
"owner": "Golmote"
},
"previewer-angle": {
"title": "Previewer: Angle",
"require": "previewer-base",
"owner": "Golmote"
},
"autoloader": {
"title": "Autoloader",
"owner": "Golmote",
Expand Down
85 changes: 85 additions & 0 deletions plugins/previewer-angle/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.png" />
<title>Previewer: Angle ▲ Prism plugins</title>
<base href="../.." />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
<link rel="stylesheet" href="plugins/previewer-base/prism-previewer-base.css" data-noprefix />
<link rel="stylesheet" href="plugins/previewer-angle/prism-previewer-angle.css" data-noprefix />
<script src="prefixfree.min.js"></script>

<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
<script src="http://www.google-analytics.com/ga.js" async></script>
</head>
<body>

<header>
<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>

<h2>Previewer: Angle</h2>
<p>Previewer for CSS angles.</p>
</header>

<section class="language-markup">
<h1>How to use</h1>

<p>You don't need to do anything. With this plugin loaded, a previewer will appear on hovering the angle values in code blocks.</p>
<p>This plugin is compatible with CSS, Less, Sass, Scss and Stylus.</p>
</section>

<section>
<h1>Examples</h1>

<h2>CSS</h2>
<pre class="language-css"><code>div {
transform: rotate(10deg);
}</code></pre>

<h2>Less</h2>
<pre class="language-less"><code>@angle: 3rad;
#header a {
transform: rotate(.4turn)
}</code></pre>

<h2>Sass</h2>
<pre class="language-sass"><code>$angle: 380grad
@mixin foobar
transform: rotate(-120deg)
.foo
transform: rotate(18rad)
</code></pre>

<h2>Scss</h2>
<pre class="language-scss"><code>$angle: 1.8turn;
.foo {
transform: rotate(-3rad)
}</code></pre>

<h2>Stylus</h2>
<pre class="language-stylus"><code>angle = 357deg
.foo
transform: rotate(100grad)
</code></pre>

</section>

<footer data-src="templates/footer.html" data-type="text/html"></footer>

<script src="prism.js"></script>
<script src="components/prism-less.js"></script>
<script src="components/prism-sass.js"></script>
<script src="components/prism-scss.js"></script>
<script src="components/prism-stylus.js"></script>
<script src="plugins/previewer-base/prism-previewer-base.js"></script>
<script src="plugins/previewer-angle/prism-previewer-angle.js"></script>
<script src="utopia.js"></script>
<script src="components.js"></script>
<script src="code.js"></script>


</body>
</html>
32 changes: 32 additions & 0 deletions plugins/previewer-angle/prism-previewer-angle.css
Original file line number Diff line number Diff line change
@@ -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;
}
118 changes: 118 additions & 0 deletions plugins/previewer-angle/prism-previewer-angle.js
Original file line number Diff line number Diff line change
@@ -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 = '<svg viewBox="0 0 64 64">' +
'<circle r="16" cy="32" cx="32"></circle>' +
'</svg>';
});
}

}());
1 change: 1 addition & 0 deletions plugins/previewer-angle/prism-previewer-angle.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit a434c86

Please sign in to comment.