Merge pull request #36 from dmitrizzle/foreach-graceful-degradation

Foreach graceful degradation
dmitrizzle · Jul 13, 2017 · 39f02fc · 39f02fc
2 parents 0e3f20b + a3949ad
commit 39f02fc
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 43 deletions.
diff --git a/component/Bubbles.js b/component/Bubbles.js
@@ -7,21 +7,21 @@ function Bubbles(container, self, options) {
 	widerBy = 				options.widerBy || 2;							// add a little extra width to bubbles to make sure they don't break
 	sidePadding = 		options.sidePadding || 6; 				// padding on both sides of chat bubbles
 	inputCallbackFn = options.inputCallbackFn || false;	// should we display an input field?
-	
+
   var standingAnswer = "ice"; // remember where to restart convo if interrupted
-  
+
   var _convo = {};						// local memory for conversation JSON object
   														//--> NOTE that this object is only assigned once, per session and does not change for this
   														// 		constructor name during open session.
-		
-		
-		
+
+
+
 	// set up the stage
 	container.classList.add("bubble-container");
 	var bubbleWrap = document.createElement("div");
 	bubbleWrap.className = "bubble-wrap";
 	container.appendChild(bubbleWrap);
-	
+
 	// install user input textfield
 	this.typeInput = function(callbackFn){
 		var inputWrap = document.createElement("div");
@@ -50,9 +50,9 @@ function Bubbles(container, self, options) {
 		inputText.focus();
 	}
 	inputCallbackFn ? this.typeInput(inputCallbackFn) : false;
-	
-	
-	
+
+
+
 	// init typing bubble
 	var bubbleTyping = document.createElement("div");
 	bubbleTyping.className = "bubble-typing imagine";
@@ -62,13 +62,13 @@ function Bubbles(container, self, options) {
 		bubbleTyping.appendChild(dot);
 	}
 	bubbleWrap.appendChild(bubbleTyping);
-  
+
   // accept JSON & create bubbles
   this.talk = function(convo, here) {
-  
+
   	// all further .talk() calls will append the conversation with additional blocks defined in convo parameter
   	_convo = Object.assign(_convo, convo); // POLYFILL REQUIRED FOR OLDER BROWSERS
-  	
+
   	this.reply(_convo[here]);
   	here ? standingAnswer = here : false;
   }
@@ -77,35 +77,37 @@ function Bubbles(container, self, options) {
   	questionsHTML = "";
   	if(turn.reply !== undefined){
   		turn.reply.reverse();
-			(turn.reply).forEach(function(el, count){
-				questionsHTML
-					+= "<span class=\"bubble-button\" style=\"animation-delay: "
-					+ ( animationTime / 2 * count ) + "ms\" onClick=\""
-					+ self + ".answer('"
-					+ el.answer + "');this.classList.add('bubble-pick')\">"
-					+ el.question + "</span>";
-			});
+  			for(var i=0; i<turn.reply.length; i++)
+  			{
+  				(function(el, count){
+						questionsHTML
+							+= "<span class=\"bubble-button\" style=\"animation-delay: "
+							+ ( animationTime / 2 * count ) + "ms\" onClick=\""
+							+ self + ".answer('"
+							+ el.answer + "');this.classList.add('bubble-pick')\">"
+							+ el.question + "</span>";
+					})(turn.reply[i], i);
+  			}
 		}
 		orderBubbles(turn.says, function(){
 			bubbleTyping.classList.remove("imagine");
 			questionsHTML !== "" ? addBubble(questionsHTML, function(){}, "reply") : bubbleTyping.classList.add("imagine");
 		});
   }
-
   // navigate "answers"
   this.answer = function(key){
   	var func = function(key){ typeof window[key] === "function" ? window[key]() : false; }
   	_convo[key] !== undefined ? (this.reply(_convo[key]), standingAnswer = key) : func(key);
   };
-  
+
   // api for typing bubble
   this.think = function(){
   	bubbleTyping.classList.remove("imagine");
   	this.stop = function(){
   		bubbleTyping.classList.add("imagine");
   	}
   }
-  
+
   // "type" each message within the group
   var orderBubbles = function(q, callback){
   	var start = function(){ setTimeout(function() { callback() }, animationTime); };
@@ -119,9 +121,7 @@ function Bubbles(container, self, options) {
   	}
   	start();
   }
-
-
-
+
   // create a bubble
   var bubbleQueue = false;
 	var addBubble = function(say, posted, reply){
@@ -137,16 +137,24 @@ function Bubbles(container, self, options) {
 		// answer picker styles
 		if(reply !== ""){
 			var bubbleButtons = bubbleContent.querySelectorAll(".bubble-button");
-			bubbleButtons.forEach(function(el){
-				if(!el.parentNode.parentNode.classList.contains("reply-freeform"))
-				el.style.width = el.offsetWidth - sidePadding * 2 + widerBy + "px";
-			});
+
+			for(var z =0; z<bubbleButtons.length; z++)
+			{
+				(function(el){
+					if(!el.parentNode.parentNode.classList.contains("reply-freeform"))
+					el.style.width = el.offsetWidth - sidePadding * 2 + widerBy + "px";
+				})(bubbleButtons[z]);
+			}
 			bubble.addEventListener("click", function(){
-				bubbleButtons.forEach(function(el){
-					el.style.width = 0 + "px";
-					el.classList.contains("bubble-pick") ? el.style.width = "" : false;
-					el.removeAttribute("onclick");
-				});
+
+				for (var i = 0; i < bubbleButtons.length; i++)
+				{
+					(function(el){
+						el.style.width = 0 + "px";
+						el.classList.contains("bubble-pick") ? el.style.width = "" : false;
+						el.removeAttribute("onclick");
+					})(bubbleButtons[i]);
+				}
 				this.classList.add("bubble-picked");
 			});
 		}
@@ -185,4 +193,4 @@ function Bubbles(container, self, options) {
 
 
 
-}  // close function
+}  // close function
diff --git a/component/examples/0-tutor.html b/component/examples/0-tutor.html
@@ -207,15 +207,16 @@
 
 				// search function
 				var found = false;
-				o.convo[o.standingAnswer].reply.forEach(function(e, i) {
-					(strip(e.question).includes(strip(o.input)) && o.input.length > 0) ? found = e.answer : (found ? null : found = false);
-				});
+				for(var z =0; z<o.convo[o.standingAnswer].reply.length; z++){	
+					var key = (o.convo[o.standingAnswer].reply)[z];
+					(strip(key["question"]).includes(strip(o.input))) && o.input.length > 0 )
+					? found = key["answer"];
+					: found == false;
+				}
 				found ? match(found) : miss();
-
-
-
 			}
 		});
+
 		givemeBubbles.talk(convo);
 		functionOne = function(){ alert("Function One"); }
 		functionTwo = function(){ alert("Function Two"); }
@@ -226,4 +227,4 @@
 
 
 </body>
-</html>
+</html>