123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726 |
- import _Promise from 'babel-runtime/core-js/promise';
- import _extends from 'babel-runtime/helpers/extends';
- import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
- import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
- import _createClass from 'babel-runtime/helpers/createClass';
- import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
- import _inherits from 'babel-runtime/helpers/inherits';
-
-
- import onsElements from '../ons/elements';
- import util from '../ons/util';
- import BaseElement from './base/base-element';
- import contentReady from '../ons/content-ready';
- import Swiper from '../ons/internal/swiper';
-
-
-
- var CarouselElement = function (_BaseElement) {
- _inherits(CarouselElement, _BaseElement);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- function CarouselElement() {
- _classCallCheck(this, CarouselElement);
-
- var _this = _possibleConstructorReturn(this, (CarouselElement.__proto__ || _Object$getPrototypeOf(CarouselElement)).call(this));
-
- contentReady(_this, function () {
- return _this._compile();
- });
- return _this;
- }
-
- _createClass(CarouselElement, [{
- key: '_compile',
- value: function _compile() {
- var target = this.children[0] && this.children[0].tagName !== 'ONS-CAROUSEL-ITEM' && this.children[0] || document.createElement('div');
- if (!target.parentNode) {
- while (this.firstChild) {
- target.appendChild(this.firstChild);
- }
- this.appendChild(target);
- }
-
- !this.children[1] && this.appendChild(document.createElement('div'));
-
- this.appendChild = this.appendChild.bind(target);
- this.insertBefore = this.insertBefore.bind(target);
- }
- }, {
- key: 'connectedCallback',
- value: function connectedCallback() {
- var _this2 = this;
-
- if (!this._swiper) {
- this._swiper = new Swiper({
- getElement: function getElement() {
- return _this2;
- },
- getInitialIndex: function getInitialIndex() {
- return _this2.getAttribute('initial-index');
- },
- getAutoScrollRatio: function getAutoScrollRatio() {
- return _this2.autoScrollRatio;
- },
- isVertical: function isVertical() {
- return _this2.vertical;
- },
- isOverScrollable: function isOverScrollable() {
- return _this2.overscrollable;
- },
- isCentered: function isCentered() {
- return _this2.centered;
- },
- isAutoScrollable: function isAutoScrollable() {
- return _this2.autoScroll;
- },
- itemSize: this.itemSize,
- overScrollHook: this._onOverScroll.bind(this),
- preChangeHook: this._onChange.bind(this, 'prechange'),
- postChangeHook: this._onChange.bind(this, 'postchange'),
- refreshHook: this._onRefresh.bind(this),
- scrollHook: function scrollHook() {
- return _this2._onSwipe && _this2._onSwipe.apply(_this2, arguments);
- }
- });
-
- contentReady(this, function () {
- return _this2._swiper.init({
- swipeable: _this2.hasAttribute('swipeable'),
- autoRefresh: _this2.hasAttribute('auto-refresh')
- });
- });
- }
- }
- }, {
- key: 'disconnectedCallback',
- value: function disconnectedCallback() {
- if (this._swiper && this._swiper.initialized) {
- this._swiper.dispose();
- this._swiper = null;
- }
- }
- }, {
- key: 'attributeChangedCallback',
- value: function attributeChangedCallback(name, last, current) {
- if (!this._swiper) {
- return;
- }
-
- switch (name) {
- case 'swipeable':
- this._swiper.updateSwipeable(this.hasAttribute('swipeable'));
- break;
- case 'auto-refresh':
- this._swiper.updateAutoRefresh(this.hasAttribute('auto-refresh'));
- break;
- case 'item-height':
- this.vertical && this._swiper.updateItemSize(this.itemSize);
- break;
- case 'item-width':
- this.vertical || this._swiper.updateItemSize(this.itemSize);
- break;
- case 'direction':
- this._swiper.refresh();
- }
- }
- }, {
- key: '_show',
- value: function _show() {
- this._swiper.show();
- }
- }, {
- key: '_hide',
- value: function _hide() {
- this._swiper.hide();
- }
- }, {
- key: '_onOverScroll',
- value: function _onOverScroll(_ref) {
- var direction = _ref.direction,
- killOverScroll = _ref.killOverScroll;
-
- var waitForAction = false;
- util.triggerElementEvent(this, 'overscroll', {
- carousel: this,
- activeIndex: this.getActiveIndex(),
- direction: direction,
- waitToReturn: function waitToReturn(promise) {
- waitForAction = true;
- promise.then(killOverScroll);
- }
- });
-
- return waitForAction;
- }
- }, {
- key: '_onChange',
- value: function _onChange(eventName, _ref2) {
- var activeIndex = _ref2.activeIndex,
- lastActiveIndex = _ref2.lastActiveIndex;
-
- util.triggerElementEvent(this, eventName, { carousel: this, activeIndex: activeIndex, lastActiveIndex: lastActiveIndex });
- }
- }, {
- key: '_onRefresh',
- value: function _onRefresh() {
- util.triggerElementEvent(this, 'refresh', { carousel: this });
- }
-
-
-
-
- }, {
- key: 'setActiveIndex',
- value: function setActiveIndex(index) {
- var _this3 = this;
-
- var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
- options = _extends({
- animation: this.getAttribute('animation'),
- animationOptions: this.hasAttribute('animation-options') ? util.animationOptionsParse(this.getAttribute('animation-options')) : { duration: .3, timing: 'cubic-bezier(.4, .7, .5, 1)' }
- }, options);
-
- return this._swiper.setActiveIndex(index, options).then(function () {
- options.callback instanceof Function && options.callback(_this3);
- return _Promise.resolve(_this3);
- });
- }
-
-
-
-
- }, {
- key: 'getActiveIndex',
- value: function getActiveIndex() {
- return this._swiper.getActiveIndex();
- }
-
-
-
-
- }, {
- key: 'next',
- value: function next(options) {
- return this.setActiveIndex(this.getActiveIndex() + 1, options);
- }
-
-
-
-
- }, {
- key: 'prev',
- value: function prev(options) {
- return this.setActiveIndex(this.getActiveIndex() - 1, options);
- }
-
-
-
-
- }, {
- key: 'first',
- value: function first(options) {
- return this.setActiveIndex(0, options);
- }
-
-
-
-
- }, {
- key: 'last',
- value: function last(options) {
- this.setActiveIndex(Math.max(this.itemCount - 1, 0), options);
- }
-
-
-
-
- }, {
- key: 'refresh',
- value: function refresh() {
- this._swiper.refresh();
- }
-
-
-
-
- }, {
- key: 'itemCount',
- get: function get() {
- return this._swiper.itemCount;
- }
-
-
-
-
- }, {
- key: 'swipeable',
- get: function get() {
- return this.hasAttribute('swipeable');
- },
- set: function set(value) {
- return util.toggleAttribute(this, 'swipeable', value);
- }
-
-
-
-
- }, {
- key: 'onSwipe',
- get: function get() {
- return this._onSwipe;
- },
- set: function set(value) {
- if (value && !(value instanceof Function)) {
- util.throw('"onSwipe" must be a function');
- }
- this._onSwipe = value;
- }
-
-
-
-
- }, {
- key: 'autoScroll',
- get: function get() {
- return this.hasAttribute('auto-scroll');
- },
- set: function set(value) {
- return util.toggleAttribute(this, 'auto-scroll', value);
- }
- }, {
- key: 'vertical',
- get: function get() {
- return this.getAttribute('direction') === 'vertical';
- }
- }, {
- key: 'itemSize',
- get: function get() {
- var itemSizeAttr = (this.getAttribute('item-' + (this.vertical ? 'height' : 'width')) || '').trim();
- return itemSizeAttr.match(/^\d+(px|%)$/) ? itemSizeAttr : '100%';
- }
-
-
-
-
- }, {
- key: 'autoScrollRatio',
- get: function get() {
- return parseFloat(this.getAttribute('auto-scroll-ratio'));
- },
- set: function set(ratio) {
- this.setAttribute('auto-scroll-ratio', ratio);
- }
-
-
-
-
- }, {
- key: 'disabled',
- get: function get() {
- return this.hasAttribute('disabled');
- },
- set: function set(value) {
- return util.toggleAttribute(this, 'disabled', value);
- }
-
-
-
-
- }, {
- key: 'overscrollable',
- get: function get() {
- return this.hasAttribute('overscrollable');
- },
- set: function set(value) {
- return util.toggleAttribute(this, 'overscrollable', value);
- }
-
-
-
-
- }, {
- key: 'centered',
- get: function get() {
- return this.hasAttribute('centered');
- },
- set: function set(value) {
- return util.toggleAttribute(this, 'centered', value);
- }
- }], [{
- key: 'observedAttributes',
- get: function get() {
- return ['swipeable', 'auto-refresh', 'direction', 'item-height', 'item-width'];
- }
- }, {
- key: 'events',
- get: function get() {
- return ['postchange', 'refresh', 'overscroll'];
- }
- }]);
-
- return CarouselElement;
- }(BaseElement);
-
- export default CarouselElement;
-
-
- onsElements.Carousel = CarouselElement;
- customElements.define('ons-carousel', CarouselElement);
|