Skip to content

Commit 513137c

Browse files
GolmoteGolmote
committed
Merge pull request #773 from Golmote/previewer-easing
Plugin: easing previewer
2 parents 89c5f34 + 074947e commit 513137c

File tree

6 files changed

+225
-2
lines changed

6 files changed

+225
-2
lines changed

‎plugins/previewer-base/prism-previewer-base.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,14 @@
4545
* @param {string[]|string=} supportedLanguages Aliases of the languages this previewer must be enabled for. Defaults to "*", all languages.
4646
* @constructor
4747
*/
48-
var Previewer = function (type, updater, supportedLanguages) {
48+
var Previewer = function (type, updater, supportedLanguages, initializer) {
4949
this._elt = null;
5050
this._type = type;
5151
this._clsRegexp = RegExp('(?:^|\\s)' + type + '(?=$|\\s)');
5252
this._token = null;
5353
this.updater = updater;
5454
this._mouseout = this.mouseout.bind(this);
55+
this.initializer = initializer;
5556

5657
var self = this;
5758

@@ -84,6 +85,9 @@
8485
this._elt = document.createElement('div');
8586
this._elt.className = 'prism-previewer prism-previewer-' + this._type;
8687
document.body.appendChild(this._elt);
88+
if(this.initializer) {
89+
this.initializer();
90+
}
8791
};
8892

8993
/**

‎plugins/previewer-base/prism-previewer-base.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/previewer-easing/index.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
5+
<meta charset="utf-8" />
6+
<link rel="shortcut icon" href="favicon.png" />
7+
<title>Previewer: Easing ▲ Prism plugins</title>
8+
<base href="../.." />
9+
<link rel="stylesheet" href="style.css" />
10+
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
11+
<link rel="stylesheet" href="plugins/previewer-base/prism-previewer-base.css" data-noprefix />
12+
<link rel="stylesheet" href="plugins/previewer-easing/prism-previewer-easing.css" data-noprefix />
13+
<script src="prefixfree.min.js"></script>
14+
15+
<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
16+
<script src="http://www.google-analytics.com/ga.js" async></script>
17+
</head>
18+
<body>
19+
20+
<header>
21+
<div class="intro" data-src="templates/header-plugins.html" data-type="text/html"></div>
22+
23+
<h2>Previewer: Easing</h2>
24+
<p>Previewer for CSS easing functions.</p>
25+
</header>
26+
27+
<section class="language-markup">
28+
<h1>How to use</h1>
29+
30+
<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>
31+
<p>This plugin is compatible with CSS, Less, Sass, Scss and Stylus.</p>
32+
</section>
33+
34+
<section>
35+
<h1>Examples</h1>
36+
37+
<h2>CSS</h2>
38+
<pre class="language-css"><code>div {
39+
transition: color 0.3s linear;
40+
}</code></pre>
41+
42+
<h2>Less</h2>
43+
<pre class="language-less"><code>#header a {
44+
transition-timing-function: ease;
45+
}</code></pre>
46+
47+
<h2>Sass</h2>
48+
<pre class="language-sass"><code>.foo
49+
transition: color 0.3s ease-in-out
50+
</code></pre>
51+
52+
<h2>Scss</h2>
53+
<pre class="language-scss"><code>$attr: background;
54+
.foo {
55+
transition: #{$attr}-color 0.3s cubic-bezier(0.9,0.1,.2,.4);
56+
}</code></pre>
57+
58+
<h2>Stylus</h2>
59+
<pre class="language-stylus"><code>.foo
60+
transition: color 0.3s ease-out
61+
</code></pre>
62+
63+
</section>
64+
65+
<footer data-src="templates/footer.html" data-type="text/html"></footer>
66+
67+
<script src="prism.js"></script>
68+
<script src="components/prism-less.js"></script>
69+
<script src="components/prism-sass.js"></script>
70+
<script src="components/prism-scss.js"></script>
71+
<script src="components/prism-stylus.js"></script>
72+
<script src="plugins/previewer-base/prism-previewer-base.js"></script>
73+
<script src="plugins/previewer-easing/prism-previewer-easing.js"></script>
74+
<script src="utopia.js"></script>
75+
<script src="components.js"></script>
76+
<script src="code.js"></script>
77+
78+
79+
</body>
80+
</html>

‎plugins/previewer-easing/prism-previewer-easing.css

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.prism-previewer-easing {
2+
margin-top: -76px;
3+
margin-left: -30px;
4+
width: 60px;
5+
height: 60px;
6+
background: #333;
7+
}
8+
.prism-previewer-easing.flipped {
9+
margin-bottom: -116px;
10+
}
11+
.prism-previewer-easing svg {
12+
width: 60px;
13+
height: 60px;
14+
}
15+
.prism-previewer-easing circle {
16+
fill: hsl(200, 10%, 20%);
17+
stroke: white;
18+
}
19+
.prism-previewer-easing path {
20+
fill: none;
21+
stroke: white;
22+
stroke-linecap: round;
23+
stroke-width: 4;
24+
}
25+
.prism-previewer-easing line {
26+
stroke: white;
27+
stroke-opacity: 0.5;
28+
stroke-width: 2;
29+
}

‎plugins/previewer-easing/prism-previewer-easing.js

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
(function() {
2+
3+
if (
4+
typeof self !== 'undefined' && !self.Prism ||
5+
typeof global !== 'undefined' && !global.Prism
6+
) {
7+
return;
8+
}
9+
10+
var languages = {
11+
'css': true,
12+
'less': true,
13+
'sass': {
14+
lang: 'sass',
15+
inside: 'inside',
16+
root: Prism.languages.sass && Prism.languages.sass['property-line']
17+
},
18+
'scss': true,
19+
'stylus': [
20+
{
21+
lang: 'stylus',
22+
before: 'hexcode',
23+
inside: 'rest',
24+
root: Prism.languages.stylus && Prism.languages.stylus['property-declaration'].inside
25+
},
26+
{
27+
lang: 'stylus',
28+
before: 'hexcode',
29+
inside: 'rest',
30+
root: Prism.languages.stylus && Prism.languages.stylus['variable-declaration'].inside
31+
}
32+
]
33+
};
34+
35+
Prism.hooks.add('before-highlight', function (env) {
36+
if (env.language && languages[env.language] && !languages[env.language].initialized) {
37+
var lang = languages[env.language];
38+
if (Prism.util.type(lang) !== 'Array') {
39+
lang = [lang];
40+
}
41+
lang.forEach(function(lang) {
42+
var before, inside, root, skip;
43+
if (lang === true) {
44+
before = 'important';
45+
inside = env.language;
46+
lang = env.language;
47+
} else {
48+
before = lang.before || 'important';
49+
inside = lang.inside || lang.lang;
50+
root = lang.root || Prism.languages;
51+
skip = lang.skip;
52+
lang = env.language;
53+
}
54+
55+
if (!skip && Prism.languages[lang]) {
56+
Prism.languages.insertBefore(inside, before, {
57+
'easing': /\bcubic-bezier\((?:-?\d*\.?\d+,\s*){3}-?\d*\.?\d+\)\B|\b(?:linear|ease(?:-in)?(?:-out)?)(?=\s|[;}]|$)/i
58+
}, root);
59+
env.grammar = Prism.languages[lang];
60+
61+
languages[env.language] = {initialized: true};
62+
}
63+
});
64+
}
65+
});
66+
67+
if (Prism.plugins.Previewer) {
68+
new Prism.plugins.Previewer('easing', function (value) {
69+
70+
value = {
71+
'linear': '0,0,1,1',
72+
'ease': '.25,.1,.25,1',
73+
'ease-in': '.42,0,1,1',
74+
'ease-out': '0,0,.58,1',
75+
'ease-in-out':'.42,0,.58,1'
76+
}[value] || value;
77+
78+
var p = value.match(/-?\d*\.?\d+/g);
79+
80+
if(p.length === 4) {
81+
p = p.map(function(p, i) { return (i % 2? 1 - p : p) * 100; });
82+
83+
this.querySelector('path').setAttribute('d', 'M0,100 C' + p[0] + ',' + p[1] + ', ' + p[2] + ',' + p[3] + ', 100,0');
84+
85+
var lines = this.querySelectorAll('line');
86+
lines[0].setAttribute('x2', p[0]);
87+
lines[0].setAttribute('y2', p[1]);
88+
lines[1].setAttribute('x2', p[2]);
89+
lines[1].setAttribute('y2', p[3]);
90+
91+
return true;
92+
}
93+
94+
return false;
95+
}, '*', function () {
96+
this._elt.innerHTML = '<svg viewBox="-20 -20 140 140" width="100" height="100">' +
97+
'<defs>' +
98+
'<marker id="prism-previewer-easing-marker" viewBox="0 0 4 4" refX="2" refY="2" markerUnits="strokeWidth">' +
99+
'<circle cx="2" cy="2" r="1.5" />' +
100+
'</marker>' +
101+
'</defs>' +
102+
'<path d="M0,100 C20,50, 40,30, 100,0" />' +
103+
'<line x1="0" y1="100" x2="20" y2="50" marker-start="url(#prism-previewer-easing-marker)" marker-end="url(#prism-previewer-easing-marker)" />' +
104+
'<line x1="100" y1="0" x2="40" y2="30" marker-start="url(#prism-previewer-easing-marker)" marker-end="url(#prism-previewer-easing-marker)" />' +
105+
'</svg>';
106+
});
107+
}
108+
109+
}());

‎plugins/previewer-easing/prism-previewer-easing.min.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)