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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726
  1. import _Promise from 'babel-runtime/core-js/promise';
  2. import _extends from 'babel-runtime/helpers/extends';
  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 BaseElement from './base/base-element';
  23. import contentReady from '../ons/content-ready';
  24. import Swiper from '../ons/internal/swiper';
  25. /**
  26. * @element ons-carousel
  27. * @category carousel
  28. * @description
  29. * [en]
  30. * Carousel component. A carousel can be used to display several items in the same space.
  31. *
  32. * The component supports displaying content both horizontally and vertically. The user can scroll through the items by dragging and it can also be controller programmatically.
  33. * [/en]
  34. * [ja][/ja]
  35. * @codepen xbbzOQ
  36. * @tutorial vanilla/Reference/carousel
  37. * @seealso ons-carousel-item
  38. * [en]`<ons-carousel-item>` component[/en]
  39. * [ja]ons-carousel-itemコンポーネント[/ja]
  40. * @example
  41. * <ons-carousel style="width: 100%; height: 200px">
  42. * <ons-carousel-item>
  43. * ...
  44. * </ons-carousel-item>
  45. * <ons-carousel-item>
  46. * ...
  47. * </ons-carousel-item>
  48. * </ons-carousel>
  49. */
  50. var CarouselElement = function (_BaseElement) {
  51. _inherits(CarouselElement, _BaseElement);
  52. /**
  53. * @event postchange
  54. * @description
  55. * [en]Fired just after the current carousel item has changed.[/en]
  56. * [ja]現在表示しているカルーセルの要素が変わった時に発火します。[/ja]
  57. * @param {Object} event
  58. * [en]Event object.[/en]
  59. * [ja]イベントオブジェクトです。[/ja]
  60. * @param {Object} event.carousel
  61. * [en]Carousel object.[/en]
  62. * [ja]イベントが発火したCarouselオブジェクトです。[/ja]
  63. * @param {Number} event.activeIndex
  64. * [en]Current active index.[/en]
  65. * [ja]現在アクティブになっている要素のインデックス。[/ja]
  66. * @param {Number} event.lastActiveIndex
  67. * [en]Previous active index.[/en]
  68. * [ja]以前アクティブだった要素のインデックス。[/ja]
  69. */
  70. /**
  71. * @event refresh
  72. * @description
  73. * [en]Fired when the carousel has been refreshed.[/en]
  74. * [ja]カルーセルが更新された時に発火します。[/ja]
  75. * @param {Object} event
  76. * [en]Event object.[/en]
  77. * [ja]イベントオブジェクトです。[/ja]
  78. * @param {Object} event.carousel
  79. * [en]Carousel object.[/en]
  80. * [ja]イベントが発火したCarouselオブジェクトです。[/ja]
  81. */
  82. /**
  83. * @event overscroll
  84. * @description
  85. * [en]Fired when the carousel has been overscrolled.[/en]
  86. * [ja]カルーセルがオーバースクロールした時に発火します。[/ja]
  87. * @param {Object} event
  88. * [en]Event object.[/en]
  89. * [ja]イベントオブジェクトです。[/ja]
  90. * @param {Object} event.carousel
  91. * [en]Fired when the carousel has been refreshed.[/en]
  92. * [ja]カルーセルが更新された時に発火します。[/ja]
  93. * @param {Number} event.activeIndex
  94. * [en]Current active index.[/en]
  95. * [ja]現在アクティブになっている要素のインデックス。[/ja]
  96. * @param {String} event.direction
  97. * [en]Can be one of either "up", "down", "left" or "right".[/en]
  98. * [ja]オーバースクロールされた方向が得られます。"up", "down", "left", "right"のいずれかの方向が渡されます。[/ja]
  99. * @param {Function} event.waitToReturn
  100. * [en]Takes a <code>Promise</code> object as an argument. The carousel will not scroll back until the promise has been resolved or rejected.[/en]
  101. * [ja]この関数はPromiseオブジェクトを引数として受け取ります。渡したPromiseオブジェクトがresolveされるかrejectされるまで、カルーセルはスクロールバックしません。[/ja]
  102. */
  103. /**
  104. * @attribute direction
  105. * @type {String}
  106. * @description
  107. * [en]The direction of the carousel. Can be either "horizontal" or "vertical". Default is "horizontal".[/en]
  108. * [ja]カルーセルの方向を指定します。"horizontal"か"vertical"を指定できます。"horizontal"がデフォルト値です。[/ja]
  109. */
  110. /**
  111. * @attribute fullscreen
  112. * @description
  113. * [en]If this attribute is set the carousel will cover the whole screen.[/en]
  114. * [ja]この属性があると、absoluteポジションを使ってカルーセルが自動的に画面いっぱいに広がります。[/ja]
  115. */
  116. /**
  117. * @attribute overscrollable
  118. * @description
  119. * [en]If this attribute is set the carousel will be scrollable over the edge. It will bounce back when released.[/en]
  120. * [ja]この属性がある時、タッチやドラッグで端までスクロールした時に、バウンドするような効果が当たります。[/ja]
  121. */
  122. /**
  123. * @attribute centered
  124. * @description
  125. * [en]If this attribute is set the carousel then the selected item will be in the center of the carousel instead of the beginning. Useful only when the items are smaller than the carousel. [/en]
  126. * [ja]この属性がある時、選んでいるons-carousel-itemはカルーセルの真ん中へ行きます。項目がカルーセルよりも小さい場合にのみ、これは便利です。[/ja]
  127. */
  128. /**
  129. * @attribute item-width
  130. * @type {String}
  131. * @description
  132. * [en]ons-carousel-item's width. Only works when the direction is set to "horizontal".[/en]
  133. * [ja]ons-carousel-itemの幅を指定します。この属性は、direction属性に"horizontal"を指定した時のみ有効になります。[/ja]
  134. */
  135. /**
  136. * @attribute item-height
  137. * @type {String}
  138. * @description
  139. * [en]ons-carousel-item's height. Only works when the direction is set to "vertical".[/en]
  140. * [ja]ons-carousel-itemの高さを指定します。この属性は、direction属性に"vertical"を指定した時のみ有効になります。[/ja]
  141. */
  142. /**
  143. * @attribute auto-scroll
  144. * @description
  145. * [en]If this attribute is set the carousel will be automatically scrolled to the closest item border when released.[/en]
  146. * [ja]この属性がある時、一番近いcarousel-itemの境界まで自動的にスクロールするようになります。[/ja]
  147. */
  148. /**
  149. * @attribute auto-scroll-ratio
  150. * @type {Number}
  151. * @description
  152. * [en]A number between 0.0 and 1.0 that specifies how much the user must drag the carousel in order for it to auto scroll to the next item.[/en]
  153. * [ja]0.0から1.0までの値を指定します。カルーセルの要素をどれぐらいの割合までドラッグすると次の要素に自動的にスクロールするかを指定します。[/ja]
  154. */
  155. /**
  156. * @attribute swipeable
  157. * @description
  158. * [en]If this attribute is set the carousel can be scrolled by drag or swipe.[/en]
  159. * [ja]この属性がある時、カルーセルをスワイプやドラッグで移動できるようになります。[/ja]
  160. */
  161. /**
  162. * @attribute disabled
  163. * @description
  164. * [en]If this attribute is set the carousel is disabled.[/en]
  165. * [ja]この属性がある時、dragやtouchやswipeを受け付けなくなります。[/ja]
  166. */
  167. /**
  168. * @attribute initial-index
  169. * @initonly
  170. * @default 0
  171. * @type {Number}
  172. * @description
  173. * [en]Specify the index of the ons-carousel-item to show initially. Default is 0.[/en]
  174. * [ja]最初に表示するons-carousel-itemを0始まりのインデックスで指定します。デフォルト値は 0 です。[/ja]
  175. */
  176. /**
  177. * @attribute auto-refresh
  178. * @description
  179. * [en]When this attribute is set the carousel will automatically refresh when the number of child nodes change.[/en]
  180. * [ja]この属性がある時、子要素の数が変わるとカルーセルは自動的に更新されるようになります。[/ja]
  181. */
  182. /**
  183. * @attribute animation
  184. * @type {String}
  185. * @description
  186. * [en]If this attribute is set to `"none"` the transitions will not be animated.[/en]
  187. * [ja][/ja]
  188. */
  189. /**
  190. * @attribute animation-options
  191. * @type {Expression}
  192. * @description
  193. * [en]Specify the animation's duration, timing and delay with an object literal. E.g. `{duration: 0.2, delay: 1, timing: 'ease-in'}`.[/en]
  194. * [ja]アニメーション時のduration, timing, delayをオブジェクトリテラルで指定します。例:{duration: 0.2, delay: 1, timing: 'ease-in'}[/ja]
  195. */
  196. function CarouselElement() {
  197. _classCallCheck(this, CarouselElement);
  198. var _this = _possibleConstructorReturn(this, (CarouselElement.__proto__ || _Object$getPrototypeOf(CarouselElement)).call(this));
  199. contentReady(_this, function () {
  200. return _this._compile();
  201. });
  202. return _this;
  203. }
  204. _createClass(CarouselElement, [{
  205. key: '_compile',
  206. value: function _compile() {
  207. var target = this.children[0] && this.children[0].tagName !== 'ONS-CAROUSEL-ITEM' && this.children[0] || document.createElement('div');
  208. if (!target.parentNode) {
  209. while (this.firstChild) {
  210. target.appendChild(this.firstChild);
  211. }
  212. this.appendChild(target);
  213. }
  214. !this.children[1] && this.appendChild(document.createElement('div'));
  215. this.appendChild = this.appendChild.bind(target);
  216. this.insertBefore = this.insertBefore.bind(target);
  217. }
  218. }, {
  219. key: 'connectedCallback',
  220. value: function connectedCallback() {
  221. var _this2 = this;
  222. if (!this._swiper) {
  223. this._swiper = new Swiper({
  224. getElement: function getElement() {
  225. return _this2;
  226. },
  227. getInitialIndex: function getInitialIndex() {
  228. return _this2.getAttribute('initial-index');
  229. },
  230. getAutoScrollRatio: function getAutoScrollRatio() {
  231. return _this2.autoScrollRatio;
  232. },
  233. isVertical: function isVertical() {
  234. return _this2.vertical;
  235. },
  236. isOverScrollable: function isOverScrollable() {
  237. return _this2.overscrollable;
  238. },
  239. isCentered: function isCentered() {
  240. return _this2.centered;
  241. },
  242. isAutoScrollable: function isAutoScrollable() {
  243. return _this2.autoScroll;
  244. },
  245. itemSize: this.itemSize,
  246. overScrollHook: this._onOverScroll.bind(this),
  247. preChangeHook: this._onChange.bind(this, 'prechange'),
  248. postChangeHook: this._onChange.bind(this, 'postchange'),
  249. refreshHook: this._onRefresh.bind(this),
  250. scrollHook: function scrollHook() {
  251. return _this2._onSwipe && _this2._onSwipe.apply(_this2, arguments);
  252. }
  253. });
  254. contentReady(this, function () {
  255. return _this2._swiper.init({
  256. swipeable: _this2.hasAttribute('swipeable'),
  257. autoRefresh: _this2.hasAttribute('auto-refresh')
  258. });
  259. });
  260. }
  261. }
  262. }, {
  263. key: 'disconnectedCallback',
  264. value: function disconnectedCallback() {
  265. if (this._swiper && this._swiper.initialized) {
  266. this._swiper.dispose();
  267. this._swiper = null;
  268. }
  269. }
  270. }, {
  271. key: 'attributeChangedCallback',
  272. value: function attributeChangedCallback(name, last, current) {
  273. if (!this._swiper) {
  274. return;
  275. }
  276. switch (name) {
  277. case 'swipeable':
  278. this._swiper.updateSwipeable(this.hasAttribute('swipeable'));
  279. break;
  280. case 'auto-refresh':
  281. this._swiper.updateAutoRefresh(this.hasAttribute('auto-refresh'));
  282. break;
  283. case 'item-height':
  284. this.vertical && this._swiper.updateItemSize(this.itemSize);
  285. break;
  286. case 'item-width':
  287. this.vertical || this._swiper.updateItemSize(this.itemSize);
  288. break;
  289. case 'direction':
  290. this._swiper.refresh();
  291. }
  292. }
  293. }, {
  294. key: '_show',
  295. value: function _show() {
  296. this._swiper.show();
  297. }
  298. }, {
  299. key: '_hide',
  300. value: function _hide() {
  301. this._swiper.hide();
  302. }
  303. }, {
  304. key: '_onOverScroll',
  305. value: function _onOverScroll(_ref) {
  306. var direction = _ref.direction,
  307. killOverScroll = _ref.killOverScroll;
  308. var waitForAction = false;
  309. util.triggerElementEvent(this, 'overscroll', {
  310. carousel: this,
  311. activeIndex: this.getActiveIndex(),
  312. direction: direction,
  313. waitToReturn: function waitToReturn(promise) {
  314. waitForAction = true;
  315. promise.then(killOverScroll);
  316. }
  317. });
  318. return waitForAction;
  319. }
  320. }, {
  321. key: '_onChange',
  322. value: function _onChange(eventName, _ref2) {
  323. var activeIndex = _ref2.activeIndex,
  324. lastActiveIndex = _ref2.lastActiveIndex;
  325. util.triggerElementEvent(this, eventName, { carousel: this, activeIndex: activeIndex, lastActiveIndex: lastActiveIndex });
  326. }
  327. }, {
  328. key: '_onRefresh',
  329. value: function _onRefresh() {
  330. util.triggerElementEvent(this, 'refresh', { carousel: this });
  331. }
  332. /**
  333. * @method setActiveIndex
  334. * @signature setActiveIndex(index, [options])
  335. * @param {Number} index
  336. * [en]The index that the carousel should be set to.[/en]
  337. * [ja]carousel要素のインデックスを指定します。[/ja]
  338. * @param {Object} [options]
  339. * [en]Parameter object.[/en]
  340. * [ja][/ja]
  341. * @param {Function} [options.callback]
  342. * [en]A function that will be called after the animation is finished.[/en]
  343. * [ja][/ja]
  344. * @param {String} [options.animation]
  345. * [en]If this attribute is set to `"none"` the transitions will not be animated.[/en]
  346. * [ja][/ja]
  347. * @param {Object} [options.animationOptions]
  348. * [en]An object that can be used to specify duration, delay and timing function of the animation.[/en]
  349. * [ja][/ja]
  350. * @description
  351. * [en]Specify the index of the `<ons-carousel-item>` to show.[/en]
  352. * [ja]表示するons-carousel-itemをindexで指定します。[/ja]
  353. * @return {Promise}
  354. * [en]Resolves to the carousel element.[/en]
  355. * [ja][/ja]
  356. */
  357. }, {
  358. key: 'setActiveIndex',
  359. value: function setActiveIndex(index) {
  360. var _this3 = this;
  361. var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  362. options = _extends({
  363. animation: this.getAttribute('animation'),
  364. animationOptions: this.hasAttribute('animation-options') ? util.animationOptionsParse(this.getAttribute('animation-options')) : { duration: .3, timing: 'cubic-bezier(.4, .7, .5, 1)' }
  365. }, options);
  366. return this._swiper.setActiveIndex(index, options).then(function () {
  367. options.callback instanceof Function && options.callback(_this3);
  368. return _Promise.resolve(_this3);
  369. });
  370. }
  371. /**
  372. * @method getActiveIndex
  373. * @signature getActiveIndex()
  374. * @return {Number}
  375. * [en]The current carousel item index.[/en]
  376. * [ja]現在表示しているカルーセル要素のインデックスが返されます。[/ja]
  377. * @description
  378. * [en]Returns the index of the currently visible `<ons-carousel-item>`.[/en]
  379. * [ja]現在表示されているons-carousel-item要素のインデックスを返します。[/ja]
  380. */
  381. }, {
  382. key: 'getActiveIndex',
  383. value: function getActiveIndex() {
  384. return this._swiper.getActiveIndex();
  385. }
  386. /**
  387. * @method next
  388. * @signature next([options])
  389. * @param {Object} [options]
  390. * [en]Parameter object.[/en]
  391. * [ja][/ja]
  392. * @param {Function} [options.callback]
  393. * [en]A function that will be executed after the animation has finished.[/en]
  394. * [ja][/ja]
  395. * @param {String} [options.animation]
  396. * [en]If this attribute is set to `"none"` the transitions will not be animated.[/en]
  397. * [ja][/ja]
  398. * @param {Object} [options.animationOptions]
  399. * [en]An object that can be used to specify the duration, delay and timing function of the animation.[/en]
  400. * [ja][/ja]
  401. * @return {Promise}
  402. * [en]Resolves to the carousel element[/en]
  403. * [ja][/ja]
  404. * @description
  405. * [en]Show next `<ons-carousel-item>`.[/en]
  406. * [ja]次のons-carousel-itemを表示します。[/ja]
  407. */
  408. }, {
  409. key: 'next',
  410. value: function next(options) {
  411. return this.setActiveIndex(this.getActiveIndex() + 1, options);
  412. }
  413. /**
  414. * @method prev
  415. * @signature prev([options])
  416. * @param {Object} [options]
  417. * [en]Parameter object.[/en]
  418. * [ja][/ja]
  419. * @param {Function} [options.callback]
  420. * [en]A function that will be executed after the animation has finished.[/en]
  421. * [ja][/ja]
  422. * @param {String} [options.animation]
  423. * [en]If this attribute is set to `"none"` the transitions will not be animated.[/en]
  424. * [ja][/ja]
  425. * @param {Object} [options.animationOptions]
  426. * [en]An object that can be used to specify the duration, delay and timing function of the animation.[/en]
  427. * [ja][/ja]
  428. * @return {Promise}
  429. * [en]Resolves to the carousel element[/en]
  430. * [ja][/ja]
  431. * @description
  432. * [en]Show previous `<ons-carousel-item>`.[/en]
  433. * [ja]前のons-carousel-itemを表示します。[/ja]
  434. */
  435. }, {
  436. key: 'prev',
  437. value: function prev(options) {
  438. return this.setActiveIndex(this.getActiveIndex() - 1, options);
  439. }
  440. /**
  441. * @method first
  442. * @signature first()
  443. * @param {Object} [options]
  444. * [en]Parameter object.[/en]
  445. * [ja][/ja]
  446. * @param {Function} [options.callback]
  447. * [en]A function that will be executed after the animation has finished.[/en]
  448. * [ja][/ja]
  449. * @param {String} [options.animation]
  450. * [en]If this is set to `"none"`, the transitions will not be animated.[/en]
  451. * [ja][/ja]
  452. * @param {Object} [options.animationOptions]
  453. * [en]An object that can be used to specify the duration, delay and timing function of the animation.[/en]
  454. * [ja][/ja]
  455. * @return {Promise}
  456. * [en]Resolves to the carousel element[/en]
  457. * [ja][/ja]
  458. * @description
  459. * [en]Show first `<ons-carousel-item>`.[/en]
  460. * [ja]最初のons-carousel-itemを表示します。[/ja]
  461. */
  462. }, {
  463. key: 'first',
  464. value: function first(options) {
  465. return this.setActiveIndex(0, options);
  466. }
  467. /**
  468. * @method last
  469. * @signature last()
  470. * @param {Object} [options]
  471. * [en]Parameter object.[/en]
  472. * [ja][/ja]
  473. * @param {Function} [options.callback]
  474. * [en]A function that will be executed after the animation has finished.[/en]
  475. * [ja][/ja]
  476. * @param {String} [options.animation]
  477. * [en]If this attribute is set to `"none"` the transitions will not be animated.[/en]
  478. * [ja][/ja]
  479. * @param {Object} [options.animationOptions]
  480. * [en]An object that can be used to specify the duration, delay and timing function of the animation.[/en]
  481. * [ja][/ja]
  482. * @return {Promise}
  483. * [en]Resolves to the carousel element[/en]
  484. * [ja]Resolves to the carousel element[/ja]
  485. * @description
  486. * [en]Show last ons-carousel item.[/en]
  487. * [ja]最後のons-carousel-itemを表示します。[/ja]
  488. */
  489. }, {
  490. key: 'last',
  491. value: function last(options) {
  492. this.setActiveIndex(Math.max(this.itemCount - 1, 0), options);
  493. }
  494. /**
  495. * @method refresh
  496. * @signature refresh()
  497. * @description
  498. * [en]Update the layout of the carousel. Used when adding `<ons-carousel-items>` dynamically or to automatically adjust the size.[/en]
  499. * [ja]レイアウトや内部の状態を最新のものに更新します。ons-carousel-itemを動的に増やしたり、ons-carouselの大きさを動的に変える際に利用します。[/ja]
  500. */
  501. }, {
  502. key: 'refresh',
  503. value: function refresh() {
  504. this._swiper.refresh();
  505. }
  506. /**
  507. * @property itemCount
  508. * @readonly
  509. * @type {Number}
  510. * @description
  511. * [en]The number of carousel items.[/en]
  512. * [ja]カルーセル要素の数です。[/ja]
  513. */
  514. }, {
  515. key: 'itemCount',
  516. get: function get() {
  517. return this._swiper.itemCount;
  518. }
  519. /**
  520. * @property swipeable
  521. * @type {Boolean}
  522. * @description
  523. * [en]true if the carousel is swipeable.[/en]
  524. * [ja]swipeableであればtrueを返します。[/ja]
  525. */
  526. }, {
  527. key: 'swipeable',
  528. get: function get() {
  529. return this.hasAttribute('swipeable');
  530. },
  531. set: function set(value) {
  532. return util.toggleAttribute(this, 'swipeable', value);
  533. }
  534. /**
  535. * @property onSwipe
  536. * @type {Function}
  537. * @description
  538. * [en]Hook called whenever the user slides the carousel. It gets a decimal index and an animationOptions object as arguments.[/en]
  539. * [ja][/ja]
  540. */
  541. }, {
  542. key: 'onSwipe',
  543. get: function get() {
  544. return this._onSwipe;
  545. },
  546. set: function set(value) {
  547. if (value && !(value instanceof Function)) {
  548. util.throw('"onSwipe" must be a function');
  549. }
  550. this._onSwipe = value;
  551. }
  552. /**
  553. * @property autoScroll
  554. * @type {Boolean}
  555. * @description
  556. * [en]true if auto scroll is enabled.[/en]
  557. * [ja]オートスクロールが有効であればtrueを返します。[/ja]
  558. */
  559. }, {
  560. key: 'autoScroll',
  561. get: function get() {
  562. return this.hasAttribute('auto-scroll');
  563. },
  564. set: function set(value) {
  565. return util.toggleAttribute(this, 'auto-scroll', value);
  566. }
  567. }, {
  568. key: 'vertical',
  569. get: function get() {
  570. return this.getAttribute('direction') === 'vertical';
  571. }
  572. }, {
  573. key: 'itemSize',
  574. get: function get() {
  575. var itemSizeAttr = (this.getAttribute('item-' + (this.vertical ? 'height' : 'width')) || '').trim();
  576. return itemSizeAttr.match(/^\d+(px|%)$/) ? itemSizeAttr : '100%';
  577. }
  578. /**
  579. * @property autoScrollRatio
  580. * @type {Number}
  581. * @description
  582. * [en]The current auto scroll ratio. [/en]
  583. * [ja]現在のオートスクロールのratio値。[/ja]
  584. */
  585. }, {
  586. key: 'autoScrollRatio',
  587. get: function get() {
  588. return parseFloat(this.getAttribute('auto-scroll-ratio'));
  589. },
  590. set: function set(ratio) {
  591. this.setAttribute('auto-scroll-ratio', ratio);
  592. }
  593. /**
  594. * @property disabled
  595. * @type {Boolean}
  596. * @description
  597. * [en]Whether the carousel is disabled or not.[/en]
  598. * [ja]無効化されている場合に`true`。[/ja]
  599. */
  600. }, {
  601. key: 'disabled',
  602. get: function get() {
  603. return this.hasAttribute('disabled');
  604. },
  605. set: function set(value) {
  606. return util.toggleAttribute(this, 'disabled', value);
  607. }
  608. /**
  609. * @property overscrollable
  610. * @type {Boolean}
  611. * @description
  612. * [en]Whether the carousel is overscrollable or not.[/en]
  613. * [ja]overscrollできればtrueを返します。[/ja]
  614. */
  615. }, {
  616. key: 'overscrollable',
  617. get: function get() {
  618. return this.hasAttribute('overscrollable');
  619. },
  620. set: function set(value) {
  621. return util.toggleAttribute(this, 'overscrollable', value);
  622. }
  623. /**
  624. * @property centered
  625. * @type {Boolean}
  626. * @description
  627. * [en]Whether the carousel is centered or not.[/en]
  628. * [ja]centered状態になっていればtrueを返します。[/ja]
  629. */
  630. }, {
  631. key: 'centered',
  632. get: function get() {
  633. return this.hasAttribute('centered');
  634. },
  635. set: function set(value) {
  636. return util.toggleAttribute(this, 'centered', value);
  637. }
  638. }], [{
  639. key: 'observedAttributes',
  640. get: function get() {
  641. return ['swipeable', 'auto-refresh', 'direction', 'item-height', 'item-width'];
  642. }
  643. }, {
  644. key: 'events',
  645. get: function get() {
  646. return ['postchange', 'refresh', 'overscroll'];
  647. }
  648. }]);
  649. return CarouselElement;
  650. }(BaseElement);
  651. export default CarouselElement;
  652. onsElements.Carousel = CarouselElement;
  653. customElements.define('ons-carousel', CarouselElement);