Skip to content

Commit 3570440

Browse files
daundaun
authored
Merge pull request #16 from swup/optimizations
Optimize transitions
2 parents b8fd4d9 + 03bdc3c commit 3570440

5 files changed

+124
-95
lines changed

‎dist/SwupProgressPlugin.js

+50-37
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
143143
var SwupProgressPlugin = function (_Plugin) {
144144
_inherits(SwupProgressPlugin, _Plugin);
145145

146-
function SwupProgressPlugin(options) {
146+
function SwupProgressPlugin() {
147+
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
148+
147149
_classCallCheck(this, SwupProgressPlugin);
148150

149151
var _this = _possibleConstructorReturn(this, (SwupProgressPlugin.__proto__ || Object.getPrototypeOf(SwupProgressPlugin)).call(this));
@@ -191,17 +193,22 @@ var SwupProgressPlugin = function (_Plugin) {
191193

192194
var defaultOptions = {
193195
className: 'swup-progress-bar',
194-
transition: 300,
195196
delay: 300,
197+
transition: undefined,
198+
minValue: undefined,
199+
initialValue: undefined,
196200
hideImmediately: true
197201
};
198202

199203
_this.options = _extends({}, defaultOptions, options);
200204

201205
_this.showProgressBarTimeout = null;
206+
202207
_this.progressBar = new _ProgressBar2.default({
203208
className: _this.options.className,
204-
animationDuration: _this.options.transition
209+
animationDuration: _this.options.transition,
210+
minValue: _this.options.minValue,
211+
initialValue: _this.options.initialValue
205212
});
206213
return _this;
207214
}
@@ -295,49 +302,54 @@ var _createClass = function () { function defineProperties(target, props) { for
295302
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
296303

297304
var ProgressBar = function () {
298-
function ProgressBar(_ref) {
305+
function ProgressBar() {
299306
var _this = this;
300307

301-
var _ref$className = _ref.className,
302-
className = _ref$className === undefined ? null : _ref$className,
308+
var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
309+
_ref$className = _ref.className,
310+
className = _ref$className === undefined ? 'progress-bar' : _ref$className,
311+
_ref$styleAttr = _ref.styleAttr,
312+
styleAttr = _ref$styleAttr === undefined ? 'data-progressbar-styles' : _ref$styleAttr,
303313
_ref$animationDuratio = _ref.animationDuration,
304-
animationDuration = _ref$animationDuratio === undefined ? null : _ref$animationDuratio;
314+
animationDuration = _ref$animationDuratio === undefined ? 300 : _ref$animationDuratio,
315+
_ref$minValue = _ref.minValue,
316+
minValue = _ref$minValue === undefined ? 0.1 : _ref$minValue,
317+
_ref$initialValue = _ref.initialValue,
318+
initialValue = _ref$initialValue === undefined ? 0.25 : _ref$initialValue,
319+
_ref$trickleValue = _ref.trickleValue,
320+
trickleValue = _ref$trickleValue === undefined ? 0.03 : _ref$trickleValue;
305321

306322
_classCallCheck(this, ProgressBar);
307323

308-
this.className = 'progress-bar';
309-
this.animationDuration = 300;
310-
this.minValue = 0.1;
311-
this.stylesheetElement = null;
324+
this.styleElement = null;
312325
this.progressElement = null;
313-
this.hiding = false;
314-
this.trickleInterval = null;
315326
this.value = 0;
316327
this.visible = false;
328+
this.hiding = false;
329+
this.trickleInterval = null;
317330

318331
this.trickle = function () {
319-
var advance = Math.random() * 3 / 100;
332+
var advance = Math.random() * _this.trickleValue;
320333
_this.setValue(_this.value + advance);
321334
};
322335

323-
if (className !== null) {
324-
this.className = className;
325-
}
326-
if (animationDuration !== null) {
327-
this.animationDuration = animationDuration;
328-
}
336+
this.className = className;
337+
this.styleAttr = styleAttr;
338+
this.animationDuration = animationDuration;
339+
this.minValue = minValue;
340+
this.initialValue = initialValue;
341+
this.trickleValue = trickleValue;
329342

330-
this.stylesheetElement = this.createStylesheetElement();
343+
this.styleElement = this.createStyleElement();
331344
this.progressElement = this.createProgressElement();
332-
} // ms
333-
345+
}
334346

335347
_createClass(ProgressBar, [{
336348
key: 'show',
337349
value: function show() {
338350
if (!this.visible) {
339351
this.visible = true;
340-
this.installStylesheetElement();
352+
this.installStyleElement();
341353
this.installProgressElement();
342354
this.startTrickling();
343355
}
@@ -360,24 +372,25 @@ var ProgressBar = function () {
360372
}, {
361373
key: 'setValue',
362374
value: function setValue(value) {
363-
this.value = Math.max(this.minValue, value);
375+
this.value = Math.min(1, Math.max(this.minValue, value));
364376
this.refresh();
365377
}
366378

367379
// Private
368380

369381
}, {
370-
key: 'installStylesheetElement',
371-
value: function installStylesheetElement() {
372-
document.head.insertBefore(this.stylesheetElement, document.head.firstChild);
382+
key: 'installStyleElement',
383+
value: function installStyleElement() {
384+
document.head.insertBefore(this.styleElement, document.head.firstChild);
373385
}
374386
}, {
375387
key: 'installProgressElement',
376388
value: function installProgressElement() {
377-
this.progressElement.style.width = '0';
389+
this.progressElement.style.width = '0%';
378390
this.progressElement.style.opacity = '1';
379391
document.documentElement.insertBefore(this.progressElement, document.body);
380-
this.refresh();
392+
this.progressElement.scrollTop = 0; // Force reflow to ensure initial style takes effect
393+
this.setValue(Math.random() * this.initialValue);
381394
}
382395
}, {
383396
key: 'fadeProgressElement',
@@ -411,15 +424,15 @@ var ProgressBar = function () {
411424
var _this3 = this;
412425

413426
requestAnimationFrame(function () {
414-
_this3.progressElement.style.width = 10 + _this3.value * 90 + '%';
427+
_this3.progressElement.style.width = _this3.value * 100 + '%';
415428
});
416429
}
417430
}, {
418-
key: 'createStylesheetElement',
419-
value: function createStylesheetElement() {
431+
key: 'createStyleElement',
432+
value: function createStyleElement() {
420433
var element = document.createElement('style');
421-
element.setAttribute('data-progressbar-styles', '');
422-
element.textContent = this.defaultCSS;
434+
element.setAttribute(this.styleAttr, '');
435+
element.textContent = this.defaultStyles;
423436
return element;
424437
}
425438
}, {
@@ -430,9 +443,9 @@ var ProgressBar = function () {
430443
return element;
431444
}
432445
}, {
433-
key: 'defaultCSS',
446+
key: 'defaultStyles',
434447
get: function get() {
435-
return '\n .' + this.className + ' {\n position: fixed;\n display: block;\n top: 0;\n left: 0;\n height: 3px;\n background-color: black;\n z-index: 9999;\n transition:\n width ' + this.animationDuration + 'ms ease-out,\n opacity ' + this.animationDuration / 2 + 'ms ' + this.animationDuration / 2 + 'ms ease-in;\n transform: translate3d(0, 0, 0);\n }\n ';
448+
return '\n\t\t.' + this.className + ' {\n\t\t\t\tposition: fixed;\n\t\t\t\tdisplay: block;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\theight: 3px;\n\t\t\t\tbackground-color: black;\n\t\t\t\tz-index: 9999;\n\t\t\t\ttransition:\n\t\t\t\t\twidth ' + this.animationDuration + 'ms ease-out,\n\t\t\t\t\topacity ' + this.animationDuration / 2 + 'ms ' + this.animationDuration / 2 + 'ms ease-in;\n\t\t\t\ttransform: translate3d(0, 0, 0);\n\t\t\t}\n\t\t';
436449
}
437450
}]);
438451

0 commit comments

Comments
 (0)