ecrire 0.22.1 → 0.23.0

data/lib/ecrire/app/assets/javascripts/admin/posts/header.coffee

@@ -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

data/lib/ecrire/app/assets/javascripts/admin/posts/new.js.coffee

@@ -1,7 +1,6 @@
-Joint.bind 'Posts.New', class
+ObserveJS.bind 'Posts.New', class
   loaded: =>
     for el in @element().querySelectorAll('.transparent')
       el.classList.remove('transparent')
 
     @element().querySelector('input[type=text]').focus()
-

data/lib/ecrire/app/assets/javascripts/admin/posts/tag.js.coffee

@@ -0,0 +1,7 @@
+ObserveJS.bind 'Post.Tag', class
+  loaded: =>
+    @on 'click', @submit
+
+  submit: (e) =>
+    @on 'tags:update', @remove
+    ObserveJS.XHR.send(@element())

data/lib/ecrire/app/assets/javascripts/admin/posts/tags.js.coffee

@@ -0,0 +1,15 @@
+ObserveJS.bind 'Post.Tags', class
+  loaded: =>
+    @on 'tags:index', @show
+    @on 'tags:update', document, @update
+
+  show: (e) =>
+    document.body.appendChild(e.HTML)
+    e.HTML.querySelector('input').focus()
+
+  update: (e) =>
+    target = @element().querySelector("[oid='#{e.HTML.getAttribute('oid')}']")
+    if target?
+      target.remove()
+    else
+      @element().insertBefore(e.HTML, @element().lastElementChild)

data/lib/ecrire/app/assets/javascripts/admin/posts/title.coffee

@@ -1,15 +1,44 @@
-Joint.bind 'Posts.Title', class
+ObserveJS.bind 'Post.Title', class
   loaded: =>
-    @title = @element().querySelector('input.title')
-    @on 'posts:update', @update
+    @on 'keydown', @enter
+    @observer = new MutationObserver(@modified)
+    @observer.settings = {
+      childList: true,
+      subtree: true,
+    }
+    @input = @element().querySelector('div.input')
+    @errors = @element().querySelector('ul.errors')
+    @observe()
+    @on 'titles:update', @update
+    @on 'titles:create', @update
+    @input.focus()
+
+  dismiss: =>
+    @element().parentElement.remove()
 
   update: (e) =>
-    @title.value = e.HTML
-    @title.blur()
+    if e.Errors
+      @errors.appendChild(error) for error in e.Errors
+    else
+      @dismiss()
+
+  enter: (e) =>
+    if e.keyCode == 13
+      @errors.innerHTML = ''
+      e.stopPropagation()
+      e.preventDefault()
+      @save()
+      return
 
-    if e.MessageHTML
-      event = new CustomEvent('Editor:message', { bubbles: true})
-      event.MessageHTML = e.MessageHTML
-      @element().dispatchEvent(event)
+  modified: (observedMutations) =>
+    @observer.disconnect()
+    @input.innerHTML = @input.textContent
+    @observe()
 
+  observe: =>
+    @observer.observe @input, @observer.settings
 
+  save: =>
+    xhr = new ObserveJS.XHR(@element())
+    xhr.data.set '[title]name', @input.textContent
+    xhr.send()

data/lib/ecrire/app/assets/javascripts/admin/tags/list.js.coffee

@@ -0,0 +1,34 @@
+ObserveJS.bind 'Tags.List', class
+  loaded: =>
+    @on 'keypress', @element().querySelector('input'), @submit
+    @on 'click', @element().querySelector('ul'), @update
+    @on 'tags:update', @toggle
+    @on 'tags:create', @add
+
+  submit: (e) =>
+    if e.keyCode != 13
+      return
+
+    xhr = new ObserveJS.XHR(e.target)
+    xhr.method = 'POST'
+    xhr.data.set '[tag]name', e.target.value
+    xhr.send()
+
+  update: (e) =>
+    return unless e.target instanceof HTMLLIElement
+    xhr = new ObserveJS.XHR(e.target)
+    xhr.send()
+
+  toggle: (e) =>
+    li = @element().querySelector("[oid='#{e.ObjectID}']")
+    li.remove()
+
+  add: (e) =>
+    @element().querySelector('input').value = ''
+    target = @element().querySelector("[oid='#{e.HTML.getAttribute('oid')}']")
+    if target?
+      target.classList.add('highlight')
+    else
+      ul = @element().querySelector('ul')
+      ul.insertBefore(e.HTML, ul.firstElementChild)
+      e.HTML.classList.add('highlight')

data/lib/ecrire/app/assets/javascripts/admin.js

@@ -1,5 +1,5 @@
 //= require turbolinks
-//= require joint
+//= require observejs
 //= require_tree ./admin
 //= require_tree ./vendor
 //= require_tree ./shared

data/lib/ecrire/app/assets/javascripts/application.js

@@ -1,10 +1,10 @@
 //= require turbolinks
-//= require joint
+//= require observejs
 //= require_tree ./vendor
 //= require_tree ./shared
 //
 
-// Not loading this with JointJS cuz the layout
+// Not loading this with ObserveJS cuz the layout
 // would require to declare a class for it to load.
 var script = document.getElementsByTagName('script');
 
@@ -18,4 +18,3 @@ if (script) {
     document.addEventListener('page:load', Prism.highlightAll);
   }
 }
-

data/lib/ecrire/app/assets/javascripts/shared/overlay.js.coffee

@@ -1,4 +1,4 @@
-Joint.bind 'Overlay', class
+ObserveJS.bind 'Overlay', class
   loaded: =>
     @on 'click', @clicked
     @on 'keyup', document, @escaped
@@ -26,4 +26,3 @@ Joint.bind 'Overlay', class
     window.scrollTo(0, @y)
     main.style.top = null
     @scrollTop = null
-

data/lib/ecrire/app/assets/javascripts/shared/popup.js.coffee

@@ -1,7 +1,6 @@
-Joint.bind 'Posts.Popup', class
+ObserveJS.bind 'Posts.Popup', class
   loaded: =>
     @on 'posts:index', @show
 
   show: (e) =>
     document.body.appendChild(e.HTML)
-

data/lib/ecrire/app/assets/stylesheets/admin/base.css.scss

@@ -24,7 +24,7 @@ body {
 }
 
 a {
-  color: rgb(114, 153, 204);
+  color: $link-color;
 }
 
 ol.list {
@@ -95,4 +95,3 @@ main {
   box-shadow: inset 0px 0px 3px 1px rgba(76, 120, 155, 1);
   color: #FEFEFE;
 }
-

data/lib/ecrire/app/assets/stylesheets/admin/editor/base.css.scss

@@ -7,13 +7,6 @@ body.posts > main {
   @include flex-direction(column);
 }
 
-
-body.posts > main > header {
-  @include flex(0 auto);
-  padding: 1em 0;
-
-}
-
 body.posts > main > section {
   @include flex(1);
   @include display(flex);

data/lib/ecrire/app/assets/stylesheets/admin/editor/content.css.scss

@@ -46,36 +46,54 @@ body.edit.posts > main > section {
       background: rgba(0,0,0, 0.1);
     }
 
-    & > div.image {
+    & > figure {
       @include display(flex);
       @include flex-direction(column);
       @include transition(background-color 0.3s);
-      height: 480px;
       background-color: #EEE;
+      overflow: hidden;
 
-      &:hover {
-        background-color: #CCC;
-      }
 
-      &.dropping {
-        background-color: #CCC;
+      &.dropping div[contenteditable] {
+        background-color: rgb(122, 199, 122);
       }
 
-      & > em {
-        background-color: #EEE;
+      figcaption {
         padding: 1em;
       }
 
-      & > div {
+      & > div[contenteditable] {
         @include display(flex);
         @include align-items(center);
-        @include justify-content(center);
+        @include justify-content(flex-end);
+        @include flex-direction(column);
         @include flex(1);
         cursor: pointer;
         width: 100%;
-        background-size: cover;
+        box-shadow: 0 0 3px 0 #aaa;
+
+        &:hover {
+          background-color: #CCC;
+        }
+
+        & > .progressbar {
+          @include flex(0 auto);
+          width: 100%;
+          & > span.progress {
+            @include transition(width 0.3s ease-out);
+            display: block;
+            height: 2px;
+            width: 0%;
+            background: #B9C8BA;
+          }
+        }
+
+        & > img {
+          max-width: 100%;
+        }
 
         & > p {
+          padding: 2em 0;
           text-align: center;
         }
 

data/lib/ecrire/app/assets/stylesheets/admin/editor/header.css.scss

@@ -1,45 +1,167 @@
 body.edit.posts > main > header {
   @include display(flex);
-  @include flex-direction(column);
+  @include flex(0 auto);
 }
 
-body.edit.posts > main > header form.title {
+body.edit.posts > main > header > div.title {
   @include display(flex);
-  @include flex(0 auto);
-  position: relative;
-  margin: auto 0;
+  @include flex-direction(column);
+  @include transition(opacity 0.2s linear);
+  text-align: center;
+  width: 100%;
+  z-index: 5;
+  & > p.browse {
+    @include transition(color 0.3s);
+    font-size: 0.7em;
+    cursor: pointer;
+    &:hover {
+      color: rgb(114, 153, 204);
+    }
+  }
 
-  &:after {
+  svg.clear {
+    @include transition(fill 0.3s);
+    width: 30px;
     position: absolute;
-    width: 1em;
-    content: '↵';
     right: 1em;
-    top: 1.1em;
-    color: #FAFAFA;
-    font-size: 1.4em;
+    top: 1em;
+    fill: #D8ABAB;
+    cursor: pointer;
+    &:hover {
+      fill: #C23131;
+    }
   }
+}
 
-  input.title {
-    width: 100%;
-    min-height: 60px;
-    font-size: 2em;
-    cursor: pointer;
-    text-decoration: underline;
-    text-align: center;
-    background: none;
-    border-color: transparent;
-    border-style: solid;
-    border-width: 1px;
-    resize: none;
-    outline: none;
-    color: inherit;
-
-    &:focus {
-      cursor: text;
-      text-decoration: none;
-      background: rgb(239, 239, 239);
-      box-shadow: 0 0 2px #FFF;
+[as='Post.Header'] a.title {
+  @include flex(0 auto);
+  @include transition(box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease);
+
+  font-size: 2.3em;
+  line-height: 1.4em;
+  padding: 0.3em 1em;
+  margin: 0.5em 0 0 0;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+
+  &:hover {
+    color: $link-color;
+  }
+
+}
+
+[as='Post.Header'] {
+  @include display(flex);
+  @include flex-direction(column);
+  @include align-items(center);
+  @include justify-content(flex-start);
+  @include transition(background-color 0.3s ease);
+
+  background-size: cover;
+  position: relative;
+  padding-bottom: 0.5em;
+  border-bottom: 1px solid #E8E8E8;
+
+  &.image {
+
+    & > div.drop {
+      background-color: rgb(122, 199, 122);
+      opacity: 1;
+      z-index: 6;
+    }
+
+    & > div.title {
+      opacity: 0;
+    }
+  }
+
+  input[type='file'] {
+    visibility: hidden;
+  }
+
+}
+
+[as='Post.Header'] div.drop {
+  @include transition(opacity 0.3s ease);
+  @include display(flex);
+  @include flex-direction(column);
+  @include align-items(center);
+  @include justify-content(center);
+  position: absolute;
+  opacity: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  font-size: 1em;
+  text-align: center;
+  margin: 0;
+
+  svg {
+    width: 40px;
+    fill: rgb(66, 152, 66);
+  }
+
+  p {
+    color: rgb(66, 152, 66);
+    text-shadow: 0 1px 0 rgb(143, 213, 143);
+  }
+}
+
+[as='Post.Header'] div.progressbar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+
+  & > span.progress {
+    @include transition(width 0.3s ease-out);
+    display: block;
+    height: 100%;
+    width: 0%;
+    background: #5FFF6A;
+  }
+}
+
+[as='Post.Header'] div.drop > div.status.error {
+  @include flex-direction(column);
+  @include align-items(center);
+  @include justify-content(center);
+  width: 100%;
+  height: 100%;
+
+  background: $red-color;
+  color: $dark-red-color;
+
+  &:not(.hidden) {
+    @include display(flex);
+  }
+
+  svg {
+    fill: rgb(89, 18, 18);
+  }
+
+  ul {
+    color: $dark-red-color;
+    text-shadow: 0 1px 0 #BD4141;
+    font-weight: bolder;
+  }
+
+  button {
+    @include transition(box-shadow 0.2s ease);
+    border: 1px solid #8B0B0B;
+    border-radius: 2px;
+    box-shadow: inset 0 0px 1px 0 #D85D5D;
+    padding: 6px 1em;
+
+    &:hover {
+      box-shadow: inset 0 0px 3px 0 #D85D5D;
+    }
 
+    &:active {
+      box-shadow: inset 0 0px 2px 0 #813131;
     }
   }
 }
@@ -51,7 +173,7 @@ body.posts > main [as='Navigation.Toggle'] {
   height: auto;
   cursor: pointer;
   fill: rgba(212, 228, 237, 1);
-  margin: 0 auto;
+  margin: 8px auto;
   &:hover {
     fill: #73CDFF;
   }

data/lib/ecrire/app/assets/stylesheets/admin/posts.css.scss

@@ -38,9 +38,16 @@ form.post.new.title {
       color: #BABABA;
       font-size: 1.4em;
     }
+
+    &.errors {
+      border-color: $red-color;
+    }
   }
 
-  p {
+  p, ul {
     text-align: center;
+    &.errors {
+      color: $red-color;
+    }
   }
 }