diff --git a/.eslintrc.json b/.eslintrc.json index 61a6866..b35cbdc 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,28 +1,14 @@ { - "env": { - "browser": true, - "es2021": true - }, - "extends": "eslint:recommended", - "parserOptions": { - "ecmaVersion": 12 - }, - "rules": { - "indent": [ - "error", - 2 - ], - "linebreak-style": [ - "error", - "unix" - ], - "quotes": [ - "error", - "single" - ], - "semi": [ - "error", - "always" - ] - } + "env": { + "browser": true + }, + "extends": [ + "eslint:recommended", + "google" + ], + "rules": { + "no-var": "off", + "require-jsdoc": "off", + "no-prototype-builtins": "off" + } } diff --git a/package.json b/package.json index 5ae5957..fd17105 100644 --- a/package.json +++ b/package.json @@ -1,22 +1,22 @@ { - "name": "how-to", + "name": "ui-components", "version": "1.0.0", - "description": "Code snippets for HTML, CSS and JavaScript.", + "description": "User Interface Components", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", - "url": "git+https://github.com/itchief/how-to.git" + "url": "git+https://github.com/itchief/ui-components.git" }, - "author": "", + "author": "Alexander Maltsev", "license": "ISC", "bugs": { - "url": "https://github.com/itchief/how-to/issues" + "url": "https://github.com/itchief/ui-components/issues" }, - "homepage": "https://github.com/itchief/how-to#readme", + "homepage": "https://github.com/itchief/ui-components#readme", "devDependencies": { - "eslint": "^7.25.0" + "eslint-config-google": "^0.14.0" } } diff --git a/simple-adaptive-slider/simple-adaptive-slider.js b/simple-adaptive-slider/simple-adaptive-slider.js index 695d0c7..f46e3d8 100644 --- a/simple-adaptive-slider/simple-adaptive-slider.js +++ b/simple-adaptive-slider/simple-adaptive-slider.js @@ -1,4 +1,4 @@ -/*! +/* * SimpleAdaptiveSlider by Itchief v2.0.0 (https://github.com/itchief/ui-components/tree/master/simple-adaptive-slider) * Copyright 2020 - 2021 Alexander Maltsev * Licensed under MIT (https://github.com/itchief/ui-components/blob/master/LICENSE) @@ -76,7 +76,8 @@ function SimpleAdaptiveSlider(selector, config) { var translate = -this._$itemList.length * 100; this._$itemList[count].dataset.order = -1; this._$itemList[count].dataset.translate = -this._$itemList.length * 100; - this._$itemList[count].style.transform = 'translateX('.concat(translate, '%)'); + var transformValue = 'translateX('.concat(translate, '%)'); + this._$itemList[count].style.transform = transformValue; } // добавляем индикаторы к слайдеру this._addIndicators(); @@ -91,11 +92,15 @@ function SimpleAdaptiveSlider(selector, config) { } // set active class -SimpleAdaptiveSlider.prototype._setActiveClass = function () { +SimpleAdaptiveSlider.prototype._setActiveClass = function() { // slides - for (var i = 0, length = this._$itemList.length; i < length; i++) { - var $item = this._$itemList[i]; - var index = parseInt($item.dataset.index); + var i; + var length; + var $item; + var index; + for (i = 0, length = this._$itemList.length; i < length; i++) { + $item = this._$itemList[i]; + index = parseInt($item.dataset.index); if (this._currentIndex === index) { $item.classList.add(ITEM_CLASS_ACTIVE); } else { @@ -105,9 +110,9 @@ SimpleAdaptiveSlider.prototype._setActiveClass = function () { // indicators var $indicators = this._$root.querySelectorAll('.' + INDICATOR_ITEM_CLASS); if ($indicators.length) { - for (var i = 0, length = $indicators.length; i < length; i++) { - var $item = $indicators[i]; - var index = parseInt($item.dataset.slideTo); + for (i = 0, length = $indicators.length; i < length; i++) { + $item = $indicators[i]; + index = parseInt($item.dataset.slideTo); if (this._currentIndex === index) { $item.classList.add(INDICATOR_ITEM_CLASS_ACTIVE); } else { @@ -121,7 +126,7 @@ SimpleAdaptiveSlider.prototype._setActiveClass = function () { return; } if (this._config.loop) { - for (var i = 0, length = $controls.length; i < length; i++) { + for (i = 0, length = $controls.length; i < length; i++) { $controls[i].classList.add(CONTROL_CLASS_SHOW); } } else { @@ -139,14 +144,15 @@ SimpleAdaptiveSlider.prototype._setActiveClass = function () { }; // смена слайдов -SimpleAdaptiveSlider.prototype._move = function () { +SimpleAdaptiveSlider.prototype._move = function() { if (this._direction === 'none') { this._$items.classList.remove(TRANSITION_NONE); this._$items.style.transform = 'translateX('.concat(this._transform, '%)'); return; } if (!this._config.loop) { - if (this._currentIndex + 1 >= this._$itemList.length && this._direction === 'next') { + var condition = this._currentIndex + 1 >= this._$itemList.length; + if (condition && this._direction === 'next') { this._autoplay('stop'); return; } @@ -171,7 +177,7 @@ SimpleAdaptiveSlider.prototype._move = function () { }; // функция для перемещения к слайду по индексу -SimpleAdaptiveSlider.prototype._moveTo = function (index) { +SimpleAdaptiveSlider.prototype._moveTo = function(index) { var currentIndex = this._currentIndex; this._direction = index > currentIndex ? 'next' : 'prev'; for (var i = 0; i < Math.abs(index - currentIndex); i++) { @@ -180,7 +186,7 @@ SimpleAdaptiveSlider.prototype._moveTo = function (index) { }; // метод для автоматической смены слайдов -SimpleAdaptiveSlider.prototype._autoplay = function (action) { +SimpleAdaptiveSlider.prototype._autoplay = function(action) { if (!this._config.autoplay) { return; } @@ -190,18 +196,17 @@ SimpleAdaptiveSlider.prototype._autoplay = function (action) { return; } if (this._intervalId === null) { - this._intervalId = setInterval( - function () { - this._direction = 'next'; - this._move(); - }.bind(this), - this._config.interval + this._intervalId = setInterval(function() { + this._direction = 'next'; + this._move(); + }.bind(this), + this._config.interval ); } }; // добавление индикаторов -SimpleAdaptiveSlider.prototype._addIndicators = function () { +SimpleAdaptiveSlider.prototype._addIndicators = function() { if (this._$root.querySelector('.' + INDICATOR_WRAPPER_CLASS)) { return; } @@ -217,7 +222,7 @@ SimpleAdaptiveSlider.prototype._addIndicators = function () { }; // refresh extreme values -SimpleAdaptiveSlider.prototype._refreshExtremeValues = function () { +SimpleAdaptiveSlider.prototype._refreshExtremeValues = function() { var $itemList = this._$itemList; this._minOrder = parseInt($itemList[0].dataset.order); this._maxOrder = this._minOrder; @@ -241,7 +246,7 @@ SimpleAdaptiveSlider.prototype._refreshExtremeValues = function () { }; // balancing items -SimpleAdaptiveSlider.prototype._balancingItems = function () { +SimpleAdaptiveSlider.prototype._balancingItems = function() { if (!this._balancingItemsFlag) { return; } @@ -249,11 +254,13 @@ SimpleAdaptiveSlider.prototype._balancingItems = function () { var wrapperRect = $wrapper.getBoundingClientRect(); var halfWidthItem = wrapperRect.width / 2; var count = this._$itemList.length; + var translate; + var clientRect; if (this._direction === 'next') { var wrapperLeft = wrapperRect.left; var $min = this._$itemWithMinOrder; - var translate = this._minTranslate; - var clientRect = $min.getBoundingClientRect(); + translate = this._minTranslate; + clientRect = $min.getBoundingClientRect(); if (clientRect.right < wrapperLeft - halfWidthItem) { $min.dataset.order = this._minOrder + count; translate += count * 100; @@ -264,8 +271,8 @@ SimpleAdaptiveSlider.prototype._balancingItems = function () { } else if (this._direction === 'prev') { var wrapperRight = wrapperRect.right; var $max = this._$itemWithMaxOrder; - var translate = this._maxTranslate; - var clientRect = $max.getBoundingClientRect(); + translate = this._maxTranslate; + clientRect = $max.getBoundingClientRect(); if (clientRect.left > wrapperRight + halfWidthItem) { $max.dataset.order = this._maxOrder - count; translate -= count * 100; @@ -278,7 +285,7 @@ SimpleAdaptiveSlider.prototype._balancingItems = function () { }; // adding listeners -SimpleAdaptiveSlider.prototype._addEventListener = function () { +SimpleAdaptiveSlider.prototype._addEventListener = function() { function onClick(e) { var $target = e.target; this._autoplay('stop'); @@ -382,8 +389,10 @@ SimpleAdaptiveSlider.prototype._addEventListener = function () { this._$root.addEventListener('click', onClick.bind(this)); // transitionstart and transitionend if (this._config.loop) { - this._$items.addEventListener('transitionstart', onTransitionStart.bind(this)); - this._$items.addEventListener('transitionend', onTransitionEnd.bind(this)); + this._$items.addEventListener('transitionstart', + onTransitionStart.bind(this)); + this._$items.addEventListener('transitionend', + onTransitionEnd.bind(this)); } // mouseenter and mouseleave if (this._config.autoplay) { @@ -392,8 +401,8 @@ SimpleAdaptiveSlider.prototype._addEventListener = function () { } // swipe if (this._config.swipe) { - this._$root.addEventListener('touchstart', onSwipeStart.bind(this), { passive: true }); - this._$root.addEventListener('touchmove', onSwipeMove.bind(this), { passive: true }); + this._$root.addEventListener('touchstart', onSwipeStart.bind(this)); + this._$root.addEventListener('touchmove', onSwipeMove.bind(this)); this._$root.addEventListener('mousedown', onSwipeStart.bind(this)); this._$root.addEventListener('mousemove', onSwipeMove.bind(this)); document.addEventListener('touchend', onSwipeEnd.bind(this)); @@ -405,18 +414,18 @@ SimpleAdaptiveSlider.prototype._addEventListener = function () { }; // перейти к следующему слайду -SimpleAdaptiveSlider.prototype.next = function () { +SimpleAdaptiveSlider.prototype.next = function() { this._direction = 'next'; this._move(); }; // перейти к предыдущему слайду -SimpleAdaptiveSlider.prototype.prev = function () { +SimpleAdaptiveSlider.prototype.prev = function() { this._direction = 'prev'; this._move(); }; // управление автоматической сменой слайдов -SimpleAdaptiveSlider.prototype.autoplay = function (action) { +SimpleAdaptiveSlider.prototype.autoplay = function(action) { this._autoplay('stop'); }; diff --git a/simple-adaptive-slider/simple-adaptive-slider.min.js b/simple-adaptive-slider/simple-adaptive-slider.min.js index 6e9ebdc..5db112b 100644 --- a/simple-adaptive-slider/simple-adaptive-slider.min.js +++ b/simple-adaptive-slider/simple-adaptive-slider.min.js @@ -1 +1 @@ -var WRAPPER_SELECTOR=".slider__wrapper",ITEMS_SELECTOR=".slider__items",ITEM_SELECTOR=".slider__item",ITEM_CLASS_ACTIVE="slider__item_active",CONTROL_SELECTOR=".slider__control",CONTROL_CLASS_SHOW="slider__control_show",INDICATOR_WRAPPER_ELEMENT="ol",INDICATOR_WRAPPER_CLASS="slider__indicators",INDICATOR_ITEM_ELEMENT="li",INDICATOR_ITEM_CLASS="slider__indicator",INDICATOR_ITEM_CLASS_ACTIVE="slider__indicator_active",POS_THRESHOLD=40,TRANSITION_NONE="transition-none";function SimpleAdaptiveSlider(t,i){for(var e in this._$root=document.querySelector(t),this._$wrapper=this._$root.querySelector(WRAPPER_SELECTOR),this._$items=this._$root.querySelector(ITEMS_SELECTOR),this._$itemList=this._$root.querySelectorAll(ITEM_SELECTOR),this._currentIndex=0,this._minOrder=0,this._maxOrder=0,this._$itemWithMinOrder=null,this._$itemWithMaxOrder=null,this._minTranslate=0,this._maxTranslate=0,this._direction="next",this._balancingItemsFlag=!1,this._transform=0,this._hasSwipeState=!1,this._swipeStartPos=0,this._intervalId=null,this._config={loop:!0,autoplay:!1,interval:5e3,swipe:!0},i)this._config.hasOwnProperty(e)&&(this._config[e]=i[e]);for(var s=0,r=this._$itemList.length;s=this._$itemList.length&&"next"===this._direction)return void this._autoplay("stop");if(this._currentIndex<=0&&"prev"===this._direction)return}var t="next"===this._direction?-100:100,i=this._transform+t;"next"===this._direction?++this._currentIndex>this._$itemList.length-1&&(this._currentIndex-=this._$itemList.length):--this._currentIndex<0&&(this._currentIndex+=this._$itemList.length),this._transform=i,this._$items.style.transform="translateX(".concat(i,"%)"),this._setActiveClass()},SimpleAdaptiveSlider.prototype._moveTo=function(t){var i=this._currentIndex;this._direction=t>i?"next":"prev";for(var e=0;ethis._maxOrder&&(this._maxOrder=r,this._$itemWithMaxOrder=s,this._minTranslate=parseInt(s.dataset.translate))}},SimpleAdaptiveSlider.prototype._balancingItems=function(){if(this._balancingItemsFlag){var t=this._$wrapper.getBoundingClientRect(),i=t.width/2,e=this._$itemList.length;if("next"===this._direction){var s=t.left,r=this._$itemWithMinOrder,n=this._minTranslate;r.getBoundingClientRect().righta+i&&(o.dataset.order=this._maxOrder-e,n-=100*e,o.dataset.translate=n,o.style.transform="translateX(".concat(n,"%)"),this._refreshExtremeValues())}requestAnimationFrame(this._balancingItems.bind(this))}},SimpleAdaptiveSlider.prototype._addEventListener=function(){function t(t){this._autoplay("stop");var i=0===t.type.search("touch")?t.touches[0]:t;this.swipeStartPos=i.clientX,this._hasSwipeState=!0}function i(t){if(this._hasSwipeState){var i=0===t.type.search("touch")?t.touches[0]:t,e=this.swipeStartPos-i.clientX;this._config.loop||(this._currentIndex+1>=this._$itemList.length&&e>=0&&(e/=4),this._currentIndex<=0&&e<=0&&(e/=4));var s=e/this._$wrapper.getBoundingClientRect().width*100,r=this._transform-s;this._$items.classList.add(TRANSITION_NONE),this._$items.style.transform="translateX(".concat(r,"%)")}}function e(t){if(this._hasSwipeState){var i=0===t.type.search("touch")?t.changedTouches[0]:t,e=this.swipeStartPos-i.clientX;this._config.loop||(this._currentIndex+1>=this._$itemList.length&&e>=0&&(e/=4),this._currentIndex<=0&&e<=0&&(e/=4));var s=e/this._$wrapper.getBoundingClientRect().width*100;this._$items.classList.remove(TRANSITION_NONE),s>POS_THRESHOLD?(this._direction="next",this._move()):s<-POS_THRESHOLD?(this._direction="prev",this._move()):(this._direction="none",this._move()),this._hasSwipeState=!1,this._config.loop&&this._autoplay()}}this._$root.addEventListener("click",function(t){var i=t.target;if(this._autoplay("stop"),i.classList.contains("slider__control"))t.preventDefault(),this._direction=i.dataset.slide,this._move();else if(i.dataset.slideTo){t.preventDefault();var e=parseInt(i.dataset.slideTo);this._moveTo(e)}this._config.loop&&this._autoplay()}.bind(this)),this._config.loop&&(this._$items.addEventListener("transitionstart",function(){this._balancingItemsFlag=!0,window.requestAnimationFrame(this._balancingItems.bind(this))}.bind(this)),this._$items.addEventListener("transitionend",function(){this._balancingItemsFlag=!1}.bind(this))),this._config.autoplay&&(this._$root.addEventListener("mouseenter",function(){this._autoplay("stop")}.bind(this)),this._$root.addEventListener("mouseleave",function(){this._config.loop&&this._autoplay()}.bind(this))),this._config.swipe&&(this._$root.addEventListener("touchstart",t.bind(this),{passive:!0}),this._$root.addEventListener("touchmove",i.bind(this),{passive:!0}),this._$root.addEventListener("mousedown",t.bind(this)),this._$root.addEventListener("mousemove",i.bind(this)),document.addEventListener("touchend",e.bind(this)),document.addEventListener("mouseup",e.bind(this))),this._$root.addEventListener("dragstart",function(t){t.preventDefault()}.bind(this)),document.addEventListener("visibilitychange",function(){"hidden"===document.visibilityState?this._autoplay("stop"):"visible"===document.visibilityState&&this._config.loop&&this._autoplay()}.bind(this))},SimpleAdaptiveSlider.prototype.next=function(){this._direction="next",this._move()},SimpleAdaptiveSlider.prototype.prev=function(){this._direction="prev",this._move()},SimpleAdaptiveSlider.prototype.autoplay=function(t){this._autoplay("stop")}; \ No newline at end of file +var WRAPPER_SELECTOR=".slider__wrapper",ITEMS_SELECTOR=".slider__items",ITEM_SELECTOR=".slider__item",ITEM_CLASS_ACTIVE="slider__item_active",CONTROL_SELECTOR=".slider__control",CONTROL_CLASS_SHOW="slider__control_show",INDICATOR_WRAPPER_ELEMENT="ol",INDICATOR_WRAPPER_CLASS="slider__indicators",INDICATOR_ITEM_ELEMENT="li",INDICATOR_ITEM_CLASS="slider__indicator",INDICATOR_ITEM_CLASS_ACTIVE="slider__indicator_active",POS_THRESHOLD=40,TRANSITION_NONE="transition-none";function SimpleAdaptiveSlider(t,i){for(var e in this._$root=document.querySelector(t),this._$wrapper=this._$root.querySelector(WRAPPER_SELECTOR),this._$items=this._$root.querySelector(ITEMS_SELECTOR),this._$itemList=this._$root.querySelectorAll(ITEM_SELECTOR),this._currentIndex=0,this._minOrder=0,this._maxOrder=0,this._$itemWithMinOrder=null,this._$itemWithMaxOrder=null,this._minTranslate=0,this._maxTranslate=0,this._direction="next",this._balancingItemsFlag=!1,this._transform=0,this._hasSwipeState=!1,this._swipeStartPos=0,this._intervalId=null,this._config={loop:!0,autoplay:!1,interval:5e3,swipe:!0},i)this._config.hasOwnProperty(e)&&(this._config[e]=i[e]);for(var s=0,r=this._$itemList.length;s=this._$itemList.length&&"next"===this._direction)return void this._autoplay("stop");if(this._currentIndex<=0&&"prev"===this._direction)return}var t="next"===this._direction?-100:100,i=this._transform+t;"next"===this._direction?++this._currentIndex>this._$itemList.length-1&&(this._currentIndex-=this._$itemList.length):--this._currentIndex<0&&(this._currentIndex+=this._$itemList.length),this._transform=i,this._$items.style.transform="translateX(".concat(i,"%)"),this._setActiveClass()},SimpleAdaptiveSlider.prototype._moveTo=function(t){var i=this._currentIndex;this._direction=t>i?"next":"prev";for(var e=0;ethis._maxOrder&&(this._maxOrder=r,this._$itemWithMaxOrder=s,this._minTranslate=parseInt(s.dataset.translate))}},SimpleAdaptiveSlider.prototype._balancingItems=function(){if(this._balancingItemsFlag){var t,i=this._$wrapper.getBoundingClientRect(),e=i.width/2,s=this._$itemList.length;if("next"===this._direction){var r=i.left,n=this._$itemWithMinOrder;t=this._minTranslate,n.getBoundingClientRect().righta+e&&(o.dataset.order=this._maxOrder-s,t-=100*s,o.dataset.translate=t,o.style.transform="translateX(".concat(t,"%)"),this._refreshExtremeValues())}requestAnimationFrame(this._balancingItems.bind(this))}},SimpleAdaptiveSlider.prototype._addEventListener=function(){function t(t){this._autoplay("stop");var i=0===t.type.search("touch")?t.touches[0]:t;this.swipeStartPos=i.clientX,this._hasSwipeState=!0}function i(t){if(this._hasSwipeState){var i=0===t.type.search("touch")?t.touches[0]:t,e=this.swipeStartPos-i.clientX;this._config.loop||(this._currentIndex+1>=this._$itemList.length&&e>=0&&(e/=4),this._currentIndex<=0&&e<=0&&(e/=4));var s=e/this._$wrapper.getBoundingClientRect().width*100,r=this._transform-s;this._$items.classList.add(TRANSITION_NONE),this._$items.style.transform="translateX(".concat(r,"%)")}}function e(t){if(this._hasSwipeState){var i=0===t.type.search("touch")?t.changedTouches[0]:t,e=this.swipeStartPos-i.clientX;this._config.loop||(this._currentIndex+1>=this._$itemList.length&&e>=0&&(e/=4),this._currentIndex<=0&&e<=0&&(e/=4));var s=e/this._$wrapper.getBoundingClientRect().width*100;this._$items.classList.remove(TRANSITION_NONE),s>POS_THRESHOLD?(this._direction="next",this._move()):s<-POS_THRESHOLD?(this._direction="prev",this._move()):(this._direction="none",this._move()),this._hasSwipeState=!1,this._config.loop&&this._autoplay()}}this._$root.addEventListener("click",function(t){var i=t.target;if(this._autoplay("stop"),i.classList.contains("slider__control"))t.preventDefault(),this._direction=i.dataset.slide,this._move();else if(i.dataset.slideTo){t.preventDefault();var e=parseInt(i.dataset.slideTo);this._moveTo(e)}this._config.loop&&this._autoplay()}.bind(this)),this._config.loop&&(this._$items.addEventListener("transitionstart",function(){this._balancingItemsFlag=!0,window.requestAnimationFrame(this._balancingItems.bind(this))}.bind(this)),this._$items.addEventListener("transitionend",function(){this._balancingItemsFlag=!1}.bind(this))),this._config.autoplay&&(this._$root.addEventListener("mouseenter",function(){this._autoplay("stop")}.bind(this)),this._$root.addEventListener("mouseleave",function(){this._config.loop&&this._autoplay()}.bind(this))),this._config.swipe&&(this._$root.addEventListener("touchstart",t.bind(this)),this._$root.addEventListener("touchmove",i.bind(this)),this._$root.addEventListener("mousedown",t.bind(this)),this._$root.addEventListener("mousemove",i.bind(this)),document.addEventListener("touchend",e.bind(this)),document.addEventListener("mouseup",e.bind(this))),this._$root.addEventListener("dragstart",function(t){t.preventDefault()}.bind(this)),document.addEventListener("visibilitychange",function(){"hidden"===document.visibilityState?this._autoplay("stop"):"visible"===document.visibilityState&&this._config.loop&&this._autoplay()}.bind(this))},SimpleAdaptiveSlider.prototype.next=function(){this._direction="next",this._move()},SimpleAdaptiveSlider.prototype.prev=function(){this._direction="prev",this._move()},SimpleAdaptiveSlider.prototype.autoplay=function(t){this._autoplay("stop")}; \ No newline at end of file