orionjs - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

actions/data-class.js

@@ -24,3 +24,3 @@ //--------------------------------------------------------------------------------------------------------------------------------------
 - The behaviour which occurs when triggered. You have 3 choices:-
-	- "toggle": This adds the class if it's not already present or removes if it is
+	- "toggle": This adds the class if it's not already present or removes if it is (Default)
 	- "add": This adds the class if it's not present 
@@ -37,7 +37,11 @@ - "remove": This removes the class if it's present
 	- "true": Swipe event replaces click event
-	- "false": Swipe event and click event are both added
+	- "false": Swipe event and click event are both added (Default)
+
+data-class-scope (Optional)
+- A comma seperated list of classes relative to the trigger element which encapsulates the scope of the action.
+- If data-class-scope is not detected or "false" is passed, the scope is document-level.
 */
 
 
-// EXAMPLE
+// BASIC EXAMPLE
 //--------------------------------------------------------------------------------------------------------------------------------------
@@ -48,13 +52,34 @@
 
-In the above example, when our element is either clicked or a left swipe is detected the following happens:-
-	1) is-active class is toggled on js-elem
-	2) is-invalid class is removed from js-elem2
-	3) is-hidden class is added to js-elem3 
+In the above example, when our element is either clicked or a left swipe is detected the following happens:
+1) is-active class is toggled on any js-elem class
+2) is-invalid class is removed from any js-elem2 class
+3) is-hidden class is added to any js-elem3 class
 */ 
 
 
+// DATA-CLASS-SCOPE EXAMPLE
+//--------------------------------------------------------------------------------------------------------------------------------------
+
+/*
+<div class="js-parent">
+	<div class="js-elem" data-class="is-active" data-class-element="js-elem" data-class-scope="js-parent">Trigger 1</div>
+	<div class="js-elem" data-class="is-active, is-invalid" data-class-element="js-elem, js-elem" data-class-scope="false, js-parent">Trigger 2</div>
+	<div class="js-elem" data-class="is-active" data-class-element="js-parent" data-class-scope="js-parent">
+		Trigger 3
+		<div class="js-parent"></div>
+	</div>
+</div>
+<div class="js-elem" data-class="is-active" data-class-element="js-elem" data-class-scope="js-elem">Trigger 4</div>
+
+
+1) When "Trigger 1" is clicked, all instances of "js-elem" within "js-parent" will have "is-active" toggled.
+2) When "Trigger 2" is clicked, as the first scope is set to "false", all instances of "js-elem" everywhere will have "is-active" toggled. In addition, all instances of "js-elem" within "js-parent" will have "is-invalid" toggled.
+3) When "Trigger 3" is clicked, "is-active" will be added to all instances of "js-parent" within and including the first parent instance of "js-parent" relative to the trigger element.
+4) When "Trigger 4" is clicked, as it has itself defined as scope, it will toggle "is-active" on itself only.
+*/ 
+
+
 // CODE
 //--------------------------------------------------------------------------------------------------------------------------------------
 
-
 (function(){
@@ -64,56 +89,70 @@
 	var swipeDetect = require("../helpers/swipeDetect.js"),
+	// Import closestParent helper
+	closestParent = require("../helpers/closestParent.js"),
 	// Grab all elements with required data-attributes
 	elems = document.querySelectorAll("[data-class][data-class-element]"),
-	dataClass, 
-	dataClassElement,
-	dataClassBehaviour,
-	elem,
-	elemClass,
-	elemBehaviour,
-	elemSwipe,
-	elemSwipeBool,
-	direction,
-	currentElem,
-	elemRef,
-	a,
-	b,
 	processChange = function(elem){
-		// Grab data-class data and convert to array
-		dataClass = elem.getAttribute("data-class");
+		// Grab data-class list and convert to array
+		var dataClass = elem.getAttribute("data-class");
 		dataClass = dataClass.split(", ");
 
-		// Grab data-class-element data
-		dataClassElement = elem.getAttribute("data-class-element");
+		// Grab data-class-element list and convert to array
+		var dataClassElement = elem.getAttribute("data-class-element");
 		dataClassElement = dataClassElement.split(", ");
 
-		// Grab data-class-behaviour if present
+		// Grab data-class-behaviour list if present and convert to array
 		if(elem.getAttribute("data-class-behaviour")) {
-			dataClassBehaviour = elem.getAttribute("data-class-behaviour");
+			var dataClassBehaviour = elem.getAttribute("data-class-behaviour");
 			dataClassBehaviour = dataClassBehaviour.split(", ");
 		}
 
+		// Grab data-scope list if present and convert to array
+		if(elem.getAttribute("data-class-scope")) {
+			var dataClassScope = elem.getAttribute("data-class-scope");
+			dataClassScope = dataClassScope.split(", ");
+		}
+
 		// Loop through all our dataClassElement items
-		for(b = 0; b < dataClassElement.length; b++) {
-			// Grab elem reference
-			elemRef = document.querySelector("." + dataClassElement[b]);
+		for(var b = 0; b < dataClassElement.length; b++) {
+			// Grab elem references, apply scope if found
+			if(dataClassScope && dataClassScope[b] !== "false") {
+				// Grab parent
+				var elemParent = closestParent(elem, dataClassScope[b]),
+
+				// Grab all matching child elements of parent
+				elemRef = elemParent.querySelectorAll("." + dataClassElement[b]);
+
+				// Convert to array
+				elemRef = Array.prototype.slice.call(elemRef);
+
+				// Add parent if it matches the data-class-element and fits within scope
+				if(dataClassScope[b] === dataClassElement[b] && elemParent.classList.contains(dataClassElement[b])) {
+					elemRef.unshift(elemParent);
+				}
+			}
+			else {
+				var elemRef = document.querySelectorAll("." + dataClassElement[b]);
+			}
 			// Grab class we will add
-			elemClass = dataClass[b];
+			var elemClass = dataClass[b];
 			// Grab behaviour if any exists
 			if(dataClassBehaviour) {
-				elemBehaviour = dataClassBehaviour[b];
+				var elemBehaviour = dataClassBehaviour[b];
 			}
 			// Do
-			if(elemBehaviour === "add") {
-				if(!elemRef.classList.contains(elemClass)) {
-					elemRef.classList.add(elemClass);
+			for(var c = 0; c < elemRef.length; c++) {
+				if(elemBehaviour === "add") {
+					if(!elemRef[c].classList.contains(elemClass)) {
+						elemRef[c].classList.add(elemClass);
+					}
 				}
-			}
-			else if(elemBehaviour === "remove") {
-				if(elemRef.classList.contains(elemClass)) {
-					elemRef.classList.remove(elemClass);
+				else if(elemBehaviour === "remove") {
+					if(elemRef[c].classList.contains(elemClass)) {
+						elemRef[c].classList.remove(elemClass);
+					}
 				}
+				else {
+					elemRef[c].classList.toggle(elemClass);
+				}
 			}
-			else {
-				elemRef.classList.toggle(elemClass);
-			}
 		}
@@ -125,12 +164,13 @@ };
 		// Loop through our matches and add click events
-		for(a = 0; a < elems.length; a++){
+		for(var a = 0; a < elems.length; a++){
 			// Detect data-swipe attribute
 			if(elems[a].getAttribute("data-class-swipe")){
-				elemSwipe = elems[a].getAttribute("data-class-swipe");
-				elemSwipe = elemSwipe.split(", ");
-				direction = elemSwipe[0];
-				elemSwipeBool = elemSwipe[1];
+				// Grab swipe specific data     
+				var elemSwipe = elems[a].getAttribute("data-class-swipe"),
+				elemSwipe = elemSwipe.split(", "),
+				direction = elemSwipe[0],
+				elemSwipeBool = elemSwipe[1],
 				currentElem = elems[a];
 
-				if(elemSwipeBool === "false") {
+				if(elemSwipeBool === "false" || !elemSwipeBool) {
 					// Assign click event
@@ -137,0 +177,0 @@ elems[a].addEventListener("click", function(e){

helpers/closestParent.js

@@ -20,6 +20,6 @@ //--------------------------------------------------------------------------------------------------------------------------------------
 
-// Grab closest parent by classname
-var parent = closestParent(myElem, ".my-parent");
+// Grab closest matching parent by classname
+var parent = closestParent(myElem, "my-parent");
 
-// Grab closest parent by element
+// Grab closest matching parent by element
 var parent = closestParent(myElem, "form");
@@ -26,0 +26,0 @@ */

package.json

 {
   "name": "orionjs",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "author": "Luke Harrison",
@@ -5,0 +5,0 @@ "description": "OrionJS is a simple collection of reusable functions to help streamline DOM manipulation in UI development.",

No alert changes

Improved metrics

Total package byte prevSize

29713

increased by9.79%

Lines of code

567

increased by5.78%

No dependency changes