123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315 |
- 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 internal from '../ons/internal';
- 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 = 'toolbar';
-
- var scheme = {
- '': 'toolbar--*',
- '.toolbar__left': 'toolbar--*__left',
- '.toolbar__center': 'toolbar--*__center',
- '.toolbar__right': 'toolbar--*__right'
- };
-
-
-
- var ToolbarElement = function (_BaseElement) {
- _inherits(ToolbarElement, _BaseElement);
-
-
-
-
-
-
-
-
-
-
- function ToolbarElement() {
- _classCallCheck(this, ToolbarElement);
-
- var _this = _possibleConstructorReturn(this, (ToolbarElement.__proto__ || _Object$getPrototypeOf(ToolbarElement)).call(this));
-
- contentReady(_this, function () {
- _this._compile();
- });
- return _this;
- }
-
- _createClass(ToolbarElement, [{
- 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: 'setVisibility',
- value: function setVisibility(visible) {
- var _this2 = this;
-
- contentReady(this, function () {
- _this2.style.display = visible ? '' : 'none';
-
- if (_this2.parentNode) {
- var siblingBackground = util.findChild(_this2.parentNode, '.page__background');
- if (siblingBackground) {
- siblingBackground.style.top = visible ? null : 0;
- }
-
- var siblingContent = util.findChild(_this2.parentNode, '.page__content');
- if (siblingContent) {
- siblingContent.style.top = visible ? null : 0;
- }
- }
- });
- }
-
-
-
-
- }, {
- key: 'show',
- value: function show() {
- this.setVisibility(true);
- }
-
-
-
-
- }, {
- key: 'hide',
- value: function hide() {
- this.setVisibility(false);
- }
-
-
-
-
- }, {
- key: '_getToolbarLeftItemsElement',
- value: function _getToolbarLeftItemsElement() {
- return this.querySelector('.left') || internal.nullElement;
- }
-
-
-
-
- }, {
- key: '_getToolbarCenterItemsElement',
- value: function _getToolbarCenterItemsElement() {
- return this.querySelector('.center') || internal.nullElement;
- }
-
-
-
-
- }, {
- key: '_getToolbarRightItemsElement',
- value: function _getToolbarRightItemsElement() {
- return this.querySelector('.right') || internal.nullElement;
- }
-
-
-
-
- }, {
- key: '_getToolbarBackButtonLabelElement',
- value: function _getToolbarBackButtonLabelElement() {
- return this.querySelector('ons-back-button .back-button__label') || internal.nullElement;
- }
-
-
-
-
- }, {
- key: '_getToolbarBackButtonIconElement',
- value: function _getToolbarBackButtonIconElement() {
- return this.querySelector('ons-back-button .back-button__icon') || internal.nullElement;
- }
- }, {
- key: '_compile',
- value: function _compile() {
- autoStyle.prepare(this);
- this.classList.add(defaultClassName);
- this._ensureToolbarItemElements();
- ModifierUtil.initModifier(this, scheme);
- }
- }, {
- key: '_ensureToolbarItemElements',
- value: function _ensureToolbarItemElements() {
- for (var i = this.childNodes.length - 1; i >= 0; i--) {
-
- if (this.childNodes[i].nodeType != 1) {
- this.removeChild(this.childNodes[i]);
- }
- }
-
- var center = this._ensureToolbarElement('center');
- center.classList.add('toolbar__title');
-
- if (this.children.length !== 1 || !this.children[0].classList.contains('center')) {
- var left = this._ensureToolbarElement('left');
- var right = this._ensureToolbarElement('right');
-
- if (this.children[0] !== left || this.children[1] !== center || this.children[2] !== right) {
- this.appendChild(left);
- this.appendChild(center);
- this.appendChild(right);
- }
- }
- }
- }, {
- key: '_ensureToolbarElement',
- value: function _ensureToolbarElement(name) {
- if (util.findChild(this, '.toolbar__' + name)) {
- var _element = util.findChild(this, '.toolbar__' + name);
- _element.classList.add(name);
- return _element;
- }
-
- var element = util.findChild(this, '.' + name) || util.create('.' + name);
- element.classList.add('toolbar__' + name);
-
- return element;
- }
- }], [{
- key: 'observedAttributes',
- get: function get() {
- return ['modifier', 'class'];
- }
- }]);
-
- return ToolbarElement;
- }(BaseElement);
-
- export default ToolbarElement;
-
-
- onsElements.Toolbar = ToolbarElement;
- customElements.define('ons-toolbar', ToolbarElement);
|