alchemy_cms 2.9.1 → 3.0.0.rc5

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

@@ -24,7 +24,10 @@ Alchemy.ImageCropper =
     unless Alchemy.ImageCropper.initialized
       Alchemy.ImageCropper.api = $.Jcrop("#imageToCrop", options)
       Alchemy.ImageCropper.initialized = true
-    $(".alchemy_overlay").on 'dialogclose', Alchemy.ImageCropper.destroy
+    dialog = Alchemy.currentDialog()
+    if dialog?
+      dialog.options.closed = ->
+        Alchemy.ImageCropper.destroy()
 
   undo: ->
     Alchemy.ImageCropper.api.setSelect Alchemy.ImageCropper.box

data/app/assets/javascripts/alchemy/{alchemy.onload.js.coffee → alchemy.initializer.js.coffee}

@@ -1,6 +1,8 @@
-$ ->
-  # Preloading all background images from CSS files.
-  $.preloadCssImages()
+# Initialize all onload scripts at once.
+#
+# Called at jQuery ready event and Turbolinks page change event.
+#
+Alchemy.Initializer = ->
 
   # We obviously have javascript enabled.
   $('html').removeClass('no-js')
@@ -16,16 +18,31 @@ $ ->
   $('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')
     .click ->
-      Alchemy.pleaseWaitOverlay()
+      unless Alchemy.isPageDirty()
+        Alchemy.pleaseWaitOverlay()
 
   # Hack for enabling tab focus for <a>'s styled as button.
   $('a.button').attr({tabindex: 0})
 
   # Locale select handler
   $('select#change_locale').on 'change', (e) ->
-    url = Alchemy.current_url
+    url = window.location.pathname
     delimiter = if url.match(/\?/) then '&' else '?'
     window.location.href = "#{url}#{delimiter}locale=#{$(this).val()}"
 
+  # Submit forms of selects with `data-autosubmit="true"`
+  $('select[data-auto-submit="true"]').on 'change', (e) ->
+    Alchemy.pleaseWaitOverlay()
+    $(this.form).submit()
+
   # Attaches the image loader on all images
   Alchemy.ImageLoader('#main_content')
+
+  # Override the filter of keymaster.js so we can blur the fields on esc key.
+  key.filter = (event) ->
+    tagName = (event.target || event.srcElement).tagName
+    key.isPressed('esc') || !(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA')
+
+# Turbolinks DOM Ready
+$(document).on 'page:change', ->
+  Alchemy.Initializer()

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

@@ -2,24 +2,27 @@
 // ------------------------------
 //= require jquery
 //= require jquery_ujs
-//= require jquery.ui.autocomplete
+//= require turbolinks
 //= require jquery.ui.datepicker
-//= require jquery.ui.dialog
+//= require jquery.ui.draggable
 //= require jquery.ui.effect-drop
 //= require jquery.ui.effect-fade
-//= require jquery.ui.resizable
 //= require jquery.ui.sortable
 //= require jquery.ui.tabs
-//= require autocomplete-rails
-//= require tiny_mce/tiny_mce
+//= require tinymce/tinymce.min
 //= require_tree ../../../../vendor/assets/javascripts/jquery_plugins/
-//= require_tree ../../../../vendor/assets/javascripts/swfupload/
 //= require spin.min
-//= require keymage.min
+//= require keymaster
+//= require requestAnimationFrame
+//= require select2
+//= require select2_locale_de
 //= require alchemy/alchemy.routes
 //= require alchemy/alchemy.base
+//= require alchemy/alchemy.autocomplete
 //= require alchemy/alchemy.browser
 //= require alchemy/alchemy.buttons
+//= require alchemy/alchemy.dialog
+//= require alchemy/alchemy.confirm_dialog
 //= require alchemy/alchemy.datepicker
 //= require alchemy/alchemy.dirty
 //= require alchemy/alchemy.dragndrop
@@ -28,18 +31,17 @@
 //= require alchemy/alchemy.growler
 //= require alchemy/alchemy.gui
 //= require alchemy/alchemy.hotkeys
+//= require alchemy/alchemy.i18n
 //= require alchemy/alchemy.image_cropper
 //= require alchemy/alchemy.string_extension
-//= require alchemy/alchemy.link_overlay
+//= require alchemy/alchemy.link_dialog
 //= require alchemy/alchemy.list_filter
-//= require alchemy/alchemy.onload
+//= require alchemy/alchemy.initializer
 //= require alchemy/alchemy.page_sorter
 //= require alchemy/alchemy.uploader
-//= require alchemy/alchemy.file_progress
 //= require alchemy/alchemy.preview_window
 //= require alchemy/alchemy.sitemap
 //= require alchemy/alchemy.spinner
-//= require alchemy/alchemy.swf_upload
 //= require alchemy/alchemy.tinymce
 //= require alchemy/alchemy.translations
 //= require alchemy/alchemy.windows

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

@@ -0,0 +1,221 @@
+# Represents the link Dialog that appears, if a user clicks the link buttons
+# in TinyMCE or on an Essence that has links enabled (e.g. EssencePicture)
+#
+class window.Alchemy.LinkDialog extends Alchemy.Dialog
+
+  constructor: (@link_object) ->
+    @url = Alchemy.routes.link_admin_pages_path
+    @$link_object = $(@link_object)
+    @options =
+      size: '600x540'
+      title: 'Link'
+    super(@url, @options)
+
+  # Called from Dialog class after the url was loaded
+  replace: (data) ->
+    # let Dailog class handle the content replacement
+    super(data)
+    # attach events we handle
+    @attachEvents()
+    # Store some jQuery objects for further reference
+    @$page_anchor = $('#page_anchor', @dialog_body)
+    @$internal_urlname = $('#internal_urlname', @dialog_body)
+    @$external_url = $('#external_url', @dialog_body)
+    @$public_filename = $('#public_filename', @dialog_body)
+    @$overlay_tabs = $('#overlay_tabs', @dialog_body)
+    @$page_container = $('#page_selector_container')
+    # if we edit an existing link
+    if @link_object
+      # we select the correct tab
+      @selectTab()
+
+  # 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')
+      switch @link_type
+        # get stored url for link type
+        when 'external'
+          url = @$external_url.val()
+        when 'file'
+          url = @$public_filename.val()
+        else
+          url = $("##{@link_type}_urlname").val()
+      # Create the link
+      @createLink
+        url: url
+        title: $("##{@link_type}_link_title").val()
+        target: $("##{@link_type}_link_target").val()
+      false
+
+  # Sets the page selected and scrolls it in the viewport.
+  selectPage: (page_id) ->
+    $('#sitemap .selected_page', @dialog_body).removeClass('selected_page')
+    $('#sitemap_sitename_' + page_id).addClass('selected_page')
+    @$page_container.scrollTo("#sitemap_sitename_#{page_id}", {duration: 400, offset: -10})
+
+  # Creates a link if no validation errors are present.
+  # Otherwise shows an error notice.
+  createLink: (options) ->
+    if @link_type == 'external'
+      if @validateURLFormat(options.url)
+        @setLink(options.url, options.title, options.target)
+      else
+        return @showValidationError()
+    else
+      @setLink(options.url, options.title, options.target)
+    @close()
+
+  # Sets the link either in TinyMCE or on an Essence.
+  setLink: (url, title, target) ->
+    Alchemy.setElementDirty(@$link_object.parents('.element_editor'))
+    if @link_object.editor
+      @setTinyMCELink(url, title, target)
+    else
+      @setEssenceLink(url, title, target)
+
+  # Sets a link in TinyMCE editor.
+  setTinyMCELink: (url, title, target) ->
+    editor = @link_object.editor
+    editor.execCommand 'mceInsertLink', false,
+      'href': url
+      'class': @link_type
+      'title': title
+      'data-link-target': target
+      'target': if target == 'blank' then '_blank' else null
+    editor.selection.collapse()
+    true
+
+  # Sets a link on an Essence (e.g. EssencePicture).
+  setEssenceLink: (url, title, target) ->
+    content_id = @$link_object.data('content-id')
+    $("#contents_#{content_id}_link").val(url).change()
+    $("#contents_#{content_id}_link_title").val(title)
+    $("#contents_#{content_id}_link_class_name").val(@link_type)
+    $("#contents_#{content_id}_link_target").val(target)
+    @$link_object.addClass('linked')
+    @$link_object.next().addClass('linked').removeClass('disabled')
+
+  # Selects the correct tab for link type and fills all fields.
+  selectTab: ->
+    # Creating an temporary anchor node if we are linking an EssencePicture or EssenceText.
+    if (@link_object.nodeType)
+      $link = @createTempLink()
+    # Restoring the bookmarked selection inside the TinyMCE of an EssenceRichtext.
+    else if (@link_object.node.nodeName == 'A')
+      $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'))
+    # Checking of what kind the link is (internal, external or file).
+    if $link.hasClass('external')
+      # Handles an external link.
+      tab = $('#overlay_tab_external_link')
+      @$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)
+    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('#')
+    urlname = url[0]
+    anchor = url[1]
+    if anchor
+      # store the anchor
+      @$page_anchor.val("##{anchor}")
+      # and update the url field
+      @$internal_urlname.val("#{urlname}##{anchor}")
+    else
+      @$internal_urlname.val(urlname)
+    $sitemap_line = $('.sitemap_sitename').closest('[name="'+urlname+'"]')
+    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})
+
+  # 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
+  showElementsSelect: (show_elements_url, urlname) ->
+    dialog = new Alchemy.Dialog show_elements_url,
+      size: '400x165'
+      ready: =>
+        $element_select = $('.elements_from_page_selector')
+        # check if the urlname is the same as stored,
+        current_urlname = @$internal_urlname.val().split('#')[0]
+        if "/#{urlname}" == current_urlname
+          # then we can select the current anchor in the selectbox
+          $element_select.select2 'val', @$page_anchor.val()
+        $element_select.change =>
+          @$page_anchor.val $element_select.select2('val')
+        $('button', dialog.dialog_body).click =>
+          @$internal_urlname.val("/#{urlname}#{@$page_anchor.val()}")
+          dialog.close()
+          false
+        return
+    dialog.open()
+    return
+
+  # Creates a temporay $('a') object that holds all values on it.
+  createTempLink: ->
+    @$tmp_link = $('<a/>')
+    content_id = @$link_object.data('content-id')
+    @$tmp_link.attr 'href', $("#contents_#{content_id}_link").val()
+    @$tmp_link.attr 'title', $("#contents_#{content_id}_link_title").val()
+    @$tmp_link.attr 'data-link-target', $("#contents_#{content_id}_link_target").val()
+    @$tmp_link.attr 'target', if $("#contents_#{content_id}_link_target").val() == 'blank' then '_blank' else null
+    @$tmp_link.addClass $("#contents_#{content_id}_link_class_name").val()
+    @$tmp_link
+
+  # Validates url for beginning with an protocol.
+  validateURLFormat: (url) ->
+    if url.match(/^(mailto:|\/|[a-z]+:\/\/)/)
+      true
+    else
+      false
+
+  # Shows validation errors
+  showValidationError: ->
+    $('#errors ul', @dialog_body).html("<li>#{Alchemy._t('url_validation_failed')}</li>")
+    $('#errors', @dialog_body).show()
+
+  # Public class methods
+
+  # Removes link from Essence.
+  @removeLink = (link, content_id) ->
+    $link = $(link)
+    $("#contents_#{content_id}_link").val('').change()
+    $("#contents_#{content_id}_link_title").val('')
+    $("#contents_#{content_id}_link_class_name").val('')
+    $("#contents_#{content_id}_link_target").val('')
+    if $link.hasClass('linked')
+      Alchemy.setElementDirty $(link).parents('.element_editor')
+      $link.removeClass('linked').addClass('disabled')
+    $('#edit_link_' + content_id).removeClass('linked')
+    false

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

@@ -23,8 +23,8 @@ class Alchemy.ListFilterHandler
       e.preventDefault()
       @_clear()
     @filter_field.focus ->
-      keymage.setScope('list_filter')
-    keymage 'list_filter', 'esc', =>
+      key.setScope('list_filter')
+    key 'esc', 'list_filter', =>
       @_clear()
       @filter_field.blur()
 

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

@@ -24,8 +24,6 @@ if (typeof(Alchemy) === 'undefined') {
         toleranceElement: '> div'
       });
       $('#save_page_order').click(function(e) {
-        Alchemy.pleaseWaitOverlay();
-        e.preventDefault();
         var params = {
           set: JSON.stringify($sortables.nestedSortable('toHierarchy'))
         };

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

@@ -1,4 +1,9 @@
-window.Alchemy = {}  if typeof (Alchemy) is "undefined"
+#= require alchemy/alchemy.jquery_loader
+#= require alchemy/alchemy.browser
+#= require alchemy/alchemy.i18n
+
+window.Alchemy = {} if typeof(Alchemy) is 'undefined'
+
 Alchemy.initAlchemyPreviewMode = ($) ->
 
   # Setting jQueryUIs global animation duration
@@ -20,6 +25,7 @@ Alchemy.initAlchemyPreviewMode = ($) ->
         default_hover:
           outline: "3px solid #F0B437"
           "outline-offset": "4px"
+          cursor: "pointer"
 
         webkit_hover:
           outline: "4px auto #F0B437"
@@ -38,66 +44,62 @@ Alchemy.initAlchemyPreviewMode = ($) ->
           "-moz-outline-radius": "3px"
 
       init: ->
-        self = Alchemy.ElementSelector
         $elements = $("[data-alchemy-element]")
-        $elements.bind "mouseover", (e) ->
-          $(this).attr("title", "Klicken zum bearbeiten")
-          $(this).css(self.getStyle("hover")) unless $(this).hasClass("selected")
-
-        $elements.bind "mouseout", ->
-          $(this).removeAttr("title")
-          $(this).css(self.getStyle("reset")) unless $(this).hasClass("selected")
-
-        $elements.bind("Alchemy.SelectElement", self.selectElement)
-        $elements.bind("click", self.clickElement)
-        self.$previewElements = $elements
+        @$previewElements = $elements
+        $elements.mouseover (e) =>
+          $el = $(e.delegateTarget)
+          $el.attr("title", Alchemy._t('click_to_edit'))
+          $el.css(@getStyle("hover")) unless $el.hasClass("selected")
+        $elements.mouseout (e) =>
+          $el = $(e.delegateTarget)
+          $el.removeAttr("title")
+          $el.css(@getStyle("reset")) unless $el.hasClass("selected")
+        $elements.on "Alchemy.SelectElement", (e) =>
+          @selectElement(e)
+        $elements.click (e) =>
+          @clickElement(e)
 
       selectElement: (e) ->
-        $this = $(this)
-        self = Alchemy.ElementSelector
-        $elements = self.$previewElements
-        offset = self.scrollOffset
+        $el = $(e.delegateTarget)
+        $elements = @$previewElements
+        offset = @scrollOffset
         e.preventDefault()
-        $elements.removeClass("selected").css(self.getStyle("reset"))
-        $this.addClass("selected").css(self.getStyle("selected"))
+        $elements.removeClass("selected").css(@getStyle("reset"))
+        $el.addClass("selected").css(@getStyle("selected"))
         $("html, body").animate
-          scrollTop: $this.offset().top - offset
-          scrollLeft: $this.offset().left - offset
+          scrollTop: $el.offset().top - offset
+          scrollLeft: $el.offset().left - offset
         , 400
         return
 
       clickElement: (e) ->
-        $this = $(this)
+        $el = $(e.delegateTarget)
         parent$ = window.parent.jQuery
-        target_id = $this.data("alchemy-element")
+        target_id = $el.data("alchemy-element")
         $element_editor = parent$("#element_area .element_editor").closest("[id=\"element_" + target_id + "\"]")
-        $elementsWindow = parent$("#alchemyElementWindow")
+        elementsWindow = window.parent.Alchemy.ElementsWindow
         e.preventDefault()
         $element_editor.trigger("Alchemy.SelectElementEditor", target_id)
-        if $elementsWindow.dialog
-          if $elementsWindow.dialog("isOpen")
-            $elementsWindow.dialog("moveToTop")
-          else
-            $elementsWindow.dialog "open"
-        $this.trigger("Alchemy.SelectElement")
+        if elementsWindow.hidden
+          elementsWindow.show()
+        $el.trigger("Alchemy.SelectElement")
         return
 
       getStyle: (state) ->
-        self = Alchemy.ElementSelector
         if state == "reset"
-          self.styles["reset"]
+          @styles["reset"]
         else
-          default_state_style = self.styles["default_#{state}"]
+          default_state_style = @styles["default_#{state}"]
           browser = "webkit" if Alchemy.Browser.isWebKit
           browser = "moz" if Alchemy.Browser.isFirefox
           if browser
-            $.extend(default_state_style, self.styles["#{browser}_#{state}"])
+            $.extend(default_state_style, @styles["#{browser}_#{state}"])
           else
             default_state_style
 
   Alchemy.ElementSelector.init()
 
-if typeof (jQuery) is "undefined"
+if typeof(jQuery) is 'undefined'
   Alchemy.loadjQuery(Alchemy.initAlchemyPreviewMode)
 else
   Alchemy.initAlchemyPreviewMode(jQuery)