web-animations · barmstro · Feb 9, 2014
diff --git a/internal/wat-ace-editor/wat-ace-editor.html b/internal/wat-ace-editor/wat-ace-editor.html
@@ -10,9 +10,8 @@
 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.
+See the License for the specific language governing permissions and limitations
+under the License.
 -->
 
 <!doctype html>

diff --git a/internal/wat-button/wat-button.html b/internal/wat-button/wat-button.html
@@ -10,9 +10,8 @@
 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.
+See the License for the specific language governing permissions and limitations
+under the License.
 -->
 
 <!DOCTYPE html>
@@ -41,4 +40,4 @@
     </style>
     <button title="{{title}}"><content></content></button>
   </template>
-</polymer>
+</polymer>
diff --git a/internal/wat-dock/wat-dock.html b/internal/wat-dock/wat-dock.html
@@ -10,9 +10,8 @@
 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.
+See the License for the specific language governing permissions and limitations
+under the License.
 -->
 
 <!doctype html>

diff --git a/internal/wat-menu/wat-menu.html b/internal/wat-menu/wat-menu.html
@@ -10,11 +10,12 @@
 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.
+See the License for the specific language governing permissions and limitations
+under the License.
 -->
 
+<!DOCTYPE html>
+
 <link rel="import" href="../../../polymer/polymer.html">
 
 <polymer-element name="wat-menu">
@@ -62,4 +63,4 @@
       }
     });
   </script>
-</polymer-element>
+</polymer-element>
diff --git a/wat-code-editor/wat-code-editor.html b/wat-code-editor/wat-code-editor.html
@@ -10,9 +10,39 @@
 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
+See the License for the specific language governing permissions and limitations
+under the License.
+-->
 
-limitations under the License.
+<!--
+/**
+ * @module Web Animations Tools
+ */
+/**
+ * `wat-code-editor` can be used to edit JavaScript, HTML, and CSS to create
+ * one or more `TimedItem`s, and then play those `TimedItem`s.
+ *
+ * Example: (as used in `wat-wat`)
+ *
+ *     <wat-code-editor id="wat-code-editor" timedItem="{{selectedRoot}}"
+ *         message="{{message}}" mode="rows" theme="{{theme}}"
+ *         showGutter="{{showGutter}}" tabSize="{{tabSize}}"
+ *         useWrapMode="{{useWrapMode}}" showPrintMargin="{{showPrintMargin}}">
+ *       <wat-button id="open-menu" on-click="{{toggleMenuVisibility}}"
+ *           title="Open Menu">
+ *         <i class="fa fa-bars"></i>
+ *       </wat-button>
+ *       <wat-github id="github" message="{{message}}"></wat-github>
+ *     </wat-code-editor>
+ *
+ * @class wat-code-editor
+ */
+ /**
+ * Fired when `wat-code-editor` would like `wat-github` to call its `toast()`
+ * function. Response object contains the message string to pass to `toast()`.
+ *
+ * @event request-toast
+ */
 -->
 
 <!doctype html>
@@ -90,6 +120,7 @@
         flex-grow: 1;
         height: 30px;
         margin-right: 5px;
+        font-size: 90%;
       }
 
       [hidden] {

diff --git a/wat-code-editor/wat-code-editor.js b/wat-code-editor/wat-code-editor.js
@@ -15,17 +15,98 @@
  */
 
 Polymer('wat-code-editor', {
+  /**
+   * The message displayed in the top bar of `wat-code-editor`.
+   *
+   * @attribute message
+   * @type string
+   * @default ''
+   */
   message: '',
+  /**
+   * The orientation of the code editor panes. Can be set to `rows` or `columns`.
+   *
+   * @attribute mode
+   * @type string
+   * @default 'rows'
+   */
   mode: 'rows',
   rowsMode: true,
+  /**
+   * The JavaScript that is run to produce the preview in the preview frame.
+   *
+   * @attribute javascript
+   * @type string
+   * @default ''
+   */
   javascript: '',
+  /**
+   * The most recently executed JavaScript.
+   *
+   * @attribute previewJavascript
+   * @type string
+   * @default ''
+   */
   previewJavascript: '',
+  /**
+   * The HTML used to specify the contents of the preview frame.
+   *
+   * @attribute html
+   * @type string
+   * @default ''
+   */
   html: '',
+  /**
+   * The CSS used to style the contents of the preview frame.
+   *
+   * @attribute css
+   * @type string
+   * @default ''
+   */
   css: '',
+  /**
+   * The theme used in the `wat-ace-editor` elements.
+   *
+   * @attribute theme
+   * @type string
+   * @default 'github'
+   */
   theme: 'github',
+  /**
+   * Specifies whether or not line numbers are to be displayed in the
+   * `wat-ace-editor` elements.
+   *
+   * @attribute showGutter
+   * @type boolean
+   * @default true
+   */
   showGutter: true,
+  /**
+   * Specifies the number of spaces per tab to use in the `wat-ace-editor`
+   * elements.
+   *
+   * @attribute tabSize
+   * @type number
+   * @default 2
+   */
   tabSize: 2,
+  /**
+   * Specifies whether or not to wrap lines when they exceed the width of the
+   * `wat-ace-editor` elements.
+   *
+   * @attribute useWrapMode
+   * @type boolean
+   * @default true
+   */
   useWrapMode: true,
+  /**
+   * Specifies whether or not vertical rulers are to be displayed in the
+   * `wat-ace-editor` elements.
+   *
+   * @attribute showPrintMargin
+   * @type boolean
+   * @default true
+   */
   showPrintMargin: true,
   state: 'loading',
   update: null,
@@ -151,6 +232,13 @@ Polymer('wat-code-editor', {
         serializeTimedItem(this.timedItem) + ');';
   },
 
+  /**
+   * Stores the current `javascript` string in `previewJavascript`, then updates
+   * the preview frame and the player of `wat-player-controls` using
+   * `javascript`, `html`, and `css`.
+   *
+   * @method updatePreview
+   */
   updatePreview: function() {
     this.previewJavascript = this.javascript;
     this.updateState('reload', 0);
@@ -198,12 +286,24 @@ Polymer('wat-code-editor', {
     }.bind(this);
   },
 
+  /**
+   * Saves the current `javascript`, `html`, and `css` strings to local storage.
+   *
+   * @method saveFilesToLocalStorage
+   */
   saveFilesToLocalStorage: function() {
     window.localStorage['wat-javascript'] = this.javascript;
     window.localStorage['wat-css'] = this.css;
     window.localStorage['wat-html'] = this.html;
   },
 
+  /**
+   * Loads `wat-javascript`, `wat-html`, and `wat-css` from local storage,
+   * unless they are all empty strings, in which case `timedItem` is set to
+   * `new Animation(null, null, 0)`.
+   *
+   * @method loadFilesFromLocalStorage
+   */
   loadFilesFromLocalStorage: function() {
     if (!window.localStorage['wat-javascript'] && !window.localStorage['wat-html'] &&
         !window.localStorage['wat-css']) {
@@ -218,6 +318,14 @@ Polymer('wat-code-editor', {
     this.reload();
   },
 
+  /**
+   * Sets `timedItem` to `new Animation(null, null, 0)` and sets `javascript` to
+   * the corresponding code. `previewJavascript`, `html`, and `css` are all set
+   * to empty strings, and all the code is removed from local storage.
+   * `token-changed` event.
+   *
+   * @method clearAll
+   */
   clearAll: function() {
     this.previewJavascript = this.css = this.html = '';
     this.javascript = 'document.timeline.play(' +

diff --git a/wat-wat/index.html b/wat-wat/index.html
@@ -10,9 +10,8 @@
 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.
+See the License for the specific language governing permissions and limitations
+under the License.
 -->
 
 <!doctype html>

diff --git a/wat-wat/wat-wat.html b/wat-wat/wat-wat.html
@@ -10,9 +10,8 @@
 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.
+See the License for the specific language governing permissions and limitations
+under the License.
 -->
 
 <link rel="import" href="../../polymer/polymer.html">
@@ -44,10 +43,10 @@
     </style>
 
     <div id="inspector">
-      <wat-code-editor id="wat-code-editor" timedItem="{{selectedRoot}}" 
-          message="{{message}}" mode="rows" theme="{{theme}}" 
+      <wat-code-editor id="wat-code-editor" timedItem="{{selectedRoot}}"
+          message="{{message}}" mode="rows" theme="{{theme}}"
           showGutter="{{showGutter}}" tabSize="{{tabSize}}"
-          useWrapMode="{{useWrapMode}}" showPrintMargin="{{showPrintMargin}}"> 
+          useWrapMode="{{useWrapMode}}" showPrintMargin="{{showPrintMargin}}">
         <wat-button id="open-menu" on-click="{{toggleMenuVisibility}}" title="Open Menu">
           <i class="fa fa-bars"></i>
         </wat-button>
@@ -129,4 +128,4 @@
   </template>
 
   <script src="wat-wat.js"></script>
-</polymer-element>
+</polymer-element>