header.coffee in ecrire-0.23.0

- old
+ new
@@ -1,69 +1,125 @@
-Joint.bind 'Post.Header', class
+ObserveJS.bind 'Post.Header', class
   loaded: =>
+    @on 'click', @element().querySelector('p.browse'), @open
+    @on 'click', @element().querySelector('svg.clear'), @remove
+    @on 'change', @element().querySelector('input[type=file]'), @submit
     @on 'dragover', @over
     @on 'dragleave', @cancel
     @on 'drop', @drop
-    @on 'click', @element().querySelector('div'), @open
-    @on 'submit', @element().querySelector('form.clear'), @loading
-    input = @element().querySelector('input[type=file]')
-    @on 'change', input, @submit
 
-    @on 'images:update', @update
-    @on 'images:destroy', @clear
-    @refresh()
+    @on 'ObserveJS:XHR:Failed', @failed
 
+    @on 'click', @retrieve('div.error.status').querySelector('button'), @clear
+
+    @on 'images:create', @refresh
+    @on 'images:destroy', @refresh
+    @on 'titles:index', @popup
+    @on 'titles:update', document, @updateTitle
+    @on 'titles:create', document, @updateTitle
+
+  popup: (e) =>
+    document.body.appendChild(e.HTML)
+
+  show: (el) =>
+    @show.container ||= @element().querySelector('div.drop')
+    unless el.parentElement?
+      @element().querySelector('div.drop').appendChild(el)
+
+    for child in @show.container.children
+      child.classList.add 'hidden'
+
+    el.classList.remove('hidden')
+
+  hide: (el) =>
+    el.classList.add('hidden')
+
+  outside: (e, rect) ->
+    e.x >= (rect.left + rect.width) ||
+    e.x <= rect.left ||
+    e.y >= (rect.top + rect.height) ||
+    e.y <= rect.top
+
+  progress: (e) =>
+    return unless e.lengthComputable
+    percentComplete = e.loaded / e.total * 100.0;
+    progressBar = @retrieve('div.status.uploading').querySelector('.progressbar')
+    progressBar.firstElementChild.style.width = "#{percentComplete}%";
+
+  failed: (e) =>
+    errors = JSON.parse(e.response.target.responseText)
+    @hide(@retrieve('div.status.uploading'))
+    @show(@retrieve('div.error.status'))
+    ul = @retrieve('div.error.status').querySelector('ul')
+    for error in errors
+      ul.insertAdjacentHTML('beforeend', "<li>#{error}</li>")
+
   open: (e) =>
     @element().querySelector('input[type=file]').click()
 
+  remove: (e) =>
+    xhr = new ObserveJS.XHR(e.currentTarget)
+    xhr.request.upload.onprogress = @progress
+    xhr.send()
+
   over: (e) =>
     e.preventDefault()
-    @element().classList.add 'dropping'
+    if !@element().classList.contains('image')
+      @element().classList.add 'image'
+      @show(@retrieve('div.dropping.status'))
 
   cancel: (e) =>
     e.preventDefault()
-    @element().classList.remove 'dropping'
+    rect = @element().getBoundingClientRect()
+    if @outside(e, rect)
+      @clear(e)
 
   drop: (e) =>
-    @element().classList.remove 'dropping'
-    @loading()
     e.preventDefault()
-    form = @element().querySelector('form.update')
-    xhr = new Joint.XHR(form)
-    xhr.data.set 'image[file]', e.dataTransfer.files[0]
-    xhr.send()
+    if e.dataTransfer.files.length > 0
+      @upload(e.dataTransfer.files[0])
 
   submit: (e) =>
-    @loading()
-    Joint.XHR.send(e.target.form)
+    if e.target.files.length > 0
+      @upload(e.target.files[0])
 
+    e.target.value = ''
+
+  upload: (file) =>
+    if !@element().classList.contains('image')
+      @element().classList.add 'image'
+
+    @show(@retrieve('div.status.uploading'))
+    @retrieve('div.status.uploading').querySelector('.progressbar > span').style.width = '0%';
+    xhr = new ObserveJS.XHR(@element())
+    xhr.data.set 'image[file]', file
+    xhr.request.upload.onprogress = @progress
+    xhr.send()
+
   loading: =>
-    @element().classList.add 'loading'
+    @element().firstElementChild.appendChild(@retrieve('div.status.uploading'))
 
   clear: (e) =>
-    @element().style.backgroundImage = null
-    @element().classList.remove 'loading'
-    @refresh()
+    @element().classList.remove 'image'
+    for li in @retrieve('div.error.status').querySelectorAll('li')
+      li.remove()
 
-  update: (e) =>
-    @element().classList.remove 'loading'
+    for status of @statuses
+      @statuses[status].classList.add 'hidden'
 
-    if e.ErrorHTML
-      document.body.appendChild(e.ErrorHTML)
-      return
+    if @element().style.backgroundImage.length == 0
+      @element().querySelector('svg.clear').classList.add('hidden')
+    else
+      @element().querySelector('svg.clear').classList.remove('hidden')
 
-    @element().style.backgroundImage = "url(#{e.headerURL})"
-    @refresh()
 
+  refresh: (e) =>
+    if e.headerURL?
+      @element().style.backgroundImage = "url(#{e.headerURL})"
+    else
+      @element().style.backgroundImage = null
 
-  refresh: =>
-    clearForm = @element().querySelector('form.clear')
-    p = @element().querySelector('p')
-    @refresh = =>
-      if @element().style.backgroundImage.length > 0
-        p.style.visibility = 'hidden'
-        clearForm.style.visibility = 'visible'
-      else
-        clearForm.style.visibility = 'hidden'
-        p.style.visibility = 'visible'
+    @clear()
 
-    @refresh()
+  updateTitle: (e) =>
+    unless e.Errors?
+      @element().querySelector('a.title').textContent = e.Title