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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. import _Promise from 'babel-runtime/core-js/promise';
  2. import _setImmediate from 'babel-runtime/core-js/set-immediate';
  3. import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
  4. import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
  5. import _createClass from 'babel-runtime/helpers/createClass';
  6. import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
  7. import _inherits from 'babel-runtime/helpers/inherits';
  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 autoStyle from '../ons/autostyle';
  23. import ModifierUtil from '../ons/internal/modifier-util';
  24. import BaseElement from './base/base-element';
  25. import TabbarElement from './ons-tabbar';
  26. import contentReady from '../ons/content-ready';
  27. import { PageLoader, defaultPageLoader } from '../ons/page-loader';
  28. var defaultClassName = 'tabbar__item';
  29. var scheme = {
  30. '': 'tabbar--*__item',
  31. '.tabbar__button': 'tabbar--*__button'
  32. };
  33. /**
  34. * @element ons-tab
  35. * @category tabbar
  36. * @description
  37. * [en]Represents a tab inside tab bar. Each `<ons-tab>` represents a page.[/en]
  38. * [ja]
  39. * タブバーに配置される各アイテムのコンポーネントです。それぞれのons-tabはページを表します。
  40. * ons-tab要素の中には、タブに表示されるコンテンツを直接記述することが出来ます。
  41. * [/ja]
  42. * @codepen pGuDL
  43. * @tutorial vanilla/Reference/tabbar
  44. * @guide fundamentals.html#managing-pages
  45. * [en]Managing multiple pages.[/en]
  46. * [ja]複数のページを管理する[/ja]]
  47. * @guide appsize.html#removing-icon-packs [en]Removing icon packs.[/en][ja][/ja]
  48. * @guide faq.html#how-can-i-use-custom-icon-packs [en]Adding custom icon packs.[/en][ja][/ja]
  49. * @seealso ons-tabbar
  50. * [en]ons-tabbar component[/en]
  51. * [ja]ons-tabbarコンポーネント[/ja]
  52. * @seealso ons-page
  53. * [en]ons-page component[/en]
  54. * [ja]ons-pageコンポーネント[/ja]
  55. * @seealso ons-icon
  56. * [en]ons-icon component[/en]
  57. * [ja]ons-iconコンポーネント[/ja]
  58. * @example
  59. * <ons-tabbar>
  60. * <ons-tab
  61. * page="home.html"
  62. * label="Home"
  63. * active>
  64. * </ons-tab>
  65. * <ons-tab
  66. * page="settings.html"
  67. * label="Settings"
  68. * active>
  69. * </ons-tab>
  70. * </ons-tabbar>
  71. *
  72. * <template id="home.html">
  73. * ...
  74. * </template>
  75. *
  76. * <template id="settings.html">
  77. * ...
  78. * </template>
  79. */
  80. var TabElement = function (_BaseElement) {
  81. _inherits(TabElement, _BaseElement);
  82. /**
  83. * @attribute page
  84. * @initonly
  85. * @type {String}
  86. * @description
  87. * [en]The page that is displayed when the tab is tapped.[/en]
  88. * [ja]ons-tabが参照するページへのURLを指定します。[/ja]
  89. */
  90. /**
  91. * @attribute icon
  92. * @type {String}
  93. * @description
  94. * [en]
  95. * The icon name for the tab. Can specify the same icon name as `<ons-icon>`. Check [See also](#seealso) section for more information.
  96. * [/en]
  97. * [ja]
  98. * アイコン名を指定します。ons-iconと同じアイコン名を指定できます。
  99. * 個別にアイコンをカスタマイズする場合は、background-imageなどのCSSスタイルを用いて指定できます。
  100. * [/ja]
  101. */
  102. /**
  103. * @attribute active-icon
  104. * @type {String}
  105. * @description
  106. * [en]The name of the icon when the tab is active.[/en]
  107. * [ja]アクティブの際のアイコン名を指定します。[/ja]
  108. */
  109. /**
  110. * @attribute label
  111. * @type {String}
  112. * @description
  113. * [en]The label of the tab item.[/en]
  114. * [ja]アイコン下に表示されるラベルを指定します。[/ja]
  115. */
  116. /**
  117. * @attribute badge
  118. * @type {String}
  119. * @description
  120. * [en]Display a notification badge on top of the tab.[/en]
  121. * [ja]バッジに表示する内容を指定します。[/ja]
  122. */
  123. /**
  124. * @attribute active
  125. * @description
  126. * [en]This attribute should be set to the tab that is active by default.[/en]
  127. * [ja][/ja]
  128. */
  129. function TabElement() {
  130. _classCallCheck(this, TabElement);
  131. var _this = _possibleConstructorReturn(this, (TabElement.__proto__ || _Object$getPrototypeOf(TabElement)).call(this));
  132. if (['label', 'icon', 'badge'].some(_this.hasAttribute.bind(_this))) {
  133. _this._compile();
  134. } else {
  135. contentReady(_this, function () {
  136. return _this._compile();
  137. });
  138. }
  139. _this._pageLoader = defaultPageLoader;
  140. _this._onClick = _this._onClick.bind(_this);
  141. return _this;
  142. }
  143. _createClass(TabElement, [{
  144. key: '_compile',
  145. value: function _compile() {
  146. autoStyle.prepare(this);
  147. this.classList.add(defaultClassName);
  148. if (this._button) {
  149. return;
  150. }
  151. var button = util.create('button.tabbar__button');
  152. while (this.childNodes[0]) {
  153. button.appendChild(this.childNodes[0]);
  154. }
  155. var input = util.create('input', { display: 'none' });
  156. input.type = 'radio';
  157. this.appendChild(input);
  158. this.appendChild(button);
  159. this._updateButtonContent();
  160. ModifierUtil.initModifier(this, scheme);
  161. this._updateRipple();
  162. }
  163. }, {
  164. key: '_updateRipple',
  165. value: function _updateRipple() {
  166. this._button && util.updateRipple(this._button, this.hasAttribute('ripple'));
  167. }
  168. }, {
  169. key: '_updateButtonContent',
  170. value: function _updateButtonContent() {
  171. var _this2 = this;
  172. var button = this._button;
  173. var iconWrapper = this._icon;
  174. if (this.hasAttribute('icon')) {
  175. iconWrapper = iconWrapper || util.createElement('<div class="tabbar__icon"><ons-icon></ons-icon></div>');
  176. var icon = iconWrapper.children[0];
  177. var fix = function (last) {
  178. return function () {
  179. return icon.attributeChangedCallback('icon', last, _this2.getAttribute('icon'));
  180. };
  181. }(icon.getAttribute('icon'));
  182. icon.setAttribute('icon', this.getAttribute(this.isActive() ? 'active-icon' : 'icon'));
  183. iconWrapper.parentElement !== button && button.insertBefore(iconWrapper, button.firstChild);
  184. // dirty fix for https://github.com/OnsenUI/OnsenUI/issues/1654
  185. icon.attributeChangedCallback instanceof Function ? fix() : _setImmediate(function () {
  186. return icon.attributeChangedCallback instanceof Function && fix();
  187. });
  188. } else {
  189. iconWrapper && iconWrapper.remove();
  190. }
  191. ['label', 'badge'].forEach(function (attr, index) {
  192. var prop = _this2.querySelector('.tabbar__' + attr);
  193. if (_this2.hasAttribute(attr)) {
  194. prop = prop || util.create('.tabbar__' + attr + (attr === 'badge' ? ' notification' : ''));
  195. prop.textContent = _this2.getAttribute(attr);
  196. prop.parentElement !== button && button.appendChild(prop);
  197. } else {
  198. prop && prop.remove();
  199. }
  200. });
  201. }
  202. }, {
  203. key: '_onClick',
  204. value: function _onClick() {
  205. if (this.onClick instanceof Function) {
  206. this.onClick();
  207. } else {
  208. this._tabbar.setActiveTab(this.index, { reject: false });
  209. }
  210. }
  211. }, {
  212. key: 'setActive',
  213. value: function setActive() {
  214. var active = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
  215. this._input.checked = active;
  216. this.classList.toggle('active', active);
  217. util.toggleAttribute(this, 'active', active);
  218. if (this.hasAttribute('icon') && this.hasAttribute('active-icon')) {
  219. this._icon.children[0].setAttribute('icon', this.getAttribute(active ? 'active-icon' : 'icon'));
  220. }
  221. }
  222. }, {
  223. key: '_loadPageElement',
  224. value: function _loadPageElement(parent, page) {
  225. var _this3 = this;
  226. this._hasLoaded = true;
  227. return new _Promise(function (resolve) {
  228. _this3._pageLoader.load({ parent: parent, page: page }, function (pageElement) {
  229. parent.replaceChild(pageElement, parent.children[_this3.index]); // Ensure position
  230. _this3._loadedPage = pageElement;
  231. resolve(pageElement);
  232. });
  233. });
  234. }
  235. }, {
  236. key: 'isActive',
  237. /**
  238. * @return {Boolean}
  239. */
  240. value: function isActive() {
  241. return this.classList.contains('active');
  242. }
  243. }, {
  244. key: 'disconnectedCallback',
  245. value: function disconnectedCallback() {
  246. this.removeEventListener('click', this._onClick, false);
  247. if (this._loadedPage) {
  248. this._hasLoaded = false;
  249. this.loaded = null;
  250. }
  251. }
  252. }, {
  253. key: 'connectedCallback',
  254. value: function connectedCallback() {
  255. var _this4 = this;
  256. this.addEventListener('click', this._onClick, false);
  257. if (!util.isAttached(this) || this.loaded) {
  258. return; // ons-tabbar compilation may trigger this
  259. }
  260. var deferred = util.defer();
  261. this.loaded = deferred.promise;
  262. contentReady(this, function () {
  263. var index = _this4.index;
  264. var tabbar = _this4._tabbar;
  265. if (!tabbar) {
  266. util.throw('Tab elements must be children of Tabbar');
  267. }
  268. if (tabbar.hasAttribute('modifier')) {
  269. util.addModifier(_this4, tabbar.getAttribute('modifier'));
  270. }
  271. if (!_this4._hasLoaded) {
  272. if (_this4.hasAttribute('active')) {
  273. _this4.setActive(true);
  274. tabbar.setAttribute('activeIndex', index);
  275. }
  276. if (index === tabbar.tabs.length - 1) {
  277. tabbar._onRefresh();
  278. _setImmediate(function () {
  279. return tabbar._onRefresh();
  280. });
  281. }
  282. TabbarElement.rewritables.ready(tabbar, function () {
  283. var pageTarget = _this4.page || _this4.getAttribute('page');
  284. if (!_this4.pageElement && pageTarget) {
  285. var parentTarget = tabbar._targetElement;
  286. var dummyPage = util.create('div', { height: '100%', width: '100%', visibility: 'hidden' });
  287. parentTarget.insertBefore(dummyPage, parentTarget.children[index]); // Ensure position
  288. var load = function load() {
  289. return _this4._loadPageElement(parentTarget, pageTarget).then(deferred.resolve);
  290. };
  291. return _this4.isActive() ? load() : tabbar._loadInactive.promise.then(load);
  292. }
  293. return deferred.resolve(_this4.pageElement);
  294. });
  295. }
  296. });
  297. }
  298. }, {
  299. key: 'attributeChangedCallback',
  300. value: function attributeChangedCallback(name, last, current) {
  301. var _this5 = this;
  302. switch (name) {
  303. case 'class':
  304. util.restoreClass(this, defaultClassName, scheme);
  305. break;
  306. case 'modifier':
  307. contentReady(this, function () {
  308. return ModifierUtil.onModifierChanged(last, current, _this5, scheme);
  309. });
  310. break;
  311. case 'ripple':
  312. contentReady(this, function () {
  313. return _this5._updateRipple();
  314. });
  315. break;
  316. case 'icon':
  317. case 'label':
  318. case 'badge':
  319. contentReady(this, function () {
  320. return _this5._updateButtonContent();
  321. });
  322. break;
  323. case 'page':
  324. this.page = current || '';
  325. break;
  326. }
  327. }
  328. }, {
  329. key: 'pageLoader',
  330. set: function set(loader) {
  331. if (!(loader instanceof PageLoader)) {
  332. util.throwPageLoader();
  333. }
  334. this._pageLoader = loader;
  335. },
  336. get: function get() {
  337. return this._pageLoader;
  338. }
  339. }, {
  340. key: '_input',
  341. get: function get() {
  342. return util.findChild(this, 'input');
  343. }
  344. }, {
  345. key: '_button',
  346. get: function get() {
  347. return util.findChild(this, '.tabbar__button');
  348. }
  349. }, {
  350. key: '_icon',
  351. get: function get() {
  352. return this.querySelector('.tabbar__icon');
  353. }
  354. }, {
  355. key: '_tabbar',
  356. get: function get() {
  357. return util.findParent(this, 'ons-tabbar');
  358. }
  359. }, {
  360. key: 'index',
  361. get: function get() {
  362. return Array.prototype.indexOf.call(this.parentElement.children, this);
  363. }
  364. }, {
  365. key: 'pageElement',
  366. get: function get() {
  367. // It has been loaded by ons-tab
  368. if (this._loadedPage) {
  369. return this._loadedPage;
  370. }
  371. // Manually attached to DOM, 1 per tab
  372. var tabbar = this._tabbar;
  373. if (tabbar.pages.length === tabbar.tabs.length) {
  374. return tabbar.pages[this.index];
  375. }
  376. // Loaded in another way
  377. return null;
  378. }
  379. }], [{
  380. key: 'observedAttributes',
  381. get: function get() {
  382. return ['modifier', 'ripple', 'icon', 'label', 'page', 'badge', 'class'];
  383. }
  384. }]);
  385. return TabElement;
  386. }(BaseElement);
  387. export default TabElement;
  388. onsElements.Tab = TabElement;
  389. customElements.define('ons-tab', TabElement);