Index: bower_components/web-animations-js/tutorial/try-it-yourself.js |
diff --git a/bower_components/web-animations-js/tutorial/try-it-yourself.js b/bower_components/web-animations-js/tutorial/try-it-yourself.js |
deleted file mode 100644 |
index 46e0fae8c60fbae8e8b8381d06a60b717766b848..0000000000000000000000000000000000000000 |
--- a/bower_components/web-animations-js/tutorial/try-it-yourself.js |
+++ /dev/null |
@@ -1,216 +0,0 @@ |
-/* |
- * Copyright 2013 Google Inc. All Rights Reserved. |
- * |
- * Licensed under the Apache License, Version 2.0 (the "License"); |
- * you may not use this file except in compliance with the License. |
- * You may obtain a copy of the License at |
- * |
- * http://www.apache.org/licenses/LICENSE-2.0 |
- * |
- * Unless required by applicable law or agreed to in writing, software |
- * distributed under the License is distributed on an "AS IS" BASIS, |
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
- * See the License for the specific language governing permissions and |
- * limitations under the License. |
- */ |
-"use strict"; |
- |
-// TryItDisplay creates and represents the input and output display. |
- function TryItDisplay(containerElement) { |
- this.iframe = new Iframe(); |
- this.create(containerElement); |
-} |
- |
-// Function that creates the input and output for the TryItYourself object. |
- TryItDisplay.prototype.create = function(containerElement) { |
- var heading = document.createElement("div"); |
- heading.setAttribute("class", "heading"); |
- heading.setAttribute("id", "heading") |
- heading.innerHTML = "TRY IT YOURSELF"; |
- containerElement.appendChild(heading); |
- |
- var button = document.createElement("button"); |
- button.onclick = function(me) { return function() { me.update(); }; }(this); |
- button.setAttribute("id", "update"); |
- button.innerHTML = "Update"; |
- heading.appendChild(button); |
- |
- var code = document.createElement("div"); |
- code.setAttribute("class", "code"); |
- code.setAttribute("id", "allCode"); |
- containerElement.appendChild(code); |
- |
- var display = document.createElement("div"); |
- display.setAttribute("class", "display"); |
- containerElement.appendChild(display); |
- display.appendChild(this.iframe.getDom()); |
- |
- var htmlHeader = document.createElement("div"); |
- htmlHeader.setAttribute("class", "label"); |
- htmlHeader.setAttribute("id", "htmlLabel") |
- htmlHeader.innerHTML = "HTML Code"; |
- code.appendChild(htmlHeader); |
- |
- var htmlCode = document.createElement("textarea"); |
- htmlCode.setAttribute("id", "htmlCode"); |
- htmlCode.setAttribute("class", "code"); |
- code.appendChild(htmlCode); |
- |
- var cssHeader = document.createElement("div"); |
- cssHeader.setAttribute("class", "label"); |
- cssHeader.setAttribute("id", "cssLabel") |
- cssHeader.innerHTML = "CSS Style"; |
- code.appendChild(cssHeader); |
- |
- var cssCode = document.createElement("textarea"); |
- cssCode.setAttribute("id", "cssCode"); |
- cssCode.setAttribute("class", "code"); |
- code.appendChild(cssCode); |
- |
- var jsHeader = document.createElement("div"); |
- jsHeader.setAttribute("class", "label"); |
- jsHeader.setAttribute("id", "jsLabel") |
- jsHeader.innerHTML = "Javascript"; |
- code.appendChild(jsHeader); |
- |
- var jsCode = document.createElement("textarea"); |
- jsCode.setAttribute("id", "jsCode"); |
- jsCode.setAttribute("class", "code"); |
- code.appendChild(jsCode); |
- |
- var heading = document.createElement("div"); |
- heading.setAttribute("class", "heading fail"); |
- heading.setAttribute("id", "passOrFail") |
- heading.innerHTML = "YOU PASSED!"; |
- containerElement.appendChild(heading); |
-} |
- |
-TryItDisplay.prototype.setDefaultHtml = function(newHtml) { |
- document.getElementById('htmlCode').innerHTML = newHtml ? newHtml : ""; |
-} |
- |
-TryItDisplay.prototype.setDefaultCss = function(newCss) { |
- document.getElementById('cssCode').innerHTML = newCss ? newCss : ""; |
-} |
- |
-TryItDisplay.prototype.setDefaultJs = function(newJs) { |
- document.getElementById('jsCode').innerHTML = newJs ? newJs : ""; |
-} |
- |
-TryItDisplay.prototype.addCheck = function(object, property, time) { |
- this.iframe.checks.push("check(" |
- + object + ", " + property + ", " + time + ", 'default');"); |
-} |
- |
-// Set the default end time for the animation clock. |
-// Note: this will be overwritten if the user creates an animation longer than |
-// the time set here. |
-TryItDisplay.prototype.setTime = function(newTime) { |
- this.iframe.time = newTime; |
-} |
- |
-// Update takes the information currently in the HTML, CSS, and JS input boxes |
-// and displays it in the iframe. |
-TryItDisplay.prototype.update = function() { |
- // Reload the iframe by resetting the source. |
- document.getElementById("display").src = document.getElementById("display").src; |
- document.getElementById("display").onload = function(me) { |
- return function() { |
- me.addCssHtml(); |
- me.addAnimScript(); |
- }; |
- }(this); |
-} |
- |
-// Add the CSS and HTML into the iframe. |
-TryItDisplay.prototype.addCssHtml = function() { |
- var iframeDoc = this.iframe.doc.contentDocument; |
- var htmlVal = document.getElementById("htmlCode").value; |
- var cssVal = document.getElementById('cssCode').value |
- +"\n" +"#dummy { display: none; }"; |
- iframeDoc.getElementsByTagName("body")[0].innerHTML = htmlVal; |
- iframeDoc.getElementsByTagName("style")[0].innerHTML = cssVal; |
- |
- // dummDiv allows the animation time to display properly the first time |
- // the page loads. |
- var dummyDiv = document.createElement("div"); |
- dummyDiv.setAttribute("id", "dummy"); |
- dummyDiv.setAttribute("class", "test"); |
- iframeDoc.getElementsByTagName("body")[0].appendChild(dummyDiv); |
-} |
- |
-// Add the Javascript value to the iframe. |
-TryItDisplay.prototype.addAnimScript = function() { |
- var scriptElement = document.createElement('script'); |
- var jsVal = this.getJsVal(); |
- var iframeDoc = this.iframe.doc.contentDocument; |
- |
- var scriptDivs = iframeDoc.getElementsByTagName('script'); |
- scriptElement.innerHTML = jsVal; |
- par = iframeDoc.getElementsByTagName('body')[0]; |
- par.appendChild(scriptElement); |
-} |
- |
-// Get the user provided Javascript value, and append additional information |
-// to run the tests properly. |
-TryItDisplay.prototype.getJsVal = function() { |
- var iframeDoc = this.iframe.doc.contentDocument; |
- // The animation added to the javascript input allows the animation time to |
- // display even when the user does not input an animation. |
- var jsVal = "setupTutorialTests(); \n" |
- + document.getElementById('jsCode').value + "\n" |
- + "new Animation(document.getElementById('dummy'), {left: '100px'}, " |
- + this.iframe.time + ");"; |
- |
- for (var i = 0; i < this.iframe.checks.length; i++) { |
- jsVal += "\n" + this.iframe.checks[i]; |
- } |
- jsVal += " \nrunTests();"; |
- return jsVal; |
-} |
- |
-// Function to call once the user passes the tutorial. |
-TryItDisplay.pass = function() { |
- document.getElementById("passOrFail").className = "heading pass"; |
-} |
- |
-// Function to call if the user fails the tutorial. |
-TryItDisplay.fail = function() { |
- document.getElementById("passOrFail").className = "heading fail"; |
-} |
- |
-// Constructor for the Iframe object. |
-function Iframe() { |
- this.doc = document.createElement('iframe'); |
- // Checks will store all the tests done on the animations in the iframe. |
- // Developers can add to it using the addCheck function. |
- this.checks = []; |
- // Time stores the defualt animation time. It controls how long the hidden |
- // animation runs and therefore the default animation timer. |
- this.time = 5; |
- |
- this.pass = false; |
- |
- this.doc.setAttribute('id', 'display'); |
- this.doc.setAttribute('class', 'display'); |
- this.doc.setAttribute('src', 'iframe-contents.html'); |
-} |
- |
-Iframe.prototype.getDom = function() { |
- return this.doc; |
-} |
- |
-// Make the solution box toggleable. |
-var toggleSolution = function() { |
- var element = document.getElementById('toggleText'); |
- var elementStyle = getComputedStyle(element, null); |
- var label = document.getElementById('hideLabel'); |
- |
- if (elementStyle.display === 'none') { |
- element.style.display = 'block'; |
- label.innerHTML = 'Hide Solution'; |
- } else if (elementStyle.display === 'block') { |
- element.style.display = 'none'; |
- label.innerHTML = 'Show Solution'; |
- } |
-} |