' +
16 | '
' +
17 | '

' +
19 | '
' +
20 | '
' +
21 | '{$progress}%' +
22 | 'Loading...' +
23 | '
' +
24 | '
' +
25 | '
' +
27 | '
' +
28 | '
' +
29 | '
';
30 |
31 | this._container = document.createElement("div");
32 | this._container.setAttribute("id", "WSELoadingScreen");
33 | this._container.style.zIndex = 10000;
34 | this._container.style.width = "100%";
35 | this._container.style.height = "100%";
36 |
37 | }
38 |
39 | LoadingScreen.prototype.setTemplate = function (template) {
40 | this._template = template;
41 | };
42 |
43 | LoadingScreen.prototype.addItem = function () {
44 |
45 | if (this._finished) {
46 | return;
47 | }
48 |
49 | this._loading += 1;
50 | this._max += 1;
51 |
52 | this.update();
53 | };
54 |
55 | LoadingScreen.prototype.count = function () {
56 | return this._max;
57 | };
58 |
59 | LoadingScreen.prototype.itemLoaded = function () {
60 |
61 | if (this._finished) {
62 | return;
63 | }
64 |
65 | if (this._loaded === this._max) {
66 | return;
67 | }
68 |
69 | this._loading -= 1;
70 | this._loaded += 1;
71 |
72 | if (this._loaded === this._max) {
73 | this._finished = true;
74 | this.trigger("finished");
75 | }
76 |
77 | this.update();
78 | };
79 |
80 | LoadingScreen.prototype.update = function () {
81 |
82 | var progress;
83 |
84 | if (this._loaded > this._max) {
85 | this._loaded = this._max;
86 | }
87 |
88 | progress = parseInt((this._loaded / this._max) * 100, 10);
89 |
90 | if (this._max < 1) {
91 | progress = 0;
92 | }
93 |
94 | this._container.innerHTML = render(this._template, {
95 | all: this._max,
96 | remaining: this._max - this._loaded,
97 | loaded: this._loaded,
98 | progress: progress
99 | });
100 |
101 | };
102 |
103 | LoadingScreen.prototype.show = function (parent) {
104 | this._container.style.display = "";
105 | parent.appendChild(this._container);
106 | this.update();
107 | };
108 |
109 | LoadingScreen.prototype.hide = function () {
110 |
111 | var self = this;
112 |
113 | function valFn (v) {
114 | self._container.style.opacity = v;
115 | }
116 |
117 | function finishFn () {
118 | self._container.style.display = "none";
119 | self._container.parentNode.removeChild(self._container);
120 | }
121 |
122 | transform(1, 0, valFn, {
123 | duration: 500,
124 | onFinish: finishFn
125 | });
126 |
127 | this._container.style.display = "none";
128 | };
129 |
130 | function render (template, vars) {
131 |
132 | for (var key in vars) {
133 | template = insertVar(template, key, vars[key]);
134 | }
135 |
136 | return template;
137 | }
138 |
139 | function insertVar (template, name, value) {
140 | return ("" + template).split("{$" + name + "}").join("" + value);
141 | }
142 |
143 | module.exports = LoadingScreen;
144 |
--------------------------------------------------------------------------------
/src/tools/reveal.js:
--------------------------------------------------------------------------------
1 |
2 | var transform = require("transform-js").transform;
3 |
4 | function reveal (element, args) {
5 |
6 | args = args || {};
7 |
8 | markCharacters(element);
9 | hideCharacters(element);
10 | return revealCharacters(element, args.speed || 50, args.onFinish || null);
11 | }
12 |
13 | function revealCharacters (element, speed, then) {
14 |
15 | var chars = element.querySelectorAll(".Char");
16 | var offset = 1000 / (speed || 40);
17 | var stop = false;
18 | var timeouts = [];
19 | var left = chars.length;
20 |
21 | then = then || function () {};
22 |
23 | [].forEach.call(chars, function (char, i) {
24 |
25 | var id = setTimeout(function () {
26 |
27 | // Workaround for strange move.js behaviour:
28 | // Sometimes the last .end() callback doesn't get called, so
29 | // we set another timeout to correct this mistake if it happens.
30 | var called = false;
31 | var duration = 10 * offset;
32 |
33 | if (stop) {
34 | return;
35 | }
36 |
37 | transform(0, 1, setOpacity, {duration: duration}, end);
38 |
39 | setTimeout(end, duration + 2000);
40 |
41 | function setOpacity (v) {
42 | char.style.opacity = v;
43 | }
44 |
45 | function end () {
46 |
47 | if (called) {
48 | return;
49 | }
50 |
51 | called = true;
52 |
53 | left -= 1;
54 |
55 | if (stop) {
56 | return;
57 | }
58 |
59 | if (left <= 0) {
60 | then();
61 | }
62 |
63 | }
64 |
65 | }, i * offset);
66 |
67 | timeouts.push(id);
68 | });
69 |
70 | function cancel () {
71 |
72 | if (stop || left <= 0) {
73 | return false;
74 | }
75 |
76 | stop = true;
77 |
78 | timeouts.forEach(function (id) {
79 | clearTimeout(id);
80 | });
81 |
82 | [].forEach.call(chars, function (char) {
83 | char.style.opacity = "1";
84 | });
85 |
86 | then();
87 |
88 | return true;
89 | }
90 |
91 | return {
92 | cancel: cancel
93 | };
94 | }
95 |
96 | function hideCharacters (element) {
97 |
98 | var chars = element.querySelectorAll(".Char");
99 |
100 | [].forEach.call(chars, function (char) {
101 | char.style.opacity = 0;
102 | });
103 | }
104 |
105 | function markCharacters (element, offset) {
106 |
107 | var TEXT_NODE = 3;
108 | var ELEMENT = 1;
109 |
110 | offset = offset || 0;
111 |
112 | [].forEach.call(element.childNodes, function (child) {
113 |
114 | var text = "", newNode;
115 |
116 | if (child.nodeType === TEXT_NODE) {
117 |
118 | [].forEach.call(child.textContent, function (char) {
119 | text += '