Skip to content

Commit

Permalink
Merge pull request #773 from Golmote/previewer-easing
Browse files Browse the repository at this point in the history 
Plugin: easing previewer
  • Loading branch information
@Golmote
Golmote committed Sep 27, 2015
2 parents 89c5f34 + 074947e commit 513137c
Show file tree
Hide file tree
Showing 6 changed files with 225 additions and 2 deletions.
6 changes: 5 additions & 1 deletion plugins/previewer-base/prism-previewer-base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,13 +45,14 @@
* @param {string[]|string=} supportedLanguages Aliases of the languages this previewer must be enabled for. Defaults to "*", all languages.
* @constructor
*/
var Previewer = function (type, updater, supportedLanguages) {
var Previewer = function (type, updater, supportedLanguages, initializer) {
this._elt = null;
this._type = type;
this._clsRegexp = RegExp('(?:^|\\s)' + type + '(?=$|\\s)');
this._token = null;
this.updater = updater;
this._mouseout = this.mouseout.bind(this);
this.initializer = initializer;

var self = this;

Expand Down Expand Up @@ -84,6 +85,9 @@
this._elt = document.createElement('div');
this._elt.className = 'prism-previewer prism-previewer-' + this._type;
document.body.appendChild(this._elt);
if(this.initializer) {
this.initializer();
}
};

/**
Expand Down
2 changes: 1 addition & 1 deletion plugins/previewer-base/prism-previewer-base.min.js
View file

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

80 changes: 80 additions & 0 deletions plugins/previewer-easing/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.png" />
<title>Previewer: Easing ▲ 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-easing/prism-previewer-easing.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: Easing</h2>
<p>Previewer for CSS easing functions.</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 easing 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: color 0.3s linear;
}</code></pre>

<h2>Less</h2>
<pre class="language-less"><code>#header a {
transition-timing-function: ease;
}</code></pre>

<h2>Sass</h2>
<pre class="language-sass"><code>.foo
transition: color 0.3s ease-in-out
</code></pre>

<h2>Scss</h2>
<pre class="language-scss"><code>$attr: background;
.foo {
transition: #{$attr}-color 0.3s cubic-bezier(0.9,0.1,.2,.4);
}</code></pre>

<h2>Stylus</h2>
<pre class="language-stylus"><code>.foo
transition: color 0.3s ease-out
</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-easing/prism-previewer-easing.js"></script>
<script src="utopia.js"></script>
<script src="components.js"></script>
<script src="code.js"></script>


</body>
</html>
29 changes: 29 additions & 0 deletions plugins/previewer-easing/prism-previewer-easing.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
.prism-previewer-easing {
margin-top: -76px;
margin-left: -30px;
width: 60px;
height: 60px;
background: #333;
}
.prism-previewer-easing.flipped {
margin-bottom: -116px;
}
.prism-previewer-easing svg {
width: 60px;
height: 60px;
}
.prism-previewer-easing circle {
fill: hsl(200, 10%, 20%);
stroke: white;
}
.prism-previewer-easing path {
fill: none;
stroke: white;
stroke-linecap: round;
stroke-width: 4;
}
.prism-previewer-easing line {
stroke: white;
stroke-opacity: 0.5;
stroke-width: 2;
}
109 changes: 109 additions & 0 deletions plugins/previewer-easing/prism-previewer-easing.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
(function() {

if (
typeof self !== 'undefined' && !self.Prism ||
typeof global !== 'undefined' && !global.Prism
) {
return;
}

var languages = {
'css': true,
'less': true,
'sass': {
lang: 'sass',
inside: 'inside',
root: Prism.languages.sass && Prism.languages.sass['property-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, {
'easing': /\bcubic-bezier\((?:-?\d*\.?\d+,\s*){3}-?\d*\.?\d+\)\B|\b(?:linear|ease(?:-in)?(?:-out)?)(?=\s|[;}]|$)/i
}, root);
env.grammar = Prism.languages[lang];

languages[env.language] = {initialized: true};
}
});
}
});

if (Prism.plugins.Previewer) {
new Prism.plugins.Previewer('easing', function (value) {

value = {
'linear': '0,0,1,1',
'ease': '.25,.1,.25,1',
'ease-in': '.42,0,1,1',
'ease-out': '0,0,.58,1',
'ease-in-out':'.42,0,.58,1'
}[value] || value;

var p = value.match(/-?\d*\.?\d+/g);

if(p.length === 4) {
p = p.map(function(p, i) { return (i % 2? 1 - p : p) * 100; });

this.querySelector('path').setAttribute('d', 'M0,100 C' + p[0] + ',' + p[1] + ', ' + p[2] + ',' + p[3] + ', 100,0');

var lines = this.querySelectorAll('line');
lines[0].setAttribute('x2', p[0]);
lines[0].setAttribute('y2', p[1]);
lines[1].setAttribute('x2', p[2]);
lines[1].setAttribute('y2', p[3]);

return true;
}

return false;
}, '*', function () {
this._elt.innerHTML = '<svg viewBox="-20 -20 140 140" width="100" height="100">' +
'<defs>' +
'<marker id="prism-previewer-easing-marker" viewBox="0 0 4 4" refX="2" refY="2" markerUnits="strokeWidth">' +
'<circle cx="2" cy="2" r="1.5" />' +
'</marker>' +
'</defs>' +
'<path d="M0,100 C20,50, 40,30, 100,0" />' +
'<line x1="0" y1="100" x2="20" y2="50" marker-start="url(#prism-previewer-easing-marker)" marker-end="url(#prism-previewer-easing-marker)" />' +
'<line x1="100" y1="0" x2="40" y2="30" marker-start="url(#prism-previewer-easing-marker)" marker-end="url(#prism-previewer-easing-marker)" />' +
'</svg>';
});
}

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

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

0 comments on commit 513137c

Please sign in to comment.