if (typeof String.prototype.endsWith !== 'function') { String.prototype.endsWith = function(suffix) { return this.indexOf(suffix, this.length - suffix.length) !== -1; }; } if (!String.prototype.startsWith) { String.prototype.startsWith = function(searchString, position) { position = position || 0; return this.indexOf(searchString, position) === position; }; } if (!Array.prototype.forEach) { Array.prototype.forEach = function(callback/*, thisArg*/) { var T, k; if (this == null) { throw new TypeError('this is null or not defined'); } // 1. Let O be the result of calling toObject() passing the // |this| value as the argument. var O = Object(this); // 2. Let lenValue be the result of calling the Get() internal // method of O with the argument "length". // 3. Let len be toUint32(lenValue). var len = O.length >>> 0; // 4. If isCallable(callback) is false, throw a TypeError exception. // See: http://es5.github.com/#x9.11 if (typeof callback !== 'function') { throw new TypeError(callback + ' is not a function'); } // 5. If thisArg was supplied, let T be thisArg; else let // T be undefined. if (arguments.length > 1) { T = arguments[1]; } // 6. Let k be 0. k = 0; // 7. Repeat while k < len. while (k < len) { var kValue; // a. Let Pk be ToString(k). // This is implicit for LHS operands of the in operator. // b. Let kPresent be the result of calling the HasProperty // internal method of O with argument Pk. // This step can be combined with c. // c. If kPresent is true, then if (k in O) { // i. Let kValue be the result of calling the Get internal // method of O with argument Pk. kValue = O[k]; // ii. Call the Call internal method of callback with T as // the this value and argument list containing kValue, k, and O. callback.call(T, kValue, k, O); } // d. Increase k by 1. k++; } // 8. return undefined. }; } function toArray(obj) { var array = []; // iterate backwards ensuring that length is an UInt32 for (var i = obj.length >>> 0; i--;) { array[i] = obj[i]; } return array; } function addClass (object, className) { object.classList ? object.classList.add(className) : object.className += ' ' + className; } function removeAllClassesButFirst (component, skipClass) { var classList = component.classList; var componentClass = classList.item(0); var toRemove = []; toArray(classList).forEach(function(className) { if (className != skipClass && className != componentClass && className != 'component') { toRemove.push(className); } }); toRemove.forEach(function(className) { classList.remove(className); }); } function applyState (component, stateClass) { var componentClass = component.classList.item(0); component.className = componentClass; component.classList.add(stateClass); } function isCurrentState (component, state) { var classList = component.classList; var rv = false; toArray(classList).forEach(function (className) { if (className.endsWith(state)) { rv = true; } }) return rv; } function whichTransitionEvent(){ var t, el = document.createElement("fakeelement"); var transitions = { "transition" : "transitionend", "OTransition" : "oTransitionEnd", "MozTransition" : "transitionend", "WebkitTransition": "webkitTransitionEnd" } for (t in transitions){ if (el.style[t] !== undefined){ return transitions[t]; } } } var transitionEvent = whichTransitionEvent(); // Javascript for component Artboard // Longest animation for Transition 2 is this;image1 // Transition 2: From keyframe1 to keyframe2 function clickArtboard2Handler(event) { var component = document.querySelector('.artboard'); if (isCurrentState(component, 'keyframe1')) { try { // console.log('Listener for event: click triggered. State: keyframe1'); setTimeout(function() { var component = document.querySelector('.artboard'); component.addEventListener(transitionEvent, transitionArtboardkeyframe1tokeyframe2EndedHandler); removeAllClassesButFirst(component, 'keyframe1-to-keyframe2'); addClass(component, 'keyframe2'); addClass(component, 'keyframe1-to-keyframe2'); }, 0); } catch (e) { console.log(e) } } } function transitionArtboardkeyframe1tokeyframe2EndedHandler(event) { if (event.target.className.trim() == 'image1' || event.target.className.startsWith('image1 ')) { var component = document.querySelector('.artboard'); component.removeEventListener(transitionEvent, transitionArtboardkeyframe1tokeyframe2EndedHandler); //console.log('transitionArtboardkeyframe1tokeyframe2EndedHandler()'); // animationend setTimeout(function () { var component = document.querySelector('.artboard'); component.addEventListener(transitionEvent, transitionArtboardkeyframe2tokeyframe3EndedHandler); removeAllClassesButFirst(component, 'keyframe2-to-keyframe3'); addClass(component, 'keyframe3'); addClass(component, 'keyframe2-to-keyframe3'); }, 0); } } // Transition Artboard keyframe1-to-keyframe2 Event Listeners // click keyframe1 keyframe1 child = document.querySelector('.artboard'); if (child) { child.style['pointer-events'] = 'auto'; child.addEventListener('click', clickArtboard2Handler); } else { console.log('Could not find element at: .artboard'); } function resetArtboard() { console.log('reset'); var component = document.querySelector('.artboard'); if (!component) { return; } component.addEventListener(transitionEvent, transitionArtboardkeyframe1tokeyframe2EndedHandler); removeAllClassesButFirst(component, 'keyframe1-to-keyframe2'); addClass(component, 'keyframe2'); addClass(component, 'keyframe1-to-keyframe2'); } // Javascript for component Artboard // Longest animation for Transition 3 is this;lisa // Transition 3: From keyframe2 to keyframe3 function transitionArtboardkeyframe2tokeyframe3EndedHandler(event) { if (event.target.className.trim() == 'lisa' || event.target.className.startsWith('lisa ')) { var component = document.querySelector('.artboard'); component.removeEventListener(transitionEvent, transitionArtboardkeyframe2tokeyframe3EndedHandler); //console.log('transitionArtboardkeyframe2tokeyframe3EndedHandler()'); // animationend setTimeout(function () { var component = document.querySelector('.artboard'); component.addEventListener(transitionEvent, transitionArtboardkeyframe3tokeyframe4EndedHandler); removeAllClassesButFirst(component, 'keyframe3-to-keyframe4'); addClass(component, 'keyframe4'); addClass(component, 'keyframe3-to-keyframe4'); }, 0); } } // Transition Artboard keyframe2-to-keyframe3 Event Listeners // animationend keyframe2 keyframe1 // Javascript for component Artboard // Longest animation for Transition 4 is this;hjelt // Transition 4: From keyframe3 to keyframe4 function transitionArtboardkeyframe3tokeyframe4EndedHandler(event) { if (event.target.className.trim() == 'hjelt' || event.target.className.startsWith('hjelt ')) { var component = document.querySelector('.artboard'); component.removeEventListener(transitionEvent, transitionArtboardkeyframe3tokeyframe4EndedHandler); //console.log('transitionArtboardkeyframe3tokeyframe4EndedHandler()'); // animationend setTimeout(function () { var component = document.querySelector('.artboard'); component.addEventListener(transitionEvent, transitionArtboardkeyframe4tokeyframe5EndedHandler); removeAllClassesButFirst(component, 'keyframe4-to-keyframe5'); addClass(component, 'keyframe5'); addClass(component, 'keyframe4-to-keyframe5'); }, 0); } } // Transition Artboard keyframe3-to-keyframe4 Event Listeners // animationend keyframe3 keyframe1 // Javascript for component Artboard // Longest animation for Transition 5 is this;creative // Transition 5: From keyframe4 to keyframe5 function transitionArtboardkeyframe4tokeyframe5EndedHandler(event) { if (event.target.className.trim() == 'creative' || event.target.className.startsWith('creative ')) { var component = document.querySelector('.artboard'); component.removeEventListener(transitionEvent, transitionArtboardkeyframe4tokeyframe5EndedHandler); //console.log('transitionArtboardkeyframe4tokeyframe5EndedHandler()'); // animationend setTimeout(function () { var component = document.querySelector('.artboard'); component.addEventListener(transitionEvent, transitionArtboardkeyframe5tokeyframe6EndedHandler); removeAllClassesButFirst(component, 'keyframe5-to-keyframe6'); addClass(component, 'keyframe6'); addClass(component, 'keyframe5-to-keyframe6'); }, 0); } } // Transition Artboard keyframe4-to-keyframe5 Event Listeners // animationend keyframe4 keyframe1 // Javascript for component Artboard // Longest animation for Transition 6 is this;interactionDesigner // Transition 6: From keyframe5 to keyframe6 function transitionArtboardkeyframe5tokeyframe6EndedHandler(event) { if (event.target.className.trim() == 'interactiondesigner' || event.target.className.startsWith('interactiondesigner ')) { var component = document.querySelector('.artboard'); component.removeEventListener(transitionEvent, transitionArtboardkeyframe5tokeyframe6EndedHandler); //console.log('transitionArtboardkeyframe5tokeyframe6EndedHandler()'); lastTransitionArtboardEndedHandler(event); } } function lastTransitionArtboardEndedHandler(event) { //console.log('lastTransitionArtboardEndedHandler()'); setTimeout(function() { var component = document.querySelector('.artboard'); removeAllClassesButFirst(component, 'keyframe1'); addClass(component, 'keyframe1'); var event = new Event('click'); component.dispatchEvent(event); }, 0); } // Transition Artboard keyframe5-to-keyframe6 Event Listeners // animationend keyframe5 keyframe1 var component = document.querySelector('.component'); var event = new Event('click'); component.dispatchEvent(event);