alchemy_cms 3.2.1 → 3.3.0.rc1

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

@@ -3,61 +3,61 @@ window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
 Alchemy.FileProgress = (file) ->
 
     # Build Wrapper
-    @$fileProgressWrapper = $('<div class="progressWrapper"/>')
+    @$fileProgressWrapper = $('<div class="progress-wrapper"/>')
 
     # Build Container
-    @$fileProgressElement = $('<div class="progressContainer"/>')
+    @$fileProgressElement = $('<div class="progress-container"/>')
 
     # Append Cancel Button
-    @$fileProgressCancel = $('<a href="javascript:void(0);" class="progressCancel"/>')
+    @$fileProgressCancel = $('<a href="javascript:void(0);" class="progress-cancel"/>')
     @$fileProgressElement.append @$fileProgressCancel
 
     # Append Filename
-    @$fileProgressElement.append "<div class=\"progressName\">" + file.name + "</div>"
+    @$fileProgressElement.append "<div class=\"progress-name\">" + file.name + "</div>"
 
     # Append Progressbar Status Text
-    @$fileProgressStatus = $('<div class="progressBarStatus">&nbsp;</div>')
+    @$fileProgressStatus = $('<div class="progress-bar-status">&nbsp;</div>')
     @$fileProgressElement.append @$fileProgressStatus
 
     # Build Progressbar Container
-    $progressBarContainer = $('<div class="progressBarContainer"/>')
+    $progressBarContainer = $('<div class="progress-bar-container"/>')
 
     # Build Progressbar
-    @$progressBar = $('<div class="progressBarInProgress"/>')
+    @$progressBar = $('<div class="progress-bar-in-progress"/>')
 
     # Knit all together
     $progressBarContainer.append @$progressBar
     @$fileProgressElement.append $progressBarContainer
     @$fileProgressWrapper.append @$fileProgressElement
-    $('#uploadProgressContainer').append @$fileProgressWrapper
+    $('.upload-progress-container').append @$fileProgressWrapper
     this
 
 Alchemy.FileProgress::reset = ->
   @$fileProgressStatus.html '&nbsp;'
-  @$progressBar.removeClass().addClass 'progressBarInProgress'
+  @$progressBar.removeClass().addClass 'progress-bar-in-progress'
   @$progressBar.css width: '0%'
 
 Alchemy.FileProgress::setProgress = (percentage) ->
-  @$progressBar.removeClass().addClass 'progressBarInProgress'
+  @$progressBar.removeClass().addClass 'progress-bar-in-progress'
   @$progressBar.css width: percentage + '%'
 
 Alchemy.FileProgress::setComplete = ->
-  @$progressBar.removeClass().addClass 'progressBarComplete'
+  @$progressBar.removeClass().addClass 'progress-bar-complete'
   @$progressBar.css width: '100%'
   @$fileProgressCancel.hide()
   @$fileProgressWrapper.delay(1500).fadeOut ->
     $(this).remove()
 
 Alchemy.FileProgress::setError = ->
-  @$progressBar.removeClass().addClass 'progressBarError'
+  @$progressBar.removeClass().addClass 'progress-bar-error'
   @$progressBar.css width: '100%'
 
 Alchemy.FileProgress::setCancelled = ->
-  @$progressBar.removeClass().addClass 'progressBarCanceled'
+  @$progressBar.removeClass().addClass 'progress-bar-canceled'
   @$progressBar.css width: '100%'
   @$fileProgressCancel.hide()
   @$fileProgressWrapper.delay(1500).fadeOut ->
     $(this).remove()
 
 Alchemy.FileProgress::setStatus = (status) ->
-  @$fileProgressStatus.text Alchemy._t(status)
+  @$fileProgressStatus.text Alchemy.t(status)

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

@@ -31,7 +31,7 @@ Alchemy.Hotkeys = (scope) ->
     $(document).on 'keypress', (e) ->
       if !$(e.target).is('input, textarea') && String.fromCharCode(e.which) == '?'
         Alchemy.openDialog '/admin/help',
-          title: Alchemy._t('help')
+          title: Alchemy.t('help')
           size: '400x492'
         false
       else

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

@@ -22,5 +22,5 @@ Alchemy.I18n =
 
 # Global utility method for translating a given string
 #
-Alchemy._t = (key, replacement) ->
+Alchemy.t = (key, replacement) ->
   Alchemy.I18n.translate(key, replacement)

data/app/assets/javascripts/alchemy/alchemy.image_overlay.coffee

@@ -0,0 +1,55 @@
+class window.Alchemy.ImageOverlay extends Alchemy.Dialog
+
+  constructor: (url) ->
+    @options =
+      draggable: false
+    super(url, @options)
+    return
+
+  init: ->
+    Alchemy.ImageLoader(@dialog_body)
+    $('.zoomed-picture-background').click (e) =>
+      e.stopPropagation()
+      return if e.target.nodeName == 'IMG'
+      @close()
+      false
+    $('.picture-overlay-handle').click (e) =>
+      @dialog.toggleClass('hide-form')
+      false
+    @$previous = $('.previous-picture')
+    @$next = $('.next-picture')
+    @$document.keydown (e) =>
+      return true if e.target.nodeName == 'INPUT'
+      switch e.which
+        when 37
+          @previous()
+          false
+        when 39
+          @next()
+          false
+        else
+          true
+    super()
+
+  previous: ->
+    @$previous.click()
+    return
+
+  next: ->
+    @$next.click()
+    return
+
+  build: ->
+    @dialog_container = $('<div class="alchemy-image-overlay-container" />')
+    @dialog = $('<div class="alchemy-image-overlay-dialog" />')
+    @dialog_body = $('<div class="alchemy-image-overlay-body" />')
+    @close_button = $('<a class="alchemy-image-overlay-close">
+      <span class="icon close small"></span>
+    </a>')
+    @dialog.append(@close_button)
+    @dialog.append(@dialog_body)
+    @dialog_container.append(@dialog)
+    @overlay = $('<div class="alchemy-image-overlay" />')
+    @$body.append(@overlay)
+    @$body.append(@dialog_container)
+    @dialog

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

@@ -16,7 +16,7 @@ Alchemy.Initializer = ->
 
   # Add observer for please wait overlay.
   $('a.please_wait, #main_navi a.main_navi_entry, div.button_with_label form :submit, #sub_navigation .subnavi_tab a, .pagination a')
-    .not('*[data-alchemy-confirm], #subnav_additions .subnavi_tab button')
+    .not('*[data-alchemy-confirm], #locked_pages .subnavi_tab button')
     .click ->
       unless Alchemy.isPageDirty()
         Alchemy.pleaseWaitOverlay()
@@ -61,3 +61,10 @@ Turbolinks.enableProgressBar()
 # Turbolinks DOM Ready
 $(document).on 'page:change', ->
   Alchemy.Initializer()
+  return
+
+# Turbolinks before parsing a new page
+$(document).on 'page:receive', ->
+  # Ensure that all tinymce editors get removed before parsing a new page
+  Alchemy.Tinymce.removeFrom $('.has_tinymce')
+  return

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

@@ -20,6 +20,7 @@
 //= require select2_locale_fr
 //= require select2_locale_nl
 //= require select2_locale_ru
+//= require handlebars
 //= require alchemy/alchemy.base
 //= require alchemy/alchemy.autocomplete
 //= require alchemy/alchemy.browser
@@ -37,6 +38,7 @@
 //= require alchemy/alchemy.hotkeys
 //= require alchemy/alchemy.i18n
 //= require alchemy/alchemy.image_cropper
+//= require alchemy/alchemy.image_overlay
 //= require alchemy/alchemy.string_extension
 //= require alchemy/alchemy.link_dialog
 //= require alchemy/alchemy.list_filter
@@ -48,5 +50,5 @@
 //= require alchemy/alchemy.spinner
 //= require alchemy/alchemy.tinymce
 //= require alchemy/alchemy.translations
-//= require alchemy/alchemy.windows
+//= require alchemy/alchemy.trash_window
 //= require alchemy/alchemy.custom

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

@@ -33,21 +33,6 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
 
   # Attaches click events to several buttons in the link dialog.
   attachEvents: ->
-    # The select page and show elements links.
-    $('a.sitemap_pagename_link, a.show_elements_to_link', @dialog_body).click (e) =>
-      $this = $(e.target)
-      page_id = $this.data('page-id')
-      url = $this.data('url')
-      # Select page in page tree
-      @selectPage(page_id)
-      # if the show elements link was clicked
-      if $this.hasClass('show_elements_to_link')
-        # we open the elements select for that page
-        @showElementsSelect($this.attr('href'), url)
-      else
-        # store url
-        @$internal_urlname.val('/' + url)
-      false
     # The ok buttons
     $('.create-link.button', @dialog_body).click (e) =>
       @link_type = $(e.target).data('link-type')
@@ -66,6 +51,27 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
         target: $("##{@link_type}_link_target").val()
       false
 
+  # Attaches click events to buttons in the link dialog that appear after the
+  # page tree has finished loading.
+  attachTreeEvents: ->
+    # The select page and show elements links.
+    $('a.sitemap_pagename_link, a.show_elements_to_link', @dialog_body).click (e) =>
+      $this = $(e.target)
+      page_id = $this.data('page-id')
+      url = $this.data('url')
+      # Select page in page tree
+      @selectPage(page_id)
+      # if the show elements link was clicked
+      if $this.hasClass('show_elements_to_link')
+        # we open the elements select for that page
+        @showElementsSelect($this.attr('href'), url)
+      else
+        # store url
+        @$internal_urlname.val('/' + url)
+      false
+    # Select the current page in the tree
+    @selectInternalLinkTab()
+
   # Sets the page selected and scrolls it in the viewport.
   selectPage: (page_id) ->
     # deselect any selected page from page tree
@@ -92,7 +98,7 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
 
   # Sets the link either in TinyMCE or on an Essence.
   setLink: (url, title, target) ->
-    Alchemy.setElementDirty(@$link_object.parents('.element_editor'))
+    Alchemy.setElementDirty(@$link_object.closest('.element-editor'))
     if @link_object.editor
       @setTinyMCELink(url, title, target)
     else
@@ -124,35 +130,34 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
   selectTab: ->
     # Creating an temporary anchor node if we are linking an EssencePicture or EssenceText.
     if (@link_object.nodeType)
-      $link = @createTempLink()
+      @$link = @createTempLink()
     # Restoring the bookmarked selection inside the TinyMCE of an EssenceRichtext.
     else if (@link_object.node.nodeName == 'A')
-      $link = $(@link_object.node)
+      @$link = $(@link_object.node)
       @link_object.selection.moveToBookmark(@link_object.bookmark)
     else
       return false
     # Populate title and target fields.
-    $('.link_title', @dialog_body).val $link.attr('title')
-    $('.link_target', @dialog_body).select2('val', $link.attr('data-link-target'))
+    $('.link_title', @dialog_body).val @$link.attr('title')
+    $('.link_target', @dialog_body).select2('val', @$link.attr('data-link-target'))
     # Checking of what kind the link is (internal, external or file).
-    if $link.hasClass('external')
+    if @$link.hasClass('external')
       # Handles an external link.
       tab = $('#overlay_tab_external_link')
-      @$external_url.val($link.attr('href'))
-    else if $link.hasClass('file')
+      @$external_url.val(@$link.attr('href'))
+    else if @$link.hasClass('file')
       # Handles a file link.
       tab = $('#overlay_tab_file_link')
-      @$public_filename.select2('val', $link[0].pathname + $link[0].search)
+      @$public_filename.select2('val', @$link[0].pathname + @$link[0].search)
     else
       # Handles an internal link.
       tab = $('#overlay_tab_internal_link')
-      @selectInternalLinkTab($link)
     # activate the tab jquery ui 1.10 style o.O
     @$overlay_tabs.tabs('option', 'active', $('#overlay_tabs > div').index(tab))
 
   # Handles actions for internal link tab.
-  selectInternalLinkTab: ($link) ->
-    url = $link.attr('href').split('#')
+  selectInternalLinkTab: ->
+    url = @$link.attr('href').split('#')
     urlname = url[0]
     anchor = url[1]
     if anchor
@@ -171,7 +176,7 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     if ($sitemap_line.length > 0)
       # Select the line where the link was detected in.
       $sitemap_line.addClass('selected_page')
-      @$page_container.scrollTo($sitemap_line.parents('li'), {duration: 400, offset: -10})
+      @$page_container.scrollTo($sitemap_line.closest('li'), {duration: 400, offset: -10})
 
   # Opens a new Dialog that shows the elements from given page_id in a selectbox.
   # The value is stored as anchor and the url gets updated so it includes the anchor link
@@ -215,7 +220,7 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
 
   # Shows validation errors
   showValidationError: ->
-    $('#errors ul', @dialog_body).html("<li>#{Alchemy._t('url_validation_failed')}</li>")
+    $('#errors ul', @dialog_body).html("<li>#{Alchemy.t('url_validation_failed')}</li>")
     $('#errors', @dialog_body).show()
 
   # Populates the internal anchors select
@@ -227,7 +232,7 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
         if element.id
           @$internal_anchor.append("<option value='#{element.id}'>##{element.id}</option>")
     else
-      @$internal_anchor.html("<option>#{Alchemy._t('No anchors found')}</option>")
+      @$internal_anchor.html("<option>#{Alchemy.t('No anchors found')}</option>")
     @$internal_anchor.change (e) =>
       # deselect any selected page from page tree
       @deselectPage()
@@ -244,7 +249,7 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
     $("#contents_#{content_id}_link_class_name").val('')
     $("#contents_#{content_id}_link_target").val('')
     if $link.hasClass('linked')
-      Alchemy.setElementDirty $(link).parents('.element_editor')
+      Alchemy.setElementDirty $(link).closest('.element-editor')
       $link.removeClass('linked').addClass('disabled')
     $('#edit_link_' + content_id).removeClass('linked')
     false

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

@@ -11,6 +11,7 @@ Alchemy.initAlchemyPreviewMode = ($) ->
 
   # The Alchemy JavaScript Object contains all Functions
   $.extend Alchemy,
+
     ElementSelector:
 
       # defaults
@@ -21,25 +22,19 @@ Alchemy.initAlchemyPreviewMode = ($) ->
           outline: ""
           "outline-offset": ""
           "-moz-outline-radius": ""
-
         default_hover:
           outline: "3px solid #F0B437"
           "outline-offset": "4px"
           cursor: "pointer"
-
         webkit_hover:
           outline: "4px auto #F0B437"
-
         moz_hover:
           "-moz-outline-radius": "3px"
-
         default_selected:
           outline: "3px solid #90B9D0"
           "outline-offset": "4px"
-
         webkit_selected:
           outline: "4px auto #90B9D0"
-
         moz_selected:
           "-moz-outline-radius": "3px"
 
@@ -48,42 +43,53 @@ Alchemy.initAlchemyPreviewMode = ($) ->
         @$previewElements = $elements
         $elements.mouseover (e) =>
           $el = $(e.delegateTarget)
-          $el.attr("title", Alchemy._t('click_to_edit'))
+          $el.attr("title", Alchemy.t('click_to_edit'))
           $el.css(@getStyle("hover")) unless $el.hasClass("selected")
+          return
         $elements.mouseout (e) =>
           $el = $(e.delegateTarget)
           $el.removeAttr("title")
           $el.css(@getStyle("reset")) unless $el.hasClass("selected")
-        $elements.on "Alchemy.SelectElement", (e) =>
-          @selectElement(e)
+          return
+        $elements.on "SelectPreviewElement.Alchemy", (e) =>
+          $el = $(e.delegateTarget)
+          # Stop the event from bubbling up to parent elements
+          e.stopPropagation()
+          @selectElement($el)
+          return
         $elements.click (e) =>
-          @clickElement(e)
+          $el = $(e.delegateTarget)
+          # Stop the event from bubbling up to parent elements
+          e.stopPropagation()
+          # Stop default click events from running
+          e.preventDefault()
+          # Mark current preview element as selected
+          @selectElement($el)
+          # Focus the element editor
+          @focusElementEditor($el)
+          return
+        return
 
-      selectElement: (e) ->
-        $el = $(e.delegateTarget)
-        $elements = @$previewElements
-        offset = @scrollOffset
-        el_offset = $el.offset()
-        e.preventDefault()
-        $elements.removeClass("selected").css(@getStyle("reset"))
+      # Mark element in preview frame as selected and scrolls to it.
+      selectElement: ($el) ->
+        offset = $el.offset()
+        @$previewElements.removeClass("selected").css(@getStyle("reset"))
         $el.addClass("selected").css(@getStyle("selected"))
         $("html, body").animate
-          scrollTop: el_offset.top - offset
-          scrollLeft: el_offset.left - offset
+          scrollTop: offset.top - @scrollOffset
+          scrollLeft: offset.left - @scrollOffset
         , 400
         return
 
-      clickElement: (e) ->
-        $el = $(e.delegateTarget)
-        parent$ = window.parent.jQuery
+      # Focus the element editor in the Alchemy element window.
+      focusElementEditor: ($el) ->
+        alchemy_window = window.parent
+        alchemy_$ = alchemy_window.jQuery
         target_id = $el.data("alchemy-element")
-        $element_editor = parent$("#element_area .element_editor").closest("[id=\"element_" + target_id + "\"]")
-        elementsWindow = window.parent.Alchemy.ElementsWindow
-        e.preventDefault()
-        $element_editor.trigger("Alchemy.SelectElementEditor", target_id)
-        if elementsWindow.hidden
-          elementsWindow.show()
-        $el.trigger("Alchemy.SelectElement")
+        $element_editor = alchemy_$("#element_#{target_id}")
+        elements_window = alchemy_window.Alchemy.ElementsWindow
+        $element_editor.trigger("FocusElementEditor.Alchemy", target_id)
+        elements_window.show() if elements_window.hidden
         return
 
       getStyle: (state) ->

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

@@ -4,12 +4,58 @@ window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
 Alchemy.Sitemap =
 
   # Storing some objects.
-  init: ->
+  init: (options) ->
     @search_field = $("#search_field")
     @filter_field_clear = $('.js_filter_field_clear')
     @display = $('#page_filter_result')
-    @items = $(".sitemap_page", '#sitemap')
-    @_observe()
+    @sitemap_wrapper = $('#sitemap-wrapper p.loading')
+    @template = Handlebars.compile($('#sitemap-template').html())
+    list_template_regexp = new RegExp '\/' + options.page_root_id, 'g'
+    list_template_html = $('#sitemap-list').html().replace(list_template_regexp, '/{{id}}')
+    @list_template = Handlebars.compile(list_template_html)
+    @items = null
+    @options = options
+
+    Handlebars.registerPartial('list', list_template_html)
+
+    @fetch()
+
+  # Fetches the sitemap from JSON
+  fetch: (foldingId) ->
+    self = Alchemy.Sitemap
+
+    if foldingId
+      spinner = Alchemy.Spinner.small()
+      spinTarget = $('#fold_button_' + foldingId)
+      renderTarget = $('#page_' + foldingId)
+      renderTemplate = @list_template
+      pageId = foldingId
+    else
+      spinner = @options.spinner || Alchemy.Spinner.medium()
+      spinTarget = @sitemap_wrapper
+      renderTarget = @sitemap_wrapper
+      renderTemplate = @template
+      pageId = @options.page_root_id
+
+    spinner.spin(spinTarget[0])
+
+    request = $.ajax url: @options.url, data:
+      id: pageId
+      full: @options.full
+
+    request.done (data) ->
+      # This will also remove the spinner
+      renderTarget.replaceWith(renderTemplate({children: data.pages}))
+      self.items = $(".sitemap_page", '#sitemap')
+      self._observe()
+
+      Alchemy.watchForDialogs('#sitemap')
+
+      if self.options.ready
+        self.options.ready()
+
+    request.fail (jqXHR, status) ->
+      Alchemy.debug("Request failed: " + status)
 
   # Filters the sitemap
   filter: (term) ->
@@ -27,10 +73,10 @@ Alchemy.Sitemap =
     self.filter_field_clear.show()
     length = results.length
     if length == 1
-      self.display.show().text("1 #{Alchemy._t('page_found')}")
+      self.display.show().text("1 #{Alchemy.t('page_found')}")
       $.scrollTo(results[0], {duration: 400, offset: -80})
     else if length > 1
-      self.display.show().text("#{length} #{Alchemy._t('pages_found')}")
+      self.display.show().text("#{length} #{Alchemy.t('pages_found')}")
     else
       self.items.removeClass('no-match highlight')
       self.display.hide()