123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259 |
- import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
- import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
- import _createClass from 'babel-runtime/helpers/createClass';
- import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
- import _inherits from 'babel-runtime/helpers/inherits';
-
-
- import onsElements from '../ons/elements';
- import util from '../ons/util';
- import autoStyle from '../ons/autostyle';
- import ModifierUtil from '../ons/internal/modifier-util';
- import BaseElement from './base/base-element';
- import contentReady from '../ons/content-ready';
-
- var scheme = {
- '.progress-bar': 'progress-bar--*',
- '.progress-bar__primary': 'progress-bar--*__primary',
- '.progress-bar__secondary': 'progress-bar--*__secondary'
- };
-
- var template = util.createElement('\n <div class="progress-bar">\n <div class="progress-bar__secondary"></div>\n <div class="progress-bar__primary"></div>\n </div>\n');
-
- var INDET = 'indeterminate';
-
-
-
- var ProgressBarElement = function (_BaseElement) {
- _inherits(ProgressBarElement, _BaseElement);
-
-
-
-
-
-
-
-
-
-
-
-
-
- function ProgressBarElement() {
- _classCallCheck(this, ProgressBarElement);
-
- var _this = _possibleConstructorReturn(this, (ProgressBarElement.__proto__ || _Object$getPrototypeOf(ProgressBarElement)).call(this));
-
- contentReady(_this, function () {
- return _this._compile();
- });
- return _this;
- }
-
- _createClass(ProgressBarElement, [{
- key: '_compile',
- value: function _compile() {
- if (!this._isCompiled()) {
- this._template = template.cloneNode(true);
- } else {
- this._template = util.findChild(this, '.progress-bar');
- }
-
- this._primary = util.findChild(this._template, '.progress-bar__primary');
- this._secondary = util.findChild(this._template, '.progress-bar__secondary');
-
- this._updateDeterminate();
- this._updateValue();
-
- this.appendChild(this._template);
-
- autoStyle.prepare(this);
- ModifierUtil.initModifier(this, scheme);
- }
- }, {
- key: '_isCompiled',
- value: function _isCompiled() {
- if (!util.findChild(this, '.progress-bar')) {
- return false;
- }
-
- var barElement = util.findChild(this, '.progress-bar');
-
- if (!util.findChild(barElement, '.progress-bar__secondary')) {
- return false;
- }
-
- if (!util.findChild(barElement, '.progress-bar__primary')) {
- return false;
- }
-
- return true;
- }
- }, {
- key: 'attributeChangedCallback',
- value: function attributeChangedCallback(name, last, current) {
- if (name === 'modifier') {
- ModifierUtil.onModifierChanged(last, current, this, scheme);
- this.hasAttribute(INDET) && this._updateDeterminate();
- } else if (name === 'value' || name === 'secondary-value') {
- this._updateValue();
- } else if (name === INDET) {
- this._updateDeterminate();
- }
- }
- }, {
- key: '_updateDeterminate',
- value: function _updateDeterminate() {
- var _this2 = this;
-
- contentReady(this, function () {
- return util.toggleModifier(_this2, INDET, { force: _this2.hasAttribute(INDET) });
- });
- }
- }, {
- key: '_updateValue',
- value: function _updateValue() {
- var _this3 = this;
-
- contentReady(this, function () {
- _this3._primary.style.width = _this3.hasAttribute('value') ? _this3.getAttribute('value') + '%' : '0%';
- _this3._secondary.style.width = _this3.hasAttribute('secondary-value') ? _this3.getAttribute('secondary-value') + '%' : '0%';
- });
- }
-
-
-
-
- }, {
- key: 'value',
- set: function set(value) {
- if (typeof value !== 'number' || value < 0 || value > 100) {
- util.throw('Invalid value');
- }
-
- this.setAttribute('value', Math.floor(value));
- },
- get: function get() {
- return parseInt(this.getAttribute('value') || '0');
- }
-
-
-
-
- }, {
- key: 'secondaryValue',
- set: function set(value) {
- if (typeof value !== 'number' || value < 0 || value > 100) {
- util.throw('Invalid value');
- }
-
- this.setAttribute('secondary-value', Math.floor(value));
- },
- get: function get() {
- return parseInt(this.getAttribute('secondary-value') || '0');
- }
-
-
-
-
- }, {
- key: 'indeterminate',
- set: function set(value) {
- if (value) {
- this.setAttribute(INDET, '');
- } else {
- this.removeAttribute(INDET);
- }
- },
- get: function get() {
- return this.hasAttribute(INDET);
- }
- }], [{
- key: 'observedAttributes',
- get: function get() {
- return ['modifier', 'value', 'secondary-value', INDET];
- }
- }]);
-
- return ProgressBarElement;
- }(BaseElement);
-
- export default ProgressBarElement;
-
-
- onsElements.ProgressBar = ProgressBarElement;
- customElements.define('ons-progress-bar', ProgressBarElement);
|