ecrire 0.25.2 → 0.26.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 019b6b6dac1cff8e3d865f523fefeace2f335da5
-  data.tar.gz: 078fa1f7faee17ad7594d94c3fc08b05a817ed68
+  metadata.gz: adb9f6b14c62670d4d5dc7911d0e81c0c839063f
+  data.tar.gz: 39d21c0168805fe0662043277610280565bcadf8
 SHA512:
-  metadata.gz: fbdf7787492f759b01a83565ff42ed7d5741c4a6d3abd7a47a802ca5a3ac2e776313d78a4138b01c046a097aeabe48faa055cced2bd625f1f9b379004d3da399
-  data.tar.gz: 1995ed75afcf08f55c6f29f36b28375719d4178946859811374b4fc5e2c43e7bff7706010e6d5bd1dacd829573c543a731d54487898142b3bd25881ad8c656d4
+  metadata.gz: dbe1af93b20ea6a4c9e02e7fa51da7ce7cfc5e8512b0c9f3913dfab78f464ba7908a9af8304ca93cc00ba3887a7f524d668e219f10f3da3799937441743c5cfc
+  data.tar.gz: 5bb9f996b868febf70f88b92aac268876bee73edec4c8823747e65b4e86d95415338986feaf3586070afacd747b3c80e3552135b8d679d616dd3a5bb2c62d24b

data/Gemfile

@@ -9,6 +9,7 @@ gem 'bcrypt',            '~> 3.1'
 gem 'nokogiri',          '~> 1.6'
 gem 's3',                '~> 0.3'
 gem 'pg',                '~> 0.17'
+gem 'pg_search'
 gem 'kaminari',          '~> 0.15'
 
 gem 'sprockets-rails',   '~> 2.1'

data/lib/ecrire/app/assets/javascripts/admin/editor/content.coffee

@@ -44,6 +44,13 @@ ObserveJS.bind 'Editor.Content', class @Editor
       if mutations.target?
         @updated(mutations)
 
+      if @element().children.length == 0
+        line = @lines('')[0]
+        @element().appendChild(line)
+        cursor = new Editor.Cursor(0)
+        cursor.update(@walker(line), 0)
+
+
     event = new CustomEvent('Editor:updated', {bubbles: true})
     @element().dispatchEvent(event)
 

data/lib/ecrire/app/assets/javascripts/admin/editor/ext.coffee

@@ -24,7 +24,10 @@ HTMLPreElement::toString = ->
   @textContent
 
 HTMLElement::toString = ->
-  @textContent
+  if @nodeName == 'FIGURE'
+    @querySelector('figcaption').textContent
+  else
+    @textContent
 
 HTMLHeadingElement::toString = HTMLParagraphElement::toString = ->
   @textContent

data/lib/ecrire/app/assets/javascripts/admin/navigation/save.js.coffee

@@ -1,23 +1,11 @@
 ObserveJS.bind 'Editor.Save', class
   loaded: =>
-    @button = @element().querySelector('button')
-    @time = @element().querySelector('div.update > p')
-
-    @on 'keydown', document, @shouldSave
+    @on 'keydown', window, @save
     @on 'Editor:loaded', document, @cache
     @on 'Editor:updated', document, @update
     @on 'posts:update', document, @saved
-    @on 'click', @button, @save
     @on 'beforeunload', window, @confirm
 
-    @button.textContent = @button.getAttribute('persisted')
-    @refresh()
-    @cache()
-    @interval = setInterval(@refresh, 1000)
-
-  refresh: () =>
-    @time.textContent = moment(@time.getAttribute('time')).fromNow()
-
   confirm: (e) =>
     if @cache() != PostBody.instance.toString()
       e.returnValue = "You have unsaved changed."
@@ -28,55 +16,52 @@ ObserveJS.bind 'Editor.Save', class
     @cache = (refresh) ->
       if refresh
         cache = PostBody.instance.toString()
-        @button.setAttribute('disabled', 'disabled')
-        @button.textContent = @button.getAttribute('persisted')
       cache
     @cache()
 
-  dirty: =>
-    @cache()? && @cache() != PostBody.instance.toString()
-
-  shouldSave: (e) =>
+  save: (e) =>
+    @cache()
     if e.metaKey isnt true || e.which isnt 83
       return
 
     e.preventDefault()
     e.stopPropagation()
 
-    if @dirty()
-      @save(e)
-    else
-      @nudge()
-
-  nudge: =>
-    button = document.querySelector("[as='Editor.Save'] button")
-    clean = ->
-      button.classList.remove('nudge')
-
-    button.addEventListener 'animationend', clean
-    button.addEventListener 'webkitAnimationEnd', clean
-    button.classList.add('nudge')
+    dialog = @element().content.querySelector('#SavePost').cloneNode(true)
+    document.body.appendChild(dialog)
 
-  save: (e) =>
-    e.preventDefault()
-    e.stopPropagation()
+  saved: (e) =>
+    @cache(true)
 
-    form = document.querySelector("[as='Editor.Save']")
-    xhr = new ObserveJS.XHR(form)
+ObserveJS.bind 'Editor.Save.Dialog', class
+  loaded: =>
+    @on 'posts:update', document, @saved
+    xhr = new ObserveJS.XHR(@element())
     xhr.data.set('post[content]', PostBody.instance.toString())
     xhr.data.set('context', 'content')
+    xhr.request.upload.addEventListener 'progress', @upload
+    xhr.request.addEventListener 'progress', @download
     xhr.send()
 
+  remove: =>
+    if @element().classList.contains 'fade'
+      @element().remove()
+      return
+
+    @element().classList.add 'fade'
+    @on 'webkitTransitionEnd', @remove
+    @on 'transitionEnd', @remove
+
   saved: (e) =>
-    if e.UpdatedAtTime
-      @time.setAttribute('time', e.UpdatedAtTime)
-      @refresh()
-      @cache(true)
+    msg = @element().querySelector('.message')
+    msg.innerHTML = e.MessageHTML
+    window.setTimeout @remove, 400
 
-  update: (e) =>
-    if @dirty()
-      @button.removeAttribute('disabled')
-      @button.textContent = @button.getAttribute('dirty')
+  download: (e) =>
+    if e.lengthComputable
+      @element().querySelector('.progress').style.width = "#{50 + e.total / e.loaded * 50}%"
     else
-      @button.setAttribute('disabled', 'disabled')
-      @button.textContent = @button.getAttribute('persisted')
+      @element().querySelector('.progress').style.width = "100%"
+
+  upload: (e) =>
+    @element().querySelector('.progress').style.width = "#{e.total / e.loaded * 50}%"

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

@@ -0,0 +1,21 @@
+ObserveJS.bind 'Posts.Filter', class
+  loaded: =>
+    @on 'input', @search
+    @on 'posts:index', @update
+
+    @element().querySelector('input.search').focus()
+
+  search: =>
+    xhr = new ObserveJS.XHR(@element())
+    xhr.data.set 'q', @element().querySelector('input').value
+    tags = @element().querySelector("[as='Posts.Filter.Tags']")
+    if tags.hasAttribute('tid')
+      xhr.data.set 'tid', tags.getAttribute('tid')
+
+    xhr.send()
+
+  update: (e) =>
+    for list in e.HTML
+      el = @element().parentElement.querySelector(".#{Array.prototype.join.call(list.classList, '.')}")
+      if el?
+        el.parentElement.replaceChild(list.cloneNode(true), el)

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

@@ -0,0 +1,40 @@
+ObserveJS.bind 'Posts.Filter.Tags', class
+  loaded: =>
+    @on 'tags:index', @show
+    @on 'click', @action
+    @element().appendChild(@retrieve('svg.placeholder'))
+
+  show: (e) =>
+    document.body.appendChild(e.HTML)
+    @on 'click', e.HTML, @select
+
+  select: (e) =>
+    el = e.target
+    while el && !(el instanceof HTMLLIElement)
+      el = el.parentElement
+
+    return unless el?
+
+    span = @retrieve('span.tag')
+    span.textContent = el.textContent
+    @retrieve('svg.placeholder').remove()
+    @element().appendChild(span)
+    @element().appendChild(@retrieve('svg.clear'))
+    @element().setAttribute('tid', el.getAttribute('oid'))
+    @element().classList.add 'tagged'
+    document.querySelector("[as='Overlay']").instance.remove()
+    document.querySelector("[as='Posts.Filter']").instance.search()
+    document.querySelector("[as='Posts.Filter'] input.search").focus()
+
+  action: =>
+    if @element().classList.contains('tagged')
+      @retrieve('svg.clear').remove()
+      @retrieve('span.tag').remove()
+      @element().appendChild(@retrieve('svg.placeholder'))
+      @element().classList.remove('tagged')
+      @element().removeAttribute('tid')
+    else
+      xhr = new ObserveJS.XHR(@element())
+      xhr.send()
+    document.querySelector("[as='Posts.Filter']").instance.search()
+    document.querySelector("[as='Posts.Filter'] input.search").focus()

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

@@ -1,7 +1,11 @@
 ObserveJS.bind 'Post.Tag', class
   loaded: =>
-    @on 'click', @submit
+    @on 'change', @update
+    @on 'tags:toggle', @refresh
 
-  submit: (e) =>
-    @on 'tags:update', @remove
-    ObserveJS.XHR.send(@element())
+  update: (e) =>
+    xhr = new ObserveJS.XHR(@element())
+    xhr.send()
+
+  refresh: (e) =>
+    @element().querySelector('input').checked = e.TagIncluded

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

@@ -14,7 +14,7 @@ ObserveJS.bind 'Post.Title', class
     @input.focus()
 
   dismiss: =>
-    @element().parentElement.remove()
+    @element().parentElement.instance.remove()
 
   update: (e) =>
     if e.Errors

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

@@ -0,0 +1,17 @@
+ObserveJS.bind 'Post.Publish', class
+  loaded: =>
+    @on 'click', @toggle
+    @on 'posts:toggle', @refresh
+
+  toggle: (e) =>
+    @element().setAttribute('published', !@isPublished())
+    ObserveJS.XHR.send(@element())
+
+  isPublished: =>
+    @element().getAttribute('published') == 'true'
+
+  refresh: (e) =>
+    @element().setAttribute('published', e.State)
+
+    if document.body.querySelector('main').classList.contains('titles')
+      window.location.reload()

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

@@ -3,3 +3,18 @@
 //= require_tree ./admin
 //= require_tree ./vendor
 //= require_tree ./shared
+
+// Not loading this with ObserveJS cuz the layout
+// would require to declare a class for it to load.
+var script = document.getElementsByTagName('script');
+
+script = script[script.length - 1];
+
+if (script) {
+  Prism.filename = script.src;
+
+  if (document.addEventListener && !script.hasAttribute('data-manual')) {
+    document.addEventListener('DOMContentLoaded', Prism.highlightAll);
+    document.addEventListener('page:load', Prism.highlightAll);
+  }
+}

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

@@ -1,5 +1,3 @@
-@import 'variables';
-
 * {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -8,6 +6,7 @@
 html, body {
   @include display(flex);
   @include flex(1);
+  -webkit-font-smoothing: antialiased;
 }
 
 html {
@@ -45,6 +44,10 @@ ul, ol {
   }
 }
 
+input {
+  border: none;
+}
+
 fieldset {
   border: none;
   padding: 0;
@@ -53,15 +56,10 @@ fieldset {
 
 input {
   padding: 4px 8px;
-  font-family: Helvetica;
   font-weight: lighter;
   outline: none;
 }
 
-textarea {
-  font-family: Helvetica;
-}
-
 button, input[type=submit] {
   border: 1px solid transparent;
   background: none;
@@ -73,10 +71,16 @@ button, input[type=submit] {
   outline: none;
 }
 
+button, input {
+  border-radius: 2px;
+}
+
 main {
   @include flex(1 100%);
   @include display(flex);
+  @include flex-direction(column);
   position: relative;
+  width: 100%;
   z-index: 1;
 }
 
@@ -95,3 +99,36 @@ main {
   box-shadow: inset 0px 0px 3px 1px rgba(76, 120, 155, 1);
   color: #FEFEFE;
 }
+
+.button {
+  @include transition(text-shadow 0.3s ease-in, border-color 0.3s, background-color 0.3s, box-shadow 0.3s, color 0.3s);
+  border: 1px solid lighten($navy-blue, 5%);
+  border-radius: 2px;
+  text-decoration: none;
+  padding: 4px 8px;
+  margin: 0 0.5em;
+  font-size: 0.8em;
+  text-transform: uppercase;
+  font-weight: bolder;
+  box-shadow: inset 0 1px 0 transparent;
+  text-shadow: 0 1px 0 transparent;
+
+  &.selected {
+    background-color: lighten($navy-blue, 25%);
+    border-color: lighten($navy-blue, 25%);
+    color: lighten($navy-blue, 100%);
+  }
+
+  &:hover:not(.selected) {
+    background-color: lighten($navy-blue, 25%);
+    box-shadow: inset 0 1px 0 lighten($navy-blue, 30%), 0 1px 1px lighten($navy-blue, 15%);
+    color: lighten($navy-blue, 60%);
+    text-shadow: 0 1px lighten($navy-blue, 25%);
+  }
+
+  &:active:not(.selected) {
+    box-shadow: none;
+    color: lighten($navy-blue, 100%);
+    text-shadow: 0 1px lighten($navy-blue, 25%);
+  }
+}

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

@@ -1,9 +1,14 @@
-body.edit.posts > main > header {
+main.edit.posts > header {
   @include display(flex);
   @include flex(0 auto);
+  @include align-items(center);
+  @include justify-content(center);
+  background-color: $bright-blue;
+  color: lighten($bright-blue, 50%);
+  min-height: 200px;
 }
 
-body.edit.posts > main > header > div.title {
+main.edit.posts > header > div.title {
   @include display(flex);
   @include flex-direction(column);
   @include transition(opacity 0.2s linear);
@@ -132,7 +137,7 @@ body.edit.posts > main > header > div.title {
   width: 100%;
   height: 100%;
 
-  background: $red-color;
+  background: $red;
   color: $dark-red-color;
 
   &:not(.hidden) {
@@ -166,7 +171,7 @@ body.edit.posts > main > header > div.title {
   }
 }
 
-body.posts > main [as='Navigation.Toggle'] {
+main.posts [as='Navigation.Toggle'] {
   @include flex(0 auto);
   @include transition(transform 0.2s, color 0.2s);
   width: 2em;

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

@@ -0,0 +1,11 @@
+#Help {
+  @include transition(fill 0.3s);
+  position: fixed;
+  bottom: 2em;
+  right: 2em;
+  width: 32px;
+  fill: $light-blue;
+  &:hover {
+    fill: darken($light-blue, 50%);
+  }
+}

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

@@ -1,4 +1,4 @@
-body.images > main {
+main.images {
   @include flex-direction(column);
 
   section.configure, section.complete {
@@ -53,7 +53,7 @@ body.images > main {
   }
 }
 
-body.images > main {
+main.images {
   section.complete {
     @include flex-direction(column);
 

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

@@ -6,91 +6,87 @@ nav#Menu.admin {
   @include flex-wrap(wrap);
 
   height: 4em;
-  z-index: 50;
-  font-size: 14px;
-  font-family: Helvetica, sans-serif;
-  font-weight: lighter;
+  font-family: $fonts;
+  font-size: 16px;
+  font-weight: bold;
+  padding: 0 0.5em;
 
-  background-color: rgba(212, 228, 237, 1);
-  color: #1A5371;
-  border-bottom: 1px solid rgb(168, 178, 190);
-  box-shadow: 0 2px 3px 0 rgba(43, 69, 82, 0.25);
+  background-color: darken($gray-blue, 25%);
+  color: lighten($gray-blue, 15%);
+  border-bottom: 1px solid darken($gray-blue, 75%);
+  box-shadow: inset 0 -1px 0 0 darken($gray-blue, 15%);
+  text-shadow: 0 -1px darken($light-blue, 75%);
 
-  & > section {
-    @include display(flex);
-    height: 100%;
-  }
-
-  & > section > div {
-    @include display(flex);
-    @include flex(0 auto);
-    @include align-items(center);
-    height: 100%;
-    padding: 0 1em;
-    border-right: 1px solid rgba(43, 82, 71, 0.4);
-  }
-
-  a {
-    color: inherit;
+  .button {
+    @include transition(text-shadow 0.3s ease-in, border-color 0.3s, background-color 0.3s, box-shadow 0.3s, color 0.3s);
+    border: 1px solid lighten($gray-blue, 15%);
+    border-radius: 2px;
     text-decoration: none;
-    font-size: inherit;
-    font-weight: inherit;
-    font-family: inherit;
-  }
+    padding: 4px 8px;
+    margin: 0 0.5em;
+    font-size: 0.8em;
+    text-transform: uppercase;
+    font-weight: bolder;
+    box-shadow: inset 0 1px 0 transparent;
+    text-shadow: 0 1px 0 transparent;
+    color: inherit;
 
-  div.posts {
-    h4 {
-      margin: 0 1em;
-      a:hover {
-        text-decoration: underline;
-      }
+    &.selected {
+      background-color: lighten($navy-blue, 25%);
+      border-color: lighten($navy-blue, 25%);
+      color: lighten($navy-blue, 100%);
     }
 
-    a {
-      @include display(flex);
-      @include flex-wrap(flex);
-      @include flex-direction(column);
-      @include align-items(center);
-      padding: 8px;
-
-      &:hover span.count {
-        text-decoration: underline;
-      }
-
-      &.new.button {
-        margin: 0 1em;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
-      span {
-        @include flex(1);
-        margin: 4px 0;
+    &:hover:not(.selected) {
+      background-color: lighten($navy-blue, 25%);
+      box-shadow: inset 0 1px 0 lighten($navy-blue, 25%), 0 1px 1px darken($navy-blue, 15%);
+      color: lighten($navy-blue, 60%);
+      text-shadow: 0 1px lighten($navy-blue, 25%);
+      border-color: lighten($navy-blue, 25%);
+    }
 
-        &.type {
-          text-transform: uppercase;
-          font-weight: bold;
-          font-size: 0.7em;
-        }
+    &:active:not(.selected) {
+      box-shadow: none;
+      color: lighten($navy-blue, 100%);
+      text-shadow: 0 1px lighten($navy-blue, 25%);
+    }
 
-      }
+    &.home {
+      margin: 0 2em;
     }
   }
 }
 
-nav#Menu.admin .logout {
-  border: none;
-  background: none;
-  margin: 0 8px;
-  padding: 0;
+nav#Menu.admin form.logout {
+  @include transition(color 0.3s,background-color 0.3s, border 0.3s, box-shadow 0.3s);
+  border: 1px solid lighten($red, 5%);
+  border-radius: 2px;
+  color: lighten($red, 5%);
+  margin: 0;
+  padding: 4px 8px;
   cursor: pointer;
   outline: none;
 
-  svg.logout {
+  &:hover {
+    background-color: lighten($red, 5%);
+    color: lighten($red, 30%);
+    box-shadow: inset 0 1px 0 0 lighten($red, 10%), 0 1px 1px darken($red, 20%);
+  }
+
+  &:active {
+    box-shadow: none;
+  }
+
+  input {
+    padding: 0;
     margin: 0;
-    width: 1em;
-    height: 1em;
-    fill: rgb(128, 41, 41);
+    background: none;
+    border: none;
+    font-size:inherit;
+    color: inherit;
+    font-weight: 800;
+    font-family: inherit;
+    outline: none;
   }
+
 }