storytime 1.2.0 → 2.0.0

data/app/assets/javascripts/storytime/application.js

@@ -14,17 +14,25 @@
 //= require jquery
 //= require jquery_ujs
 //= require bootstrap
+//= require leather
 //= require jquery-ui/core
 //= require jquery-ui/datepicker
 //= require jquery-ui/position
 //= require jquery-ui/widget
+//= require jquery-ui/resizable
 //= require jquery.ui.timepicker
 //= require jquery.iframe-transport.js
 //= require jquery.fileupload.js
-//= require codemirror/codemirror
-//= require codemirror/xml
+//= require codemirror
+//= require codemirror/modes/xml
+//= require codemirror/modes/htmlmixed
+//= require codemirror/modes/overlay
+//= require codemirror/addons/fold/xml-fold
+//= require codemirror/addons/edit/closetag
+//= require codemirror/addons/edit/closebrackets
+//= require tidy
 //= require chosen.jquery
-//= require summernote
+//= require medium-editor.min
 //= require_tree .
 
 window.Storytime || (window.Storytime = {})

data/app/assets/javascripts/storytime/base.js.coffee

@@ -1,16 +1,15 @@
-$ ()->
-  controller = $("body").data("controller")
-  action = $("body").data("action")
-
+initJS = (controller, action) ->
   controllerObj = Storytime.Utilities.controllerFromString(controller)
-  
   if controllerObj?
     instance = new controllerObj()
     instance["init"]() if typeof(instance["init"]) == "function"
     instance["init#{action}"]() if typeof(instance["init#{action}"]) == "function"
     Storytime.instance = instance
 
-  $(".flash").delay(2000).fadeOut()
+$ ()->
+  initJS($("body").data("controller"), $("body").data("action"))
+
+  $(".flash").delay(4000).fadeOut() unless window.Storytime.test_env
 
   $(".chosen").chosen()
 
@@ -21,4 +20,43 @@ $ ()->
   ).on('ajax:error', '.btn-delete-resource', (e, data, d1, d2)->
     $(@).attr("disabled", false)
     alert("There was an error deleting your #{$(@).data('resource-type')}")
+  )
+
+  $(".table-row-link").click ->
+    url = $(this).data('url')
+    document.location.href = url
+
+  $(document).on "click", ".storytime-menu-toggle", (e) ->
+    e.preventDefault()
+    $("#storytime-main-menu").toggle()
+    $("#storytime-sites-menu").toggle()
+
+  $(document).on('ajax:success', '.storytime-modal-trigger, #storytime-modal .pagination a', (e, data, status, xhr)->
+    $("#storytime-modal .modal-content").html(data.html)
+    $("#storytime-modal").removeClass("modal-wide")
+    initJS($("#storytime-modal-controller").val(), $("#storytime-modal-action").val())
+    $("#storytime-modal").modal("show")
+  )
+
+  $(document).on('ajax:success', '.storytime-modal-form', (e, data, status, xhr)->
+    unless $(e.target).hasClass("storytime-modal-trigger")
+      if $(this).data("redirect") == "index"
+        $("#storytime-modal").removeClass("modal-wide")
+        $("#storytime-modal .modal-content").html(data.html)
+        if $("#storytime-modal-controller").length && $("#storytime-modal-action").length
+          initJS($("#storytime-modal-controller").val(), $("#storytime-modal-action").val())
+
+      $('body').append("<div class='flash js-flash'><div class='flash-success'>Your changes were saved successfully</div></div>")
+      
+      $('.chosen').chosen
+        width: '100%'
+      
+      $(".js-flash").show().delay(4000).fadeOut '300', ->
+        $(this).remove()
+
+  ).on("ajax:error", ".storytime-modal-form", (e, xhr, status, error)->
+    unless $(e.target).hasClass("storytime-modal-trigger")
+      data = JSON.parse(xhr.responseText)
+      $("#storytime-modal .modal-content").html(data.html)
+      initJS($("#storytime-modal-controller").val(), $("#storytime-modal-action").val())
   )

data/app/assets/javascripts/storytime/blog_posts.js.coffee

@@ -0,0 +1,16 @@
+class Storytime.Dashboard.BlogPosts
+  initNew: ()->
+    @editor = new Storytime.Dashboard.Posts()
+    @editor.initNew()
+
+  initEdit: ()->
+    @editor = new Storytime.Dashboard.Posts()
+    @editor.initEdit()
+
+  initCreate: ()->
+    @editor = new Storytime.Dashboard.Posts()
+    @editor.initCreate()
+
+  initUpdate: ()->
+    @editor = new Storytime.Dashboard.Posts()
+    @editor.initUpdate()

data/app/assets/javascripts/storytime/blogs.js.coffee

@@ -0,0 +1,18 @@
+class Storytime.Dashboard.Blogs
+  initNew: ()->
+    $(document).on('ajax:success', '.new-blog-form', (e, data, status, xhr) ->
+      unless $(e.target).hasClass("storytime-modal-trigger")
+        $("#blogs").html(data.html)
+        $("#storytime-modal").modal("hide")
+    )
+
+  initEdit: ()->
+    $(document).on('ajax:success', '.edit-blog-form', (e, data, status, xhr) ->
+      unless $(e.target).hasClass("storytime-modal-trigger")
+        $("#blogs").html(data.html)
+        $("#storytime-modal").modal("hide")
+    )
+
+  initCreate: ()->
+
+  initUpdate: ()->

data/app/assets/javascripts/storytime/character_counter.js.coffee

@@ -0,0 +1,26 @@
+class Storytime.Dashboard.CharacterCounter
+  init: ()->
+    self = @
+    $(".character-limit").each () ->
+      display = $(this).find(".character-limit-display")
+      limit = display.data("limit")
+      input = $(this).find(".character-limit-input")
+      contenteditable = $(this).find(".character-limit-contenteditable")
+      self.setText(display, limit, input)
+
+      if contenteditable.length > 0
+        self.bind(contenteditable, input, display, limit)
+      else
+        self.bind(input, input, display, limit)
+
+  setText: (display, limit, input) ->
+    display.html limit - input.val().length
+
+  bind: (field, input, display, limit) ->
+    field.keypress((e) ->
+      e.preventDefault() if (e.which is 32 or e.which > 0x20) and (input.val().length > limit - 1)
+      return
+    ).keyup(->
+      display.html limit - input.val().length
+      return
+    )

data/app/assets/javascripts/storytime/contenteditable.js.coffee

@@ -0,0 +1,15 @@
+class Storytime.Dashboard.Contenteditable
+  init: () ->
+    inst = @
+    $(".contenteditable").each ->
+      contenteditable = $(this)
+      inst.bindToInput(contenteditable)
+
+    $(".contenteditable")[0].focus()
+
+  bindToInput: (contenteditable) ->
+    input = $(contenteditable.data("input"))
+
+    contenteditable.keyup ->
+      text = contenteditable.text()
+      input.val(text)

data/app/assets/javascripts/storytime/custom_posts.js.coffee

@@ -0,0 +1,16 @@
+class Storytime.Dashboard.CustomPosts
+  initNew: ()->
+    @editor = new Storytime.Dashboard.Posts()
+    @editor.initNew()
+
+  initEdit: ()->
+    @editor = new Storytime.Dashboard.Posts()
+    @editor.initEdit()
+
+  initCreate: ()->
+    @editor = new Storytime.Dashboard.Posts()
+    @editor.initCreate()
+
+  initUpdate: ()->
+    @editor = new Storytime.Dashboard.Posts()
+    @editor.initUpdate()

data/app/assets/javascripts/storytime/editor.js.coffee

@@ -2,60 +2,38 @@ class Storytime.Dashboard.Editor
   init: () ->
     self = @
 
-    mediaInstance = @initMedia()
-    @initWysiwyg()
-
-    # Title character limit
-    title_character_limit = $("#title_character_limit").data("limit")
-    $("#title_character_limit").html title_character_limit - $("#post_title").val().length
-
-    $("#post_title").keypress((e) ->
-      e.preventDefault() if (e.which is 32 or e.which > 0x20) and ($("#post_title").val().length > title_character_limit - 1)
-      return
-    ).keyup(->
-      $("#title_character_limit").html title_character_limit - $("#post_title").val().length
-      return
-    )
-
-    # Excerpt character limit
-    excerpt_character_limit = $("#excerpt_character_limit").data("limit")
-    $("#excerpt_character_limit").html excerpt_character_limit - $("#post_excerpt").val().length
+    (new Storytime.Dashboard.Contenteditable()).init()
+    (new Storytime.Dashboard.CharacterCounter()).init()
+    @initChosen()
+    (new Storytime.Dashboard.Tags()).init()
 
-    $("#post_excerpt").keypress((e) ->
-      e.preventDefault() if (e.which is 32 or e.which > 0x20) and ($("#post_excerpt").val().length > excerpt_character_limit - 1)
-      return
-    ).keyup(->
-      $("#excerpt_character_limit").html excerpt_character_limit - $("#post_excerpt").val().length
-      return
-    )
-
-    if $(".edit_post").length
-      form = $(".edit_post").last()
+    mediaInstance = @initMedia()
+    (new Storytime.Dashboard.Wysiwyg()).init()
+    
+    form = $(".post-form")
+    
+    $("#medium-editor-post").keyup ->  
+      form.data "unsaved-changes", true
 
+    if $(".edit-post-form").length
       $("#preview_post").click(->
         self.autosavePostForm()
         return
       )
 
+      self.setAutosaveInterval(10000) unless window.Storytime.test_env
+
       if $("#main").data("preview")
         window.open $("#preview_post").attr("href")
     else
-      form = $(".new_post").last()
-
       $("#preview_post").click(->
         form.data "unsaved-changes", false
         
-        $("<input name='preview' type='hidden' value='true'>").insertAfter($(".new_post").children().first())
-        $(".new_post").submit()
+        $("<input name='preview' type='hidden' value='true'>").insertAfter(form.children().first())
+        form.submit()
         return
       )
 
-    # Setup Chosen select field
-    $(".chosen-select").chosen
-      no_results_text: "No results were found... Press 'Enter' to create a new tag named "
-      placeholder_text_multiple: "Select or enter one or more Tags"
-      search_contains: true
-
     # Setup datepicker
     $(".datepicker").datepicker
       dateFormat: "MM d, yy"
@@ -69,20 +47,8 @@ class Storytime.Dashboard.Editor
       mediaInstance.initUpload()
       return
 
-    # Add new tags
-    $("#post_tag_ids").next("div").find(".search-field").children("input").on 'keyup', (e) ->
-      if e.which is 13 and $("#post_tag_ids").next("div").find(".search-field").children("input").val().length > 0
-        searched_tag = $("#post_tag_ids").next("div").find(".search-field").children("input").val()
-        $("#post_tag_ids").append('<option value="nv__' + searched_tag + '">' + searched_tag + '</option>')
-
-        selected_tags = $("#post_tag_ids").val() || []
-        selected_tags.push "nv__#{searched_tag}"
-
-        $("#post_tag_ids").val selected_tags
-        $("#post_tag_ids").trigger 'chosen:updated'
-      return
-
     # Set published field on Publish button click
+    # TODO: This should not rely on javascript. Should make publish button a submit button and look for the button name in the controller to set published = true
     $(".publish").on 'click', () ->
       $("#post_published").val(1)
       form.data "unsaved-changes", false
@@ -98,6 +64,7 @@ class Storytime.Dashboard.Editor
     mediaInstance.initInsert()
     mediaInstance.initFeaturedImageSelector()
     mediaInstance.initSecondaryImageSelector()
+    mediaInstance.initImageSelector()
 
     $(document).on 'shown.bs.modal', ()->
       mediaInstance.initUpload()
@@ -105,108 +72,56 @@ class Storytime.Dashboard.Editor
 
     mediaInstance
 
-  initWysiwyg: () ->
-    self = @
-    
-    # Summernote config and setup
-    $(".summernote").summernote
-      codemirror:
-        htmlMode: true
-        lineNumbers: true
-        lineWrapping: true
-        mode: 'text/html'
-        theme: 'monokai'
-      height: 200
-      minHeight: null
-      maxHeight: null
-      toolbar: [
-        ['style', ['style']]
-        ['font', ['bold', 'italic', 'underline', 'superscript', 'subscript', 'strikethrough', 'clear']]
-        # ['fontname', ['fontname']]
-        # ['fontsize', ['fontsize']]
-        ['color', ['color']]
-        ['para', ['ul', 'ol', 'paragraph']]
-        # ['height', ['height']]
-        ['table', ['table']]
-        ['insert', ['link', 'picture', 'video', 'hr']]
-        ['view', ['fullscreen', 'codeview']]
-        ['editing', ['undo', 'redo']]
-        ['help', ['help']]
-      ]
-      onblur: ->
-        $(".summernote").data("range", document.getSelection().getRangeAt(0))
-        return
-      onfocus: ->
-        self.updateLater(10000) if $(".edit_post").length
-        return
-      onkeyup: ->
-        form = if $(".edit_post").length then $(".edit_post").last() else $(".new_post").last()
-        form.data "unsaved-changes", true
-        return
-      onImageUpload: (files, editor, $editable) ->
-        $("#media_file").fileupload('send', {files: files})
-          .success((result, textStatus, jqXHR) ->
-            editor.insertImage($editable, result.file_url)
-            return
-          )
-        return
-
-    # Show Gallery when using Summernote insertPicture modal
-    $(".note-image-dialog").on 'shown.bs.modal', () ->
-      if $("#media_gallery").length > 0
-        $(".note-image-dialog").find(".row-fluid").append(
-          "<div id='gallery_copy'>
-            <h5>Gallery</h5>
-            <div id='media_gallery'>" + 
-              $("#media_gallery").html() + 
-            "</div>
-          </div>")
-      return
-
-    # Remove Gallery when closing out Summernote insertPicture modal
-    $(".note-image-dialog").on 'hide.bs.modal', () ->
-      $("#gallery_copy").remove()
-      return
-
+  initChosen: () ->
+    $(".chosen-select").chosen
+      no_results_text: "No results were found... Press 'Enter' to create a new tag named "
+      placeholder_text_multiple: "Select or enter one or more Tags"
+      search_contains: true
+      width: '100%'
+      
   autosavePostForm: () ->
     self = @
     post_id = $("#main").data("post-id")
-    dashboard_namespace = $("#main").data("dashboard-namespace")
+    postType = $(".post-form").data("post-type")
+    
+    autosaveUrl = $(".post-form").data("autosave-url")
 
     data = []
-    data.push {name: "post[draft_content]", value: $(".summernote").code()}
+    data.push {name: "#{postType}[draft_content]", value: $(".draft-content-input").val()}
 
-    form = if $(".edit_post").length then $(".edit_post").last() else $(".new_post").last()
+    form = $(".post-form")
     form.data "unsaved-changes", false
  
-    $.ajax(
+    deferred = $.ajax(
       type: "POST"
-      url: "#{dashboard_namespace}/posts/#{post_id}/autosaves"
+      url: autosaveUrl
       data: data
     )
 
-  updateLater: (timer) ->
-    self = @
-    timer = 120000  unless timer?
+    deferred.done ()->
+      time_now = new Date().toLocaleTimeString()
+      $("#draft_last_saved_at").html "Draft saved at #{time_now}"
+      return
 
-    form = if $(".edit_post").length then $(".edit_post").last() else $(".new_post").last()
+    return deferred
 
-    timeoutId = window.setTimeout((->
-      if form.data("unsaved-changes") is true
-        self.autosavePostForm().done(->
-          self.updateLater timer
+  setAutosaveInterval: (timer) ->
+    self = @
+    timer = 120000 unless timer?
 
-          time_now = new Date().toLocaleTimeString()
-          $("#draft_last_saved_at").html "Draft saved at #{time_now}"
-          return
-        ).fail(->
-          console.log "Something went wrong while trying to autosave..."
+    form = $(".post-form")
+    
+    window.setTimeout((->
+      
+      if form.data("unsaved-changes") is true
+        self.autosavePostForm().always(->
+          self.setAutosaveInterval timer
           return
         )
 
         return
       else
-        self.updateLater timer
+        self.setAutosaveInterval timer
         return
     ), timer)
     return
@@ -223,4 +138,5 @@ class Storytime.Dashboard.Editor
     )
 
     $(window).on "beforeunload", ->
-      return "You haven't saved your changes." if form.data "unsaved-changes"
+      if form.data("unsaved-changes") && !window.Storytime.test_env
+        return "You haven't saved your changes." 

data/app/assets/javascripts/storytime/media.js.coffee

@@ -14,13 +14,14 @@ class Storytime.Dashboard.Media
   initUpload: ()->
     unless @uploadInitialized
       $('#media_file').fileupload({
-        dataType: 'json',
         done: (e, data)->
-          $(".media_container").prepend(data.result.html)
+          $("#media_gallery_container").html(data.result)
+          $("#progress").hide()
           return
         
         progressall: (e, data)->
           progress = parseInt(data.loaded / data.total * 100, 10)
+          $("#progress").show()
           $('#progress .progress-bar').css('width', progress + '%')
           return
         
@@ -43,8 +44,7 @@ class Storytime.Dashboard.Media
         else
           $("#featured_media_container").html("<img id='featured_media_image' src='#{$(@).data("thumb-url")}' />")
 
-        featured_media.parent().parent().find(".select_featured_image").hide()
-        featured_media.parent().parent().find(".remove_featured_image").show()
+        featured_media.parent().parent().addClass("has-image")
 
         $("#insertMediaModal").modal("hide")
         return
@@ -57,27 +57,24 @@ class Storytime.Dashboard.Media
         else
           $("#secondary_media_container").html("<img id='secondary_media_image' src='#{$(@).data("thumb-url")}' />")
 
-        secondary_media.parent().parent().find(".select_featured_image").hide()
-        secondary_media.parent().parent().find(".remove_featured_image").show()
+        secondary_media.parent().parent().addClass("has-image")
 
         $("#insertMediaModal").modal("hide")
         return
-      else if self.selectingSecondary
-        $("#secondary_media_id").val $(@).data("media-id")
-        if $("#secondary_media_image").length > 0
-          $("#secondary_media_image").attr("src", $(@).data("thumb-url"))
+      else
+        image_tag = "<img src='#{$(@).data("image-url")}' class='img-responsive' />"
+        if self.elementContainsSelection($("#medium-editor-post")[0])
+          self.pasteHtmlAtCaret(image_tag, false)
         else
-          $("#secondary_media_container").html("<img id='secondary_media_image' src='#{$(@).data("thumb-url")}' />")
-
+          $("#medium-editor-post").append(image_tag)
+          
+        input = $($("#medium-editor-post").data("input"))
+        html = $("#medium-editor-post").html()
+        input.val(html)
+        codemirror = input.siblings(".CodeMirror")[0].CodeMirror
+        codemirror.setValue(html)
         $("#insertMediaModal").modal("hide")
         return
-      else
-        image_tag = "<img src='#{$(@).data("image-url")}' />"
-        node = $(".summernote").data("range").createContextualFragment(image_tag)
-
-        $(".summernote").data("range").insertNode(node)
-        $(".note-image-dialog").modal("hide")
-        return
 
     $(document).on "click", "button.remove_featured_image", (e) ->
       e.preventDefault()
@@ -85,11 +82,17 @@ class Storytime.Dashboard.Media
       $(this).parent().find("input").val ""
       $(this).parent().find(".image_container").html ""
 
-      $(this).parent().find(".select_featured_image").show()
-      $(this).parent().find(".remove_featured_image").hide()
+      $(this).parent().removeClass("has-image")
       return
     return
 
+  initImageSelector: () ->
+    self = @
+    $(document).on "click", ".insert-media-button", (e) ->
+      e.preventDefault()
+      $("#insertMediaModal").modal("show")
+      return
+
   initFeaturedImageSelector: ()->
     self = @
     $(document).on "click", "#featured_media_button", (e)->
@@ -122,4 +125,70 @@ class Storytime.Dashboard.Media
       self.selectingSecondary = false
       return
 
-    return
+    return
+
+  pasteHtmlAtCaret: (html, selectPastedContent) ->
+    self = @
+    sel = undefined
+    range = undefined
+    if window.getSelection
+      # IE9 and non-IE
+      sel = window.getSelection()
+      if sel.getRangeAt and sel.rangeCount
+        range = sel.getRangeAt(0)
+        range.deleteContents()
+        # Range.createContextualFragment() would be useful here but is
+        # only relatively recently standardized and is not supported in
+        # some browsers (IE9, for one)
+        el = document.createElement('div')
+        el.innerHTML = html
+        frag = document.createDocumentFragment()
+        node = undefined
+        lastNode = undefined
+        while node = el.firstChild
+          lastNode = frag.appendChild(node)
+        firstNode = frag.firstChild
+        range.insertNode frag
+        # Preserve the selection
+        if lastNode
+          range = range.cloneRange()
+          range.setStartAfter lastNode
+          if selectPastedContent
+            range.setStartBefore firstNode
+          else
+            range.collapse true
+          sel.removeAllRanges()
+          sel.addRange range
+    else if (sel = document.selection) and sel.type != 'Control'
+      # IE < 9
+      originalRange = sel.createRange()
+      originalRange.collapse true
+      sel.createRange().pasteHTML html
+      if selectPastedContent
+        range = sel.createRange()
+        range.setEndPoint 'StartToStart', originalRange
+        range.select()
+    return
+
+  isOrContains: (node, container) ->
+    while node
+      if node == container
+        return true
+      node = node.parentNode
+    false
+
+  elementContainsSelection: (el) ->
+    self = @
+    sel = undefined
+    if window.getSelection
+      sel = window.getSelection()
+      if sel.rangeCount > 0
+        i = 0
+        while i < sel.rangeCount
+          if !self.isOrContains(sel.getRangeAt(i).commonAncestorContainer, el)
+            return false
+          ++i
+        return true
+    else if (sel = document.selection) and sel.type != 'Control'
+      return self.isOrContains(sel.createRange().parentElement(), el)
+    false

data/app/assets/javascripts/storytime/pages.js.coffee

@@ -0,0 +1,16 @@
+class Storytime.Dashboard.Pages
+  initNew: ()->
+    @editor = new Storytime.Dashboard.Posts()
+    @editor.initNew()
+
+  initEdit: ()->
+    @editor = new Storytime.Dashboard.Posts()
+    @editor.initEdit()
+
+  initCreate: ()->
+    @editor = new Storytime.Dashboard.Posts()
+    @editor.initCreate()
+
+  initUpdate: ()->
+    @editor = new Storytime.Dashboard.Posts()
+    @editor.initUpdate()

data/app/assets/javascripts/storytime/posts.js.coffee

@@ -2,15 +2,42 @@ class Storytime.Dashboard.Posts
   initNew: ()->
     @editor = new Storytime.Dashboard.Editor()
     @editor.init()
+    @initCollapse()
 
   initEdit: ()->
     @editor = new Storytime.Dashboard.Editor()
     @editor.init()
+    @initCollapse()
 
   initCreate: ()->
     @editor = new Storytime.Dashboard.Editor()
     @editor.init()
+    @initCollapse()
 
   initUpdate: ()->
     @editor = new Storytime.Dashboard.Editor()
-    @editor.init()
+    @editor.init()
+    @initCollapse()
+
+  initCollapse: ()->
+    $('body').on 'keydown', (e) ->
+      if e.which == 27
+        $(".post-action-panel.in").collapse("hide")
+
+    $(".post-action-panel").on "show.bs.collapse", ->
+      $(".post-action-panel").removeClass "in"
+      $(".scroll-panel-header").fadeOut
+        duration: 'fast'
+        easing: 'swing'
+      $(".scroll-panel-body").scrollTop(0)
+      $(".scroll-panel-body").animate({top: "0"}, 'fast', 'swing')
+
+    $(".post-action-panel").on "shown.bs.collapse", ->
+      $(".chosen-select").trigger("chosen:updated")
+
+    $(".post-action-panel").on "hide.bs.collapse", ->
+      top = $(".scroll-panel-body").data("top")
+      $(".scroll-panel-header").fadeIn
+        duration: 'fast'
+        easing: 'swing'
+      $(".scroll-panel-body").animate({top: top}, 'fast', 'swing')