Repositorio del curso CCOM4030 el semestre B91 del proyecto Artesanías con el Instituto de Cultura

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
  1. import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
  2. import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
  3. import _createClass from 'babel-runtime/helpers/createClass';
  4. import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
  5. import _inherits from 'babel-runtime/helpers/inherits';
  6. /*
  7. Copyright 2013-2015 ASIAL CORPORATION
  8. Licensed under the Apache License, Version 2.0 (the "License");
  9. you may not use this file except in compliance with the License.
  10. You may obtain a copy of the License at
  11. http://www.apache.org/licenses/LICENSE-2.0
  12. Unless required by applicable law or agreed to in writing, software
  13. distributed under the License is distributed on an "AS IS" BASIS,
  14. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15. See the License for the specific language governing permissions and
  16. limitations under the License.
  17. */
  18. import onsElements from '../../ons/elements';
  19. import util from '../../ons/util';
  20. import autoStyle from '../../ons/autostyle';
  21. import ModifierUtil from '../../ons/internal/modifier-util';
  22. import AnimatorFactory from '../../ons/internal/animator-factory';
  23. import { DialogAnimator, IOSDialogAnimator, AndroidDialogAnimator, SlideDialogAnimator } from './animator';
  24. import platform from '../../ons/platform';
  25. import BaseDialogElement from '../base/base-dialog';
  26. import contentReady from '../../ons/content-ready';
  27. var scheme = {
  28. '.dialog': 'dialog--*',
  29. '.dialog-container': 'dialog-container--*',
  30. '.dialog-mask': 'dialog-mask--*'
  31. };
  32. var _animatorDict = {
  33. 'default': function _default() {
  34. return platform.isAndroid() ? AndroidDialogAnimator : IOSDialogAnimator;
  35. },
  36. 'slide': SlideDialogAnimator,
  37. 'none': DialogAnimator
  38. };
  39. /**
  40. * @element ons-dialog
  41. * @category dialog
  42. * @description
  43. * [en]
  44. * 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.
  45. *
  46. * 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.
  47. *
  48. * The dialog is useful for displaying menus, additional information or to ask the user to make a decision.
  49. *
  50. * It will automatically be displayed as Material Design when running on an Android device.
  51. * [/en]
  52. * [ja][/ja]
  53. * @modifier material
  54. * [en]Display a Material Design dialog.[/en]
  55. * [ja]マテリアルデザインのダイアログを表示します。[/ja]
  56. * @codepen zxxaGa
  57. * @tutorial vanilla/Reference/dialog
  58. * @guide theming.html#modifiers [en]More details about the `modifier` attribute[/en][ja]modifier属性の使い方[/ja]
  59. * @seealso ons-alert-dialog
  60. * [en]`<ons-alert-dialog>` component[/en]
  61. * [ja]ons-alert-dialogコンポーネント[/ja]
  62. * @seealso ons-popover
  63. * [en]`<ons-popover>` component[/en]
  64. * [ja]ons-popoverコンポーネント[/ja]
  65. * @seealso ons-modal
  66. * [en]`<ons-modal>` component[/en]
  67. * [ja]ons-modalコンポーネント[/ja]
  68. * @example
  69. * <ons-dialog id="dialog">
  70. * <p>This is a dialog!</p>
  71. * </ons-dialog>
  72. *
  73. * <script>
  74. * document.getElementById('dialog').show();
  75. * </script>
  76. */
  77. var DialogElement = function (_BaseDialogElement) {
  78. _inherits(DialogElement, _BaseDialogElement);
  79. /**
  80. * @event preshow
  81. * @description
  82. * [en]Fired just before the dialog is displayed.[/en]
  83. * [ja]ダイアログが表示される直前に発火します。[/ja]
  84. * @param {Object} event [en]Event object.[/en]
  85. * @param {Object} event.dialog
  86. * [en]Component object.[/en]
  87. * [ja]コンポーネントのオブジェクト。[/ja]
  88. * @param {Function} event.cancel
  89. * [en]Execute this function to stop the dialog from being shown.[/en]
  90. * [ja]この関数を実行すると、ダイアログの表示がキャンセルされます。[/ja]
  91. */
  92. /**
  93. * @event postshow
  94. * @description
  95. * [en]Fired just after the dialog is displayed.[/en]
  96. * [ja]ダイアログが表示された直後に発火します。[/ja]
  97. * @param {Object} event [en]Event object.[/en]
  98. * @param {Object} event.dialog
  99. * [en]Component object.[/en]
  100. * [ja]コンポーネントのオブジェクト。[/ja]
  101. */
  102. /**
  103. * @event prehide
  104. * @description
  105. * [en]Fired just before the dialog is hidden.[/en]
  106. * [ja]ダイアログが隠れる直前に発火します。[/ja]
  107. * @param {Object} event [en]Event object.[/en]
  108. * @param {Object} event.dialog
  109. * [en]Component object.[/en]
  110. * [ja]コンポーネントのオブジェクト。[/ja]
  111. * @param {Function} event.cancel
  112. * [en]Execute this function to stop the dialog from being hidden.[/en]
  113. * [ja]この関数を実行すると、ダイアログの非表示がキャンセルされます。[/ja]
  114. */
  115. /**
  116. * @event posthide
  117. * @description
  118. * [en]Fired just after the dialog is hidden.[/en]
  119. * [ja]ダイアログが隠れた後に発火します。[/ja]
  120. * @param {Object} event [en]Event object.[/en]
  121. * @param {Object} event.dialog
  122. * [en]Component object.[/en]
  123. * [ja]コンポーネントのオブジェクト。[/ja]
  124. */
  125. /**
  126. * @attribute modifier
  127. * @type {String}
  128. * @description
  129. * [en]The appearance of the dialog.[/en]
  130. * [ja]ダイアログの表現を指定します。[/ja]
  131. */
  132. /**
  133. * @attribute cancelable
  134. * @description
  135. * [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]
  136. * [ja][/ja]
  137. */
  138. /**
  139. * @attribute disabled
  140. * @description
  141. * [en]If this attribute is set the dialog is disabled.[/en]
  142. * [ja]この属性がある時、ダイアログはdisabled状態になります。[/ja]
  143. */
  144. /**
  145. * @attribute animation
  146. * @type {String}
  147. * @default default
  148. * @description
  149. * [en]The animation used when showing and hiding the dialog. Can be either `"none"` or `"default"`.[/en]
  150. * [ja]ダイアログを表示する際のアニメーション名を指定します。"none"もしくは"default"を指定できます。[/ja]
  151. */
  152. /**
  153. * @attribute animation-options
  154. * @type {Expression}
  155. * @description
  156. * [en]Specify the animation's duration, timing and delay with an object literal. E.g. `{duration: 0.2, delay: 1, timing: 'ease-in'}`.[/en]
  157. * [ja]アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。e.g. `{duration: 0.2, delay: 1, timing: 'ease-in'}`[/ja]
  158. */
  159. /**
  160. * @attribute mask-color
  161. * @type {String}
  162. * @default rgba(0, 0, 0, 0.2)
  163. * @description
  164. * [en]Color of the background mask. Default is `"rgba(0, 0, 0, 0.2)"`.[/en]
  165. * [ja]背景のマスクの色を指定します。"rgba(0, 0, 0, 0.2)"がデフォルト値です。[/ja]
  166. */
  167. function DialogElement() {
  168. _classCallCheck(this, DialogElement);
  169. var _this = _possibleConstructorReturn(this, (DialogElement.__proto__ || _Object$getPrototypeOf(DialogElement)).call(this));
  170. contentReady(_this, function () {
  171. return _this._compile();
  172. });
  173. return _this;
  174. }
  175. _createClass(DialogElement, [{
  176. key: '_updateAnimatorFactory',
  177. value: function _updateAnimatorFactory() {
  178. return new AnimatorFactory({
  179. animators: _animatorDict,
  180. baseClass: DialogAnimator,
  181. baseClassName: 'DialogAnimator',
  182. defaultAnimation: this.getAttribute('animation')
  183. });
  184. }
  185. }, {
  186. key: '_compile',
  187. value: function _compile() {
  188. autoStyle.prepare(this);
  189. this.style.display = 'none';
  190. this.style.zIndex = 10001;
  191. /* Expected result:
  192. * <ons-dialog>
  193. * <div class="dialog-mask"></div>
  194. * <div class="dialog">
  195. * <div class="dialog-container">...</div>
  196. * </div>
  197. * </ons-dialog>
  198. */
  199. if (!this._dialog) {
  200. var dialog = document.createElement('div');
  201. dialog.classList.add('dialog');
  202. var container = document.createElement('div');
  203. container.classList.add('dialog-container');
  204. while (this.firstChild) {
  205. container.appendChild(this.firstChild);
  206. }
  207. dialog.appendChild(container);
  208. this.appendChild(dialog);
  209. }
  210. if (!this._mask) {
  211. var mask = document.createElement('div');
  212. mask.classList.add('dialog-mask');
  213. this.insertBefore(mask, this.firstChild);
  214. }
  215. this._dialog.style.zIndex = 20001;
  216. this._mask.style.zIndex = 20000;
  217. this.setAttribute('status-bar-fill', '');
  218. ModifierUtil.initModifier(this, this._scheme);
  219. }
  220. /**
  221. * @property onDeviceBackButton
  222. * @type {Object}
  223. * @description
  224. * [en]Back-button handler.[/en]
  225. * [ja]バックボタンハンドラ。[/ja]
  226. */
  227. /**
  228. * @method show
  229. * @signature show([options])
  230. * @param {Object} [options]
  231. * [en]Parameter object.[/en]
  232. * [ja]オプションを指定するオブジェクト。[/ja]
  233. * @param {String} [options.animation]
  234. * [en]Animation name. Available animations are `"none"` and `"slide"`.[/en]
  235. * [ja]アニメーション名を指定します。"none", "slide"のいずれかを指定します。[/ja]
  236. * @param {String} [options.animationOptions]
  237. * [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en]
  238. * [ja]アニメーション時のduration, delay, timingを指定します。e.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}` [/ja]
  239. * @param {Function} [options.callback]
  240. * [en]This function is called after the dialog has been revealed.[/en]
  241. * [ja]ダイアログが表示され終わった後に呼び出される関数オブジェクトを指定します。[/ja]
  242. * @description
  243. * [en]Show the dialog.[/en]
  244. * [ja]ダイアログを開きます。[/ja]
  245. * @return {Promise} Resolves to the displayed element.
  246. */
  247. /**
  248. * @method hide
  249. * @signature hide([options])
  250. * @param {Object} [options]
  251. * [en]Parameter object.[/en]
  252. * [ja]オプションを指定するオブジェクト。[/ja]
  253. * @param {String} [options.animation]
  254. * [en]Animation name. Available animations are `"none"` and `"slide"`.[/en]
  255. * [ja]アニメーション名を指定します。"none", "slide"のいずれかを指定できます。[/ja]
  256. * @param {String} [options.animationOptions]
  257. * [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`.[/en]
  258. * [ja]アニメーション時のduration, delay, timingを指定します。e.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`[/ja]
  259. * @param {Function} [options.callback]
  260. * [en]This functions is called after the dialog has been hidden.[/en]
  261. * [ja]ダイアログが隠れた後に呼び出される関数オブジェクトを指定します。[/ja]
  262. * @description
  263. * [en]Hide the dialog.[/en]
  264. * [ja]ダイアログを閉じます。[/ja]
  265. * @return {Promise}
  266. * [en]Resolves to the hidden element[/en]
  267. * [ja][/ja]
  268. */
  269. /**
  270. * @property visible
  271. * @readonly
  272. * @type {Boolean}
  273. * @description
  274. * [en]Whether the dialog is visible or not.[/en]
  275. * [ja]要素が見える場合に`true`。[/ja]
  276. */
  277. /**
  278. * @property disabled
  279. * @type {Boolean}
  280. * @description
  281. * [en]Whether the dialog is disabled or not.[/en]
  282. * [ja]無効化されている場合に`true`。[/ja]
  283. */
  284. /**
  285. * @property cancelable
  286. * @type {Boolean}
  287. * @description
  288. * [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]
  289. * [ja][/ja]
  290. */
  291. /**
  292. * @param {String} name
  293. * @param {DialogAnimator} Animator
  294. */
  295. }, {
  296. key: '_scheme',
  297. get: function get() {
  298. return scheme;
  299. }
  300. }, {
  301. key: '_mask',
  302. get: function get() {
  303. return util.findChild(this, '.dialog-mask');
  304. }
  305. }, {
  306. key: '_dialog',
  307. get: function get() {
  308. return util.findChild(this, '.dialog');
  309. }
  310. }], [{
  311. key: 'registerAnimator',
  312. value: function registerAnimator(name, Animator) {
  313. if (!(Animator.prototype instanceof DialogAnimator)) {
  314. util.throwAnimator('Dialog');
  315. }
  316. _animatorDict[name] = Animator;
  317. }
  318. }, {
  319. key: 'animators',
  320. get: function get() {
  321. return _animatorDict;
  322. }
  323. }, {
  324. key: 'DialogAnimator',
  325. get: function get() {
  326. return DialogAnimator;
  327. }
  328. }]);
  329. return DialogElement;
  330. }(BaseDialogElement);
  331. export default DialogElement;
  332. onsElements.Dialog = DialogElement;
  333. customElements.define('ons-dialog', DialogElement);