storytime 1.2.0 → 2.0.0

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

@@ -1,16 +1 @@
-class Storytime.Dashboard.Sites
-  initNew: ()->
-    @initForm()
-
-  initEdit: ()->
-    @initForm()
-
-  initUpdate: ()->
-    @initForm()
-
-  initForm: ()->
-    $("#site_root_page_content").change ()->
-      if @value == "page"
-        $(".site_root_post_id").removeClass("hide")
-      else
-        $(".site_root_post_id").addClass("hide")
+class Storytime.Dashboard.Sites

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

@@ -1,5 +1,8 @@
 class Storytime.Dashboard.Snippets
   init: ()->
-    @editor = new Storytime.Dashboard.Editor()
-    @editor.initMedia()
-    @editor.initWysiwyg()
+    (new Storytime.Dashboard.Wysiwyg()).init()
+
+    $(document).on('ajax:success', '.edit-snippet-form', (e, data, status, xhr) ->
+      unless $(e.target).hasClass("storytime-modal-trigger")
+        $(".storytime-snippet-#{data.id} .snippet-content").html(data.content)
+    )

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

@@ -0,0 +1,17 @@
+class Storytime.Dashboard.Tags
+  init: () ->
+    # Add new tags
+    $(".tags-input").each ->
+      tagsInput = $(this)
+      searchInput = tagsInput.next("div").find(".search-field").children("input")
+      searchInput.on 'keyup', (e) ->
+        if e.which is 13 and searchInput.val().length > 0
+          searched_tag = searchInput.val()
+          tagsInput.append('<option value="nv__' + searched_tag + '">' + searched_tag + '</option>')
+
+          selected_tags = tagsInput.val() || []
+          selected_tags.push "nv__#{searched_tag}"
+
+          tagsInput.val selected_tags
+          tagsInput.trigger 'chosen:updated'
+        return

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

@@ -0,0 +1,10 @@
+class Storytime.Dashboard.Users
+  initIndex: () ->
+    $(".chosen").chosen
+      width: '100%'
+
+    $(document).on "ajax:success", ".new_membership", (e, data, status, xhr) ->
+      console.log data.html
+      $("#storytime-modal .modal-content").html(data.html)
+      $(".chosen").chosen
+        width: '100%'

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

@@ -0,0 +1,183 @@
+class Storytime.Dashboard.Wysiwyg
+  mediumEditorOptions = 
+    buttons: ['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'quote', 'unorderedlist', 'orderedlist', 'pre']
+    toolbarAlign: 'center'
+    buttonLabels: 'fontawesome'
+
+  codeMirrorOptions = 
+    mode: 'htmlmixed'
+    theme: 'solarized dark'
+    tabSize: 2
+    autoCloseTags: true
+    lineNumbers: true
+
+  tidyOptions = 
+    "indent": "auto",
+    "indent-spaces": 2,
+    "wrap": 80,
+    "markup": true,
+    "output-xml": false,
+    "numeric-entities": true,
+    "quote-marks": true,
+    "quote-nbsp": false,
+    "show-body-only": true,
+    "quote-ampersand": false,
+    "break-before-br": true,
+    "uppercase-tags": false,
+    "uppercase-attributes": false,
+    "drop-font-tags": true,
+    "tidy-mark": false
+
+  init: () ->
+    self = @
+    self.bindTogglesToPanels()
+    mediumEditor = self.setupMedium()
+
+    $(".wysiwyg").each () ->
+      unless $(this).find(".CodeMirror").length > 0
+        codeMirror = CodeMirror.fromTextArea $(this).find(".codemirror")[0], codeMirrorOptions
+
+      self.bindCodeMirror $(this), codeMirror
+      self.bindMedium $(this), codeMirror
+      self.bindCodeToggle $(this), codeMirror, mediumEditor
+      self.bindActionPanel $(this), mediumEditor
+
+    $("[data-toggle='codemirror']").click ->
+      self.closeImageControls()
+      mediumEditor.activate()
+
+    $("body").click (e) ->
+      target = $(e.target)
+      if !target.is(".medium-editor img") && !target.hasClass("medium-image-controls") && !(target.closest(".medium-image-controls").length > 0) && $('.medium-image-controls').is(":visible")
+        self.closeImageControls()
+        mediumEditor.activate()
+
+    $("body").on 'click', '.medium-editor img', (e) ->
+      active = $(this).hasClass("medium-active-image")
+      unless active
+        $(".medium-editor img").removeClass("medium-active-image")
+        $(this).addClass "medium-active-image"
+        $("#medium-image-width").val($(this)[0].style.width)
+        $("#medium-image-height").val($(this)[0].style.height)
+        $("#medium-image-button").hide()
+        $(".medium-image-controls").show()
+        mediumEditor.deactivate()
+
+    $('body').on "keyup", "#medium-image-width", () ->
+      if $(this).val() == "" || $(this).val() == "auto"
+        $(".medium-active-image").css("width", "")
+        $("#medium-image-height").val("")
+        $("#medium-image-width").val("")
+      else
+        $(".medium-active-image").css("width", $(this).val())
+        $(".medium-active-image").css("height", "")
+        $("#medium-image-height").val($(".medium-active-image").css("height"))
+
+    $('body').on "keyup", "#medium-image-height", () ->
+      # set the height, then find the new width and set that and remove the height so image remains responsive
+      $(".medium-active-image").css("width", "")
+      $(".medium-active-image").css("height", $(this).val())
+      newWidth = $(".medium-active-image").css("width")
+      $("#medium-image-width").val(newWidth)
+      $(".medium-active-image").css("width", newWidth)
+      $(".medium-active-image").css("height", "")
+
+    $('body').on "click", ".medium-image-float", () ->
+      direction = $(this).data("float")
+      image = $(".medium-active-image")
+      switch direction
+        when "left" then image.removeClass("pull-right pull-left").addClass("pull-left")
+        when "right" then image.removeClass("pull-right pull-left").addClass("pull-right")
+        when "none" then image.removeClass("pull-right pull-left")
+
+    $('body').on "click", ".medium-image-delete", () ->
+      image = $(".medium-active-image")
+      image.remove()
+      self.updateFromMediumEditor()
+      self.closeImageControls()
+      mediumEditor.activate()
+
+  openImageControls: (image) ->
+    console.log image
+    image.addClass("medium-active-image")
+    $("#medium-image-width").val(image[0].style.width)
+    $("#medium-image-height").val(image[0].style.height)
+    $("#medium-image-button").hide()
+    $(".medium-image-controls").show()
+
+  closeImageControls: ->
+    $(".medium-editor img").removeClass("medium-active-image")
+    $("#medium-image-button").show()
+    $(".medium-image-controls").hide()
+    @updateFromMediumEditor()
+
+  updateFromMediumEditor: ->
+    $('.medium-editor').each ->
+      input = $($(this).data('input'))
+      codemirror = input.siblings('.CodeMirror')[0].CodeMirror
+      html = $(this).html()
+      input.val(html)
+      codemirror.setValue(html)
+
+  setupMedium: ->
+    # Medium-editor keeps adding toolbars when this method gets triggered 
+    # (i.e. when opening snippets modal on post edit page) and they all seem 
+    # to get activated at the same time, so this clears out existing ones first
+    $('.medium-editor-toolbar').remove()
+    $('.medium-editor-anchor-preview').remove()
+    mediumEditor = new MediumEditor('.medium-editor', mediumEditorOptions)
+    mediumEditor
+
+  bindCodeMirror: (wysiwyg, codemirror) ->
+    codemirror.on "change", () ->
+      if wysiwyg.find(".CodeMirror").is(":visible")
+        code = codemirror.getValue()
+        wysiwyg.find(".medium-editor").html(code)
+        $(wysiwyg.find(".medium-editor").data('input')).val(code)
+
+  bindMedium: (wysiwyg, codemirror) ->
+    wysiwyg.find('.medium-editor').on 'input', () ->
+      input = $($(this).data('input'))
+      # html = tidy_html5 $(this).html(), tidyOptions
+      html = $(this).html()
+      input.val(html)
+      codemirror.setValue(html)
+
+  bindCodeToggle: (wysiwyg, codemirror, mediumEditor) ->
+    toggle = wysiwyg.find("[data-toggle='codemirror']")
+    unless toggle.hasClass "bound"
+      toggle.addClass("bound")
+      wysiwyg.on "click", "[data-toggle='codemirror']", () ->
+        editor = wysiwyg.find('.editor')
+        code = wysiwyg.find('.CodeMirror')
+        editor.toggle()
+        code.toggle()
+
+        html = tidy_html5 wysiwyg.find('.medium-editor').html(), tidyOptions
+        codemirror.setValue(html)
+
+        codemirror.refresh()
+        if code.is(":visible")
+          $(this).children("i").removeClass("fa-code").addClass("fa-font")
+          mediumEditor.deactivate()
+          $("#storytime-modal").addClass("modal-wide")
+        else
+          $(this).children("i").removeClass("fa-font").addClass("fa-code")
+          mediumEditor.activate()
+          $("#storytime-modal").removeClass("modal-wide")
+
+    $("#storytime-modal").on 'hide.bs.modal', ->
+      $(this).removeClass "modal-wide"
+
+  bindActionPanel: (wysiwyg, mediumEditor) ->
+    $(".post-action-panel").on "show.bs.collapse", ->
+      mediumEditor.activate()
+      wysiwyg.find('.editor').show()
+      wysiwyg.find('.CodeMirror').hide()
+  
+  bindTogglesToPanels: () ->
+    $(".post-action-panel").on "show.bs.collapse", ->
+      $("[data-toggle='codemirror']").hide()
+
+    $(".post-action-panel").on "hide.bs.collapse", ->
+      $("[data-toggle='codemirror']").show()

data/app/assets/stylesheets/storytime/_buttons.scss

@@ -0,0 +1,70 @@
+.btn-primary.btn-outline:active, .btn-primary.btn-outline:focus {
+  color: #fff;
+}
+
+.btn {
+  text-transform: uppercase;
+  font-weight: lighter;
+  border-radius: 0;
+  @include transition(0.3s);
+
+  &.btn-delete-resource {
+    i {
+      position: relative;
+      top: 1px;
+    }
+  }
+
+  &.btn-icon, &.btn-icon:active, &.btn-icon:focus {
+    font-size: 28px;
+    line-height: 30px;
+    padding: 0;
+    border: none;
+    outline: none;
+    @include box-shadow(none);
+    background: transparent;
+
+    &.rotate-on-hover {
+      &:hover {
+        @include rotate(45deg);
+      }
+    }
+
+    &:hover {
+      background: transparent;
+    }
+
+    i {
+      position: relative;
+      top: 2px;
+    }
+  }
+
+  &.margin-right {
+    margin-right: 10px;
+  }
+
+  &.margin-left {
+    margin-left: 10px;
+  }
+}
+
+.btn-primary {
+  @include button-variant($st-btn-primary-color, $st-btn-primary-bg, $st-btn-primary-border);
+}
+
+.btn-danger {
+  @include button-variant($st-btn-danger-color, $st-btn-danger-bg, $st-btn-danger-border);
+}
+
+.btn-outline {
+  background-color: transparent;
+
+  &.btn-primary {
+    @include btn-outline-variant($st-btn-primary-color, $st-btn-primary-bg);
+  }
+
+  &.btn-danger {
+    @include btn-outline-variant($st-btn-danger-color, $st-btn-danger-bg);
+  }
+}

data/app/assets/stylesheets/storytime/_dropdowns.scss

@@ -0,0 +1,5 @@
+.dropdown-menu {
+  border: 1px solid $st-dropdown-fallback-border; // IE8 fallback
+  border: 1px solid $st-dropdown-border;
+  border-radius: 0;
+}

data/app/assets/stylesheets/storytime/_forms.scss

@@ -0,0 +1,3 @@
+.form-control {
+  border-radius: 0;
+}

data/app/assets/stylesheets/storytime/_list-group.scss

@@ -0,0 +1,13 @@
+.list-group-item {
+  margin-bottom: 0;
+  border: none;
+  border-bottom: 1px solid #ddd;
+  color: $list-group-link-color;
+  
+  &:first-child {
+    border-radius: 0;
+  }
+  &:last-child {
+    border-radius: 0;
+  }
+}

data/app/assets/stylesheets/storytime/_pagination.scss

@@ -0,0 +1,14 @@
+.pagination {
+  margin: 0;
+
+  > .active > a,
+  > .active > span {
+    &,
+    &:hover,
+    &:focus {
+      color: $st-pagination-active-color;
+      background-color: $st-pagination-active-bg;
+      border-color: $st-pagination-active-border;
+    }
+  }
+}

data/app/assets/stylesheets/storytime/_panels.scss

@@ -0,0 +1,8 @@
+.no-padding {
+  padding: 0;
+}
+
+.panel-title-block-link {
+  display: block;
+  padding: 10px 15px;
+}

data/app/assets/stylesheets/storytime/_tabs.scss

@@ -0,0 +1,38 @@
+.nav-tabs {
+  border-bottom: 1px solid $st-nav-tabs-border-color;
+  > li {
+
+    // Actual tabs (as links)
+    > a {
+      color: $text-color;
+      font-size: 0.9em;
+      text-transform: uppercase;
+      border-radius: 0;
+      @include transition(0.3s);
+
+      &:hover {
+        border-color: $st-nav-tabs-link-hover-border-color $st-nav-tabs-link-hover-border-color $st-nav-tabs-border-color;
+      }
+
+      i {
+        color: $st-brand-primary;
+        font-size: 1.3em;
+      }
+
+      .hidden-xs {
+        margin-left: 5px;
+      }
+    }
+
+    // Active state, and its :hover to override normal :hover
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        border: 1px solid $st-nav-tabs-active-link-hover-border-color;
+        border-bottom-color: $st-brand-primary;
+        color: $st-brand-primary;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/storytime/_type.scss

@@ -0,0 +1,13 @@
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  font-family: $st-headings-font-family;
+  font-weight: $st-headings-font-weight;
+}
+
+.serif {
+  font-family: $st-font-family-serif;
+}
+
+.text-sans-serif {
+  font-family: $st-font-family-sans-serif;
+}

data/app/assets/stylesheets/storytime/_wells.scss

@@ -0,0 +1,14 @@
+.well {
+  background-color: #ECEBEB;
+  border: none;
+  @include box-shadow(none);
+  border-radius: 0;
+
+  .btn-primary {
+    background: #fff;
+
+    &:hover, &:focus, &:active {
+      color: $brand-primary;
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+
+  .flash {
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
+    z-index: 10000;
+    .flash-notice, .flash-success {
+      padding: 10px 40px;
+      background: #9FBB58;
+      color: white;
+    }
+    .flash-error, .flash-alert {
+      padding: 10px 40px;
+      background: #E25440;
+      color: white;
+    }
+  }
+
+  .form-group.check_boxes {
+    margin-left: 20px;
+  }
+
+  .radio,
+  .checkbox {
+    margin-left: 20px;
+  }
+
+  .draft_saved {
+    color: #777777;
+    font-size: 0.55em;
+    font-style: normal;
+  }
+
+  .table-row-link {
+    &:hover {
+      cursor: pointer;
+    }
+    
+    td {
+      line-height: 2.15 !important;
+    }
+  }

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

@@ -0,0 +1,75 @@
+@import url(http://fonts.googleapis.com/css?family=Merriweather:400,300,700,900|Open+Sans:400,300,600);
+@import "storytime/icons";
+
+$st-brand-primary: #4B71C3;
+$st-btn-primary-color:              #fff !default;
+$st-btn-primary-bg:                 $st-brand-primary !default;
+$st-btn-primary-border:             darken($st-btn-primary-bg, 5%) !default;
+
+$st-brand-danger: #B22E46;
+$st-btn-danger-color:               #fff !default;
+$st-btn-danger-bg:                  $st-brand-danger !default;
+$st-btn-danger-border:              darken($st-btn-danger-bg, 5%) !default;
+
+$scroll-panel-line-height: 30px;
+$scroll-panel-header-height: 65px;
+$scroll-panel-header-padding: (($scroll-panel-header-height - $scroll-panel-line-height) / 2);
+ 
+$st-pagination-active-color:              #333;
+$st-pagination-active-bg:                 #fff;
+$st-pagination-active-border:             #ddd;
+ 
+$st-nav-tabs-border-color:                     transparent;
+$st-nav-tabs-link-hover-border-color:          transparent;
+$st-nav-tabs-active-link-hover-border-color:   transparent;
+
+$st-dropdown-border: #333;
+$st-dropdown-fallback-border: #333;
+
+$st-font-family-sans-serif: 'Open Sans', sans-serif;
+$st-font-family-serif: 'Merriweather', serif;
+$st-headings-font-family: $st-font-family-serif;
+$st-headings-font-weight: 700;
+
+@import "bootstrap-sprockets";
+@import "bootstrap";
+@import "font-awesome-sprockets";
+@import "font-awesome";
+@import "leather";
+@import "jquery-ui/core";
+@import "jquery-ui/datepicker";
+@import "jquery-ui/theme";
+
+@import "chosen";
+@import "chosen-bootstrap-3";
+@import "codemirror";
+@import "codemirror/themes/solarized";
+@import "jquery.ui.timepicker";
+@import "medium-editor.min";
+@import "medium-editor-default.min";
+
+.storytime {
+  font-family: $st-font-family-sans-serif;
+  
+  @import "storytime/buttons";
+  @import "storytime/dropdowns";
+  @import "storytime/forms";
+  @import "storytime/list-group";
+  @import "storytime/pagination";
+  @import "storytime/panels";
+  @import "storytime/tabs";
+  @import "storytime/type";
+  @import "storytime/wells";
+
+  @import "storytime/admin";
+  @import "storytime/media";
+  @import "storytime/modals";
+  @import "storytime/posts";
+  @import "storytime/versions";
+  @import "storytime/navigation";
+  @import "storytime/scroll-panels";
+}
+
+@import "storytime/snippets";
+@import "storytime/layout";
+@import "storytime/comments";

data/app/assets/stylesheets/storytime/icons.scss

@@ -0,0 +1,79 @@
+@charset "UTF-8";
+
+/* storytime-icons */
+@font-face {
+  font-family: "storytime-icons";
+  src:url("https://fontastic.s3.amazonaws.com/ous3EcA2XoT3aZKL2pCQWB/fonts/1423165812.eot");
+  src:url("https://fontastic.s3.amazonaws.com/ous3EcA2XoT3aZKL2pCQWB/fonts/1423165812.eot?#iefix") format("embedded-opentype"),
+    url("https://fontastic.s3.amazonaws.com/ous3EcA2XoT3aZKL2pCQWB/fonts/1423165812.woff") format("woff"),
+    url("https://fontastic.s3.amazonaws.com/ous3EcA2XoT3aZKL2pCQWB/fonts/1423165812.ttf") format("truetype"),
+    url("https://fontastic.s3.amazonaws.com/ous3EcA2XoT3aZKL2pCQWB/fonts/1423165812.svg#1423165812") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+[data-icon]:before {
+  font-family: "storytime-icons" !important;
+  content: attr(data-icon);
+  font-style: normal !important;
+  font-weight: normal !important;
+  font-variant: normal !important;
+  text-transform: none !important;
+  speak: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+[class^="icon-st-icons"]:before,
+[class*=" icon-st-icons"]:before {
+  font-family: "storytime-icons" !important;
+  font-style: normal !important;
+  font-weight: normal !important;
+  font-variant: normal !important;
+  text-transform: none !important;
+  speak: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-st-icons-st-logo:before {
+  content: "m";
+}
+.icon-st-icons-delete:before {
+  content: "a";
+}
+.icon-st-icons-edit:before {
+  content: "b";
+}
+.icon-st-icons-images:before {
+  content: "c";
+}
+.icon-st-icons-logout:before {
+  content: "d";
+}
+.icon-st-icons-permission:before {
+  content: "e";
+}
+.icon-st-icons-profile:before {
+  content: "f";
+}
+.icon-st-icons-settings:before {
+  content: "g";
+}
+.icon-st-icons-subscribe:before {
+  content: "h";
+}
+.icon-st-icons-trash:before {
+  content: "i";
+}
+.icon-st-icons-users:before {
+  content: "j";
+}
+.icon-st-icons-utilitymenu:before {
+  content: "k";
+}
+.icon-st-icons-versions:before {
+  content: "l";
+}

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

@@ -0,0 +1,21 @@
+/* Sticky footer styles
+-------------------------------------------------- */
+html {
+  position: relative;
+  height: auto;
+  min-height: 100%;
+}
+body {
+  /* Margin bottom by footer height */
+  margin-bottom: 60px;
+  height: auto;
+}
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
+  height: 60px;
+  background-color: #f5f5f5;
+  padding-top: 20px;
+}