--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/web/coffee_element.coffee	Mon May 14 02:10:05 2018 +0000
@@ -0,0 +1,15 @@
+# Polymer seems to need static getters for 'observers' and
+# 'listeners', not just static attributes, though I don't know how it
+# can even tell the difference.
+#
+# This workaround is to use names like '@getter_properties' in the
+# class then register with this function that fixes them.
+# 
+# Also see http://coffeescript.org/#unsupported-get-set
+window.coffeeElementSetup = (cls) ->
+  for attr in ['properties', 'observers', 'listeners']
+    val = cls['getter_' + attr]
+    if val?
+      do (val) ->
+        Object.defineProperty(cls, attr, {get: ( -> val)})  
+  customElements.define(cls.is, cls)

--- a/light9/web/edit-choice.coffee	Sat May 12 23:02:26 2018 +0000
+++ b/light9/web/edit-choice.coffee	Mon May 14 02:10:05 2018 +0000
@@ -42,9 +42,9 @@
 
 
 
-class EditChoice extends Polymer.Element
+coffeeElementSetup(class EditChoice extends Polymer.Element
     @is: "edit-choice",
-    @properties:
+    @getter_properties:
         graph: {type: Object, notify: true},
         uri: {type: String, notify: true},
 
@@ -57,5 +57,4 @@
 
     unlink: ->
       @uri = null
-
-customElements.define(EditChoice.is, EditChoice)
\ No newline at end of file
+)

--- a/light9/web/edit-choice.html	Sat May 12 23:02:26 2018 +0000
+++ b/light9/web/edit-choice.html	Mon May 14 02:10:05 2018 +0000
@@ -28,5 +28,6 @@
       <button on-click="unlink">Unlink</button>
     </div>
   </template>
+  <script src="coffee_element.js"></script>
   <script src="edit-choice.js"></script>
 </dom-module>

--- a/light9/web/light9-music.coffee	Sat May 12 23:02:26 2018 +0000
+++ b/light9/web/light9-music.coffee	Mon May 14 02:10:05 2018 +0000
@@ -1,9 +1,9 @@
 log = console.log
 
 # port of light9/curvecalc/musicaccess.py
-Polymer
-  is: "light9-music",
-  properties:
+coffeeElementSetup(class Music extends Polymer.Element
+  @is: "light9-music",
+  @getter_properties:
     status: { type: String, notify: true }
     statusTitle: { type: String, notify: true }
     turboSign: { type: String, notify: true }
@@ -16,15 +16,16 @@
     t: { type: Number, notify: true }
     
   ready: ->
+    super.ready()
     @turboUntil = 0
-    @$.getTime.addEventListener('response', @onResponse.bind(@))
-    @$.getTime.addEventListener 'error', (e) =>
-      req = @$.getTime.lastRequest
-      @status = "✘"
-      @statusTitle = "GET "+req.url+ " -> " + req.status + " " + req.statusText
-      setTimeout(@poll.bind(@), 2000)
     @poll()
     setInterval(@estimateTimeLoop.bind(@), 30)
+
+  onError: (e) ->
+    req = @$.getTime.lastRequest
+    @status = "✘"
+    @statusTitle = "GET "+req.url+ " -> " + req.status + " " + req.statusText
+    setTimeout(@poll.bind(@), 2000)
     
   estimateTimeLoop: ->
     if @playing
@@ -33,6 +34,9 @@
       @t = @remoteT
     
   poll: ->
+    if not @$?.getTime?
+      setTimeout(@poll.bind(@), 200)
+      return
     clearTimeout(@nextPoll) if @nextPoll
     @$.getTime.generateRequest()
     @status = "♫"
@@ -65,4 +69,5 @@
     
     @turboUntil = Date.now() + 1000
     @poll()
-    
+)
+

--- a/light9/web/light9-music.html	Sat May 12 23:02:26 2018 +0000
+++ b/light9/web/light9-music.html	Mon May 14 02:10:05 2018 +0000
@@ -1,4 +1,4 @@
-<link rel="import" href="/lib/polymer/polymer.html">
+<link rel="import" href="/lib/polymer/polymer-element.html">
 <link rel="import" href="/lib/iron-ajax/iron-ajax.html">
 
 <!-- remote control of ascoltami -->
@@ -14,12 +14,13 @@
          font-size: 12px;
      }
     </style>
-    <iron-ajax id="getTime" url="/ascoltami/time"></iron-ajax>
+    <iron-ajax id="getTime" on-response="onResponse" on-error="onError" url="/ascoltami/time"></iron-ajax>
     <iron-ajax id="seek"
                method="POST"
                url="/ascoltami/seekPlayOrPause"
                content-type="application/json"></iron-ajax>
     <span>[[status]][[turboSign]]</span>
   </template>
+  <script src="coffee_element.js"></script>
   <script src="light9-music.js"></script>
 </dom-module>

--- a/light9/web/timeline/adjusters.coffee	Sat May 12 23:02:26 2018 +0000
+++ b/light9/web/timeline/adjusters.coffee	Mon May 14 02:10:05 2018 +0000
@@ -2,15 +2,14 @@
 Drawing = window.Drawing
 
 
-class AdjustersCanvas extends Polymer.Element
+coffeeElementSetup(class AdjustersCanvas extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
   @is: 'light9-adjusters-canvas'
-  @behaviors: [ Polymer.IronResizableBehavior ]
-  @properties:
+  @getter_properties:
     adjs: { type: Object, notify: true }, # adjId: Adjustable
-  @observers: [
+  @getter_observers: [
     'updateAllCoords(adjs)'
   ]
-  @listeners:
+  @getter_listeners:
     'iron-resize': 'resizeUpdate'
   connectedCallback: ->
     super.connectedCallback()
@@ -158,5 +157,4 @@
     # l/r arrows
     # mouse arrow cursor upon hover, and accent the hovered adjuster
     # connector
-
-customElements.define(AdjustersCanvas.is, AdjustersCanvas)
\ No newline at end of file
+)
\ No newline at end of file

--- a/light9/web/timeline/cursor_canvas.coffee	Sat May 12 23:02:26 2018 +0000
+++ b/light9/web/timeline/cursor_canvas.coffee	Mon May 14 02:10:05 2018 +0000
@@ -1,11 +1,10 @@
-
-Polymer
-  is: 'light9-cursor-canvas'
-  behaviors: [ Polymer.IronResizableBehavior ]
-  listeners: 'iron-resize': 'update'
-  properties:
+coffeeElementSetup(class CursorCanvas extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
+  @is: 'light9-cursor-canvas'
+  @getter_properties:
     viewState: { type: Object, notify: true, observer: "onViewState" }
-  ready: ->
+  @getter_listeners: 'iron-resize': 'update'
+  connectedCallback: ->
+    super.connectedCallback()
     @mouseX = 0
     @mouseY = 0
     @cursorPath = null
@@ -67,4 +66,4 @@
       @ctx.beginPath()
       Drawing.line(@ctx, @cursorPath.bot0, @cursorPath.bot1, '#ff0303', '3px')
       @ctx.stroke()
-    
\ No newline at end of file
+)
\ No newline at end of file

--- a/light9/web/timeline/inline-attrs.coffee	Sat May 12 23:02:26 2018 +0000
+++ b/light9/web/timeline/inline-attrs.coffee	Mon May 14 02:10:05 2018 +0000
@@ -1,8 +1,8 @@
 log = console.log
 
-class InlineAttrs extends Polymer.Element
+coffeeElementSetup(class InlineAttrs extends Polymer.Element
   @is: "light9-timeline-note-inline-attrs"
-  @properties:
+  @getter_properties:
     graph: { type: Object, notify: true }
     song: { type: String, notify: true }
     uri: { type: String, notify: true }  # the Note
@@ -11,7 +11,7 @@
     colorScale: { type: String, notify: true }
     noteLabel: { type: String, notify: true }
     selection: { type: Object, notify: true }
-  @observers: [
+  @getter_observers: [
     'addHandler(graph, uri)'
     'onColorScale(graph, uri, colorScale)'
     ]
@@ -72,4 +72,4 @@
 
   onDel: ->
     deleteNote(@graph, @song, @uri, @selection)
-customElements.define(InlineAttrs.is, InlineAttrs)
+)

--- a/light9/web/timeline/timeline-elements.html	Sat May 12 23:02:26 2018 +0000
+++ b/light9/web/timeline/timeline-elements.html	Mon May 14 02:10:05 2018 +0000
@@ -267,6 +267,7 @@
 <script src="/node_modules/n3/n3-browser.js"></script> 
 <script src="/node_modules/pixi.js/dist/pixi.min.js"></script>
 
+<script src="../coffee_element.js"></script>
 <script src="adjustable.js"></script>
 <script src="adjusters.js"></script>
 <script src="drawing.js"></script>

--- a/light9/web/timeline/timeline.coffee	Sat May 12 23:02:26 2018 +0000
+++ b/light9/web/timeline/timeline.coffee	Mon May 14 02:10:05 2018 +0000
@@ -181,10 +181,11 @@
         @zoomSpec.t1(newT1)
         @zoomSpec.t2(newT2)
       , lastTime + 10)  
+
     
-class TimelineEditor extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
+coffeeElementSetup(class TimelineEditor extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
   @is: 'light9-timeline-editor'
-  @properties:
+  @getter_properties:
     viewState: { type: Object }
     debug: {type: String}
     graph: {type: Object, notify: true}
@@ -194,23 +195,23 @@
     followPlayerSong: {type: Boolean, notify: true, value: true}
     song: {type: String, notify: true}
     show: {value: 'http://light9.bigasterisk.com/show/dance2017'}
-    songTime: {type: Number, notify: true},#, observer: '_onSongTime'}
-    songDuration: {type: Number, notify: true},#, observer: '_onSongDuration'}
+    songTime: {type: Number, notify: true}
+    songDuration: {type: Number, notify: true}
     songPlaying: {type: Boolean, notify: true}
     selection: {type: Object, notify: true}
-  @observers: [
+  @getter_observers: [
     'setSong(playerSong, followPlayerSong)',
     'onGraph(graph)',
-    ]
-    
+    '_onSongDuration(songDuration, viewState)',
+    '_onSongTime(songTime, viewState)',
+  ]
   connectedCallback: ->
     super.connectedCallback()
     
     ko.options.deferUpdates = true;
     
     @dia = @$.dia
-    
-
+     
     @selection = {hover: ko.observable(null), selected: ko.observable([])}
 
     window.debug_zoomOrLayoutChangedCount = 0
@@ -373,36 +374,25 @@
       getSuggestedTargetOffset: () => $V([0, 0])
       getValueForPos: valForPos
       }))
-      
-customElements.define(TimelineEditor.is, TimelineEditor)
+)
+
 
 # plan: in here, turn all the notes into simple js objects with all
 # their timing data and whatever's needed for adjusters. From that, do
 # the brick layout. update only changing adjusters.
-class TimeZoomed extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
+coffeeElementSetup(class TimeZoomed extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element)
   @is: 'light9-timeline-time-zoomed'
-  @behaviors: [ Polymer.IronResizableBehavior ]
-  @properties:
+  @getter_properties:
     graph: { type: Object, notify: true }
     project: { type: Object }
     selection: { type: Object, notify: true }
     dia: { type: Object, notify: true }
     song: { type: String, notify: true }
     viewState: { type: Object, notify: true }
-  @observers: [
+  @getter_observers: [
     'onGraph(graph, setAdjuster, song, viewState, project)',
     'onZoom(viewState)',
   ]
-  update: ->
-    @renderer.resize(@clientWidth, @clientHeight)
-    @renderer.render(@stage)
-
-  onZoom: ->
-    updateZoomFlattened = ->
-      log('updateZoomFlattened')
-      @zoomFlattened = ko.toJS(@viewState.zoomSpec)
-    ko.computed(updateZoomFlattened.bind(@))
-
   constructor: ->
     super()
     @stage = new PIXI.Container()
@@ -419,8 +409,19 @@
     
     @$.rows.appendChild(@renderer.view);
   
+  update: ->
+    @renderer.resize(@clientWidth, @clientHeight)
+    @renderer.render(@stage)
+
+  onZoom: ->
+    updateZoomFlattened = ->
+      log('updateZoomFlattened')
+      @zoomFlattened = ko.toJS(@viewState.zoomSpec)
+    ko.computed(updateZoomFlattened.bind(@))
+  
   onGraph: ->
     @graph.runHandler(@gatherNotes.bind(@), 'zoom notes')
+    
   gatherNotes: ->
     U = (x) => @graph.Uri(x)
 
@@ -476,12 +477,12 @@
     desiredWidthT = @viewState.zoomInX.invert(desiredWidthX) - @viewState.zoomInX.invert(0)
     desiredWidthT = Math.min(desiredWidthT, @zoom.duration() - dropTime)
     @project.makeNewNote(effect, dropTime, desiredWidthT)
-        
-customElements.define(TimeZoomed.is, TimeZoomed)
+)
+
 
-class TimeAxis extends Polymer.Element
+coffeeElementSetup(class TimeAxis extends Polymer.Element
   @is: "light9-timeline-time-axis",
-  @properties:
+  @getter_properties:
     viewState: { type: Object, notify: true, observer: "onViewState" }
   onViewState: ->
     ko.computed =>
@@ -489,8 +490,8 @@
       pxPerTick = 50
       axis = d3.axisTop(@viewState.zoomInX).ticks(@viewState.width() / pxPerTick)
       d3.select(@$.axis).call(axis)
+)
 
-customElements.define(TimeAxis.is, TimeAxis)
 
 class NoteRow
   constructor: (@graph, @dia, @song, @zoomInX, @noteUris, @rowIndex, @selection) ->
@@ -501,7 +502,6 @@
     'onZoom(zoomInX)'
     ]
 
-
   observedUpdate: (graph, song, rowIndex) ->
     @update() # old behavior
     #@graph.runHandler(@update.bind(@), "row notes #{@rowIndex}")
@@ -696,10 +696,10 @@
     
   
   
-class DiagramLayer extends Polymer.Element
+coffeeElementSetup(class DiagramLayer extends Polymer.Element
   # note boxes. 
   @is: 'light9-timeline-diagram-layer'
-  @properties: {
+  @getter_properties: {
     selection: {type: Object, notify: true}
   }
   connectedCallback: ->
@@ -794,4 +794,4 @@
     #elem.setAttribute('x', curvePts[0].e(1)+20)
     #elem.setAttribute('y', curvePts[0].e(2)-10)
     #elem.innerHTML = effectLabel;
-customElements.define(DiagramLayer.is, DiagramLayer)
\ No newline at end of file
+)
\ No newline at end of file