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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  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 BaseElement from './base/base-element';
  23. import contentReady from '../ons/content-ready';
  24. var iosBackButtonIcon = '<?xml version="1.0" encoding="UTF-8"?>\n<svg width="13px" height="21px" viewBox="0 0 13 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n <title>ios-back-button-icon</title>\n <desc>Created with Sketch.</desc>\n <defs></defs>\n <g id="toolbar-back-button" stroke="none" stroke-width="1" fill-rule="evenodd">\n <g id="ios" transform="translate(-34.000000, -30.000000)">\n <polygon id="ios-back-button-icon" points="34 40.5 44.5 30 46.5 32 38 40.5 46.5 49 44.5 51"></polygon>\n </g>\n </g>\n</svg>\n';
  25. var mdBackButtonIcon = '<?xml version="1.0" encoding="UTF-8"?>\n<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n <title>md-back-button-icon</title>\n <desc>Created with Sketch.</desc>\n <defs></defs>\n <g id="toolbar-back-button" stroke="none" stroke-width="1" fill-rule="evenodd">\n <g id="android" transform="translate(-32.000000, -32.000000)" fill-rule="nonzero">\n <polygon id="md-back-button-icon" points="48 39 35.83 39 41.42 33.41 40 32 32 40 40 48 41.41 46.59 35.83 41 48 41"></polygon>\n </g>\n </g>\n</svg>\n';
  26. var defaultClassName = 'back-button';
  27. var scheme = {
  28. '': 'back-button--*',
  29. '.back-button__icon': 'back-button--*__icon',
  30. '.back-button__label': 'back-button--*__label'
  31. };
  32. /**
  33. * @element ons-back-button
  34. * @category navigation
  35. * @description
  36. * [en]
  37. * Back button component for `<ons-toolbar>`. Put it in the left part of the `<ons-toolbar>`.
  38. *
  39. * It will find the parent `<ons-navigator>` element and pop a page when clicked. This behavior can be overriden by specifying the `onClick` property.
  40. * [/en]
  41. * [ja][/ja]
  42. * @codepen aHmGL
  43. * @tutorial vanilla/Reference/back-button
  44. * @modifier material
  45. * [en]Material Design style[/en]
  46. * [ja][/ja]
  47. * @seealso ons-toolbar
  48. * [en]ons-toolbar component[/en]
  49. * [ja]ons-toolbarコンポーネント[/ja]
  50. * @seealso ons-navigator
  51. * [en]ons-navigator component[/en]
  52. * [ja]ons-navigatorコンポーネント[/ja]
  53. * @example
  54. * <ons-toolbar>
  55. * <div class="left">
  56. * <ons-back-button>Back</ons-back-button>
  57. * </div>
  58. * <div class="center">
  59. * Title
  60. * <div>
  61. * </ons-toolbar>
  62. */
  63. var BackButtonElement = function (_BaseElement) {
  64. _inherits(BackButtonElement, _BaseElement);
  65. /**
  66. * @attribute modifier
  67. * @type {String}
  68. * @description
  69. * [en]The appearance of the back button.[/en]
  70. * [ja]バックボタンの見た目を指定します。[/ja]
  71. */
  72. function BackButtonElement() {
  73. _classCallCheck(this, BackButtonElement);
  74. var _this = _possibleConstructorReturn(this, (BackButtonElement.__proto__ || _Object$getPrototypeOf(BackButtonElement)).call(this));
  75. contentReady(_this, function () {
  76. _this._compile();
  77. });
  78. _this._options = {};
  79. _this._boundOnClick = _this._onClick.bind(_this);
  80. return _this;
  81. }
  82. _createClass(BackButtonElement, [{
  83. key: '_updateIcon',
  84. value: function _updateIcon() {
  85. var icon = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : util.findChild(this, '.back-button__icon');
  86. icon.innerHTML = autoStyle.getPlatform(this) === 'android' || util.hasModifier(this, 'material') ? mdBackButtonIcon : iosBackButtonIcon;
  87. }
  88. }, {
  89. key: '_compile',
  90. value: function _compile() {
  91. autoStyle.prepare(this);
  92. this.classList.add(defaultClassName);
  93. if (!util.findChild(this, '.back-button__label')) {
  94. var label = util.create('span.back-button__label');
  95. while (this.childNodes[0]) {
  96. label.appendChild(this.childNodes[0]);
  97. }
  98. this.appendChild(label);
  99. }
  100. if (!util.findChild(this, '.back-button__icon')) {
  101. var icon = util.create('span.back-button__icon');
  102. this._updateIcon(icon);
  103. this.insertBefore(icon, this.children[0]);
  104. }
  105. util.updateRipple(this, undefined, { center: '', 'size': 'contain', 'background': 'transparent' });
  106. ModifierUtil.initModifier(this, scheme);
  107. }
  108. /**
  109. * @property options
  110. * @type {Object}
  111. * @description
  112. * [en]Options object.[/en]
  113. * [ja]オプションを指定するオブジェクト。[/ja]
  114. */
  115. /**
  116. * @property options.animation
  117. * @type {String}
  118. * @description
  119. * [en]Animation name. Available animations are "slide", "lift", "fade" and "none".
  120. * These are platform based animations. For fixed animations, add "-ios" or "-md"
  121. * suffix to the animation name. E.g. "lift-ios", "lift-md". Defaults values are "slide-ios" and "fade-md".
  122. * [/en]
  123. * [ja][/ja]
  124. */
  125. /**
  126. * @property options.animationOptions
  127. * @type {String}
  128. * @description
  129. * [en]Specify the animation's duration, delay and timing. E.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}`[/en]
  130. * [ja]アニメーション時のduration, delay, timingを指定します。e.g. `{duration: 0.2, delay: 0.4, timing: 'ease-in'}` [/ja]
  131. */
  132. /**
  133. * @property options.callback
  134. * @type {String}
  135. * @description
  136. * [en]Function that is called when the transition has ended.[/en]
  137. * [ja]このメソッドによる画面遷移が終了した際に呼び出される関数オブジェクトを指定します。[/ja]
  138. */
  139. }, {
  140. key: '_onClick',
  141. /**
  142. * @property onClick
  143. * @type {Function}
  144. * @description
  145. * [en]Used to override the default back button behavior.[/en]
  146. * [ja][/ja]
  147. */
  148. value: function _onClick() {
  149. if (this.onClick) {
  150. this.onClick.apply(this);
  151. } else {
  152. var navigator = util.findParent(this, 'ons-navigator');
  153. if (navigator) {
  154. navigator.popPage(this.options);
  155. }
  156. }
  157. }
  158. }, {
  159. key: 'connectedCallback',
  160. value: function connectedCallback() {
  161. this.addEventListener('click', this._boundOnClick, false);
  162. }
  163. }, {
  164. key: 'attributeChangedCallback',
  165. value: function attributeChangedCallback(name, last, current) {
  166. switch (name) {
  167. case 'class':
  168. util.restoreClass(this, defaultClassName, scheme);
  169. break;
  170. case 'modifier':
  171. {
  172. ModifierUtil.onModifierChanged(last, current, this, scheme) && this._updateIcon();
  173. break;
  174. }
  175. }
  176. }
  177. }, {
  178. key: 'disconnectedCallback',
  179. value: function disconnectedCallback() {
  180. this.removeEventListener('click', this._boundOnClick, false);
  181. }
  182. }, {
  183. key: 'show',
  184. value: function show() {
  185. this.style.display = 'inline-block';
  186. }
  187. }, {
  188. key: 'hide',
  189. value: function hide() {
  190. this.style.display = 'none';
  191. }
  192. }, {
  193. key: 'options',
  194. get: function get() {
  195. return this._options;
  196. },
  197. set: function set(object) {
  198. this._options = object;
  199. }
  200. }], [{
  201. key: 'observedAttributes',
  202. get: function get() {
  203. return ['modifier', 'class'];
  204. }
  205. }]);
  206. return BackButtonElement;
  207. }(BaseElement);
  208. export default BackButtonElement;
  209. onsElements.BackButton = BackButtonElement;
  210. customElements.define('ons-back-button', BackButtonElement);