Merge pull request #790 from Golmote/prism-previewer-time

Plugin: time previewer
PrismJS · Oct 10, 2015 · 88173de · 88173de
2 parents f1c41db + 752650e
commit 88173de
Show file tree

Hide file tree

Showing 5 changed files with 279 additions and 0 deletions.
diff --git a/components.js b/components.js
@@ -532,6 +532,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
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+	<meta charset="utf-8" />
+	<link rel="shortcut icon" href="favicon.png" />
+	<title>Previewer: Time ▲ 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-time/prism-previewer-time.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: Time</h2>
+	<p>Previewer for CSS times.</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 time 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 {
+	transition: all linear 3s;
+}</code></pre>
+
+	<h2>Less</h2>
+	<pre class="language-less"><code>@time: 1s;
+#header a {
+	transition: all linear 2s;
+}</code></pre>
+
+	<h2>Sass</h2>
+	<pre class="language-sass"><code>$time: 3s
+@mixin foobar
+	transition: all linear 800ms
+.foo
+	transition: all linear 0.8s
+</code></pre>
+
+	<h2>Scss</h2>
+	<pre class="language-scss"><code>$time: 1s;
+.foo {
+	transition: all linear 10s
+}</code></pre>
+
+	<h2>Stylus</h2>
+	<pre class="language-stylus"><code>time = 3s
+.foo
+	transition: all linear 0.5s
+</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-time/prism-previewer-time.js"></script>
+<script src="utopia.js"></script>
+<script src="components.js"></script>
+<script src="code.js"></script>
+
+
+</body>
+</html>
diff --git a/plugins/previewer-time/prism-previewer-time.css 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;
+}
diff --git a/plugins/previewer-time/prism-previewer-time.js 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 = '<svg viewBox="0 0 64 64">' +
+				'<circle r="16" cy="32" cx="32"></circle>' +
+			'</svg>';
+		});
+	}
+
+}());
diff --git a/plugins/previewer-time/prism-previewer-time.min.js b/plugins/previewer-time/prism-previewer-time.min.js