storytime 0.0.4 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 811c8b05d7ae90e98f36450e3006b276a0f1f022
-  data.tar.gz: 642f212d82a6873cc296f28bbf2ab1a9a49c32ed
+  metadata.gz: 95d4dc0da897c26174756943f722302586971a23
+  data.tar.gz: dded75a63b5c8751f96d957d837048811c8aefed
 SHA512:
-  metadata.gz: 3bba0b43d8d61144bfa61e1a06246799156f719fc2e543952cf3cdff7d0c8c4666e32f040a904b63b56cf2a73c227847a05c42911e7095f3d3284c9c55b395cd
-  data.tar.gz: 67d2efc14f6767399400dc0fdac9467e65b45ac2dccd810c415d7abcd3338e0be44795b0c75b65e7e37d5d10f42bfe39e072736522ebc913c4ee427bc30b234b
+  metadata.gz: ab1daacb0c41d3180de1edcdf1025797e1ff0e8eead81abf8af3444328a95afa79f70866780902bab2c1dbdfc9dba23bc5522cc90938e5b88963aeee5e32259d
+  data.tar.gz: 81aa65b5c5948e7ccc60819710f901b75b56cabf97586fa1b7a3124a89d9d80125ae98124301eeca901809a718ccbef4d9dfa50cc777a57cb9ada156cee5b69f

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

@@ -11,15 +11,20 @@
 // about supported directives.
 //
 //= require_self
-//= require wysihtml5
 //= require jquery
 //= require jquery_ujs
 //= require bootstrap
-//= require bootstrap-wysihtml5
-//= require jquery.ui.widget
+//= require jquery-ui/core
+//= require jquery-ui/datepicker
+//= require jquery-ui/position
+//= require jquery-ui/widget
+//= require jquery.ui.timepicker
 //= require jquery.iframe-transport.js
 //= require jquery.fileupload.js
+//= require codemirror/codemirror
+//= require codemirror/xml
 //= require chosen.jquery
+//= require summernote
 //= require_tree .
 
 window.Storytime || (window.Storytime = {})

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

@@ -1,30 +1,226 @@
 class Storytime.Dashboard.Editor
-  init: ()->
+  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
+
+    $("#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()
+
+      $("#preview_post").click(->
+        self.autosavePostForm()
+        return
+      )
+
+      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()
+        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"
+
+    # Setup timepicker
+    $(".timepicker").timepicker
+      showPeriod: true
+
+    # On modal show initialize media upload
+    $(document).on 'shown.bs.modal', () ->
+      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
+    $(".publish").on 'click', () ->
+      $("#post_published").val(1)
+      form.data "unsaved-changes", false
+      return
+
+    # Add handler to monitor unsaved changes
+    addUnloadHandler(form)
+    return
+
+  initMedia: ()->
     mediaInstance = new Storytime.Dashboard.Media()
     mediaInstance.initPagination()
     mediaInstance.initInsert()
     mediaInstance.initFeaturedImageSelector()
+    mediaInstance.initSecondaryImageSelector()
 
     $(document).on 'shown.bs.modal', ()->
       mediaInstance.initUpload()
+      return
+
+    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
+
+  autosavePostForm: () ->
+    self = @
+    post_id = $("#main").data("post-id")
+    dashboard_namespace = $("#main").data("dashboard-namespace")
+
+    data = []
+    data.push {name: "post[draft_content]", value: $(".summernote").code()}
+
+    form = if $(".edit_post").length then $(".edit_post").last() else $(".new_post").last()
+    form.data "unsaved-changes", false
+ 
+    $.ajax(
+      type: "POST"
+      url: "#{dashboard_namespace}/posts/#{post_id}/autosaves"
+      data: data
+    )
+
+  updateLater: (timer) ->
+    self = @
+    timer = 120000  unless timer?
+
+    form = if $(".edit_post").length then $(".edit_post").last() else $(".new_post").last()
+
+    timeoutId = window.setTimeout((->
+      if form.data("unsaved-changes") is true
+        self.autosavePostForm().done(->
+          self.updateLater 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..."
+          return
+        )
+
+        return
+      else
+        self.updateLater timer
+        return
+    ), timer)
+    return
+
+  addUnloadHandler = (form) ->
+    form.find("input, textarea").on("keyup", ->
+      form.data "unsaved-changes", true
+      return
+    )
+
+    $(".save").click(->
+      form.data "unsaved-changes", false
+      return
+    )
 
-    $(".wysiwyg").wysihtml5 "deepExtend",
-      parserRules:
-        allowAllClasses: true
-      html: true
-      color: true
-      customTemplates:
-        "html": (locale, options)->
-          size = if (options && options.size) then ' btn-'+options.size else ''
-          return "<li>" +
-              "<div class='btn-group'>" +
-              "<a class='btn" + size + " btn-default' data-wysihtml5-action='change_view' title='" + locale.html.edit + "' tabindex='-1'><i class='glyphicon glyphicon-pencil'></i>&nbsp;&nbsp;Raw HTML Mode</a>" +
-              "</div>" +
-              "</li>"
-        "image": (locale, options)->
-            size = if (options && options.size) then ' btn-'+options.size else ''
-            $modal = $("#insertMediaModal").remove()
-            return "<li>" +
-                $modal[0].outerHTML +
-                "<a class='btn" + size + " btn-default' data-wysihtml5-command='insertImage' title='" + locale.image.insert + "' tabindex='-1'><i class='glyphicon glyphicon-picture'></i></a>" +
-                "</li>";
+    $(window).on "beforeunload", ->
+      return "You haven't saved your changes." if form.data "unsaved-changes"

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

@@ -2,50 +2,124 @@ class Storytime.Dashboard.Media
   initIndex: ()->
     @initUpload()
     @initPagination()
+    return
 
   initPagination: ()->
     $(document).on('ajax:success', '#media_gallery .pagination a', (e, data, status, xhr)->
       $("#media_gallery").html(data)
+      return
     )
+    return
 
   initUpload: ()->
     unless @uploadInitialized
       $('#media_file').fileupload({
         dataType: 'json',
         done: (e, data)->
-          $("#media_gallery").prepend(data.result.html)
+          $(".media_container").prepend(data.result.html)
+          return
         
         progressall: (e, data)->
-          progress = parseInt(data.loaded / data.total * 100, 10);
-          $('#progress .progress-bar').css('width', progress + '%');
+          progress = parseInt(data.loaded / data.total * 100, 10)
+          $('#progress .progress-bar').css('width', progress + '%')
+          return
         
-      }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');
+      }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled')
       @uploadInitialized = true
+      return
+    return
 
   initInsert: ()->
     self = @
     $(document).on "click", ".insert-image-button", (e)->
       e.preventDefault()
+
       if self.selectingFeatured
-        $("#featured_media_id").val $(@).data("media-id")
+        featured_media = $("#featured_media_id")
+        featured_media.val $(@).data("media-id")
+
         if $("#featured_media_image").length > 0
           $("#featured_media_image").attr("src", $(@).data("thumb-url"))
         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()
+
         $("#insertMediaModal").modal("hide")
+        return
+      else if self.selectingSecondary
+        secondary_media = $("#secondary_media_id")
+        secondary_media.val $(@).data("media-id")
+
+        if $("#secondary_media_image").length > 0
+          $("#secondary_media_image").attr("src", $(@).data("thumb-url"))
+        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()
 
-      else
-        wysihtml5Editor = $("textarea.wysiwyg").data("wysihtml5").editor
-        wysihtml5Editor.composer.commands.exec("insertImage", { src: $(@).data("image-url") })
         $("#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
+          $("#secondary_media_container").html("<img id='secondary_media_image' src='#{$(@).data("thumb-url")}' />")
+
+        $("#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()
+      
+      $(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()
+      return
+    return
 
   initFeaturedImageSelector: ()->
     self = @
     $(document).on "click", "#featured_media_button", (e)->
       e.preventDefault()
+
       self.selectingFeatured = true
+      self.selectingSecondary = false
       $("#insertMediaModal").modal("show")
+      return
 
     $(document).on 'hidden.bs.modal', ()->
       self.selectingFeatured = false
+      self.selectingSecondary = false
+      return
+
+    return
+    
+  initSecondaryImageSelector: ()->
+    self = @
+    $(document).on "click", "#secondary_media_button", (e)->
+      e.preventDefault()
+
+      self.selectingFeatured = false
+      self.selectingSecondary = true
+      $("#insertMediaModal").modal("show")
+      return
+
+    $(document).on 'hidden.bs.modal', ()->
+      self.selectingFeatured = false
+      self.selectingSecondary = false
+      return
+
+    return

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

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

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

@@ -0,0 +1,5 @@
+class Storytime.Dashboard.Snippets
+  init: ()->
+    @editor = new Storytime.Dashboard.Editor()
+    @editor.initMedia()
+    @editor.initWysiwyg()

data/app/assets/stylesheets/storytime/admin.css.scss

@@ -38,7 +38,7 @@
   width: 350px;
   color: #333;
   border-right: 1px solid #f1f1f1;
-  ul {
+  ul.dashboard-list {
     margin: 0;
     padding: 0;
     list-style: none;
@@ -98,4 +98,23 @@
   margin-left: 20px;
 }
 
-.actions{ margin-top: 20px; }
+.actions{ margin-top: 20px; }
+
+.draft_saved {
+  color: #777777;
+  font-size: 0.55em;
+  font-style: normal;
+}
+
+textarea { resize:vertical; }
+
+.autosave_available {
+  color: red;
+  margin-bottom: 20px;
+}
+
+.pane {
+  .edit_form {
+    border-top: 1px solid #ccc;
+  }
+}

data/app/assets/stylesheets/storytime/application.css.scss

@@ -1,23 +1,22 @@
-$icon-font-path: "/assets/bootstrap/";
+@import "bootstrap-sprockets";
 @import "bootstrap";
+@import "font-awesome-sprockets";
+@import "font-awesome";
+@import "jquery-ui/core";
+@import "jquery-ui/datepicker";
+@import "jquery-ui/theme";
 
-@font-face {
-  font-family: 'Glyphicons Halflings';
-  src: asset-url('bootstrap/glyphicons-halflings-regular.eot');
-  src: asset-url('bootstrap/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
-       asset-url('bootstrap/glyphicons-halflings-regular.woff') format('woff'),
-       asset-url('bootstrap/glyphicons-halflings-regular.ttf') format('truetype'),
-       asset-url('bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
-}
-
-@import "bootstrap-wysihtml5.css.scss";
 @import "chosen.css.scss";
+@import "codemirror/codemirror";
+@import "codemirror/monokai";
+@import "jquery.ui.timepicker";
+@import "summernote";
 
 @import "storytime/admin.css.scss";
-@import "storytime/devise.css.scss";
-@import "storytime/admin.css.scss";
+@import "storytime/layout.css.scss";
 @import "storytime/media.css.scss";
 @import "storytime/posts.css.scss";
 @import "storytime/sites.css.scss";
 @import "storytime/versions.css.scss";
 @import "storytime/comments.css.scss";
+@import "storytime/pagination.css.scss";

data/app/assets/stylesheets/storytime/layout.css.scss

@@ -0,0 +1,17 @@
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  margin-bottom: 60px;
+}
+
+.footer {
+  border-top: 1px solid #e5e5e5;
+  bottom: 0;
+  position: absolute;
+  height: 60px;
+  padding: 15px 0 0 0; 
+  width: 100%;
+}

data/app/assets/stylesheets/storytime/media.css.scss

@@ -1,16 +1,38 @@
-.media-file{
-  float: left;
-  padding: 15px 19px;
-  width: 112px;
-  border-top: 1px solid #dddddd;
+.thumb_gallery {
+  .media-file{
+    float: left;
+    padding: 15px 19px;
+    // width: 112px;
+    border-top: 1px solid #dddddd;
 
-  .media-thumb{
+    .media-thumb{
+      height: 150px;
+      width: 250px;
+      text-align: center;
+    }
+
+    .action-buttons{
+      text-align: center;
+      margin-top: 20px;
+    }
+  }
+}
+
+.tiny_gallery {
+  .media-file {
+    border-top: 1px solid #dddddd;
+    float: left;
+    padding: 15px 19px;
+    width: 112px;
+  }
+
+  .media-thumb {
     height: 50px;
     width: 72px;
     text-align: center;
   }
 
-  .action-buttons{
+  .action-buttons {
     text-align: center;
     margin-top: 20px;
   }
@@ -22,6 +44,25 @@
 }
 
 #featured_media_image{
-  margin-top: 10px;
+  // margin-top: 5px;
+  // margin-bottom: 10px;
+}
+
+.featured_image_block {
+  background-color: rgba(91,192,222, 0.2);
+  border: 1px solid #C2C2C2;
+  height: 152px;
   margin-bottom: 10px;
+  text-align: center;
+  width: 252px;
+
+  span.select_featured_image {
+    display: inherit;
+    font-size: 45px;
+    padding: 25px 0 20px 0;
+  }
+
+  .remove_featured_image {
+    margin-top: 10px;
+  }
 }

data/app/assets/stylesheets/storytime/pagination.css.scss

@@ -0,0 +1,4 @@
+.pagination-wrapper{
+  width: 253px;
+  margin: 0px auto;
+}

data/app/assets/stylesheets/storytime/posts.css.scss

@@ -22,4 +22,8 @@
   a, a:hover {
     color: #fff;
   }
+}
+
+.post_field {
+  margin: 15px 0px;
 }

data/app/controllers/storytime/dashboard/autosaves_controller.rb

@@ -0,0 +1,33 @@
+require_dependency "storytime/application_controller"
+
+module Storytime
+  module Dashboard
+    class AutosavesController < DashboardController
+      before_action :set_post, only: [:create]
+
+      skip_after_action :verify_authorized, only: [:create]
+
+      respond_to :json
+
+      def create
+        if @post.autosave.nil? || (@post.autosave.content != params[:post][:draft_content])
+          @post.create_autosave(autosave_params)
+        end
+
+        head :ok
+      end
+
+      private
+
+        def set_post
+          @post = Storytime::Post.friendly.find(params[:post_id])
+        end
+
+        def autosave_params
+          post = @post || current_post_type.new(user: current_user)
+          permitted_attrs = policy(post).permitted_attributes
+          params.require(:post).permit(*permitted_attrs)
+        end
+    end
+  end
+end

data/app/controllers/storytime/dashboard/media_controller.rb

@@ -6,8 +6,13 @@ module Storytime
       respond_to :json, only: [:create, :destroy]
 
       def index
-        @media = Media.order("created_at DESC").page(params[:page]).per(10)
+        redirect_to url_for([:dashboard, Storytime::Post]) unless Storytime.enable_file_upload
+
+        @media = Media.order("created_at DESC").page(params[:page]).per(9)
         authorize @media
+
+        @large_gallery = false if params[:large_gallery] == "false"
+
         render partial: "gallery", content_type: Mime::HTML if request.xhr?
       end