polymer-paper-rails 0.2.0 → 0.2.5

data/app/assets/components/web-animations-js/tutorial/page-load.js

@@ -1,114 +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";
-
-/*
- * Get the current topic of tutorial the user is in
- * E.g. If the user is currently at basic-animation.html
- * currentSection will equals to basic-animation.
- * This variable is used to determine the name of a file.
- * E.g. To get the name of the exercise 1 of basic-animation
- * would add currentSection to '-exercise-' and the number 
- * in the <li> being clicked
- */
-var currentSection = window.location.href.split('/').pop();
-currentSection = currentSection.split('.')[0];
-
-// waits until all DOM elements are ready to perform
-$(document.body).ready(function() {
-
-  // if one of the side menu is clicked
-  // update page content without refreshing the whole page.
-  $('.sideMenu li').click(function(e) {
-    // get the exercise number from the <li> being clicked.
-    // e.g. 'Exercise 1' would return 1
-    // Though 'Basic Info' would return 'Info'.
-    exerciseNum = $(this).html().split(' ')[1];
-
-    // determines if the input string is actually a number
-    // if it is not then load the info page of the section
-    if (parseInt(exerciseNum) !== exerciseNum && isNaN(exerciseNum)) {
-      $('.content').load(currentSection + '.html' + ' .content', function() {
-        $(this).children().unwrap();
-      });
-    } else {
-      var url = currentSection + '-exercise-' + exerciseNum + '.html';
-      // checks if a file/link exist before adding contents
-      // into page
-      // after contents are loaded, load editor
-      $.ajax({
-        url: url,
-        type: 'HEAD',
-        success: function() {
-          $('.content').load(url + ' .content', function() {
-            $(this).children().unwrap();
-            loadEditor();
-          });
-        }
-      });
-    }
-  });
-});
-
-// This generate an editor object and put it into
-// a div called 'tryIt' as well as passing in
-// default HTML and CSS codes as animation divs
-var loadEditor = function() {
-  var html = '', currentId = 'a';
-
-  // Get the number of animation divs needed
-  var animNum = findDivNum();
-
-  // generate a number of animation divs according to
-  // the requirements of the exercise
-  // such as in sequence section
-  for (var i = 0; i < animNum; i++) {
-    html += '<div id=\"' + currentId + '\" class=\"anim\"></div>' + '\n';
-    currentId = nextId(currentId);
-  }
-
-  // create a new editor object
-  var editor = new TryItDisplay(document.getElementById("tryIt"));
-  editor.setDefaultHtml(html);
-
-  // common css for all divs
-  var css = '.anim {' + 
-    '\n' + 'background-color: red;' + 
-    '\n' + 'border-radius: 10px;' + 
-    '\n' + 'width: 100px;' + 
-    '\n' + 'height: 50px;' + 
-    '\n' + 'top: 0px;' + 
-    '\n' + 'left: 0px;' + 
-    '\n' + 'position: relative;' + 
-    '\n' + 'border: 1px solid black;' + 
-    '\n' + '}';
-  editor.setDefaultCss(css);
-  editor.update();
-}
-
-// Get the number of animation divs required
-// which is stored in an invisible div with id
-// 'animNum' and returns the value.
-var findDivNum = function() {
-  var value = document.getElementById('animNum').innerHTML;
-  value = parseInt(value);
-  return value;
-}
-
-// Generate 'a', 'b', 'c', 'd'... to put in as id.
-var nextId = function(currentId) {
-  return String.fromCharCode(currentId.charCodeAt() + 1);
-}

data/app/assets/components/web-animations-js/tutorial/parallel/parallel-exercise-1.html

@@ -1,58 +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.
-
--->
-
-<!DOCTYPE html>
-
-<html>
-
-<div class="content">
-
-  <div id="animNum">3</div>
-
-	<div class="heading subTitle">Parallel Animation Group</div>
-
-  <div class="heading exercises">Exercise 1 - Make a Parallel Group</div>
-
-  <p class="description">Groupings are important so let's 
-  get started on the exercise</p>
-
-  <p class="description">In this exercise, create a parallel group 
-  of animation that has 3 different animations. Each children should run 300px, 
-  500px, 700px from top respectively for 5 seconds.</p>
-
-  <p class="description">Hint: you should first create the children then 
-  include the children into the group. You might also need to create 
-  more animation divs in the html section and change their colour 
-  depends on your preferences.</p>
-
-  <div id="hideLabel" onclick="toggleSolution()">Show Solution</div>
-  <div id="toggleText" class="codeSamples">
-    <code>var A = new Animation(document.querySelector("#a"), 
-        {top: "300px"}, 5); <br />
-        var B = new Animation(document.querySelector("#b"), 
-        {top: "500px"}, 5); <br />
-        var C = new Animation(document.querySelector("#c"), 
-        {top: "700px"}, 5); <br />
-        new AnimationGroup([A, B, C]);
-    </code>
-  </div>
-
-  <div id="tryIt"></div>
-
-  <div class="separator"></div>
-
-</div>  <!-- content ending div -->

data/app/assets/components/web-animations-js/tutorial/parallel/parallel.html

@@ -1,101 +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.
-
--->
-
-<!DOCTYPE html>
-
-<link rel="author" title="Sandy Phan, Sarah Heimlich", 
-  href="mailto:sandyphan@google.com, sarahheimlich@google.com">
-<title>Parallel Animation</title>
-<meta name="flags" content="dom">
-<meta name="tutorial" content="Web Animations tutorials">
-<link rel="stylesheet" type="text/css" href="../tutorial-style.css">
-<script type="text/javascript" src="../jquery.js"></script>
-<script type="text/javascript" src="../page-load.js"></script>
-
-<ul class="topMenu">
-  <li><a href="../home-page.html">Home</a></li>
-  <li><a href="#">Tutorials</a>
-    <ul class="subMenu">
-      <li><a href="../basic-animations/basic-animation.html">
-      Basic Animations</a></li>
-      <li><a href="parallel.html">Parallel Animations</a></li>
-      <li><a href="../sequence/sequence.html">Sequence Animations
-      </a></li>
-      <li><a href="../timing-dictionary/timing-dictionary.html">
-      Timing Dictionary</a></li>
-      <li><a href="../timing-functions/timing-function.html">
-      Timing Functions</a></li>
-    </ul>
-  </li>
-  <li><a href="../references/references.html">References</a></li>
-  <li><a href="../about.html">About</a></li>
-</ul>
-<div id="main">
-
-  <div id="title">Web Animations Tutorial</div>
-  
-  <div class="line-separator"></div>
-
-  <div class="content">
-    <p class="description">Web animations is to have a flash or GIF animation
-    intergrated onto the web page. Normal web animations still require 
-    the use of plugins such as Java Applets, Shockwave, Adobe Flash. In this 
-    tutorial, we will be showing you how to create animations using 
-    javascript without the need of installing plugins.</p>
-
-    <br />
-
-    <div class="heading subTitle">Parallel Animation Group</div>
-
-    <p class="description">There certainly are times when you want to 
-    group items together such that they have the same features and effects. 
-    There are 2 types of groupings: parallel and sequential. In this 
-    section you will learn about parallel groups and what kind of 
-    feature does it have to help you write less code.</p>
-
-    <p class="description">Just as what the name of the group means, all 
-    the children being grouped in a parallel group will run in parallel, 
-    that is they will start together and of course they will end at 
-    different time depends on their durations.</p>
-
-    <p class="description">The following is the interface for creating 
-    a parallel animation group.</p>
-
-    <code class="codeSamples">new AnimationGroup([children], 
-    {timing/timing dictionary});</code>
-
-    <p class="description note">Note that both children and timing are 
-    nullable (i.e. you can leave children as [] if you don't want to 
-    specify a child). Though only timing is optional</p>
-
-    <div class="separator"></div>
-
-  </div>  <!-- content ending div -->
-  <div class="line-separator"></div>
-</div> <!-- main ending div -->
-
-<ul class="sideMenu">
-  <li id="menuLabel">Parallel Animation Group</li>
-  <li>Basic Info</li>
-  <li>Exercise 1</li>
-  <li>Exercise 2</li>
-  <li>Exercise 3</li>
-</ul>
-
-<div class="separator"></div>
-
-<script type="text/javascript" src="../try-it-yourself.js"></script>

data/app/assets/components/web-animations-js/tutorial/sample-tutorial.html

@@ -1,44 +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.
--->
-
-<body onload="myDisplay.update()">
-  <div id="myDisplayDiv"></div>
-  <script type="text/javascript" src="try-it-yourself.js"></script>
-  <script type="text/javascript" src='tutorial-testing.js'></script>
-  <script type="text/javascript" src='../web-animations.js'></script>
-  <script type="text/javascript" src='../test/extra-asserts.js'></script>
-  <link type="text/css" href="../animation-test-style.css">
-  <link rel="stylesheet" type="text/css" href="tutorial-style.css">
-  <script>
-     "use strict";
-     
-    var myDisplay = new TryItDisplay(document.getElementById("myDisplayDiv"));
-    myDisplay.setDefaultHtml("<div id='a' class='test'></div>");
-    var css = ".test {" +
-        "\n" + "background-color: red;" +
-        "\n" + "border-radius: 10px;" +
-        "\n" + "width: 100px;" +
-        "\n" + "height: 50px;" +
-        "\n" + "top: 50px;" +
-        "\n" + "left: 0px;" +
-        "\n" + "position: absolute;" +
-        "\n" + "}";
-    myDisplay.setDefaultCss(css);
-    myDisplay.setDefaultAnimationEndTime(2);
-    myDisplay.addCheck("document.getElementById('a')", "{'left': '0px'}", 0);
-    myDisplay.addCheck("document.getElementById('a')", "{'left': '300px'}", 2);
-  </script>
-</body>

data/app/assets/components/web-animations-js/tutorial/try-it-yourself.js

@@ -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';
-  }
-}