diff --git a/component/Bubbles.js b/component/Bubbles.js index 2c25291..72008cc 100644 --- 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,27 +77,29 @@ function Bubbles(container, self, options) { questionsHTML = ""; if(turn.reply !== undefined){ turn.reply.reverse(); - (turn.reply).forEach(function(el, count){ - questionsHTML - += "" - + el.question + ""; - }); + for(var i=0; i" + + el.question + ""; + })(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"); @@ -105,7 +107,7 @@ function Bubbles(container, self, options) { 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 0) ? found = e.answer : (found ? null : found = false); - }); + for(var z =0; z 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 @@ - \ No newline at end of file +