Skip to content

Commit 35658fc

Browse files
chinchangchinchang
authored
Merge pull request chinchang#14 from chinchang/preprocessors
Preprocessors
2 parents ded1b10 + 6790f9d commit 35658fc

31 files changed

+3588
-2136
lines changed

‎.eslintrc.json‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
"no-implicit-coercion": "error",
100100
"no-implicit-globals": "off",
101101
"no-implied-eval": "error",
102-
"no-inline-comments": "error",
102+
"no-inline-comments": "off",
103103
"no-inner-declarations": [
104104
"error",
105105
"functions"
@@ -118,7 +118,7 @@
118118
"no-multiple-empty-lines": "error",
119119
"no-native-reassign": "error",
120120
"no-negated-condition": "off",
121-
"no-nested-ternary": "error",
121+
"no-nested-ternary": "off",
122122
"no-new": "error",
123123
"no-new-func": "error",
124124
"no-new-object": "error",
@@ -178,9 +178,9 @@
178178
"no-with": "error",
179179
"object-curly-spacing": [
180180
"error",
181-
"never"
181+
"always"
182182
],
183-
"object-property-newline": "error",
183+
"object-property-newline": "off",
184184
"object-shorthand": "off",
185185
"one-var": "off",
186186
"one-var-declaration-per-line": "error",
@@ -195,7 +195,7 @@
195195
"padded-blocks": "off",
196196
"prefer-arrow-callback": "off",
197197
"prefer-const": "error",
198-
"prefer-reflect": "error",
198+
"prefer-reflect": "off",
199199
"prefer-rest-params": "off",
200200
"prefer-spread": "error",
201201
"prefer-template": "off",
@@ -235,7 +235,7 @@
235235
"error",
236236
"never"
237237
],
238-
"valid-jsdoc": "error",
238+
"valid-jsdoc": "off",
239239
"vars-on-top": "off",
240240
"wrap-regex": "error",
241241
"yield-star-spacing": "error",
@@ -248,6 +248,17 @@
248248
"chrome": true,
249249
"CodeMirror": true,
250250
"Split": true,
251-
"emmetCodeMirror": true
251+
"emmetCodeMirror": true,
252+
"deferred": true,
253+
"$": true,
254+
"$all": true,
255+
"CoffeeScript": true,
256+
"Babel": true,
257+
"Sass": true,
258+
"less": true,
259+
"marked": true,
260+
"jade": true,
261+
"loadJS": true,
262+
"Promise": true
252263
}
253264
}

‎src/Inconsolata-Regular.ttf‎

78.6 KB
Binary file not shown.

‎src/deferred.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
(function() {
2+
window.deferred = function () {
3+
var d = {};
4+
var promise = new Promise(function (resolve, reject) {
5+
d.resolve = resolve;
6+
d.reject = reject;
7+
});
8+
9+
d.promise = promise;
10+
return Object.assign(d, promise);
11+
};
12+
})();

‎src/dropdown.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// Dropdown.js
2+
3+
(function($all) {
4+
var openDropdown;
5+
6+
// Closes all dropdowns except the passed one.
7+
function closeOpenDropdown(except) {
8+
if (openDropdown && (!except || except !== openDropdown)) {
9+
openDropdown.classList.remove('open');
10+
openDropdown = null;
11+
}
12+
}
13+
function init() {
14+
var dropdowns = [].slice.call($all('[dropdown]'));
15+
dropdowns.forEach(function (dropdown) {
16+
dropdown.addEventListener('click', function (e) {
17+
closeOpenDropdown(e.currentTarget);
18+
e.currentTarget.classList.toggle('open');
19+
openDropdown = e.currentTarget;
20+
e.stopPropagation();
21+
});
22+
});
23+
24+
document.addEventListener('click', function () {
25+
closeOpenDropdown();
26+
});
27+
}
28+
29+
init();
30+
})($all);

‎src/index.html‎

Lines changed: 119 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,15 @@
55
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
66
<link rel="stylesheet" href="lib/codemirror/theme/monokai.css">
77
<link rel="stylesheet" href="lib/hint.min.css">
8-
98
<style>
9+
@font-face {
10+
font-family: 'Inconsolata';
11+
font-style: normal;
12+
font-weight: 400;
13+
src: local('Inconsolata'), url(../Inconsolata-Regular.ttf) format('truetype');
14+
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
15+
}
16+
1017
body {
1118
margin: 0;
1219
padding: 0;
@@ -29,6 +36,16 @@
2936
.fr {
3037
float: right;
3138
}
39+
.caret {
40+
display: inline-block;
41+
width: 0;
42+
height: 0;
43+
border: 6px solid transparent;
44+
border-top-color: currentColor;
45+
position: relative;
46+
top: 5px;
47+
margin-left: 7px;
48+
}
3249
.main-container {
3350
position: absolute;
3451
left: 0; right: 0;
@@ -59,9 +76,9 @@
5976
height: 33%;
6077
overflow: hidden;
6178
position: relative;
62-
animation: pop-in 0.4s cubic-bezier(.71,1.7,.77,1.24) forwards 0.2s;
63-
animation: pop-in 0.4s ease forwards 0.2s;
64-
opacity: 0;
79+
/*animation: pop-in 0.4s cubic-bezier(.71,1.7,.77,1.24) forwards 0.2s;*/
80+
/*animation: pop-in 0.4s ease forwards 0.2s;*/
81+
/*opacity: 0;*/
6582
}
6683
.layout-2 .code-wrap {
6784
height: auto;
@@ -74,17 +91,12 @@
7491
animation-delay: 0.4s;
7592
}
7693

77-
.code-wrap:after {
78-
content: attr(data-type);
79-
text-transform: uppercase;
80-
font-size: 65px;
81-
display: block;
82-
position: absolute;
83-
top: 4px;
84-
color: rgba(255,255,255,0.04);
85-
left: 52px;
86-
z-index: 3;
87-
pointer-events: none;
94+
.code-wrap__header {
95+
padding: 5px 20px;
96+
background: rgba(0,0,0,0.55);
97+
color: #888;
98+
border-bottom: 1px solid rgba(0,0,0,0.3);
99+
font-weight: bold;
88100
}
89101
@keyframes pop-in {
90102
from { transform: scale(0.9); opacity: 0; }
@@ -94,9 +106,12 @@
94106
/* Codemirror */
95107
.Codemirror {
96108
width: 100%;
97-
height: 100%;
109+
height: calc(100% - 25px); /* 25px for header */
98110
font-size: 16px;
99111
}
112+
.Codemirror pre {
113+
font-family: 'Inconsolata', monospace;
114+
}
100115
.cm-s-monokai .CodeMirror-linenumber {
101116
color:rgba(255,255,255,0.2);
102117
}
@@ -167,6 +182,9 @@
167182
.mode-btn.selected svg {
168183
fill: rgba(255, 255, 255, 0.45);
169184
}
185+
.gutter {
186+
background: rgba(0,0,0,0.2);
187+
}
170188
.gutter-horizontal {
171189
cursor: ew-resize;
172190
}
@@ -274,16 +292,92 @@
274292
top: 2px;
275293
left: 2px;
276294
}
295+
.btn-group {
296+
position: relative;
297+
}
298+
.btn-group {
299+
cursor: pointer;
300+
}
301+
.dropdown__menu {
302+
position: absolute;
303+
top: 100%;
304+
left: 0;
305+
padding: 0;
306+
margin: 0;
307+
min-width: 200px;
308+
display: block;
309+
list-style: none;
310+
border-radius: 4px;
311+
overflow: hidden;
312+
opacity: 0;
313+
visibility: hidden;
314+
transition: 0.25s ease;
315+
transform: translateY(10px);
316+
z-index: 5;
317+
background: white;
318+
}
319+
.dropdown__menu > li > a {
320+
display: block;
321+
padding: 15px;
322+
color: #333;
323+
cursor: pointer;
324+
}
325+
.dropdown__menu > li > a:hover {
326+
background: #ff8c00;
327+
color: white;
328+
}
329+
.dropdown__menu > li:not(:last-child) {
330+
border-bottom: 1px solid rgba(0,0,0,0.05);
331+
}
332+
333+
.open .dropdown__menu {
334+
opacity: 1;
335+
visibility: visible;
336+
transform: translateY(0);
337+
}
277338
</style>
278339
</head>
279340

280341
<body class="layout-">
281342
<div class="main-container">
282343
<div class="content-wrap flex flex-grow">
283344
<div class="code-side" id="js-code-side">
284-
<div id="js-html-code" data-type="html" class="code-wrap"></div>
285-
<div id="js-css-code" data-type="css" class="code-wrap"></div>
286-
<div id="js-js-code" data-type="js" class="code-wrap"></div>
345+
<div id="js-html-code" data-type="html" class="code-wrap">
346+
<div class="code-wrap__header">
347+
<div class="btn-group" dropdown>
348+
<span id="js-html-mode-label">HTML</span><span class="caret"></span>
349+
<ul class="js-modes-menu dropdown__menu">
350+
<li><a data-type="html" data-mode="html">HTML</a></li>
351+
<li><a data-type="html" data-mode="markdown">Markdown</a></li>
352+
<li><a data-type="html" data-mode="jade">Jade</a></li>
353+
</ul>
354+
</div>
355+
</div>
356+
</div>
357+
<div id="js-css-code" data-type="css" class="code-wrap">
358+
<div class="code-wrap__header">
359+
<div class="btn-group" dropdown>
360+
<span id="js-css-mode-label">CSS</span><span class="caret"></span>
361+
<ul class="js-modes-menu dropdown__menu">
362+
<li><a data-type="css" data-mode="css">CSS</a></li>
363+
<li><a data-type="css" data-mode="scss">SCSS</a></li>
364+
<li><a data-type="css" data-mode="less">LESS</a></li>
365+
</ul>
366+
</div>
367+
</div>
368+
</div>
369+
<div id="js-js-code" data-type="js" class="code-wrap">
370+
<div class="code-wrap__header">
371+
<div class="btn-group" dropdown>
372+
<span id="js-js-mode-label">JS</span><span class="caret"></span>
373+
<ul class="js-modes-menu dropdown__menu">
374+
<li><a data-type="js" data-mode="js">JS</a></li>
375+
<li><a data-type="js" data-mode="coffee">CoffeeScript</a></li>
376+
<li><a data-type="js" data-mode="es6">ES6 (Babel)</a></li>
377+
</ul>
378+
</div>
379+
</div>
380+
</div>
287381
</div>
288382
<div class="demo-side" id="js-demo-side">
289383
<iframe src="about://blank" frameborder="0" id="demo-frame"></iframe>
@@ -421,6 +515,8 @@ <h1>Whats new?</h1>
421515
<script src="lib/codemirror/addon/edit/matchbrackets.js"></script>
422516
<script src="lib/codemirror/addon/edit/closebrackets.js"></script>
423517
<script src="lib/codemirror/addon/edit/closetag.js"></script>
518+
<script src="lib/codemirror/addon/comment/comment.js"></script>
519+
<script src="lib/codemirror/addon/mode/loadmode.js"></script>
424520

425521
<script src="lib/codemirror/mode/xml/xml.js"></script>
426522
<script src="lib/codemirror/mode/javascript/javascript.js"></script>
@@ -430,7 +526,11 @@ <h1>Whats new?</h1>
430526
<script src="lib/emmet.js"></script>
431527

432528
<script src="lib/split.js"></script>
529+
530+
<script src="deferred.js"></script>
531+
<script src="loader.js"></script>
433532
<script src="script.js"></script>
533+
<script src="dropdown.js"></script>
434534

435535
</body>
436536
</html>

‎src/lib/babel.min.js‎

Lines changed: 32 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)