alchemy_cms 3.2.1 → 3.3.0.rc1

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

@@ -58,22 +58,23 @@ $.extend Alchemy,
           spinner.stop()
           $parent.html('<span class="icon warn"/>')
 
+  # Removes the picture from essence picture thumbnail
   removePicture: (selector) ->
     $form_field = $(selector)
-    $element = $form_field.parents(".element_editor")
+    $element = $form_field.closest(".element-editor")
     if $form_field
       $form_field.val ""
       $form_field.prev().remove()
       $form_field.parent().addClass "missing"
       Alchemy.setElementDirty $element
-    return
+    false
 
   # Sets the element to saved state
   setElementSaved: (selector) ->
     $element = $(selector)
     Alchemy.setElementClean selector
     Alchemy.Buttons.enable $element
-    return true
+    true
 
   # Initializes all select tag with .alchemy_selectbox class as selectBoxIt instance
   # Pass a jQuery scope to only init a subset of selectboxes.
@@ -118,6 +119,12 @@ $.extend Alchemy,
       console.trace()
     return
 
+  # Logs errors to js console, if present.
+  log_error: (e) ->
+    if window["console"]
+      console.error e
+    return
+
   getUrlParam: (name) ->
     results = new RegExp("[\\?&]" + name + "=([^&#]*)").exec(window.location.href)
     results[1] or 0  if results

data/app/assets/javascripts/alchemy/alchemy.buttons.js.coffee

@@ -4,13 +4,19 @@ Alchemy.Buttons =
 
   observe: (scope) ->
     $('form', scope).not('.button_with_label form').on 'submit', (event) ->
-      $btn = $(this).find(':submit')
-      if $btn.attr('disabled') == 'disabled'
+      $form = $(this)
+      $btn = $form.find(':submit')
+      $outside_button = $('[data-alchemy-button][form="'+$form.attr('id')+'"]')
+
+      if ($btn.attr('disabled') == 'disabled') || ($outside_button.attr('disabled') == 'disabled')
         event.preventDefault()
         event.stopPropagation()
         false
       else
         Alchemy.Buttons.disable($btn)
+        if $outside_button
+          Alchemy.Buttons.disable($outside_button)
+        true
 
   disable: (button) ->
     $button = $(button)
@@ -25,8 +31,11 @@ Alchemy.Buttons =
     return true
 
   enable: (scope) ->
-    $button = $('form :submit:disabled', scope)
-    $button.removeClass('disabled')
-    $button.removeAttr('disabled')
-    $button.html($button.data('content'))
+    $buttons = $('form :submit:disabled, [data-alchemy-button].disabled', scope)
+    $.each $buttons, ->
+      $button = $(this)
+      $button.removeClass('disabled')
+      $button.removeAttr('disabled')
+      $button.css("width", "")
+      $button.html($button.data('content'))
     return true

data/app/assets/javascripts/alchemy/alchemy.char_counter.js.coffee

@@ -3,7 +3,7 @@ class window.Alchemy.CharCounter
   constructor: (field) ->
     @$field = $(field)
     @max_chars = @$field.data('alchemy-char-counter')
-    @text = Alchemy._t('allowed_chars', @max_chars)
+    @text = Alchemy.t('allowed_chars', @max_chars)
     @$display = $('<small class="alchemy-char-counter"/>')
     @$field.after(@$display)
     countChars.call(this)

data/app/assets/javascripts/alchemy/alchemy.datepicker.js.coffee

@@ -12,7 +12,7 @@ $.extend Alchemy,
       showButtonPanel: true
       showOtherMonths: true
       onSelect: ->
-        Alchemy.setElementDirty $(this).parents("div.element_editor")
+        Alchemy.setElementDirty $(this).closest(".element-editor")
 
     if Alchemy.locale is "de"
       $.extend datepicker_options,

data/app/assets/javascripts/alchemy/alchemy.dialog.js.coffee

@@ -9,6 +9,7 @@ class window.Alchemy.Dialog
     title: ''
     modal: true
     overflow: 'visible'
+    draggable: true
     ready: ->
     closed: ->
 
@@ -34,10 +35,11 @@ class window.Alchemy.Dialog
     window.requestAnimationFrame =>
       @dialog_container.addClass('open')
       @overlay.addClass('open') if @overlay?
-    @dialog.draggable
-      iframeFix: true
-      handle: '.alchemy-dialog-title'
-      containment: 'parent'
+    if @options.draggable
+      @dialog.draggable
+        iframeFix: true
+        handle: '.alchemy-dialog-title'
+        containment: 'parent'
     @$body.addClass('prevent-scrolling')
     Alchemy.currentDialogs.push(this)
     @load()
@@ -50,6 +52,7 @@ class window.Alchemy.Dialog
     @overlay.removeClass('open') if @overlay?
     @$document.on 'webkitTransitionEnd transitionend oTransitionEnd', =>
       @$document.off 'webkitTransitionEnd transitionend oTransitionEnd'
+      Alchemy.Tinymce.removeFrom $('.tinymce', @dialog_body)
       @dialog_container.remove()
       @overlay.remove() if @overlay?
       @$body.removeClass('prevent-scrolling')
@@ -95,6 +98,9 @@ class window.Alchemy.Dialog
   # Initializes the Dialog body
   init: ->
     Alchemy.GUI.init(@dialog_body)
+    Alchemy.Tinymce.initWith
+      selector: ".alchemy-dialog-body textarea.tinymce",
+      width: '65%'
     $('#overlay_tabs', @dialog_body).tabs()
     @watch_remote_forms()
 

data/app/assets/javascripts/alchemy/alchemy.dirty.js.coffee

@@ -3,39 +3,33 @@ window.Alchemy = {} if typeof (window.Alchemy) is "undefined"
 $.extend Alchemy,
 
   ElementDirtyObserver: (selector) ->
-    $elements = $(selector)
-    $elements.find('input[type="text"], select').change ->
-      $this = $(this)
-      $this.addClass('dirty')
-      Alchemy.setElementDirty $this.parents(".element_editor")
-    $elements.find('.element_foot input[type="checkbox"]').click ->
-      $this = $(this)
-      $this.addClass "dirty"
-      Alchemy.setElementDirty $this.parents(".element_editor")
+    $(selector).find('input[type="text"], select').change (e) =>
+      $content = $(e.target)
+      $content.addClass('dirty')
+      @setElementDirty $content.closest(".element-editor")
+      return
 
   setElementDirty: (element) ->
     $element = $(element)
+    $element.addClass('dirty')
     $element
-      .addClass('dirty')
-      .find('.element_head .icon[class*="element_"]')
+      .find('> .element-header .icon[class*="element_"]')
       .addClass('element_dirty')
     window.onbeforeunload = @pageUnload
 
   pageUnload: ->
     Alchemy.pleaseWaitOverlay(false)
-    Alchemy._t('page_dirty_notice')
+    Alchemy.t('page_dirty_notice')
 
   setElementClean: (element) ->
     $element = $(element)
-    $element
-      .removeClass('dirty')
-      .find('.element_foot input[type="checkbox"], input[type="text"], select')
-      .removeClass('dirty')
-    $element.find('.element_head .icon').removeClass('element_dirty')
+    $element.removeClass('dirty')
+    $element.find('> .element-header .icon').removeClass('element_dirty')
+    $element.find('> .element-content .dirty').removeClass('dirty')
     window.onbeforeunload = undefined
 
   isPageDirty: ->
-    $('#element_area').find('.element_editor.dirty').length > 0
+    $('#element_area').find('.element-editor.dirty').length > 0
 
   isElementDirty: (element) ->
     $(element).hasClass('dirty')
@@ -52,10 +46,10 @@ $.extend Alchemy,
       callback = ->
         window.location.href = element.pathname
     if Alchemy.isPageDirty()
-      Alchemy.openConfirmDialog Alchemy._t('page_dirty_notice'),
-        title: Alchemy._t('warning')
-        ok_label: Alchemy._t('ok')
-        cancel_label: Alchemy._t('cancel')
+      Alchemy.openConfirmDialog Alchemy.t('page_dirty_notice'),
+        title: Alchemy.t('warning')
+        ok_label: Alchemy.t('ok')
+        cancel_label: Alchemy.t('cancel')
         on_ok: ->
           window.onbeforeunload = undefined
           Alchemy.pleaseWaitOverlay()

data/app/assets/javascripts/alchemy/alchemy.dragndrop.js.coffee

@@ -6,46 +6,76 @@ window.Alchemy = {} if typeof (window.Alchemy) is "undefined"
 $.extend Alchemy,
 
   SortableElements: (page_id, form_token, selector = '#element_area .sortable_cell') ->
+    Alchemy.initializedSortableElements = false
+    $sortable_area = $(selector)
 
     getTinymceIDs = (ui) ->
       ids = []
-      $textareas = ui.item.find('textarea.default_tinymce, textarea.custom_tinymce')
+      $textareas = ui.item.find('textarea.has_tinymce')
       $($textareas).each ->
         id = this.id.replace(/tinymce_/, '')
         ids.push parseInt(id, 10)
       return ids
 
-    $(selector).sortable
-      items: "div.element_editor"
-      handle: ".element_handle"
-      axis: "y"
+    sortable_options =
+      items: "> .element-editor"
+      handle: "> .element-header .element-handle"
       placeholder: "droppable_element_placeholder"
-      forcePlaceholderSize: true
       dropOnEmpty: true
       opacity: 0.5
       cursor: "move"
-      tolerance: "pointer"
+      containment: $('#element_area')
+      tolerance: "intersect"
       update: (event, ui) ->
-        ids = $.map $(this).children(), (child) ->
-          $(child).attr "data-element-id"
-        params_string = ""
-        cell_id = $(this).attr("data-cell-id")
-        $(event.target).css "cursor", "progress"
-        params_string = "page_id=" + page_id + "&authenticity_token=" + encodeURIComponent(form_token) + "&" + $.param(element_ids: ids)
-        params_string += "&cell_id=" + cell_id  if cell_id
+        # This callback is called twice for both elements, the source and the receiving
+        # but, we only want to call ajax callback once on the receiving element.
+        return if Alchemy.initializedSortableElements
+        $this = ui.item.parent().closest('.ui-sortable')
+        params = {}
+        Alchemy.initializedSortableElements = true
+        element_ids = $.map $this.children(), (child) ->
+          $(child).attr("data-element-id")
+        cell_id = $this.data("cell-id")
+        parent_element_id = ui.item.parent().closest("[data-element-id]").data('element-id')
+        params =
+          page_id: page_id
+          authenticity_token: encodeURIComponent(form_token)
+          element_ids: element_ids
+        if cell_id?
+          params['cell_id'] = cell_id
+        if parent_element_id?
+          params['parent_element_id'] = parent_element_id
+        $(event.target).css("cursor", "progress")
         $.ajax
           url: Alchemy.routes.order_admin_elements_path
           type: "POST"
-          data: params_string
+          data: params
           complete: ->
-            $(event.target).css "cursor", "auto"
-            Alchemy.TrashWindow.refresh page_id
-
+            Alchemy.initializedSortableElements = false
+            $(event.target).css("cursor", "")
+            Alchemy.TrashWindow.refresh(page_id)
+            return
       start: (event, ui) ->
-        Alchemy.Tinymce.remove getTinymceIDs(ui)
-
+        $this = $(this)
+        name = ui.item.data('element-name')
+        $dropzone = $("[data-droppable-elements~='#{name}']")
+        ids = getTinymceIDs(ui)
+        $this.sortable('option', 'connectWith', $dropzone)
+        $this.sortable('refresh')
+        $dropzone.css('minHeight', 36)
+        Alchemy.Tinymce.remove(ids)
+        return
       stop: (event, ui) ->
-        Alchemy.Tinymce.init getTinymceIDs(ui)
+        ids = getTinymceIDs(ui)
+        name = ui.item.data('element-name')
+        $dropzone = $("[data-droppable-elements~='#{name}']")
+        $dropzone.css('minHeight', '')
+        Alchemy.Tinymce.init(ids)
+        return
+
+    $sortable_area.sortable(sortable_options)
+    $sortable_area.find('.nested-elements').sortable(sortable_options)
+    return
 
   SortableContents: (selector, token) ->
     $(selector).sortable
@@ -66,19 +96,26 @@ $.extend Alchemy,
           complete: ->
             $(event.originalTarget).css "cursor", "move"
 
-  DraggableTrashItems: (items_n_cells) ->
+  DraggableTrashItems: ->
     $("#trash_items div.draggable").each ->
-      cell_classes = ""
-      cell_names = items_n_cells[@id]
-      $.each cell_names, (i) ->
-        cell_classes += "." + this + "_cell" + ", "
-      $(this).draggable
+      $this = $(this)
+      name = $this.data('element-name')
+      $dropzone = $("[data-droppable-elements~='#{name}']")
+      $this.draggable
         helper: "clone"
         iframeFix: "iframe#alchemy_preview_window"
-        connectToSortable: cell_classes.replace(/,.$/, "")
+        connectToSortable: $dropzone
+        revert: "invalid"
+        revertDuration: 200
         start: (event, ui) ->
-          $(this).hide().addClass("dragged")
-          ui.helper.css("width", "300px")
+          $dropzone.css('minHeight', 36)
+          $(this).addClass "dragged"
+          ui.helper.css('width', 345)
+          return
         stop: (event, ui) ->
-          $(this).show().removeClass("dragged")
-          ui.helper.css("width", "")
+          $(this).removeClass "dragged"
+          $dropzone.css('minHeight', '')
+          ui.helper.css('width', '')
+          return
+      return
+    return

data/app/assets/javascripts/alchemy/alchemy.element_editors.js.coffee

@@ -13,78 +13,98 @@ Alchemy.ElementEditors =
   # Calles once per page load.
   #
   init: ->
-    $elements = $("#element_area .element_editor")
-    self = Alchemy.ElementEditors
-    self.reinit $elements
+    @element_area = $("#element_area")
+    # Binds the custom FocusElementEditor event
+    @element_area.on "FocusElementEditor.Alchemy", '.element-editor', (e) =>
+      @onFocusElement(e)
+    @bindClickEvents()
+    return
 
-  # Binds events to all given element editors.
-  #
-  # Called after replacing element editors via ajax.
-  #
-  reinit: (elements) ->
-    self = Alchemy.ElementEditors
-    $elements = $(elements)
-    $elements.each ->
-      self.bindEvent this
-    $elements.find(".element_head").click self.onClickElement
-    $elements.find(".element_head").dblclick ->
-      id = $(this).parent().attr("id").replace(/\D/g, "")
-      self.toggle id
-    Alchemy.ElementEditors.observeToggler($elements)
-    Alchemy.ElementEditors.missingContentsObserver($elements)
-
-  # Click event handler.
-  #
-  # Also triggers custom 'Alchemy.SelectElement' event on target element in preview frame.
-  #
-  onClickElement: (e) ->
-    self = Alchemy.ElementEditors
-    $element = $(this).parent(".element_editor")
-    id = $element.attr("id").replace(/\D/g, "")
-    e.preventDefault()
-    $("#element_area .element_editor").removeClass "selected"
-    $element.addClass "selected"
-    self.scrollToElement this
-    self.selectElementInPreview id
+  # Binds click events on several DOM elements from element editors
+  # Uses event delegation, so it is not necessary to rebind these events.
+  bindClickEvents: ->
+    @element_area.on "click", ".element-header", (e) =>
+      @onClickElement(e)
+    @element_area.on "dblclick", ".element-header", (e) =>
+      @onDoubleClickElement(e)
+    @element_area.on "click", "[data-element-toggle]", (e) =>
+      @onClickToggle(e)
+    @element_area.on "click", '[data-create-missing-content]', (e) =>
+      @onClickMissingContent(e)
+    return
 
   # Selects and scrolls to element with given id in the preview window.
   #
-  selectElementInPreview: (id) ->
-    $frame_elements = document.getElementById("alchemy_preview_window").contentWindow.jQuery("[data-alchemy-element]")
-    $selected_element = $frame_elements.closest("[data-alchemy-element='#{id}']")
-    $selected_element.trigger "Alchemy.SelectElement"
-
-  # Binds the custom 'Alchemy.SelectElementEditor' event.
-  #
-  # Triggered, if an element gets selected inside the preview iframe.
-  #
-  bindEvent: (element) ->
-    self = Alchemy.ElementEditors
-    $(element).bind "Alchemy.SelectElementEditor", self.selectElement
+  selectElementInPreview: (element_id) ->
+    $frame_elements = document
+                        .getElementById("alchemy_preview_window")
+                        .contentWindow
+                        .jQuery("[data-alchemy-element]")
+    $selected_element = $frame_elements.closest("[data-alchemy-element='#{element_id}']")
+    $selected_element.trigger("SelectPreviewElement.Alchemy")
+    return
 
-  # Selects an element in the element window.
-  #
-  # Expands the element, if necessary.
+  # Selects element
+  # Scrolls to element
+  # Unfold if folded
   # Also chooses the right cell, if necessary.
-  # Can be triggered through custom event 'Alchemy.SelectElementEditor'
+  # Can be triggered through custom event 'FocusElementEditor.Alchemy'
   # Used by the elements on click events in the preview frame.
-  #
-  selectElement: (e) ->
-    self = Alchemy.ElementEditors
-    id = @id.replace(/\D/g, "")
-    $element = $(this)
-    $elements = $("#element_area .element_editor")
+  focusElement: ($element) ->
+    element_id = $element.attr('id').replace(/\D/g, "")
+    @selectCellForElement($element)
+    # If we have folded parents we need to unfold each of them
+    # and then finally scroll to or unfold ourself
+    $folded_parents = $element.parents('.element-editor.folded')
+    @selectElement($element)
+    if $folded_parents.length > 0
+      @unfoldParents $folded_parents, =>
+        @scrollToOrUnfold(element_id)
+        return
+    else
+      @scrollToOrUnfold(element_id)
+    return
+
+  # Select cell for given element
+  selectCellForElement: ($element) ->
     $cells = $("#cells .sortable_cell")
-    e.preventDefault()
-    $elements.removeClass "selected"
-    $element.addClass "selected"
     if $cells.size() > 0
       $cell = $element.parent(".sortable_cell")
-      $("#cells").tabs "option", "active", $cells.index($cell)
-    if $element.hasClass("folded")
-      self.toggleFold id
-    else
-      self.scrollToElement this
+      $("#cells").tabs("option", "active", $cells.index($cell))
+
+  # Marks an element as selected in the element window and scrolls to it.
+  #
+  selectElement: ($element) ->
+    $elements = $("#element_area .element-editor")
+    $elements.removeClass("selected")
+    $element.addClass("selected")
+    @scrollToElement($element)
+    return
+
+  # Unfolds given parents until the last one is reached, then calls callback
+  unfoldParents: ($folded_parents, callback) ->
+    last_parent = $folded_parents[$folded_parents.length - 1]
+    $folded_parents.each (_index, parent_element) =>
+      parent_id = parent_element.id.replace(/\D/g, "")
+      if last_parent == parent_element
+        @scrollToOrUnfold(parent_id, callback)
+      else
+        @scrollToOrUnfold(parent_id)
+      return
+    return
+
+  # Scrolls to element with given id
+  #
+  # If it's folded it unfolds it.
+  #
+  # Also takes an optional callback that gets triggered after element is unfolded.
+  #
+  scrollToOrUnfold: (element_id, callback) ->
+    $el = $("#element_#{element_id}")
+    @selectElement($el)
+    if $el.hasClass("folded")
+      @toggleFold(element_id, callback)
+    return
 
   # Scrolls the element window to given element editor dom element.
   #
@@ -100,39 +120,83 @@ Alchemy.ElementEditors =
   toggle: (id, text) ->
     el = $("#element_#{id}")
     if Alchemy.isElementDirty(el)
-      Alchemy.openConfirmDialog Alchemy._t('element_dirty_notice'),
-        title: Alchemy._t('warning')
-        ok_label: Alchemy._t('ok')
-        cancel_label: Alchemy._t('cancel')
+      Alchemy.openConfirmDialog Alchemy.t('element_dirty_notice'),
+        title: Alchemy.t('warning')
+        ok_label: Alchemy.t('ok')
+        cancel_label: Alchemy.t('cancel')
         on_ok: =>
-          @toggleFold id
+          @toggleFold(id)
       false
     else
-      @toggleFold id
+      @toggleFold(id)
 
   # Folds or expands the element editor with the given id.
   #
-  toggleFold: (id) ->
+  toggleFold: (id, callback) ->
+    $el = $("#element_#{id}")
     spinner = Alchemy.Spinner.small()
-    element = $('.ajax_folder', "#element_#{id}")
+    $toggler = $('> .element-header .ajax-folder', $el)
     $("#element_#{id}_folder").hide()
-    element.prepend spinner.spin().el
+    $toggler.prepend(spinner.spin().el)
     $.post Alchemy.routes.fold_admin_element_path(id), =>
       $("#element_#{id}_folder").show()
       spinner.stop()
-      @scrollToElement "#element_#{id}"
+      if callback?
+        callback.call()
+      return
+
+  # Event handlers
+
+  # Click event handler for element head.
+  #
+  # - Focuses the element
+  # - Triggers custom 'SelectPreviewElement.Alchemy' event on target element in preview frame.
+  #
+  onClickElement: (e) ->
+    $element = $(e.target).closest(".element-editor")
+    element_id = $element.attr("id").replace(/\D/g, "")
+    $("#element_area .element-editor").removeClass("selected")
+    $element.addClass("selected")
+    @selectElement($element)
+    @selectElementInPreview(element_id)
+    e.preventDefault()
+    e.stopPropagation()
+    false
 
-  observeToggler: (scope) ->
-    $('[data-element-toggle]', scope).click ->
-      Alchemy.ElementEditors.toggle $(this).data('element-toggle')
+  # Double click event handler for element head.
+  onDoubleClickElement: (e) ->
+    id = $(e.target).closest('.element-editor').attr('id').replace(/\D/g, '')
+    @toggle(id)
+    e.preventDefault()
+    e.stopPropagation()
+    false
 
-  # Handles the missing content links.
+  # Click event handler for element toggle icon.
+  onClickToggle: (e) ->
+    id = $(e.target).data('element-toggle')
+    @toggle(id)
+    e.preventDefault()
+    e.stopPropagation()
+    false
+
+  # Handles the custom 'FocusElementEditor.Alchemy' event.
+  #
+  # Triggered, if a user clicks on an element inside the preview iframe.
+  #
+  onFocusElement: (e) ->
+    $element = $(e.target)
+    @focusElement($element)
+    e.stopPropagation()
+    false
+
+  # Handles the missing content button click events.
+  #
   # Ensures that the links query string is converted into post body and send
   # the request via a real ajax post to server, to allow long query strings.
-  missingContentsObserver: (scope) ->
-    $('[data-create-missing-content]', scope).click ->
-      $link = $(this)
-      url = this.pathname
-      querystring = this.search.replace(/\?/, '')
-      $.post url, querystring
-      return false
+  #
+  onClickMissingContent: (e) ->
+    link = e.target
+    url = link.pathname
+    querystring = link.search.replace(/\?/, '')
+    $.post(url, querystring)
+    false