character 0.1.0 → 1.0.0

data/app/assets/javascripts/character/images/module.coffee

@@ -0,0 +1,148 @@
+
+@Character.Images ||= {}
+
+@Character.Images.ListItemView = Backbone.Marionette.ItemView.extend
+  tagName: 'li'
+
+  template: (item) -> ''
+
+  modelEvents:
+    'change':  'render'
+    'destroy': 'remove'
+
+  onRender: ->
+    image = @model.get('image')
+
+    if image
+      # HACK: this workaround sometimes Rails includes image mount_uploader
+      image = image.image if image.image
+
+      thumbUrl = image.chr_thumb.url
+      @$el.css('background-image', "url(#{ thumbUrl })")
+      @$el.attr('data-id', @model.id)
+      @$el.removeClass('placeholder csspinner double-up')
+    else
+      @$el.addClass('placeholder csspinner double-up')
+
+@Character.Images.ListView = Backbone.Marionette.CollectionView.extend
+  tagName: 'ul'
+  childView: Character.Images.ListItemView
+
+  initialize: ->
+    @listenTo(@collection, 'sort', @render, @)
+
+@Character.Images.Layout = Backbone.Marionette.LayoutView.extend
+  id:        'chr_images'
+  className: 'chr-images'
+
+  template: -> """<div id=chr_images_dialog class='chr-images-dialog'>
+                    <header class='chr-images-header'>
+                      <span class='title'>Images</span>
+                      <button id='chr_images_close' type='button' class='chr-images-close'><i class='chr-icon icon-close-alt'></i></button>
+                    </header>
+                    <section id=chr_images_grid class='chr-images-grid'></section>
+                    <footer class='chr-images-footer'>
+                      <button id=chr_images_insert class='button right'>Insert</button>
+                      <button id=chr_images_cancel class='button right'>Cancel</button>
+                      <div class='button'>
+                        <input id=chr_images_upload class='chr-images-upload' type='file' name='character_image[image]' multiple='' />
+                        Upload files...
+                      </div>
+                    </footer>
+                  </div>"""
+
+  ui:
+    dialog:       '#chr_images_dialog'
+    uploadInput:  '#chr_images_upload'
+    listContent:  '#chr_images_grid'
+    insertButton: '#chr_images_insert'
+
+  regions:
+    listContent: '#chr_images_grid'
+
+  events:
+    'click #chr_images_close':   '_cancel'
+    'click #chr_images_cancel':  '_cancel'
+    'click #chr_images_insert':  '_insert'
+    'click #chr_images_grid li': '_selectImage'
+
+  initialize: ->
+    @uploads = {}
+
+  _cancel: ->
+    @callback?([])
+    @hide()
+
+  _insert: ->
+    if not @ui.insertButton.hasClass 'disabled'
+      if @callback
+        selectedModels = _.collect $('#chr_images_grid li.selected'), (el) =>
+          id = $(el).attr('data-id')
+          @options.collection.get(id)
+
+        @callback(selectedModels)
+      @hide()
+
+  _selectImage: (e) ->
+    $el = $(e.currentTarget)
+
+    if $el.hasClass('placeholder')
+      return
+
+    if not chr.images.options.multipleSelection
+      @ui.listContent.find('.selected').removeClass 'selected'
+
+    $el.toggleClass 'selected'
+    @ui.insertButton.removeClass 'disabled'
+
+  onRender: ->
+    dialogWidth = Math.floor(($(window).width() - 322) / 176 ) * 176 + 20
+    @ui.dialog.css { 'margin-left': dialogWidth / -2, 'width': dialogWidth }
+
+    @list = new Character.Images.ListView({ collection: @options.collection })
+    @listContent.show(@list)
+
+  show: (@callback, @multipleSelection) ->
+    # https://github.com/blueimp/jQuery-File-Upload/wiki/Options
+    @ui.uploadInput.fileupload
+      url:              '/admin/Character-Image'
+      paramName:        'character_image[image]'
+      dataType:         'json'
+      acceptFileTypes:  /(\.|\/)(gif|jpe?g|png)$/i
+      add: (e, data) =>
+        model = new Character.Generic.Model({ created_at: (new Date()).toISOString() })
+        @collection.add(model)
+        data.submit().done (data, result) -> model.set(data)
+
+    @$el.addClass('open')
+    @ui.listContent.find('.selected').removeClass('selected')
+    @ui.insertButton.addClass('disabled')
+    @ui.listContent.removeClass('dragover')
+
+    $(document).on 'dragenter', '#chr_images', => @ui.listContent.addClass('dragover')
+    $(document).on 'mousemove', '#chr_images', => @ui.listContent.removeClass('dragover')
+
+  hide: ->
+    @$el.removeClass('open')
+    $(document).off 'dragenter, mousemove', '#chr_images'
+
+# module initialization
+chr.module 'images', (module) ->
+  module.on 'start', ->
+    @collection = new Character.Generic.Collection()
+    @collection.options =
+      collectionUrl: "#{ chr.options.url }/Character-Image"
+    @collection.sortField = 'created_at'
+    @collection.sortDirection = 'desc'
+    @collection.fetchPage(1)
+
+    @layout = new Character.Images.Layout({ collection: @collection })
+    $('#character').after(@layout.render().$el)
+
+    # extend character api
+    chr.commands.setHandler 'showImages', (multipleSelection=false, callback=false) =>
+      @options.multipleSelection = multipleSelection
+      @layout.show(callback)
+
+    chr.commands.setHandler 'hideImages', =>
+      @layout.hide()

data/app/assets/javascripts/character/pages/module.coffee

@@ -0,0 +1,43 @@
+# ---------------------------------------------------------
+# PAGES
+# ---------------------------------------------------------
+
+@Character.Pages = {}
+
+#
+# Marionette.js Layout Documentation
+# https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.itemview.md
+# character/generic/details.coffee
+#
+@Character.Pages.DetailsLayout = Character.Generic.DetailsLayout.extend
+  _hideForm: ->
+    if @ui.form.parent().hasClass 'chr-form-scrolled-up'
+      headerHeight       = $('#details_header').outerHeight()
+      editableAreaHeight = $(window).height() - headerHeight
+      scrollTo           = @ui.page.offset().top - headerHeight + 1
+
+      @ui.page.css { 'min-height': editableAreaHeight }
+      @ui.content.scrollTop scrollTo
+
+  afterRenderContent: ->
+    @ui.page = @ui.content.find('.page')
+    @_hideForm()
+
+chr.pagesModule = (opts) ->
+  moduleOpts =
+    implementation: Character.Pages
+    menuIcon:       'edit'
+    menuTitle:      'Pages'
+    modelName:      'Character-Page'
+    listReorder:    true
+    listItem:
+      titleField:   'title'
+      metaField:    'updated_ago'
+    redactorOptions:
+      toolbarExternal: '#redactor_toolbar'
+      focusCallback: -> $('#details').addClass('chr-show-redactor-toolbar')
+      blurCallback:  -> $('#details').removeClass('chr-show-redactor-toolbar')
+      initCallback:  -> $('.redactor_character-redactor').attr('data-input-name', 'character_page[template_content][body]')
+  _(moduleOpts).extend(opts)
+
+  chr.genericModule('Page', moduleOpts)

data/app/assets/javascripts/character/posts/module.coffee

@@ -0,0 +1,113 @@
+# ---------------------------------------------------------
+# POSTS
+# ---------------------------------------------------------
+
+@Character.Posts = {}
+
+#
+# Marionette.js Layout Documentation
+# https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.itemview.md
+# character/generic/details.coffee
+@Character.Posts.DetailsLayout = Character.Generic.DetailsLayout.extend
+  _setBackgroundImage: (imageUrl) ->
+    @ui.featuredImageUploader.addClass('has-image')
+    @ui.featuredImageUploader.css({ 'background-image': "url(#{ imageUrl })" })
+
+  _updateFeaturedImage: (image) ->
+    imageUrl = image.regular.url
+    thumbUrl = image.chr_thumb_small.url
+    @ui.featuredImageInput.val(imageUrl)
+    @ui.featuredThumbInput.val(thumbUrl)
+    @_setBackgroundImage(imageUrl)
+
+  _getSubtitleValue: ->
+    # TODO: add case when image is posted first or nothing is posted
+    @ui.postContent.children().first().text()
+
+  _bindSubtitleUpdate: ->
+    # update subtitle to be first passage of the body text
+    @ui.subtitleField.val(@_getSubtitleValue())
+    @ui.postContent.on 'keyup', => @ui.subtitleField.val(@_getSubtitleValue())
+
+  _hideForm: ->
+    if @ui.form.parent().hasClass 'chr-form-scrolled-up'
+      headerHeight       = $('#details_header').outerHeight()
+      editableAreaHeight = $(window).height() - headerHeight
+      scrollTo           = @ui.post.offset().top - headerHeight + 1
+
+      @ui.post.css { 'min-height': editableAreaHeight }
+      @ui.content.scrollTop scrollTo
+
+  _removeFeaturedImage: ->
+    @ui.featuredImageInput.val('')
+    @ui.featuredThumbInput.val('')
+    @ui.featuredImageUploader.removeClass('has-image').css({ 'background-image': "" })
+
+  _bindRemove: ->
+    @ui.removeButton = $("<i class='remove fa fa-trash-o'></i>")
+    @ui.removeButton.appendTo(@ui.featuredImageUploader)
+    @ui.removeButton.on 'click', (e) => @_removeFeaturedImage() ; false
+
+  _bindFeaturedImageUploader: ->
+    imageUrl = @ui.featuredImageUploader.attr('data-image-url')
+    if imageUrl and imageUrl != ''
+      @_setBackgroundImage(imageUrl)
+
+    @ui.featuredImageUploader.on 'click', (e) =>
+      @ui.featuredImageUploader.addClass 'select'
+      chr.execute 'showImages', false, (images) =>
+        if images.length > 0
+          model = images[0]
+          if model
+            @_updateFeaturedImage(model.get('image'))
+
+        @ui.featuredImageUploader.removeClass 'select'
+
+  afterRenderContent: ->
+    @ui.featuredImageUploader = $('#character_post_featured_image_uploader')
+    @ui.featuredImageInput    = $('#character_post_featured_image_url')
+    @ui.featuredThumbInput    = $('#character_post_featured_image_chr_thumbnail_url')
+    @ui.publishedCheckbox     = $('#character_post_published')
+    @ui.subtitleField         = $('#character_post_subtitle')
+    @ui.post                  = @ui.content.find('.post')
+    @ui.postContent           = @ui.post.find('.redactor_editor:eq(0)')
+
+    @_hideForm()
+    @_bindSubtitleUpdate()
+    @_bindFeaturedImageUploader()
+    @_bindRemove()
+
+  afterOnClose: ->
+    @ui.postContent.off 'keyup'
+    @ui.featuredImageUploader.off('click')
+
+
+chr.postsModule = (opts) ->
+  moduleOpts =
+    implementation: Character.Posts
+    menuIcon:       'rss'
+    menuTitle:      'Posts'
+    listItem:
+      titleField:   'title'
+      metaField:    'updated_ago'
+    modelName:      'Character-Post'
+    listSearch:     true
+    listScopes:
+      default:
+        orderBy:    'published_at:desc'
+      published:
+        where:      'hidden=false'
+        orderBy:    'published_at:desc'
+      drafts:
+        where:      'hidden=true'
+        orderBy:    'published_at:desc'
+    redactorOptions:
+      formattingTags: ['p', 'blockquote', 'pre', 'h2', 'h3']
+      toolbarExternal: '#redactor_toolbar'
+      focusCallback: -> $('#details').addClass('chr-show-redactor-toolbar')
+      blurCallback: -> $('#details').removeClass('chr-show-redactor-toolbar')
+      initCallback: -> $('.redactor_character-redactor').attr('data-input-name', 'character_post[body_html]')
+
+  _(moduleOpts).extend(opts)
+
+  chr.genericModule('Post', moduleOpts)

data/app/assets/javascripts/character/settings/_admins.coffee

@@ -0,0 +1,61 @@
+# ---------------------------------------------------------
+# SETTINGS ADMINS
+# ---------------------------------------------------------
+
+@Character.Settings.AdminsLayout = Character.Settings.DetailsLayout.extend
+  _newItem: ->
+    $item = @ui.template.clone()
+
+    $item.removeAttr('id')
+
+    objectId = new Date().getTime()
+    $item.find('[name]').each (idx, el) ->
+      newName = $(el).attr('name').replace(/objects\[\]\[\]/g, "objects[][#{ objectId }]")
+      $(el).attr('name', newName)
+
+    @ui.template.before($item)
+
+    $item.find('.icon-plus-alt').hide()
+    $item.find('.action_delete').show()
+    $item.find('.action_sort').show()
+
+  _bindEnter: ->
+    @ui.emailInput.on 'keydown', (e) =>
+      if e.which == 13
+        @_newItem()
+        @ui.emailInput.val ''
+        e.preventDefault()
+
+  _bindDelete: ->
+    @ui.content.on 'click', '.action_delete', (e) ->
+      itemCls = $(e.currentTarget).attr('data-item-class')
+      item    = $(e.currentTarget).closest(".#{ itemCls }")
+
+      # TODO: query could be optimized with one regex
+      destroy_field = _.find item.find("input[type=hidden]"), (f) ->
+        name = $(f).attr('name') ; _(name).endsWith('[_destroy]')
+
+      if destroy_field
+        $(destroy_field).attr('value', 'true')
+        item.replaceWith(destroy_field)
+      else
+        item.remove()
+      false
+
+  afterRenderContent: ->
+    @ui.template   = $('#template')
+    @ui.emailInput = @ui.template.find('.objects_email input')
+    @_bindEnter()
+    @_bindDelete()
+
+  afterOnClose: ->
+    @ui.emailInput.off 'keydown'
+    @ui.content.off 'click', '.action_delete'
+
+  beforeSave: ->
+    #@ui.template.remove()
+
+
+chr.settingsAdmins = ->
+  chr.settingsModule 'Admins',
+    detailsViewClass: Character.Settings.AdminsLayout

data/app/assets/javascripts/character/settings/_authors.coffee

@@ -0,0 +1,56 @@
+# ---------------------------------------------------------
+# SETTINGS AUTHORS
+# ---------------------------------------------------------
+
+@Character.Settings.AuthorsLayout = Character.Settings.DetailsLayout.extend
+  _bindAdd: ->
+    @ui.actionAdd.on 'click', (e) =>
+      e.preventDefault()
+
+      $item = @ui.template.clone()
+
+      $item.removeAttr('id')
+
+      objectId = new Date().getTime()
+      $item.find('[name]').each (idx, el) ->
+        newName = $(el).attr('name').replace(/objects\[\]\[\]/g, "objects[][#{ objectId }]")
+        $(el).attr('name', newName)
+
+      @ui.template.before($item)
+
+      $item.find('.action_add').hide()
+      $item.find('.action_delete').show()
+
+  _bindDelete: ->
+    @ui.content.on 'click', '.action_delete', (e) ->
+      itemCls = $(e.currentTarget).attr('data-item-class')
+      item    = $(e.currentTarget).closest(".#{ itemCls }")
+
+      # TODO: query could be optimized with one regex
+      destroy_field = _.find item.find("input[type=hidden]"), (f) ->
+        name = $(f).attr('name') ; _(name).endsWith('[_destroy]')
+
+      if destroy_field
+        $(destroy_field).attr('value', 'true')
+        item.replaceWith(destroy_field)
+      else
+        item.remove()
+      false
+
+  afterRenderContent: ->
+    @ui.template   = $('#template')
+    @ui.actionAdd  = @ui.form.find('.action_add')
+
+    @_bindAdd()
+    @_bindDelete()
+
+  afterOnClose: ->
+    @ui.actionAdd.off 'click'
+
+  beforeSave: ->
+    @ui.template.remove()
+
+chr.settingsPostAuthors = (titleMenu = 'Authors') ->
+  chr.settingsModule 'Post Authors',
+    titleMenu: titleMenu
+    detailsViewClass: Character.Settings.AuthorsLayout

data/app/assets/javascripts/character/settings/_categories.coffee

@@ -0,0 +1,61 @@
+# ---------------------------------------------------------
+# SETTINGS CATEGORIES
+# ---------------------------------------------------------
+
+@Character.Settings.CategoriesLayout = Character.Settings.DetailsLayout.extend
+  newItem: ->
+    $item = @ui.template.clone()
+
+    $item.removeAttr('id')
+
+    objectId = new Date().getTime()
+    $item.find('[name]').each (idx, el) ->
+      newName = $(el).attr('name').replace(/objects\[\]\[\]/g, "objects[][#{ objectId }]")
+      $(el).attr('name', newName)
+
+    @ui.reorderableItems.prepend($item)
+
+    $item.find('.icon-plus-alt').hide()
+    $item.find('.action_delete').show()
+    $item.find('.action_sort').show()
+
+  _bindEnter: ->
+    @ui.titleInput.on 'keydown', (e) =>
+      if e.which == 13
+        @newItem()
+        @ui.titleInput.val('')
+
+        false
+
+  _bindDelete: ->
+    @ui.content.on 'click', '.action_delete', (e) ->
+      itemCls = $(e.currentTarget).attr('data-item-class')
+      item    = $(e.currentTarget).closest(".#{ itemCls }")
+
+      # TODO: query could be optimized with one regex
+      destroy_field = _.find item.find("input[type=hidden]"), (f) ->
+        name = $(f).attr('name') ; _(name).endsWith('[_destroy]')
+
+      if destroy_field
+        $(destroy_field).attr('value', 'true')
+        item.replaceWith(destroy_field)
+      else
+        item.remove()
+      false
+
+  afterRenderContent: ->
+    @ui.template   = $('#template')
+    @ui.titleInput = @ui.template.find('.objects_title input')
+    @_bindEnter()
+    @_bindDelete()
+
+  afterOnClose: ->
+    @ui.titleInput.off 'keydown'
+
+  beforeSave: ->
+    @ui.template.remove()
+
+chr.settingsPostCategories = (titleMenu = 'Categories') ->
+  chr.settingsModule 'Post Categories',
+    titleMenu: titleMenu
+    detailsViewClass: Character.Settings.CategoriesLayout