light9 Changeset - ad90eb1f5493

Changeset - ad90eb1f5493

Parent rev.

Child rev.

[Not reviewed]

default

1 2 1

Drew Perttula - 10 years ago 2015-06-10 06:36:08
drewp@bigasterisk.com

port effecteval root page from knockout to polymer
Ignore-this: eba2dfccbe9a81418b4abfe521b81d01

4 files changed with 111 insertions and 61 deletions:

bin/effecteval

light9/effecteval/effect-components.html

108

light9/effecteval/index.coffee

light9/effecteval/index.html

0 comments (0 inline, 0 general)

bin/effecteval

➞

Show inline comments

@@ @@ -308,9 +308,8 @@ class App(object): @@
             (r'/()', SFH,
              {'path': 'light9/effecteval', 'default_filename': 'index.html'}),
             (r'/effect', EffectEdit),
             (r'/(websocket\.js)', SFH, {'path': 'light9/rdfdb/web/'}),
             (r'/effect\.js', StaticCoffee, {'src': 'light9/effecteval/effect.coffee'}),
-            (r'/index\.js', StaticCoffee, {'src': 'light9/effecteval/index.coffee'}),
+            (r'/(effect-components\.html)', SFH, {'path': 'light9/effecteval'}),
             (r'/effectUpdates', EffectUpdates),
             (r'/code', Code),
             (r'/songEffectsUpdates', SongEffectsUpdates),

light9/effecteval/effect-components.html

➞

Show inline comments

@@ new file 100644 @@
 <link rel="import" href="/lib/polymer/polymer.html">
 <script src="/websocket.js"></script>
 <script src="/lib/jquery-2.1.1.min.js"></script>
 <dom-module id="song-effect-list">
   <template>
     <template is="dom-repeat" items="{{songs}}" as="song">
       <li>
         <a class="song"
            href="{{song.uri}}"
            on-click="focusSong">Song <span>{{song.label}}</span></a>
         <ul>
           <template is="dom-repeat" items="{{song.effects}}" as="effect">
             <li>
               <l9-effect uri="{{effect.uri}}"
                          label="{{effect.label}}"></l9-effect>
             </li>
           </template>
           <li>
             <effect-drop-target song-uri="{{song.uri}}"></effect-drop-target>
           </li>
         </ul>
       </li>
     </template>
   </template>
 </dom-module>
 <script>
  Polymer({
    is: "song-effect-list",
    properties: {
      songs: Object
    },
    ready: function() {
      reconnectingWebSocket("songEffectsUpdates", function(msg) {
        var m, s;
        m = window.location.search.match(/song=(http[^&]+)/);
        if (m) {
          var match = decodeURIComponent(m[1]);
          this.songs = msg.songs.filter(function(s) { return s.uri == match; });
        } else {
          this.songs = msg.songs;
+       }
      }.bind(this));
    },
    focusSong: function(ev) {
      ev.preventDefault()
      window.location.search = '?' + $.param({song: ev.model.song.uri});
+   }
  });
 </script>
 <dom-module id="l9-effect">
   <template>
     <a class="effect" href="{{href}}">{{label}}</a>
     <button on-click="deleteEffect">Delete</button>
   </template>
 </dom-module>
 <script>
  Polymer({
    is: "l9-effect",
    properties: {
      uri: String,
      label: String,
      href: {
        type: String,
        computed: 'computeHref(uri)'
+     }
    },
    computeHref: function(uri) {
      return 'effect?'+jQuery.param({uri: uri});
    },
    deleteEffect: function() {
      $.ajax({
        type: 'DELETE',
        url: 'effect?' + $.param({uri: this.uri})
      });
      console.log("del", this.uri);
+   }
  });
 </script>
 <dom-module id="effect-drop-target">
   <template>
     <div class="dropTarget"
         on-dragenter="dragover"
         on-dragover="dragover"
         on-drop="drop">Add another (drop a sub or effect class)</div>
   </template>
 </dom-module>
 <script>
  Polymer({
    is: "effect-drop-target",
    properties: {
      songUri: String
    },
    dragover: function(event) {
      event.preventDefault()
      event.dataTransfer.dropEffect = 'copy'
    },
    drop: function(event) {
      event.preventDefault()
      $.post('songEffects', {
        uri: this.songUri,
        drop: event.dataTransfer.getData('text/uri-list')
      });
+   }
  });
 </script>

light9/effecteval/index.coffee

➞

Show inline comments

deleted file

light9/effecteval/index.html

➞

Show inline comments

@@ @@ -4,6 +4,7 @@ @@
     <title>effecteval</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="/style.css">
     <link rel="import" href="effect-components.html">
   </head>
   <body>
     <div id="status">starting...</div>
@@ @@ -11,22 +12,6 @@ @@
     <h1>Effect instances</h1>
     <div><a href=".">View all songs</a></div>
     <!-- subscribe to a query of all effects and their songs -->
     <ul data-bind="foreach: songs">
       <li>
         <a class="song" data-bind="attr: {href: uri}, click: $root.focusSong">Song <span data-bind="text: label"></span></a>
         <ul>
           <!-- ko foreach: effects -->
           <li>
             <a class="effect" data-bind="attr: {href: 'effect?'+jQuery.param({uri: uri})}, text: label"></a> <button data-bind="click: deleteEffect">Delete</button>
           </li>
           <!-- /ko -->
           <li class="dropTarget" data-bind="event: {dragover: $root.dragover, dragenter: $root.dragover, drop: function(data, event) { $root.drop(uri, event); }}">Add another (drop a sub or effect class)</li>
         </ul>
       </li>
     </ul>
     <script src="/lib/jquery-2.1.1.min.js"></script>
     <script src="/lib/knockout-3.1.0.js"></script>
     <script src="/websocket.js"></script>
     <script src="index.js"></script>
     <song-effect-list></song-effect-list>
   </body>
 </html>

0 comments (0 inline, 0 general)