alchemy_cms 2.5.3.1 → 2.6.0.rc5

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

@@ -0,0 +1,35 @@
+window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
+
+Alchemy.Spinner =
+
+  DEFAULTS:
+    lines: 5
+    corners: 0.75
+    rotate: 54
+    trail: 75
+    speed: 1.25
+    hwaccel: true
+
+  small: (opts) ->
+    defaults = $.extend({}, Alchemy.Spinner.DEFAULTS,
+      length: 2
+      width: 3
+      radius: 2
+    )
+    new Spinner($.extend(defaults, opts))
+
+  medium: (opts) ->
+    defaults = $.extend({}, Alchemy.Spinner.DEFAULTS,
+      length: 4
+      width: 6
+      radius: 4
+    )
+    new Spinner($.extend(defaults, opts))
+
+  large: (opts) ->
+    defaults = $.extend({}, Alchemy.Spinner.DEFAULTS,
+      length: 8
+      width: 12
+      radius: 8
+    )
+    new Spinner($.extend(defaults, opts))

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

@@ -0,0 +1,11 @@
+String::beginsWith = (t, i) ->
+  if i is false
+    t is @substring(0, t.length)
+  else
+    t.toLowerCase() is @substring(0, t.length).toLowerCase()
+
+String::endsWith = (t, i) ->
+  if i is false
+    t is @substring(@length - t.length)
+  else
+    t.toLowerCase() is @substring(@length - t.length).toLowerCase()

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

@@ -0,0 +1,278 @@
+# This module holds methods for all kind of overlay windows in Alchemy
+
+window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
+
+$.extend Alchemy,
+
+  # Returns a HTML div container with a spinner inside made with spin.js
+  #
+  # Options:
+  #
+  #   width: 400   - The width of the spinner container (Number)
+  #   height: 300  - The height of the spinner container (Number)
+  #
+  getOverlaySpinner: (opts) ->
+    options = {width: 400, height: 300}
+    $.extend(options, opts)
+    $spinner_container = $('<div class="spinner_container"/>').css(
+      width: options.width
+      height: options.height
+    )
+    spinner = Alchemy.Spinner.medium(
+      top: options.height / 2 - 8 + "px"
+      left: options.width / 2 - 8 + "px"
+    )
+    spinner.spin $spinner_container[0]
+    $spinner_container
+
+  # Display a error message for dialogs
+  # Used by Alchemy.openWindow if errors happen
+  AjaxErrorHandler: ($dialog, status, textStatus, errorThrown) ->
+    $div = $('<div class="with_padding" />')
+    $errorDiv = $("<div id=\"errorExplanation\" class=\"ajax_status_code_#{status}\" />")
+    $dialog.html $div
+    $div.append $errorDiv
+    if status is 0
+      $errorDiv.append "<h2>The server does not respond.</h2>"
+      $errorDiv.append "<p>Please check server and try again.</p>"
+    else
+      $errorDiv.append "<h2>" + errorThrown + " (" + status + ")</h2>"
+      $errorDiv.append "<p>Please check log and try again.</p>"
+
+  # Opens a confirm window
+  #
+  # Options:
+  #
+  #   title: ''         - The title of the overlay window (String)
+  #   message: ''       - The message that will be displayed to the user (String)
+  #   cancelLabel: ''   - The label of the cancel button (String)
+  #   okLabel: ''       - The label of the ok button (String)
+  #   okCallback: null  - The function to invoke on confirmation (Function)
+  #
+  openConfirmWindow: (options = {}) ->
+    $confirmation = $('<div style="display: none" id="alchemyConfirmation" />')
+    $confirmation.appendTo "body"
+    $confirmation.html "<p>" + options.message + "</p>"
+    Alchemy.ConfirmationWindow = $confirmation.dialog
+      resizable: false
+      minHeight: 100
+      minWidth: 300
+      modal: true
+      title: options.title
+      show: "fade"
+      hide: "fade"
+      buttons: [
+        {
+          text: options.cancelLabel,
+          click: ->
+            $(this).dialog "close"
+            Alchemy.Buttons.enable()
+            return
+        },
+        {
+          text: options.okLabel,
+          click: ->
+            $(this).dialog "close"
+            options.okCallback()
+            return
+        }
+      ]
+      open: ->
+        Alchemy.Buttons.observe "#alchemyConfirmation"
+      close: ->
+        $("#alchemyConfirmation").remove()
+
+  # Opens a confirm to delete window
+  #
+  # Arguments:
+  #
+  #   url  - The url to the server delete action. Uses DELETE as HTTP method. (String)
+  #   opts - An options object (Object)
+  #
+  # Options:
+  #
+  #   title: ''        - The title of the confirmation window (String)
+  #   message: ''      - The message that will be displayed to the user (String)
+  #   okLabel: ''      - The label for the ok button (String)
+  #   cancelLabel: ''  - The label for the cancel button (String)
+  #
+  confirmToDeleteWindow: (url, opts) ->
+    options =
+      title: ''
+      message: ''
+      okLabel: ''
+      cancelLabel: ''
+    $.extend(options, opts)
+    Alchemy.openConfirmWindow
+      message: options.message
+      title: options.title
+      okLabel: options.okLabel
+      cancelLabel: options.cancelLabel
+      okCallback: ->
+        Alchemy.pleaseWaitOverlay()
+        $.ajax
+          url: url
+          type: "DELETE"
+
+  # Opens a new dialog window
+  #
+  # Arguments are:
+  #
+  #   url: the url to query to get the window body (String)
+  #   opts: An options object that holds all additional options (Object)
+  #
+  # Options are:
+  #
+  #   title: ''              - The title for the overlay window (String)
+  #   width: 400             - The width of the window (Number)
+  #   height: 300            - The height of the window (Number)
+  #   resizable: false       - Make the overlay resizable (Boolean)
+  #   modal: true            - Make the window a modal dialog (Boolean)
+  #   close_on_escape: true  - Should the overlay close on escape key (Boolean)
+  #   overflow: true         - Display overflowing content, or show scrollbars (Boolean)
+  #   image_loader: true     - Init the image loader after opening the dialog (Boolean)
+  #
+  openWindow: (url, opts) ->
+    options =
+      title: ''
+      width: 400
+      height: 300
+      resizable: false
+      modal: true
+      overflow: true
+      image_loader: true
+      close_on_escape: true
+      image_loader_color: '#fff'
+    $.extend(options, opts)
+    if options.width is "fullscreen"
+      options.width = $(window).width() - 50
+      options.height = $(window).height() - 50
+    $dialog = $('<div style="display: none" class="alchemy_overlay" />')
+    $dialog.appendTo "body"
+    $dialog.html Alchemy.getOverlaySpinner
+      width: (if options.width is "auto" then 400 else options.width)
+      height: (if options.height is "auto" then 300 else options.height)
+    Alchemy.CurrentWindow = $dialog.dialog
+      modal: options.modal
+      minWidth: (if options.width is "auto" then 400 else options.width)
+      minHeight: (if options.height is "auto" then 300 else options.height)
+      maxHeight: options.maxHeight
+      title: options.title
+      resizable: options.resizable
+      show: "fade"
+      hide: "fade"
+      closeOnEscape: options.close_on_escape
+      open: (event, ui) ->
+        $.ajax
+          url: url
+          success: (data, textStatus, XMLHttpRequest) ->
+            widget = $dialog.dialog("widget")
+            $dialog.html(data)
+            $dialog.css(overflow: (if options.overflow then "visible" else "auto"))
+            widget.css(overflow: (if options.overflow then "visible" else "hidden"))
+            if options.width is "auto"
+              widget.css left: (($(window).width() / 2) - ($dialog.width() / 2))
+            if options.height is "auto"
+              widget.css top: ($(window).height() - $dialog.dialog("widget").height()) / 2
+            Alchemy.GUI.init Alchemy.CurrentWindow
+            if options.image_loader
+              Alchemy.ImageLoader Alchemy.CurrentWindow, {color: options.image_loader_color}
+          error: (XMLHttpRequest, textStatus, errorThrown) ->
+            Alchemy.AjaxErrorHandler $dialog, XMLHttpRequest.status, textStatus, errorThrown
+          complete: (jqXHR, textStatus) ->
+            Alchemy.Buttons.enable()
+      close: ->
+        $dialog.remove()
+
+  # Closes the current dialog
+  closeCurrentWindow: ->
+    if Alchemy.CurrentWindow
+      Alchemy.CurrentWindow.dialog "close"
+      Alchemy.CurrentWindow = null
+    else
+      $(".alchemy_overlay").dialog "close"
+    true
+
+  # Opens an image in an overlay
+  # Used by the picture library
+  zoomImage: (url, title, width, height) ->
+    $doc_width = $(window).width()
+    $doc_height = $(window).height()
+    if width > $doc_width
+      width = 'fullscreen'
+    if height > $doc_height
+      height = $doc_height
+    Alchemy.openWindow url,
+      width: width
+      height: height
+      maxHeight: height
+      title: title
+      overflow: false
+      modal: false
+      image_loader_color: '#000'
+
+  # Trash window methods
+  TrashWindow:
+
+    # Opens the trash window
+    open: (page_id, title) ->
+      Alchemy.TrashWindow.current = Alchemy.openWindow(
+        Alchemy.routes.admin_trash_path(page_id),
+        title: title,
+        width: 380,
+        height: 450,
+        maxHeight: $(window).height() - 50,
+        modal: false
+      )
+
+    # Refreshes the trash window
+    refresh: (page_id) ->
+      if Alchemy.TrashWindow.current
+        Alchemy.TrashWindow.current.html Alchemy.getOverlaySpinner(width: 380, height: 270)
+        $.get Alchemy.routes.admin_trash_path(page_id), (html) ->
+          Alchemy.TrashWindow.current.html html
+
+  # Adds onClick events for Alchemy overlays
+  #
+  # Elements are all links that have a data-alchemy-overlay or data-alchemy-confirm-delete
+  # and all input/buttons that have a data-alchemy-confirm attribute.
+  #
+  # Arguments:
+  #
+  #   You can pass a scope so that only elements inside this scope are queried
+  #
+  # The observer takes the href attribute as url for the overlay window.
+  #
+  # See Alchemy.openWindow for further options you can add to the data attribute
+  #
+  overlayObserver: (scope) ->
+    $("a[data-alchemy-overlay]", scope).click (event) ->
+      $this = $(this)
+      options = $this.data("alchemy-overlay")
+      event.preventDefault()
+      Alchemy.openWindow $this.attr("href"), options
+      false
+    $("a[data-alchemy-confirm-delete]", scope).click (event) ->
+      $this = $(this)
+      options = $this.data("alchemy-confirm-delete")
+      event.preventDefault()
+      Alchemy.confirmToDeleteWindow $this.attr("href"),
+        title: options.title,
+        message: options.message,
+        okLabel: options.ok_label,
+        cancelLabel: options.cancel_label
+      false
+    $("input[data-alchemy-confirm], button[data-alchemy-confirm]", scope).click (event) ->
+      $this = $(this)
+      self = this
+      options = $this.data("alchemy-confirm")
+      event.preventDefault()
+      Alchemy.openConfirmWindow $.extend(options,
+        okLabel: options.okLabel || options.ok_label, #hmpf
+        cancelLabel: options.cancelLabel || options.cancel_label, #hmpf
+        okCallback: ->
+          Alchemy.pleaseWaitOverlay()
+          self.form.submit()
+          return
+      )
+      false

data/app/assets/stylesheets/alchemy/admin.css.scss

@@ -2,6 +2,7 @@
  *  -------------------------------
  *= require_self
  */
+
 @import "alchemy/defaults";
 @import "alchemy/base";
 @import "alchemy/toolbar";
@@ -13,6 +14,7 @@
 @import "alchemy/form_elements";
 @import "alchemy/frame";
 @import "alchemy/icons";
+@import "alchemy/fonts";
 @import "alchemy/login";
 @import "alchemy/modules";
 @import "alchemy/notices";

data/app/assets/stylesheets/alchemy/archive.scss

@@ -14,6 +14,17 @@ div#image_assign_filter_and_image_sizing {
   }
 }
 
+#zoomed_picture_background {
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+
+  .zoomed_picture {
+    max-height: 99%;
+  }
+}
+
 .picture_thumbnail {
   padding: $default-padding;
   margin: 2px 1px 2px 2px;
@@ -23,10 +34,10 @@ div#image_assign_filter_and_image_sizing {
   display: inline-block;
   border: 1px solid #c0c0c0;
   position: relative;
-  @include rounded-corner;
+  @extend .rounded-border;
 
   .thumbnail_background {
-    @include thumbnail-background;
+    @extend %thumbnail-background;
     width: 160px;
     height: 120px;
   }
@@ -59,16 +70,6 @@ div#image_assign_filter_and_image_sizing {
       width: 80px;
       height: 60px;
     }
-
-    .image_spinner {
-      height: 60px;
-      margin: $default-margin;
-
-      img {
-        top: 14px;
-        left: 25px;
-      }
-    }
   }
 
   &.medium {
@@ -83,16 +84,6 @@ div#image_assign_filter_and_image_sizing {
       width: 160px;
       height: 120px;
     }
-
-    .image_spinner {
-      height: 120px;
-      margin: $default-margin;
-
-      img {
-        top: 42px;
-        left: 64px;
-      }
-    }
   }
 
   &.large {
@@ -107,15 +98,6 @@ div#image_assign_filter_and_image_sizing {
       width: 240px;
       height: 180px;
     }
-
-    .image_spinner {
-      height: 180px;
-
-      img {
-        top: 74px;
-        left: 108px;
-      }
-    }
   }
 
   &:hover {
@@ -128,6 +110,7 @@ div#image_assign_filter_and_image_sizing {
 
 #pictures {
   margin-right: 232px;
+  padding-bottom: 60px;
 
   .picture_thumbnail {
     margin: 0 8px 8px 0;
@@ -148,29 +131,16 @@ div.assign_image_list_image {
   text-align: center;
   overflow: hidden;
   position: relative;
-}
-
-div.image_spinner {
-  background-color: $dark-gray;
-  width: 1px;
-  margin: $default-margin;
 
   img {
-    position: absolute;
-    z-index: 0;
-    top: 32px;
-    left: 40px;
+    border-style: none;
   }
 }
 
-#assign_image_list {
+#assign_image_list, #assign_file_list {
   position: relative;
   padding-right: 244px;
   height: 519px;
-
-  div.assign_image_list_image img {
-    border-style: none;
-  }
 }
 
 .picture_tool {
@@ -238,7 +208,7 @@ div.image_spinner {
 
 div#library_sidebar {
   @include box-sizing(border-box);
-  position: absolute;
+  position: fixed;
   border-left: 1px solid $default-border-color;
   top: 0;
   right: 0;
@@ -246,7 +216,7 @@ div#library_sidebar {
   padding-top: 96px;
   padding: 84px 4*$default-padding 0 4*$default-padding;
   height: 100%;
-  z-index: 1;
+  z-index: 0;
   background-color: $light-gray;
 
   h2 {
@@ -254,29 +224,60 @@ div#library_sidebar {
   }
 }
 
+.alchemy_overlay #library_sidebar {
+  position: absolute;
+}
+
 div#filter_bar {
 
   .selectboxit {
-    width: 192px;
+    width: 194px;
   }
 }
 
-div#tag_list {
+#tag_list {
   @include box-sizing(border-box);
-  height: 80%;
+  height: 100%;
+  padding-bottom: 138px;
+
+  &.filtered {
+    padding-bottom: 164px;
+  }
+
+  &.with_filter_bar {
+    padding-bottom: 218px;
+
+    &.filtered {
+      padding-bottom: 244px;
+    }
+  }
 
   .js_filter_field_box {
+    position: absolute;
+    right: auto;
+    top: auto;
+    width: 200px;
+    z-index: 1100;
+
+    input {
+      width: 200px;
+      background-color: #f8f8f8;
+    }
 
-    input { width: 200px }
     label { display: none }
   }
 
+  .js_filter_field_clear {
+    right: 4px;
+  }
+
   ul {
+    @include box-sizing(border-box);
     list-style-type: none;
     padding: 0;
-    margin: $default-margin 0;
-    height: 95%;
-    width: 204px;
+    margin: 40px 0 4px 0;
+    height: 100%;
+    width: 200px;
     overflow-x: hidden;
     overflow-y: auto;
 
@@ -285,19 +286,19 @@ div#tag_list {
       padding: $default-padding 4*$default-padding $default-padding 6*$default-padding ;
       margin: 2*$default-margin 0;
       background-color: $medium-gray;
-      @include border-radius(16px);
-      white-space: nowrap;
+      @extend .rounded-border;
       overflow: hidden;
       position: relative;
 
+      &:first-child { margin-top: 0 }
+
       &:before {
-        content: '';
         position: absolute;
         left: 8px;
-        top: 7px;
-        background: url("ui-icons_666666_256x240.png") -242px -100px;
-        width: 12px;
-        height: 12px;
+        top: 8px;
+        font-family: 'Alchemy Icons';
+        @extend .icon-tag:before;
+        line-height: 10px;
       }
 
       a {
@@ -310,7 +311,7 @@ div#tag_list {
       &.active {
         background-color: $dark-gray;
 
-        a { color: $light-gray }
+        a, &:before { color: $light-gray }
       }
     }
   }
@@ -321,9 +322,27 @@ div#alchemy_window_body {
   #library_sidebar {
     padding: 0 4*$default-padding;
   }
+}
 
-  div#tag_list ul {
-    height: 364px;
+#assign_image_list {
+
+  #tag_list ul {
+    height: 316px;
+  }
+
+  &.filtered #tag_list ul {
+    height: 292px;
+  }
+}
+
+#assign_file_list {
+
+  #tag_list ul {
+    height: 396px;
+  }
+
+  &.filtered #tag_list ul {
+    height: 372px;
   }
 }
 
@@ -343,3 +362,28 @@ div#pictures_page_list {
 
   li.even, li.odd { padding: $default-padding }
 }
+
+#overlay_file_list {
+
+  .assign_file_file {
+    display: block;
+    margin-bottom: 4px;
+  }
+
+  > ul {
+    margin: 0;
+
+    a {
+      @extend %text-overflow;
+      display: block;
+      line-height: 25px;
+      text-decoration: none;
+      padding: 0px 4px 2px 4px;
+    }
+
+    .icon {
+      margin-top: -2px;
+      margin-right: 4px;
+    }
+  }
+}