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'; /* Copyright 2013-2015 ASIAL CORPORATION Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ import onsElements from '../../ons/elements'; import util from '../../ons/util'; import autoStyle from '../../ons/autostyle'; import ModifierUtil from '../../ons/internal/modifier-util'; import AnimatorFactory from '../../ons/internal/animator-factory'; import { AlertDialogAnimator, IOSAlertDialogAnimator, AndroidAlertDialogAnimator } from './animator'; import platform from '../../ons/platform'; import BaseDialogElement from '../base/base-dialog'; import contentReady from '../../ons/content-ready'; var scheme = { '.alert-dialog': 'alert-dialog--*', '.alert-dialog-container': 'alert-dialog-container--*', '.alert-dialog-title': 'alert-dialog-title--*', '.alert-dialog-content': 'alert-dialog-content--*', '.alert-dialog-footer': 'alert-dialog-footer--*', '.alert-dialog-footer--rowfooter': 'alert-dialog-footer--rowfooter--*', '.alert-dialog-button--rowfooter': 'alert-dialog-button--rowfooter--*', '.alert-dialog-button--primal': 'alert-dialog-button--primal--*', '.alert-dialog-button': 'alert-dialog-button--*', 'ons-alert-dialog-button': 'alert-dialog-button--*', '.alert-dialog-mask': 'alert-dialog-mask--*', '.text-input': 'text-input--*' }; var _animatorDict = { 'none': AlertDialogAnimator, 'default': function _default() { return platform.isAndroid() ? AndroidAlertDialogAnimator : IOSAlertDialogAnimator; }, 'fade': function fade() { return platform.isAndroid() ? AndroidAlertDialogAnimator : IOSAlertDialogAnimator; } }; /** * @element ons-alert-dialog * @category dialog * @description * [en] * Alert dialog that is displayed on top of the current screen. Useful for displaying questions, warnings or error messages to the user. The title, content and buttons can be easily customized and it will automatically switch style based on the platform. * * To use the element it can either be attached directly to the `
` element or dynamically created from a template using the `ons.createAlertDialog(template)` utility function and the `` tag. * [/en] * [ja] * 現在のスクリーンの上に表示するアラートダイアログです。ユーザに対する問いかけ、警告、エラーメッセージを表示するのに利用できます。タイトルやコンテンツやボタンは簡単にカスタマイズでき、実行しているプラットフォームに併せてスタイルが自動的に切り替わります。 * [/ja] * @codepen Qwwxyp * @tutorial vanilla/Reference/alert-dialog * @modifier material * [en]Material Design style[/en] * [ja]マテリアルデザインのスタイル[/ja] * @modifier rowfooter * [en]Horizontally aligns the footer buttons.[/en] * [ja]フッターの複数のボタンを水平に配置[/ja] * @seealso ons-dialog * [en]ons-dialog component[/en] * [ja]ons-dialogコンポーネント[/ja] * @seealso ons-popover * [en]ons-popover component[/en] * [ja]ons-dialogコンポーネント[/ja] * @seealso ons.notification * [en]Using ons.notification utility functions.[/en] * [ja]アラートダイアログを表示するには、ons.notificationオブジェクトのメソッドを使うこともできます。[/ja] * @example *{duration: 0.2, delay: 0.4, timing: 'ease-in'}
[/ja]
* @param {Function} [options.callback]
* [en]Function to execute after the dialog has been revealed.[/en]
* [ja]ダイアログが表示され終わった時に呼び出されるコールバックを指定します。[/ja]
* @description
* [en]Show the alert dialog.[/en]
* [ja]ダイアログを表示します。[/ja]
* @return {Promise}
* [en]A `Promise` object that resolves to the displayed element.[/en]
* [ja]表示される要素を解決する`Promise`オブジェクトを返します。[/ja]
*/
/**
* @method hide
* @signature hide([options])
* @param {Object} [options]
* [en]Parameter object.[/en]
* [ja]オプションを指定するオブジェクト。[/ja]
* @param {String} [options.animation]
* [en]Animation name. Available animations are `"fade"` and `"none"`.[/en]
* [ja]アニメーション名を指定します。"fade", "none"のいずれかを指定します。[/ja]
* @param {String} [options.animationOptions]
* [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]
* @param {Function} [options.callback]
* [en]Function to execute after the dialog has been hidden.[/en]
* [ja]このダイアログが閉じた時に呼び出されるコールバックを指定します。[/ja]
* @description
* [en]Hide the alert dialog.[/en]
* [ja]ダイアログを閉じます。[/ja]
* @return {Promise}
* [en]Resolves to the hidden element[/en]
* [ja]隠れた要素を解決する`Promise`オブジェクトを返します。[/ja]
*/
/**
* @property visible
* @readonly
* @type {Boolean}
* @description
* [en]Whether the dialog is visible or not.[/en]
* [ja]要素が見える場合に`true`。[/ja]
*/
/**
* @property onDeviceBackButton
* @type {Object}
* @description
* [en]Back-button handler.[/en]
* [ja]バックボタンハンドラ。[/ja]
*/
/**
* @param {String} name
* @param {DialogAnimator} Animator
*/
}, {
key: '_scheme',
get: function get() {
return scheme;
}
/**
* @return {Element}
*/
}, {
key: '_mask',
get: function get() {
return util.findChild(this, '.alert-dialog-mask');
}
/**
* @return {Element}
*/
}, {
key: '_dialog',
get: function get() {
return util.findChild(this, '.alert-dialog');
}
/**
* @return {Element}
*/
}, {
key: '_titleElement',
get: function get() {
return util.findChild(this._dialog.children[0], '.alert-dialog-title');
}
/**
* @return {Element}
*/
}, {
key: '_contentElement',
get: function get() {
return util.findChild(this._dialog.children[0], '.alert-dialog-content');
}
}], [{
key: 'registerAnimator',
value: function registerAnimator(name, Animator) {
if (!(Animator.prototype instanceof AlertDialogAnimator)) {
util.throwAnimator('AlertDialog');
}
_animatorDict[name] = Animator;
}
}, {
key: 'animators',
get: function get() {
return _animatorDict;
}
}, {
key: 'AlertDialogAnimator',
get: function get() {
return AlertDialogAnimator;
}
}]);
return AlertDialogElement;
}(BaseDialogElement);
export default AlertDialogElement;
onsElements.AlertDialog = AlertDialogElement;
customElements.define('ons-alert-dialog', AlertDialogElement);