@agilie/action-button - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/js/common.js

 function ActionBtn(elemsContainer, options = {}) {
+	this.getOpenStatus = function() {
+		return isOpen;
+	}
+	this.open = function() {
+		isOpen = true;
+		openItems();
+	}
+	this.close = function() {
+		isOpen = false;
+		closeItems();
+	}
+	this.toggleStatus = function() {
+		isOpen ? closeItems() : openItems();
+	}
+	this.onOpen = function(callback) {
+		document.addEventListener('ActionBtnOpened', function() {
+			callback();
+		})
+	}
+	this.onClose = function(callback) {
+		document.addEventListener('ActionBtnClosed', function() {
+			callback();
+		})
+	}
 	var isOpen = false;
 	var animDuration = 0;
+	var timer1;
+	var timer2;
 	var defaultOptions = {
-		actionBtnSize: 100,
+		actionBtnSize: 80,
 		actionBtnColor: 'rgb(249, 180, 120)',
-		itemsSize: 60,
+		itemsSize: 45,
 		itemsColors: ['rgb(117, 174, 253)', 'rgb(247, 113, 109)', 'rgb(251, 213, 112)'],
-		itemsGap: 100,
+		itemsGap: 20,
 		itemsOpenType: 'radial',
@@ -19,4 +45,5 @@ itemsOpenDirection: 'top-left'
 	}
+	var wrapper = createWrapper();
 	var items = elemsContainer.children;
-
+	var containerBackground = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0"><defs><filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" /><feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" /><feBlend in="SourceGraphic" in2="goo" /></filter></defs></svg>';
 	var actionBtnOpened = new CustomEvent("ActionBtnOpened", {
@@ -36,15 +63,37 @@ detail: {
 	});
-	init();
+	function getAnimationDuration() {
+		return animDuration;
+	}
+	function startTimer1() {
+		var time = getAnimationDuration();
+		timer1 = setTimeout(function() {
+			elems.btn.dispatchEvent(actionBtnOpened);
+		}, time * 1000);
+	}
+	function stopTimer1() {
+		clearTimeout(timer1);
+	}
+	function startTimer2() {
+		var time = getAnimationDuration();
+		timer2 = setTimeout(function() {
+			elems.btn.dispatchEvent(actionBtnClosed);
+		}, time * 1000);
+	}
+	function stopTimer2() {
+		clearTimeout(timer2);
+	}
 	function init() {
+		checkItemsNumber(elems.items);
 		configurateItems();
 		elems.container.insertBefore(elems.btn, elems.container.firstChild);
+		elems.container.insertAdjacentHTML('afterend', containerBackground);
 		elems.container.classList.add('addBtn__wrap');
-		elems.container.classList.add(setOpenDirection(settings.itemsOpenDirection));
+
+		var parentElem = elems.container.parentNode;
+		parentElem.appendChild(wrapper);
+		wrapper.appendChild(elems.container);
+
+		// elems.container.classList.add(setOpenDirection(settings.itemsOpenDirection));
 	}
-	function OpenTypeException(msg) {
-		this.message = msg;
-	}
-	function OpenDirectionException(msg) {
-		this.message = msg;
-	}
+	init();
 	function setOpenType(type = 'radial') {
@@ -58,3 +107,3 @@ if (type === 'radial') {
 		} else {
-			throw new OpenTypeException('Wrong open type!');
+			throw new Error('Wrong open type!');
 		}
@@ -72,3 +121,3 @@ }
 		} else {
-			throw new OpenDirectionException('Wrong open direction!');
+			throw new Error('Wrong open direction!');
 		}
@@ -80,30 +129,29 @@ }
 	function openItems() {
-		var toggleClass = setOpenType(settings.itemsOpenType),
-				btnElem = elems.btn;
+		var elemsTranforms = calcRadialTransform();
+		var btnElem = elems.btn;
 
+		setWrapSize();
 		btnElem.classList.remove('addBtn--close');
 		btnElem.classList.add('addBtn--open');
 		btnElem.style.animationIterationCount = items.length - 1;
-		for(var i = 1; i < items.length; i++) {
-			items[i].classList.add(toggleClass);
-		}
+		elems.items.forEach(function(item, index) {
+			item.style.transform = `translate(${elemsTranforms[index].x}, ${elemsTranforms[index].y})`;
+		})
 		isOpen = true;
-		setTimeout(function() {
-			btnElem.dispatchEvent(actionBtnOpened);
-		}, animDuration * 1000);
+		stopTimer2();
+		startTimer1();
 	}
 	function closeItems() {
-		var toggleClass = setOpenType(settings.itemsOpenType),
-				btnElem = elems.btn;
+		var btnElem = elems.btn;
 
+		removeWrapSize();
 		btnElem.classList.remove('addBtn--open');
 		btnElem.classList.add('addBtn--close');
 		btnElem.style.animationIterationCount = items.length - 1;
-		for(var i = 1; i < items.length; i++) {
-			items[i].classList.remove(toggleClass);
-		}
+		elems.items.forEach(function(item, index) {
+			item.style.transform = 'translate(0)';
+		})
 		isOpen = false;
-		setTimeout(function() {
-			btnElem.dispatchEvent(actionBtnClosed);
-		}, animDuration * 1000);
+		stopTimer1();
+		startTimer2();
 	}
@@ -132,5 +180,68 @@ function createActionBtn(size, color) {
 	}
-	this.checkOpenStatus = function() {
-		return isOpen;
+	function calcRadialTransform(distance = settings.itemsGap) {
+		if (checkGap(distance)) {
+			var arrOfTransforms = [];
+			var realGap = distance + (settings.actionBtnSize / 2) + (settings.itemsSize / 2);
+			var oxDistance = realGap * Math.cos(45 * Math.PI / 180);
+			var oyDistance = realGap * Math.sin(45 * Math.PI / 180);
+			var firstElem, secondElem, thirdElem, fourElem, fiveElem;
+			var firstElem = {
+				x: '0px',
+				y: `-${realGap}px`
+			};
+			var secondElem = {
+				x: `-${oxDistance}px`,
+				y: `-${oyDistance}px`
+			};
+			var thirdElem = {
+				x: `-${realGap}px`,
+				y: '0px'
+			};
+			var fourElem = {
+				x: `-${oxDistance}px`,
+				y: `${oyDistance}px`
+			};
+			var fiveElem = {
+				x: '0px',
+				y: `${realGap}px`
+			};
+			arrOfTransforms.push(firstElem, secondElem, thirdElem, fourElem, fiveElem);
+		} else {
+			throw new Error('Please set more gap between Action-button and items.');
+		}
+
+		return arrOfTransforms;
 	}
+	function checkGap(gap) {
+		return gap > 0 ? true : false;
+	}
+	function checkItemsNumber(items) {
+		if (items.length > 5) {
+			throw new Error('Max items count is 5!!!');
+		}
+	}
+	function calcWrapSize() {
+		var size = ((settings.actionBtnSize / 2) + settings.itemsGap + settings.itemsSize + 20) * 2;
+
+		return size;
+	}
+	function setWrapSize() {
+		elemsContainer.classList.add('addBtn__wrap--active');
+		elemsContainer.style.width = `${calcWrapSize()}px`;
+		elemsContainer.style.height = `${calcWrapSize()}px`;
+	}
+	function removeWrapSize() {
+		elemsContainer.classList.remove('addBtn__wrap--active');
+		elemsContainer.style.width = 'auto';
+		elemsContainer.style.height = 'auto';
+	}
+	function createWrapper() {
+		var wrap = document.createElement('div');
+		
+		wrap.classList.add('addBtn__wrapper');
+		wrap.style.width = `${settings.actionBtnSize}px`;
+		wrap.style.height = `${settings.actionBtnSize}px`;
+
+		return wrap;
+	}
 }

package.json

 {
   "name": "@agilie/action-button",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Action button for user interactions",
-  "main": "dist/common.js",
+  "main": "index.js",
   "scripts": {
@@ -7,0 +7,0 @@ "test": "echo \"Error: no test specified\" && exit 1"

README.md

@@ -11,12 +11,24 @@ # Agilie/Action-button
 
+1. From CDN:
+```html
+  <script src="https://unpkg.com/@agilie/action-button@0.1.1/dist/css/main.css"></script>
+  <script src="https://unpkg.com/@agilie/action-button@0.1.1/dist/js/common.js"></script>
 ```
+2. From Git Repository:
+```
+$ git clone https://github.com/agilie/action-button.git
+```
+3. From NPM:
+```
 $ npm install @agilie/action-button
 ```
 
+
 ## Usage
 
+1. From CDN:
 ```html
 <head>
-  <script src="../../dist/js/common.js"></script>
-  <link rel="stylesheet" href="../../dist/css/main.css">
+  <script src="https://unpkg.com/@agilie/action-button@0.1.1/dist/css/main.css"></script>
+  <script src="https://unpkg.com/@agilie/action-button@0.1.1/dist/js/common.js"></script>
 </head>
@@ -36,11 +48,36 @@ <body>
 ```
+2. From Git Repository:
+<head>
+  <script src="AddButton/dist/css/main.css"></script>
+  <script src="AddButton/dist/js/common.js"></script>
+</head>
+<body>
+  <div class="wrap" id="js-btn-wrap">
+    <div class="item"></div>
+    <div class="item"></div>
+    <div class="item"></div>
+  </div>
+</body>
+```
 
+```js
+var elemsWrap = document.getElementById('js-btn-wrap');
+var actionBtn = new ActionBtn(elemsWrap);
+```
+3. From NPM:
+import our package from your module bundler (webpack)
+```js
+var actionBtn = require('@agilie/action-button');
+```
+
 ##### As a result:
 
 ```html
-  <div class="wrap addBtn__wrap top-left" id="js-btn-wrap">
-    <button class="addBtn" type="button" style="width: 80px; height: 80px; background-image: url('/icons/plus_2.svg'); background-size: 30px; background-color: rgb(249, 180, 120);"></button>
-    <div class="item addBtn__item" style="background-color: rgb(117, 174, 253); transition-delay: 0s; transition-duration: 0.8s;"></div>
-    <div class="item addBtn__item" style="background-color: rgb(247, 113, 109); transition-delay: 0.5s; transition-duration: 0.8s;"></div>
-    <div class="item addBtn__item" style="background-color: rgb(251, 213, 112); transition-delay: 1s; transition-duration: 0.8s;"></div>
+  <div class="addBtn__wrapper" style="width: 80px; height: 80px;">
+    <div class="wrap addBtn__wrap" id="js-btn-wrap" style="width: auto; height: auto;">
+      <button class="addBtn addBtn--close" type="button" style="width: 80px; height: 80px; background-color: rgb(249, 180, 120); animation-iteration-count: 3;"></button>
+      <div class="item addBtn__item" style="height: 45px; width: 45px; background-color: rgb(117, 174, 253); transition-delay: 0s; transition-duration: 0.8s; transform: translate(0px);"></div>
+      <div class="item addBtn__item" style="height: 45px; width: 45px; background-color: rgb(247, 113, 109); transition-delay: 0.5s; transition-duration: 0.8s; transform: translate(0px);"></div>
+      <div class="item addBtn__item" style="height: 45px; width: 45px; background-color: rgb(251, 213, 112); transition-delay: 1s; transition-duration: 0.8s; transform: translate(0px);"></div>
+    </div>
   </div>
@@ -47,0 +84,0 @@ ```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Lines of code

897

increased by4.06%

Number of lines in readme file

106

increased by53.62%

Worsened metrics

Total package byte prevSize

35861

decreased by-34.35%

Number of package files

15

decreased by-21.05%

No dependency changes