| 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 { DialogAnimator, IOSDialogAnimator, AndroidDialogAnimator, SlideDialogAnimator } from './ons-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 | '.dialog': 'dialog--*',
|
| 30 | '.dialog-container': 'dialog-container--*',
|
| 31 | '.dialog-mask': 'dialog-mask--*'
|
| 32 | };
|
| 33 |
|
| 34 | const _animatorDict = {
|
| 35 | 'default': function () { return platform.isAndroid() ? AndroidDialogAnimator : IOSDialogAnimator; },
|
| 36 | 'slide': SlideDialogAnimator,
|
| 37 | 'none': DialogAnimator
|
| 38 | };
|
| 39 |
|
| 40 | /**
|
| 41 | * @element ons-dialog
|
| 42 | * @category dialog
|
| 43 | * @description
|
| 44 | * [en]
|
| 45 | * Dialog that is displayed on top of current screen. As opposed to the `<ons-alert-dialog>` element, this component can contain any kind of content.
|
| 46 | *
|
| 47 | * To use the element it can either be attached directly to the `<body>` element or dynamically created from a template using the `ons.createDialog(template)` utility function and the `<template>` tag.
|
| 48 | *
|
| 49 | * The dialog is useful for displaying menus, additional information or to ask the user to make a decision.
|
| 50 | *
|
| 51 | * It will automatically be displayed as Material Design when running on an Android device.
|
| 52 | * [/en]
|
| 53 | * [ja][/ja]
|
| 54 | * @modifier material
|
| 55 | * [en]Display a Material Design dialog.[/en]
|
| 56 | * [ja]マテリアルデザインのダイアログを表示します。[/ja]
|
| 57 | * @codepen zxxaGa
|
| 58 | * @tutorial vanilla/Reference/dialog
|
| 59 | * @guide theming.html#modifiers [en]More details about the `modifier` attribute[/en][ja]modifier属性の使い方[/ja]
|
| 60 | * @seealso ons-alert-dialog
|
| 61 | * [en]`<ons-alert-dialog>` component[/en]
|
| 62 | * [ja]ons-alert-dialogコンポーネント[/ja]
|
| 63 | * @seealso ons-popover
|
| 64 | * [en]`<ons-popover>` component[/en]
|
| 65 | * [ja]ons-popoverコンポーネント[/ja]
|
| 66 | * @seealso ons-modal
|
| 67 | * [en]`<ons-modal>` component[/en]
|
| 68 | * [ja]ons-modalコンポーネント[/ja]
|
| 69 | * @example
|
| 70 | * <ons-dialog id="dialog">
|
| 71 | * <p>This is a dialog!</p>
|
| 72 | * </ons-dialog>
|
| 73 | *
|
| 74 | * <script>
|
| 75 | * document.getElementById('dialog').show();
|
| 76 | * </script>
|
| 77 | */
|
| 78 | export default class DialogElement extends BaseDialogElement {
|
| 79 |
|
| 80 | /**
|
| 81 | * @event preshow
|
| 82 | * @description
|
| 83 | * [en]Fired just before the dialog is displayed.[/en]
|
| 84 | * [ja]ダイアログが表示される直前に発火します。[/ja]
|
| 85 | * @param {Object} event [en]Event object.[/en]
|
| 86 | * @param {Object} event.dialog
|
| 87 | * [en]Component object.[/en]
|
| 88 | * [ja]コンポーネントのオブジェクト。[/ja]
|
| 89 | * @param {Function} event.cancel
|
| 90 | * [en]Execute this function to stop the dialog from being shown.[/en]
|
| 91 | * [ja]この関数を実行すると、ダイアログの表示がキャンセルされます。[/ja]
|
| 92 | */
|
| 93 |
|
| 94 | /**
|
| 95 | * @event postshow
|
| 96 | * @description
|
| 97 | * [en]Fired just after the dialog is displayed.[/en]
|
| 98 | * [ja]ダイアログが表示された直後に発火します。[/ja]
|
| 99 | * @param {Object} event [en]Event object.[/en]
|
| 100 | * @param {Object} event.dialog
|
| 101 | * [en]Component object.[/en]
|
| 102 | * [ja]コンポーネントのオブジェクト。[/ja]
|
| 103 | */
|
| 104 |
|
| 105 | /**
|
| 106 | * @event prehide
|
| 107 | * @description
|
| 108 | * [en]Fired just before the dialog is hidden.[/en]
|
| 109 | * [ja]ダイアログが隠れる直前に発火します。[/ja]
|
| 110 | * @param {Object} event [en]Event object.[/en]
|
| 111 | * @param {Object} event.dialog
|
| 112 | * [en]Component object.[/en]
|
| 113 | * [ja]コンポーネントのオブジェクト。[/ja]
|
| 114 | * @param {Function} event.cancel
|
| 115 | * [en]Execute this function to stop the dialog from being hidden.[/en]
|
| 116 | * [ja]この関数を実行すると、ダイアログの非表示がキャンセルされます。[/ja]
|
| 117 | */
|
| 118 |
|
| 119 | /**
|
| 120 | * @event posthide
|
| 121 | * @description
|
| 122 | * [en]Fired just after the dialog is hidden.[/en]
|
| 123 | * [ja]ダイアログが隠れた後に発火します。[/ja]
|
| 124 | * @param {Object} event [en]Event object.[/en]
|
| 125 | * @param {Object} event.dialog
|
| 126 | * [en]Component object.[/en]
|
| 127 | * [ja]コンポーネントのオブジェクト。[/ja]
|
| 128 | */
|
| 129 |
|
| 130 | /**
|
| 131 | * @event dialogcancel
|
| 132 | * @description
|
| 133 | * [en]Fired when the dialog is canceled.[/en]
|
| 134 | * [ja][/ja]
|
| 135 | */
|
| 136 |
|
| 137 | /**
|
| 138 | * @attribute modifier
|
| 139 | * @type {String}
|
| 140 | * @description
|
| 141 | * [en]The appearance of the dialog.[/en]
|
| 142 | * [ja]ダイアログの表現を指定します。[/ja]
|
| 143 | */
|
| 144 |
|
| 145 | /**
|
| 146 | * @attribute cancelable
|
| 147 | * @description
|
| 148 | * [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]
|
| 149 | * [ja][/ja]
|
| 150 | */
|
| 151 |
|
| 152 | /**
|
| 153 | * @attribute disabled
|
| 154 | * @description
|
| 155 | * [en]If this attribute is set the dialog is disabled.[/en]
|
| 156 | * [ja]この属性がある時、ダイアログはdisabled状態になります。[/ja]
|
| 157 | */
|
| 158 |
|
| 159 | /**
|
| 160 | * @attribute animation
|
| 161 | * @type {String}
|
| 162 | * @default default
|
| 163 | * @description
|
| 164 | * [en]The animation used when showing and hiding the dialog. Can be either `"none"` or `"default"`.[/en]
|
| 165 | * [ja]ダイアログを表示する際のアニメーション名を指定します。"none"もしくは"default"を指定できます。[/ja]
|
| 166 | */
|
| 167 |
|
| 168 | /**
|
| 169 | * @attribute animation-options
|
| 170 | * @type {Expression}
|
| 171 | * @description
|
| 172 | * [en]Specify the animation's duration, timing and delay with an object literal. E.g. `{duration: 0.2, delay: 1, timing: 'ease-in'}`.[/en]
|
| 173 | * [ja]アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. `{duration: 0.2, delay: 1, timing: 'ease-in'}`[/ja]
|
| 174 | */
|
| 175 |
|
| 176 | /**
|
| 177 | * @property animationOptions
|
| 178 | * @type {Object}
|
| 179 | * @description
|
| 180 | * [en]Specify the animation's duration, timing and delay with an object literal. E.g. `{duration: 0.2, delay: 1, timing: 'ease-in'}`.[/en]
|
| 181 | * [ja]アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例：{duration: 0.2, delay: 1, timing: 'ease-in'}[/ja]
|
| 182 | */
|
| 183 |
|
| 184 | /**
|
| 185 | * @attribute mask-color
|
| 186 | * @type {String}
|
| 187 | * @default rgba(0, 0, 0, 0.2)
|
| 188 | * @description
|
| 189 | * [en]Color of the background mask. Default is `"rgba(0, 0, 0, 0.2)"`.[/en]
|
| 190 | * [ja]背景のマスクの色を指定します。"rgba(0, 0, 0, 0.2)"がデフォルト値です。[/ja]
|
| 191 | */
|
| 192 |
|
| 193 | /**
|
| 194 | * @attribute visible
|
| 195 | * @type {Boolean}
|
| 196 | * @description
|
| 197 | * [en]Whether the dialog is visible or not.[/en]
|
| 198 | * [ja]要素が見える場合に`true`。[/ja]
|
| 199 | */
|
| 200 |
|
| 201 | constructor() {
|
| 202 | super();
|
| 203 |
|
| 204 | contentReady(this, () => this._compile());
|
| 205 | }
|
| 206 |
|
| 207 | get _scheme() {
|
| 208 | return scheme;
|
| 209 | }
|
| 210 |
|
| 211 | get _mask() {
|
| 212 | return util.findChild(this, '.dialog-mask');
|
| 213 | }
|
| 214 |
|
| 215 | get _dialog() {
|
| 216 | return util.findChild(this, '.dialog');
|
| 217 | }
|
| 218 |
|
| 219 | _updateAnimatorFactory() {
|
| 220 | return new AnimatorFactory({
|
| 221 | animators: _animatorDict,
|
| 222 | baseClass: DialogAnimator,
|
| 223 | baseClassName: 'DialogAnimator',
|
| 224 | defaultAnimation: this.getAttribute('animation')
|
| 225 | });
|
| 226 | }
|
| 227 |
|
| 228 | _compile() {
|
| 229 | autoStyle.prepare(this);
|
| 230 |
|
| 231 | this.style.display = 'none';
|
| 232 | this.style.zIndex = 10001;
|
| 233 |
|
| 234 | /* Expected result:
|
| 235 | * <ons-dialog>
|
| 236 | * <div class="dialog-mask"></div>
|
| 237 | * <div class="dialog">
|
| 238 | * <div class="dialog-container">...</div>
|
| 239 | * </div>
|
| 240 | * </ons-dialog>
|
| 241 | */
|
| 242 |
|
| 243 | if (!this._dialog) {
|
| 244 | const dialog = document.createElement('div');
|
| 245 | dialog.classList.add('dialog');
|
| 246 |
|
| 247 | const container = document.createElement('div');
|
| 248 | container.classList.add('dialog-container');
|
| 249 | while (this.firstChild) {
|
| 250 | container.appendChild(this.firstChild);
|
| 251 | }
|
| 252 | dialog.appendChild(container);
|
| 253 |
|
| 254 | this.appendChild(dialog);
|
| 255 | }
|
| 256 |
|
| 257 | if (!this._mask) {
|
| 258 | const mask = document.createElement('div');
|
| 259 | mask.classList.add('dialog-mask');
|
| 260 | this.insertBefore(mask, this.firstChild);
|
| 261 | }
|
| 262 |
|
| 263 | this._dialog.style.zIndex = 20001;
|
| 264 | this._mask.style.zIndex = 20000;
|
| 265 |
|
| 266 | this.setAttribute('status-bar-fill', '');
|
| 267 |
|
| 268 | ModifierUtil.initModifier(this, this._scheme);
|
| 269 | }
|
| 270 |
|
| 271 | /**
|
| 272 | * @property onDeviceBackButton
|
| 273 | * @type {Object}
|
| 274 | * @description
|
| 275 | * [en]Back-button handler.[/en]
|
| 276 | * [ja]バックボタンハンドラ。[/ja]
|
| 277 | */
|
| 278 |
|
| 279 | /**
|
| 280 | * @method show
|
| 281 | * @signature show([options])
|
| 282 | * @param {Object} [options]
|
| 283 | * [en]Parameter object.[/en]
|
| 284 | * [ja]オプションを指定するオブジェクト。[/ja]
|
| 285 | * @param {String} [options.animation]
|
| 286 | * [en]Animation name. Available animations are `"none"` and `"slide"`.[/en]
|
| 287 | * [ja]アニメーション名を指定します。"none", "slide"のいずれかを指定します。[/ja]
|
| 288 | * @param {String} [options.animationOptions]
|
| 289 | * [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en]
|
| 290 | * [ja]アニメーション時のduration, delay, timingを指定します。e.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}` [/ja]
|
| 291 | * @param {Function} [options.callback]
|
| 292 | * [en]This function is called after the dialog has been revealed.[/en]
|
| 293 | * [ja]ダイアログが表示され終わった後に呼び出される関数オブジェクトを指定します。[/ja]
|
| 294 | * @description
|
| 295 | * [en]Show the dialog.[/en]
|
| 296 | * [ja]ダイアログを開きます。[/ja]
|
| 297 | * @return {Promise} Resolves to the displayed element.
|
| 298 | */
|
| 299 |
|
| 300 | /**
|
| 301 | * @method hide
|
| 302 | * @signature hide([options])
|
| 303 | * @param {Object} [options]
|
| 304 | * [en]Parameter object.[/en]
|
| 305 | * [ja]オプションを指定するオブジェクト。[/ja]
|
| 306 | * @param {String} [options.animation]
|
| 307 | * [en]Animation name. Available animations are `"none"` and `"slide"`.[/en]
|
| 308 | * [ja]アニメーション名を指定します。"none", "slide"のいずれかを指定できます。[/ja]
|
| 309 | * @param {String} [options.animationOptions]
|
| 310 | * [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en]
|
| 311 | * [ja]アニメーション時のduration, delay, timingを指定します。e.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`[/ja]
|
| 312 | * @param {Function} [options.callback]
|
| 313 | * [en]This functions is called after the dialog has been hidden.[/en]
|
| 314 | * [ja]ダイアログが隠れた後に呼び出される関数オブジェクトを指定します。[/ja]
|
| 315 | * @description
|
| 316 | * [en]Hide the dialog.[/en]
|
| 317 | * [ja]ダイアログを閉じます。[/ja]
|
| 318 | * @return {Promise}
|
| 319 | * [en]Resolves to the hidden element[/en]
|
| 320 | * [ja][/ja]
|
| 321 | */
|
| 322 |
|
| 323 | /**
|
| 324 | * @property visible
|
| 325 | * @type {Boolean}
|
| 326 | * @description
|
| 327 | * [en]Whether the dialog is visible or not.[/en]
|
| 328 | * [ja]要素が見える場合に`true`。[/ja]
|
| 329 | */
|
| 330 |
|
| 331 | /**
|
| 332 | * @property disabled
|
| 333 | * @type {Boolean}
|
| 334 | * @description
|
| 335 | * [en]Whether the dialog is disabled or not.[/en]
|
| 336 | * [ja]無効化されている場合に`true`。[/ja]
|
| 337 | */
|
| 338 |
|
| 339 | /**
|
| 340 | * @property cancelable
|
| 341 | * @type {Boolean}
|
| 342 | * @description
|
| 343 | * [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]
|
| 344 | * [ja][/ja]
|
| 345 | */
|
| 346 |
|
| 347 | /**
|
| 348 | * @property maskColor
|
| 349 | * @type {String}
|
| 350 | * @default rgba(0, 0, 0, 0.2)
|
| 351 | * @description
|
| 352 | * [en]Color of the background mask. Default is "rgba(0, 0, 0, 0.2)".[/en]
|
| 353 | * [ja]背景のマスクの色を指定します。"rgba(0, 0, 0, 0.2)"がデフォルト値です。[/ja]
|
| 354 | */
|
| 355 |
|
| 356 | /**
|
| 357 | * @param {String} name
|
| 358 | * @param {DialogAnimator} Animator
|
| 359 | */
|
| 360 | static registerAnimator(name, Animator) {
|
| 361 | if (!(Animator.prototype instanceof DialogAnimator)) {
|
| 362 | util.throwAnimator('Dialog');
|
| 363 | }
|
| 364 | _animatorDict[name] = Animator;
|
| 365 | }
|
| 366 |
|
| 367 | static get animators() {
|
| 368 | return _animatorDict;
|
| 369 | }
|
| 370 |
|
| 371 | static get DialogAnimator() {
|
| 372 | return DialogAnimator;
|
| 373 | }
|
| 374 | }
|
| 375 |
|
| 376 | onsElements.Dialog = DialogElement;
|
| 377 | customElements.define('ons-dialog', DialogElement);
|