89 |
93 |
94 |
95 |
90 |
92 | npm install boron
91 |
96 |
98 |
99 | loading...
97 |
81 |
85 | 82 | Boron 83 |
84 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
--------------------------------------------------------------------------------
/example/dist/javascript.js:
--------------------------------------------------------------------------------
1 | // CodeMirror, copyright (c) by Marijn Haverbeke and others
2 | // Distributed under an MIT license: http://codemirror.net/LICENSE
3 |
4 | // TODO actually recognize syntax of TypeScript constructs
5 |
6 | (function(mod) {
7 | if (typeof exports == "object" && typeof module == "object") // CommonJS
8 | mod(require("../../lib/codemirror"));
9 | else if (typeof define == "function" && define.amd) // AMD
10 | define(["../../lib/codemirror"], mod);
11 | else // Plain browser env
12 | mod(CodeMirror);
13 | })(function(CodeMirror) {
14 | "use strict";
15 |
16 | CodeMirror.defineMode("javascript", function(config, parserConfig) {
17 | var indentUnit = config.indentUnit;
18 | var statementIndent = parserConfig.statementIndent;
19 | var jsonldMode = parserConfig.jsonld;
20 | var jsonMode = parserConfig.json || jsonldMode;
21 | var isTS = parserConfig.typescript;
22 | var wordRE = parserConfig.wordCharacters || /[\w$\xa1-\uffff]/;
23 |
24 | // Tokenizer
25 |
26 | var keywords = function(){
27 | function kw(type) {return {type: type, style: "keyword"};}
28 | var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c");
29 | var operator = kw("operator"), atom = {type: "atom", style: "atom"};
30 |
31 | var jsKeywords = {
32 | "if": kw("if"), "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B,
33 | "return": C, "break": C, "continue": C, "new": kw("new"), "delete": C, "throw": C, "debugger": C,
34 | "var": kw("var"), "const": kw("var"), "let": kw("var"),
35 | "function": kw("function"), "catch": kw("catch"),
36 | "for": kw("for"), "switch": kw("switch"), "case": kw("case"), "default": kw("default"),
37 | "in": operator, "typeof": operator, "instanceof": operator,
38 | "true": atom, "false": atom, "null": atom, "undefined": atom, "NaN": atom, "Infinity": atom,
39 | "this": kw("this"), "class": kw("class"), "super": kw("atom"),
40 | "yield": C, "export": kw("export"), "import": kw("import"), "extends": C
41 | };
42 |
43 | // Extend the 'normal' keywords with the TypeScript language extensions
44 | if (isTS) {
45 | var type = {type: "variable", style: "variable-3"};
46 | var tsKeywords = {
47 | // object-like things
48 | "interface": kw("interface"),
49 | "extends": kw("extends"),
50 | "constructor": kw("constructor"),
51 |
52 | // scope modifiers
53 | "public": kw("public"),
54 | "private": kw("private"),
55 | "protected": kw("protected"),
56 | "static": kw("static"),
57 |
58 | // types
59 | "string": type, "number": type, "boolean": type, "any": type
60 | };
61 |
62 | for (var attr in tsKeywords) {
63 | jsKeywords[attr] = tsKeywords[attr];
64 | }
65 | }
66 |
67 | return jsKeywords;
68 | }();
69 |
70 | var isOperatorChar = /[+\-*&%=<>!?|~^]/;
71 | var isJsonldKeyword = /^@(context|id|value|language|type|container|list|set|reverse|index|base|vocab|graph)"/;
72 |
73 | function readRegexp(stream) {
74 | var escaped = false, next, inSet = false;
75 | while ((next = stream.next()) != null) {
76 | if (!escaped) {
77 | if (next == "/" && !inSet) return;
78 | if (next == "[") inSet = true;
79 | else if (inSet && next == "]") inSet = false;
80 | }
81 | escaped = !escaped && next == "\\";
82 | }
83 | }
84 |
85 | // Used as scratch variables to communicate multiple values without
86 | // consing up tons of objects.
87 | var type, content;
88 | function ret(tp, style, cont) {
89 | type = tp; content = cont;
90 | return style;
91 | }
92 | function tokenBase(stream, state) {
93 | var ch = stream.next();
94 | if (ch == '"' || ch == "'") {
95 | state.tokenize = tokenString(ch);
96 | return state.tokenize(stream, state);
97 | } else if (ch == "." && stream.match(/^\d+(?:[eE][+\-]?\d+)?/)) {
98 | return ret("number", "number");
99 | } else if (ch == "." && stream.match("..")) {
100 | return ret("spread", "meta");
101 | } else if (/[\[\]{}\(\),;\:\.]/.test(ch)) {
102 | return ret(ch);
103 | } else if (ch == "=" && stream.eat(">")) {
104 | return ret("=>", "operator");
105 | } else if (ch == "0" && stream.eat(/x/i)) {
106 | stream.eatWhile(/[\da-f]/i);
107 | return ret("number", "number");
108 | } else if (ch == "0" && stream.eat(/o/i)) {
109 | stream.eatWhile(/[0-7]/i);
110 | return ret("number", "number");
111 | } else if (ch == "0" && stream.eat(/b/i)) {
112 | stream.eatWhile(/[01]/i);
113 | return ret("number", "number");
114 | } else if (/\d/.test(ch)) {
115 | stream.match(/^\d*(?:\.\d*)?(?:[eE][+\-]?\d+)?/);
116 | return ret("number", "number");
117 | } else if (ch == "/") {
118 | if (stream.eat("*")) {
119 | state.tokenize = tokenComment;
120 | return tokenComment(stream, state);
121 | } else if (stream.eat("/")) {
122 | stream.skipToEnd();
123 | return ret("comment", "comment");
124 | } else if (/^(?:operator|sof|keyword c|case|new|[\[{}\(,;:])$/.test(state.lastType)) {
125 | readRegexp(stream);
126 | stream.match(/^\b(([gimyu])(?![gimyu]*\2))+\b/);
127 | return ret("regexp", "string-2");
128 | } else {
129 | stream.eatWhile(isOperatorChar);
130 | return ret("operator", "operator", stream.current());
131 | }
132 | } else if (ch == "`") {
133 | state.tokenize = tokenQuasi;
134 | return tokenQuasi(stream, state);
135 | } else if (ch == "#") {
136 | stream.skipToEnd();
137 | return ret("error", "error");
138 | } else if (isOperatorChar.test(ch)) {
139 | stream.eatWhile(isOperatorChar);
140 | return ret("operator", "operator", stream.current());
141 | } else if (wordRE.test(ch)) {
142 | stream.eatWhile(wordRE);
143 | var word = stream.current(), known = keywords.propertyIsEnumerable(word) && keywords[word];
144 | return (known && state.lastType != ".") ? ret(known.type, known.style, word) :
145 | ret("variable", "variable", word);
146 | }
147 | }
148 |
149 | function tokenString(quote) {
150 | return function(stream, state) {
151 | var escaped = false, next;
152 | if (jsonldMode && stream.peek() == "@" && stream.match(isJsonldKeyword)){
153 | state.tokenize = tokenBase;
154 | return ret("jsonld-keyword", "meta");
155 | }
156 | while ((next = stream.next()) != null) {
157 | if (next == quote && !escaped) break;
158 | escaped = !escaped && next == "\\";
159 | }
160 | if (!escaped) state.tokenize = tokenBase;
161 | return ret("string", "string");
162 | };
163 | }
164 |
165 | function tokenComment(stream, state) {
166 | var maybeEnd = false, ch;
167 | while (ch = stream.next()) {
168 | if (ch == "/" && maybeEnd) {
169 | state.tokenize = tokenBase;
170 | break;
171 | }
172 | maybeEnd = (ch == "*");
173 | }
174 | return ret("comment", "comment");
175 | }
176 |
177 | function tokenQuasi(stream, state) {
178 | var escaped = false, next;
179 | while ((next = stream.next()) != null) {
180 | if (!escaped && (next == "`" || next == "$" && stream.eat("{"))) {
181 | state.tokenize = tokenBase;
182 | break;
183 | }
184 | escaped = !escaped && next == "\\";
185 | }
186 | return ret("quasi", "string-2", stream.current());
187 | }
188 |
189 | var brackets = "([{}])";
190 | // This is a crude lookahead trick to try and notice that we're
191 | // parsing the argument patterns for a fat-arrow function before we
192 | // actually hit the arrow token. It only works if the arrow is on
193 | // the same line as the arguments and there's no strange noise
194 | // (comments) in between. Fallback is to only notice when we hit the
195 | // arrow, and not declare the arguments as locals for the arrow
196 | // body.
197 | function findFatArrow(stream, state) {
198 | if (state.fatArrowAt) state.fatArrowAt = null;
199 | var arrow = stream.string.indexOf("=>", stream.start);
200 | if (arrow < 0) return;
201 |
202 | var depth = 0, sawSomething = false;
203 | for (var pos = arrow - 1; pos >= 0; --pos) {
204 | var ch = stream.string.charAt(pos);
205 | var bracket = brackets.indexOf(ch);
206 | if (bracket >= 0 && bracket < 3) {
207 | if (!depth) { ++pos; break; }
208 | if (--depth == 0) break;
209 | } else if (bracket >= 3 && bracket < 6) {
210 | ++depth;
211 | } else if (wordRE.test(ch)) {
212 | sawSomething = true;
213 | } else if (/["'\/]/.test(ch)) {
214 | return;
215 | } else if (sawSomething && !depth) {
216 | ++pos;
217 | break;
218 | }
219 | }
220 | if (sawSomething && !depth) state.fatArrowAt = pos;
221 | }
222 |
223 | // Parser
224 |
225 | var atomicTypes = {"atom": true, "number": true, "variable": true, "string": true, "regexp": true, "this": true, "jsonld-keyword": true};
226 |
227 | function JSLexical(indented, column, type, align, prev, info) {
228 | this.indented = indented;
229 | this.column = column;
230 | this.type = type;
231 | this.prev = prev;
232 | this.info = info;
233 | if (align != null) this.align = align;
234 | }
235 |
236 | function inScope(state, varname) {
237 | for (var v = state.localVars; v; v = v.next)
238 | if (v.name == varname) return true;
239 | for (var cx = state.context; cx; cx = cx.prev) {
240 | for (var v = cx.vars; v; v = v.next)
241 | if (v.name == varname) return true;
242 | }
243 | }
244 |
245 | function parseJS(state, style, type, content, stream) {
246 | var cc = state.cc;
247 | // Communicate our context to the combinators.
248 | // (Less wasteful than consing up a hundred closures on every call.)
249 | cx.state = state; cx.stream = stream; cx.marked = null, cx.cc = cc; cx.style = style;
250 |
251 | if (!state.lexical.hasOwnProperty("align"))
252 | state.lexical.align = true;
253 |
254 | while(true) {
255 | var combinator = cc.length ? cc.pop() : jsonMode ? expression : statement;
256 | if (combinator(type, content)) {
257 | while(cc.length && cc[cc.length - 1].lex)
258 | cc.pop()();
259 | if (cx.marked) return cx.marked;
260 | if (type == "variable" && inScope(state, content)) return "variable-2";
261 | return style;
262 | }
263 | }
264 | }
265 |
266 | // Combinator utils
267 |
268 | var cx = {state: null, column: null, marked: null, cc: null};
269 | function pass() {
270 | for (var i = arguments.length - 1; i >= 0; i--) cx.cc.push(arguments[i]);
271 | }
272 | function cont() {
273 | pass.apply(null, arguments);
274 | return true;
275 | }
276 | function register(varname) {
277 | function inList(list) {
278 | for (var v = list; v; v = v.next)
279 | if (v.name == varname) return true;
280 | return false;
281 | }
282 | var state = cx.state;
283 | cx.marked = "def";
284 | if (state.context) {
285 | if (inList(state.localVars)) return;
286 | state.localVars = {name: varname, next: state.localVars};
287 | } else {
288 | if (inList(state.globalVars)) return;
289 | if (parserConfig.globalVars)
290 | state.globalVars = {name: varname, next: state.globalVars};
291 | }
292 | }
293 |
294 | // Combinators
295 |
296 | var defaultVars = {name: "this", next: {name: "arguments"}};
297 | function pushcontext() {
298 | cx.state.context = {prev: cx.state.context, vars: cx.state.localVars};
299 | cx.state.localVars = defaultVars;
300 | }
301 | function popcontext() {
302 | cx.state.localVars = cx.state.context.vars;
303 | cx.state.context = cx.state.context.prev;
304 | }
305 | function pushlex(type, info) {
306 | var result = function() {
307 | var state = cx.state, indent = state.indented;
308 | if (state.lexical.type == "stat") indent = state.lexical.indented;
309 | else for (var outer = state.lexical; outer && outer.type == ")" && outer.align; outer = outer.prev)
310 | indent = outer.indented;
311 | state.lexical = new JSLexical(indent, cx.stream.column(), type, null, state.lexical, info);
312 | };
313 | result.lex = true;
314 | return result;
315 | }
316 | function poplex() {
317 | var state = cx.state;
318 | if (state.lexical.prev) {
319 | if (state.lexical.type == ")")
320 | state.indented = state.lexical.indented;
321 | state.lexical = state.lexical.prev;
322 | }
323 | }
324 | poplex.lex = true;
325 |
326 | function expect(wanted) {
327 | function exp(type) {
328 | if (type == wanted) return cont();
329 | else if (wanted == ";") return pass();
330 | else return cont(exp);
331 | };
332 | return exp;
333 | }
334 |
335 | function statement(type, value) {
336 | if (type == "var") return cont(pushlex("vardef", value.length), vardef, expect(";"), poplex);
337 | if (type == "keyword a") return cont(pushlex("form"), expression, statement, poplex);
338 | if (type == "keyword b") return cont(pushlex("form"), statement, poplex);
339 | if (type == "{") return cont(pushlex("}"), block, poplex);
340 | if (type == ";") return cont();
341 | if (type == "if") {
342 | if (cx.state.lexical.info == "else" && cx.state.cc[cx.state.cc.length - 1] == poplex)
343 | cx.state.cc.pop()();
344 | return cont(pushlex("form"), expression, statement, poplex, maybeelse);
345 | }
346 | if (type == "function") return cont(functiondef);
347 | if (type == "for") return cont(pushlex("form"), forspec, statement, poplex);
348 | if (type == "variable") return cont(pushlex("stat"), maybelabel);
349 | if (type == "switch") return cont(pushlex("form"), expression, pushlex("}", "switch"), expect("{"),
350 | block, poplex, poplex);
351 | if (type == "case") return cont(expression, expect(":"));
352 | if (type == "default") return cont(expect(":"));
353 | if (type == "catch") return cont(pushlex("form"), pushcontext, expect("("), funarg, expect(")"),
354 | statement, poplex, popcontext);
355 | if (type == "class") return cont(pushlex("form"), className, poplex);
356 | if (type == "export") return cont(pushlex("stat"), afterExport, poplex);
357 | if (type == "import") return cont(pushlex("stat"), afterImport, poplex);
358 | return pass(pushlex("stat"), expression, expect(";"), poplex);
359 | }
360 | function expression(type) {
361 | return expressionInner(type, false);
362 | }
363 | function expressionNoComma(type) {
364 | return expressionInner(type, true);
365 | }
366 | function expressionInner(type, noComma) {
367 | if (cx.state.fatArrowAt == cx.stream.start) {
368 | var body = noComma ? arrowBodyNoComma : arrowBody;
369 | if (type == "(") return cont(pushcontext, pushlex(")"), commasep(pattern, ")"), poplex, expect("=>"), body, popcontext);
370 | else if (type == "variable") return pass(pushcontext, pattern, expect("=>"), body, popcontext);
371 | }
372 |
373 | var maybeop = noComma ? maybeoperatorNoComma : maybeoperatorComma;
374 | if (atomicTypes.hasOwnProperty(type)) return cont(maybeop);
375 | if (type == "function") return cont(functiondef, maybeop);
376 | if (type == "keyword c") return cont(noComma ? maybeexpressionNoComma : maybeexpression);
377 | if (type == "(") return cont(pushlex(")"), maybeexpression, comprehension, expect(")"), poplex, maybeop);
378 | if (type == "operator" || type == "spread") return cont(noComma ? expressionNoComma : expression);
379 | if (type == "[") return cont(pushlex("]"), arrayLiteral, poplex, maybeop);
380 | if (type == "{") return contCommasep(objprop, "}", null, maybeop);
381 | if (type == "quasi") return pass(quasi, maybeop);
382 | if (type == "new") return cont(maybeTarget(noComma));
383 | return cont();
384 | }
385 | function maybeexpression(type) {
386 | if (type.match(/[;\}\)\],]/)) return pass();
387 | return pass(expression);
388 | }
389 | function maybeexpressionNoComma(type) {
390 | if (type.match(/[;\}\)\],]/)) return pass();
391 | return pass(expressionNoComma);
392 | }
393 |
394 | function maybeoperatorComma(type, value) {
395 | if (type == ",") return cont(expression);
396 | return maybeoperatorNoComma(type, value, false);
397 | }
398 | function maybeoperatorNoComma(type, value, noComma) {
399 | var me = noComma == false ? maybeoperatorComma : maybeoperatorNoComma;
400 | var expr = noComma == false ? expression : expressionNoComma;
401 | if (type == "=>") return cont(pushcontext, noComma ? arrowBodyNoComma : arrowBody, popcontext);
402 | if (type == "operator") {
403 | if (/\+\+|--/.test(value)) return cont(me);
404 | if (value == "?") return cont(expression, expect(":"), expr);
405 | return cont(expr);
406 | }
407 | if (type == "quasi") { return pass(quasi, me); }
408 | if (type == ";") return;
409 | if (type == "(") return contCommasep(expressionNoComma, ")", "call", me);
410 | if (type == ".") return cont(property, me);
411 | if (type == "[") return cont(pushlex("]"), maybeexpression, expect("]"), poplex, me);
412 | }
413 | function quasi(type, value) {
414 | if (type != "quasi") return pass();
415 | if (value.slice(value.length - 2) != "${") return cont(quasi);
416 | return cont(expression, continueQuasi);
417 | }
418 | function continueQuasi(type) {
419 | if (type == "}") {
420 | cx.marked = "string-2";
421 | cx.state.tokenize = tokenQuasi;
422 | return cont(quasi);
423 | }
424 | }
425 | function arrowBody(type) {
426 | findFatArrow(cx.stream, cx.state);
427 | return pass(type == "{" ? statement : expression);
428 | }
429 | function arrowBodyNoComma(type) {
430 | findFatArrow(cx.stream, cx.state);
431 | return pass(type == "{" ? statement : expressionNoComma);
432 | }
433 | function maybeTarget(noComma) {
434 | return function(type) {
435 | if (type == ".") return cont(noComma ? targetNoComma : target);
436 | else return pass(noComma ? expressionNoComma : expression);
437 | };
438 | }
439 | function target(_, value) {
440 | if (value == "target") { cx.marked = "keyword"; return cont(maybeoperatorComma); }
441 | }
442 | function targetNoComma(_, value) {
443 | if (value == "target") { cx.marked = "keyword"; return cont(maybeoperatorNoComma); }
444 | }
445 | function maybelabel(type) {
446 | if (type == ":") return cont(poplex, statement);
447 | return pass(maybeoperatorComma, expect(";"), poplex);
448 | }
449 | function property(type) {
450 | if (type == "variable") {cx.marked = "property"; return cont();}
451 | }
452 | function objprop(type, value) {
453 | if (type == "variable" || cx.style == "keyword") {
454 | cx.marked = "property";
455 | if (value == "get" || value == "set") return cont(getterSetter);
456 | return cont(afterprop);
457 | } else if (type == "number" || type == "string") {
458 | cx.marked = jsonldMode ? "property" : (cx.style + " property");
459 | return cont(afterprop);
460 | } else if (type == "jsonld-keyword") {
461 | return cont(afterprop);
462 | } else if (type == "[") {
463 | return cont(expression, expect("]"), afterprop);
464 | } else if (type == "spread") {
465 | return cont(expression);
466 | }
467 | }
468 | function getterSetter(type) {
469 | if (type != "variable") return pass(afterprop);
470 | cx.marked = "property";
471 | return cont(functiondef);
472 | }
473 | function afterprop(type) {
474 | if (type == ":") return cont(expressionNoComma);
475 | if (type == "(") return pass(functiondef);
476 | }
477 | function commasep(what, end) {
478 | function proceed(type) {
479 | if (type == ",") {
480 | var lex = cx.state.lexical;
481 | if (lex.info == "call") lex.pos = (lex.pos || 0) + 1;
482 | return cont(what, proceed);
483 | }
484 | if (type == end) return cont();
485 | return cont(expect(end));
486 | }
487 | return function(type) {
488 | if (type == end) return cont();
489 | return pass(what, proceed);
490 | };
491 | }
492 | function contCommasep(what, end, info) {
493 | for (var i = 3; i < arguments.length; i++)
494 | cx.cc.push(arguments[i]);
495 | return cont(pushlex(end, info), commasep(what, end), poplex);
496 | }
497 | function block(type) {
498 | if (type == "}") return cont();
499 | return pass(statement, block);
500 | }
501 | function maybetype(type) {
502 | if (isTS && type == ":") return cont(typedef);
503 | }
504 | function maybedefault(_, value) {
505 | if (value == "=") return cont(expressionNoComma);
506 | }
507 | function typedef(type) {
508 | if (type == "variable") {cx.marked = "variable-3"; return cont();}
509 | }
510 | function vardef() {
511 | return pass(pattern, maybetype, maybeAssign, vardefCont);
512 | }
513 | function pattern(type, value) {
514 | if (type == "variable") { register(value); return cont(); }
515 | if (type == "spread") return cont(pattern);
516 | if (type == "[") return contCommasep(pattern, "]");
517 | if (type == "{") return contCommasep(proppattern, "}");
518 | }
519 | function proppattern(type, value) {
520 | if (type == "variable" && !cx.stream.match(/^\s*:/, false)) {
521 | register(value);
522 | return cont(maybeAssign);
523 | }
524 | if (type == "variable") cx.marked = "property";
525 | if (type == "spread") return cont(pattern);
526 | return cont(expect(":"), pattern, maybeAssign);
527 | }
528 | function maybeAssign(_type, value) {
529 | if (value == "=") return cont(expressionNoComma);
530 | }
531 | function vardefCont(type) {
532 | if (type == ",") return cont(vardef);
533 | }
534 | function maybeelse(type, value) {
535 | if (type == "keyword b" && value == "else") return cont(pushlex("form", "else"), statement, poplex);
536 | }
537 | function forspec(type) {
538 | if (type == "(") return cont(pushlex(")"), forspec1, expect(")"), poplex);
539 | }
540 | function forspec1(type) {
541 | if (type == "var") return cont(vardef, expect(";"), forspec2);
542 | if (type == ";") return cont(forspec2);
543 | if (type == "variable") return cont(formaybeinof);
544 | return pass(expression, expect(";"), forspec2);
545 | }
546 | function formaybeinof(_type, value) {
547 | if (value == "in" || value == "of") { cx.marked = "keyword"; return cont(expression); }
548 | return cont(maybeoperatorComma, forspec2);
549 | }
550 | function forspec2(type, value) {
551 | if (type == ";") return cont(forspec3);
552 | if (value == "in" || value == "of") { cx.marked = "keyword"; return cont(expression); }
553 | return pass(expression, expect(";"), forspec3);
554 | }
555 | function forspec3(type) {
556 | if (type != ")") cont(expression);
557 | }
558 | function functiondef(type, value) {
559 | if (value == "*") {cx.marked = "keyword"; return cont(functiondef);}
560 | if (type == "variable") {register(value); return cont(functiondef);}
561 | if (type == "(") return cont(pushcontext, pushlex(")"), commasep(funarg, ")"), poplex, statement, popcontext);
562 | }
563 | function funarg(type) {
564 | if (type == "spread") return cont(funarg);
565 | return pass(pattern, maybetype, maybedefault);
566 | }
567 | function className(type, value) {
568 | if (type == "variable") {register(value); return cont(classNameAfter);}
569 | }
570 | function classNameAfter(type, value) {
571 | if (value == "extends") return cont(expression, classNameAfter);
572 | if (type == "{") return cont(pushlex("}"), classBody, poplex);
573 | }
574 | function classBody(type, value) {
575 | if (type == "variable" || cx.style == "keyword") {
576 | if (value == "static") {
577 | cx.marked = "keyword";
578 | return cont(classBody);
579 | }
580 | cx.marked = "property";
581 | if (value == "get" || value == "set") return cont(classGetterSetter, functiondef, classBody);
582 | return cont(functiondef, classBody);
583 | }
584 | if (value == "*") {
585 | cx.marked = "keyword";
586 | return cont(classBody);
587 | }
588 | if (type == ";") return cont(classBody);
589 | if (type == "}") return cont();
590 | }
591 | function classGetterSetter(type) {
592 | if (type != "variable") return pass();
593 | cx.marked = "property";
594 | return cont();
595 | }
596 | function afterExport(_type, value) {
597 | if (value == "*") { cx.marked = "keyword"; return cont(maybeFrom, expect(";")); }
598 | if (value == "default") { cx.marked = "keyword"; return cont(expression, expect(";")); }
599 | return pass(statement);
600 | }
601 | function afterImport(type) {
602 | if (type == "string") return cont();
603 | return pass(importSpec, maybeFrom);
604 | }
605 | function importSpec(type, value) {
606 | if (type == "{") return contCommasep(importSpec, "}");
607 | if (type == "variable") register(value);
608 | if (value == "*") cx.marked = "keyword";
609 | return cont(maybeAs);
610 | }
611 | function maybeAs(_type, value) {
612 | if (value == "as") { cx.marked = "keyword"; return cont(importSpec); }
613 | }
614 | function maybeFrom(_type, value) {
615 | if (value == "from") { cx.marked = "keyword"; return cont(expression); }
616 | }
617 | function arrayLiteral(type) {
618 | if (type == "]") return cont();
619 | return pass(expressionNoComma, maybeArrayComprehension);
620 | }
621 | function maybeArrayComprehension(type) {
622 | if (type == "for") return pass(comprehension, expect("]"));
623 | if (type == ",") return cont(commasep(maybeexpressionNoComma, "]"));
624 | return pass(commasep(expressionNoComma, "]"));
625 | }
626 | function comprehension(type) {
627 | if (type == "for") return cont(forspec, comprehension);
628 | if (type == "if") return cont(expression, comprehension);
629 | }
630 |
631 | function isContinuedStatement(state, textAfter) {
632 | return state.lastType == "operator" || state.lastType == "," ||
633 | isOperatorChar.test(textAfter.charAt(0)) ||
634 | /[,.]/.test(textAfter.charAt(0));
635 | }
636 |
637 | // Interface
638 |
639 | return {
640 | startState: function(basecolumn) {
641 | var state = {
642 | tokenize: tokenBase,
643 | lastType: "sof",
644 | cc: [],
645 | lexical: new JSLexical((basecolumn || 0) - indentUnit, 0, "block", false),
646 | localVars: parserConfig.localVars,
647 | context: parserConfig.localVars && {vars: parserConfig.localVars},
648 | indented: 0
649 | };
650 | if (parserConfig.globalVars && typeof parserConfig.globalVars == "object")
651 | state.globalVars = parserConfig.globalVars;
652 | return state;
653 | },
654 |
655 | token: function(stream, state) {
656 | if (stream.sol()) {
657 | if (!state.lexical.hasOwnProperty("align"))
658 | state.lexical.align = false;
659 | state.indented = stream.indentation();
660 | findFatArrow(stream, state);
661 | }
662 | if (state.tokenize != tokenComment && stream.eatSpace()) return null;
663 | var style = state.tokenize(stream, state);
664 | if (type == "comment") return style;
665 | state.lastType = type == "operator" && (content == "++" || content == "--") ? "incdec" : type;
666 | return parseJS(state, style, type, content, stream);
667 | },
668 |
669 | indent: function(state, textAfter) {
670 | if (state.tokenize == tokenComment) return CodeMirror.Pass;
671 | if (state.tokenize != tokenBase) return 0;
672 | var firstChar = textAfter && textAfter.charAt(0), lexical = state.lexical;
673 | // Kludge to prevent 'maybelse' from blocking lexical scope pops
674 | if (!/^\s*else\b/.test(textAfter)) for (var i = state.cc.length - 1; i >= 0; --i) {
675 | var c = state.cc[i];
676 | if (c == poplex) lexical = lexical.prev;
677 | else if (c != maybeelse) break;
678 | }
679 | if (lexical.type == "stat" && firstChar == "}") lexical = lexical.prev;
680 | if (statementIndent && lexical.type == ")" && lexical.prev.type == "stat")
681 | lexical = lexical.prev;
682 | var type = lexical.type, closing = firstChar == type;
683 |
684 | if (type == "vardef") return lexical.indented + (state.lastType == "operator" || state.lastType == "," ? lexical.info + 1 : 0);
685 | else if (type == "form" && firstChar == "{") return lexical.indented;
686 | else if (type == "form") return lexical.indented + indentUnit;
687 | else if (type == "stat")
688 | return lexical.indented + (isContinuedStatement(state, textAfter) ? statementIndent || indentUnit : 0);
689 | else if (lexical.info == "switch" && !closing && parserConfig.doubleIndentSwitch != false)
690 | return lexical.indented + (/^(?:case|default)\b/.test(textAfter) ? indentUnit : 2 * indentUnit);
691 | else if (lexical.align) return lexical.column + (closing ? 0 : 1);
692 | else return lexical.indented + (closing ? 0 : indentUnit);
693 | },
694 |
695 | electricInput: /^\s*(?:case .*?:|default:|\{|\})$/,
696 | blockCommentStart: jsonMode ? null : "/*",
697 | blockCommentEnd: jsonMode ? null : "*/",
698 | lineComment: jsonMode ? null : "//",
699 | fold: "brace",
700 | closeBrackets: "()[]{}''\"\"``",
701 |
702 | helperType: jsonMode ? "json" : "javascript",
703 | jsonldMode: jsonldMode,
704 | jsonMode: jsonMode
705 | };
706 | });
707 |
708 | CodeMirror.registerHelper("wordChars", "javascript", /[\w$]/);
709 |
710 | CodeMirror.defineMIME("text/javascript", "javascript");
711 | CodeMirror.defineMIME("text/ecmascript", "javascript");
712 | CodeMirror.defineMIME("application/javascript", "javascript");
713 | CodeMirror.defineMIME("application/x-javascript", "javascript");
714 | CodeMirror.defineMIME("application/ecmascript", "javascript");
715 | CodeMirror.defineMIME("application/json", {name: "javascript", json: true});
716 | CodeMirror.defineMIME("application/x-json", {name: "javascript", json: true});
717 | CodeMirror.defineMIME("application/ld+json", {name: "javascript", jsonld: true});
718 | CodeMirror.defineMIME("text/typescript", { name: "javascript", typescript: true });
719 | CodeMirror.defineMIME("application/typescript", { name: "javascript", typescript: true });
720 |
721 | });
722 |
--------------------------------------------------------------------------------
/example/src/app.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var ReactDOM = require('react-dom');
3 |
4 | var selfCleaningTimeout = {
5 | componentDidUpdate: function() {
6 | clearTimeout(this.timeoutID);
7 | },
8 | setTimeout: function() {
9 | clearTimeout(this.timeoutID);
10 | this.timeoutID = setTimeout.apply(null, arguments);
11 | }
12 | };
13 |
14 | var ComponentPreview = React.createClass({
15 | propTypes: {
16 | code: React.PropTypes.string.isRequired
17 | },
18 |
19 | mixins: [selfCleaningTimeout],
20 |
21 | render: function() {
22 | return ;
23 | },
24 |
25 | componentDidMount: function() {
26 | this.executeCode();
27 | },
28 |
29 | componentDidUpdate: function(prevProps) {
30 | // execute code only when the state's not being updated by switching tab
31 | // this avoids re-displaying the error, which comes after a certain delay
32 | if (this.props.code !== prevProps.code) {
33 | this.executeCode();
34 | }
35 | },
36 |
37 | compileCode: function() {
38 | return JSXTransformer.transform(
39 | '(function() {' +
40 | this.props.code +
41 | '\n})();',
42 | { harmony: true }
43 | ).code;
44 | },
45 |
46 | executeCode: function() {
47 | var mountNode = this.refs.mount;
48 |
49 | try {
50 | ReactDOM.unmountComponentAtNode(mountNode);
51 | } catch (e) { }
52 |
53 | try {
54 | var compiledCode = this.compileCode();
55 | ReactDOM.render(eval(compiledCode), mountNode);
56 | } catch (err) {
57 |
58 | this.setTimeout(function() {
59 | ReactDOM.render(
60 | { err.stack || err.toString() }
,
61 | mountNode
62 | );
63 | }, 500);
64 | }
65 | }
66 | });
67 |
68 | var IS_MOBILE = (
69 | navigator.userAgent.match(/Android/i)
70 | || navigator.userAgent.match(/webOS/i)
71 | || navigator.userAgent.match(/iPhone/i)
72 | || navigator.userAgent.match(/iPad/i)
73 | || navigator.userAgent.match(/iPod/i)
74 | || navigator.userAgent.match(/BlackBerry/i)
75 | || navigator.userAgent.match(/Windows Phone/i)
76 | );
77 |
78 | var CodeMirrorEditor = React.createClass({
79 | componentDidMount: function() {
80 | if (IS_MOBILE) return;
81 |
82 | this.editor = CodeMirror.fromTextArea(this.refs.editor, {
83 | mode: 'javascript',
84 | //lineNumbers: true,
85 | viewportMargin: Infinity,
86 | lineWrapping: true,
87 | smartIndent: false, // javascript mode does bad things with jsx indents
88 | matchBrackets: true,
89 | readOnly: this.props.readOnly
90 | });
91 | this.editor.on('change', this.handleChange);
92 | },
93 |
94 | componentDidUpdate: function() {
95 | if (this.props.readOnly) {
96 | this.editor.setValue(this.props.codeText);
97 | }
98 | },
99 |
100 | handleChange: function() {
101 | if (!this.props.readOnly && this.props.onChange) {
102 | this.props.onChange(this.editor.getValue());
103 | }
104 | },
105 |
106 | render: function() {
107 | // wrap in a div to fully contain CodeMirror
108 | var editor;
109 |
110 | if (IS_MOBILE) {
111 | editor = {this.props.codeText};
112 | } else {
113 | editor = ;
114 | }
115 |
116 | return (
117 |
118 | {editor}
119 |
120 | );
121 | }
122 | });
123 |
124 | var ReactPlayground = React.createClass({
125 | propTypes: {
126 | codeText: React.PropTypes.string.isRequired
127 | },
128 |
129 | getInitialState: function() {
130 | return {
131 | code: this.props.codeText
132 | };
133 | },
134 |
135 | handleCodeChange: function(code) {
136 | this.setState({
137 | code: code
138 | });
139 | },
140 |
141 | changeTab: function(){
142 | if(this.state.tab == 'preview')
143 | this.setState({
144 | tab: 'edit'
145 | })
146 | else
147 | this.setState({
148 | tab: 'preview'
149 | })
150 | },
151 |
152 | render: function() {
153 |
154 | var tabText = this.state.tab == 'preview'? 'Live Preview': 'Live Edit';
155 | var code =
156 |
;
161 |
162 | var preview =
163 |
165 |
166 | return (
167 |
168 |
171 | );
172 | }
173 | });
174 |
175 | for(var id=1; id<10; id++){
176 | var example = document.getElementById('example'+id);
177 | if(example){
178 | ReactDOM.render(
179 | {tabText}
169 | {this.state.tab == 'preview'? code: preview}
170 |
81 |
85 | 82 | Boron 83 |
84 |
89 |
93 |
94 |
95 |
90 |
92 | npm install boron
91 |
96 |
98 |
99 | loading...
97 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var browserify = require('browserify'),
2 | shim = require('browserify-shim'),
3 | chalk = require('chalk'),
4 | del = require('del'),
5 | vinyPaths = require('vinyl-paths'),
6 | gulp = require('gulp'),
7 | bump = require('gulp-bump'),
8 | connect = require('gulp-connect'),
9 | deploy = require("gulp-gh-pages"),
10 | git = require("gulp-git"),
11 | less = require('gulp-less'),
12 | rename = require('gulp-rename'),
13 | streamify = require('gulp-streamify'),
14 | uglify = require('gulp-uglify'),
15 | gutil = require('gulp-util'),
16 | merge = require('merge-stream'),
17 | reactify = require('reactify'),
18 | react = require('gulp-react'),
19 | source = require('vinyl-source-stream'),
20 | watchify = require('watchify');
21 |
22 |
23 | /**
24 | * Constants
25 | */
26 |
27 | var SRC_PATH = 'src';
28 | var DIST_PATH = 'dist';
29 |
30 | var COMPONENT_NAME = 'Boron';
31 | var PACKAGE_FILE = COMPONENT_NAME + '.js';
32 | var PACKAGE_NAME = COMPONENT_NAME.toLowerCase();
33 |
34 | var DEPENDENCIES = ['react', 'react-dom'];
35 |
36 | var EXAMPLE_SRC_PATH = 'example/src';
37 | var EXAMPLE_DIST_PATH = 'example/dist';
38 |
39 | var EXAMPLE_APP = 'app.js';
40 | var EXAMPLE_COPY = [
41 | 'node_modules/codemirror/lib/codemirror.js',
42 | 'node_modules/codemirror/lib/codemirror.css',
43 | 'node_modules/codemirror/mode/javascript/javascript.js',
44 | 'node_modules/react/dist/JSXTransformer.js'
45 | ];
46 | var EXAMPLE_LESS = 'app.less';
47 | var EXAMPLE_FILES = [
48 | 'index.html'
49 | ];
50 |
51 |
52 | /**
53 | * Bundle helpers
54 | */
55 |
56 | function doBundle(target, name, dest) {
57 | return target.bundle()
58 | .on('error', function(e) {
59 | gutil.log('Browserify Error', e);
60 | })
61 | .pipe(source(name))
62 | .pipe(gulp.dest(dest))
63 | .pipe(connect.reload());
64 | }
65 |
66 | function watchBundle(target, name, dest) {
67 | return watchify(target)
68 | .on('update', function (scriptIds) {
69 | scriptIds = scriptIds
70 | .filter(function(i) { return i.substr(0,2) !== './' })
71 | .map(function(i) { return chalk.blue(i.replace(__dirname, '')) });
72 | if (scriptIds.length > 1) {
73 | gutil.log(scriptIds.length + ' Scripts updated:\n* ' + scriptIds.join('\n* ') + '\nrebuilding...');
74 | } else {
75 | gutil.log(scriptIds[0] + ' updated, rebuilding...');
76 | }
77 | doBundle(target, name, dest);
78 | })
79 | .on('time', function (time) {
80 | gutil.log(chalk.green(name + ' built in ' + (Math.round(time / 10) / 100) + 's'));
81 | });
82 | }
83 |
84 |
85 | /**
86 | * Prepare task for examples
87 | */
88 |
89 | gulp.task('clean:examples', function(done) {
90 | del([EXAMPLE_DIST_PATH], done);
91 | });
92 |
93 |
94 | /**
95 | * Build example files
96 | */
97 | gulp.task('build:example:files', function buildExampleFiles() {
98 | return gulp.src(EXAMPLE_FILES.map(function(i) { return EXAMPLE_SRC_PATH + '/' + i }))
99 | .pipe(gulp.dest(EXAMPLE_DIST_PATH))
100 | .pipe(connect.reload());
101 | });
102 |
103 |
104 | /**
105 | * Build example css from less
106 | */
107 | gulp.task('build:example:css', function buildExampleCSS() {
108 | return gulp.src(EXAMPLE_SRC_PATH + '/' + EXAMPLE_LESS)
109 | .pipe(less())
110 | .pipe(gulp.dest(EXAMPLE_DIST_PATH))
111 | .pipe(connect.reload());
112 | });
113 |
114 |
115 | /**
116 | * Build example scripts
117 | *
118 | * Returns a gulp task with watchify when in development mode
119 | */
120 |
121 | function buildExampleScripts(dev) {
122 |
123 | var dest = EXAMPLE_DIST_PATH;
124 |
125 | var opts = dev ? watchify.args : {};
126 | opts.debug = dev ? true : false;
127 | opts.hasExports = true;
128 |
129 | return function() {
130 |
131 | var common = browserify(opts),
132 | bundle = browserify(opts).require('./' + SRC_PATH + '/' + PACKAGE_FILE, { expose: PACKAGE_NAME }),
133 | example = browserify(opts).exclude(PACKAGE_NAME).add('./' + EXAMPLE_SRC_PATH + '/' + EXAMPLE_APP);
134 |
135 | DEPENDENCIES.forEach(function(pkg) {
136 | common.require(pkg);
137 | bundle.exclude(pkg);
138 | example.exclude(pkg);
139 | });
140 |
141 | if (dev) {
142 | watchBundle(common, 'common.js', dest);
143 | watchBundle(bundle, 'bundle.js', dest);
144 | watchBundle(example, 'app.js', dest);
145 | }
146 |
147 | return merge(
148 | doBundle(common, 'common.js', dest),
149 | doBundle(bundle, 'bundle.js', dest),
150 | doBundle(example, 'app.js', dest)
151 | );
152 |
153 | }
154 |
155 | };
156 |
157 |
158 | gulp.task('dev:build:example:scripts', buildExampleScripts(true));
159 | gulp.task('build:example:scripts', buildExampleScripts());
160 |
161 | gulp.task('build:example:copy', function(){
162 | return gulp.src(EXAMPLE_COPY)
163 | .pipe(gulp.dest(EXAMPLE_DIST_PATH))
164 | .pipe(connect.reload());
165 | });
166 |
167 | /**
168 | * Build examples
169 | */
170 | gulp.task('build:examples', [
171 | 'build:example:files',
172 | 'build:example:css',
173 | 'build:example:scripts',
174 | 'build:example:copy'
175 | ]);
176 |
177 | gulp.task('watch:examples', [
178 | 'build:example:files',
179 | 'build:example:css',
180 | 'dev:build:example:scripts',
181 | 'build:example:copy'
182 | ], function() {
183 | gulp.watch(EXAMPLE_FILES.map(function(i) { return EXAMPLE_SRC_PATH + '/' + i }), ['build:example:files']);
184 | gulp.watch([EXAMPLE_SRC_PATH + '/' + EXAMPLE_LESS], ['build:example:css']);
185 | });
186 |
187 |
188 | /**
189 | * Serve task for local development
190 | */
191 |
192 | gulp.task('dev:server', function() {
193 | connect.server({
194 | root: 'example/dist',
195 | port: 9999,
196 | livereload: true
197 | });
198 | });
199 |
200 | /**
201 | * Development task
202 | */
203 |
204 | gulp.task('dev', [
205 | 'dev:server',
206 | 'watch:examples'
207 | ]);
208 |
209 |
210 | /**
211 | * Build task
212 | */
213 |
214 | gulp.task('clean:dist', function(done) {
215 | del([DIST_PATH], done);
216 | });
217 |
218 | gulp.task('build:dist', function() {
219 |
220 | var standalone = browserify('./' + SRC_PATH + '/' + PACKAGE_FILE, {
221 | standalone: COMPONENT_NAME
222 | })
223 | .transform(reactify)
224 | .transform(shim);
225 |
226 | DEPENDENCIES.forEach(function(pkg) {
227 | standalone.exclude(pkg);
228 | });
229 |
230 | return standalone.bundle()
231 | .on('error', function(e) {
232 | gutil.log('Browserify Error', e);
233 | })
234 | .pipe(source(PACKAGE_NAME + '.js'))
235 | .pipe(gulp.dest(DIST_PATH))
236 | .pipe(rename(PACKAGE_NAME + '.min.js'))
237 | .pipe(streamify(uglify()))
238 | .pipe(gulp.dest(DIST_PATH));
239 |
240 | });
241 |
242 | gulp.task('build', [
243 | 'clean:dist',
244 | ], function(){
245 | gulp.start('build:dist', 'build:examples')
246 | });
247 |
248 |
249 | /**
250 | * Version bump tasks
251 | */
252 |
253 | function getBumpTask(type) {
254 | return function() {
255 | return gulp.src(['./package.json'])
256 | .pipe(bump({ type: type }))
257 | .pipe(gulp.dest('./'));
258 | };
259 | }
260 |
261 | gulp.task('bump', getBumpTask('patch'));
262 | gulp.task('bump:minor', getBumpTask('minor'));
263 | gulp.task('bump:major', getBumpTask('major'));
264 |
265 |
266 | /**
267 | * Git tag task
268 | * (version *must* be bumped first)
269 | */
270 |
271 | gulp.task('publish:tag', function(done) {
272 | var pkg = require('./package.json');
273 | var v = 'v' + pkg.version;
274 | var message = 'Release ' + v;
275 |
276 | git.tag(v, message, function (err) {
277 | if (err) throw err;
278 | git.push('origin', v, function (err) {
279 | if (err) throw err;
280 | done();
281 | });
282 | });
283 | });
284 |
285 |
286 |
287 | /**
288 | * npm publish task
289 | * * (version *must* be bumped first)
290 | */
291 | function buildToRoot(){
292 | return gulp.src(SRC_PATH + '/*.js')
293 | .pipe(react())
294 | .pipe(gulp.dest('./'))
295 | }
296 |
297 | gulp.task('build:npm', buildToRoot);
298 |
299 | gulp.task('publish:npm', ['build:npm'], function(done) {
300 |
301 | require('child_process')
302 | .spawn('npm', ['publish'], { stdio: 'inherit' })
303 | .on('close', done);
304 | });
305 |
306 | gulp.task('clean:npm', function () {
307 | buildToRoot().pipe(vinyPaths(del))
308 | })
309 |
310 | gulp.task('release:npm', ['publish:npm'], function(){
311 | gulp.start('clean:npm')
312 | });
313 |
314 |
315 | /**
316 | * Deploy tasks
317 | */
318 |
319 | gulp.task('publish:examples', ['build:examples'], function() {
320 | return gulp.src(EXAMPLE_DIST_PATH + '/**/*').pipe(deploy());
321 | });
322 |
323 | gulp.task('release', ['publish:tag', 'release:npm', 'publish:examples']);
324 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "boron",
3 | "version": "0.2.4",
4 | "description": "A collection of dialog animations with React.js",
5 | "main": "Boron.js",
6 | "author": "Yuanyan Cao",
7 | "license": "MIT",
8 | "repository": {
9 | "type": "git",
10 | "url": "https://github.com/yuanyan/boron.git"
11 | },
12 | "dependencies": {
13 | "domkit": "^0.0.1"
14 | },
15 | "peerDependencies": {
16 | "react": ">=0.14.0"
17 | },
18 | "devDependencies": {
19 | "react-dom": ">=0.14.0",
20 | "reactify": "^0.17.0",
21 | "browserify": "^6.3.3",
22 | "browserify-shim": "^3.8.0",
23 | "chalk": "^0.5.1",
24 | "codemirror": "^5.0.0",
25 | "del": "^0.1.3",
26 | "gulp": "^3.8.10",
27 | "gulp-bump": "^0.1.11",
28 | "gulp-connect": "^2.2.0",
29 | "gulp-gh-pages": "^0.4.0",
30 | "gulp-git": "^0.5.5",
31 | "gulp-less": "^1.3.6",
32 | "gulp-rename": "^1.2.0",
33 | "gulp-streamify": "^0.0.5",
34 | "gulp-uglify": "^1.0.1",
35 | "gulp-util": "^3.0.1",
36 | "merge-stream": "^0.1.6",
37 | "vinyl-paths": "^1.0.0",
38 | "vinyl-source-stream": "^1.0.0",
39 | "watchify": "^2.1.1",
40 | "gulp-react": "^3.0.1"
41 | },
42 | "browserify": {
43 | "transform": [
44 | "reactify"
45 | ]
46 | },
47 | "browserify-shim": {
48 | "react": "global:React"
49 | },
50 | "scripts": {
51 | "release": "gulp release"
52 | },
53 | "keywords": [
54 | "react",
55 | "react-component",
56 | "dialog",
57 | "modal"
58 | ]
59 | }
60 |
--------------------------------------------------------------------------------
/src/Boron.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | DropModal: require('./DropModal'),
3 | WaveModal: require('./WaveModal'),
4 | FlyModal: require('./FlyModal'),
5 | FadeModal: require('./FadeModal'),
6 | ScaleModal: require('./ScaleModal'),
7 | OutlineModal: require('./OutlineModal'),
8 | }
9 |
--------------------------------------------------------------------------------
/src/DropModal.js:
--------------------------------------------------------------------------------
1 | var modalFactory = require('./modalFactory');
2 | var insertKeyframesRule = require('domkit/insertKeyframesRule');
3 | var appendVendorPrefix = require('domkit/appendVendorPrefix');
4 |
5 | var animation = {
6 | show: {
7 | animationDuration: '0.4s',
8 | animationTimingFunction: 'cubic-bezier(0.7,0,0.3,1)'
9 | },
10 |
11 | hide: {
12 | animationDuration: '0.4s',
13 | animationTimingFunction: 'cubic-bezier(0.7,0,0.3,1)'
14 | },
15 |
16 | showModalAnimation: insertKeyframesRule({
17 | '0%': {
18 | opacity: 0,
19 | transform: 'translate(-50%, -300px)'
20 | },
21 | '100%': {
22 | opacity: 1,
23 | transform: 'translate(-50%, -50%)'
24 | }
25 | }),
26 |
27 | hideModalAnimation: insertKeyframesRule({
28 | '0%': {
29 | opacity: 1,
30 | transform: 'translate(-50%, -50%)'
31 | },
32 | '100%': {
33 | opacity: 0,
34 | transform: 'translate(-50%, 100px)'
35 | }
36 | }),
37 |
38 | showBackdropAnimation: insertKeyframesRule({
39 | '0%': {
40 | opacity: 0
41 | },
42 | '100%': {
43 | opacity: 0.9
44 | }
45 | }),
46 |
47 | hideBackdropAnimation: insertKeyframesRule({
48 | '0%': {
49 | opacity: 0.9
50 | },
51 | '100%': {
52 | opacity: 0
53 | }
54 | }),
55 |
56 | showContentAnimation: insertKeyframesRule({
57 | '0%': {
58 | opacity: 0,
59 | transform: 'translate(0, -20px)'
60 | },
61 | '100%': {
62 | opacity: 1,
63 | transform: 'translate(0, 0)'
64 | }
65 | }),
66 |
67 | hideContentAnimation: insertKeyframesRule({
68 | '0%': {
69 | opacity: 1,
70 | transform: 'translate(0, 0)'
71 | },
72 | '100%': {
73 | opacity: 0,
74 | transform: 'translate(0, 50px)'
75 | }
76 | })
77 | };
78 |
79 | var showAnimation = animation.show;
80 | var hideAnimation = animation.hide;
81 | var showModalAnimation = animation.showModalAnimation;
82 | var hideModalAnimation = animation.hideModalAnimation;
83 | var showBackdropAnimation = animation.showBackdropAnimation;
84 | var hideBackdropAnimation = animation.hideBackdropAnimation;
85 | var showContentAnimation = animation.showContentAnimation;
86 | var hideContentAnimation = animation.hideContentAnimation;
87 |
88 | module.exports = modalFactory({
89 | getRef: function(willHidden) {
90 | return 'modal';
91 | },
92 | getModalStyle: function(willHidden) {
93 | return appendVendorPrefix({
94 | position: "fixed",
95 | width: "500px",
96 | transform: "translate(-50%, -50%)",
97 | top: "50%",
98 | left: "50%",
99 | backgroundColor: "white",
100 | zIndex: 1050,
101 | animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
102 | animationFillMode: 'forwards',
103 | animationName: willHidden ? hideModalAnimation : showModalAnimation,
104 | animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
105 | })
106 | },
107 | getBackdropStyle: function(willHidden) {
108 | return appendVendorPrefix({
109 | position: "fixed",
110 | top: 0,
111 | right: 0,
112 | bottom: 0,
113 | left: 0,
114 | zIndex: 1040,
115 | backgroundColor: "#373A47",
116 | animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
117 | animationFillMode: 'forwards',
118 | animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
119 | animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
120 | });
121 | },
122 | getContentStyle: function(willHidden) {
123 | return appendVendorPrefix({
124 | margin: 0,
125 | opacity: 0,
126 | animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
127 | animationFillMode: 'forwards',
128 | animationDelay: '0.25s',
129 | animationName: showContentAnimation,
130 | animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
131 | })
132 | }
133 | });
134 |
--------------------------------------------------------------------------------
/src/FadeModal.js:
--------------------------------------------------------------------------------
1 | var modalFactory = require('./modalFactory');
2 | var insertKeyframesRule = require('domkit/insertKeyframesRule');
3 | var appendVendorPrefix = require('domkit/appendVendorPrefix');
4 |
5 | var animation = {
6 | show: {
7 | animationDuration: '0.3s',
8 | animationTimingFunction: 'ease-out'
9 | },
10 | hide: {
11 | animationDuration: '0.3s',
12 | animationTimingFunction: 'ease-out'
13 | },
14 | showContentAnimation: insertKeyframesRule({
15 | '0%': {
16 | opacity: 0
17 | },
18 | '100%': {
19 | opacity: 1
20 | }
21 | }),
22 |
23 | hideContentAnimation: insertKeyframesRule({
24 | '0%': {
25 | opacity: 1
26 | },
27 | '100%': {
28 | opacity: 0
29 | }
30 | }),
31 |
32 | showBackdropAnimation: insertKeyframesRule({
33 | '0%': {
34 | opacity: 0
35 | },
36 | '100%': {
37 | opacity: 0.9
38 | },
39 | }),
40 |
41 | hideBackdropAnimation: insertKeyframesRule({
42 | '0%': {
43 | opacity: 0.9
44 | },
45 | '100%': {
46 | opacity: 0
47 | }
48 | })
49 | };
50 |
51 | var showAnimation = animation.show;
52 | var hideAnimation = animation.hide;
53 | var showContentAnimation = animation.showContentAnimation;
54 | var hideContentAnimation = animation.hideContentAnimation;
55 | var showBackdropAnimation = animation.showBackdropAnimation;
56 | var hideBackdropAnimation = animation.hideBackdropAnimation;
57 |
58 | module.exports = modalFactory({
59 | getRef: function(willHidden) {
60 | return 'content';
61 | },
62 | getModalStyle: function(willHidden) {
63 | return appendVendorPrefix({
64 | zIndex: 1050,
65 | position: "fixed",
66 | width: "500px",
67 | transform: "translate3d(-50%, -50%, 0)",
68 | top: "50%",
69 | left: "50%"
70 | })
71 | },
72 | getBackdropStyle: function(willHidden) {
73 | return appendVendorPrefix({
74 | position: "fixed",
75 | top: 0,
76 | right: 0,
77 | bottom: 0,
78 | left: 0,
79 | zIndex: 1040,
80 | backgroundColor: "#373A47",
81 | animationFillMode: 'forwards',
82 | animationDuration: '0.3s',
83 | animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
84 | animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
85 | });
86 | },
87 | getContentStyle: function(willHidden) {
88 | return appendVendorPrefix({
89 | margin: 0,
90 | backgroundColor: "white",
91 | animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
92 | animationFillMode: 'forwards',
93 | animationName: willHidden ? hideContentAnimation : showContentAnimation,
94 | animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
95 | })
96 | }
97 | });
98 |
--------------------------------------------------------------------------------
/src/FlyModal.js:
--------------------------------------------------------------------------------
1 | var modalFactory = require('./modalFactory');
2 | var insertKeyframesRule = require('domkit/insertKeyframesRule');
3 | var appendVendorPrefix = require('domkit/appendVendorPrefix');
4 |
5 | var animation = {
6 | show: {
7 | animationDuration: '0.5s',
8 | animationTimingFunction: 'ease-out'
9 | },
10 | hide: {
11 | animationDuration: '0.5s',
12 | animationTimingFunction: 'ease-out'
13 | },
14 | showContentAnimation: insertKeyframesRule({
15 | '0%': {
16 | opacity: 0,
17 | transform: 'translate3d(calc(-100vw - 50%), 0, 0)'
18 | },
19 | '50%': {
20 | opacity: 1,
21 | transform: 'translate3d(100px, 0, 0)'
22 | },
23 | '100%': {
24 | opacity: 1,
25 | transform: 'translate3d(0, 0, 0)'
26 | }
27 | }),
28 |
29 | hideContentAnimation: insertKeyframesRule({
30 | '0%': {
31 | opacity: 1,
32 | transform: 'translate3d(0, 0, 0)'
33 | },
34 | '50%': {
35 | opacity: 1,
36 | transform: 'translate3d(-100px, 0, 0) scale3d(1.1, 1.1, 1)'
37 | },
38 | '100%': {
39 | opacity: 0,
40 | transform: 'translate3d(calc(100vw + 50%), 0, 0)'
41 | },
42 | }),
43 |
44 | showBackdropAnimation: insertKeyframesRule({
45 | '0%': {
46 | opacity: 0
47 | },
48 | '100%': {
49 | opacity: 0.9
50 | },
51 | }),
52 |
53 | hideBackdropAnimation: insertKeyframesRule({
54 | '0%': {
55 | opacity: 0.9
56 | },
57 | '90%': {
58 | opactiy: 0.9
59 | },
60 | '100%': {
61 | opacity: 0
62 | }
63 | })
64 | };
65 |
66 | var showAnimation = animation.show;
67 | var hideAnimation = animation.hide;
68 | var showContentAnimation = animation.showContentAnimation;
69 | var hideContentAnimation = animation.hideContentAnimation;
70 | var showBackdropAnimation = animation.showBackdropAnimation;
71 | var hideBackdropAnimation = animation.hideBackdropAnimation;
72 |
73 | module.exports = modalFactory({
74 | getRef: function(willHidden) {
75 | return 'content';
76 | },
77 | getModalStyle: function(willHidden) {
78 | return appendVendorPrefix({
79 | zIndex: 1050,
80 | position: "fixed",
81 | width: "500px",
82 | transform: "translate3d(-50%, -50%, 0)",
83 | top: "50%",
84 | left: "50%"
85 | })
86 | },
87 | getBackdropStyle: function(willHidden) {
88 | return appendVendorPrefix({
89 | position: "fixed",
90 | top: 0,
91 | right: 0,
92 | bottom: 0,
93 | left: 0,
94 | zIndex: 1040,
95 | backgroundColor: "#373A47",
96 | animationFillMode: 'forwards',
97 | animationDuration: '0.3s',
98 | animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
99 | animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
100 | });
101 | },
102 | getContentStyle: function(willHidden) {
103 | return appendVendorPrefix({
104 | margin: 0,
105 | backgroundColor: "white",
106 | animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
107 | animationFillMode: 'forwards',
108 | animationName: willHidden ? hideContentAnimation : showContentAnimation,
109 | animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
110 | })
111 | }
112 | });
113 |
--------------------------------------------------------------------------------
/src/OutlineModal.js:
--------------------------------------------------------------------------------
1 | var React = require('react');
2 | var modalFactory = require('./modalFactory');
3 | var insertKeyframesRule = require('domkit/insertKeyframesRule');
4 | var appendVendorPrefix = require('domkit/appendVendorPrefix');
5 |
6 | var animation = {
7 | show: {
8 | animationDuration: '0.8s',
9 | animationTimingFunction: 'cubic-bezier(0.6,0,0.4,1)'
10 | },
11 | hide: {
12 | animationDuration: '0.4s',
13 | animationTimingFunction: 'ease-out'
14 | },
15 | showContentAnimation: insertKeyframesRule({
16 | '0%': {
17 | opacity: 0,
18 | },
19 | '40%':{
20 | opacity: 0
21 | },
22 | '100%': {
23 | opacity: 1,
24 | }
25 | }),
26 |
27 | hideContentAnimation: insertKeyframesRule({
28 | '0%': {
29 | opacity: 1
30 | },
31 | '100%': {
32 | opacity: 0,
33 | }
34 | }),
35 |
36 | showBackdropAnimation: insertKeyframesRule({
37 | '0%': {
38 | opacity: 0
39 | },
40 | '100%': {
41 | opacity: 0.9
42 | },
43 | }),
44 |
45 | hideBackdropAnimation: insertKeyframesRule({
46 | '0%': {
47 | opacity: 0.9
48 | },
49 | '100%': {
50 | opacity: 0
51 | }
52 | })
53 | };
54 |
55 | var showAnimation = animation.show;
56 | var hideAnimation = animation.hide;
57 | var showContentAnimation = animation.showContentAnimation;
58 | var hideContentAnimation = animation.hideContentAnimation;
59 | var showBackdropAnimation = animation.showBackdropAnimation;
60 | var hideBackdropAnimation = animation.hideBackdropAnimation;
61 |
62 | module.exports = modalFactory({
63 | getRef: function(willHidden) {
64 | return 'content';
65 | },
66 | getSharp: function(willHidden) {
67 | var strokeDashLength = 1680;
68 |
69 | var showSharpAnimation = insertKeyframesRule({
70 | '0%': {
71 | 'stroke-dashoffset': strokeDashLength
72 | },
73 | '100%': {
74 | 'stroke-dashoffset': 0
75 | },
76 | });
77 |
78 |
79 | var sharpStyle = {
80 | position: 'absolute',
81 | width: 'calc(100%)',
82 | height: 'calc(100%)',
83 | zIndex: '-1'
84 | };
85 |
86 | var rectStyle = appendVendorPrefix({
87 | animationDuration: willHidden? '0.4s' :'0.8s',
88 | animationFillMode: 'forwards',
89 | animationName: willHidden? hideContentAnimation: showSharpAnimation,
90 | stroke: '#ffffff',
91 | strokeWidth: '2px',
92 | strokeDasharray: strokeDashLength
93 | });
94 |
95 | return
96 |
109 |
110 | },
111 | getModalStyle: function(willHidden) {
112 | return appendVendorPrefix({
113 | zIndex: 1050,
114 | position: "fixed",
115 | width: "500px",
116 | transform: "translate3d(-50%, -50%, 0)",
117 | top: "50%",
118 | left: "50%"
119 | })
120 | },
121 | getBackdropStyle: function(willHidden) {
122 | return appendVendorPrefix({
123 | position: "fixed",
124 | top: 0,
125 | right: 0,
126 | bottom: 0,
127 | left: 0,
128 | zIndex: 1040,
129 | backgroundColor: "#373A47",
130 | animationFillMode: 'forwards',
131 | animationDuration: '0.4s',
132 | animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
133 | animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
134 | });
135 | },
136 | getContentStyle: function(willHidden) {
137 | return appendVendorPrefix({
138 | margin: 0,
139 | backgroundColor: "white",
140 | animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
141 | animationFillMode: 'forwards',
142 | animationName: willHidden ? hideContentAnimation : showContentAnimation,
143 | animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
144 | })
145 | }
146 | });
147 |
--------------------------------------------------------------------------------
/src/ScaleModal.js:
--------------------------------------------------------------------------------
1 | var modalFactory = require('./modalFactory');
2 | var insertKeyframesRule = require('domkit/insertKeyframesRule');
3 | var appendVendorPrefix = require('domkit/appendVendorPrefix');
4 |
5 | var animation = {
6 | show: {
7 | animationDuration: '0.4s',
8 | animationTimingFunction: 'cubic-bezier(0.6,0,0.4,1)'
9 | },
10 | hide: {
11 | animationDuration: '0.4s',
12 | animationTimingFunction: 'ease-out'
13 | },
14 | showContentAnimation: insertKeyframesRule({
15 | '0%': {
16 | opacity: 0,
17 | transform: 'scale3d(0, 0, 1)'
18 | },
19 | '100%': {
20 | opacity: 1,
21 | transform: 'scale3d(1, 1, 1)'
22 | }
23 | }),
24 |
25 | hideContentAnimation: insertKeyframesRule({
26 | '0%': {
27 | opacity: 1
28 | },
29 | '100%': {
30 | opacity: 0,
31 | transform: 'scale3d(0.5, 0.5, 1)'
32 | }
33 | }),
34 |
35 | showBackdropAnimation: insertKeyframesRule({
36 | '0%': {
37 | opacity: 0
38 | },
39 | '100%': {
40 | opacity: 0.9
41 | },
42 | }),
43 |
44 | hideBackdropAnimation: insertKeyframesRule({
45 | '0%': {
46 | opacity: 0.9
47 | },
48 | '100%': {
49 | opacity: 0
50 | }
51 | })
52 | };
53 |
54 | var showAnimation = animation.show;
55 | var hideAnimation = animation.hide;
56 | var showContentAnimation = animation.showContentAnimation;
57 | var hideContentAnimation = animation.hideContentAnimation;
58 | var showBackdropAnimation = animation.showBackdropAnimation;
59 | var hideBackdropAnimation = animation.hideBackdropAnimation;
60 |
61 | module.exports = modalFactory({
62 | getRef: function(willHidden) {
63 | return 'content';
64 | },
65 | getModalStyle: function(willHidden) {
66 | return appendVendorPrefix({
67 | zIndex: 1050,
68 | position: "fixed",
69 | width: "500px",
70 | transform: "translate3d(-50%, -50%, 0)",
71 | top: "50%",
72 | left: "50%"
73 | })
74 | },
75 | getBackdropStyle: function(willHidden) {
76 | return appendVendorPrefix({
77 | position: "fixed",
78 | top: 0,
79 | right: 0,
80 | bottom: 0,
81 | left: 0,
82 | zIndex: 1040,
83 | backgroundColor: "#373A47",
84 | animationFillMode: 'forwards',
85 | animationDuration: '0.4s',
86 | animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
87 | animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
88 | });
89 | },
90 | getContentStyle: function(willHidden) {
91 | return appendVendorPrefix({
92 | margin: 0,
93 | backgroundColor: "white",
94 | animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
95 | animationFillMode: 'forwards',
96 | animationName: willHidden ? hideContentAnimation : showContentAnimation,
97 | animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
98 | })
99 | }
100 | });
101 |
--------------------------------------------------------------------------------
/src/WaveModal.js:
--------------------------------------------------------------------------------
1 | var modalFactory = require('./modalFactory');
2 | var insertKeyframesRule = require('domkit/insertKeyframesRule');
3 | var appendVendorPrefix = require('domkit/appendVendorPrefix');
4 |
5 | var animation = {
6 | show: {
7 | animationDuration: '1s',
8 | animationTimingFunction: 'linear'
9 | },
10 | hide: {
11 | animationDuration: '0.3s',
12 | animationTimingFunction: 'ease-out'
13 | },
14 | showContentAnimation: insertKeyframesRule({
15 | '0%': {
16 | opacity: 0,
17 | transform: 'matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
18 | },
19 | '2.083333%': {
20 | transform: 'matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
21 | },
22 | '4.166667%': {
23 | transform: 'matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
24 | },
25 | '6.25%': {
26 | transform: 'matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
27 | },
28 | '8.333333%': {
29 | transform: 'matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
30 | },
31 | '10.416667%': {
32 | transform: 'matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
33 | },
34 | '12.5%': {
35 | transform: 'matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
36 | },
37 | '14.583333%': {
38 | transform: 'matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
39 | },
40 | '16.666667%': {
41 | transform: 'matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
42 | },
43 | '18.75%': {
44 | transform: 'matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
45 | },
46 | '20.833333%': {
47 | transform: 'matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
48 | },
49 | '22.916667%': {
50 | transform: 'matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
51 | },
52 | '25%': {
53 | transform: 'matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
54 | },
55 | '27.083333%': {
56 | transform: 'matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
57 | },
58 | '29.166667%': {
59 | transform: 'matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
60 | },
61 | '31.25%': {
62 | transform: 'matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
63 | },
64 | '33.333333%': {
65 | transform: 'matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
66 | },
67 | '35.416667%': {
68 | transform: 'matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
69 | },
70 | '37.5%': {
71 | transform: 'matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
72 | },
73 | '39.583333%': {
74 | transform: 'matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
75 | },
76 | '41.666667%': {
77 | transform: 'matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
78 | },
79 | '43.75%': {
80 | transform: 'matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
81 | },
82 | '45.833333%': {
83 | transform: 'matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
84 | },
85 | '47.916667%': {
86 | transform: 'matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
87 | },
88 | '50%': {
89 | opacity: 1,
90 | transform: 'matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
91 | },
92 | '52.083333%': {
93 | transform: 'matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
94 | },
95 | '54.166667%': {
96 | transform: 'matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
97 | },
98 | '56.25%': {
99 | transform: 'matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
100 | },
101 | '58.333333%': {
102 | transform: 'matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
103 | },
104 | '60.416667%': {
105 | transform: 'matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
106 | },
107 | '62.5%': {
108 | transform: 'matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
109 | },
110 | '64.583333%': {
111 | transform: 'matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
112 | },
113 | '66.666667%': {
114 | transform: 'matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
115 | },
116 | '68.75%': {
117 | transform: 'matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
118 | },
119 | '70.833333%': {
120 | transform: 'matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
121 | },
122 | '72.916667%': {
123 | transform: 'matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
124 | },
125 | '75%': {
126 | transform: 'matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
127 | },
128 | '77.083333%': {
129 | transform: 'matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
130 | },
131 | '79.166667%': {
132 | transform: 'matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
133 | },
134 | '81.25%': {
135 | transform: 'matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
136 | },
137 | '83.333333%': {
138 | transform: 'matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
139 | },
140 | '85.416667%': {
141 | transform: 'matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
142 | },
143 | '87.5%': {
144 | transform: 'matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
145 | },
146 | '89.583333%': {
147 | transform: 'matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
148 | },
149 | '91.666667%': {
150 | transform: 'matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
151 | },
152 | '93.75%': {
153 | transform: 'matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
154 | },
155 | '95.833333%': {
156 | transform: 'matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
157 | },
158 | '97.916667%': {
159 | transform: 'matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
160 | },
161 | '100%': {
162 | opacity: 1,
163 | transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'
164 | }
165 | }),
166 |
167 | hideContentAnimation: insertKeyframesRule({
168 | '0%': {
169 | opacity: 1
170 | },
171 | '100%': {
172 | opacity: 0,
173 | transform: 'scale3d(0.8, 0.8, 1)'
174 | },
175 | }),
176 |
177 | showBackdropAnimation: insertKeyframesRule({
178 | '0%': {
179 | opacity: 0
180 | },
181 | '100%': {
182 | opacity: 0.9
183 | },
184 | }),
185 |
186 | hideBackdropAnimation: insertKeyframesRule({
187 | '0%': {
188 | opacity: 0.9
189 | },
190 | '100%': {
191 | opacity: 0
192 | }
193 | })
194 | };
195 |
196 | var showAnimation = animation.show;
197 | var hideAnimation = animation.hide;
198 | var showContentAnimation = animation.showContentAnimation;
199 | var hideContentAnimation = animation.hideContentAnimation;
200 | var showBackdropAnimation = animation.showBackdropAnimation;
201 | var hideBackdropAnimation = animation.hideBackdropAnimation;
202 |
203 | module.exports = modalFactory({
204 | getRef: function(willHidden) {
205 | return 'content';
206 | },
207 | getModalStyle: function(willHidden) {
208 | return appendVendorPrefix({
209 | zIndex: 1050,
210 | position: "fixed",
211 | width: "500px",
212 | transform: "translate3d(-50%, -50%, 0)",
213 | top: "50%",
214 | left: "50%"
215 | })
216 | },
217 | getBackdropStyle: function(willHidden) {
218 | return appendVendorPrefix({
219 | position: "fixed",
220 | top: 0,
221 | right: 0,
222 | bottom: 0,
223 | left: 0,
224 | zIndex: 1040,
225 | backgroundColor: "#373A47",
226 | animationFillMode: 'forwards',
227 | animationDuration: '0.3s',
228 | animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation,
229 | animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
230 | });
231 | },
232 | getContentStyle: function(willHidden) {
233 | return appendVendorPrefix({
234 | margin: 0,
235 | backgroundColor: "white",
236 | animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration,
237 | animationFillMode: 'forwards',
238 | animationName: willHidden ? hideContentAnimation : showContentAnimation,
239 | animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction
240 | })
241 | }
242 | });
243 |
--------------------------------------------------------------------------------
/src/modalFactory.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import transitionEvents from 'domkit/transitionEvents'
3 | import appendVendorPrefix from 'domkit/appendVendorPrefix'
4 |
5 | class modalFactory extends React.Component {
6 | propTypes: {
7 | className: React.PropTypes.string,
8 | // Close the modal when esc is pressed? Defaults to true.
9 | keyboard: React.PropTypes.bool,
10 | onShow: React.PropTypes.func,
11 | onHide: React.PropTypes.func,
12 | animation: React.PropTypes.object,
13 | backdrop: React.PropTypes.bool,
14 | closeOnClick: React.PropTypes.bool,
15 | modalStyle: React.PropTypes.object,
16 | backdropStyle: React.PropTypes.object,
17 | contentStyle: React.PropTypes.object,
18 | }
19 |
20 | getDefaultProps() {
21 | return {
22 | className: "",
23 | onShow: function(){},
24 | onHide: function(){},
25 | animation: animation,
26 | keyboard: true,
27 | backdrop: true,
28 | closeOnClick: true,
29 | modalStyle: {},
30 | backdropStyle: {},
31 | contentStyle: {},
32 | }
33 | }
34 |
35 | getInitialState(){
36 | return {
37 | willHidden: false,
38 | hidden: true
39 | }
40 | }
41 |
42 | hasHidden(){
43 | return this.state.hidden
44 | }
45 |
46 | addTransitionListener(node, handle){
47 | if (node) {
48 | var endListener = function(e) {
49 | if (e && e.target !== node) {
50 | return
51 | }
52 | transitionEvents.removeEndEventListener(node, endListener)
53 | handle()
54 | }
55 | transitionEvents.addEndEventListener(node, endListener)
56 | }
57 | }
58 |
59 | handleBackdropClick() {
60 | if (this.props.closeOnClick) {
61 | this.hide("backdrop")
62 | }
63 | }
64 |
65 | render() {
66 |
67 | var hidden = this.hasHidden()
68 | if (hidden) return null
69 |
70 | var willHidden = this.state.willHidden
71 | var animation = this.props.animation
72 | var modalStyle = animation.getModalStyle(willHidden)
73 | var backdropStyle = animation.getBackdropStyle(willHidden)
74 | var contentStyle = animation.getContentStyle(willHidden)
75 | var ref = animation.getRef(willHidden)
76 | var sharp = animation.getSharp && animation.getSharp(willHidden)
77 |
78 | // Apply custom style properties
79 | if (this.props.modalStyle) {
80 | var prefixedModalStyle = appendVendorPrefix(this.props.modalStyle)
81 | for (var style in prefixedModalStyle) {
82 | modalStyle[style] = prefixedModalStyle[style]
83 | }
84 | }
85 |
86 | if (this.props.backdropStyle) {
87 | var prefixedBackdropStyle = appendVendorPrefix(this.props.backdropStyle)
88 | for (var style in prefixedBackdropStyle) {
89 | backdropStyle[style] = prefixedBackdropStyle[style]
90 | }
91 | }
92 |
93 | if (this.props.contentStyle) {
94 | var prefixedContentStyle = appendVendorPrefix(this.props.contentStyle)
95 | for (var style in prefixedContentStyle) {
96 | contentStyle[style] = prefixedContentStyle[style]
97 | }
98 | }
99 |
100 | var backdrop = this.props.backdrop? : undefined
101 |
102 | if(willHidden) {
103 | var node = this.refs[ref]
104 | this.addTransitionListener(node, this.leave)
105 | }
106 |
107 | return (
108 |
109 | {sharp}
110 |
114 | {backdrop}
115 | )
116 |
117 | }
118 |
119 | leave(){
120 | this.setState({
121 | hidden: true
122 | })
123 | this.props.onHide(this.state.hideSource)
124 | }
125 |
126 | enter(){
127 | this.props.onShow()
128 | }
129 |
130 | show(){
131 | if (!this.hasHidden()) return
132 |
133 | this.setState({
134 | willHidden: false,
135 | hidden: false
136 | })
137 |
138 | setTimeout(function(){
139 | var ref = this.props.animation.getRef()
140 | var node = this.refs[ref]
141 | this.addTransitionListener(node, this.enter)
142 | }.bind(this), 0)
143 | }
144 |
145 | hide(source){
146 | if (this.hasHidden()) return
147 |
148 | if (!source) {
149 | source = "hide"
150 | }
151 |
152 | this.setState({
153 | hideSource: source,
154 | willHidden: true
155 | })
156 | }
157 |
158 | toggle(){
159 | if (this.hasHidden())
160 | this.show()
161 | else
162 | this.hide("toggle")
163 | }
164 |
165 | listenKeyboard(event) {
166 | (typeof(this.props.keyboard)=="function")
167 | ?this.props.keyboard(event)
168 | :this.closeOnEsc(event)
169 | }
170 |
171 | closeOnEsc(event){
172 | if (this.props.keyboard &&
173 | (event.key === "Escape" ||
174 | event.keyCode === 27)) {
175 | this.hide("keyboard")
176 | }
177 | }
178 |
179 | componentDidMount(){
180 | window.addEventListener("keydown", this.listenKeyboard, true)
181 | }
182 |
183 | componentWillUnmount() {
184 | window.removeEventListener("keydown", this.listenKeyboard, true)
185 | }
186 | }
187 |
188 | export default modalFactory
189 |
--------------------------------------------------------------------------------
111 | {this.props.children}
112 |
113 |