| 1 | /*
|
| 2 | Copyright 2013-2015 ASIAL CORPORATION
|
| 3 |
|
| 4 | Licensed under the Apache License, Version 2.0 (the "License");
|
| 5 | you may not use this file except in compliance with the License.
|
| 6 | You may obtain a copy of the License at
|
| 7 |
|
| 8 | http://www.apache.org/licenses/LICENSE-2.0
|
| 9 |
|
| 10 | Unless required by applicable law or agreed to in writing, software
|
| 11 | distributed under the License is distributed on an "AS IS" BASIS,
|
| 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
| 13 | See the License for the specific language governing permissions and
|
| 14 | limitations under the License.
|
| 15 |
|
| 16 | */
|
| 17 |
|
| 18 | import onsElements from '../ons/elements.js';
|
| 19 | import util from '../ons/util.js';
|
| 20 | import autoStyle from '../ons/autostyle.js';
|
| 21 | import ModifierUtil from '../ons/internal/modifier-util.js';
|
| 22 | import AnimatorFactory from '../ons/internal/animator-factory.js';
|
| 23 | import { AlertDialogAnimator, IOSAlertDialogAnimator, AndroidAlertDialogAnimator } from './ons-alert-dialog/animator.js';
|
| 24 | import platform from '../ons/platform.js';
|
| 25 | import BaseDialogElement from './base/base-dialog.js';
|
| 26 | import contentReady from '../ons/content-ready.js';
|
| 27 |
|
| 28 | const scheme = {
|
| 29 | '.alert-dialog': 'alert-dialog--*',
|
| 30 | '.alert-dialog-container': 'alert-dialog-container--*',
|
| 31 | '.alert-dialog-title': 'alert-dialog-title--*',
|
| 32 | '.alert-dialog-content': 'alert-dialog-content--*',
|
| 33 | '.alert-dialog-footer': 'alert-dialog-footer--*',
|
| 34 | '.alert-dialog-footer--rowfooter': 'alert-dialog-footer--rowfooter--*',
|
| 35 | '.alert-dialog-button--rowfooter': 'alert-dialog-button--rowfooter--*',
|
| 36 | '.alert-dialog-button--primal': 'alert-dialog-button--primal--*',
|
| 37 | '.alert-dialog-button': 'alert-dialog-button--*',
|
| 38 | 'ons-alert-dialog-button': 'alert-dialog-button--*',
|
| 39 | '.alert-dialog-mask': 'alert-dialog-mask--*',
|
| 40 | '.text-input': 'text-input--*'
|
| 41 | };
|
| 42 |
|
| 43 | const _animatorDict = {
|
| 44 | 'none': AlertDialogAnimator,
|
| 45 | 'default': function () { return platform.isAndroid() ? AndroidAlertDialogAnimator : IOSAlertDialogAnimator; },
|
| 46 | 'fade': function () { return platform.isAndroid() ? AndroidAlertDialogAnimator : IOSAlertDialogAnimator; }
|
| 47 | };
|
| 48 |
|
| 49 | /**
|
| 50 | * @element ons-alert-dialog
|
| 51 | * @category dialog
|
| 52 | * @description
|
| 53 | * [en]
|
| 54 | * 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.
|
| 55 | *
|
| 56 | * To use the element it can either be attached directly to the `<body>` element or dynamically created from a template using the `ons.createAlertDialog(template)` utility function and the `<template>` tag.
|
| 57 | * [/en]
|
| 58 | * [ja]
|
| 59 | * 現在のスクリーンの上に表示するアラートダイアログです。ユーザに対する問いかけ、警告、エラーメッセージを表示するのに利用できます。タイトルやコンテンツやボタンは簡単にカスタマイズでき、実行しているプラットフォームに併せてスタイルが自動的に切り替わります。
|
| 60 | * [/ja]
|
| 61 | * @codepen Qwwxyp
|
| 62 | * @tutorial vanilla/Reference/alert-dialog
|
| 63 | * @modifier material
|
| 64 | * [en]Material Design style[/en]
|
| 65 | * [ja]マテリアルデザインのスタイル[/ja]
|
| 66 | * @modifier rowfooter
|
| 67 | * [en]Horizontally aligns the footer buttons.[/en]
|
| 68 | * [ja]フッターの複数のボタンを水平に配置[/ja]
|
| 69 | * @seealso ons-dialog
|
| 70 | * [en]ons-dialog component[/en]
|
| 71 | * [ja]ons-dialogコンポーネント[/ja]
|
| 72 | * @seealso ons-popover
|
| 73 | * [en]ons-popover component[/en]
|
| 74 | * [ja]ons-dialogコンポーネント[/ja]
|
| 75 | * @seealso ons.notification
|
| 76 | * [en]Using ons.notification utility functions.[/en]
|
| 77 | * [ja]アラートダイアログを表示するには、ons.notificationオブジェクトのメソッドを使うこともできます。[/ja]
|
| 78 | * @example
|
| 79 | * <ons-alert-dialog id="alert-dialog">
|
| 80 | * <div class="alert-dialog-title">Warning!</div>
|
| 81 | * <div class="alert-dialog-content">
|
| 82 | * An error has occurred!
|
| 83 | * </div>
|
| 84 | * <div class="alert-dialog-footer">
|
| 85 | * <button id="alert-dialog-button" class="alert-dialog-button">OK</button>
|
| 86 | * </div>
|
| 87 | * </ons-alert-dialog>
|
| 88 | * <script>
|
| 89 | * document.getElementById('alert-dialog').show();
|
| 90 | * </script>
|
| 91 | */
|
| 92 | export default class AlertDialogElement extends BaseDialogElement {
|
| 93 |
|
| 94 | /**
|
| 95 | * @event preshow
|
| 96 | * @description
|
| 97 | * [en]Fired just before the alert dialog is displayed.[/en]
|
| 98 | * [ja]アラートダイアログが表示される直前に発火します。[/ja]
|
| 99 | * @param {Object} event [en]Event object.[/en]
|
| 100 | * @param {Object} event.alertDialog
|
| 101 | * [en]Alert dialog object.[/en]
|
| 102 | * [ja]アラートダイアログのオブジェクト。[/ja]
|
| 103 | * @param {Function} event.cancel
|
| 104 | * [en]Execute to stop the dialog from showing.[/en]
|
| 105 | * [ja]この関数を実行すると、アラートダイアログの表示を止めます。[/ja]
|
| 106 | */
|
| 107 |
|
| 108 | /**
|
| 109 | * @event postshow
|
| 110 | * @description
|
| 111 | * [en]Fired just after the alert dialog is displayed.[/en]
|
| 112 | * [ja]アラートダイアログが表示された直後に発火します。[/ja]
|
| 113 | * @param {Object} event [en]Event object.[/en]
|
| 114 | * @param {Object} event.alertDialog
|
| 115 | * [en]Alert dialog object.[/en]
|
| 116 | * [ja]アラートダイアログのオブジェクト。[/ja]
|
| 117 | */
|
| 118 |
|
| 119 | /**
|
| 120 | * @event prehide
|
| 121 | * @description
|
| 122 | * [en]Fired just before the alert dialog is hidden.[/en]
|
| 123 | * [ja]アラートダイアログが隠れる直前に発火します。[/ja]
|
| 124 | * @param {Object} event [en]Event object.[/en]
|
| 125 | * @param {Object} event.alertDialog
|
| 126 | * [en]Alert dialog object.[/en]
|
| 127 | * [ja]アラートダイアログのオブジェクト。[/ja]
|
| 128 | * @param {Function} event.cancel
|
| 129 | * [en]Execute to stop the dialog from hiding.[/en]
|
| 130 | * [ja]この関数を実行すると、アラートダイアログが閉じようとするのを止めます。[/ja]
|
| 131 | */
|
| 132 |
|
| 133 | /**
|
| 134 | * @event posthide
|
| 135 | * @description
|
| 136 | * [en]Fired just after the alert dialog is hidden.[/en]
|
| 137 | * [ja]アラートダイアログが隠れた後に発火します。[/ja]
|
| 138 | * @param {Object} event [en]Event object.[/en]
|
| 139 | * @param {Object} event.alertDialog
|
| 140 | * [en]Alert dialog object.[/en]
|
| 141 | * [ja]アラートダイアログのオブジェクト。[/ja]
|
| 142 | */
|
| 143 |
|
| 144 | /**
|
| 145 | * @event dialogcancel
|
| 146 | * @description
|
| 147 | * [en]Fired when the dialog is canceled.[/en]
|
| 148 | * [ja][/ja]
|
| 149 | */
|
| 150 |
|
| 151 | /**
|
| 152 | * @attribute modifier
|
| 153 | * @type {String}
|
| 154 | * @description
|
| 155 | * [en]The appearance of the dialog.[/en]
|
| 156 | * [ja]ダイアログの見た目を指定します。[/ja]
|
| 157 | */
|
| 158 |
|
| 159 | /**
|
| 160 | * @attribute cancelable
|
| 161 | * @description
|
| 162 | * [en]If this attribute is set the dialog can be closed by tapping the background or by pressing the back button on Android devices.[/en]
|
| 163 | * [ja]この属性を設定すると、ダイアログの背景をタップしたりAndroidデバイスのバックボタンを押すとダイアログが閉じるようになります。[/ja]
|
| 164 | */
|
| 165 |
|
| 166 | /**
|
| 167 | * @attribute disabled
|
| 168 | * @description
|
| 169 | * [en]If this attribute is set the dialog is disabled.[/en]
|
| 170 | * [ja]この属性がある時、アラートダイアログはdisabled状態になります。[/ja]
|
| 171 | */
|
| 172 |
|
| 173 | /**
|
| 174 | * @attribute animation
|
| 175 | * @type {String}
|
| 176 | * @default default
|
| 177 | * @description
|
| 178 | * [en]The animation used when showing and hiding the dialog. Can be either `"none"` or `"default"`.[/en]
|
| 179 | * [ja]ダイアログを表示する際のアニメーション名を指定します。デフォルトでは"none"か"default"が指定できます。[/ja]
|
| 180 | */
|
| 181 |
|
| 182 | /**
|
| 183 | * @attribute animation-options
|
| 184 | * @type {Expression}
|
| 185 | * @description
|
| 186 | * [en]Specify the animation's duration, timing and delay with an object literal. E.g. `{duration: 0.2, delay: 1, timing: 'ease-in'}`.[/en]
|
| 187 | * [ja]アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例：{duration: 0.2, delay: 1, timing: 'ease-in'}[/ja]
|
| 188 | */
|
| 189 |
|
| 190 | /**
|
| 191 | * @attribute mask-color
|
| 192 | * @type {String}
|
| 193 | * @default rgba(0, 0, 0, 0.2)
|
| 194 | * @description
|
| 195 | * [en]Color of the background mask. Default is "rgba(0, 0, 0, 0.2)".[/en]
|
| 196 | * [ja]背景のマスクの色を指定します。"rgba(0, 0, 0, 0.2)"がデフォルト値です。[/ja]
|
| 197 | */
|
| 198 |
|
| 199 | /**
|
| 200 | * @attribute visible
|
| 201 | * @type {Boolean}
|
| 202 | * @description
|
| 203 | * [en]Whether the alert dialog is visible or not.[/en]
|
| 204 | * [ja]要素が見える場合に`true`。[/ja]
|
| 205 | */
|
| 206 |
|
| 207 | constructor() {
|
| 208 | super();
|
| 209 |
|
| 210 | contentReady(this, () => this._compile());
|
| 211 | }
|
| 212 |
|
| 213 | get _scheme() {
|
| 214 | return scheme;
|
| 215 | }
|
| 216 |
|
| 217 | /**
|
| 218 | * @return {Element}
|
| 219 | */
|
| 220 | get _mask() {
|
| 221 | return util.findChild(this, '.alert-dialog-mask');
|
| 222 | }
|
| 223 |
|
| 224 | /**
|
| 225 | * @return {Element}
|
| 226 | */
|
| 227 | get _dialog() {
|
| 228 | return util.findChild(this, '.alert-dialog');
|
| 229 |
|
| 230 | }
|
| 231 |
|
| 232 | /**
|
| 233 | * @return {Element}
|
| 234 | */
|
| 235 | get _titleElement() {
|
| 236 | return util.findChild(this._dialog.children[0], '.alert-dialog-title');
|
| 237 | }
|
| 238 |
|
| 239 | /**
|
| 240 | * @return {Element}
|
| 241 | */
|
| 242 | get _contentElement() {
|
| 243 | return util.findChild(this._dialog.children[0], '.alert-dialog-content');
|
| 244 | }
|
| 245 |
|
| 246 | _updateAnimatorFactory() {
|
| 247 | return new AnimatorFactory({
|
| 248 | animators: _animatorDict,
|
| 249 | baseClass: AlertDialogAnimator,
|
| 250 | baseClassName: 'AlertDialogAnimator',
|
| 251 | defaultAnimation: this.getAttribute('animation')
|
| 252 | });
|
| 253 | }
|
| 254 |
|
| 255 | _compile() {
|
| 256 | autoStyle.prepare(this);
|
| 257 |
|
| 258 | this.style.display = 'none';
|
| 259 | this.style.zIndex = 10001;
|
| 260 |
|
| 261 | /**
|
| 262 | * Expected result after compile:
|
| 263 | *
|
| 264 | * <ons-alert-dialog style="none">
|
| 265 | * <div class="alert-dialog-mask"></div>
|
| 266 | * <div class="alert-dialog">
|
| 267 | * <div class="alert-dialog-container">...</div>
|
| 268 | * </div>
|
| 269 | * </ons-alert-dialog>
|
| 270 | */
|
| 271 |
|
| 272 | const content = document.createDocumentFragment();
|
| 273 |
|
| 274 | if (!this._mask && !this._dialog) {
|
| 275 | while (this.firstChild) {
|
| 276 | content.appendChild(this.firstChild);
|
| 277 | }
|
| 278 | }
|
| 279 |
|
| 280 | if (!this._mask) {
|
| 281 | const mask = document.createElement('div');
|
| 282 | mask.classList.add('alert-dialog-mask');
|
| 283 | this.insertBefore(mask, this.children[0]);
|
| 284 | }
|
| 285 |
|
| 286 | if (!this._dialog) {
|
| 287 | const dialog = document.createElement('div');
|
| 288 | dialog.classList.add('alert-dialog');
|
| 289 | this.insertBefore(dialog, null);
|
| 290 | }
|
| 291 |
|
| 292 | if (!util.findChild(this._dialog, '.alert-dialog-container')) {
|
| 293 | const container = document.createElement('div');
|
| 294 | container.classList.add('alert-dialog-container');
|
| 295 | this._dialog.appendChild(container);
|
| 296 | }
|
| 297 |
|
| 298 | this._dialog.children[0].appendChild(content);
|
| 299 |
|
| 300 | this._dialog.style.zIndex = 20001;
|
| 301 | this._mask.style.zIndex = 20000;
|
| 302 |
|
| 303 | ModifierUtil.initModifier(this, this._scheme);
|
| 304 | }
|
| 305 |
|
| 306 | /**
|
| 307 | * @property disabled
|
| 308 | * @type {Boolean}
|
| 309 | * @description
|
| 310 | * [en]Whether the element is disabled or not.[/en]
|
| 311 | * [ja]無効化されている場合に`true`。[/ja]
|
| 312 | */
|
| 313 |
|
| 314 | /**
|
| 315 | * @property cancelable
|
| 316 | * @type {Boolean}
|
| 317 | * @description
|
| 318 | * [en]Whether the dialog is cancelable or not. A cancelable dialog can be closed by tapping the background or by pressing the back button on Android devices.[/en]
|
| 319 | * [ja]そのダイアログがキャンセル可能かどうかを表します。キャンセル可能なダイアログは、背景をタップするかAndroidデバイスのバックボタンを押すことで閉じることが出来るようになります。[/ja]
|
| 320 | */
|
| 321 |
|
| 322 | /**
|
| 323 | * @property maskColor
|
| 324 | * @type {String}
|
| 325 | * @default rgba(0, 0, 0, 0.2)
|
| 326 | * @description
|
| 327 | * [en]Color of the background mask. Default is "rgba(0, 0, 0, 0.2)".[/en]
|
| 328 | * [ja]背景のマスクの色を指定します。"rgba(0, 0, 0, 0.2)"がデフォルト値です。[/ja]
|
| 329 | */
|
| 330 |
|
| 331 | /**
|
| 332 | * @method show
|
| 333 | * @signature show([options])
|
| 334 | * @param {Object} [options]
|
| 335 | * [en]Parameter object.[/en]
|
| 336 | * [ja]オプションを指定するオブジェクトです。[/ja]
|
| 337 | * @param {String} [options.animation]
|
| 338 | * [en]Animation name. Available animations are `"fade"` and `"none"`.[/en]
|
| 339 | * [ja]アニメーション名を指定します。指定できるのは、"fade", "none"のいずれかです。[/ja]
|
| 340 | * @param {String} [options.animationOptions]
|
| 341 | * [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en]
|
| 342 | * [ja]アニメーション時のduration, delay, timingを指定します。e.g. <code>{duration: 0.2, delay: 0.4, timing: 'ease-in'}</code> [/ja]
|
| 343 | * @param {Function} [options.callback]
|
| 344 | * [en]Function to execute after the dialog has been revealed.[/en]
|
| 345 | * [ja]ダイアログが表示され終わった時に呼び出されるコールバックを指定します。[/ja]
|
| 346 | * @description
|
| 347 | * [en]Show the alert dialog.[/en]
|
| 348 | * [ja]ダイアログを表示します。[/ja]
|
| 349 | * @return {Promise}
|
| 350 | * [en]A `Promise` object that resolves to the displayed element.[/en]
|
| 351 | * [ja]表示される要素を解決する`Promise`オブジェクトを返します。[/ja]
|
| 352 | */
|
| 353 |
|
| 354 | /**
|
| 355 | * @method hide
|
| 356 | * @signature hide([options])
|
| 357 | * @param {Object} [options]
|
| 358 | * [en]Parameter object.[/en]
|
| 359 | * [ja]オプションを指定するオブジェクト。[/ja]
|
| 360 | * @param {String} [options.animation]
|
| 361 | * [en]Animation name. Available animations are `"fade"` and `"none"`.[/en]
|
| 362 | * [ja]アニメーション名を指定します。"fade", "none"のいずれかを指定します。[/ja]
|
| 363 | * @param {String} [options.animationOptions]
|
| 364 | * [en]Specify the animation's duration, delay and timing. E.g. <code>{duration: 0.2, delay: 0.4, timing: 'ease-in'}</code>[/en]
|
| 365 | * [ja]アニメーション時のduration, delay, timingを指定します。e.g. <code>{duration: 0.2, delay: 0.4, timing: 'ease-in'}</code> [/ja]
|
| 366 | * @param {Function} [options.callback]
|
| 367 | * [en]Function to execute after the dialog has been hidden.[/en]
|
| 368 | * [ja]このダイアログが閉じた時に呼び出されるコールバックを指定します。[/ja]
|
| 369 | * @description
|
| 370 | * [en]Hide the alert dialog.[/en]
|
| 371 | * [ja]ダイアログを閉じます。[/ja]
|
| 372 | * @return {Promise}
|
| 373 | * [en]Resolves to the hidden element[/en]
|
| 374 | * [ja]隠れた要素を解決する`Promise`オブジェクトを返します。[/ja]
|
| 375 | */
|
| 376 |
|
| 377 | /**
|
| 378 | * @property visible
|
| 379 | * @type {Boolean}
|
| 380 | * @description
|
| 381 | * [en]Whether the dialog is visible or not.[/en]
|
| 382 | * [ja]要素が見える場合に`true`。[/ja]
|
| 383 | */
|
| 384 |
|
| 385 | /**
|
| 386 | * @property onDeviceBackButton
|
| 387 | * @type {Object}
|
| 388 | * @description
|
| 389 | * [en]Back-button handler.[/en]
|
| 390 | * [ja]バックボタンハンドラ。[/ja]
|
| 391 | */
|
| 392 |
|
| 393 | /**
|
| 394 | * @property animationOptions
|
| 395 | * @type {Object}
|
| 396 | * @description
|
| 397 | * [en]Specify the animation's duration, timing and delay with an object literal. E.g. `{duration: 0.2, delay: 1, timing: 'ease-in'}`.[/en]
|
| 398 | * [ja]アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例：{duration: 0.2, delay: 1, timing: 'ease-in'}[/ja]
|
| 399 | */
|
| 400 |
|
| 401 | /**
|
| 402 | * @param {String} name
|
| 403 | * @param {DialogAnimator} Animator
|
| 404 | */
|
| 405 | static registerAnimator(name, Animator) {
|
| 406 | if (!(Animator.prototype instanceof AlertDialogAnimator)) {
|
| 407 | util.throwAnimator('AlertDialog');
|
| 408 | }
|
| 409 | _animatorDict[name] = Animator;
|
| 410 | }
|
| 411 |
|
| 412 | static get animators() {
|
| 413 | return _animatorDict;
|
| 414 | }
|
| 415 |
|
| 416 | static get AlertDialogAnimator() {
|
| 417 | return AlertDialogAnimator;
|
| 418 | }
|
| 419 | }
|
| 420 |
|
| 421 | onsElements.AlertDialog = AlertDialogElement;
|
| 422 | customElements.define('ons-alert-dialog', AlertDialogElement);
|