* Title
*
*
*/
var BackButtonElement = function (_BaseElement) {
_inherits(BackButtonElement, _BaseElement);
/**
* @attribute modifier
* @type {String}
* @description
* [en]The appearance of the back button.[/en]
* [ja]バックボタンの見た目を指定します。[/ja]
*/
function BackButtonElement() {
_classCallCheck(this, BackButtonElement);
var _this = _possibleConstructorReturn(this, (BackButtonElement.__proto__ || _Object$getPrototypeOf(BackButtonElement)).call(this));
contentReady(_this, function () {
_this._compile();
});
_this._options = {};
_this._boundOnClick = _this._onClick.bind(_this);
return _this;
}
_createClass(BackButtonElement, [{
key: '_updateIcon',
value: function _updateIcon() {
var icon = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : util.findChild(this, '.back-button__icon');
icon.innerHTML = autoStyle.getPlatform(this) === 'android' || util.hasModifier(this, 'material') ? mdBackButtonIcon : iosBackButtonIcon;
}
}, {
key: '_compile',
value: function _compile() {
autoStyle.prepare(this);
this.classList.add(defaultClassName);
if (!util.findChild(this, '.back-button__label')) {
var label = util.create('span.back-button__label');
while (this.childNodes[0]) {
label.appendChild(this.childNodes[0]);
}
this.appendChild(label);
}
if (!util.findChild(this, '.back-button__icon')) {
var icon = util.create('span.back-button__icon');
this._updateIcon(icon);
this.insertBefore(icon, this.children[0]);
}
util.updateRipple(this, undefined, { center: '', 'size': 'contain', 'background': 'transparent' });
ModifierUtil.initModifier(this, scheme);
}
/**
* @property options
* @type {Object}
* @description
* [en]Options object.[/en]
* [ja]オプションを指定するオブジェクト。[/ja]
*/
/**
* @property options.animation
* @type {String}
* @description
* [en]Animation name. Available animations are "slide", "lift", "fade" and "none".
* These are platform based animations. For fixed animations, add "-ios" or "-md"
* suffix to the animation name. E.g. "lift-ios", "lift-md". Defaults values are "slide-ios" and "fade-md".
* [/en]
* [ja][/ja]
*/
/**
* @property options.animationOptions
* @type {String}
* @description
* [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`[/en]
* [ja]アニメーション時のduration, delay, timingを指定します。e.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}` [/ja]
*/
/**
* @property options.callback
* @type {String}
* @description
* [en]Function that is called when the transition has ended.[/en]
* [ja]このメソッドによる画面遷移が終了した際に呼び出される関数オブジェクトを指定します。[/ja]
*/
}, {
key: '_onClick',
/**
* @property onClick
* @type {Function}
* @description
* [en]Used to override the default back button behavior.[/en]
* [ja][/ja]
*/
value: function _onClick() {
if (this.onClick) {
this.onClick.apply(this);
} else {
var navigator = util.findParent(this, 'ons-navigator');
if (navigator) {
navigator.popPage(this.options);
}
}
}
}, {
key: 'connectedCallback',
value: function connectedCallback() {
this.addEventListener('click', this._boundOnClick, false);
}
}, {
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) && this._updateIcon();
break;
}
}
}
}, {
key: 'disconnectedCallback',
value: function disconnectedCallback() {
this.removeEventListener('click', this._boundOnClick, false);
}
}, {
key: 'show',
value: function show() {
this.style.display = 'inline-block';
}
}, {
key: 'hide',
value: function hide() {
this.style.display = 'none';
}
}, {
key: 'options',
get: function get() {
return this._options;
},
set: function set(object) {
this._options = object;
}
}], [{
key: 'observedAttributes',
get: function get() {
return ['modifier', 'class'];
}
}]);
return BackButtonElement;
}(BaseElement);
export default BackButtonElement;
onsElements.BackButton = BackButtonElement;
customElements.define('ons-back-button', BackButtonElement);