effective_ckeditor 1.0.1 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 46022b1ae3481ec3be596a93d32458777be3ad34
-  data.tar.gz: 6c956c4d07044bc4f3d6626cce09d2a586c8143d
+  metadata.gz: 6abe1be063968942b886583f1efd66fa0922f8ad
+  data.tar.gz: f212652bc21b13501653bec315ba1f86fdf832f6
 SHA512:
-  metadata.gz: ae12510c6e4da3293a0a7744ac1e9a2599dd4aa327819fc3dd4a64eda6fe221620622193637952a0acaa57ee7b2432dd9b7d020ad99ca5b014da1570785b5e47
-  data.tar.gz: a97ab6455c7fa248c58a75471f502a6144db5dfe4c15f80d3a974d7b9043409cf73ab0080f9eb7601f6076ada000b7ad0eba161e22f79d0f97ff8e1993dfa242
+  metadata.gz: 7cff60407f65c4b8423ef6ac68fd22df8dfd9c34e9156d90e52a027c3d547c2b01f471e2df3b4baef32dc6abbcd793549eabb4eec0a780062e9eb27f3ac91081
+  data.tar.gz: e4dfd0bb28ece84c558e37f782943569676447e5c9eede0bd74f271bbd78e2a29c8d6f0fc4b2f693cf30384be9861e304769628c197f456aae7b20a2145ad5b2

data/app/assets/javascripts/ckeditor/plugins/effective_menus/plugin.js.coffee

@@ -0,0 +1,543 @@
+# OKAY THE TOP OF THIS IS A JQUERY PLUGIN
+# When the CKEditor plugin below is initialized via an /edit/ route
+# it initialized this jquery on any $(.effective-menu) objects present on the page
+
+(($, window) ->
+  class EffectiveMenuEditor
+    defaults:
+      menuClass: 'effective-menu'
+      expandThreshold: 250  # Seconds before a leaf li item will be auto-expanded into a dropdown
+      maxDepth: 9999
+
+    menu: null
+    draggable: null
+    droppable: null
+
+    constructor: (el, options) ->
+      @menu = $(el)
+
+      @options = $.extend({}, @defaults, options)
+      @options.maxDepth = @menu.data('effective-menu-maxdepth') if @menu.data('effective-menu-maxdepth')
+
+      @initCkEditorEvents()
+      @initAddButtonEvents()
+      @initDestroyButtonEvents()
+      @initDragDropEvents()
+      @initAdditionalEvents()
+      true
+
+    # All 3 of these events are basically the same:
+    # Remove the open class and
+
+    initCkEditorEvents: ->
+      # Oh yea, you like that selector.  The comma means or, so there are actually 3 selectors being created here
+      # They need to be in this order for the stopPropagation to work properly.
+      @menu.on 'click', 'li.dropdown.open,.dropdown-menu > li.dropdown,li:not(.dropdown)', (event) =>
+        event.stopPropagation()
+        @menu.find('.open').removeClass('open')
+        # Open the CKEDITOR dialog and pass the source effective_menu_item $('li') to the dialog
+        CKEDITOR.instances[Object.keys(CKEDITOR.instances)[0]].openDialog 'effectiveMenusDialog', (dialog) ->
+          dialog.effective_menu_item = $(event.currentTarget)
+
+    initAddButtonEvents: ->
+      @menu.on 'mouseenter', (event) => @menu.children('.actions').children('.add-item').show()
+      @menu.on 'mouseleave', (event) => @menu.children('.actions').children('.add-item').hide()
+      @menu.on 'mouseenter', '.add-item', (event) -> $(event.currentTarget).addClass('large') ; event.stopPropagation()
+      @menu.on 'mouseleave', '.add-item', (event) -> $(event.currentTarget).removeClass('large'); event.stopPropagation()
+
+      @menu.on 'click', '.add-item', (event) =>
+        event.preventDefault()
+        unique_id = new Date().getTime()
+        item = $(@menu.data('effective-menu-new-html').replace(':new', "#{unique_id}", 'g'))
+
+        @menu.children('.actions').before(item)
+
+        CKEDITOR.instances[Object.keys(CKEDITOR.instances)[0]].openDialog 'effectiveMenusDialog', (dialog) ->
+          dialog.effective_menu_item = item
+
+    initDestroyButtonEvents: ->
+      @menu.on 'dragenter', '.remove-item', (event) => $(event.currentTarget).addClass('large')
+      @menu.on 'dragleave', '.remove-item', (event) => $(event.currentTarget).removeClass('large')
+
+      @menu.on 'dragover', '.remove-item', (event) =>
+        return false unless @draggable
+        glyphicon = $(event.currentTarget).addClass('large') # Garbage can
+
+        event.preventDefault() # Enable drag and drop
+        event.stopPropagation()
+
+      @menu.on 'drop', '.remove-item', (event) =>
+        return false unless @draggable
+        glyphicon = $(event.currentTarget).removeClass('large')
+
+        @markDestroyed(@draggable)
+
+        @cleanupMenuAfterDrop()
+        event.stopPropagation()
+        event.preventDefault()
+
+    initAdditionalEvents: ->
+      @menu.on 'click', 'a', (event) -> event.preventDefault()
+
+    initDragDropEvents: ->
+      @menu.on 'dragenter', 'li', (event) =>
+        @droppable = null
+        @droppable = {item: $(event.currentTarget), time: new Date().getTime()}
+        event.preventDefault() if @draggable  # enable drag and drop
+
+      @menu.on 'dragleave', 'li', (event) =>
+        event.preventDefault() if @draggable # enable drag and drop
+
+      @menu.on 'dragstart', 'li', (event) =>
+        @draggable = item = $(event.currentTarget)
+        @menu.children('.actions').children('.add-item').hide()
+        item.removeClass('open').find('.open').removeClass('open')
+
+        event.originalEvent.dataTransfer.setData('text/html', item[0].outerHTML)
+
+        item.css('opacity', '0.4') # Show it slightly removed from the DOM
+        @menu.addClass('dragging')
+        event.stopPropagation()
+
+      @menu.on 'dragover', 'li', (event) =>
+        return false unless @draggable
+
+        item = $(event.currentTarget)
+
+        if item.hasClass('dropdown') && !item.hasClass('open') # This is a menu, expand it
+          @menu.find('.open').removeClass('open')
+          item.parentsUntil(@menu, 'li').andSelf().addClass('open')
+        else
+          event.preventDefault() # Enable drag and drop
+          @expandToDropdown(item) if (new Date().getTime()) > @options.expandThreshold + (@droppable.time || 0)
+
+        # If I don't have the placeholder class already
+        if item.hasClass('placeholder') == false
+          @menu.find('.placeholder').removeClass('placeholder')
+          item.addClass('placeholder')
+
+        event.stopPropagation()
+
+      @menu.on 'dragend', 'li', (event) =>
+        return false unless @draggable
+        item = $(event.currentTarget)
+
+        @cleanupMenuAfterDrop()
+        item.css('opacity', '1.0')
+
+      @menu.on 'drop', 'li', (event) =>
+        item = $(event.currentTarget)
+
+        # Don't allow to drop into myself or my own children
+        return false if !@draggable? || @draggable.is(item) || @draggable.find(item).length > 0
+
+        new_item = $(event.originalEvent.dataTransfer.getData('text/html'))
+
+        item.before(new_item)
+        @draggable.remove()
+
+        @cleanupMenuAfterDrop()
+        @cleanupItemAfterDrop(new_item)
+
+        event.stopPropagation()
+        event.preventDefault()
+
+    # If it hasn't already been expanded...
+    # Append some html to make it into a faux dropdown
+    # which is just a ul.dropdown-menu > li
+    expandToDropdown: (item) ->
+      return false if item.hasClass('dropdown') || item.hasClass('effective-menu-expand')
+      return false if @depthOf(item) >= @options.maxDepth
+
+      item.append(@menu.data('effective-menu-expand-html'))
+      item.addClass('dropdown')
+      item.children('a').attr('data-toggle', 'dropdown')
+
+      # If I'm a top level dropdown
+      if item.parent().hasClass('effective-menu')
+        item.children('a').append("<span class='caret'></span>")
+
+      @menu.find('.open').removeClass('open')
+      item.parentsUntil(@menu, 'li.dropdown').addClass('open')
+
+    cleanupMenuAfterDrop: ->
+      # chrome puts in a weird meta tag that firefox doesnt
+      # so we delete it here
+      @menu.find('meta,li.effective-menu-expand').remove()
+
+      # Collapse any empty dropdowns we may have expanded back to leafs
+      @menu.find('.dropdown-menu:empty').each (index, item) ->
+        item = $(item).closest('.dropdown')
+        item.removeClass('dropdown').removeClass('open')
+        item.children('a').removeAttr('data-toggle').find('span.caret').remove()
+        item.children('.dropdown-menu').remove()
+
+      @menu.removeClass('dragging')
+      @menu.children('.actions').children('.add-item').show()
+      @menu.find('.placeholder,.open').removeClass('placeholder').removeClass('open')
+
+      @draggable = null
+      @droppable = null
+
+    cleanupItemAfterDrop: (item) ->
+      item.children('a').find('span.caret').remove() # Just always remove the caret if present
+
+      # And add it back if we're a top level node
+      if item.parent().hasClass('effective-menu') && item.children('.dropdown-menu').length
+        item.children('a').append("<span class='caret'></span>")
+
+      item.parentsUntil(@menu, 'li.dropdown').addClass('open')
+
+    # Very top level items are assigned Depth of 0
+    # The first dropdowns all have Depth of 1
+    depthOf: (item) -> item.parentsUntil(@menu, 'li').length
+
+    # Just pass _destroyed = 1 back to rails to delete this item
+    # Rails seems to disregard new items set to the new Date.now() values anyhow
+    # Put all deleted items after the .actions div just to be tidy
+    markDestroyed: (item) ->
+      item.hide().addClass('destroyed').find("input[name$='[_destroy]']").val(1)
+      @menu.children('.actions').after(item.remove())
+
+    # This method is called with a Hash value
+    # that is called by reference from the parent function
+    #
+    # This serialize method is called from the effective_ckeditor gem plugins/effective_regions plugin
+    # by the SaveAll method to actually persist the menus when it also saves the regions
+    # This way the saves happen all at once
+
+    serialize: (retval) ->
+      # console.log "============ BEFORE =============="
+      # @menu.find('li').each (index, item) =>
+      #   item = $(item)
+      #   label = item.children('a').first().text()
+      #   left = item.children('.menu-item').children("input[name$='[lft]']").val()
+      #   right = item.children('.menu-item').children("input[name$='[rgt]']").val()
+      #   console.log "[#{label}] #{left}, #{right}"
+      # console.log "=================================="
+
+      @assignLftRgt(@menu, 1)
+
+      # console.log "============ AFTER =============="
+      # @menu.find('li').each (index, item) =>
+      #   item = $(item)
+      #   label = item.children('a').first().text()
+      #   left = item.children('.menu-item').children("input[name$='[lft]']").val()
+      #   right = item.children('.menu-item').children("input[name$='[rgt]']").val()
+      #   console.log "[#{label}] #{left}, #{right}"
+      # console.log "=================================="
+
+      items = {}
+
+      # This next bit just massages some of the form serialization
+      # and translates the jquery serializeArray into the formnat needed by Rails accepts_nested_attributes
+
+      $.each @menu.find('input').serializeArray(), ->
+        @name = @name.replace("effective_menu[menu_items_attributes]", "menu_items_attributes")
+
+        if items[@name]?
+          items[@name] = [items[@name]] unless items[@name].push
+          items[@name].push (@value || '')
+        else
+          items[@name] = (@value || '')
+
+      # This retVal has to account for multiple effective-menus on one page
+      retval[@menu.data('effective-menu-id')] = items
+
+    assignLftRgt: (parent, lft) ->
+      rgt = lft + 1
+
+      parent.children('.dropdown-menu').children('li:not(.destroyed)').each (_, child) =>
+        rgt = @assignLftRgt($(child), rgt)
+
+      parent.children('li:not(.destroyed)').each (_, child) =>
+        rgt = @assignLftRgt($(child), rgt)
+
+      parent.children('.menu-item').children("input[name$='[lft]']").val(lft)
+      parent.children('.menu-item').children("input[name$='[rgt]']").val(rgt)
+
+      rgt + 1
+
+
+  $.fn.extend effectiveMenuEditor: (option, args...) ->
+    @each ->
+      $this = $(this)
+      data = $this.data('effectiveMenuEditor')
+
+      $this.data('effectiveMenuEditor', (data = new EffectiveMenuEditor(this, option))) if !data
+      data[option].apply(data, args) if typeof option == 'string'
+      $this
+
+) window.jQuery, window
+
+
+# AND THE REST IS A CKEDITOR PLUGIN
+
+# This plugin is registered with CkEditor and a dialog to edit menu item is created
+# See the initCkEditorEvents() function in the jquery plugin that calls this dialog
+# When the dialog is called, it sets dialog.effective_menu_item to
+# to the event.currentTarget, i.e. the jquery element $(li)
+
+CKEDITOR.plugins.add 'effective_menus',
+  init: (editor) ->
+    $('.effective-menu').effectiveMenuEditor() # Initialize the EffectiveMenus
+
+    CKEDITOR.dialog.add 'effectiveMenusDialog', (editor) ->
+      {
+        title: 'Effective Menu Item'
+        minWidth: 350,
+        minHeight: 200,
+        contents: [
+          {
+            id: 'item',
+            label: 'Menu Item'
+            elements: [
+              {
+                id: 'add_or_edit',
+                type: 'html',
+                html: '',
+                setup: (element) ->
+                  # This just doesnt work and Im not sure why
+                  if this.getDialog().effective_menu_item.hasClass('new-item')
+                    this.setValue('<p>Create a new menu item</p>')
+                  else
+                    this.setValue('<p>Editing an existing menu item</p>')
+              },
+              {
+                id: 'title',
+                type: 'text',
+                label: 'Title',
+                validate: CKEDITOR.dialog.validate.notEmpty('please enter a title')
+                setup: (element) ->
+                  this.setValue(element.children('.menu-item').children("input[name$='[title]']").val())
+                commit: (element) ->
+                  element.children('.menu-item').children("input[name$='[title]']").val(this.getValue())
+
+                  if element.children('a').find('span.caret').length > 0
+                    element.children('a').text(this.getValue())
+                    element.children('a').append("<span class='caret'></span>")
+                  else
+                    element.children('a').text(this.getValue())
+                validate: ->
+                  if this.getDialog().getValueOf('item', 'source') != 'Divider' && (this.getValue() || '').length == 0
+                    CKEDITOR.dialog.validate.notEmpty('please enter a title').apply(this)
+              },
+              {type: 'html', html: '<br>'},
+              {
+                id: 'source',
+                type: 'radio',
+                label: 'Link Type',
+                items: [['Page', 'Page'], ['URL', 'URL'], ['Route', 'Route'], ['Divider', 'Divider']]
+                setup: (element) ->
+                  menuable_id = element.children('.menu-item').children("input[name$='[menuable_id]']").val() || ''
+                  special = element.children('.menu-item').children("input[name$='[special]']").val() || ''
+                  url = element.children('.menu-item').children("input[name$='[url]']").val() || ''
+
+                  if menuable_id.length > 0
+                    this.setValue('Page')
+                  else if special == 'divider'
+                    this.setValue('Divider')
+                  else if special.length > 0
+                    this.setValue('Route')
+                  else if url.length > 0 && url != '#'
+                    this.setValue('URL')
+                  else
+                    this.setValue('Page')
+
+                onChange: (event) ->
+                  if this.getValue() == 'Page'
+                    this.getDialog().getContentElement('item', 'title').getElement().show()
+                    this.getDialog().getContentElement('item', 'menuable_id').getElement().show()
+
+                    this.getDialog().getContentElement('item', 'url').getElement().hide()
+                    this.getDialog().getContentElement('item', 'special').getElement().hide()
+
+                  if this.getValue() == 'URL'
+                    this.getDialog().getContentElement('item', 'title').getElement().show()
+                    this.getDialog().getContentElement('item', 'url').getElement().show()
+
+                    this.getDialog().getContentElement('item', 'menuable_id').getElement().hide()
+                    this.getDialog().getContentElement('item', 'special').getElement().hide()
+
+                  if this.getValue() == 'Divider'
+                    this.getDialog().getContentElement('item', 'url').getElement().hide()
+                    this.getDialog().getContentElement('item', 'title').getElement().hide()
+                    this.getDialog().getContentElement('item', 'menuable_id').getElement().hide()
+                    this.getDialog().getContentElement('item', 'special').getElement().hide()
+
+                  if this.getValue() == 'Route'
+                    this.getDialog().getContentElement('item', 'title').getElement().show()
+                    this.getDialog().getContentElement('item', 'special').getElement().show()
+
+                    this.getDialog().getContentElement('item', 'menuable_id').getElement().hide()
+                    this.getDialog().getContentElement('item', 'url').getElement().hide()
+              },
+              {
+                id: 'menuable_id',
+                type: 'select',
+                label: 'Page',
+                items: (
+                  pages = []
+                  $.ajax
+                    url: '/admin/pages'
+                    dataType: 'json'
+                    async: false
+                    complete: (data) -> pages = data.responseJSON
+                  pages
+                ),
+                setup: (element) ->
+                  this.setValue(element.children('.menu-item').children("input[name$='[menuable_id]']").val())
+                commit: (element) ->
+                  if this.getElement().isVisible()
+                    element.children('.menu-item').children("input[name$='[menuable_id]']").val(this.getValue())
+                    element.children('.menu-item').children("input[name$='[menuable_type]']").val('Effective::Page')
+                  else
+                    element.children('.menu-item').children("input[name$='[menuable_id]']").val('')
+                    element.children('.menu-item').children("input[name$='[menuable_type]']").val('')
+                validate: ->
+                  if this.getElement().isVisible() && (this.getValue() || '').length == 0
+                    CKEDITOR.dialog.validate.notEmpty('please select a page').apply(this)
+              },
+              {
+                id: 'url',
+                type: 'text',
+                label: 'URL',
+                setup: (element) ->
+                  this.setValue(element.children('.menu-item').children("input[name$='[url]']").val())
+                commit: (element) ->
+                  if this.getElement().isVisible() then value = this.getValue() else value = ''
+
+                  element.children('.menu-item').children("input[name$='[url]']").val(value)
+                  element.children('a').attr('href', value || '#')
+                validate: ->
+                  if this.getElement().isVisible() && (this.getValue() || '').length == 0
+                    CKEDITOR.dialog.validate.notEmpty('please enter a URL').apply(this)
+              },
+              {
+                id: 'special',
+                type: 'text',
+                label: 'Route',
+                setup: (element) ->
+                  this.setValue(element.children('.menu-item').children("input[name$='[special]']").val())
+                commit: (element) ->
+                  if this.getDialog().getValueOf('item', 'source') == 'Divider'
+                    element.children('.menu-item').children("input[name$='[special]']").val('divider')
+                  else if this.getElement().isVisible()
+                    element.children('.menu-item').children("input[name$='[special]']").val(this.getValue())
+                  else
+                    element.children('.menu-item').children("input[name$='[special]']").val('')
+                  # There is more stuff in the classes commit
+                validate: ->
+                  if this.getDialog().getValueOf('item', 'source') == 'Divider'
+                    if this.getDialog().effective_menu_item.hasClass('dropdown')
+                      CKEDITOR.dialog.validate.notEmpty('cannot convert existing dropdown menu to a Divider').apply(this)
+                  else if this.getElement().isVisible()
+                    if (this.getValue() || '').length == 0
+                      CKEDITOR.dialog.validate.notEmpty('please enter a route').apply(this)
+              }
+            ] # /tab1 elements
+          },
+          {
+            id: 'permissions',
+            label: 'Permissions',
+            elements: [
+              {
+                id: 'signed_out',
+                type: 'checkbox',
+                label: 'Only visible when signed out',
+                setup: (element) ->
+                  value = element.children('.menu-item').children("input[name$='[roles_mask]']").val()
+                  this.setValue(value == '-1')
+                onChange: (event) ->
+                  if this.getValue() == true
+                    this.getDialog().setValueOf('permissions', 'signed_in', false)
+                    this.getDialog().setValueOf('permissions', 'roles_mask', '')
+              },
+              {
+                id: 'signed_in',
+                type: 'checkbox',
+                label: 'Only visible when signed in',
+                setup: (element) ->
+                  value = element.children('.menu-item').children("input[name$='[roles_mask]']").val()
+                  this.setValue(value.length > 0 && parseInt(value, 10) >= 0)
+                onChange: (event) ->
+                  if this.getValue() == true
+                    this.getDialog().setValueOf('permissions', 'signed_out', false)
+              },
+              {
+                id: 'roles_mask',
+                type: 'text',
+                label: 'Roles Mask',
+                setup: (element) ->
+                  value = parseInt(element.children('.menu-item').children("input[name$='[roles_mask]']").val(), 10)
+                  if value > 0 then this.setValue(value) else this.setValue('')
+                commit: (element) ->
+                  if ('' + this.getValue()).length > 0
+                    element.children('.menu-item').children("input[name$='[roles_mask]']").val(this.getValue())
+                  else if this.getDialog().getValueOf('permissions', 'signed_in') == true
+                    element.children('.menu-item').children("input[name$='[roles_mask]']").val(0)
+                  else if this.getDialog().getValueOf('permissions', 'signed_out') == true
+                    element.children('.menu-item').children("input[name$='[roles_mask]']").val(-1)
+                  else
+                    element.children('.menu-item').children("input[name$='[roles_mask]']").val('')
+                onKeyup: (event) ->
+                  if ('' + this.getValue()).length > 0
+                    this.getDialog().setValueOf('permissions', 'signed_in', true)
+                    this.getDialog().setValueOf('permissions', 'signed_out', false)
+                validate: ->
+                  if ('' + this.getValue()).length > 0
+                    CKEDITOR.dialog.validate.integer('roles_mask must be an integer').apply(this)
+              }
+            ]
+          },
+          {
+            id: 'advanced',
+            label: 'Advanced'
+            elements: [
+              {
+                id: 'new_window',
+                type: 'checkbox',
+                label: 'Open in new window',
+                setup: (element) ->
+                  value = element.children('.menu-item').children("input[name$='[new_window]']").val()
+                  if value == 'true' then this.setValue(true) else this.setValue(false)
+                commit: (element) ->
+                  element.children('.menu-item').children("input[name$='[new_window]']").val(this.getValue())
+              },
+              {
+                id: 'classes',
+                type: 'text',
+                label: 'HTML Classes',
+                setup: (element) ->
+                  this.setValue(element.children('.menu-item').children("input[name$='[classes]']").val())
+                commit: (element) ->
+                  value = this.getValue()
+                  element.children('.menu-item').children("input[name$='[classes]']").val(value)
+
+                  dropdown = element.hasClass('dropdown')
+
+                  element.prop('class', value)
+
+                  # Put back classes we need
+                  element.addClass('dropdown') if dropdown
+
+                  if this.getDialog().getValueOf('item', 'source') == 'Divider'
+                    element.addClass('divider')
+                  else
+                    element.removeClass('divider')
+              }
+            ]
+          }
+        ], # /contents
+
+        onShow: -> this.setupContent(this.effective_menu_item) if this.effective_menu_item
+
+        onOk: ->
+          this.commitContent(this.effective_menu_item)
+          this.effective_menu_item.removeClass('new-item') if this.effective_menu_item.hasClass('new-item')
+          this.effective_menu_item = undefined
+
+        onCancel: ->
+          this.effective_menu_item.remove() if this.effective_menu_item.hasClass('new-item')
+          this.effective_menu_item = undefined
+      }

data/app/assets/javascripts/ckeditor/plugins/effective_regions/plugin.js.coffee

@@ -36,18 +36,24 @@ SaveAll = {
       button.css('background-image', 'url(/assets/ckeditor/plugins/effective_regions/icons/saving.png)')
       setTimeout(
         -> button.css('background-image', 'url(/assets/ckeditor/plugins/effective_regions/icons/save.png)')
-      2000)
-
-    data = {}
-    data[name] = @instanceData(instance) for name, instance of CKEDITOR.instances
+        2000
+      )
 
     url = window.location.protocol + '//' + window.location.host + '/edit' + window.location.pathname
 
+    # Collect all Effective::Region Data
+    regionData = {}
+    regionData[name] = @instanceData(instance) for name, instance of CKEDITOR.instances
+
+    # Collect all the Effective::Menu Data
+    menuData = {}
+    $('.effective-menu').effectiveMenuEditor('serialize', menuData)
+
     $.ajax
       url: url
       type: 'PUT'
       dataType: 'json'
-      data: { effective_regions: data }
+      data: { effective_regions: regionData, effective_menus: menuData }
       async: false
       complete: (data) ->
         if data.responseText == 'refresh'

data/app/assets/javascripts/effective_ckeditor/config.js.coffee

@@ -1,7 +1,7 @@
 CKEDITOR.editorConfig = (config) ->
   config.startupShowBorders = true
 
-  config.extraPlugins = 'effective_regions,effective_assets'
+  config.extraPlugins = 'effective_regions,effective_assets,effective_menus'
   config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;div'
 
   config.templates = 'effective_regions'

data/app/assets/stylesheets/effective_ckeditor/menu_editor.css.scss

@@ -0,0 +1,64 @@
+.effective-menu.dragging, {
+  cursor: move !important;  // I'm having trouble getting the cursor working
+  li, a, * { cursor: move !important; }
+
+  > .actions {
+    .remove-item { display: inline-block; }
+  }
+}
+
+.effective-menu {
+  position: relative;
+  border: 1px dotted #4195fc; // Match the effective_regions editable border color
+
+  min-width: 30px; // What to do with an empty menu...
+  min-height: 30px;
+
+  li.divider { height: 3px; }
+  .menu-item { display: none; } // under each li, Contains the form controls. Nothing to view here
+
+  // Sub-level placeholder
+  li.placeholder {
+    position: relative;
+
+    &:before {
+      position: absolute;
+      content: "";
+      height: 0px;
+      width: 0px;
+      left: 2px; // Was -5px;
+      top: -4px;
+      margin-top: -5px;
+      border-left: 5px solid red;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      border-right: none;
+    }
+  }
+
+  // Top level placeholder
+  > li.placeholder {
+    &:before {
+      top: 7px;
+
+      margin-top: -6px;
+      border-left: 5px solid transparent;
+      border-top: 5px solid red;
+      border-bottom: none;
+      border-right: 5px solid transparent;
+    }
+  }
+
+  > .actions {
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    top: 0;
+    font-size: 14px;
+
+    .add-item { display: none; }  // Bootstrap3 glyphicon
+    .remove-item { display: none; } // Bootstrap3 glyphicon
+
+    .large { font-size: 20px; }
+  }
+}

data/app/assets/stylesheets/effective_ckeditor.css.scss

@@ -1,2 +1,3 @@
 @import 'effective_ckeditor/layout';
 @import 'effective_ckeditor/overrides';
+@import 'effective_ckeditor/menu_editor';

data/lib/effective_ckeditor/version.rb

@@ -1,3 +1,3 @@
 module EffectiveCkeditor
-  VERSION = '1.0.1'.freeze
+  VERSION = '1.1.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: effective_ckeditor
 version: !ruby/object:Gem::Version
-  version: 1.0.1
+  version: 1.1.0
 platform: ruby
 authors:
 - Code and Effect
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-12-31 00:00:00.000000000 Z
+date: 2015-01-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -51,6 +51,7 @@ files:
 - app/assets/javascripts/ckeditor/plugins/effective_assets/icons/effectiveassets.png
 - app/assets/javascripts/ckeditor/plugins/effective_assets/icons/hidpi/effectiveassets.png
 - app/assets/javascripts/ckeditor/plugins/effective_assets/plugin.js.coffee
+- app/assets/javascripts/ckeditor/plugins/effective_menus/plugin.js.coffee
 - app/assets/javascripts/ckeditor/plugins/effective_regions/icons/exit.png
 - app/assets/javascripts/ckeditor/plugins/effective_regions/icons/hidpi/exit.png
 - app/assets/javascripts/ckeditor/plugins/effective_regions/icons/hidpi/save.png
@@ -176,6 +177,7 @@ files:
 - app/assets/javascripts/vendor/jquery.cookie.js
 - app/assets/stylesheets/effective_ckeditor.css.scss
 - app/assets/stylesheets/effective_ckeditor/layout.css.scss
+- app/assets/stylesheets/effective_ckeditor/menu_editor.css.scss
 - app/assets/stylesheets/effective_ckeditor/overrides.css.scss
 - lib/effective_ckeditor.rb
 - lib/effective_ckeditor/engine.rb