@atlassian/aui
Version:
Atlassian User Interface Framework
273 lines (227 loc) • 10.7 kB
JavaScript
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define(['module', 'exports', './jquery', './underscore', 'skatejs', './internal/animation', './internal/browser', './internal/deprecation', './internal/globalize'], factory);
} else if (typeof exports !== "undefined") {
factory(module, exports, require('./jquery'), require('./underscore'), require('skatejs'), require('./internal/animation'), require('./internal/browser'), require('./internal/deprecation'), require('./internal/globalize'));
} else {
var mod = {
exports: {}
};
factory(mod, mod.exports, global.jquery, global.underscore, global.skatejs, global.animation, global.browser, global.deprecation, global.globalize);
global.progressIndicator = mod.exports;
}
})(this, function (module, exports, _jquery, _underscore, _skatejs, _animation, _browser, _deprecation, _globalize) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _jquery2 = _interopRequireDefault(_jquery);
var _underscore2 = _interopRequireDefault(_underscore);
var _skatejs2 = _interopRequireDefault(_skatejs);
var deprecate = _interopRequireWildcard(_deprecation);
var _globalize2 = _interopRequireDefault(_globalize);
function _interopRequireWildcard(obj) {
if (obj && obj.__esModule) {
return obj;
} else {
var newObj = {};
if (obj != null) {
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
}
}
newObj.default = obj;
return newObj;
}
}
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
var afterTransitionEvent = 'aui-progress-indicator-after-update';
var beforeTransitionEvent = 'aui-progress-indicator-before-update';
var transitionEnd = 'transitionend webkitTransitionEnd';
function updateProgress($progressBar, $progressBarContainer, progressValue) {
(0, _animation.recomputeStyle)($progressBar);
$progressBar.css('width', progressValue * 100 + '%');
$progressBarContainer.attr('data-value', progressValue);
}
function updateProgressElement(element, value) {
var $progressBarContainer = (0, _jquery2.default)(element).first();
var $progressBar = $progressBarContainer.children('.aui-progress-indicator-value');
var valueAttribute = $progressBarContainer.attr('data-value');
var currentProgress = parseFloat(valueAttribute) || 0;
var isProgressNotChanged = valueAttribute && currentProgress === value;
if (isProgressNotChanged) {
return;
}
var isIndeterminate = !valueAttribute;
//if the progress bar is indeterminate switch it.
if (isIndeterminate) {
$progressBar.css('width', 0);
}
transitionProgress($progressBar, $progressBarContainer, { currentProgress: currentProgress, value: value });
return $progressBarContainer;
}
function transitionProgress(progressBar, progressBarContainer, _ref) {
var currentProgress = _ref.currentProgress,
value = _ref.value;
var $progressBar = (0, _jquery2.default)(progressBar);
var $progressBarContainer = (0, _jquery2.default)(progressBarContainer);
if (typeof value === 'number' && value <= 1 && value >= 0) {
$progressBarContainer.trigger(beforeTransitionEvent, [currentProgress, value]);
//trigger the event after transition end if supported, otherwise just trigger it
if ((0, _browser.supportsCssTransition)()) {
$progressBar.one(transitionEnd, function () {
$progressBarContainer.trigger(afterTransitionEvent, [currentProgress, value]);
});
updateProgress($progressBar, $progressBarContainer, value);
} else {
updateProgress($progressBar, $progressBarContainer, value);
$progressBarContainer.trigger(afterTransitionEvent, [currentProgress, value]);
}
}
}
function setIndeterminateOnProgressElement(element) {
var $progressBarContainer = (0, _jquery2.default)(element).first();
var $progressBar = $progressBarContainer.children('.aui-progress-indicator-value');
$progressBarContainer.removeAttr('data-value');
(0, _animation.recomputeStyle)($progressBarContainer);
$progressBar.css('width', '');
}
var DEFAULTS = {
indeterminate: false,
max: 1,
val: 0,
valAsFraction: 0,
valAsPercent: 0
};
function parseDecimal(num) {
var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
return Number(parseFloat(num).toFixed(precision));
}
function recalc(data) {
var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
val = _ref2.val,
max = _ref2.max;
var checkMax = _underscore2.default.isNumber(max) ? max : data.max;
var checkVal = _underscore2.default.isNumber(val) ? val : data.val;
var newMax = checkMax > 0 ? checkMax : DEFAULTS.max;
var newVal = Math.max(0, Math.min(checkVal, newMax));
var valAsFraction = parseDecimal(newVal / newMax, 6);
var valAsPercent = parseDecimal(valAsFraction * 100, 2);
return { max: newMax, val: newVal, valAsFraction: valAsFraction, valAsPercent: valAsPercent, indeterminate: data.indeterminate };
}
function refresh(el) {
var _el$_data = el._data,
indeterminate = _el$_data.indeterminate,
val = _el$_data.val,
valAsFraction = _el$_data.valAsFraction,
max = _el$_data.max;
var bar = el.querySelector('.aui-progress-indicator');
var oldVal = bar.getAttribute('data-value');
if (indeterminate) {
bar.removeAttribute('aria-valuenow');
setIndeterminateOnProgressElement(bar);
} else {
bar.setAttribute('aria-valuenow', val);
bar.setAttribute('aria-valuemax', max);
transitionProgress(bar.querySelector('.aui-progress-indicator-value'), bar, {
currentProgress: oldVal,
value: valAsFraction
});
}
}
function validValue(val) {
return _underscore2.default.isNumber(val) && _underscore2.default.isFinite(val) && !_underscore2.default.isNaN(val);
}
function parseNumeric(val) {
var defaultVal = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
var num = parseFloat(val);
return validValue(num) ? num : defaultVal;
}
(0, _skatejs2.default)('aui-progressbar', {
template: function template(el) {
// Ensure max is set before value upon element creation and before rendering.
// Why is this happening in 'template' and not 'created'? Because it gets called before 'created'!
el._data.max = parseNumeric(el.getAttribute('max'), DEFAULTS.max);
el._data.val = parseNumeric(el.getAttribute('value'), DEFAULTS.val);
el._data.indeterminate = el.hasAttribute('indeterminate');
el._data = recalc(el._data);
var _el$_data2 = el._data,
val = _el$_data2.val,
valAsFraction = _el$_data2.valAsFraction,
valAsPercent = _el$_data2.valAsPercent,
max = _el$_data2.max;
var legacyValue = el._data.indeterminate ? '' : 'data-value="' + valAsFraction + '"';
el.innerHTML = '<div class="aui-progress-indicator"\n ' + legacyValue + '\n role="progressbar"\n aria-valuemin="0"\n aria-valuenow="' + val + '"\n aria-valuemax="' + max + '"\n tabindex="0"\n >\n <span class="aui-progress-indicator-value" style="width: ' + valAsPercent + '%"></span>\n </div>';
},
attached: function attached(el) {
refresh(el);
},
attributes: {
indeterminate: {
created: function created(el) {
el.indeterminate = true;
},
removed: function removed(el) {
el.indeterminate = false;
}
},
value: function value(el, data) {
el.value = parseNumeric(data.newValue, data.oldValue);
},
max: function max(el, data) {
el.max = parseNumeric(data.newValue, data.oldValue);
}
},
prototype: {
get _data() {
return this.__data || (this._data = _underscore2.default.defaults({}, DEFAULTS));
},
set _data(d) {
return this.__data = d;
},
get indeterminate() {
return this._data.indeterminate;
},
set indeterminate(val) {
this._data.indeterminate = !!val;
refresh(this);
},
get value() {
return this._data.val;
},
set value(num) {
if (!validValue(num)) return false;
var val = parseDecimal(num, 6);
this._data = recalc(this._data, { val: val });
refresh(this);
},
get max() {
return this._data.max;
},
set max(num) {
if (!validValue(num)) return false;
var max = parseDecimal(num, 6);
this._data = recalc(this._data, { max: max });
refresh(this);
}
}
});
var progressBars = {
update: deprecate.fn(updateProgressElement, 'AJS.progressBars.update', {
sinceVersion: '7.7.0',
extraInfo: 'Use the <aui-progressbar> web component instead'
}),
setIndeterminate: deprecate.fn(setIndeterminateOnProgressElement, 'AJS.progressBars.setIndeterminate', {
sinceVersion: '7.7.0',
extraInfo: 'Use the <aui-progressbar> web component instead'
})
};
(0, _globalize2.default)('progressBars', progressBars);
exports.default = progressBars;
module.exports = exports['default'];
});
//# sourceMappingURL=progress-indicator.js.map