123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344 |
- import _Promise from 'babel-runtime/core-js/promise';
- import _setImmediate from 'babel-runtime/core-js/set-immediate';
- 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 defaultClassName = 'segment';
- var scheme = {
- '': 'segment--*',
- '.segment__item': 'segment--*__item',
- '.segment__input': 'segment--*__input',
- '.segment__button': 'segment--*__button'
- };
-
- var generateId = function () {
- var i = 0;
- return function () {
- return 'ons-segment-gen-' + i++;
- };
- }();
-
-
-
- var SegmentElement = function (_BaseElement) {
- _inherits(SegmentElement, _BaseElement);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- function SegmentElement() {
- _classCallCheck(this, SegmentElement);
-
- var _this = _possibleConstructorReturn(this, (SegmentElement.__proto__ || _Object$getPrototypeOf(SegmentElement)).call(this));
-
- _this._segmentId = generateId();
- _this._tabbar = null;
- _this._onChange = _this._onChange.bind(_this);
- _this._onTabbarPreChange = _this._onTabbarPreChange.bind(_this);
-
- contentReady(_this, function () {
- _this._compile();
- _setImmediate(function () {
- return _this._lastActiveIndex = _this._tabbar ? _this._tabbar.getActiveTabIndex() : _this.getActiveButtonIndex();
- });
- });
- return _this;
- }
-
- _createClass(SegmentElement, [{
- key: '_compile',
- value: function _compile() {
- autoStyle.prepare(this);
- this.classList.add(defaultClassName);
-
- for (var index = this.children.length - 1; index >= 0; index--) {
- var item = this.children[index];
- item.classList.add('segment__item');
-
- var input = util.findChild(item, '.segment__input') || util.create('input.segment__input');
- input.type = 'radio';
- input.value = index;
- input.name = input.name || this._segmentId;
- input.checked = !this.hasAttribute('tabbar-id') && index === (parseInt(this.getAttribute('active-index')) || 0);
-
- var button = util.findChild(item, '.segment__button') || util.create('.segment__button');
- if (button.parentElement !== item) {
- while (item.firstChild) {
- button.appendChild(item.firstChild);
- }
- }
-
- item.appendChild(input);
- item.appendChild(button);
- }
-
- ModifierUtil.initModifier(this, scheme);
- }
- }, {
- key: 'connectedCallback',
- value: function connectedCallback() {
- var _this2 = this;
-
- contentReady(this, function () {
- if (_this2.hasAttribute('tabbar-id')) {
- var page = util.findParent(_this2, 'ons-page');
- _this2._tabbar = page && page.querySelector('#' + _this2.getAttribute('tabbar-id'));
- if (!_this2._tabbar || _this2._tabbar.tagName !== 'ONS-TABBAR') {
- util.throw('No tabbar with id ' + _this2.getAttribute('tabbar-id') + ' was found.');
- }
-
- _this2._tabbar.setAttribute('hide-tabs', '');
- _setImmediate(function () {
- return _this2._setChecked(_this2._tabbar.getActiveTabIndex());
- });
-
- _this2._tabbar.addEventListener('prechange', _this2._onTabbarPreChange);
- }
- });
-
- this.addEventListener('change', this._onChange);
- }
- }, {
- key: 'disconnectedCallback',
- value: function disconnectedCallback() {
- var _this3 = this;
-
- contentReady(this, function () {
- if (_this3._tabbar) {
- _this3._tabbar.removeEventListener('prechange', _this3._onTabbarPreChange);
- _this3._tabbar = null;
- }
- });
- this.removeEventListener('change', this._onChange);
- }
- }, {
- key: '_setChecked',
- value: function _setChecked(index) {
- this.children[index].firstElementChild.checked = true;
- }
-
-
-
-
- }, {
- key: 'setActiveButton',
- value: function setActiveButton(index, options) {
- if (this._tabbar) {
- return this._tabbar.setActiveTab(index, options);
- }
-
- this._setChecked(index);
- this._postChange(index);
- return _Promise.resolve(index);
- }
-
-
-
-
- }, {
- key: 'getActiveButtonIndex',
- value: function getActiveButtonIndex() {
- for (var i = this.children.length - 1; i >= 0; i--) {
-
- if (this.children[i].firstElementChild.checked) {
- return i;
- }
- }
- return -1;
- }
- }, {
- key: '_onChange',
- value: function _onChange(event) {
- event.stopPropagation();
- this._tabbar ? this._tabbar.setActiveTab(this.getActiveButtonIndex(), { reject: false }) : this._postChange(this.getActiveButtonIndex());
- }
- }, {
- key: '_onTabbarPreChange',
- value: function _onTabbarPreChange(event) {
- var _this4 = this;
-
- _setImmediate(function () {
- if (!event.detail.canceled) {
- _this4._setChecked(event.index);
- _this4._postChange(event.index);
- }
- });
- }
- }, {
- key: '_postChange',
- value: function _postChange(index) {
- util.triggerElementEvent(this, 'postchange', {
- index: index,
- activeIndex: index,
- lastActiveIndex: this._lastActiveIndex,
- segmentItem: this.children[index]
- });
- this._lastActiveIndex = index;
- }
-
-
-
-
- }, {
- key: 'attributeChangedCallback',
- value: function attributeChangedCallback(name, last, current) {
- switch (name) {
- case 'class':
- util.restoreClass(this, defaultClassName, scheme);
- break;
- case 'modifier':
- ModifierUtil.onModifierChanged(last, current, this, scheme);
- break;
- }
- }
- }, {
- key: 'disabled',
- set: function set(value) {
- return util.toggleAttribute(this, 'disabled', value);
- },
- get: function get() {
- return this.hasAttribute('disabled');
- }
- }], [{
- key: 'observedAttributes',
- get: function get() {
- return ['class', 'modifier'];
- }
- }, {
- key: 'events',
- get: function get() {
- return ['postchange'];
- }
- }]);
-
- return SegmentElement;
- }(BaseElement);
-
- export default SegmentElement;
-
-
- onsElements.Segment = SegmentElement;
- customElements.define('ons-segment', SegmentElement);
|