Implement custom elements update through atom-utils

lib/csv-editor-element.coffee

@@ -1,5 +1,5 @@
 {CompositeDisposable} = require 'atom'
-{SpacePenDSL, EventsDelegation} = require 'atom-utils'
+{SpacePenDSL, EventsDelegation, registerOrUpdateElement} = require 'atom-utils'
 CSVEditor = require './csv-editor'
 CSVEditorFormElement = require './csv-editor-form-element'
 CSVPreviewElement = require './csv-preview-element'
@@ -101,7 +101,9 @@ class CSVEditorElement extends HTMLElement
       @form.preview.error(reason)
       @form.openTableEditorButton.setAttribute('disabled', 'true')
 
-module.exports = CSVEditorElement = document.registerElement 'atom-csv-editor', prototype: CSVEditorElement.prototype
+module.exports =
+CSVEditorElement =
+registerOrUpdateElement 'atom-csv-editor', CSVEditorElement.prototype
 
 CSVEditorElement.registerViewProvider = ->
   atom.views.addViewProvider CSVEditor, (model) ->

lib/csv-editor-form-element.coffee

@@ -1,5 +1,5 @@
 {CompositeDisposable, Emitter} = require 'atom'
-{SpacePenDSL, EventsDelegation} = require 'atom-utils'
+{SpacePenDSL, EventsDelegation, registerOrUpdateElement} = require 'atom-utils'
 
 nextId = 0
 
@@ -24,9 +24,9 @@ class CSVEditorFormElement extends HTMLElement
     radios = (options) =>
       {name, label, options, outlet, selected} = options
 
-      @div class: 'controls btn-group', =>
+      @div class: 'controls btn-group', 'data-initial': selected, 'data-id': outlet, =>
         for optionName, value of options
-          inputOption = type: 'radio', value: normalizeValue(value), name: name, id: "#{optionName}-#{name}-#{id}"
+          inputOption = type: 'radio', value: normalizeValue(value), name: name, id: "#{optionName}-#{name}-#{id}", 'data-name': optionName
           inputOption.checked = true if selected is optionName
           @input(inputOption)
           @label class: 'btn', for: "#{optionName}-#{name}-#{id}", labelFromValue(value)
@@ -42,46 +42,11 @@ class CSVEditorFormElement extends HTMLElement
       @div class: "control-group with-text-editor #{name}", =>
         @div class: 'controls', =>
           @label class: 'setting-title', label
-          @tag 'atom-text-editor', outlet: "#{outlet}TextEditorElement", mini: true
+          @tag 'atom-text-editor', outlet: "#{outlet}TextEditorElement", mini: true, 'data-id': outlet
 
         options.options["custom"] = 'custom'
         radios(options)
 
-      reversedOptions = {}
-      reversedOptions[v] = k for k,v of options.options
-
-      CSVEditorFormElement::__bindings__ ?= []
-      CSVEditorFormElement::initializeBindings ?= ->
-        @__bindings__.forEach (f) => f.call(this)
-        @__bindings__.length = 0
-      CSVEditorFormElement::__bindings__.push ->
-        @["#{outlet}TextEditor"] = @["#{outlet}TextEditorElement"].getModel()
-        @subscriptions.add @["#{outlet}TextEditor"].onDidChange =>
-          return unless @attached
-          if @["#{outlet}TextEditor"].getText() isnt ''
-            @querySelector("#custom-#{name}-#{id}")?.checked = true
-          else
-            @querySelector("##{selected}-#{name}-#{id}")?.checked = true
-
-          @emitChangeEvent()
-
-      CSVEditorFormElement::__defaults__ ?= []
-      CSVEditorFormElement::initializeDefaults ?= (options) ->
-        @__defaults__.forEach (f) => f.call(this, options)
-        @__defaults__.length = 0
-        @initialized = true
-      CSVEditorFormElement::__defaults__.push (options) ->
-        value = options[outlet]
-        optionName = reversedOptions[value]
-
-        if optionName? and radio = @querySelector("##{optionName}-#{name}-#{id}")
-          radio.checked = true
-        else if value?
-          @["#{outlet}TextEditor"].setText(value)
-          @querySelector("#custom-#{name}-#{id}")?.checked = true
-        else if radio = @querySelector("##{selected}-#{name}-#{id}")
-          radio.checked = true
-
     @div class: 'settings-panel', =>
       @div class: 'setting-title', 'Choose between table and text editor:'
       @div class: 'controls', =>
@@ -160,6 +125,7 @@ class CSVEditorFormElement extends HTMLElement
             name: 'trim'
             label: 'Trim'
             selected: 'no'
+            outlet: 'trim'
             options:
               no: 'no'
               left: 'left'
@@ -196,6 +162,42 @@ class CSVEditorFormElement extends HTMLElement
 
     @initializeBindings()
 
+  initializeBindings: ->
+    Array::forEach.call @querySelectorAll('atom-text-editor'), (editorElement) =>
+      outlet = editorElement.dataset.id
+      radioGroup = editorElement.parentNode.parentNode.querySelector('[data-initial]')
+      initial = radioGroup.dataset.initial
+
+      @["#{outlet}TextEditor"] = element = editorElement.getModel()
+      @subscriptions.add element.onDidChange =>
+        return unless @attached
+        if element.getText() isnt ''
+          @querySelector("[id^='custom-']")?.checked = true
+        else
+          @querySelector("[id^='#{initial}-']")?.checked = true
+
+        @emitChangeEvent()
+
+  initializeDefaults: (options) ->
+    radioGroups = @querySelectorAll('.with-text-editor .btn-group')
+
+    Array::forEach.call radioGroups, (radioGroup) =>
+      outlet = radioGroup.dataset.id
+      initial = radioGroup.dataset.initial
+
+      radios = radioGroup.querySelectorAll('input[type="radio"]')
+      radioOptions = {}
+
+      value = options[outlet]
+
+      if value? and radio = Array::filter.call(radios, (r) -> r.value is value)[0]
+        radio.checked = true
+      else if value?
+        @["#{outlet}TextEditor"].setText(value)
+        radioGroup.querySelector("[id^='custom-']")?.checked = true
+      else if radio = radioGroup.querySelector("[id^='#{initial}-']")
+        radio.checked = true
+
   attachedCallback: ->
     @attached = true
 
@@ -283,4 +285,6 @@ class CSVEditorFormElement extends HTMLElement
     options
 
 
-module.exports = CSVEditorFormElement = document.registerElement 'atom-csv-editor-form', prototype: CSVEditorFormElement.prototype
+module.exports =
+CSVEditorFormElement =
+registerOrUpdateElement 'atom-csv-editor-form', CSVEditorFormElement.prototype

lib/csv-preview-element.coffee

@@ -1,3 +1,4 @@
+{registerOrUpdateElement} = require 'atom-utils'
 columnName = require './column-name'
 
 module.exports =
@@ -49,4 +50,6 @@ class CSVPreviewElement extends HTMLElement
     @innerHTML = ''
     @appendChild(wrapper)
 
-module.exports = CSVPreviewElement = document.registerElement 'atom-csv-preview', prototype: CSVPreviewElement.prototype
+module.exports =
+CSVPreviewElement =
+registerOrUpdateElement 'atom-csv-preview', CSVPreviewElement.prototype

lib/go-to-line-element.coffee

@@ -1,4 +1,4 @@
-{SpacePenDSL} = require 'atom-utils'
+{SpacePenDSL, registerOrUpdateElement} = require 'atom-utils'
 
 module.exports =
 class GoToLineElement extends HTMLElement
@@ -35,7 +35,9 @@ class GoToLineElement extends HTMLElement
 
   setModel: (@tableElement) ->
 
-module.exports = GoToLineElement = document.registerElement 'tablr-go-to-line', prototype: GoToLineElement.prototype
+module.exports =
+GoToLineElement =
+registerOrUpdateElement 'tablr-go-to-line', GoToLineElement.prototype
 
 GoToLineElement.registerCommands = ->
   atom.commands.add 'tablr-go-to-line',

lib/table-cell-element.coffee

@@ -1,3 +1,4 @@
+{registerOrUpdateElement} = require 'atom-utils'
 
 module.exports =
 class TableCellElement extends HTMLElement
@@ -46,4 +47,6 @@ class TableCellElement extends HTMLElement
   isSameCell: (cell, column, row) ->
     cell.value is @lastValue and column is @lastColumn and row is @lastRow
 
-module.exports = TableCellElement = document.registerElement 'tablr-cell', prototype: TableCellElement.prototype
+module.exports =
+TableCellElement =
+registerOrUpdateElement 'tablr-cell', TableCellElement.prototype

lib/table-element.coffee

@@ -1,7 +1,7 @@
 Delegator = require 'delegato'
 {Point} = require 'atom'
 {CompositeDisposable, Disposable} = require 'event-kit'
-{EventsDelegation, SpacePenDSL} = require 'atom-utils'
+{EventsDelegation, SpacePenDSL, registerOrUpdateElement} = require 'atom-utils'
 PropertyAccessors = require 'property-accessors'
 
 columnName = require './column-name'
@@ -1474,7 +1474,9 @@ class TableElement extends HTMLElement
 #    ##       ##       ##       ##     ## ##       ##   ###    ##
 #    ######## ######## ######## ##     ## ######## ##    ##    ##
 
-module.exports = TableElement = document.registerElement 'tablr-editor', prototype: TableElement.prototype
+module.exports =
+TableElement =
+registerOrUpdateElement 'tablr-editor', TableElement.prototype
 
 TableElement.registerViewProvider = ->
   atom.views.addViewProvider TableEditor, (model) ->

lib/table-gutter-cell-element.coffee

@@ -1,4 +1,4 @@
-{SpacePenDSL} = require 'atom-utils'
+{SpacePenDSL, registerOrUpdateElement} = require 'atom-utils'
 
 module.exports =
 class TableGutterCellElement extends HTMLElement
@@ -31,4 +31,6 @@ class TableGutterCellElement extends HTMLElement
     classes.push 'selected' if @tableElement.isSelectedRow(row)
     classes
 
-module.exports = TableGutterCellElement = document.registerElement 'tablr-gutter-cell', prototype: TableGutterCellElement.prototype
+module.exports =
+TableGutterCellElement =
+registerOrUpdateElement 'tablr-gutter-cell', TableGutterCellElement.prototype

lib/table-header-cell-element.coffee

@@ -1,4 +1,4 @@
-{SpacePenDSL} = require 'atom-utils'
+{SpacePenDSL, registerOrUpdateElement} = require 'atom-utils'
 columnName = require './column-name'
 
 module.exports =
@@ -44,4 +44,6 @@ class TableHeaderCellElement extends HTMLElement
 
     classes
 
-module.exports = TableHeaderCellElement = document.registerElement 'tablr-header-cell', prototype: TableHeaderCellElement.prototype
+module.exports =
+TableHeaderCellElement =
+registerOrUpdateElement 'tablr-header-cell', TableHeaderCellElement.prototype

lib/table-selection-element.coffee

@@ -1,5 +1,5 @@
 {CompositeDisposable} = require 'event-kit'
-{EventsDelegation, SpacePenDSL} = require 'atom-utils'
+{EventsDelegation, SpacePenDSL, registerOrUpdateElement} = require 'atom-utils'
 Selection = require './selection'
 
 class TableSelectionElement extends HTMLElement
@@ -54,7 +54,9 @@ class TableSelectionElement extends HTMLElement
     bottom: @tableEditor.getScreenRowOffsetAt(range.end.row - 1) + @tableEditor.getScreenRowHeightAt(range.end.row - 1)
 
 
-module.exports = TableSelectionElement = document.registerElement 'tablr-editor-selection', prototype: TableSelectionElement.prototype
+module.exports =
+TableSelectionElement =
+registerOrUpdateElement 'tablr-editor-selection', TableSelectionElement.prototype
 
 TableSelectionElement.registerViewProvider = ->
   atom.views.addViewProvider Selection, (model) ->