Added element selector

jackyjjc · jackyjjc · commit 31e5c3735428 · 2014-02-19T15:24:12.000+11:00
diff --git a/wat-code-editor/wat-code-editor.js b/wat-code-editor/wat-code-editor.js
@@ -38,6 +38,7 @@ Polymer('wat-code-editor', {
     } else {
       this.selected = window.localStorage['wat-selected-editors'].split(',');
     }
+    this.previewFrame = this.$['preview-frame'];
     this.updatePreview();
   },
 
diff --git a/wat-target-selector/index.html b/wat-target-selector/index.html
@@ -0,0 +1,59 @@
+<!--
+Copyright 2014 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>
+
+<script src="../../web-animations-js/web-animations.js"></script>
+<script src="../../platform/platform.js"></script>
+<link rel="import" href="wat-target-selector.html">
+<link rel="import" href="../internal/wat-button/wat-button.html">
+
+<iframe id="frame"></iframe>
+<wat-target-selector id="selector"></wat-target-selector>
+<script>
+  var frame = document.querySelector('#frame');
+  var d = frame.contentDocument;
+  d.open();
+  d.write('<style>'+
+          'div {' +
+            'width: 32px;' +
+            'height: 32px;' +
+            'border: 1px solid black;' +
+          '}\n' +
+          '.selected {' +
+              'border: 1px solid red;'+
+          '}</style>' _+
+          '<div id="div1"></div>' +
+          '<div id="div2"></div>' +
+          '<div id="div3"></div>');
+  d.close();
+
+  document.addEventListener('select-target', function(e) {
+    var divs = frame.contentDocument.getElementsByTagName('*');
+    for (var i = 0; i < divs.length; i++) {
+      divs[i].classList.remove('selected');
+    }
+    var selectedDiv = frame.contentDocument.getElementById(e.detail);
+    selectedDiv.classList.add('selected');
+  });
+
+  document.addEventListener('polymer-ready', function() {
+    var selector = document.querySelector('#selector');
+    selector.frame = frame;
+    selector.update();
+  });
+</script>
diff --git a/wat-target-selector/wat-target-selector.html b/wat-target-selector/wat-target-selector.html
@@ -0,0 +1,64 @@
+<!--
+Copyright 2014 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.
+-->
+<link rel="import" href="../../polymer/polymer.html">
+
+<polymer-element name="wat-target-selector" attributes="frame selected">
+  <template>
+    <style>
+      :host {
+        display: block;
+        width: 330px;
+      }
+      input {
+        margin-bottom: 15px;
+      }
+    </style>
+    <div id="radio-button-group">
+      <template repeat="{{e in elements}}">
+        <input type="radio" name="id" value="{{e.id}}" checked="{{e.id === selected ? true : false}}">{{e.id}}<br>
+      </template>
+    </div>
+    <wat-button title="select" on-click="{{selectElement}}">Select</wat-button>
+  </template>
+  <script>
+    Polymer('wat-target-selector', {
+      frame: null,
+      selected: null,
+      update: function() {
+        if (!this.frame) {
+          return;
+        }
+        var elems = this.frame.contentDocument.body.getElementsByTagName('*');
+        var elemsWithID = [];
+        for (var i = 0; i < elems.length; i++) {
+          if (elems[i].id) {
+            elemsWithID.push(elems[i]);
+          }
+        }
+
+        this.elements = elemsWithID;
+      },
+      selectElement: function() {
+        var selected = this.$['radio-button-group'].querySelector('input[name = "id"]:checked');
+        if (!selected) {
+          return;
+        }
+        this.selected = selected.value;
+      },
+    });
+  </script>
+</polymer-element>
diff --git a/wat-timeditem-inspector/wat-timeditem-inspector.css b/wat-timeditem-inspector/wat-timeditem-inspector.css
@@ -26,15 +26,14 @@
   vertical-align: middle;
 }
 
-#launch-button {
+.launch-button {
   display: inline-flex;
   margin-left: 0.2em;
   width: calc(35px - 0.5em);
   height: 20px;
 }
 
-#launch-button ^^ button {
-
+.launch-button ^^ button {
   line-height: 6px;
   padding: 0 0 2px 0;
 }
@@ -66,6 +65,10 @@
   padding: 1px 2px;
 }
 
+.property #animTarget {
+  width: calc(65% - 40px);
+}
+
 .property .field:focus {
   border: 1px solid rgba(66,133,244,1);
   outline: none;
diff --git a/wat-timeditem-inspector/wat-timeditem-inspector.html b/wat-timeditem-inspector/wat-timeditem-inspector.html
@@ -21,14 +21,22 @@
 <link rel="import" href="../internal/wat-button/wat-button.html">
 <link rel="import" href="../wat-bezier/wat-bezier.html">
 <link rel="import" href="../wat-step/wat-step.html">
+<link rel="import" href="../wat-target-selector/wat-target-selector.html">
 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
 
-<polymer-element name="wat-timeditem-inspector" attributes="timedItem">
+<polymer-element name="wat-timeditem-inspector" attributes="timedItem previewFrame">
   <template>
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="wat-timeditem-inspector.css">
     
     <div id="property-container">
+      <div class="property {{timedItem.type ? 'hidden' : ''}}">
+        <label for="animTarget">target:</label>
+        <input class="field" id="animTarget" placeholder="DOM Element ID"
+            value="{{$.targetSelector.selected}}" on-change="{{animationTargetChanged}}">
+        <wat-button class="launch-button" title="Launch Element Selector"
+            on-click="{{showElementSelectorContainer}}">…</wat-button>
+      </div>
       <div class="property">
         <label for="delay">delay:</label>
         <input class="field" id="delay" type="number" 
@@ -61,7 +69,7 @@
           </template>
           <option value="custom">custom</option>
         </select>
-        <wat-button id="launch-button" title="Launch Easing Editor"
+        <wat-button class="launch-button" title="Launch Easing Editor"
             on-click="{{showEasingEditorContainer}}">…</wat-button>
       </div>
       <div class="{{easing == 'custom' ? 'property' : 'hidden'}}">
@@ -104,6 +112,16 @@
       <wat-bezier id="wat-bezier" class="hidden"></wat-bezier>
       <wat-step id="wat-step" class="hidden"></wat-step>
     </div>
+    <div id="target-selector-container" class="hidden">
+      <div>
+        <wat-button id="back-button" on-click="{{showPropertyContainer}}" 
+            title="Back">
+          <i class="fa fa-reply"></i>
+        </wat-button>
+      </div>
+      <wat-target-selector id="targetSelector" frame="{{previewFrame}}">
+      </wat-target-selector>
+    </div>
   </template>
 
   <script src="wat-timeditem-inspector.js"></script>
diff --git a/wat-timeditem-inspector/wat-timeditem-inspector.js b/wat-timeditem-inspector/wat-timeditem-inspector.js
@@ -25,6 +25,7 @@ Polymer('wat-timeditem-inspector', {
 
   observe: {
     'timedItem.specified.easing': 'timedItemEasingChanged',
+    '$.targetSelector.selected': 'animationTargetChanged',
   },
 
   created: function() {
@@ -52,12 +53,13 @@ Polymer('wat-timeditem-inspector', {
       this.easing = this.timedItem.specified.easing;
       this.$['wat-bezier'].timedItem = this.timedItem;
       this.$['wat-step'].timedItem = this.timedItem;
+      this.$.targetSelector.selected = this.timedItem.target ?
+          this.timedItem.target.id : '';
     } else {
       this.timedItem = new Animation(null, null, 0);
     }
   },
 
-
   timedItemEasingChanged: function() {
     if (!this.timedItem) {
       return;
@@ -71,6 +73,29 @@ Polymer('wat-timeditem-inspector', {
     }
     this.showAppropriateEasingEditor();
   },
+  
+  previewFrameChanged: function() {
+    var elementSelector = this.$.targetSelector;
+    this.previewFrame.addEventListener('load', 
+        elementSelector.update.bind(elementSelector));
+  },
+
+  animationTargetChanged: function() {
+    var doc = this.previewFrame.contentDocument;
+    var elem = doc.getElementById(this.$.targetSelector.selected);
+    if (!elem) {
+      return;
+    }
+    var oldAnim = this.timedItem;
+    var newAnim = new Animation(elem, oldAnim.effect, oldAnim.specified);
+    newAnim.name = oldAnim.name;
+    if (oldAnim.parent) {
+      oldAnim.before(newAnim);
+      oldAnim.remove();
+    }
+    this.timedItem = newAnim;
+    this.showPropertyContainer();
+  },
 
   showAppropriateEasingEditor: function() {
     if (this.bezierEasings.indexOf(this.timedItem.specified.easing) >= 0 ||
@@ -90,11 +115,18 @@ Polymer('wat-timeditem-inspector', {
     this.$['easing-editor-container'].className = '';
   },
 
+  showElementSelectorContainer: function() {
+    this.$['property-container'].className = 'hidden';
+    this.$['target-selector-container'].className = '';
+    this.$.targetSelector.update();
+  },
+
   showPropertyContainer: function() {
     if (this.presetEasings.indexOf(this.timedItem.specified.easing) >= 0) {
       this.easing = this.timedItem.specified.easing;
     }
     this.$['easing-editor-container'].className = 'hidden';
+    this.$['target-selector-container'].className = 'hidden';
     this.$['property-container'].className = '';
   }
 });
diff --git a/wat-wat/wat-wat.html b/wat-wat/wat-wat.html
@@ -117,8 +117,7 @@
       </wat-menu>
 
       <wat-dock id="dockRight" side="right">
-        <wat-timeditem-inspector class="paper" timedItem="{{selected || selectedRoot}}">
-        </wat-timeditem-inspector>
+        <wat-timeditem-inspector id="inspector" class="paper"></wat-timeditem-inspector>
       </wat-dock>
     </div>
 
diff --git a/wat-wat/wat-wat.js b/wat-wat/wat-wat.js
@@ -63,13 +63,16 @@ Polymer('wat-wat', {
       this.$.github.toast(event.detail);
     }.bind(this));
 
+    this.$.inspector.previewFrame = this.$['wat-code-editor'].previewFrame;
+
     this.loadAnimation();
   },
 
   observe: {
     '$.dockRight.collapsed': 'dockRightCollapsedChanged',
     '$.dockBottom.collapsed': 'dockBottomCollapsedChanged',
-    '$.dockBottom.shadowRoot.childNodes.length' : 'updateTimeline'
+    '$.dockBottom.shadowRoot.childNodes.length' : 'updateTimeline',
+    '$.inspector.timedItem': 'inspectorItemChanged',
   },
 
   updateTimeline: function() {
@@ -104,6 +107,38 @@ Polymer('wat-wat', {
     window.localStorage['wat-show-print-margin'] = this.showPrintMargin;
   },
 
+  // The follow three functions are replacements for the timedItem binding
+  // between wat-wat and wat-timedItem-inspector. We can't use a simple 
+  // binding because the inspector may create a new Animation when changing
+  // the target of an animation. In that case we need to change both the 
+  // selectedRoot and the current player's source item.
+  selectedChanged: function() {
+    if (this.selected !== null) {
+      this.$.inspector.timedItem = this.selected;
+    } else {
+      this.$.inspector.timedItem = this.selectedRoot;
+    }
+  },
+
+  selectedRootChanged: function() {
+    if (this.selected === null) {
+      this.$.inspector.timedItem = this.selectedRoot;
+    }
+  },
+
+  inspectorItemChanged: function() {
+    // Inspector changed the selected item, if the selected item is root,
+    // change the root. Otherwise just change the selcted item.
+    if (this.selected === this.selectedRoot) {
+      var newAnim = this.$.inspector.timedItem;
+      if (this.selectedRoot && this.selectedRoot.player) {
+        this.selectedRoot.player.source = newAnim;
+      }
+      this.selectedRoot = newAnim;
+    }
+    this.selected = this.$.inspector.timedItem;
+  },
+
   getStorageValue: function(localStorageKey, defaultValue) {
     return window.localStorage[localStorageKey] === undefined ? defaultValue : 
         JSON.parse(window.localStorage[localStorageKey]);

Original file line number	Diff line number	Diff line change
`@@ -38,6 +38,7 @@ Polymer('wat-code-editor', {`
`38`	`38`	`} else {`
`39`	`39`	`this.selected = window.localStorage['wat-selected-editors'].split(',');`
`40`	`40`	`}`
	`41`	`+ this.previewFrame = this.$['preview-frame'];`
`41`	`42`	`this.updatePreview();`
`42`	`43`	`},`
`43`	`44`