alchemy_cms 2.5.3.1 → 2.6.0.rc5

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

@@ -1,5 +1,18 @@
 window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
 
+
+# Adds buttons into a toolbar inside of overlay windows
+Alchemy.ToolbarButton = (options) ->
+  $btn = $('<div class="button_with_label" />')
+  if options.buttonId
+    $btn.attr(id: options.buttonId)
+  $lnk = $("<a title='#{options.buttonTitle}' class='icon_button' href='#' />")
+  $lnk.click options.onClick
+  $lnk.append "<span class='icon #{options.iconClass}' />"
+  $btn.append $lnk
+  $btn.append "<br><label>#{options.buttonLabel}</label>"
+  $btn
+
 Alchemy.ElementsWindow =
 
   init: (path, options, callback) ->
@@ -9,13 +22,12 @@ Alchemy.ElementsWindow =
       $dialog.dialog "destroy"
       $("#alchemyElementWindow").remove()
       Alchemy.ElementsWindow.button.enable()
-
     self.path = path
     self.callback = callback
-    $dialog.html Alchemy.getOverlaySpinner(x: 420, y: 300)
+    $dialog.html Alchemy.getOverlaySpinner(width: 420, height: 300)
     self.dialog = $dialog
     $('#main_content').append($dialog)
-    Alchemy.ElementsWindow.currentWindow = $dialog.dialog(
+    self.currentWindow = $dialog.dialog
       modal: false
       minWidth: 420
       minHeight: 300
@@ -26,13 +38,12 @@ Alchemy.ElementsWindow =
       position:
         my: "right bottom", at: "right-4px bottom-4px"
       closeOnEscape: false
+      dialogClass: 'alchemy-elements-window'
       create: ->
         $dialog.before Alchemy.ElementsWindow.createToolbar(options.toolbarButtons)
-
       open: (event, ui) ->
         Alchemy.ElementsWindow.button.disable()
-        Alchemy.ElementsWindow.reload callback
-
+        Alchemy.ElementsWindow.reload()
       beforeClose: ->
         if Alchemy.isPageDirty()
           Alchemy.openConfirmWindow
@@ -41,21 +52,16 @@ Alchemy.ElementsWindow =
             okLabel: options.texts.okLabel
             cancelLabel: options.texts.cancelLabel
             okCallback: closeCallback
-
           false
         else
           true
-
       close: closeCallback
-    )
 
   button:
     enable: ->
       $("div#show_element_window").removeClass("disabled").find("a").removeAttr "tabindex"
-
     disable: ->
       $("div#show_element_window").addClass("disabled").find("a").attr "tabindex", "-1"
-
     toggle: ->
       if $("div#show_element_window").hasClass("disabled")
         Alchemy.ElementsWindow.button.enable()
@@ -63,19 +69,14 @@ Alchemy.ElementsWindow =
         Alchemy.ElementsWindow.button.disable()
 
   createToolbar: (buttons) ->
-    $toolbar = $("<div id=\"overlay_toolbar\"></div>")
-    btn = undefined
-    i = 0
-    while i < buttons.length
-      btn = buttons[i]
-      $toolbar.append Alchemy.ToolbarButton(
+    $toolbar = $('<div id="overlay_toolbar"/>')
+    for btn in buttons
+      $toolbar.append Alchemy.ToolbarButton
         buttonTitle: btn.title
         buttonLabel: btn.label
         iconClass: btn.iconClass
         onClick: btn.onClick
         buttonId: btn.buttonId
-      )
-      i++
     $toolbar
 
   reload: ->
@@ -84,10 +85,8 @@ Alchemy.ElementsWindow =
       url: self.path
       success: (data, textStatus, XMLHttpRequest) ->
         self.dialog.html data
-        Alchemy.Buttons.observe "#alchemyElementWindow"
-        Alchemy.overlayObserver "#alchemyElementWindow"
-        Alchemy.Datepicker "#alchemyElementWindow input.date, #alchemyElementWindow input[type=\"date\"]"
-        self.callback.call()  if self.callback
-
+        Alchemy.GUI.init "#alchemyElementWindow"
+        if self.callback
+          self.callback.call()
       error: (XMLHttpRequest, textStatus, errorThrown) ->
         Alchemy.AjaxErrorHandler $dialog, XMLHttpRequest.status, textStatus, errorThrown

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

@@ -0,0 +1,27 @@
+window.Alchemy = {} if typeof (window.Alchemy) is "undefined"
+
+Alchemy.Growler =
+
+  build: (message, flash_type) ->
+    $flash_container = $("<div class=\"flash #{flash_type}\" />")
+    icon_class = (if flash_type is "notice" then "tick" else flash_type)
+    $flash_container.append "<span class=\"icon #{icon_class}\" />"
+    $flash_container.append message
+    $("#flash_notices").append $flash_container
+    $("#flash_notices").show()
+    Alchemy.Growler.fade()
+
+  fade: ->
+    $(".flash.notice, .flash.warn, .flash.alert", "#flash_notices").delay(5000).hide "drop",
+      direction: "up"
+    , 400, ->
+      $(this).remove()
+
+    $(".flash.error", "#flash_notices").click ->
+      $(this).hide "drop",
+        direction: "up"
+      , 400, ->
+        $(this).remove()
+
+Alchemy.growl = (message, style = "notice") ->
+  Alchemy.Growler.build message, style

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

@@ -1,15 +1,18 @@
 window.Alchemy = {} if window.Alchemy == undefined
 
+# Alchemy GUI initializers
 Alchemy.GUI =
 
-  init: ->
-    Alchemy.SelectBox()
-    Alchemy.Datepicker()
-    Alchemy.Buttons.observe()
+  # Initializes all Alchemy GUI elements in given scope
+  init: (scope) ->
+    Alchemy.SelectBox(scope)
+    Alchemy.Datepicker(scope)
+    Alchemy.Buttons.observe(scope)
+    Alchemy.overlayObserver(scope)
+    Alchemy.Hotkeys(scope)
+    Alchemy.ListFilter(scope)
 
   initElement: ($el) ->
     Alchemy.ElementDirtyObserver($el)
-    Alchemy.SelectBox($el)
-    Alchemy.Buttons.observe($el)
-    Alchemy.Datepicker('input[type="date"]', $el)
-    Alchemy.overlayObserver($el)
+    Alchemy.GUI.init($el)
+    Alchemy.ImageLoader($el);

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

@@ -0,0 +1,32 @@
+window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
+
+# Handles Alchemy hotkeys
+#
+Alchemy.Hotkeys = (scope) ->
+  $search_fields = $('#search_field, #search_input_field', scope)
+  $search_fields_clear = $('.search_field_clear, .js_filter_field_clear', scope)
+
+  # Binds keyboard shortcuts to searchfields
+  keymage 'alt-f',
+    ->
+      $search_fields.focus()
+      keymage.setScope('search')
+    ,
+    preventDefault: true
+  keymage 'search', 'esc', ->
+    $search_fields_clear.click()
+    $search_fields.blur()
+
+  # Binds click events to hotkeys
+  #
+  # Simply add a data-alchemy-hotkey attribute to your link.
+  # If a hotkey is triggered by user, the click event of the element gets triggerd.
+  #
+  $('[data-alchemy-hotkey]').each ->
+    $this = $(this)
+    key = $this.data('alchemy-hotkey')
+    keymage key, ->
+      $this.click()
+
+  keymage 'alt-w', ->
+    Alchemy.CurrentWindow.dialog('close')

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

@@ -0,0 +1,46 @@
+window.Alchemy = {} if typeof (window.Alchemy) is "undefined"
+
+Alchemy.ImageCropper =
+
+  initialized: false
+
+  init: (box, size_x, size_y, default_box, ratio, true_size) ->
+    crop_from_field = $("#essence_picture_crop_from")
+    crop_size_field = $("#essence_picture_crop_size")
+    options =
+      onSelect: (coords) ->
+        crop_from_field.val coords.x + "x" + coords.y
+        crop_size_field.val coords.w + "x" + coords.h
+        return
+      setSelect: box
+      aspectRatio: (if ratio then ratio else `undefined`)
+      minSize: [size_x, size_y]
+      boxWidth: 800
+      boxHeight: 600
+      trueSize: true_size
+    Alchemy.ImageCropper.box = box
+    Alchemy.ImageCropper.default_box = default_box
+    Alchemy.ImageCropper.crop_from_field = crop_from_field
+    Alchemy.ImageCropper.crop_size_field = crop_size_field
+    unless Alchemy.ImageCropper.initialized
+      Alchemy.ImageCropper.api = $.Jcrop("#imageToCrop", options)
+      Alchemy.ImageCropper.initialized = true
+    $(".alchemy_overlay").on 'dialogclose', Alchemy.ImageCropper.destroy
+    return
+
+  undo: ->
+    Alchemy.ImageCropper.api.setSelect Alchemy.ImageCropper.box
+    return
+
+  reset: ->
+    Alchemy.ImageCropper.api.setSelect Alchemy.ImageCropper.default_box
+    Alchemy.ImageCropper.crop_from_field.val ""
+    Alchemy.ImageCropper.crop_size_field.val ""
+    return
+
+  destroy: ->
+    try
+      Alchemy.ImageCropper.api.destroy()
+    finally
+      Alchemy.ImageCropper.initialized = false
+    return

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

@@ -14,6 +14,8 @@
 //= require tiny_mce/tiny_mce
 //= require_tree ../../../../vendor/assets/javascripts/jquery_plugins/
 //= require_tree ../../../../vendor/assets/javascripts/swfupload/
+//= require spin.min
+//= require keymage.min
 //= require alchemy/alchemy.routes
 //= require alchemy/alchemy.base
 //= require alchemy/alchemy.browser
@@ -21,16 +23,20 @@
 //= require alchemy/alchemy.datepicker
 //= require alchemy/alchemy.dirty
 //= require alchemy/alchemy.dragndrop
-//= require alchemy/alchemy.element_editor_selector
+//= require alchemy/alchemy.element_editors
 //= require alchemy/alchemy.growler
 //= require alchemy/alchemy.gui
+//= require alchemy/alchemy.hotkeys
 //= require alchemy/alchemy.image_cropper
-//= require alchemy/alchemy.js_extensions
+//= require alchemy/alchemy.string_extension
 //= require alchemy/alchemy.link_overlay
+//= require alchemy/alchemy.list_filter
 //= require alchemy/alchemy.onload
 //= require alchemy/alchemy.page_sorter
 //= require alchemy/alchemy.uploader
 //= require alchemy/alchemy.file_progress
+//= require alchemy/alchemy.sitemap
+//= require alchemy/alchemy.spinner
 //= require alchemy/alchemy.swf_upload
 //= require alchemy/alchemy.windows
 //= require alchemy/alchemy.preview_window

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

@@ -12,7 +12,7 @@
       self = Alchemy.LinkOverlay
       $dialog = $('<div style="display:none" id="alchemyLinkOverlay"></div>')
 
-      $dialog.html(Alchemy.getOverlaySpinner({x: width}))
+      $dialog.html(Alchemy.getOverlaySpinner({width: width}))
 
       self.current = $dialog.dialog({
         modal: true,
@@ -47,6 +47,8 @@
         page_id = $this.data('page-id')
         url = $this.data('url')
         self.selectPage(page_id, url)
+        if $this.is('.show_elements_to_link')
+          Alchemy.Spinner.small().spin($this.next()[0])
         self.showElementsSelect(page_id) if $this.hasClass('show_elements_to_link')
 
     close : ->
@@ -54,9 +56,9 @@
       return true
 
     selectPage : (selected_element, urlname) ->
-      $('#page_anchor').removeAttr('value')
       # We have to remove the Attribute. If not the value does not get updated.
-      $('.elements_for_page').hide()
+      $('#page_anchor').removeAttr('value')
+      $('.elements_for_page').hide().html('')
       $('#internal_urlname').val('/' + urlname)
       $('#alchemyLinkOverlay #sitemap .selected_page').removeClass('selected_page')
       $('#sitemap_sitename_' + selected_element).addClass('selected_page').attr('name', urlname)
@@ -153,7 +155,6 @@
 
     hideElementsSelect: (id) ->
       $('#elements_for_page_' + id).hide()
-      $('#elements_for_page_' + id).html('<img src="/assets/alchemy/ajax_loader.gif" alt="">')
       $('#page_anchor').removeAttr('value')
       $('#page_selector_container').scrollTo('#sitemap_sitename_'+id, {duration: 400, offset: -10})
 

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

@@ -0,0 +1,49 @@
+window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
+
+# The Alchemy list filter
+#
+# The list items must have a name attribute.
+#
+# It hides all list items that don't match the term from filter input field.
+#
+class Alchemy.ListFilterHandler
+
+  # Pass a input field with a data-alchemy-list-filter attribute to this constructor
+  constructor: (filter) ->
+    @filter_field = $(filter)
+    @items = $(@filter_field.data('alchemy-list-filter'))
+    @clear = @filter_field.siblings('.js_filter_field_clear')
+    @_observe()
+
+  _observe: ->
+    @filter_field.on 'keyup', (e) =>
+      @clear.show()
+      @_filter @filter_field.val()
+    @clear.click (e) =>
+      e.preventDefault()
+      @_clear()
+    @filter_field.focus ->
+      keymage.setScope('list_filter')
+    keymage 'list_filter', 'esc', =>
+      @_clear()
+      @filter_field.blur()
+
+  _filter: (term) ->
+    @clear.hide() if term == ''
+    @items.map ->
+      item = $(this)
+      # indexOf is much faster then match()
+      if item.attr('name').toLowerCase().indexOf(term.toLowerCase()) != -1
+        item.show()
+      else
+        item.hide()
+
+  _clear: ->
+    @filter_field.val ''
+    @_filter ''
+
+# Initializes an Alchemy.ListFilterHandler on all input fields with a data-alchemy-list-filter attribute.
+#
+Alchemy.ListFilter = (scope) ->
+  $('[data-alchemy-list-filter]', scope).map ->
+    new Alchemy.ListFilterHandler(this)

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

@@ -26,3 +26,6 @@ $ ->
     url = Alchemy.current_url
     delimiter = if url.match(/\?/) then '&' else '?'
     window.location = url + delimiter + 'locale=' + $(this).val()
+
+  # Attaches the image loader on all images
+  Alchemy.ImageLoader('#main_content')

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

@@ -0,0 +1,71 @@
+window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
+
+Alchemy.PreviewWindow =
+
+  init: (url, title) ->
+    $iframe = $("#alchemyPreviewWindow")
+    if $iframe.length is 0
+      $iframe = $("<iframe src=\"#{url}\" id=\"alchemyPreviewWindow\" frameborder=\"0\"/>")
+      $iframe.load ->
+        $(".preview-refresh-spinner").hide()
+      $iframe.css "background-color": "#ffffff"
+      Alchemy.PreviewWindow.currentWindow = $iframe.dialog(
+        modal: false
+        title: title
+        width: $(window).width() - 502
+        height: $(window).height() - 76
+        minWidth: 600
+        minHeight: 300
+        show: "fade"
+        hide: "fade"
+        position: [70, 84]
+        autoResize: true
+        closeOnEscape: false
+        dialogClass: 'alchemy-preview-window'
+        create: ->
+          spinner = Alchemy.Spinner.small(className: "preview-refresh-spinner")
+          $reload = $("<button class=\"ui-dialog-titlebar-refresh ui-corner-all ui-state-default\" role=\"button\"></button>")
+          $titlebar = $("#alchemyPreviewWindow").prev()
+          $reload.append "<span class=\"ui-icon ui-icon-refresh\">reload</span>"
+          $titlebar.append $reload
+          $titlebar.append spinner.spin().el
+          $reload.click Alchemy.reloadPreview
+          $reload.hover ->
+            $(this).toggleClass "ui-state-hover ui-state-default"
+        close: (event, ui) ->
+          Alchemy.PreviewWindow.button.enable()
+        open: (event, ui) ->
+          $(this).css width: "100%"
+          Alchemy.PreviewWindow.button.disable()
+      ).dialogExtend
+          maximize: true
+          dblclick: "maximize"
+          icons:
+            maximize: "ui-icon-fullscreen"
+            restore: "ui-icon-exit-fullscreen"
+    else
+      $("#alchemyPreviewWindow").dialog "open"
+
+  refresh: ->
+    $iframe = $("#alchemyPreviewWindow")
+    $(".preview-refresh-spinner").show()
+    $iframe.load ->
+      $(".preview-refresh-spinner").hide()
+    $iframe.attr("src", $iframe.attr("src"))
+    true
+
+  button:
+    enable: ->
+      $("div#show_preview_window").removeClass("disabled").find("a").removeAttr "tabindex"
+
+    disable: ->
+      $("div#show_preview_window").addClass("disabled").find("a").attr "tabindex", "-1"
+
+    toggle: ->
+      if $("div#show_preview_window").hasClass("disabled")
+        Alchemy.PreviewWindow.button.enable()
+      else
+        Alchemy.PreviewWindow.button.disable()
+
+Alchemy.reloadPreview = ->
+  Alchemy.PreviewWindow.refresh()

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

@@ -0,0 +1,61 @@
+window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
+
+# The admin sitemap Alchemy module
+Alchemy.Sitemap =
+
+  # Storing some objects.
+  init: ->
+    @search_field = $("#search_field")
+    @filter_field_clear = $('.js_filter_field_clear')
+    @display = $('#page_filter_result')
+    @items = $(".sitemap_page", '#sitemap')
+    @_observe()
+
+  # Filters the sitemap
+  filter: (term) ->
+    results = []
+    self = Alchemy.Sitemap
+    self.items.map ->
+      item = $(this)
+      if term != '' && item.attr('name').toLowerCase().indexOf(term) != -1
+        item.addClass('highlight')
+        item.removeClass('no-match')
+        results.push item
+      else
+        item.addClass('no-match')
+        item.removeClass('highlight')
+    self.filter_field_clear.show()
+    length = results.length
+    if length == 1
+      self.display.show().text("1 #{self._t('page_found')}")
+      $.scrollTo(results[0], {duration: 400, offset: -80})
+    else if length > 1
+      self.display.show().text("#{length} #{self._t('pages_found')}")
+    else
+      self.items.removeClass('no-match highlight')
+      self.display.hide()
+      $.scrollTo('0', 400)
+      self.filter_field_clear.hide()
+
+  # Adds onkey up observer to search field
+  _observe: ->
+    filter = @filter
+    @search_field.on 'keyup', ->
+      term = $(this).val()
+      filter(term.toLowerCase())
+    @search_field.on 'focus', ->
+      keymage.setScope('search')
+    @filter_field_clear.click =>
+      @search_field.val('')
+      filter('')
+
+  # Translations
+  _t: (id) ->
+    i18n =
+      page_found:
+        de: 'Seite gefunden'
+        en: 'Page found'
+      pages_found:
+        de: 'Seiten gefunden'
+        en: 'Pages found'
+    i18n[id][Alchemy.locale]