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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. import _Promise from 'babel-runtime/core-js/promise';
  2. import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
  3. import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
  4. import _createClass from 'babel-runtime/helpers/createClass';
  5. import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
  6. import _inherits from 'babel-runtime/helpers/inherits';
  7. import _setImmediate from 'babel-runtime/core-js/set-immediate';
  8. /*
  9. Copyright 2013-2015 ASIAL CORPORATION
  10. Licensed under the Apache License, Version 2.0 (the "License");
  11. you may not use this file except in compliance with the License.
  12. You may obtain a copy of the License at
  13. http://www.apache.org/licenses/LICENSE-2.0
  14. Unless required by applicable law or agreed to in writing, software
  15. distributed under the License is distributed on an "AS IS" BASIS,
  16. WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17. See the License for the specific language governing permissions and
  18. limitations under the License.
  19. */
  20. import onsElements from '../ons/elements';
  21. import util from '../ons/util';
  22. import internal from '../ons/internal';
  23. import ModifierUtil from '../ons/internal/modifier-util';
  24. import BaseElement from './base/base-element';
  25. import { PageLoader, defaultPageLoader } from '../ons/page-loader';
  26. import contentReady from '../ons/content-ready';
  27. var rewritables = {
  28. /**
  29. * @param {Element} element
  30. * @param {Function} callback
  31. */
  32. ready: function ready(element, callback) {
  33. _setImmediate(callback);
  34. }
  35. };
  36. /**
  37. * @element ons-splitter-content
  38. * @category menu
  39. * @description
  40. * [en]
  41. * The `<ons-splitter-content>` element is used as a child element of `<ons-splitter>`.
  42. *
  43. * It contains the main content of the page while `<ons-splitter-side>` contains the list.
  44. * [/en]
  45. * [ja]ons-splitter-content要素は、ons-splitter要素の子要素として利用します。[/ja]
  46. * @codepen rOQOML
  47. * @tutorial vanilla/Reference/splitter
  48. * @guide fundamentals.html#managing-pages
  49. * [en]Managing multiple pages.[/en]
  50. * [ja]複数のページを管理する[/ja]
  51. * @seealso ons-splitter
  52. * [en]The `<ons-splitter>` component is the parent element.[/en]
  53. * [ja]ons-splitterコンポーネント[/ja]
  54. * @seealso ons-splitter-side
  55. * [en]The `<ons-splitter-side>` component contains the menu.[/en]
  56. * [ja]ons-splitter-sideコンポーネント[/ja]
  57. * @example
  58. * <ons-splitter>
  59. * <ons-splitter-content>
  60. * ...
  61. * </ons-splitter-content>
  62. *
  63. * <ons-splitter-side side="left" width="80%" collapse>
  64. * ...
  65. * </ons-splitter-side>
  66. * </ons-splitter>
  67. */
  68. var SplitterContentElement = function (_BaseElement) {
  69. _inherits(SplitterContentElement, _BaseElement);
  70. /**
  71. * @attribute page
  72. * @type {String}
  73. * @description
  74. * [en]
  75. * The url of the content page. If this attribute is used the content will be loaded from a `<template>` tag or a remote file.
  76. *
  77. * It is also possible to put `<ons-page>` element as a child of the element.
  78. * [/en]
  79. * [ja]ons-splitter-content要素に表示するページのURLを指定します。[/ja]
  80. */
  81. function SplitterContentElement() {
  82. _classCallCheck(this, SplitterContentElement);
  83. var _this = _possibleConstructorReturn(this, (SplitterContentElement.__proto__ || _Object$getPrototypeOf(SplitterContentElement)).call(this));
  84. _this._page = null;
  85. _this._pageLoader = defaultPageLoader;
  86. contentReady(_this, function () {
  87. rewritables.ready(_this, function () {
  88. var page = _this._getPageTarget();
  89. if (page) {
  90. _this.load(page);
  91. }
  92. });
  93. });
  94. return _this;
  95. }
  96. _createClass(SplitterContentElement, [{
  97. key: 'connectedCallback',
  98. value: function connectedCallback() {
  99. if (!util.match(this.parentNode, 'ons-splitter')) {
  100. util.throw('"ons-splitter-content" must have "ons-splitter" as parent');
  101. }
  102. }
  103. }, {
  104. key: '_getPageTarget',
  105. value: function _getPageTarget() {
  106. return this._page || this.getAttribute('page');
  107. }
  108. }, {
  109. key: 'disconnectedCallback',
  110. value: function disconnectedCallback() {}
  111. }, {
  112. key: 'attributeChangedCallback',
  113. value: function attributeChangedCallback(name, last, current) {}
  114. /**
  115. * @property page
  116. * @type {HTMLElement}
  117. * @description
  118. * [en]The page to load in the splitter content.[/en]
  119. * [ja]この要素内に表示するページを指定します。[/ja]
  120. */
  121. }, {
  122. key: 'load',
  123. /**
  124. * @method load
  125. * @signature load(page, [options])
  126. * @param {String} page, [options]
  127. * [en]Page URL. Can be either an HTML document or an `<template>` id.[/en]
  128. * [ja]pageのURLか、`<template>`で宣言したテンプレートのid属性の値を指定します。[/ja]
  129. * @param {Object} [options]
  130. * @param {Function} [options.callback]
  131. * @description
  132. * [en]Show the page specified in `page` in the content.[/en]
  133. * [ja]指定したURLをメインページを読み込みます。[/ja]
  134. * @return {Promise}
  135. * [en]Resolves to the new `<ons-page>` element[/en]
  136. * [ja]`<ons-page>`要素を解決するPromiseオブジェクトを返します。[/ja]
  137. */
  138. value: function load(page) {
  139. var _this2 = this;
  140. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  141. this._page = page;
  142. var callback = options.callback || function () {};
  143. return new _Promise(function (resolve) {
  144. var oldContent = _this2._content || null;
  145. _this2._pageLoader.load({ page: page, parent: _this2 }, function (pageElement) {
  146. if (oldContent) {
  147. _this2._pageLoader.unload(oldContent);
  148. oldContent = null;
  149. }
  150. _setImmediate(function () {
  151. return _this2._show();
  152. });
  153. callback(pageElement);
  154. resolve(pageElement);
  155. });
  156. });
  157. }
  158. }, {
  159. key: '_show',
  160. value: function _show() {
  161. if (this._content) {
  162. this._content._show();
  163. }
  164. }
  165. }, {
  166. key: '_hide',
  167. value: function _hide() {
  168. if (this._content) {
  169. this._content._hide();
  170. }
  171. }
  172. }, {
  173. key: '_destroy',
  174. value: function _destroy() {
  175. if (this._content) {
  176. this._pageLoader.unload(this._content);
  177. }
  178. this.remove();
  179. }
  180. }, {
  181. key: 'page',
  182. get: function get() {
  183. return this._page;
  184. }
  185. /**
  186. * @param {*} page
  187. */
  188. ,
  189. set: function set(page) {
  190. this._page = page;
  191. }
  192. }, {
  193. key: '_content',
  194. get: function get() {
  195. return this.children[0];
  196. }
  197. /**
  198. * @property pageLoader
  199. * @type {Function}
  200. * @description
  201. * [en]Page element loaded in the splitter content.[/en]
  202. * [ja]この要素内に表示するページを指定します。[/ja]
  203. */
  204. }, {
  205. key: 'pageLoader',
  206. get: function get() {
  207. return this._pageLoader;
  208. },
  209. set: function set(loader) {
  210. if (!(loader instanceof PageLoader)) {
  211. util.throwPageLoader();
  212. }
  213. this._pageLoader = loader;
  214. }
  215. }], [{
  216. key: 'observedAttributes',
  217. get: function get() {
  218. return [];
  219. }
  220. }, {
  221. key: 'rewritables',
  222. get: function get() {
  223. return rewritables;
  224. }
  225. }]);
  226. return SplitterContentElement;
  227. }(BaseElement);
  228. export default SplitterContentElement;
  229. onsElements.SplitterContent = SplitterContentElement;
  230. customElements.define('ons-splitter-content', SplitterContentElement);