light9 Changeset - 21a52ce16954

Changeset - 21a52ce16954

Parent rev.

Child rev.

[Not reviewed]

default

0 5 3

Drew Perttula - 8 years ago 2017-05-31 08:20:19
drewp@bigasterisk.com

new effects2.html polymer port
Ignore-this: 2edbfa5954a7592c1ddc77ec8c22e5d

8 files changed with 151 insertions and 3 deletions:

light9/subserver/effects.coffee

light9/subserver/effects.jade

light9/subserver/effects2.coffee

light9/subserver/effects2.html

light9/web/edit-choice.html

light9/web/paint/paint-report-elements.html

light9/web/resource-display.html

light9/web/style.css

0 comments (0 inline, 0 general)

light9/subserver/effects.coffee

➞

Show inline comments

@@ @@ -53,6 +53,8 @@ model.addMomentaryUp = (e) -> @@
   })
 reconnectingWebSocket "../effectsUpdates", (msg) ->
   model.chases(msg.chases) if msg.chases?
   model.classes(msg.classes) if msg.classes?

light9/subserver/effects.jade

➞

Show inline comments

@@ @@ -3,6 +3,11 @@ html @@
   head
     title effects
     link(rel='stylesheet', href='/style.css')
     style.
       .headerRow {
         display: flex;
         justify-content: space-between;
+      }
   body
     #status starting...
     h1 Effects
@@ @@ -25,12 +30,19 @@ html @@
     div(data-bind="foreach: classes")
       div.resource.effectClass
         div.headerRow
           span
         h2
           | Effect class
+          |
               resource-display(data-bind="attr: {uri: uri, graph: graph}")
           a(data-bind="attr: {href: uri}, text: label")
               button(data-bind="click: $root.onRename") Rename
           span.rightTools
           button(data-bind="click: $root.addToCurrentSong") Add to current song
           button(data-bind="event: { mousedown: $root.addMomentary, mouseup: $root.addMomentaryUp }") Add momentary
         div.rename
           input
         div
           code(data-bind="text: code")

light9/subserver/effects2.coffee

➞

Show inline comments

@@ new file 100644 @@
 Polymer
   is: "light9-effects"
   properties:
     graph: {type: Object}
     effectClasses: { type: Array }
   ready: ->
     @graph.runHandler(@getClasses.bind(@))
   getClasses: ->
     U = (x) => @graph.Uri(x)
     @effectClasses = _.sortBy(@graph.subjects(U('rdf:type'), U(':Effect')))
 Polymer
   is: "light9-effect-class"
   properties:
     graph: {type: Object}
     uri: {type: String}
   onAdd: ->
     @$.songEffects.body = {drop: @uri}
     @$.songEffects.generateRequest()
   onMomentaryPress: ->
     @$.songEffects.body = {drop: @uri, event: 'start'}
     @lastPress = @$.songEffects.generateRequest()
     @lastPress.completes.then (request) =>
       @lastMomentaryNote = request.response.note
   onMomentaryRelease: ->
     return unless @lastMomentaryNote
     @$.songEffects.body = {drop: @uri, note: @lastMomentaryNote}
     @lastMomentaryNote = null
     @$.songEffects.generateRequest()
@@ \ No newline at end of file @@

light9/subserver/effects2.html

➞

Show inline comments

@@ new file 100644 @@
 <!doctype html>
 <html>
   <head>
     <title>subserver effects2</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="/style.css">
     <script src="/lib/webcomponentsjs/webcomponents-lite.min.js"></script>
     <link rel="import" href="/lib/polymer/polymer.html">
     <link rel="import" href="/lib/iron-ajax/iron-ajax.html">
     <script src="/lib/N3.js-pull61/browser/n3-browser.js"></script>
     <script src="/lib/async/dist/async.js"></script>
     <script src="/lib/underscore/underscore-min.js"></script>
     <link rel="import" href="/rdfdb-synced-graph.html">
     <link rel="import" href="/resource-display.html">
   </head>
   <body>
     <!-- replaces effects.jade for subserver -->
     <dom-module id="light9-effect-class">
       <template>
         <style>
          :host {
              display: block;
              padding: 5px;
              border: 1px solid green;
              background: #1e271e;
              margin-bottom: 3px;
+         }
         </style>
         Effect
         <resource-display graph="{{graph}}" uri="{{uri}}" rename></resource-display>
         <iron-ajax id="songEffects"
                    url="/effectEval/songEffects"
                    method="POST"
                    content-type="application/x-www-form-urlencoded"></iron-ajax>
           <button on-click="onAdd">Add to current song</button>
           <button on-mousedown="onMomentaryPress"
                   on-mouseup="onMomentaryRelease">Add momentary</button>
       </template>
     </dom-module>
     <dom-module id="light9-effects">
       <template>
         <style>
         </style>
         <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>
         <template is="dom-repeat" items="{{effectClasses}}">
           <light9-effect-class graph="{{graph}}" uri="{{item}}"></light9-effect-class>
         </template>
       </template>
     </dom-module>
     <light9-effects></light9-effects>
     <script src="effects2.js"></script>
   </body>
 </html>

light9/web/edit-choice.html

➞

Show inline comments

@@ @@ -17,9 +17,11 @@ @@
          display: inline-block;
+     }
     </style>
     <div id="box">
       <a href="{{uri}}"><!-- type icon goes here -->{{label}}</a>
       <!-- maybe use resource-display for this part -->
       <a href="{{uri}}" title="{{label}}"><!-- type icon goes here -->{{label}}</a>
       <!-- <button on-click="unlink">Unlink</button>  -->
     </div>
   </template>

light9/web/paint/paint-report-elements.html

➞

Show inline comments

@@ @@ -11,9 +11,14 @@ @@
      #breakdown { position: relative; }
      #sources { display: flex; }
      #solution { display: flex; margin-top: 80px; }
      #connectors { position: absolute; width: 100%; height: 100%; }
+     #connectors { position: absolute; width: 100%; height: 100%; z-index: -1; }
      #connectors path { stroke: #615c54; stroke-width: 3px; }
      [draggable=true]:hover {
          box-shadow: 0 0 20px yellow;
+     }
     </style>
     <div id="solutions">

light9/web/resource-display.html

➞

Show inline comments

@@ new file 100644 @@
 <link rel="import" href="/lib/polymer/polymer.html">
 <dom-module id="resource-display">
   <template>
     <link rel="stylesheet" href="/style.css">
     <span class="resource"><a href="{{uri}}">{{label}}</a></span>
     <template is="dom-if" if="{{rename}}">
       <button>Rename</button>
     </template>
   </template>
   <script>
    Polymer({
        is: "resource-display",
        properties: {
            graph: { type: Object },
            uri: { type: String },
            label: { type: String },
            rename: { type: Boolean },
        },
        ready: function() {
            this.graph.runHandler(this.setLabel.bind(this), "label #{this.uri}");
            console.log('ren', this.rename);
        },
        setLabel: function() {
            this.label = this.graph.stringValue(this.uri, this.graph.Uri('rdfs:label'));
            if (!this.label) {
                this.label = this.uri;
+           }
+       }
    });
   </script>
 </dom-module>

light9/web/style.css

➞

Show inline comments

@@ @@ -199,4 +199,4 @@ table { @@
 table.borders td, table.borders th {
     border: 1px solid #4a4a4a;
     padding: 2px 8px;
+}
@@ \ No newline at end of file @@
+}

0 comments (0 inline, 0 general)