Mercurial > code > home > repos > light9
changeset 1589:21a52ce16954
new effects2.html polymer port
Ignore-this: 2edbfa5954a7592c1ddc77ec8c22e5d
| author | Drew Perttula <drewp@bigasterisk.com> |
|---|---|
| date | Wed, 31 May 2017 08:20:19 +0000 |
| parents | 9b46e38e2b0f |
| children | 8268224c1b23 |
| files | 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 |
| diffstat | 8 files changed, 158 insertions(+), 10 deletions(-) [+] |
line wrap: on
line diff
--- a/light9/subserver/effects.coffee Wed May 31 05:29:41 2017 +0000 +++ b/light9/subserver/effects.coffee Wed May 31 08:20:19 2017 +0000 @@ -51,6 +51,8 @@ url: '/effectEval/songEffects' data: {drop: e.uri, event: 'end', note: lastMomentaryNote} }) + + reconnectingWebSocket "../effectsUpdates", (msg) ->
--- a/light9/subserver/effects.jade Wed May 31 05:29:41 2017 +0000 +++ b/light9/subserver/effects.jade Wed May 31 08:20:19 2017 +0000 @@ -3,6 +3,11 @@ 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 @@ div(data-bind="foreach: classes") div.resource.effectClass - h2 - | Effect class - | - a(data-bind="attr: {href: uri}, text: label") - button(data-bind="click: $root.addToCurrentSong") Add to current song - button(data-bind="event: { mousedown: $root.addMomentary, mouseup: $root.addMomentaryUp }") Add momentary + 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")
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/light9/subserver/effects2.coffee Wed May 31 08:20:19 2017 +0000 @@ -0,0 +1,34 @@ +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
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/light9/subserver/effects2.html Wed May 31 08:20:19 2017 +0000 @@ -0,0 +1,61 @@ +<!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>
--- a/light9/web/edit-choice.html Wed May 31 05:29:41 2017 +0000 +++ b/light9/web/edit-choice.html Wed May 31 08:20:19 2017 +0000 @@ -16,10 +16,12 @@ padding: 3px; 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>
--- a/light9/web/paint/paint-report-elements.html Wed May 31 05:29:41 2017 +0000 +++ b/light9/web/paint/paint-report-elements.html Wed May 31 08:20:19 2017 +0000 @@ -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">
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/light9/web/resource-display.html Wed May 31 08:20:19 2017 +0000 @@ -0,0 +1,32 @@ +<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>