diff --git a/dev/icons/arrow-left.svg b/dev/icons/arrow-left.svg deleted file mode 100644 index 1e0ef6a..0000000 --- a/dev/icons/arrow-left.svg +++ /dev/null @@ -1 +0,0 @@ -arrow-left \ No newline at end of file diff --git a/dev/icons/arrow-right.svg b/dev/icons/arrow-right.svg deleted file mode 100644 index bbe2916..0000000 --- a/dev/icons/arrow-right.svg +++ /dev/null @@ -1 +0,0 @@ -arrow-right \ No newline at end of file diff --git a/dev/index.js b/dev/index.js index 960b268..751db86 100644 --- a/dev/index.js +++ b/dev/index.js @@ -1,7 +1,5 @@ import polyfills from './scripts/polyfills'; import Controllers from './scripts/controllers'; -import './scss/styles.scss'; - polyfills(); // Options provided: // - slider_container: # It should be a element wich contains slides. Otherwise it will look for an element with the attribute named data-carousel="name" diff --git a/dist/styles.css b/dist/styles.css new file mode 100644 index 0000000..f6a7779 --- /dev/null +++ b/dist/styles.css @@ -0,0 +1,116 @@ +html, +body { + margin: 0; + padding: 0; } + +.current-slide { + z-index: 1; } + +.page-active { + background: #fff; } + +/*The height is required in order to see the image*/ +.tidy__carousel-wrapper { + position: relative; + width: 100%; + height: 100%; } + +.tidy__carousel { + position: relative; + height: 30vmin; + width: 100%; + margin: 0; + padding: 0; + z-index: 1; + display: block; + overflow: hidden; } + +.tidy__carousel .tidy__carousel-slide { + position: absolute; + width: inherit; + height: inherit; + display: inline-block; } + +.tidy__carousel .tidy__carousel-slide > * { + width: inherit; + height: inherit; + display: block; + user-drag: none; + user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; } + +button.tidy__carousel-controller[data-carousel-controller] { + position: absolute; + transform: translateY(-50%); + z-index: 1000; + top: 50%; + width: 44px; + height: 44px; + border-radius: 50%; + background: #fff; + border: none; + z-index: 10; + display: block; + background: #fff; + user-drag: none; + user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; + outline: none; + cursor: pointer; } + button.tidy__carousel-controller[data-carousel-controller] svg { + position: absolute; + left: 20%; + top: 20%; + width: 60%; + height: 60%; + cursor: pointer; + user-drag: none; + user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; } + +button.tidy__carousel-controller[data-carousel-controller~="left"] { + left: 10px; } + +button.tidy__carousel-controller[data-carousel-controller~="right"] { + right: 10px; } + +.tidy__carousel-pager[data-carousel-pager] { + position: relative; + margin: 0; + padding: 0; + z-index: 100; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + transform: translateY(-25px); + user-drag: none; + user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; } + .tidy__carousel-pager[data-carousel-pager] .tidy__carousel-pager--page { + margin: 0 5px; + width: 10px; + height: 10px; + border-radius: 100%; + border: 1px solid #f1f1f1; + cursor: pointer; + list-style-type: none; + user-drag: none; + user-select: none; + -moz-user-select: none; + -webkit-user-drag: none; + -webkit-user-select: none; + -ms-user-select: none; } + diff --git a/dist/styles.min.css b/dist/styles.min.css new file mode 100644 index 0000000..fedd3ac --- /dev/null +++ b/dist/styles.min.css @@ -0,0 +1,2 @@ +html,body{margin:0;padding:0}.current-slide{z-index:1}.page-active{background:#fff}.tidy__carousel-wrapper{position:relative;width:100%;height:100%}.tidy__carousel{position:relative;height:30vmin;width:100%;margin:0;padding:0;z-index:1;display:block;overflow:hidden}.tidy__carousel .tidy__carousel-slide{position:absolute;width:inherit;height:inherit;display:inline-block}.tidy__carousel .tidy__carousel-slide>*{width:inherit;height:inherit;display:block;user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none}button.tidy__carousel-controller[data-carousel-controller]{position:absolute;transform:translateY(-50%);z-index:1000;top:50%;width:44px;height:44px;border-radius:50%;background:#fff;border:none;z-index:10;display:block;background:#fff;user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none;outline:none;cursor:pointer}button.tidy__carousel-controller[data-carousel-controller] svg{position:absolute;left:20%;top:20%;width:60%;height:60%;cursor:pointer;user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none}button.tidy__carousel-controller[data-carousel-controller~="left"]{left:10px}button.tidy__carousel-controller[data-carousel-controller~="right"]{right:10px}.tidy__carousel-pager[data-carousel-pager]{position:relative;margin:0;padding:0;z-index:100;width:100%;display:flex;align-items:center;justify-content:center;transform:translateY(-25px);user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none}.tidy__carousel-pager[data-carousel-pager] .tidy__carousel-pager--page{margin:0 5px;width:10px;height:10px;border-radius:100%;border:1px solid #f1f1f1;cursor:pointer;list-style-type:none;user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-drag:none;-webkit-user-select:none;-ms-user-select:none} + diff --git a/dist/tidy-carousel.js b/dist/tidy-carousel.js index 1658f37..35890fc 100644 --- a/dist/tidy-carousel.js +++ b/dist/tidy-carousel.js @@ -87,7 +87,7 @@ return /******/ (function(modules) { // webpackBootstrap /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ -/******/ __webpack_require__.p = "./dist"; +/******/ __webpack_require__.p = "/dist"; /******/ /******/ /******/ // Load entry module and return exports @@ -97,84 +97,54 @@ return /******/ (function(modules) { // webpackBootstrap /******/ ({ /***/ "./dev/index.js": -/*!**********************************!*\ - !*** ./dev/index.js + 5 modules ***! - \**********************************/ -/*! exports provided: default */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n\n// CONCATENATED MODULE: ./dev/scripts/polyfills.js\n\r\nconst path = () => {\r\n if (!('path' in Event.prototype)) {\r\n Object.defineProperty(Event.prototype, 'path', {\r\n get: function () {\r\n const path = [];\r\n let currentElem = this.target;\r\n while (currentElem) {\r\n path.push(currentElem);\r\n currentElem = currentElem.parentElement;\r\n }\r\n if (path.indexOf(window) === -1 && path.indexOf(document) === -1)\r\n path.push(document);\r\n if (path.indexOf(window) === -1)\r\n path.push(window);\r\n return path;\r\n }\r\n });\r\n }\r\n};\r\n\r\n/* harmony default export */ var polyfills = (path);\r\n\n// CONCATENATED MODULE: ./dev/scripts/config.js\n// TODO:\r\n// - Check slides if they have the minimum css, such as position: absolute.\r\n// - Add the option to accept a start slide index.\r\n// - Make sure the carousel can receive slides as an array of objects with image url/alt and title.\r\n\r\n\r\nclass Config {\r\n\tconstructor(opts) {\r\n\t\tthis.opts = opts || {};\r\n\r\n\t\tfor(let prop in this.opts) {\r\n\t\t\tif(prop) {\r\n\t\t\t\t// preset each option given\r\n\t\t\t\tthis[prop] = this.opts[prop];\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tget name () {\r\n\r\n\t\treturn this.opts.name !== undefined ? this.opts.name : null;\r\n\t}\r\n\r\n\tset name (v) {\r\n\r\n\t\tif(typeof v !== 'string') {\r\n\t\t\tthrow new TypeError(`Opts.name should be a string, but received instead ${typeof v}`);\r\n\t\t}\r\n\r\n\t\treturn v;\r\n\t}\r\n\r\n\tget container () {\r\n\t\tconst {opts: {container}} = this;\r\n\t\tconst name = this.name && `[data-name=\"${this.name}\"]`;\r\n\r\n\t\tswitch (typeof container) {\r\n\t\t\tcase 'string':\r\n\t\t\t\treturn document.querySelector(`${container + (name !== null ? name : '')}`);\r\n\t\t\tcase 'object':\r\n\t\t\t\treturn container;\r\n\t\t\tdefault:\r\n\t\t\t\treturn document.querySelector(`.tidy__carousel${name !== null ? name : ''}`);\r\n\t\t}\r\n\t}\r\n\r\n\tset container(value) {\r\n\t\tlet container;\r\n\t\tconst name = this.name && `[data-name=\"${this.name}\"]`;\r\n\r\n\t\tswitch (typeof value) {\r\n\t\t\tcase 'string':\r\n\t\t\t\t\tcontainer = document.querySelector(value + (name !== null ? name : ''));\r\n\r\n\t\t\t\t\tif(container === null) {\r\n\t\t\t\t\t\tthrow new TypeError(`Could not find any maching element for \"${value}\" with the name ${this.name}. Make sure the element is loaded before initializing.`)\r\n\t\t\t\t\t}\r\n\t\t\t\t\treturn container;\r\n\r\n\t\t\tcase 'object':\r\n\t\t\t\tif(value === null) {\r\n\t\t\t\t\tthrow new TypeError(`Please make sure the container element is loaded before initialization.`);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif(!value instanceof HTMLElement) {\r\n\t\t\t\t\tthrow new TypeError(`'container' should be a instance of an html element, but received instead other type of object.`);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif(!value.children.length > 2) {\r\n\t\t\t\t\tthrow new Error(`The container should have at least two children elements but it has instead ${value.length}`);\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn value;\r\n\r\n\t\t\tdefault:\r\n\r\n\t\t\t\tthrow new TypeError(`'\"container\" should be a string (pseudo selector) or boolean, received instead ${typeof value}'`);\r\n\r\n\t\t}\r\n\t}\r\n\r\n\tget slides () {\r\n\r\n\t\tif(!this.opts.slides) {\r\n\t\t\tif(!this.container.children.length) {\r\n\t\t\t\tthrow new Error(\"Can't find any slides\");\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn this.opts.slides ? this.opts.slides : null;\r\n\t}\r\n\r\n\tset slides(v) {\r\n\t\tif(!Array.isArray(v)) {\r\n\t\t\tthrow new TypeError(`The slides it should be an array. Received instead ${typeof v}`);\r\n\t\t}\r\n\r\n\t\treturn v;\r\n\t}\r\n\r\n\tget controllers () {\r\n\t\tconst {opts:{controllers}} = this;\r\n\t\tlet nodes;\r\n\t\tlet\tname = this.name && `[data-for=\"${this.name}\"]`;\r\n\t\tswitch (typeof controllers) {\r\n\t\t\tcase 'boolean':\r\n\t\t\t\tnodes = document.querySelectorAll(`[data-carousel-controller]${name !== null ? name : ''}`);\r\n\r\n\t\t\t\treturn controllers ? nodes : false;\r\n\r\n\t\t\tcase 'string':\r\n\t\t\t\tnodes = document.querySelectorAll(`${controllers + (name !== null ? name : '')}`);\r\n\t\t\t\treturn nodes;\r\n\r\n\t\t\tcase 'object':\r\n\r\n\t\t\t\tif(controllers instanceof HTMLCollection) {\r\n\t\t\t\t\treturn Array.from(controllers);\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\treturn controllers;\r\n\t\t\t\t}\r\n\t\t\tcase \"undefined\":\r\n\t\t\t\tnodes = document.querySelectorAll(`[data-carousel-controller]${name !== null ? name : ''}`);\r\n\t\t\t\tnodes = nodes !== null ? Array.from(nodes) : false\r\n\t\t\t\treturn nodes;\r\n\r\n\t\t\tdefault:\r\n\t\t\t\tthrow new TypeError(`controllers can only have the following types: string, array/Nodelist`);\r\n\t\t}\r\n\t}\r\n\r\n\tset controllers(value) {\r\n\t\tconst {opts: {controllers}} = this;\r\n\t\tlet nodes;\r\n\t\tlet\tname = this.name && `[data-for=\"${this.name}\"]`;\r\n\r\n\t\tswitch (typeof value) {\r\n\t\t\tcase 'boolean':\r\n\t\t\t\tnodes = document.querySelectorAll(`[carousel-controller]${name !== null ? name : ''}`);\r\n\r\n\t\t\t\tif(value && !nodes.length) {\r\n\t\t\t\t\tthrow new TypeError(`Could not find any element containing the attribute of carousel-controller. Bind this attribute [carousel-controller] to an element specify the value lef/right.`)\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn value && nodes ? nodes : false;\r\n\r\n\t\t\tcase 'string':\r\n\t\t\t\tnodes = document.querySelectorAll(`${controllers + (name !== null ? name : '')}`);\r\n\t\t\t\tif(!nodes.length) {\r\n\t\t\t\t\tthrow new TypeError(`Could not find any element containing the attribute of carousel-controller. Bind this attribute [carousel-controller] to an element specify the value lef/right.`)\r\n\t\t\t\t}\r\n\r\n\t\t\t\telse {\r\n\t\t\t\t\tnodes.forEach(n => {\r\n\t\t\t\t\t\tif(!n.hasAttribute('carousel-controller')) {\r\n\t\t\t\t\t\t\tthrow new TypeError(`The controllers selected doesn't have the attribute 'carousel-controller'. Set this attribute to a string left/right`)\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tif(n.hasAttribute('carousel-controller')) {\r\n\t\t\t\t\t\t\tif(n.attributes['carousel-controller'].value === '') {\r\n\t\t\t\t\t\t\t\tthrow new TypeError(`The controllers selected doesn't have the attribute 'carousel-controller'. Set this attribute to a string left/right`)\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t})\r\n\t\t\t\t\treturn nodes;\r\n\t\t\t\t}\r\n\r\n\t\t\tcase 'object':\r\n\t\t\t\tif(value instanceof NodeList || Array.isArray(value)) {\r\n\t\t\t\t\treturn value;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif(value instanceof HTMLCollection) {\r\n\t\t\t\t\treturn Array.from(value);\r\n\t\t\t\t}\r\n\t\t\t\telse {\r\n\t\t\t\t\tthrow new TypeError(`controllers can only have the following types: string, array/Nodelist`);\r\n\t\t\t\t}\r\n\r\n\t\t\tdefault:\r\n\t\t\t\tthrow new TypeError(`controllers can only have the following types: string, array/Nodelist`);\r\n\t\t}\r\n\t}\r\n\r\n\tget easing() {\r\n\t\tif(this.opts.easing) {\r\n\t\t\treturn this.opts.easing;\r\n\t\t}\r\n\r\n\t\treturn 'ease';\r\n\t}\r\n\r\n\tset easing(v) {\r\n\r\n\t\tif(typeof v !== 'string') {\r\n\t\t\tthrow new TypeError(`'easing' should be a string, received instead ${typeof v}`);\r\n\t\t}\r\n\r\n\t\treturn v;\r\n\t}\r\n\r\n\tget duration () {\r\n\t\tif(this.opts.duration) {\r\n\t\t\treturn this.opts.duration;\r\n\t\t}\r\n\r\n\t\treturn 500;\r\n\t}\r\n\r\n\tset duration(value) {\r\n\r\n\t\tif(typeof value !== 'number') {\r\n\r\n\t\t\tthrow new Error(`Type error: \"duration\" should be a number instead of ${typeof value}`);\r\n\t\t}\r\n\t\telse if(value < 0 ) {\r\n\r\n\t\t\tthrow new Error(`Value error: \"duration\" should be a number > 0, but received instead ${value}`);\r\n\t\t}\r\n\r\n\t\treturn value;\r\n\t}\r\n\r\n\tget delay () {\r\n\t\tif(this.opts.delay) {\r\n\t\t\treturn this.opts.delay;\r\n\t\t}\r\n\r\n\t\treturn 500;\r\n\t}\r\n\r\n\tset delay(value) {\r\n\r\n\t\tif(typeof value !== 'number') {\r\n\r\n\t\t\tthrow new Error(`Type error: \"duration\" should be a number instead of ${typeof value}`);\r\n\t\t}\r\n\r\n\t\telse if(value < 0) {\r\n\r\n\t\t\tthrow new Error(`Value error: \"duration\" should be a number > 0, but received instead ${value}`);\r\n\t\t}\r\n\r\n\t\treturn value;\r\n\t}\r\n\r\n\tget infinite() {\r\n\r\n\t\tif(this.opts.infinite === undefined) {\r\n\t\t\treturn true;\r\n\t\t}\r\n\r\n\t\treturn this.opts.infinite;\r\n\t}\r\n\r\n\tset infinite(v) {\r\n\r\n\t\tif(typeof v !== 'boolean') {\r\n\t\t\tthrow new TypeError(`'infinite' option should be a boolean instead of ${typeof v}`);\r\n\t\t}\r\n\r\n\t\treturn v;\r\n\t}\r\n\r\n\tget auto () {\r\n\t\tif(this.opts.auto !== undefined) {\r\n\t\t\treturn this.opts.auto;\r\n\t\t}\r\n\r\n\t\treturn true;\r\n\t}\r\n\tset auto(value) {\r\n\r\n\t\tif(typeof value === 'object') {\r\n\r\n\t\t\tif(value.direction) {\r\n\t\t\t\tthis.autoDirection = value.direction;\r\n\t\t\t\treturn value;\r\n\t\t\t}\r\n\r\n\t\t\treturn value;\r\n\t\t}\r\n\t\telse if (typeof value === 'boolean') {\r\n\r\n\t\t\tif(value === true) {\r\n\t\t\t\tthis.autoDirection = 'left';\r\n\r\n\t\t\t\treturn {\r\n\t\t\t\t\tdirection: 'left'\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.autoDirection = null;\r\n\t\t\t\treturn {direction: null}\r\n\t\t\t}\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthrow new Error(`Type error: \"auto\" should be a boolean or an object containing direction instead of ${typeof value}`);\r\n\t\t}\r\n\r\n\t}\r\n\r\n\tget autoDirection() {\r\n\r\n\t\tif(typeof this.auto === 'object') {\r\n\t\t\treturn this.auto.direction;\r\n\t\t}\r\n\r\n\t\tif(typeof this.auto === 'boolean') {\r\n\r\n\t\t\tif(this.auto === true) {\r\n\t\t\t\treturn 'left';\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\treturn null;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tset autoDirection(value) {\r\n\r\n\t\tif(value === null) { return false}\r\n\r\n\t\tif(typeof value !== 'string') {\r\n\t\t\tthrow new TypeError(`Direction should be a string, received ${typeof value}`)\r\n\t\t}\r\n\r\n\t\tif(!(value.toLowerCase().includes('left') || value.toLowerCase().includes('right'))) {\r\n\t\t\tthrow new Error(`Value error: \"direction\" can be 'left' or 'right', received instead: ${value}`);\r\n\t\t}\r\n\r\n\r\n\t}\r\n\r\n\tget startAt() {\r\n\t\tif(this.opts.startAt !== undefined) {\r\n\t\t\treturn this.opts.startAt;\r\n\t\t}\r\n\t\treturn Array.isArray(this.slides) ? this.slides.length -1 : this.container.children.length -1 !== -1 ? this.container.children.length -1 : 0;\r\n\t}\r\n\r\n\tset startAt(v) {\r\n\r\n\t\tif(typeof v !== 'number') {\r\n\t\t\tthrow new TypeError(`'startAt' should be a number, received instead. ${typeof v}`);\r\n\t\t}\r\n\r\n\t\tif(Array.isArray(this.slides) && this.slides.length) {\r\n\r\n\t\t\tif(v >= this.slides.length) {\r\n\t\t\t\tthrow new Error(`'startAt' should be a number <= the total slides counting from 0.`);\r\n\t\t\t}\r\n\t\t}\r\n\t\telse if(v >= this.container.children.length) {\r\n\r\n\t\t\tthrow new Error(`'startAt' should be a number <= the total slides counting from 0.`);\r\n\t\t}\r\n\r\n\t\treturn v;\r\n\t}\r\n\r\n\tget pager() {\r\n\t\t// If the opts.pager is a boolean and is true, try document.querySelector(ul[carousel-pager])\r\n\t\tconst {opts} = this;\r\n\t\tlet\tname = this.name && `[data-for=\"${this.name}\"]`;\r\n\r\n\t\tswitch (typeof opts.pager) {\r\n\t\t\tcase 'boolean':\r\n\t\t\t\tconst pager = document.querySelector(`ul[data-carousel-pager]${name !== null ? name : ''}`);\r\n\t\t\t\treturn opts.pager && pager ? pager : false;\r\n\r\n\t\t\tcase 'object':\r\n\t\t\t\tlet container = opts.pager.container;\r\n\r\n\t\t\t\tif(container instanceof HTMLElement) {\r\n\t\t\t\t\treturn container ? container : false;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif(typeof container === 'object') {\r\n\t\t\t\t\tthrow new TypeError(`Container should be a html element, but received instead an object`);\r\n\t\t\t\t}\r\n\t\t\t\telse if(typeof container === 'string') {\r\n\t\t\t\t\tcontainer = document.querySelector(container + (name !== null ? name : ''));\r\n\r\n\t\t\t\t\tif(container !== null) {return container;}\r\n\t\t\t\t\telse {throw new TypeError(`${container} wasn't found in the document. Make sure the element is available in the DOM before you give me the selector.`)}\r\n\t\t\t\t}\r\n\r\n\t\t\tdefault:\r\n\t\t\t\treturn opts.pager;\r\n\t\t}\r\n\t}\r\n\r\n\tset pager(v) {\r\n\t\tconst {opts} = this;\r\n\t\tlet\tname = this.name && `[data-for=\"${this.name}\"]`;\r\n\t\tswitch (typeof v) {\r\n\t\t\tcase 'boolean':\r\n\r\n\t\t\t\tconst pager = document.querySelector(`ul[data-carousel-pager]${name !== null ? name : ''}`);\r\n\t\t\t\treturn opts.pager && pager ? pager : false;\r\n\r\n\t\t\t\treturn false;\r\n\t\t\tcase 'object':\r\n\t\t\t\tif(v.container) {\r\n\t\t\t\t\tconst container = v.container;\r\n\r\n\t\t\t\t\treturn container instanceof NodeList && container.length > 0 || container instanceof HTMLElement ? container : false;\r\n\t\t\t\t}\r\n\t\t\t\tthrow new TypeError(`Pager should be an object containing the container or a string, received instead ${typeof v}.`);\r\n\r\n\t\t\tdefault:\r\n\r\n\t\t\t\tthrow new TypeError(`Pager should be an object containing the container or a string, received instead ${typeof v}.`);\r\n\r\n\t\t}\r\n\r\n\t}\r\n\r\n\tget pauseOnMouseEnter () {\r\n\t\tif(typeof this.opts.pauseOnMouseEnter === 'boolean') {\r\n\t\t\treturn this.opts.pauseOnMouseEnter;\r\n\t\t}\r\n\r\n\t\treturn true;\r\n\t}\r\n\r\n\tset pauseOnMouseEnter(value) {\r\n\r\n\t\tif(typeof value !== 'boolean') {\r\n\t\t\tthrow new Error(\"Value error: warns can only be false or true\");\r\n\t\t}\r\n\t\treturn value;\r\n\t}\r\n\r\n\tget swipe() {\r\n\t\tif(this.opts.swipe) {\r\n\t\t\t return this.opts.swipe;\r\n\t\t}\r\n\r\n\t\treturn true;\r\n\t}\r\n\r\n\tset swipe(v) {\r\n\r\n\t\tif(typeof v !== 'boolean') {\r\n\t\t\tthrow new TypeError(`'swipe' should be a boolean, received instead ${typeof v}`);\r\n\t\t}\r\n\t\treturn v;\r\n\t}\r\n\r\n\tget drag() {\r\n\t\tif(this.opts.drag) {\r\n\t\t\treturn this.opts.drag;\r\n\t\t}\r\n\r\n\t\treturn true;\r\n\t}\r\n\r\n\tset drag(v) {\r\n\t\tif(typeof v !== 'boolean') {\r\n\t\t\tthrow new TypeError(`'drag' should be a boolean instead of ${typeof v}`);\r\n\t\t}\r\n\r\n\t\treturn v;\r\n\t}\r\n\r\n}\r\n\r\n/* harmony default export */ var config = (Config);\r\n\n// EXTERNAL MODULE: ./node_modules/web-animations-js/web-animations.min.js\nvar web_animations_min = __webpack_require__(\"./node_modules/web-animations-js/web-animations.min.js\");\n\n// CONCATENATED MODULE: ./dev/scripts/methods.js\n// @animate: {\r\n// \t- Write a wrap of the method animate provided by the browser. That will loop over an array of\r\n// \telements.\r\n// \t- The second param should be the callback for each iteration,\r\n// \t- @calback should be a function that needs to know when the animation finishes or the animation starts.\r\n// \t-\r\n// }\r\n\r\n\r\nconst animate = (elems, keyframes, opts) => {\r\n\t// Validate:\r\n\t// Check if elems is an instance of a Set obj\r\n\t// Check if keyframes is an array\r\n\t// Check if opts is an object\r\n\t// ====================================================\r\n\r\n\tlet promise = new Promise((resolve, reject) => {\r\n\t\tfor (let key in elems) {\r\n\r\n\t\t\tif(elems[key].animate !== undefined) {\r\n\t\t\t\tconst animation = elems[key].animate([\r\n\t\t\t\t\tkeyframes[key].from,\r\n\t\t\t\t\tkeyframes[key].to\r\n\t\t\t\t], opts)\r\n\r\n\t\t\t\tanimation.onfinish = (e) => {\r\n\t\t\t\t\tresolve(e)\r\n\t\t\t\t}\r\n\r\n\t\t\t\tanimation.onCancel = (e) => {\r\n\t\t\t\t\treject(e);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\telse {\r\n\t\t\t\tsetTimeout(() => {\r\n\t\t\t\t\tresolve()\r\n\t\t\t\t}, opts.duration)\r\n\t\t\t}\r\n\t\t}\r\n\r\n\r\n\t\t\t// Reject is the possibile way of validating this code.\r\n\r\n\t})\r\n\r\n\treturn promise;\r\n\r\n\t// #Return a promise\r\n}\r\n\n// CONCATENATED MODULE: ./dev/scripts/actions.js\n\r\n\r\n\r\nclass actions_Actions extends config {\r\n\tconstructor(props) {\r\n\t\tsuper(props)\r\n\t\tthis.pages = [];\r\n\t}\r\n\r\n\tsetActivePage() {\r\n\t\tthis.pages[this.current_slide].classList.remove('page-active');\r\n\t\tthis.pages[this.next_slide].classList.add('page-active');\r\n\t}\r\n\r\n\tdoAnimation(dir, current_from, next_from, not_complete) {\r\n\t\t// set the active pager.\r\n\t\t// ======================\r\n\t\tconst total_slides = this.container.children.length - 1;\r\n\t\tlet direction = dir ? dir : this.direction;\r\n\t\tlet next_slide = null;\r\n\t\tif(not_complete) {\r\n\r\n\t\t\tif(this.direction === 'left') {\r\n\t\t\t\tnext_slide = this.current_slide - 1 === -1 ? total_slides : this.current_slide -1;\r\n\t\t\t}\r\n\r\n\t\t\tif(this.direction === 'right') {\r\n\t\t\t\tnext_slide = this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\r\n\t\t\t}\r\n\r\n\t\t}\r\n\t\tlet slides = {\r\n\t\t\tcurrent_slide: this.container.children[this.current_slide],\r\n\t\t\tnext_slide: this.container.children[next_slide !== null ? next_slide : this.next_slide]\r\n\t\t};\r\n\t\tconst opts = {\r\n\t\t\teasing: this.easing,\r\n\t\t\tduration: not_complete ? this.duration / 2 : this.duration\r\n\t\t}\r\n\r\n\t\tlet not_complete_ = this.direction === 'left' ? 100 - next_from : current_from - 100;\r\n\t\tconst keyframes = {\r\n\t\t\tcurrent_slide: {\r\n\t\t\t\tfrom:{\r\n\t\t\t\t\ttransform: `translateX(${current_from ? current_from : 0}%)`,\r\n\t\t\t\t\tzIndex: '2'\r\n\t\t\t\t},\r\n\t\t\t\tto: {\r\n\t\t\t\t\ttransform: `translateX(${not_complete ? 0 : direction === 'left' ? -100 : 100}%)`,\r\n\t\t\t\t\tzIndex: '2'\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tnext_slide: {\r\n\t\t\t\tfrom: {\r\n\t\t\t\t\ttransform: `translateX(${next_from && direction === 'left' ? 100 - next_from : next_from && direction === 'right' ? current_from - 100 : direction === 'left' && !next_from ? 100 : -100}%)`, //direction === 'left' ? 'translateX(100%)' : 'translateX(-100%)'\r\n\t\t\t\t\tzIndex: `1`\r\n\t\t\t\t},\r\n\t\t\t\tto: {\r\n\t\t\t\t\ttransform: `translateX(${not_complete && direction === 'right' ? -100 : not_complete && direction === 'left' ? 100 : 0}%)`,\r\n\t\t\t\t\tzIndex: '1'\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t};\r\n\t\tif(!not_complete) {\r\n\t\t\tthis.swipe_stopped = true;\r\n\t\t\tthis.container.children[this.current_slide].classList.remove('current-slide');\r\n\t\t\tthis.container.children[this.next_slide].classList.add(\"current-slide\");\r\n\t\t}\r\n\t\tlet promise = animate(slides, keyframes, opts)\r\n\r\n\t\treturn promise;\r\n\t}\r\n\r\n\tswipeAnimation(current_pos, next_pos) {\r\n\t\t// if(this.swipe_stopped) {\r\n\t\t// \treturn false;\r\n\t\t// }\r\n\r\n\t\t// let next_slide = this.next_slide;\r\n\t\tlet nr = 100 + next_pos;\r\n\t\tlet left = 100 - next_pos;\r\n\t\tlet right = -Math.abs(nr);\r\n\t\tthis.container.children[this.current_slide].setAttribute('style', `transform: translateX(${current_pos}%); z-index: 2;`);\r\n\t\tthis.container.children[this.next_slide].setAttribute('style', `transform: translateX(${this.direction === 'left' ? left : right}%); z-index: 1;`);\r\n\r\n\t}\r\n\r\n\tgeneratePager () {\r\n\t\tconst container = this.pager instanceof NodeList ? this.pager[0] : this.pager;\r\n\t\tconst total_slides = this.container.children.length -1;\r\n\t\t\r\n\t\tlet i,elements;\r\n\t\tfor(i = 0; i <= total_slides; i ++) {\r\n\t\t\tcontainer\r\n\t\t\t.insertAdjacentHTML('beforeend', `
  • `)\r\n\t\t}\r\n\r\n\t\telements = container instanceof NodeList ? container[0].childNodes : container.childNodes;\r\n\t\tthis.pages = Array.from(elements);\r\n\t\tif(this.pages.length > total_slides + 1) {\r\n\t\t\tthis.pages.shift();\r\n\t\t}\r\n\r\n\t\tthis.pages[this.startAt].classList.add('page-active');\r\n\t}\r\n\r\n\tgenerateSlides() {\r\n\t\tconst container = this.container;\r\n\t\tlet item;\r\n\r\n\t\tconst forImgSrc = (i) => {\r\n\t\t\treturn `\"${this.slides[i].alt}\"/`\r\n\t\t}\r\n\r\n\t\tconst forNode = (i) => {\r\n\t\t\treturn `${this.slides[i].html}`;\r\n\t\t}\r\n\r\n\t\tfor(let i = 0; i <= this.slides.length - 1; i ++) {\r\n\t\t\tcontainer\r\n\t\t\t.insertAdjacentHTML('beforeend', `
    ${this.slides[i].html ? forNode(i) : forImgSrc(i)}
    `);\r\n\r\n\t\t\tif(i === this.startAt) {\r\n\t\t\t\tcontainer.children[i].classList.add('current-slide');\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tsetActiveSlide() {\r\n\t\tif(this.slides === null) {\r\n\t\t\tthis.container.children[this.startAt].classList.add('current-slide');\r\n\t\t\tif(this.opts.beforeAnimation) {\r\n\t\t\t\tthis.beforeAnimationStarts();\r\n\t\t\t}\r\n\r\n\t\t\tif(this.opts.afterAnimation) {\r\n\t\t\t\tthis.afterAnimationEnds();\r\n\t\t\t}\r\n\t\t}\r\n\t\telse {\r\n\r\n\t\t\tif(this.slides[this.startAt].beforeAnimation) {\r\n\t\t\t\tthis.beforeAnimationStarts();\r\n\t\t\t}\r\n\r\n\t\t\tif(this.slides[this.startAt].afterAnimation) {\r\n\t\t\t\tthis.afterAnimationEnds();\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n/* harmony default export */ var actions = (actions_Actions);\r\n\n// CONCATENATED MODULE: ./dev/scripts/controllers.js\n\r\n\r\n// TODO:\r\n// - Handle another case in the onArrowClick wich should determine when\r\n//\t the current and next should swap.\r\n// \t This should solve the case where the numbers are not increasing when the\r\n// \t\tauto is true\r\n//\r\n// - Add an extra callback to the mecanism wich is should be executed only if\r\n// \t\tthe reset option is true.\r\n// - Make a hook to check if the slides are generated by actions.generateSlides()\r\n// \t\tif so, change selectors, could be something like parent.children(n).\r\n// - Trigger the onSwipeEnd function when the mouseleave event occurs.\r\n// - Do a check how a generated controller would look like.\r\n// - Write tests. Make sure every method is clean, and the tree is shaked.\r\n// - Get ready the controllers to be depolyable, enjoy.\r\n// - Make a clear distinction between pause and mouseenter, swipe/drag can't initialize if onMouseEnter pause is set to true. Make a clear reference when the pause should be set to true.\r\n// ==================================================================\r\nclass controllers_Controllers extends actions {\r\n\tconstructor(props) {\r\n\t\tsuper(props);\r\n\t\tthis.pause = false;\r\n\t\tthis.current_slide = this.startAt;\r\n\t\tthis.next_slide = this.startAt;\r\n\t\tthis.delay_timer = 0;\r\n\t\tthis.duration_timer = 0;\r\n\t\tthis.direction = null;\r\n\t\tthis.dragable = false;\r\n\t\tthis.start_x = 0;\r\n\t\tthis.end_x = 0;\r\n\t\tthis.current_continue_from = 0;\r\n\t\tthis.next_continue_from = 0;\r\n\t\tthis.swipe_stopped = false;\r\n\t\tthis.mouseenter = false;\r\n\r\n\t\tif(Array.isArray(this.slides)) {\r\n\t\t\tthis.generateSlides();\r\n\t\t}\r\n\r\n\t\tif(this.pager) {\r\n\t\t\tthis.generatePager();\r\n\t\t\tthis.pages.forEach(btn => {\r\n\t\t\t\tbtn.addEventListener('click', this.onPagerClick.bind(this));\r\n\t\t\t})\r\n\t\t}\r\n\t\tthis.setActiveSlide();\r\n\r\n\t\tif(this.auto) {\r\n\t\t\tlet trigger = this.delayTimer();\r\n\t\t}\r\n\r\n\t\tif(this.controllers) {\r\n\t\t\tthis.controllers.forEach(btn => {\r\n\t\t\t\tbtn.addEventListener('click', this.shouldPause.bind(this));\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t\tthis.container.addEventListener('mouseenter',this.onMouseEnter.bind(this));\r\n\t\tthis.container.addEventListener('mouseleave',this.onMouseLeave.bind(this));\r\n\r\n\t\tif(this.drag) {\r\n\t\t\tthis.container.addEventListener('mousedown', this.onSwipe.bind(this));\r\n\t\t\tthis.container.addEventListener('mousemove', this.onSwipeStart.bind(this), {passive: true});\r\n\t\t\tthis.container.addEventListener('mouseup', this.onSwipeEnd.bind(this));\r\n\t\t}\r\n\r\n\t\tif(this.swipe) {\r\n\t\t\tthis.container.addEventListener('touchstart', this.onSwipe.bind(this), {passive: true});\r\n\t\t\tthis.container.addEventListener('touchmove', this.onSwipeStart.bind(this), {passive: true});\r\n\t\t\tthis.container.addEventListener('touchend', this.onSwipeEnd.bind(this));\r\n\t\t}\r\n\r\n\t}\r\n\r\n\tonSwipe(e) {\r\n\t\tthis.mouseenter = true;\r\n\r\n\t\tclearTimeout(this.delay_timer);\r\n\t\tclearTimeout(this.duration_timer);\r\n\r\n\t\tif(this.pause || this.dragable) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\t// if(shouldStop) {\r\n\t\t// \treturn false;\r\n\t\t// }\r\n\r\n\t\tif(this.start_x - this.end_x !== 0 && this.swipe_stopped) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\tthis.start_x = e.clientX || e.changedTouches[0].clientX;\r\n\t\tthis.dragable = true;\r\n\t\tthis.current_slide = this.current_slide === null ? 0 : this.next_slide !== null ? this.next_slide : this.current_slide;\r\n\r\n\t}\r\n\r\n\tonSwipeStart(e) {\r\n\t\tconst total_slides = this.container.children.length -1;\r\n\t\tthis.mouseenter = true;\r\n\t\t// if(e.type === 'mousemove' && !e.target.classList.contains('tidyCarousel-slide')) {\r\n\t\t// \treturn false\r\n\t\t// }\r\n\t\tif(this.swipe_stopped) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\t// Get to know in wich direction is swiping\r\n\t\t// get to know what's the total pixels of the swipe.\r\n\t\tlet total = e.target.clientWidth || e.view.clientWidth;\r\n\t\tlet half = total / 2;\r\n\t\tthis.shouldInfinite(false)\r\n\t\tif(this.dragable) {\r\n\t\t\tthis.end_x = e.pageX || e.changedTouches[0].clientX;\r\n\t\t\tthis.direction = this.start_x - this.end_x > 0 ? 'left' : 'right';\r\n\t\t\tconst shouldStop = this.shouldInfinite(false);\r\n\r\n\r\n\t\t\tif(!shouldStop) {\r\n\r\n\t\t\t\tthis.current_continue_from = (this.end_x - this.start_x) * 100 / total;\r\n\t\t\t\tthis.next_continue_from = (this.start_x - this.end_x) * 100 / total;\r\n\t\t\t\tif(this.direction === 'left') {\r\n\t\t\t\t\tthis.next_slide = this.current_slide -1 < 0 ? total_slides : this.current_slide -1;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif(this.direction === 'right') {\r\n\t\t\t\t\tthis.next_slide = this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// this.end_x = 0;\r\n\t\t\t\t// this.start_x = 0;\r\n\t\t\t\t// // distance = 0;\r\n\t\t\t// this.current_continue_from = 0;\r\n\t\t\t// this.next_continue_from = 0;\r\n\t\t\t\tthis.swipeAnimation(this.current_continue_from, this.next_continue_from);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tonSwipeEnd(e) {\r\n\r\n\t\tconst total_slides = this.container.children.length -1;\r\n\t\tthis.dragable = false;\r\n\t\tthis.mouseenter = false;\r\n\r\n\t\tif(this.current_slide === this.next_slide) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\t\tif(this.swipe_stopped || this.end_x === 0) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\t// this.pause = false;\r\n\t\telse if(((this.start_x - this.end_x > 100) || (this.start_x - this.end_x < -100)) && !this.swipe_stopped) {\r\n\r\n\t\t\tthis.beforeAnimationStarts();\r\n\t\t\tthis.doAnimation(null, this.current_continue_from, this.next_continue_from, false)\r\n\r\n\t\t\t.then(() => {\r\n\t\t\t\tthis.afterAnimationEnds();\r\n\t\t\t\tthis.end_x = 0;\r\n\t\t\t\tthis.start_x = 0;\r\n\t\t\t\tif(this.direction === 'left') {\r\n\t\t\t\t\tthis.current_slide = this.current_slide -1 === -1 ? total_slides : this.current_slide -1;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif(this.direction === 'right') {\r\n\t\t\t\t\tthis.current_slide = this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tfor(let item of this.container.children) {\r\n\r\n\t\t\t\t\tif(item.hasAttribute('style')) {\r\n\t\t\t\t\t\titem.removeAttribute('style');\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t\t}\r\n\t\telse {\r\n\t\t\t\tthis.next_slide = this.current_slide;\r\n\t\t\t\tthis.end_x = 0;\r\n\t\t\t\tthis.start_x = 0;\r\n\t\t\tfor(let item of this.container.children) {\r\n\t\t\t\tif(item.hasAttribute('style')) {\r\n\t\t\t\t\tthis.doAnimation(null, this.current_continue_from, this.next_continue_from, true)\r\n\t\t\t\t\t.then(() => {\r\n\t\t\t\t\t\tthis.end_x = 0;\r\n\t\t\t\t\t\tthis.start_x = 0;\r\n\t\t\t\t\t\titem.removeAttribute('style');\r\n\t\t\t\t\t\tthis.pause = false;\r\n\t\t\t\t\t\tthis.shouldRestart();\r\n\t\t\t\t\t})\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t\tthis.mouseenter = false;\r\n\t}\r\n\r\n\tbeforeAnimationStarts() {\r\n\t\tthis.pause = true;\r\n\t\tif(this.pager) {\r\n\t\t\tthis.setActivePage();\r\n\t\t}\r\n\t\tif(Array.isArray(this.slides)) {\r\n\t\t\tif(this.slides[this.next_slide].beforeAnimation) {\r\n\t\t\t\tthis.slides[this.next_slide].beforeAnimation(this.container.children[this.next_slide], this.next_slide);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif(this.opts.beforeAnimation) {\r\n\t\t\tthis.opts.beforeAnimation(this.container.children[this.next_slide], this.next_slide)\r\n\t\t}\r\n\r\n\r\n\t}\r\n\r\n\tshouldInfinite(auto, arrows) {\r\n\r\n\t\tif(!this.infinite) {\r\n\r\n\t\t\tif(auto) {\r\n\t\t\t\tif(this.autoDirection === 'right') {\r\n\t\t\t\t\t\tconst shouldStop =\tthis.next_slide === this.container.children.length -1 ? true : false;\r\n\t\t\t\t\t\treturn shouldStop;\r\n\t\t\t\t}\r\n\t\t\t\telse if(this.autoDirection === 'left') {\r\n\t\t\t\t\t\tconst shouldStop = this.next_slide === 0 ? true : false;\r\n\t\t\t\t\t\treturn shouldStop;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\telse if(arrows) {\r\n\t\t\t\tif(this.direction === 'right') {\r\n\t\t\t\t\t\tconst shouldStop =\tthis.next_slide === this.container.children.length -1 ? true : false;\r\n\t\t\t\t\t\treturn shouldStop;\r\n\t\t\t\t}\r\n\t\t\t\telse if(this.direction === 'left') {\r\n\t\t\t\t\t\tconst shouldStop = this.next_slide === 0 ? true : false;\r\n\t\t\t\t\t\treturn shouldStop;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\telse if(!auto && !arrows) {\r\n\t\t\t\tif(this.direction === 'right') {\r\n\t\t\t\t\t\tconst shouldStop =\tthis.current_slide === this.container.children.length -1 ? true : false;\r\n\t\t\t\t\t\treturn shouldStop;\r\n\t\t\t\t}\r\n\t\t\t\telse if(this.direction === 'left') {\r\n\t\t\t\t\t\tconst shouldStop = this.current_slide === 0 ? true : false;\r\n\t\t\t\t\t\treturn shouldStop;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\t\t// if(!this.infinite) {\r\n\t\t// \tlet shouldStop;\r\n\t\t// \tif(this.autoDirection === 'right') {\r\n\t\t// \t\tshouldStop = this.current_slide === this.container.children.length - 1 ? true : false;\r\n\t\t//\r\n\t\t// \t\treturn shouldStop;\r\n\t\t// \t}\r\n\t\t// \tif(this.autoDirection === 'left') {\r\n\t\t// \t\tshouldStop = this.current_slide === 0 ? true : false;\r\n\t\t//\r\n\t\t// \t\treturn shouldStop;\r\n\t\t// \t}\r\n\t\t// }\r\n\t}\r\n\r\n\tshouldRestart() {\r\n\t\tif(this.mouseenter) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\t\tif(this.auto) {\r\n\r\n\t\t\tthis.delayTimer();\r\n\t\t}\r\n\t}\r\n\t// @param timer: boolean\r\n\tafterAnimationEnds(timer) {\r\n\t\tthis.swipe_stopped = false;\r\n\t\tthis.pause = true;\r\n\r\n\t\tif(this.auto) {\r\n\r\n\t\t\t\tif(Array.isArray(this.slides)) {\r\n\r\n\t\t\t\t\t\tif(typeof this.slides[this.next_slide].afterAnimation === 'function') {\r\n\t\t\t\t\t\t\tthis.slides[this.next_slide].afterAnimation(this.container.children[this.next_slide], this.next_slide)\r\n\r\n\t\t\t\t\t\t\t.then(() => {\r\n\t\t\t\t\t\t\t\tthis.pause = false;\r\n\r\n\t\t\t\t\t\t\t\t\tthis.shouldRestart();\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\telse {\r\n\t\t\t\t\t\t\tthis.pause = false;\r\n\t\t\t\t\t\t\t\tthis.shouldRestart();\r\n\t\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\telse {\r\n\t\t\t\t\tif(this.opts.afterAnimation) {\r\n\r\n\t\t\t\t\t\t\tthis.opts.afterAnimation(this.container.children[this.next_slide], this.next_slide)\r\n\r\n\t\t\t\t\t\t\t.then((data) => {\r\n\t\t\t\t\t\t\t\tthis.pause = false;\r\n\t\t\t\t\t\t\t\tthis.shouldRestart();\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t}\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\t\tthis.pause = false;\r\n\t\t\t\t\t\t\tthis.shouldRestart();\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t}\r\n\t\telse {\r\n\t\t\tthis.pause = false;\r\n\t\t}\r\n\r\n\t}\r\n\r\n\tonMouseEnter() {\r\n\t\tif(this.pauseOnMouseEnter) {\r\n\t\t\tif(this.auto) {\r\n\t\t\t\tclearTimeout(this.delay_timer);\r\n\t\t\t\tthis.mouseenter = true;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn false;\r\n\t}\r\n\r\n\tonMouseLeave(e) {\r\n\t\tthis.onSwipeEnd(e);\r\n\t\tlet time;\r\n\t\t// Clearing the delay_timer will restart the delay.\r\n\t\t// ================================================\r\n\r\n\t\tif(this.auto) {\r\n\t\t\tclearTimeout(this.duration_timer);\r\n\t\t\tclearTimeout(this.delay_timer);\r\n\t\t\tthis.mouseenter = false;\r\n\r\n\t\t\t// const shouldStop = this.shouldInfinite(true);\r\n\t\t\tthis.delayTimer();\r\n\t\t}\r\n\t}\r\n\r\n\tdelayTimer(e) {\r\n\t\tconst shouldStop = this.shouldInfinite(true);\r\n\t\tif(shouldStop) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\tif(!this.pause) {\r\n\t\t\tthis.delay_timer = setTimeout(() => {\r\n\r\n\t\t\t\tif(this.autoDirection && !this.mouseenter) {\r\n\t\t\t\t\tthis.durationTimer();\r\n\t\t\t\t}\r\n\t\t\t},this.delay);\r\n\t\t}\r\n\t}\r\n\r\n\tdurationTimer() {\r\n\t\tconst shouldReset = this.shouldReset(this.autoDirection);\r\n\t\tif(this.mouseenter) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\tif(!this.pause) {\r\n\t\t\tthis.duration_timer = setTimeout(() => {\r\n\t\t\t\tthis.delayTimer();\r\n\t\t\t\tclearTimeout(this.delay_timer);\r\n\r\n\t\t\t\tif(!this.infinite && shouldReset) {\r\n\t\t\t\t\treturn clearTimeout(this.delay_timer);\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif(!this.mouseenter) {\r\n\t\t\t\t\tthis.autoControl();\r\n\t\t\t\t}\r\n\r\n\t\t\t}, this.duration)\r\n\t\t}\r\n\t}\r\n\r\n\tgetDirection(e) {\r\n\t\tconst button = e.path.filter((e) => {\r\n\t\t\tif(e.attributes) {\r\n\t\t\t\t return e.hasAttribute('data-carousel-controller');\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\treturn button[0].attributes.getNamedItem('data-carousel-controller').value;\r\n\t}\r\n\r\n\tshouldPause(e) {\r\n\t\tconst listener_name = this.getDirection(e);\r\n\t\tconst shouldReset = this.shouldReset(listener_name);\r\n\r\n\t\tif(this.pause) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\t\tif(shouldReset) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\t\tthis.onArrowClick(e);\r\n\t}\r\n\r\n\tshouldReset(dir) {\r\n\t\tlet total_slides = this.container !== null ? this.container.length - 1 : false;\r\n\r\n\t\tif(!total_slides) {return false};\r\n\r\n\t\tif(dir === 'left') {\r\n\t\t\tif(this.next_slide - 1 === -1) {\r\n\t\t\t\treturn true;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif(dir === 'right') {\r\n\t\t\tif(this.next_slide + 1 > total_slides) {\r\n\t\t\t\treturn true;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\treturn false;\r\n\t}\r\n\r\n\tonArrowClick(e) {\r\n\t\tconst listener_name = this.getDirection(e);\r\n\t\tconst total_slides = this.container.children.length -1;\r\n\r\n\t\tconst shouldSwap = this.direction === null ? false : listener_name !== this.direction ;\r\n\t\tconst shouldStop = this.shouldInfinite(false, true);\r\n\r\n\t\tif(shouldStop && !shouldSwap) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\t\tthis.mouseenter = false;\r\n\r\n\t\tif(shouldSwap && this.next_slide !== this.current_slide) {\r\n\r\n\t\t\tthis.next_slide ^= this.current_slide;\r\n\t\t\tthis.current_slide ^= this.next_slide;\r\n\t\t\tthis.next_slide ^= this.current_slide;\r\n\r\n\t\t\tif(this.next_slide === this.current_slide) {\r\n\t\t\t\tthis.next_slide = listener_name === 'left' ? this.current_slide - 1 : this.current_slide + 1;\r\n\t\t\t}\r\n\r\n\t\t\tthis.direction = listener_name;\r\n\t\t}\r\n\r\n\t\tif(shouldSwap && this.next_slide === this.current_slide) {\r\n\t\t\tif(listener_name === 'left' && this.current_slide !== null && this.next_slide !== null) {\r\n\t\t\t\tthis.next_slide = this.current_slide - 1 === -1 ? total_slides : this.current_slide - 1;\r\n\t\t\t}\r\n\r\n\t\t\tif(listener_name === 'right' && this.current_slide !== null && this.next_slide !== null) {\r\n\t\t\t\tthis.next_slide = this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\r\n\t\t\t}\r\n\t\t\tthis.direction = listener_name;\r\n\t\t}\r\n\r\n\t\tif(listener_name === 'left' && !shouldSwap) {\r\n\r\n\t\t\tif(this.current_slide && this.next_slide === null) {\r\n\t\t\t\tthis.next_slide = this.current_slide - 1 === -1 ? total_slides : this.current_slide - 1;\r\n\t\t\t}\r\n\r\n\t\t\telse if(this.next_slide === this.current_slide && this.current_slide !== null && this.next_slide !== null) {\r\n\t\t\t\tthis.next_slide = this.current_slide - 1 === -1 ? total_slides : this.current_slide - 1;\r\n\t\t\t}\r\n\r\n\t\t\telse {\r\n\t\t\t\tthis.current_slide = this.current_slide === null ? 0 : (this.current_slide - 1) === -1 ? total_slides : this.current_slide -1;\r\n\t\t\t\tthis.next_slide = this.next_slide === null ? total_slides : this.current_slide === 0 ? total_slides : this.current_slide -1;\r\n\t\t\t}\r\n\r\n\t\t\tthis.direction = listener_name;\r\n\r\n\t\t}\r\n\r\n\t\tif(listener_name === 'right' && !shouldSwap) {\r\n\t\t\tif(this.current_slide && this.next_slide === null) {\r\n\t\t\t\tthis.next_slide = this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\r\n\t\t\t}\r\n\r\n\t\t\telse if(this.next_slide === this.current_slide && this.current_slide !== null && this.next_slide !== null) {\r\n\r\n\t\t\t\tthis.next_slide = this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.current_slide = this.current_slide === null ? 0 : this.current_slide + 1 > (total_slides) ? 0 : this.current_slide + 1;\r\n\t\t\t\tthis.next_slide = this.next_slide === null ? 1 : this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\r\n\t\t\t}\r\n\r\n\t\t\tthis.direction = listener_name;\r\n\t\t}\r\n\t\tthis.beforeAnimationStarts();\r\n\t\tthis.doAnimation()\r\n\r\n\t\t.then(() => {\r\n\t\t\tthis.afterAnimationEnds();\r\n\t\t});\r\n\t}\r\n\r\n\tonPagerClick(e) {\r\n\t\te.preventDefault();\r\n\t\tlet _next_slide;\r\n\t\tlet direction;\r\n\t\tif(this.pause) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\t\tif(e.target.id) {\r\n\r\n\t\t\t_next_slide = parseInt(e.target.id);\r\n\t\t\tthis.current_slide = this.current_slide === null ? 0 : this.next_slide;\r\n\t\t\tthis.next_slide = _next_slide;\r\n\t\t\tdirection = _next_slide < this.current_slide ? 'left' : 'right';\r\n\t\t\tthis.direction = direction;\r\n\r\n\t\t\tif(this.current_slide === this.next_slide) {\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\r\n\t\t\tthis.beforeAnimationStarts();\r\n\t\t\tthis.doAnimation()\r\n\r\n\t\t\t.then(this.afterAnimationEnds.bind(this));\r\n\t\t\tthis.current_slide = _next_slide;\r\n\r\n\t\t}\r\n\t}\r\n\r\n\t// autoControl: Is the controller responsibile for handling the auto animations.\r\n\t// ==============================================================================\r\n\r\n\tautoControl() {\r\n\t\tconst shouldSwap = this.direction === null ? false : this.autoDirection !== this.direction;\r\n\t\tconst total_slides = this.container !== null ? this.container.children.length -1 : false;\r\n\r\n\t\tif(!total_slides) {\r\n\t\t\tclearTimeout(this.delay_timer);\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\t\tif(this.pause) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\t\tif(!this.autoDirection) {\r\n\r\n\t\t\treturn false;\r\n\t\t}\r\n\r\n\t\tif(shouldSwap) {\r\n\t\t\tthis.next_slide ^= this.current_slide;\r\n\t\t\tthis.current_slide ^= this.next_slide;\r\n\t\t\tthis.next_slide ^= this.current_slide;\r\n\r\n\t\t\tif(this.next_slide === this.current_slide) {\r\n\r\n\t\t\t\tif(this.autoDirection === 'left') {\r\n\t\t\t\t\tthis.next_slide = this.current_slide -1 === -1 ? total_slides : this.current_slide - 1;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif(this.autoDirection === 'right') {\r\n\t\t\t\t\tthis.next_slide = this.current_slide + 1 > total_slides + 1 ? 0 : this.current_slide + 1;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\r\n\t\tif(this.autoDirection === 'left' && !shouldSwap) {\r\n\t\t\tif(this.current_slide && this.next_slide === null) {\r\n\t\t\t\t\tthis.next_slide = this.current_slide - 1 === -1 ? total_slides : this.current_slide - 1;\r\n\t\t\t}\r\n\r\n\t\t\telse if(this.next_slide === this.current_slide && this.current_slide !== null && this.next_slide !== null) {\r\n\t\t\t\t\tthis.next_slide = this.current_slide - 1 === -1 ? total_slides : this.current_slide - 1;\r\n\t\t\t\t}\r\n\r\n\t\t\telse {\r\n\t\t\t\tthis.current_slide = this.current_slide === null ? 0 : (this.current_slide - 1) === -1 ? total_slides : this.current_slide -1;\r\n\t\t\t\tthis.next_slide = this.next_slide === null ? total_slides : this.current_slide === 0 ? total_slides : this.current_slide -1;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\telse if(this.autoDirection === 'right' && !shouldSwap) {\r\n\r\n\t\t\tif(this.current_slide && this.next_slide === null) {\r\n\t\t\t\tthis.next_slide = this.current_slide + 1 === total_slides + 1 ? 0 : this.current_slide + 1;\r\n\t\t\t}\r\n\r\n\t\t\telse if(this.next_slide === this.current_slide && this.current_slide !== null && this.next_slide !== null) {\r\n\t\t\t\tthis.next_slide = this.current_slide + 1 === total_slides + 1 ? 0 : this.current_slide + 1;\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tthis.current_slide = this.current_slide === null ? 0 : this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\r\n\t\t\t\tthis.next_slide = this.next_slide === null ? 1 : this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\r\n\t\t\t}\r\n\t\t}\r\n\t\tthis.direction = this.autoDirection;\r\n\t\tthis.beforeAnimationStarts();\r\n\t\tthis.doAnimation(this.autoDirection)\r\n\r\n\t\t.then(this.afterAnimationEnds.bind(this));\r\n\t}\r\n}\r\n\r\n/* harmony default export */ var controllers = (controllers_Controllers);\r\n\n// EXTERNAL MODULE: ./dev/scss/styles.scss\nvar styles = __webpack_require__(\"./dev/scss/styles.scss\");\n\n// CONCATENATED MODULE: ./dev/index.js\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return dev_TidyCarousel; });\n\r\n\r\n\r\n\r\npolyfills();\r\n// Options provided:\r\n// - slider_container: # It should be a element wich contains slides. Otherwise it will look for an element with the attribute named data-carousel=\"name\"\r\n// - controllers: # It should be an array of two elements with the attribute data-carousel-controller=\"left or right\"\r\n// - Duration: # It should be an integer.\r\n// - Delay: # It should be an integer.\r\n// - Auto: # It should be a boolean. (Optional) {Defaults to false}\r\n// - Reset: # It should be a boolean. This option indicates if the carousel should continute sliding when it reach the last slide.(optional)\r\n// - Warns: # It should be a boolean.\r\n// - Direction: # It should be a string. E.g: 'left' or right. This is only required if auto is set to true.\r\n// - pauseOnMouseEnter: # It should be a boolean. This is only required if auto is set to true.\r\n// - pager: # It can be a boolean or an Object.\r\n \t\t\t// - If is a boolean, carousel will lookup for an element in the dom with the attribute data-carousel-pager.\r\n \t\t\t// - If is an Object carousel will use this element as the container of the indicators, wich will be generated.\r\n\r\nclass dev_TidyCarousel extends controllers {\r\n\tconstructor(opts) {\r\n\t\tsuper(opts);\r\n\t}\r\n}\r\n\r\n\r\n// new TidyCarousel({pager: true, swipe: true, drag: true, infinite: true, auto: {direction: 'left'}});\r\n\n\n//# sourceURL=webpack://TidyCarousel/./dev/index.js_+_5_modules?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return TidyCarousel; });\n/* harmony import */ var _scripts_polyfills__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(\"./dev/scripts/polyfills.js\");\n/* harmony import */ var _scripts_controllers__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(\"./dev/scripts/controllers.js\");\n\n\nObject(_scripts_polyfills__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(); // Options provided:\n// - slider_container: # It should be a element wich contains slides. Otherwise it will look for an element with the attribute named data-carousel=\"name\"\n// - controllers: # It should be an array of two elements with the attribute data-carousel-controller=\"left or right\"\n// - Duration: # It should be an integer.\n// - Delay: # It should be an integer.\n// - Auto: # It should be a boolean. (Optional) {Defaults to false}\n// - Reset: # It should be a boolean. This option indicates if the carousel should continute sliding when it reach the last slide.(optional)\n// - Warns: # It should be a boolean.\n// - Direction: # It should be a string. E.g: 'left' or right. This is only required if auto is set to true.\n// - pauseOnMouseEnter: # It should be a boolean. This is only required if auto is set to true.\n// - pager: # It can be a boolean or an Object.\n// - If is a boolean, carousel will lookup for an element in the dom with the attribute data-carousel-pager.\n// - If is an Object carousel will use this element as the container of the indicators, wich will be generated.\n\nclass TidyCarousel extends _scripts_controllers__WEBPACK_IMPORTED_MODULE_1__[\"default\"] {\n constructor(opts) {\n super(opts);\n }\n\n} // new TidyCarousel({pager: true, swipe: true, drag: true, infinite: true, auto: {direction: 'left'}});\n\n//# sourceURL=webpack://TidyCarousel/./dev/index.js?"); /***/ }), -/***/ "./dev/scss/styles.scss": -/*!******************************!*\ - !*** ./dev/scss/styles.scss ***! - \******************************/ -/*! no static exports found */ -/*! ModuleConcatenation bailout: Module is not an ECMAScript module */ -/***/ (function(module, exports, __webpack_require__) { +/***/ "./dev/scripts/actions.js": +/***/ (function(module, __webpack_exports__, __webpack_require__) { -eval("\nvar content = __webpack_require__(/*! !../../node_modules/css-loader/dist/cjs.js!../../node_modules/sass-loader/dist/cjs.js??ref--4-2!./styles.scss */ \"./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js?!./dev/scss/styles.scss\");\n\nif(typeof content === 'string') content = [[module.i, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = __webpack_require__(/*! ../../node_modules/style-loader/lib/addStyles.js */ \"./node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(false) {}\n\n//# sourceURL=webpack://TidyCarousel/./dev/scss/styles.scss?"); +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _config__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(\"./dev/scripts/config.js\");\n/* harmony import */ var _methods__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(\"./dev/scripts/methods.js\");\n\n\n\nclass Actions extends _config__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n constructor(props) {\n super(props);\n this.pages = [];\n }\n\n setActivePage() {\n this.pages[this.current_slide].classList.remove('page-active');\n this.pages[this.next_slide].classList.add('page-active');\n }\n\n doAnimation(dir, current_from, next_from, not_complete) {\n // set the active pager.\n // ======================\n const total_slides = this.container.children.length - 1;\n let direction = dir ? dir : this.direction;\n let next_slide = null;\n\n if (not_complete) {\n if (this.direction === 'left') {\n next_slide = this.current_slide - 1 === -1 ? total_slides : this.current_slide - 1;\n }\n\n if (this.direction === 'right') {\n next_slide = this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\n }\n }\n\n let slides = {\n current_slide: this.container.children[this.current_slide],\n next_slide: this.container.children[next_slide !== null ? next_slide : this.next_slide]\n };\n const opts = {\n easing: this.easing,\n duration: not_complete ? this.duration / 2 : this.duration\n };\n let not_complete_ = this.direction === 'left' ? 100 - next_from : current_from - 100;\n const keyframes = {\n current_slide: {\n from: {\n transform: `translateX(${current_from ? current_from : 0}%)`,\n zIndex: '2'\n },\n to: {\n transform: `translateX(${not_complete ? 0 : direction === 'left' ? -100 : 100}%)`,\n zIndex: '2'\n }\n },\n next_slide: {\n from: {\n transform: `translateX(${next_from && direction === 'left' ? 100 - next_from : next_from && direction === 'right' ? current_from - 100 : direction === 'left' && !next_from ? 100 : -100}%)`,\n //direction === 'left' ? 'translateX(100%)' : 'translateX(-100%)'\n zIndex: `1`\n },\n to: {\n transform: `translateX(${not_complete && direction === 'right' ? -100 : not_complete && direction === 'left' ? 100 : 0}%)`,\n zIndex: '1'\n }\n }\n };\n\n if (!not_complete) {\n this.swipe_stopped = true;\n this.container.children[this.current_slide].classList.remove('current-slide');\n this.container.children[this.next_slide].classList.add(\"current-slide\");\n }\n\n let promise = Object(_methods__WEBPACK_IMPORTED_MODULE_1__[\"animate\"])(slides, keyframes, opts);\n return promise;\n }\n\n swipeAnimation(current_pos, next_pos) {\n // if(this.swipe_stopped) {\n // \treturn false;\n // }\n // let next_slide = this.next_slide;\n let nr = 100 + next_pos;\n let left = 100 - next_pos;\n let right = -Math.abs(nr);\n this.container.children[this.current_slide].setAttribute('style', `transform: translateX(${current_pos}%); z-index: 2;`);\n this.container.children[this.next_slide].setAttribute('style', `transform: translateX(${this.direction === 'left' ? left : right}%); z-index: 1;`);\n }\n\n generatePager() {\n const container = this.pager instanceof NodeList ? this.pager[0] : this.pager;\n const total_slides = this.container.children.length - 1;\n let i, elements;\n\n for (i = 0; i <= total_slides; i++) {\n container.insertAdjacentHTML('beforeend', `
  • `);\n }\n\n elements = container instanceof NodeList ? container[0].childNodes : container.childNodes;\n this.pages = Array.from(elements);\n\n if (this.pages.length > total_slides + 1) {\n this.pages.shift();\n }\n\n this.pages[this.startAt].classList.add('page-active');\n }\n\n generateSlides() {\n const container = this.container;\n let item;\n\n const forImgSrc = i => {\n return `\"${this.slides[i].alt}\"/`;\n };\n\n const forNode = i => {\n return `${this.slides[i].html}`;\n };\n\n for (let i = 0; i <= this.slides.length - 1; i++) {\n container.insertAdjacentHTML('beforeend', `
    ${this.slides[i].html ? forNode(i) : forImgSrc(i)}
    `);\n\n if (i === this.startAt) {\n container.children[i].classList.add('current-slide');\n }\n }\n }\n\n setActiveSlide() {\n if (this.slides === null) {\n this.container.children[this.startAt].classList.add('current-slide');\n\n if (this.opts.beforeAnimation) {\n this.beforeAnimationStarts();\n }\n\n if (this.opts.afterAnimation) {\n this.afterAnimationEnds();\n }\n } else {\n if (this.slides[this.startAt].beforeAnimation) {\n this.beforeAnimationStarts();\n }\n\n if (this.slides[this.startAt].afterAnimation) {\n this.afterAnimationEnds();\n }\n }\n }\n\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Actions);\n\n//# sourceURL=webpack://TidyCarousel/./dev/scripts/actions.js?"); /***/ }), -/***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js?!./dev/scss/styles.scss": -/*!*********************************************************************************************************************!*\ - !*** ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--4-2!./dev/scss/styles.scss ***! - \*********************************************************************************************************************/ -/*! no static exports found */ -/*! ModuleConcatenation bailout: Module is not an ECMAScript module */ -/***/ (function(module, exports, __webpack_require__) { +/***/ "./dev/scripts/config.js": +/***/ (function(module, __webpack_exports__, __webpack_require__) { -eval("exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\")(false);\n// Module\nexports.push([module.i, \"html,\\nbody {\\n margin: 0;\\n padding: 0; }\\n\\n.current-slide {\\n z-index: 1; }\\n\\n.page-active {\\n background: #fff; }\\n\\n/*The height is required in order to see the image*/\\n.tidy__carousel-wrapper {\\n position: relative;\\n width: 100%;\\n height: 100%; }\\n\\n.tidy__carousel {\\n position: relative;\\n height: 30vmin;\\n width: 100%;\\n margin: 0;\\n padding: 0;\\n z-index: 1;\\n display: block;\\n overflow: hidden; }\\n\\n.tidy__carousel .tidy__carousel-slide {\\n position: absolute;\\n width: inherit;\\n height: inherit;\\n display: inline-block; }\\n\\n.tidy__carousel .tidy__carousel-slide > * {\\n width: inherit;\\n height: inherit;\\n display: block;\\n user-drag: none;\\n user-select: none;\\n -moz-user-select: none;\\n -webkit-user-drag: none;\\n -webkit-user-select: none;\\n -ms-user-select: none; }\\n\\nbutton.tidy__carousel-controller[data-carousel-controller] {\\n position: absolute;\\n transform: translateY(-50%);\\n z-index: 1000;\\n top: 50%;\\n width: 44px;\\n height: 44px;\\n border-radius: 50%;\\n background: #fff;\\n border: none;\\n z-index: 10;\\n display: block;\\n background: #fff;\\n user-drag: none;\\n user-select: none;\\n -moz-user-select: none;\\n -webkit-user-drag: none;\\n -webkit-user-select: none;\\n -ms-user-select: none;\\n outline: none;\\n cursor: pointer; }\\n button.tidy__carousel-controller[data-carousel-controller] svg {\\n position: absolute;\\n left: 20%;\\n top: 20%;\\n width: 60%;\\n height: 60%;\\n cursor: pointer;\\n user-drag: none;\\n user-select: none;\\n -moz-user-select: none;\\n -webkit-user-drag: none;\\n -webkit-user-select: none;\\n -ms-user-select: none; }\\n\\nbutton.tidy__carousel-controller[data-carousel-controller~=\\\"left\\\"] {\\n left: 10px; }\\n\\nbutton.tidy__carousel-controller[data-carousel-controller~=\\\"right\\\"] {\\n right: 10px; }\\n\\n.tidy__carousel-pager[data-carousel-pager] {\\n position: relative;\\n margin: 0;\\n padding: 0;\\n z-index: 100;\\n width: 100%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n transform: translateY(-25px);\\n user-drag: none;\\n user-select: none;\\n -moz-user-select: none;\\n -webkit-user-drag: none;\\n -webkit-user-select: none;\\n -ms-user-select: none; }\\n .tidy__carousel-pager[data-carousel-pager] .tidy__carousel-pager--page {\\n margin: 0 5px;\\n width: 10px;\\n height: 10px;\\n border-radius: 100%;\\n border: 1px solid #f1f1f1;\\n cursor: pointer;\\n list-style-type: none;\\n user-drag: none;\\n user-select: none;\\n -moz-user-select: none;\\n -webkit-user-drag: none;\\n -webkit-user-select: none;\\n -ms-user-select: none; }\\n\", \"\"]);\n\n\n//# sourceURL=webpack://TidyCarousel/./dev/scss/styles.scss?./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--4-2"); +"use strict"; +eval("__webpack_require__.r(__webpack_exports__);\n// TODO:\n// - Check slides if they have the minimum css, such as position: absolute.\n// - Add the option to accept a start slide index.\n// - Make sure the carousel can receive slides as an array of objects with image url/alt and title.\nclass Config {\n constructor(opts) {\n this.opts = opts || {};\n\n for (let prop in this.opts) {\n if (prop) {\n // preset each option given\n this[prop] = this.opts[prop];\n }\n }\n }\n\n get name() {\n return this.opts.name !== undefined ? this.opts.name : null;\n }\n\n set name(v) {\n if (typeof v !== 'string') {\n throw new TypeError(`Opts.name should be a string, but received instead ${typeof v}`);\n }\n\n return v;\n }\n\n get container() {\n const {\n opts: {\n container\n }\n } = this;\n const name = this.name && `[data-name=\"${this.name}\"]`;\n\n switch (typeof container) {\n case 'string':\n return document.querySelector(`${container + (name !== null ? name : '')}`);\n\n case 'object':\n return container;\n\n default:\n return document.querySelector(`.tidy__carousel${name !== null ? name : ''}`);\n }\n }\n\n set container(value) {\n let container;\n const name = this.name && `[data-name=\"${this.name}\"]`;\n\n switch (typeof value) {\n case 'string':\n container = document.querySelector(value + (name !== null ? name : ''));\n\n if (container === null) {\n throw new TypeError(`Could not find any maching element for \"${value}\" with the name ${this.name}. Make sure the element is loaded before initializing.`);\n }\n\n return container;\n\n case 'object':\n if (value === null) {\n throw new TypeError(`Please make sure the container element is loaded before initialization.`);\n }\n\n if (!value instanceof HTMLElement) {\n throw new TypeError(`'container' should be a instance of an html element, but received instead other type of object.`);\n }\n\n if (!value.children.length > 2) {\n throw new Error(`The container should have at least two children elements but it has instead ${value.length}`);\n }\n\n return value;\n\n default:\n throw new TypeError(`'\"container\" should be a string (pseudo selector) or boolean, received instead ${typeof value}'`);\n }\n }\n\n get slides() {\n if (!this.opts.slides) {\n if (!this.container.children.length) {\n throw new Error(\"Can't find any slides\");\n }\n }\n\n return this.opts.slides ? this.opts.slides : null;\n }\n\n set slides(v) {\n if (!Array.isArray(v)) {\n throw new TypeError(`The slides it should be an array. Received instead ${typeof v}`);\n }\n\n return v;\n }\n\n get controllers() {\n const {\n opts: {\n controllers\n }\n } = this;\n let nodes;\n let name = this.name && `[data-for=\"${this.name}\"]`;\n\n switch (typeof controllers) {\n case 'boolean':\n nodes = document.querySelectorAll(`[data-carousel-controller]${name !== null ? name : ''}`);\n return controllers ? nodes : false;\n\n case 'string':\n nodes = document.querySelectorAll(`${controllers + (name !== null ? name : '')}`);\n return nodes;\n\n case 'object':\n if (controllers instanceof HTMLCollection) {\n return Array.from(controllers);\n } else {\n return controllers;\n }\n\n case \"undefined\":\n nodes = document.querySelectorAll(`[data-carousel-controller]${name !== null ? name : ''}`);\n nodes = nodes !== null ? Array.from(nodes) : false;\n return nodes;\n\n default:\n throw new TypeError(`controllers can only have the following types: string, array/Nodelist`);\n }\n }\n\n set controllers(value) {\n const {\n opts: {\n controllers\n }\n } = this;\n let nodes;\n let name = this.name && `[data-for=\"${this.name}\"]`;\n\n switch (typeof value) {\n case 'boolean':\n nodes = document.querySelectorAll(`[carousel-controller]${name !== null ? name : ''}`);\n\n if (value && !nodes.length) {\n throw new TypeError(`Could not find any element containing the attribute of carousel-controller. Bind this attribute [carousel-controller] to an element specify the value lef/right.`);\n }\n\n return value && nodes ? nodes : false;\n\n case 'string':\n nodes = document.querySelectorAll(`${controllers + (name !== null ? name : '')}`);\n\n if (!nodes.length) {\n throw new TypeError(`Could not find any element containing the attribute of carousel-controller. Bind this attribute [carousel-controller] to an element specify the value lef/right.`);\n } else {\n nodes.forEach(n => {\n if (!n.hasAttribute('carousel-controller')) {\n throw new TypeError(`The controllers selected doesn't have the attribute 'carousel-controller'. Set this attribute to a string left/right`);\n }\n\n if (n.hasAttribute('carousel-controller')) {\n if (n.attributes['carousel-controller'].value === '') {\n throw new TypeError(`The controllers selected doesn't have the attribute 'carousel-controller'. Set this attribute to a string left/right`);\n }\n }\n });\n return nodes;\n }\n\n case 'object':\n if (value instanceof NodeList || Array.isArray(value)) {\n return value;\n }\n\n if (value instanceof HTMLCollection) {\n return Array.from(value);\n } else {\n throw new TypeError(`controllers can only have the following types: string, array/Nodelist`);\n }\n\n default:\n throw new TypeError(`controllers can only have the following types: string, array/Nodelist`);\n }\n }\n\n get easing() {\n if (this.opts.easing) {\n return this.opts.easing;\n }\n\n return 'ease';\n }\n\n set easing(v) {\n if (typeof v !== 'string') {\n throw new TypeError(`'easing' should be a string, received instead ${typeof v}`);\n }\n\n return v;\n }\n\n get duration() {\n if (this.opts.duration) {\n return this.opts.duration;\n }\n\n return 500;\n }\n\n set duration(value) {\n if (typeof value !== 'number') {\n throw new Error(`Type error: \"duration\" should be a number instead of ${typeof value}`);\n } else if (value < 0) {\n throw new Error(`Value error: \"duration\" should be a number > 0, but received instead ${value}`);\n }\n\n return value;\n }\n\n get delay() {\n if (this.opts.delay) {\n return this.opts.delay;\n }\n\n return 500;\n }\n\n set delay(value) {\n if (typeof value !== 'number') {\n throw new Error(`Type error: \"duration\" should be a number instead of ${typeof value}`);\n } else if (value < 0) {\n throw new Error(`Value error: \"duration\" should be a number > 0, but received instead ${value}`);\n }\n\n return value;\n }\n\n get infinite() {\n if (this.opts.infinite === undefined) {\n return true;\n }\n\n return this.opts.infinite;\n }\n\n set infinite(v) {\n if (typeof v !== 'boolean') {\n throw new TypeError(`'infinite' option should be a boolean instead of ${typeof v}`);\n }\n\n return v;\n }\n\n get auto() {\n if (this.opts.auto !== undefined) {\n return this.opts.auto;\n }\n\n return true;\n }\n\n set auto(value) {\n if (typeof value === 'object') {\n if (value.direction) {\n this.autoDirection = value.direction;\n return value;\n }\n\n return value;\n } else if (typeof value === 'boolean') {\n if (value === true) {\n this.autoDirection = 'left';\n return {\n direction: 'left'\n };\n } else {\n this.autoDirection = null;\n return {\n direction: null\n };\n }\n } else {\n throw new Error(`Type error: \"auto\" should be a boolean or an object containing direction instead of ${typeof value}`);\n }\n }\n\n get autoDirection() {\n if (typeof this.auto === 'object') {\n return this.auto.direction;\n }\n\n if (typeof this.auto === 'boolean') {\n if (this.auto === true) {\n return 'left';\n } else {\n return null;\n }\n }\n }\n\n set autoDirection(value) {\n if (value === null) {\n return false;\n }\n\n if (typeof value !== 'string') {\n throw new TypeError(`Direction should be a string, received ${typeof value}`);\n }\n\n if (!(value.toLowerCase().includes('left') || value.toLowerCase().includes('right'))) {\n throw new Error(`Value error: \"direction\" can be 'left' or 'right', received instead: ${value}`);\n }\n }\n\n get startAt() {\n if (this.opts.startAt !== undefined) {\n return this.opts.startAt;\n }\n\n return Array.isArray(this.slides) ? this.slides.length - 1 : this.container.children.length - 1 !== -1 ? this.container.children.length - 1 : 0;\n }\n\n set startAt(v) {\n if (typeof v !== 'number') {\n throw new TypeError(`'startAt' should be a number, received instead. ${typeof v}`);\n }\n\n if (Array.isArray(this.slides) && this.slides.length) {\n if (v >= this.slides.length) {\n throw new Error(`'startAt' should be a number <= the total slides counting from 0.`);\n }\n } else if (v >= this.container.children.length) {\n throw new Error(`'startAt' should be a number <= the total slides counting from 0.`);\n }\n\n return v;\n }\n\n get pager() {\n // If the opts.pager is a boolean and is true, try document.querySelector(ul[carousel-pager])\n const {\n opts\n } = this;\n let name = this.name && `[data-for=\"${this.name}\"]`;\n\n switch (typeof opts.pager) {\n case 'boolean':\n const pager = document.querySelector(`ul[data-carousel-pager]${name !== null ? name : ''}`);\n return opts.pager && pager ? pager : false;\n\n case 'object':\n let container = opts.pager.container;\n\n if (container instanceof HTMLElement) {\n return container ? container : false;\n }\n\n if (typeof container === 'object') {\n throw new TypeError(`Container should be a html element, but received instead an object`);\n } else if (typeof container === 'string') {\n container = document.querySelector(container + (name !== null ? name : ''));\n\n if (container !== null) {\n return container;\n } else {\n throw new TypeError(`${container} wasn't found in the document. Make sure the element is available in the DOM before you give me the selector.`);\n }\n }\n\n default:\n return opts.pager;\n }\n }\n\n set pager(v) {\n const {\n opts\n } = this;\n let name = this.name && `[data-for=\"${this.name}\"]`;\n\n switch (typeof v) {\n case 'boolean':\n const pager = document.querySelector(`ul[data-carousel-pager]${name !== null ? name : ''}`);\n return opts.pager && pager ? pager : false;\n return false;\n\n case 'object':\n if (v.container) {\n const container = v.container;\n return container instanceof NodeList && container.length > 0 || container instanceof HTMLElement ? container : false;\n }\n\n throw new TypeError(`Pager should be an object containing the container or a string, received instead ${typeof v}.`);\n\n default:\n throw new TypeError(`Pager should be an object containing the container or a string, received instead ${typeof v}.`);\n }\n }\n\n get pauseOnMouseEnter() {\n if (typeof this.opts.pauseOnMouseEnter === 'boolean') {\n return this.opts.pauseOnMouseEnter;\n }\n\n return true;\n }\n\n set pauseOnMouseEnter(value) {\n if (typeof value !== 'boolean') {\n throw new Error(\"Value error: warns can only be false or true\");\n }\n\n return value;\n }\n\n get swipe() {\n if (this.opts.swipe) {\n return this.opts.swipe;\n }\n\n return true;\n }\n\n set swipe(v) {\n if (typeof v !== 'boolean') {\n throw new TypeError(`'swipe' should be a boolean, received instead ${typeof v}`);\n }\n\n return v;\n }\n\n get drag() {\n if (this.opts.drag) {\n return this.opts.drag;\n }\n\n return true;\n }\n\n set drag(v) {\n if (typeof v !== 'boolean') {\n throw new TypeError(`'drag' should be a boolean instead of ${typeof v}`);\n }\n\n return v;\n }\n\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Config);\n\n//# sourceURL=webpack://TidyCarousel/./dev/scripts/config.js?"); /***/ }), -/***/ "./node_modules/css-loader/dist/runtime/api.js": -/*!*****************************************************!*\ - !*** ./node_modules/css-loader/dist/runtime/api.js ***! - \*****************************************************/ -/*! no static exports found */ -/*! ModuleConcatenation bailout: Module is not an ECMAScript module */ -/***/ (function(module, exports, __webpack_require__) { +/***/ "./dev/scripts/controllers.js": +/***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("\n\n/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\n// eslint-disable-next-line func-names\nmodule.exports = function (useSourceMap) {\n var list = []; // return the list of modules as css string\n\n list.toString = function toString() {\n return this.map(function (item) {\n var content = cssWithMappingToString(item, useSourceMap);\n\n if (item[2]) {\n return \"@media \".concat(item[2], \"{\").concat(content, \"}\");\n }\n\n return content;\n }).join('');\n }; // import a list of modules into the list\n // eslint-disable-next-line func-names\n\n\n list.i = function (modules, mediaQuery) {\n if (typeof modules === 'string') {\n // eslint-disable-next-line no-param-reassign\n modules = [[null, modules, '']];\n }\n\n var alreadyImportedModules = {};\n\n for (var i = 0; i < this.length; i++) {\n // eslint-disable-next-line prefer-destructuring\n var id = this[i][0];\n\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n\n for (var _i = 0; _i < modules.length; _i++) {\n var item = modules[_i]; // skip already imported module\n // this implementation is not 100% perfect for weird media query combinations\n // when a module is imported multiple times with different media queries.\n // I hope this will never occur (Hey this way we have smaller bundles)\n\n if (item[0] == null || !alreadyImportedModules[item[0]]) {\n if (mediaQuery && !item[2]) {\n item[2] = mediaQuery;\n } else if (mediaQuery) {\n item[2] = \"(\".concat(item[2], \") and (\").concat(mediaQuery, \")\");\n }\n\n list.push(item);\n }\n }\n };\n\n return list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring\n\n var cssMapping = item[3];\n\n if (!cssMapping) {\n return content;\n }\n\n if (useSourceMap && typeof btoa === 'function') {\n var sourceMapping = toComment(cssMapping);\n var sourceURLs = cssMapping.sources.map(function (source) {\n return \"/*# sourceURL=\".concat(cssMapping.sourceRoot).concat(source, \" */\");\n });\n return [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n }\n\n return [content].join('\\n');\n} // Adapted from convert-source-map (MIT)\n\n\nfunction toComment(sourceMap) {\n // eslint-disable-next-line no-undef\n var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n var data = \"sourceMappingURL=data:application/json;charset=utf-8;base64,\".concat(base64);\n return \"/*# \".concat(data, \" */\");\n}\n\n//# sourceURL=webpack://TidyCarousel/./node_modules/css-loader/dist/runtime/api.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(\"./dev/scripts/actions.js\");\n // TODO:\n// - Handle another case in the onArrowClick wich should determine when\n//\t the current and next should swap.\n// \t This should solve the case where the numbers are not increasing when the\n// \t\tauto is true\n//\n// - Add an extra callback to the mecanism wich is should be executed only if\n// \t\tthe reset option is true.\n// - Make a hook to check if the slides are generated by actions.generateSlides()\n// \t\tif so, change selectors, could be something like parent.children(n).\n// - Trigger the onSwipeEnd function when the mouseleave event occurs.\n// - Do a check how a generated controller would look like.\n// - Write tests. Make sure every method is clean, and the tree is shaked.\n// - Get ready the controllers to be depolyable, enjoy.\n// - Make a clear distinction between pause and mouseenter, swipe/drag can't initialize if onMouseEnter pause is set to true. Make a clear reference when the pause should be set to true.\n// ==================================================================\n\nclass Controllers extends _actions__WEBPACK_IMPORTED_MODULE_0__[\"default\"] {\n constructor(props) {\n super(props);\n this.pause = false;\n this.current_slide = this.startAt;\n this.next_slide = this.startAt;\n this.delay_timer = 0;\n this.duration_timer = 0;\n this.direction = null;\n this.dragable = false;\n this.start_x = 0;\n this.end_x = 0;\n this.current_continue_from = 0;\n this.next_continue_from = 0;\n this.swipe_stopped = false;\n this.mouseenter = false;\n\n if (Array.isArray(this.slides)) {\n this.generateSlides();\n }\n\n if (this.pager) {\n this.generatePager();\n this.pages.forEach(btn => {\n btn.addEventListener('click', this.onPagerClick.bind(this));\n });\n }\n\n this.setActiveSlide();\n\n if (this.auto) {\n let trigger = this.delayTimer();\n }\n\n if (this.controllers) {\n this.controllers.forEach(btn => {\n btn.addEventListener('click', this.shouldPause.bind(this));\n });\n }\n\n this.container.addEventListener('mouseenter', this.onMouseEnter.bind(this));\n this.container.addEventListener('mouseleave', this.onMouseLeave.bind(this));\n\n if (this.drag) {\n this.container.addEventListener('mousedown', this.onSwipe.bind(this));\n this.container.addEventListener('mousemove', this.onSwipeStart.bind(this), {\n passive: true\n });\n this.container.addEventListener('mouseup', this.onSwipeEnd.bind(this));\n }\n\n if (this.swipe) {\n this.container.addEventListener('touchstart', this.onSwipe.bind(this), {\n passive: true\n });\n this.container.addEventListener('touchmove', this.onSwipeStart.bind(this), {\n passive: true\n });\n this.container.addEventListener('touchend', this.onSwipeEnd.bind(this));\n }\n }\n\n onSwipe(e) {\n this.mouseenter = true;\n clearTimeout(this.delay_timer);\n clearTimeout(this.duration_timer);\n\n if (this.pause || this.dragable) {\n return false;\n } // if(shouldStop) {\n // \treturn false;\n // }\n\n\n if (this.start_x - this.end_x !== 0 && this.swipe_stopped) {\n return false;\n }\n\n this.start_x = e.clientX || e.changedTouches[0].clientX;\n this.dragable = true;\n this.current_slide = this.current_slide === null ? 0 : this.next_slide !== null ? this.next_slide : this.current_slide;\n }\n\n onSwipeStart(e) {\n const total_slides = this.container.children.length - 1;\n this.mouseenter = true; // if(e.type === 'mousemove' && !e.target.classList.contains('tidyCarousel-slide')) {\n // \treturn false\n // }\n\n if (this.swipe_stopped) {\n return false;\n } // Get to know in wich direction is swiping\n // get to know what's the total pixels of the swipe.\n\n\n let total = e.target.clientWidth || e.view.clientWidth;\n let half = total / 2;\n this.shouldInfinite(false);\n\n if (this.dragable) {\n this.end_x = e.pageX || e.changedTouches[0].clientX;\n this.direction = this.start_x - this.end_x > 0 ? 'left' : 'right';\n const shouldStop = this.shouldInfinite(false);\n\n if (!shouldStop) {\n this.current_continue_from = (this.end_x - this.start_x) * 100 / total;\n this.next_continue_from = (this.start_x - this.end_x) * 100 / total;\n\n if (this.direction === 'left') {\n this.next_slide = this.current_slide - 1 < 0 ? total_slides : this.current_slide - 1;\n }\n\n if (this.direction === 'right') {\n this.next_slide = this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\n } // this.end_x = 0;\n // this.start_x = 0;\n // // distance = 0;\n // this.current_continue_from = 0;\n // this.next_continue_from = 0;\n\n\n this.swipeAnimation(this.current_continue_from, this.next_continue_from);\n }\n }\n }\n\n onSwipeEnd(e) {\n const total_slides = this.container.children.length - 1;\n this.dragable = false;\n this.mouseenter = false;\n\n if (this.current_slide === this.next_slide) {\n return false;\n }\n\n if (this.swipe_stopped || this.end_x === 0) {\n return false;\n } // this.pause = false;\n else if ((this.start_x - this.end_x > 100 || this.start_x - this.end_x < -100) && !this.swipe_stopped) {\n this.beforeAnimationStarts();\n this.doAnimation(null, this.current_continue_from, this.next_continue_from, false).then(() => {\n this.afterAnimationEnds();\n this.end_x = 0;\n this.start_x = 0;\n\n if (this.direction === 'left') {\n this.current_slide = this.current_slide - 1 === -1 ? total_slides : this.current_slide - 1;\n }\n\n if (this.direction === 'right') {\n this.current_slide = this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\n }\n\n for (let item of this.container.children) {\n if (item.hasAttribute('style')) {\n item.removeAttribute('style');\n }\n }\n });\n } else {\n this.next_slide = this.current_slide;\n this.end_x = 0;\n this.start_x = 0;\n\n for (let item of this.container.children) {\n if (item.hasAttribute('style')) {\n this.doAnimation(null, this.current_continue_from, this.next_continue_from, true).then(() => {\n this.end_x = 0;\n this.start_x = 0;\n item.removeAttribute('style');\n this.pause = false;\n this.shouldRestart();\n });\n }\n }\n }\n\n this.mouseenter = false;\n }\n\n beforeAnimationStarts() {\n this.pause = true;\n\n if (this.pager) {\n this.setActivePage();\n }\n\n if (Array.isArray(this.slides)) {\n if (this.slides[this.next_slide].beforeAnimation) {\n this.slides[this.next_slide].beforeAnimation(this.container.children[this.next_slide], this.next_slide);\n }\n }\n\n if (this.opts.beforeAnimation) {\n this.opts.beforeAnimation(this.container.children[this.next_slide], this.next_slide);\n }\n }\n\n shouldInfinite(auto, arrows) {\n if (!this.infinite) {\n if (auto) {\n if (this.autoDirection === 'right') {\n const shouldStop = this.next_slide === this.container.children.length - 1 ? true : false;\n return shouldStop;\n } else if (this.autoDirection === 'left') {\n const shouldStop = this.next_slide === 0 ? true : false;\n return shouldStop;\n }\n } else if (arrows) {\n if (this.direction === 'right') {\n const shouldStop = this.next_slide === this.container.children.length - 1 ? true : false;\n return shouldStop;\n } else if (this.direction === 'left') {\n const shouldStop = this.next_slide === 0 ? true : false;\n return shouldStop;\n }\n } else if (!auto && !arrows) {\n if (this.direction === 'right') {\n const shouldStop = this.current_slide === this.container.children.length - 1 ? true : false;\n return shouldStop;\n } else if (this.direction === 'left') {\n const shouldStop = this.current_slide === 0 ? true : false;\n return shouldStop;\n }\n }\n\n return false;\n } // if(!this.infinite) {\n // \tlet shouldStop;\n // \tif(this.autoDirection === 'right') {\n // \t\tshouldStop = this.current_slide === this.container.children.length - 1 ? true : false;\n //\n // \t\treturn shouldStop;\n // \t}\n // \tif(this.autoDirection === 'left') {\n // \t\tshouldStop = this.current_slide === 0 ? true : false;\n //\n // \t\treturn shouldStop;\n // \t}\n // }\n\n }\n\n shouldRestart() {\n if (this.mouseenter) {\n return false;\n }\n\n if (this.auto) {\n this.delayTimer();\n }\n } // @param timer: boolean\n\n\n afterAnimationEnds(timer) {\n this.swipe_stopped = false;\n this.pause = true;\n\n if (this.auto) {\n if (Array.isArray(this.slides)) {\n if (typeof this.slides[this.next_slide].afterAnimation === 'function') {\n this.slides[this.next_slide].afterAnimation(this.container.children[this.next_slide], this.next_slide).then(() => {\n this.pause = false;\n this.shouldRestart();\n });\n } else {\n this.pause = false;\n this.shouldRestart();\n }\n } else {\n if (this.opts.afterAnimation) {\n this.opts.afterAnimation(this.container.children[this.next_slide], this.next_slide).then(data => {\n this.pause = false;\n this.shouldRestart();\n });\n } else {\n this.pause = false;\n this.shouldRestart();\n }\n }\n } else {\n this.pause = false;\n }\n }\n\n onMouseEnter() {\n if (this.pauseOnMouseEnter) {\n if (this.auto) {\n clearTimeout(this.delay_timer);\n this.mouseenter = true;\n }\n }\n\n return false;\n }\n\n onMouseLeave(e) {\n this.onSwipeEnd(e);\n let time; // Clearing the delay_timer will restart the delay.\n // ================================================\n\n if (this.auto) {\n clearTimeout(this.duration_timer);\n clearTimeout(this.delay_timer);\n this.mouseenter = false; // const shouldStop = this.shouldInfinite(true);\n\n this.delayTimer();\n }\n }\n\n delayTimer(e) {\n const shouldStop = this.shouldInfinite(true);\n\n if (shouldStop) {\n return false;\n }\n\n if (!this.pause) {\n this.delay_timer = setTimeout(() => {\n if (this.autoDirection && !this.mouseenter) {\n this.durationTimer();\n }\n }, this.delay);\n }\n }\n\n durationTimer() {\n const shouldReset = this.shouldReset(this.autoDirection);\n\n if (this.mouseenter) {\n return false;\n }\n\n if (!this.pause) {\n this.duration_timer = setTimeout(() => {\n this.delayTimer();\n clearTimeout(this.delay_timer);\n\n if (!this.infinite && shouldReset) {\n return clearTimeout(this.delay_timer);\n }\n\n if (!this.mouseenter) {\n this.autoControl();\n }\n }, this.duration);\n }\n }\n\n getDirection(e) {\n const button = e.path.filter(e => {\n if (e.attributes) {\n return e.hasAttribute('data-carousel-controller');\n }\n });\n return button[0].attributes.getNamedItem('data-carousel-controller').value;\n }\n\n shouldPause(e) {\n const listener_name = this.getDirection(e);\n const shouldReset = this.shouldReset(listener_name);\n\n if (this.pause) {\n return false;\n }\n\n if (shouldReset) {\n return false;\n }\n\n this.onArrowClick(e);\n }\n\n shouldReset(dir) {\n let total_slides = this.container !== null ? this.container.length - 1 : false;\n\n if (!total_slides) {\n return false;\n }\n\n ;\n\n if (dir === 'left') {\n if (this.next_slide - 1 === -1) {\n return true;\n }\n }\n\n if (dir === 'right') {\n if (this.next_slide + 1 > total_slides) {\n return true;\n }\n }\n\n return false;\n }\n\n onArrowClick(e) {\n const listener_name = this.getDirection(e);\n const total_slides = this.container.children.length - 1;\n const shouldSwap = this.direction === null ? false : listener_name !== this.direction;\n const shouldStop = this.shouldInfinite(false, true);\n\n if (shouldStop && !shouldSwap) {\n return false;\n }\n\n this.mouseenter = false;\n\n if (shouldSwap && this.next_slide !== this.current_slide) {\n this.next_slide ^= this.current_slide;\n this.current_slide ^= this.next_slide;\n this.next_slide ^= this.current_slide;\n\n if (this.next_slide === this.current_slide) {\n this.next_slide = listener_name === 'left' ? this.current_slide - 1 : this.current_slide + 1;\n }\n\n this.direction = listener_name;\n }\n\n if (shouldSwap && this.next_slide === this.current_slide) {\n if (listener_name === 'left' && this.current_slide !== null && this.next_slide !== null) {\n this.next_slide = this.current_slide - 1 === -1 ? total_slides : this.current_slide - 1;\n }\n\n if (listener_name === 'right' && this.current_slide !== null && this.next_slide !== null) {\n this.next_slide = this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\n }\n\n this.direction = listener_name;\n }\n\n if (listener_name === 'left' && !shouldSwap) {\n if (this.current_slide && this.next_slide === null) {\n this.next_slide = this.current_slide - 1 === -1 ? total_slides : this.current_slide - 1;\n } else if (this.next_slide === this.current_slide && this.current_slide !== null && this.next_slide !== null) {\n this.next_slide = this.current_slide - 1 === -1 ? total_slides : this.current_slide - 1;\n } else {\n this.current_slide = this.current_slide === null ? 0 : this.current_slide - 1 === -1 ? total_slides : this.current_slide - 1;\n this.next_slide = this.next_slide === null ? total_slides : this.current_slide === 0 ? total_slides : this.current_slide - 1;\n }\n\n this.direction = listener_name;\n }\n\n if (listener_name === 'right' && !shouldSwap) {\n if (this.current_slide && this.next_slide === null) {\n this.next_slide = this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\n } else if (this.next_slide === this.current_slide && this.current_slide !== null && this.next_slide !== null) {\n this.next_slide = this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\n } else {\n this.current_slide = this.current_slide === null ? 0 : this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\n this.next_slide = this.next_slide === null ? 1 : this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\n }\n\n this.direction = listener_name;\n }\n\n this.beforeAnimationStarts();\n this.doAnimation().then(() => {\n this.afterAnimationEnds();\n });\n }\n\n onPagerClick(e) {\n e.preventDefault();\n\n let _next_slide;\n\n let direction;\n\n if (this.pause) {\n return false;\n }\n\n if (e.target.id) {\n _next_slide = parseInt(e.target.id);\n this.current_slide = this.current_slide === null ? 0 : this.next_slide;\n this.next_slide = _next_slide;\n direction = _next_slide < this.current_slide ? 'left' : 'right';\n this.direction = direction;\n\n if (this.current_slide === this.next_slide) {\n return false;\n }\n\n this.beforeAnimationStarts();\n this.doAnimation().then(this.afterAnimationEnds.bind(this));\n this.current_slide = _next_slide;\n }\n } // autoControl: Is the controller responsibile for handling the auto animations.\n // ==============================================================================\n\n\n autoControl() {\n const shouldSwap = this.direction === null ? false : this.autoDirection !== this.direction;\n const total_slides = this.container !== null ? this.container.children.length - 1 : false;\n\n if (!total_slides) {\n clearTimeout(this.delay_timer);\n return false;\n }\n\n if (this.pause) {\n return false;\n }\n\n if (!this.autoDirection) {\n return false;\n }\n\n if (shouldSwap) {\n this.next_slide ^= this.current_slide;\n this.current_slide ^= this.next_slide;\n this.next_slide ^= this.current_slide;\n\n if (this.next_slide === this.current_slide) {\n if (this.autoDirection === 'left') {\n this.next_slide = this.current_slide - 1 === -1 ? total_slides : this.current_slide - 1;\n }\n\n if (this.autoDirection === 'right') {\n this.next_slide = this.current_slide + 1 > total_slides + 1 ? 0 : this.current_slide + 1;\n }\n }\n }\n\n if (this.autoDirection === 'left' && !shouldSwap) {\n if (this.current_slide && this.next_slide === null) {\n this.next_slide = this.current_slide - 1 === -1 ? total_slides : this.current_slide - 1;\n } else if (this.next_slide === this.current_slide && this.current_slide !== null && this.next_slide !== null) {\n this.next_slide = this.current_slide - 1 === -1 ? total_slides : this.current_slide - 1;\n } else {\n this.current_slide = this.current_slide === null ? 0 : this.current_slide - 1 === -1 ? total_slides : this.current_slide - 1;\n this.next_slide = this.next_slide === null ? total_slides : this.current_slide === 0 ? total_slides : this.current_slide - 1;\n }\n } else if (this.autoDirection === 'right' && !shouldSwap) {\n if (this.current_slide && this.next_slide === null) {\n this.next_slide = this.current_slide + 1 === total_slides + 1 ? 0 : this.current_slide + 1;\n } else if (this.next_slide === this.current_slide && this.current_slide !== null && this.next_slide !== null) {\n this.next_slide = this.current_slide + 1 === total_slides + 1 ? 0 : this.current_slide + 1;\n } else {\n this.current_slide = this.current_slide === null ? 0 : this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\n this.next_slide = this.next_slide === null ? 1 : this.current_slide + 1 > total_slides ? 0 : this.current_slide + 1;\n }\n }\n\n this.direction = this.autoDirection;\n this.beforeAnimationStarts();\n this.doAnimation(this.autoDirection).then(this.afterAnimationEnds.bind(this));\n }\n\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Controllers);\n\n//# sourceURL=webpack://TidyCarousel/./dev/scripts/controllers.js?"); /***/ }), -/***/ "./node_modules/style-loader/lib/addStyles.js": -/*!****************************************************!*\ - !*** ./node_modules/style-loader/lib/addStyles.js ***! - \****************************************************/ -/*! no static exports found */ -/*! ModuleConcatenation bailout: Module is not an ECMAScript module */ -/***/ (function(module, exports, __webpack_require__) { +/***/ "./dev/scripts/methods.js": +/***/ (function(module, __webpack_exports__, __webpack_require__) { -eval("/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n\nvar stylesInDom = {};\n\nvar\tmemoize = function (fn) {\n\tvar memo;\n\n\treturn function () {\n\t\tif (typeof memo === \"undefined\") memo = fn.apply(this, arguments);\n\t\treturn memo;\n\t};\n};\n\nvar isOldIE = memoize(function () {\n\t// Test for IE <= 9 as proposed by Browserhacks\n\t// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805\n\t// Tests for existence of standard globals is to allow style-loader\n\t// to operate correctly into non-standard environments\n\t// @see https://github.com/webpack-contrib/style-loader/issues/177\n\treturn window && document && document.all && !window.atob;\n});\n\nvar getTarget = function (target, parent) {\n if (parent){\n return parent.querySelector(target);\n }\n return document.querySelector(target);\n};\n\nvar getElement = (function (fn) {\n\tvar memo = {};\n\n\treturn function(target, parent) {\n // If passing function in options, then use it for resolve \"head\" element.\n // Useful for Shadow Root style i.e\n // {\n // insertInto: function () { return document.querySelector(\"#foo\").shadowRoot }\n // }\n if (typeof target === 'function') {\n return target();\n }\n if (typeof memo[target] === \"undefined\") {\n\t\t\tvar styleTarget = getTarget.call(this, target, parent);\n\t\t\t// Special case to return head of iframe instead of iframe itself\n\t\t\tif (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n\t\t\t\ttry {\n\t\t\t\t\t// This will throw an exception if access to iframe is blocked\n\t\t\t\t\t// due to cross-origin restrictions\n\t\t\t\t\tstyleTarget = styleTarget.contentDocument.head;\n\t\t\t\t} catch(e) {\n\t\t\t\t\tstyleTarget = null;\n\t\t\t\t}\n\t\t\t}\n\t\t\tmemo[target] = styleTarget;\n\t\t}\n\t\treturn memo[target]\n\t};\n})();\n\nvar singleton = null;\nvar\tsingletonCounter = 0;\nvar\tstylesInsertedAtTop = [];\n\nvar\tfixUrls = __webpack_require__(/*! ./urls */ \"./node_modules/style-loader/lib/urls.js\");\n\nmodule.exports = function(list, options) {\n\tif (typeof DEBUG !== \"undefined\" && DEBUG) {\n\t\tif (typeof document !== \"object\") throw new Error(\"The style-loader cannot be used in a non-browser environment\");\n\t}\n\n\toptions = options || {};\n\n\toptions.attrs = typeof options.attrs === \"object\" ? options.attrs : {};\n\n\t// Force single-tag solution on IE6-9, which has a hard limit on the # of