type_station 0.1.3 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: e507c0e25eee2de86875f7172277436418e1a4d2
-  data.tar.gz: 1903bb9f88c274a6170e11da85b6a63df96a3a70
+  metadata.gz: 076e91ac2110c51de4325569a5a2a9ecfbe59494
+  data.tar.gz: cb40f492adb569c06ee9785810b85f067f47ac03
 SHA512:
-  metadata.gz: 8f713d3ced71678522a84a7c8a8ea9029aa6bc582bad598739b67bbfb183a2815d4acf3d9084114cc5f7b738b069d0baddf7f27237db9aae063b83b9c9c7677f
-  data.tar.gz: 246292b7fc6246cc8f2d898414a191be736c46865a936841eff17c7e1b1a5ebe22b1de13f40226f7ec8dca46eb6fc35153e9e2901978095100ea6fec1324519e
+  metadata.gz: b7ed796836740e198b9e53ac34de3bea4279ab8fc2d309e0b09b4257ca1ac79a41ab98613b5b39f1fe5fe313736c9f401921f8d678d830c48bd8779f6e75fa3d
+  data.tar.gz: 1a0c04d30ee7e3f18cdbe3628d2507235b8e0ae735b59dbc601c322c6c2320a62869e8a4757b810e36b4a0a2e64364b157f830c15d86d9bc52645afdc4334b22

data/app/assets/javascripts/type_station/editables/admin_bar.js.coffee

@@ -1,73 +1,44 @@
-class window.TS.AdminBar
-  constructor: (@element) ->
-    template = @element.html()
+class @TypeStation.AdminBarEditor
+  constructor: (@ts, @$el, @data) ->
+    template = @$el.html()
     $('body').append(template)
     vex.defaultOptions.className = 'vex-theme-os'
 
-    $('#ts-admin-bar-edit').on 'click', ->
-      window.TS.enable()
+    $('#ts-admin-bar-edit').on 'click', =>
+      @ts.enable()
       false
 
-    $('#ts-admin-bar-cancel').on 'click', ->
-      window.TS.disable()
-      if window.TS.isChanged()
+    $('#ts-admin-bar-cancel').on 'click', =>
+      @ts.disable()
+      if @ts.isChanged()
         vex.dialog.confirm
           message: 'You have unsaved changes, Do you want to discard them?'
           callback: (value) ->
             if value
               window.location.reload()
       false
-    
-    $('#ts-admin-bar-save').on 'click', ->
+
+    $('#ts-admin-bar-save').on 'click', =>
       vex.dialog.confirm
         message: 'Are you sure you want to save changes?'
-        callback: (value) ->
+        callback: (value) =>
           if value
-            window.TS.save()
+            @ts.save()
       false
 
-    $('#ts-admin-bar input').on 'change', ->
-      model = window.TS.getModel $(@).data('ts-url')
-      model.set($(@).data('ts-key'), { field: $(@).data('ts-key'), value: $(@).val(), type: 'text' })
-
-    # $('.ts-brand').on 'click', ->
-    #   $("#ts-admin-bar").toggleClass 'insert-open'
 
-    drop = new Drop
-      target: $('#ts-admin-bar .ts-options i')[0]
-      content: $('#ts-admin-bar-options')[0]
-      position: 'bottom center'
-      openOn: 'click'
-      classes: 'drop-theme-arrows-bounce-dark'
+    $titleEditor = $('#ts-admin-bar-title')
+    editor = new TypeStation.TextHtmlEditor(@ts, $titleEditor, $titleEditor.data('ts'))
+    @ts.editors.set $titleEditor.attr('id'), editor
 
-    drop.on 'open', ->
-      $('#ts-page-settings').off 'click'
-      $('#ts-page-settings').on 'click', ->
-        vex.dialog.buttons.YES.text = 'Save'
-        vex.dialog.open 
-          message: 'Manage page settings'
-          input: """
-            #{$('#ts-admin-bar-settings').html()}
-          """
-          callback: (data) ->
-            if data
-              model = window.TS.getModel $('#ts-admin-bar-settings').data('ts-url')
-              vex.dialog.confirm
-                message: 'Are you sure you want to save changes?'
-                callback: (value) ->
-                  if value
-                    for k,v of data
-                      model.set(k, { field: k, value: v, type: 'text' })
-                    window.TS.save()
-                    model.save ->
-                      window.location.reload()
+    $editEditor = $('#ts-admin-bar-settings')
+    editor = new TypeStation.EntityEditor(@ts, $editEditor, $editEditor.data('ts'))
+    @ts.editors.set $editEditor.attr('id'), editor
 
   enable: ->
-    $('body').addClass('ts-edit-mode');
     $('#ts-admin-bar').removeClass('ts-hidden')
     $('#ts-admin-bar-edit').addClass('ts-hidden')
 
   disable: ->
-    $('body').removeClass('ts-edit-mode');
     $('#ts-admin-bar').addClass('ts-hidden').removeClass 'insert-open'
-    $('#ts-admin-bar-edit').removeClass('ts-hidden')
+    $('#ts-admin-bar-edit').removeClass('ts-hidden')

data/app/assets/javascripts/type_station/editables/entity_editor.js.coffee

@@ -0,0 +1,152 @@
+moveEntityCall = (url, direction) ->
+  $.ajax
+    type: "PATCH"
+    url: url
+    dataType: 'json'
+    contentType: 'application/json'
+    data: JSON.stringify({direction: direction})
+    success: (data, status) -> window.location.reload()
+
+deleteEntityCall = (url) ->
+  $.ajax
+    type: "DELETE"
+    url: url
+    dataType: 'json'
+    contentType: 'application/json'
+    data: {}
+    success: (data, status) -> window.location.reload()
+
+createEntityCall = (url, data) ->
+  $.ajax
+    type: "POST"
+    url: url
+    dataType: 'json'
+    contentType: 'application/json'
+    data: JSON.stringify(data)
+    success: (data, status) ->
+      window.location.reload()
+
+
+buildFields = (editor) ->
+  fields = editor.data.fields
+  inputs = ''
+
+  defaultValues = {}
+  for field in fields
+    if field.default
+      defaultValues[field.name] = field.default
+
+  modelValues = if editor.data.action == 'edit' then editor.data.values else defaultValues
+
+  for field in fields
+    if field.label
+      label = "<label for='#{field.name}'>#{if field.required then '*' else ''}#{field.label}</label>"
+      input = switch field.type
+        when "text" then "<input type='text' name='#{field.name}' id='#{field.name}' value='#{if modelValues[field.name] then modelValues[field.name] else ''}' />"
+        when "textarea" then "<textarea name='#{field.name}' id='#{field.name}' rows='5'>#{if modelValues[field.name] then modelValues[field.name] else ''}</textarea>"
+        when "select"
+          select = "<select name='#{field.name}' id='#{field.name}'>"
+          for o in field.options
+            select += "<option value='#{o[1]}' #{if modelValues[field.name] == o[1] then 'selected'}>#{o[0]}</option>"
+          select += "</select>"
+          select
+        when "multiple_select"
+          select = "<select name='#{field.name}' id='#{field.name}' class='multiple_select' multiple>"
+          for o in field.options
+            select += "<option value='#{o[1]}' #{if modelValues[field.name] && modelValues[field.name].indexOf(o[1]) > -1 then 'selected' else ''}>#{o[0]}</option>"
+          select += "</select>"
+          select
+      inputs += "<div class'vex-custom-field-wrapper'>#{label}<div class='vex-custom-input-wrapper'>#{input}</div></div>"
+    else
+      inputs += "<input type='hidden' name='#{field.name}' id='#{field.name}' value='#{if modelValues[field.name] then modelValues[field.name] else ''}' />"
+  inputs
+
+handleDeleteEntity = (editor) ->
+  vex.dialog.confirm
+    message: 'Are you sure you want to delete this?'
+    callback: (value) ->
+      if value
+        deleteEntityCall(editor.data.url)
+
+
+handleMoveEntity = (editor) ->
+  moveEntityCall(editor.data.url, editor.data.options.direction)
+
+handleCreateEditEntity = (editor) ->
+  self = editor
+  vex.dialog.buttons.YES.text = if self.data.action == 'edit' then 'Save' else 'Create'
+
+  vex_message_type = if self.data.type == 'TypeStation::Page' then 'Page' else self.data.type
+  vex_message = "#{if self.data.action == 'edit' then 'Edit' else 'Create'} #{vex_message_type || 'Page'}"
+
+  vex.dialog.open
+    message: vex_message
+    input: buildFields(self)
+    afterOpen: ($vexContent) ->
+      $("select.multiple_select", $vexContent).chosen()
+    callback: (data) ->
+      if data
+        if self.data.action == 'edit'
+          model = self.ts.getModel self.data.url
+          vex.dialog.confirm
+            message: 'Are you sure you want to save changes?'
+            callback: (value) ->
+              if value
+                self.ts.save()
+                for k,v of data
+                  model.set(k, { field: k, value: v, type: self.fields[k].type })
+                model.save ->
+                  window.location.reload()
+        else
+          json = {}
+          contents = []
+          valid = true
+          for k,v of data
+            field = self.fields[k]
+            if valid
+              valid = if field.required then (v.length > 0) else true
+            else
+              break
+            contents.push({ field: k, value: v, type: field.type })
+          json['contents'] = contents
+          json['parent_id'] = self.data.parent_id if self.data.parent_id
+          json['_type'] = self.data.type if self.data.type
+
+          if valid
+            if self.ts.isChanged()
+              vex.dialog.buttons.YES.text = 'Save'
+              vex.dialog.confirm
+                message: 'You have unsaved changes, Do you want to save them before creating this?'
+                callback: (value) ->
+                  if value
+                    self.ts.save()
+                    createEntityCall(self.data.create_url, json)
+            else
+              createEntityCall(self.data.create_url, json)
+          else
+            vex.dialog.buttons.YES.text = 'Ok'
+            vex.dialog.alert
+              message: 'Please fill in all required fields'
+              callback: ->
+                self.$el.click()
+
+
+
+class @TypeStation.EntityEditor
+  constructor: (@ts, @$el, @data) ->
+    vex.defaultOptions.className = 'vex-theme-os'
+    @fields = {}
+    for field in @data.fields
+      @fields[field.name] = field
+
+  enable: ->
+    @disable()
+    self = @
+    @$el.on 'click', ->
+      switch self.data.action
+        when 'edit', 'create' then handleCreateEditEntity(self)
+        when 'move' then handleMoveEntity(self)
+        when 'delete' then handleDeleteEntity(self)
+
+  disable: ->
+    @$el.off 'click'

data/app/assets/javascripts/type_station/editables/file_editor.js.coffee

@@ -0,0 +1,46 @@
+buildUploader = (editor) ->
+  $input = $('<input/>')
+  $label = $('<label/>')
+
+  $labelIcon = $('<i/>').addClass "ts-file-style-icon #{if editor.data.type == 'image' then 'ion-image' else 'ion-android-attach'}"
+  # $labelText = $('<span/>').addClass('ts-file-style-text').text('Upload image')
+
+  $label
+    .addClass 'ts-file-editor'
+    .addClass('ts-editable-button')
+    .addClass('ts-button')
+
+  $input
+    .attr({type: "file", name: "file", class: 'ts-editable-file-input', style: 'display: none', 'data-form-data': JSON.stringify(editor.data.options.cloudinary), 'data-element-id': editor.$el.attr('id')})
+    .cloudinary_fileupload()
+    .bind 'cloudinaryprogress', (e, data) ->
+      $('.ts-progress-bar').css('width', Math.round((data.loaded * 100.0) / data.total) + '%')
+    .bind 'cloudinarystart', (e, data) ->
+      $(this).prop('disabled', true)
+      $('body').append($('<div>').addClass('ts-progress-bar'))
+    .bind 'cloudinarydone', (e, data) ->
+      $element = $("##{$(this).data('elementId')}")
+      for imageTag in $('.ts-editable-image-tag', $element)
+        $(imageTag).attr('src', $.cloudinary.url(data.result.public_id, $.extend({}, {format: data.result.format}, $(imageTag).data())))
+      for linkTag in $('.ts-editable-link-tag', $element)
+        $(linkTag).attr('href', $.cloudinary.url(data.result.public_id, {resource_type: 'raw', format: data.result.format}))
+      $(this).prop('disabled', false)
+      $('.ts-progress-bar').remove()
+
+      model = editor.ts.getModel editor.data.url
+      model.set(editor.data.field, { field: editor.data.field, value: {identifier: data.result.public_id, format: data.result.format}, type: editor.data.type })
+
+  $label
+    # .append $labelText
+    .append $labelIcon
+    .append $input
+
+
+class @TypeStation.FileEditor
+  constructor: (@ts, @$el, @data) ->
+    @$el.addClass('ts-block')
+  enable: ->
+    @$el.append(buildUploader(@))
+
+  disable: ->
+    @$el.find('.ts-file-editor').remove()

data/app/assets/javascripts/type_station/editables/link_finder.js.coffee

@@ -1,26 +1,26 @@
-class window.TS.LinkFinder
-  constructor: (@elements) ->
-
-  enable: ->
-    setTimeout(->
-      $('.ts-link-finder, .medium-editor-toolbar-input').textcomplete [
-        {
-          match: /^\/(\w*)$/
-          index: 1
-          search: (term, callback) ->
-            $.ajax
-              method: 'GET'
-              url: window.TS.ADMIN_PAGES_URL
-              dataType: 'json'
-              contentType: 'application/json'
-              data: {path: term}
-              success: (data, status) -> 
-                callback(data.pages)
-          replace: (page) -> page.path#.substring(1)
-          template: (page) -> "#{page.title} (#{page.path})"
-        }
-      ], 
-        zIndex: 10000
-    , 500)
-    
-  disable: ->
+# class window.TS.LinkFinder
+#   constructor: (@elements) ->
+#
+#   enable: ->
+#     setTimeout(->
+#       $('.ts-link-finder, .medium-editor-toolbar-input').textcomplete [
+#         {
+#           match: /^\/(\w*)$/
+#           index: 1
+#           search: (term, callback) ->
+#             $.ajax
+#               method: 'GET'
+#               url: window.TS.ADMIN_PAGES_URL
+#               dataType: 'json'
+#               contentType: 'application/json'
+#               data: {path: term}
+#               success: (data, status) ->
+#                 callback(data.pages)
+#           replace: (page) -> page.path#.substring(1)
+#           template: (page) -> "#{page.title} (#{page.path})"
+#         }
+#       ],
+#         zIndex: 10000
+#     , 500)
+#
+#   disable: ->

data/app/assets/javascripts/type_station/editables/text_html_editor.js.coffee

@@ -0,0 +1,63 @@
+hasFontAwesome = false
+updateGlobalValue = ($el, value) ->
+  match = "[data-ts-field=#{$el.data('ts-field')}][data-ts-id=#{$el.data('ts-id')}]"
+  $("input#{match}").not($el).val(value)
+  $("#{match}").not(':input').not($el).html(value)
+
+haveFontAwesome = ->
+  unless hasFontAwesome
+    for k, stylesheet of document.styleSheets
+      if stylesheet?.href?.match(/font-awesome/g)
+        hasFontAwesome = true
+        break
+  hasFontAwesome
+
+isIE = -> !!(navigator.userAgent.indexOf('MSIE') != -1 || navigator.appVersion.indexOf('Trident/') > 0)
+
+
+class @TypeStation.TextHtmlEditor
+  constructor: (@ts, @$el, @data) ->
+
+    if @data.type == 'text'
+      @$el.addClass('ts-block-text')
+
+      editorOptions =
+        disableReturn: true
+        # buttons: ['bold', 'italic', 'underline', 'anchor']
+        disableToolbar: true
+        anchorInputPlaceholder: 'Type a link'
+        imageDragging: false
+        # anchorInputCheckboxLabel: true
+        # checkLinkFormat: true
+    else
+      @$el.addClass('ts-block')
+
+      editorOptions =
+        #buttons: ['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'unorderedlist', 'orderedlist', 'justifyLeft', 'justifyFull', 'justifyCenter', 'justifyRight']
+        buttons: ['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'unorderedlist', 'orderedlist']
+        buttonLabels: (if haveFontAwesome() then 'fontawesome' else null)
+        anchorInputPlaceholder: 'Type a link'
+        imageDragging: false
+        # anchorInputCheckboxLabel: true
+        # checkLinkFormat: true
+
+    @editor = new MediumEditor @$el, editorOptions
+    @editor.deactivate()
+    @$el.attr('data-ts-id', @data.id).attr('data-ts-field', @data.field)
+
+  enable: ->
+    @editor.activate()
+    self = @
+    eventName = if isIE() then 'keyup' else 'input'
+    @$el.on eventName, ->
+      model = self.ts.getModel self.data.url
+      if $(@).is(':input')
+        model.set(self.data.field, { field: self.data.field, value: $(@).val(), type: self.data.type })
+        updateGlobalValue($(@), $(@).val())
+      else
+        model.set(self.data.field, { field: self.data.field, value: $(@).html(), type: self.data.type })
+        updateGlobalValue($(@), $(@).html())
+
+  disable: ->
+    @editor.deactivate()
+    @$el.off 'input'

data/app/assets/javascripts/type_station/init.js.coffee

@@ -1,6 +1,4 @@
-window.TS.models = new window.TS.Store
-window.TS.editors = new window.TS.Store
-
+window.TS = {} unless window.TS
 window.TS.onSave = -> null unless window.TS['onSave']
 window.TS.onSaved = -> null unless window.TS['onSaved']
 
@@ -10,51 +8,11 @@ window.TS.onEnabled = -> null unless window.TS['onEnabled']
 window.TS.onDisable = -> null unless window.TS['onDisable']
 window.TS.onDisabled = -> null unless window.TS['onDisabled']
 
-window.TS.getModel = (url) ->
-  model = @models.get url
-  unless model
-    model = new window.TS.Model url
-    @models.set url, model
-  model
-
-window.TS.enable = ->
-  window.location.hash = '#!ts-edit-enable'
-  @onEnable()
-  @editors.each (id, editor) -> editor.enable()
-  @onEnabled()
-  $(window).on 'beforeunload', =>
-    if @isChanged()
-      return 'You have unsaved changes. Are you sure you want to leave?'
-    else
-      return
-
-window.TS.disable = ->
-  window.location.hash = '#!ts-edit-disable'
-  @onDisable()
-  @editors.each (id, editor) -> editor.disable()
-  @onDisabled()
-  $(window).off 'beforeunload'
-
-window.TS.save = ->
-  @onSave()
-  @models.each (id, model) -> model.save()
-  @onSaved()
-
-window.TS.isChanged = ->
-  dirtyArray = []
-  @models.each (id, model) -> dirtyArray.push model.isChanged()
-  $.grep(dirtyArray, (a) ->  a == true ).length > 0
-
 window.TS.init = ->
-  @editors.set 'ts-admin-bar', new window.TS.AdminBar $('#ts-admin-bar-template')
-  @editors.set 'ts-editable-text', new window.TS.EditableText $('span.ts-editable-text')
-  @editors.set 'ts-editable-html', new window.TS.EditableHtml $('.ts-editable-html')
-  @editors.set 'ts-editable-image', new window.TS.EditableImage $('.ts-editable-image')
-  @editors.set 'ts-editable-file', new window.TS.EditableFile $('.ts-editable-file')
-  @editors.set 'ts-new-page', new window.TS.NewPage $('.ts-new-page')
-  @editors.set 'ts-edit-link', new window.TS.EditLink $('.ts-edit-link')
-  @editors.set 'ts-link-finder', new window.TS.LinkFinder null
-  @editors.set 'ts-edit-page', new window.TS.EditPage $('.ts-edit-page')
-
-  if window.location.hash.replace(/^#!/, '') == 'ts-edit-enable'
-    window.TS.enable()
+  window.typeStation = new TypeStation $('[data-ts]'),
+    onSave: window.TS.onSave
+    onSaved: window.TS.onSaved
+    onEnable: window.TS.onEnable
+    onEnabled: window.TS.onEnabled
+    onDisable: window.TS.onDisable
+    onDisabled: window.TS.onDisabled

data/app/assets/javascripts/type_station/lib/models.js.coffee

@@ -1,14 +1,14 @@
-class window.TS.Store
+class @TypeStation.Store
   constructor: (@id = null) ->
     @STORE = {}
   get: (key) -> @STORE[key]
   set: (key, value) -> @STORE[key] = value
 
-  each: (callback) -> 
+  each: (callback) ->
     for key, value of @STORE
       callback?(key, value)
 
-class window.TS.Model extends window.TS.Store
+class @TypeStation.Model extends @TypeStation.Store
 
   constructor: (@id = null) ->
     super
@@ -38,6 +38,6 @@ class window.TS.Model extends window.TS.Store
       dataType: 'json'
       contentType: 'application/json'
       data: JSON.stringify({contents: data})
-      success: (data) -> 
+      success: (data) ->
         self._reset() #reset model to a clean state
-        callback(data)
+        callback(data)

data/app/assets/javascripts/type_station/lib/ts.js.coffee

@@ -1 +1,84 @@
-window.TS = {}
+setCookie = (cname, cvalue, exdays) ->
+  d = new Date
+  d.setTime d.getTime() + exdays * 24 * 60 * 60 * 1000
+  expires = 'expires=' + d.toUTCString()
+  document.cookie = cname + '=' + cvalue + '; ' + expires + '; path=/'
+  return
+
+getCookie = (cname) ->
+  name = cname + '='
+  ca = document.cookie.split(';')
+  i = 0
+  while i < ca.length
+    c = ca[i]
+    while c.charAt(0) == ' '
+      c = c.substring(1)
+    if c.indexOf(name) == 0
+      return c.substring(name.length, c.length)
+    i++
+  ''
+
+buildEditor = (ts, $el, data) ->
+  if data.action
+    switch data.action
+      when 'create', 'edit', 'delete', 'move'
+        new TypeStation.EntityEditor(ts, $el, data)
+  else
+    switch data.type
+      when 'text', 'html' then new TypeStation.TextHtmlEditor(ts, $el, data)
+      when 'image', 'file' then new TypeStation.FileEditor(ts, $el, data)
+
+class @TypeStation
+  constructor: (@elements, @callbacks = {}) ->
+    @models = new TypeStation.Store
+    @editors = new TypeStation.Store
+
+    if $adminBar = $('#ts-admin-bar-template')
+      @editors.set 'ts-admin-bar', new TypeStation.AdminBarEditor(@, $adminBar, {})
+
+    self = @
+    @elements.each ->
+      $el = $(@)
+      data = $el.data('ts')
+      self.editors.set $el.attr('id'), buildEditor(self, $el, data)
+
+    @enable() if getCookie("ts-enabled") == '1'
+
+  enable: ->
+    setCookie('ts-enabled', 1, 1)
+    $('body').addClass('ts-enable')
+
+    @callbacks['onEnable']() if @callbacks['onEnable']
+    @editors.each (id, editor) -> editor?.enable?()
+    @callbacks['onEnabled']() if @callbacks['onEnabled']
+    $(window).on 'beforeunload', =>
+      if @isChanged()
+        return 'You have unsaved changes. Are you sure you want to leave?'
+      else
+        return
+
+  disable: ->
+    setCookie('ts-enabled', 0, 1)
+    $('body').removeClass('ts-enable')
+
+    @callbacks['onDisable']() if @callbacks['onDisable']
+    @editors.each (id, editor) -> editor?.disable?()
+    @callbacks['onDisabled']() if @callbacks['onDisabled']
+    $(window).off 'beforeunload'
+
+  getModel: (url) ->
+    model = @models.get url
+    unless model
+      model = new TypeStation.Model url
+      @models.set url, model
+    model
+
+  isChanged: ->
+    dirtyArray = []
+    @models.each (id, model) -> dirtyArray.push model.isChanged()
+    $.grep(dirtyArray, (a) ->  a == true ).length > 0
+
+  save: ->
+    @callbacks['onSave']() if @callbacks['onSave']
+    @models.each (id, model) -> model.save()
+    @callbacks['onSaved']() if @callbacks['onSaved']