light9 Changeset - 56e435ac7a41

Changeset - 56e435ac7a41

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Drew Perttula - 7 years ago 2018-06-08 09:54:08
drewp@bigasterisk.com

start the ui work for multiselect on /live
Ignore-this: 9cfd22eac4d49b093643027e387f4f5e

2 files changed with 33 insertions and 7 deletions:

light9/web/live/elements.html

light9/web/live/live.coffee

0 comments (0 inline, 0 general)

light9/web/live/elements.html

➞

Show inline comments

@@ @@ -170,32 +170,38 @@ @@
          font-size: 110%;
          padding: 4px;
+     }
      .device, h2 {
          border-top-right-radius: 15px;
+     }
      #mainLabel {
          font-size: 120%;
          color: #9ab8fd;
          text-decoration: initial;
+     }
      .device.selected h2 {
          outline: 3px solid #ffff0047;
+     }
      .deviceAttr.selected {
          background: #cada1829;
+     }
     </style>
     <div class="device">
       <h2 style$="[[bgStyle]]">
     <div class$="device {{devClasses}}">
       <h2 style$="[[bgStyle]]" on-click="onClick">
         <resource-display id="mainLabel" graph="{{graph}}" uri="{{uri}}"></resource-display>
         a <resource-display minor graph="{{graph}}" uri="{{deviceClass}}"></resource-display>
       </h2>
       <template is="dom-repeat" items="{{deviceAttrs}}" as="dattr">
         <div class="deviceAttr">
+        <div on-click="onAttrClick" class$="deviceAttr {{dattr.attrClasses}}">
           <span>attr <resource-display minor graph="{{graph}}" uri="{{dattr.uri}}"></resource-display></span>
           <light9-live-control
             graph="{{graph}}"
             device="{{uri}}"
             device-attr-row="{{dattr}}"
             effect="{{effect}}"
             graph-to-controls="{{graphToControls}}"
           ></light9-live-control>
         </div>
       </template>
     </div>
   </template>

light9/web/live/live.coffee

➞

Show inline comments

@@ @@ -90,86 +90,106 @@ coffeeElementSetup(class Light9LiveContr @@
     else if @deviceAttrRow.useChoice
       @value = @pickedChoice = null
     else
       @value = @immediateSlider = 0
+)
 coffeeElementSetup(class Light9LiveDeviceControl extends Polymer.Element
   @is: "light9-live-device-control"
   @getter_properties:
     graph: { type: Object, notify: true }
     uri: { type: String, notify: true }
     effect: { type: String }
     deviceClass: { type: String, notify: true }
+    deviceClass: { type: String, notify: true } # the uri str
     deviceAttrs: { type: Array, notify: true }
     graphToControls: { type: Object }
     bgStyle: { type: String, computed: '_bgStyle(deviceClass)' }
     devClasses: { type: String, value: '' } # the css kind
   @getter_observers: [
     'onGraph(graph)'
+    ]
   constructor: ->
     super()
     @selectedAttrs = new Set() # uri strings
   _bgStyle: (deviceClass) ->
     hash = 0
     deviceClass = deviceClass.value
     for i in [(deviceClass.length-10)...deviceClass.length]
       hash += deviceClass.charCodeAt(i)
     hue = (hash * 8) % 360
     accent = "hsl(#{hue}, 49%, 22%)"
     "background: linear-gradient(to right, rgba(31,31,31,0) 50%, #{accent} 100%);"
   onGraph: ->
     @graph.runHandler(@update.bind(@), "#{@uri.value} update")
   setDeviceSelected: (isSel) ->
     @devClasses = if isSel then 'selected' else ''
   setAttrSelected: (devAttr, isSel) ->
     if isSel
       @selectedAttrs.add(devAttr.value)
     else
       @selectedAttrs.delete(devAttr.value)
     @update()
   update: (patch) ->
     U = (x) => @graph.Uri(x)
     return if patch? and not SyncedGraph.patchContainsPreds(
       patch, [U('rdf:type'), U(':deviceAttr'), U(':dataType'), U(':choice')])
     @deviceClass = @graph.uriValue(@uri, U('rdf:type'))
     @deviceAttrs = []
     for da in _.unique(@graph.sortedUris(@graph.objects(@deviceClass, U(':deviceAttr'))))
       @push('deviceAttrs', @attrRow(da))
   attrRow: (devAttr) ->
     U = (x) => @graph.Uri(x)
     dataType = @graph.uriValue(devAttr, U(':dataType'))
     daRow = {
       uri: devAttr
       dataType: dataType
       showColorPicker: dataType.equals(U(':color'))
       attrClasses: if @selectedAttrs.has(devAttr.value) then 'selected' else ''
+      }
     if dataType.equals(U(':color'))
       daRow.useColor = true
     else if dataType.equals(U(':choice'))
       daRow.useChoice = true
       choiceUris = @graph.sortedUris(@graph.objects(devAttr, U(':choice')))
       daRow.choices = ({uri: x.value, label: @graph.labelOrTail(x)} for x in choiceUris)
       daRow.choiceSize = Math.min(choiceUris.length + 1, 10)
     else
       daRow.useSlider = true
       daRow.max = 1
       if dataType.equals(U(':angle'))
         # varies
         daRow.max = 1
     return daRow
   clear: ->
     for lc in @shadowRoot.querySelectorAll("light9-live-control")
       lc.clear()
   onClick: (ev) ->
     log('click', @uri)
     # select, etc
   onAttrClick: (ev) ->
     log('attr click', @uri, ev.model.dattr.uri)
     # select
+)
 class ActiveSettings
   # Maintains the settings on this effect
   constructor: (@graph) ->
     # The settings we're showing (or would like to but the widget
     # isn't registered yet):
     # dev+attr : {setting: Uri, onChangeFunc: f, jsValue: str_or_float}
     @settings = new Map()
     @keyForSetting = new Map() # setting uri str -> dev+attr
     # Registered graphValueChanged funcs, by dev+attr. Kept even when
     # settings are deleted.
     @onChanged = new Map()
   addSettingsRow: (device, deviceAttr, setting, value) ->
     key = device.value + " " + deviceAttr.value

0 comments (0 inline, 0 general)