Plugin: angle previewer

PrismJS · Oct 5, 2015 · 2fcc7d0 · 2fcc7d0
1 parent 7c7ab4e
commit 2fcc7d0
Show file tree

Hide file tree

Showing 5 changed files with 241 additions and 0 deletions.
diff --git 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
@@ -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>
diff --git a/plugins/previewer-angle/prism-previewer-angle.css 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;
+}
diff --git a/plugins/previewer-angle/prism-previewer-angle.js 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 = '<svg viewBox="0 0 64 64">' +
+				'<circle r="16" cy="32" cx="32"></circle>' +
+			'</svg>';
+		});
+	}
+
+}());
diff --git a/plugins/previewer-angle/prism-previewer-angle.min.js b/plugins/previewer-angle/prism-previewer-angle.min.js