123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440 |
- 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 TabbarElement from './ons-tabbar';
- import contentReady from '../ons/content-ready';
- import { PageLoader, defaultPageLoader } from '../ons/page-loader';
-
- var defaultClassName = 'tabbar__item';
-
- var scheme = {
- '': 'tabbar--*__item',
- '.tabbar__button': 'tabbar--*__button'
- };
-
-
-
- var TabElement = function (_BaseElement) {
- _inherits(TabElement, _BaseElement);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- function TabElement() {
- _classCallCheck(this, TabElement);
-
- var _this = _possibleConstructorReturn(this, (TabElement.__proto__ || _Object$getPrototypeOf(TabElement)).call(this));
-
- if (['label', 'icon', 'badge'].some(_this.hasAttribute.bind(_this))) {
- _this._compile();
- } else {
- contentReady(_this, function () {
- return _this._compile();
- });
- }
-
- _this._pageLoader = defaultPageLoader;
- _this._onClick = _this._onClick.bind(_this);
- return _this;
- }
-
- _createClass(TabElement, [{
- key: '_compile',
- value: function _compile() {
- autoStyle.prepare(this);
- this.classList.add(defaultClassName);
-
- if (this._button) {
- return;
- }
-
- var button = util.create('button.tabbar__button');
- while (this.childNodes[0]) {
- button.appendChild(this.childNodes[0]);
- }
-
- var input = util.create('input', { display: 'none' });
- input.type = 'radio';
-
- this.appendChild(input);
- this.appendChild(button);
-
- this._updateButtonContent();
- ModifierUtil.initModifier(this, scheme);
- this._updateRipple();
- }
- }, {
- key: '_updateRipple',
- value: function _updateRipple() {
- this._button && util.updateRipple(this._button, this.hasAttribute('ripple'));
- }
- }, {
- key: '_updateButtonContent',
- value: function _updateButtonContent() {
- var _this2 = this;
-
- var button = this._button;
-
- var iconWrapper = this._icon;
- if (this.hasAttribute('icon')) {
- iconWrapper = iconWrapper || util.createElement('<div class="tabbar__icon"><ons-icon></ons-icon></div>');
- var icon = iconWrapper.children[0];
- var fix = function (last) {
- return function () {
- return icon.attributeChangedCallback('icon', last, _this2.getAttribute('icon'));
- };
- }(icon.getAttribute('icon'));
- icon.setAttribute('icon', this.getAttribute(this.isActive() ? 'active-icon' : 'icon'));
- iconWrapper.parentElement !== button && button.insertBefore(iconWrapper, button.firstChild);
-
-
- icon.attributeChangedCallback instanceof Function ? fix() : _setImmediate(function () {
- return icon.attributeChangedCallback instanceof Function && fix();
- });
- } else {
- iconWrapper && iconWrapper.remove();
- }
-
- ['label', 'badge'].forEach(function (attr, index) {
- var prop = _this2.querySelector('.tabbar__' + attr);
- if (_this2.hasAttribute(attr)) {
- prop = prop || util.create('.tabbar__' + attr + (attr === 'badge' ? ' notification' : ''));
- prop.textContent = _this2.getAttribute(attr);
- prop.parentElement !== button && button.appendChild(prop);
- } else {
- prop && prop.remove();
- }
- });
- }
- }, {
- key: '_onClick',
- value: function _onClick() {
- if (this.onClick instanceof Function) {
- this.onClick();
- } else {
- this._tabbar.setActiveTab(this.index, { reject: false });
- }
- }
- }, {
- key: 'setActive',
- value: function setActive() {
- var active = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-
- this._input.checked = active;
- this.classList.toggle('active', active);
- util.toggleAttribute(this, 'active', active);
-
- if (this.hasAttribute('icon') && this.hasAttribute('active-icon')) {
- this._icon.children[0].setAttribute('icon', this.getAttribute(active ? 'active-icon' : 'icon'));
- }
- }
- }, {
- key: '_loadPageElement',
- value: function _loadPageElement(parent, page) {
- var _this3 = this;
-
- this._hasLoaded = true;
-
- return new _Promise(function (resolve) {
- _this3._pageLoader.load({ parent: parent, page: page }, function (pageElement) {
- parent.replaceChild(pageElement, parent.children[_this3.index]);
- _this3._loadedPage = pageElement;
- resolve(pageElement);
- });
- });
- }
- }, {
- key: 'isActive',
-
-
-
-
- value: function isActive() {
- return this.classList.contains('active');
- }
- }, {
- key: 'disconnectedCallback',
- value: function disconnectedCallback() {
- this.removeEventListener('click', this._onClick, false);
- if (this._loadedPage) {
- this._hasLoaded = false;
- this.loaded = null;
- }
- }
- }, {
- key: 'connectedCallback',
- value: function connectedCallback() {
- var _this4 = this;
-
- this.addEventListener('click', this._onClick, false);
-
- if (!util.isAttached(this) || this.loaded) {
- return;
- }
-
- var deferred = util.defer();
- this.loaded = deferred.promise;
-
- contentReady(this, function () {
- var index = _this4.index;
- var tabbar = _this4._tabbar;
- if (!tabbar) {
- util.throw('Tab elements must be children of Tabbar');
- }
-
- if (tabbar.hasAttribute('modifier')) {
- util.addModifier(_this4, tabbar.getAttribute('modifier'));
- }
-
- if (!_this4._hasLoaded) {
- if (_this4.hasAttribute('active')) {
- _this4.setActive(true);
- tabbar.setAttribute('activeIndex', index);
- }
-
- if (index === tabbar.tabs.length - 1) {
- tabbar._onRefresh();
- _setImmediate(function () {
- return tabbar._onRefresh();
- });
- }
-
- TabbarElement.rewritables.ready(tabbar, function () {
- var pageTarget = _this4.page || _this4.getAttribute('page');
- if (!_this4.pageElement && pageTarget) {
- var parentTarget = tabbar._targetElement;
- var dummyPage = util.create('div', { height: '100%', width: '100%', visibility: 'hidden' });
- parentTarget.insertBefore(dummyPage, parentTarget.children[index]);
-
- var load = function load() {
- return _this4._loadPageElement(parentTarget, pageTarget).then(deferred.resolve);
- };
- return _this4.isActive() ? load() : tabbar._loadInactive.promise.then(load);
- }
-
- return deferred.resolve(_this4.pageElement);
- });
- }
- });
- }
- }, {
- key: 'attributeChangedCallback',
- value: function attributeChangedCallback(name, last, current) {
- var _this5 = this;
-
- switch (name) {
- case 'class':
- util.restoreClass(this, defaultClassName, scheme);
- break;
- case 'modifier':
- contentReady(this, function () {
- return ModifierUtil.onModifierChanged(last, current, _this5, scheme);
- });
- break;
- case 'ripple':
- contentReady(this, function () {
- return _this5._updateRipple();
- });
- break;
- case 'icon':
- case 'label':
- case 'badge':
- contentReady(this, function () {
- return _this5._updateButtonContent();
- });
- break;
- case 'page':
- this.page = current || '';
- break;
- }
- }
- }, {
- key: 'pageLoader',
- set: function set(loader) {
- if (!(loader instanceof PageLoader)) {
- util.throwPageLoader();
- }
- this._pageLoader = loader;
- },
- get: function get() {
- return this._pageLoader;
- }
- }, {
- key: '_input',
- get: function get() {
- return util.findChild(this, 'input');
- }
- }, {
- key: '_button',
- get: function get() {
- return util.findChild(this, '.tabbar__button');
- }
- }, {
- key: '_icon',
- get: function get() {
- return this.querySelector('.tabbar__icon');
- }
- }, {
- key: '_tabbar',
- get: function get() {
- return util.findParent(this, 'ons-tabbar');
- }
- }, {
- key: 'index',
- get: function get() {
- return Array.prototype.indexOf.call(this.parentElement.children, this);
- }
- }, {
- key: 'pageElement',
- get: function get() {
-
- if (this._loadedPage) {
- return this._loadedPage;
- }
-
- var tabbar = this._tabbar;
- if (tabbar.pages.length === tabbar.tabs.length) {
- return tabbar.pages[this.index];
- }
-
- return null;
- }
- }], [{
- key: 'observedAttributes',
- get: function get() {
- return ['modifier', 'ripple', 'icon', 'label', 'page', 'badge', 'class'];
- }
- }]);
-
- return TabElement;
- }(BaseElement);
-
- export default TabElement;
-
-
- onsElements.Tab = TabElement;
- customElements.define('ons-tab', TabElement);
|