alchemy_cms 2.2.rc13 → 2.2.rc14

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

@@ -2,32 +2,35 @@ if (typeof(Alchemy) === 'undefined') {
   var Alchemy = {};
 }
 
-(function ($) {
+(function($) {
 
   $.extend(Alchemy, {
 
-    getOverlaySpinner:function (options) {
+    getOverlaySpinner: function(options) {
       var defaults = {
-        x:'400',
-        y:'300'
+        x: '400',
+        y: '300'
       };
       var settings = $.extend({}, defaults, options);
-      var $spinner_container = $('<div class="spinner_container"/>').css({width:settings.x, height:settings.y});
+      var $spinner_container = $('<div class="spinner_container"/>').css({
+        width: settings.x,
+        height: settings.y
+      });
       var $spinner = $('<img src="/assets/alchemy/ajax_loader.gif" />');
       $spinner_container.append($spinner);
       $spinner.css({
-        position:'absolute',
-        width:32,
-        height:32,
-        left:'50%',
-        top:'50%',
-        marginLeft:'-16px',
-        marginTop:'-16px'
+        position: 'absolute',
+        width: 32,
+        height: 32,
+        left: '50%',
+        top: '50%',
+        marginLeft: '-16px',
+        marginTop: '-16px'
       });
       return $spinner_container;
     },
 
-    AjaxErrorHandler:function ($dialog, status, textStatus, errorThrown) {
+    AjaxErrorHandler: function($dialog, status, textStatus, errorThrown) {
       var $div = $('<div class="with_padding" />');
       var $errorDiv = $('<div id="errorExplanation" />');
       $dialog.html($div);
@@ -41,9 +44,12 @@ if (typeof(Alchemy) === 'undefined') {
       }
     },
 
-    ToolbarButton:function (options) {
-      var $btn = $('<div class="button_with_label"></div>'), $lnk;
-      if (options.buttonId) $btn.attr({'id':options.buttonId});
+    ToolbarButton: function(options) {
+      var $btn = $('<div class="button_with_label"></div>'),
+        $lnk;
+      if (options.buttonId) $btn.attr({
+        'id': options.buttonId
+      });
       $lnk = $('<a title="' + options.buttonTitle + '" class="icon_button"></a>');
       $lnk.click(options.onClick);
       $lnk.append('<span class="icon ' + options.iconClass + '"></span>');
@@ -52,82 +58,58 @@ if (typeof(Alchemy) === 'undefined') {
       return $btn;
     },
 
-    openConfirmWindow:function (options) {
+    openConfirmWindow: function(options) {
       var $confirmation = $('<div style="display:none" id="alchemyConfirmation"></div>');
       $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:function () {
-              $(this).dialog("close");
-            }
-          },
-          {
-            text:options.okLabel,
-            click:function () {
-              $(this).dialog("close");
-              options.okCallback();
-            }
+        resizable: false,
+        minHeight: 100,
+        minWidth: 300,
+        modal: true,
+        title: options.title,
+        show: "fade",
+        hide: "fade",
+        buttons: [{
+          text: options.cancelLabel,
+          click: function() {
+            $(this).dialog("close");
+            Alchemy.enableButton('.disabled.button');
           }
-        ],
-        open:function () {
+        }, {
+          text: options.okLabel,
+          click: function() {
+            $(this).dialog("close");
+            options.okCallback();
+          }
+        }],
+        open: function() {
           Alchemy.ButtonObserver('#alchemyConfirmation .button');
         },
-        close:function () {
+        close: function() {
           $('#alchemyConfirmation').remove();
         }
       });
     },
 
-    confirmToDeleteWindow:function (url, title, message, okLabel, cancelLabel) {
-      var $confirmation = $('<div style="display:none" id="alchemyConfirmation"></div>');
-      $confirmation.appendTo('body');
-      $confirmation.html('<p>' + message + '</p>');
-      Alchemy.ConfirmationWindow = $confirmation.dialog({
-        resizable:false,
-        minHeight:100,
-        minWidth:300,
-        modal:true,
-        title:title,
-        show:"fade",
-        hide:"fade",
-        buttons:[
-          {
-            text:cancelLabel,
-            click:function () {
-              $(this).dialog("close");
-            }
-          },
-          {
-            text:okLabel,
-            click:function () {
-              $(this).dialog("close");
-              $.ajax({
-                url:url,
-                type:'DELETE'
-              });
-            }
-          }
-        ],
-        open:function () {
-          Alchemy.ButtonObserver('#alchemyConfirmation .button');
-        },
-        close:function () {
-          $('#alchemyConfirmation').remove();
+    confirmToDeleteWindow: function(url, title, message, okLabel, cancelLabel) {
+      Alchemy.openConfirmWindow({
+        message: message,
+        title: title,
+        okLabel: okLabel,
+        cancelLabel: cancelLabel,
+        okCallback: function() {
+          $(this).dialog("close");
+          Alchemy.pleaseWaitOverlay();
+          $.ajax({
+            url: url,
+            type: 'DELETE'
+          });
         }
       });
     },
 
-    openWindow:function (action_url, title, size_x, size_y, resizable, modal, overflow) {
+    openWindow: function(action_url, title, size_x, size_y, resizable, modal, overflow) {
       overflow == undefined ? overflow = false : overflow = overflow;
       if (size_x === 'fullscreen') {
         size_x = $(window).width() - 50;
@@ -135,55 +117,63 @@ if (typeof(Alchemy) === 'undefined') {
       }
       var $dialog = $('<div style="display:none" id="alchemyOverlay"></div>');
       $dialog.appendTo('body');
-      $dialog.html(Alchemy.getOverlaySpinner({x:size_x === 'auto' ? 400 : size_x, y:size_y === 'auto' ? 300 : size_y}));
+      $dialog.html(Alchemy.getOverlaySpinner({
+        x: size_x === 'auto' ? 400 : size_x,
+        y: size_y === 'auto' ? 300 : size_y
+      }));
       Alchemy.CurrentWindow = $dialog.dialog({
-        modal:modal,
-        minWidth:size_x === 'auto' ? 400 : size_x,
-        minHeight:size_y === 'auto' ? 300 : size_y,
-        title:title,
-        resizable:resizable,
-        show:"fade",
-        hide:"fade",
-        width:size_x,
-        open:function (event, ui) {
+        modal: modal,
+        minWidth: size_x === 'auto' ? 400 : size_x,
+        minHeight: size_y === 'auto' ? 300 : size_y,
+        title: title,
+        resizable: resizable,
+        show: "fade",
+        hide: "fade",
+        width: size_x,
+        open: function(event, ui) {
           $.ajax({
-            url:action_url,
-            success:function (data, textStatus, XMLHttpRequest) {
+            url: action_url,
+            success: function(data, textStatus, XMLHttpRequest) {
               $dialog.html(data);
-              $dialog.css({overflow:overflow ? 'visible' : 'auto'});
-              $dialog.dialog('widget').css({overflow:overflow ? 'visible' : 'hidden'});
+              $dialog.css({
+                overflow: overflow ? 'visible' : 'auto'
+              });
+              $dialog.dialog('widget').css({
+                overflow: overflow ? 'visible' : 'hidden'
+              });
               if (size_x === 'auto') {
                 $dialog.dialog('widget').css({
-                  left:(($(window).width() / 2) - ($dialog.width() / 2))
+                  left: (($(window).width() / 2) - ($dialog.width() / 2))
                 });
               }
               if (size_y === 'auto') {
                 $dialog.dialog('widget').css({
-                  top:($(window).height() - $dialog.dialog('widget').height()) / 2
+                  top: ($(window).height() - $dialog.dialog('widget').height()) / 2
                 });
               }
               Alchemy.SelectBox('#alchemyOverlay select.alchemy_selectbox');
               Alchemy.Datepicker('#alchemyOverlay input.date, #alchemyOverlay input[type="date"]');
               Alchemy.ButtonObserver('#alchemyOverlay .button');
+              Alchemy.overlayObserver('#alchemyOverlay');
             },
-            error:function (XMLHttpRequest, textStatus, errorThrown) {
+            error: function(XMLHttpRequest, textStatus, errorThrown) {
               Alchemy.AjaxErrorHandler($dialog, XMLHttpRequest.status, textStatus, errorThrown);
             },
-            complete:function (jqXHR, textStatus) {
+            complete: function(jqXHR, textStatus) {
               Alchemy.enableButton('.disabled.button');
             }
           });
         },
-        beforeClose:function () {
+        beforeClose: function() {
           $(".sb.open").triggerAll("close");
         },
-        close:function () {
+        close: function() {
           $dialog.remove();
         }
       });
     },
 
-    closeCurrentWindow:function () {
+    closeCurrentWindow: function() {
       if (Alchemy.CurrentWindow) {
         Alchemy.CurrentWindow.dialog('close');
         Alchemy.CurrentWindow = null;
@@ -193,7 +183,7 @@ if (typeof(Alchemy) === 'undefined') {
       return true;
     },
 
-    zoomImage:function (url, title, width, height) {
+    zoomImage: function(url, title, width, height) {
       var window_height = height;
       var window_width = width;
       var $doc_width = $(window).width();
@@ -206,79 +196,117 @@ if (typeof(Alchemy) === 'undefined') {
       }
       var $dialog = $('<div style="display:none" id="alchemyOverlay"></div>');
       $dialog.appendTo('body');
-      $dialog.html(Alchemy.getOverlaySpinner({x:width, y:height}));
+      $dialog.html(Alchemy.getOverlaySpinner({
+        x: width,
+        y: height
+      }));
       $dialog.dialog({
-        modal:false,
-        minWidth:window_width < 320 ? 320 : window_width,
-        minHeight:window_height < 240 ? 240 : window_height,
-        title:title,
-        show:"fade",
-        hide:"fade",
-        open:function (event, ui) {
+        modal: false,
+        minWidth: window_width < 320 ? 320 : window_width,
+        minHeight: window_height < 240 ? 240 : window_height,
+        title: title,
+        show: "fade",
+        hide: "fade",
+        open: function(event, ui) {
           $.ajax({
-            url:url,
-            success:function (data, textStatus, XMLHttpRequest) {
+            url: url,
+            success: function(data, textStatus, XMLHttpRequest) {
               $dialog.html(data);
             },
-            error:function (XMLHttpRequest, textStatus, errorThrown) {
+            error: function(XMLHttpRequest, textStatus, errorThrown) {
               Alchemy.AjaxErrorHandler($dialog, XMLHttpRequest.status, textStatus, errorThrown);
             }
           });
         },
-        close:function () {
+        close: function() {
           $dialog.remove();
         }
       });
       return false;
     },
 
-    openTrashWindow:function (page_id, title) {
-      var size_x = 380, size_y = 270;
+    openTrashWindow: function(page_id, title) {
+      var size_x = 380,
+        size_y = 270;
       if (size_x === 'fullscreen') {
         size_x = $(window).width() - 50;
         size_y = $(window).height() - 50;
       }
       var $dialog = $('<div style="display:none" id="alchemyTrashWindow"></div>');
       $dialog.appendTo('body');
-      $dialog.html(Alchemy.getOverlaySpinner({x:size_x, y:size_y}));
+      $dialog.html(Alchemy.getOverlaySpinner({
+        x: size_x,
+        y: size_y
+      }));
 
       Alchemy.trashWindow = $dialog.dialog({
-        modal:false,
-        width:380,
-        minHeight:450,
-        maxHeight:$(window).height() - 50,
-        title:title,
-        resizable:false,
-        show:"fade",
-        hide:"fade",
-        open:function (event, ui) {
+        modal: false,
+        width: 380,
+        minHeight: 450,
+        maxHeight: $(window).height() - 50,
+        title: title,
+        resizable: false,
+        show: "fade",
+        hide: "fade",
+        open: function(event, ui) {
           $.ajax({
-            url:Alchemy.routes.admin_trash_path(page_id),
-            success:function (data, textStatus, XMLHttpRequest) {
+            url: Alchemy.routes.admin_trash_path(page_id),
+            success: function(data, textStatus, XMLHttpRequest) {
               $dialog.html(data);
               // Need this for DragnDrop elements into elements window.
               // Badly this is screwing up maxHeight option
-              $dialog.css({overflow:'visible'}).dialog('widget').css({overflow:'visible'});
+              $dialog.css({
+                overflow: 'visible'
+              }).dialog('widget').css({
+                overflow: 'visible'
+              });
+              Alchemy.overlayObserver('#alchemyTrashWindow');
             },
-            error:function (XMLHttpRequest, textStatus, errorThrown) {
+            error: function(XMLHttpRequest, textStatus, errorThrown) {
               Alchemy.AjaxErrorHandler($dialog, XMLHttpRequest.status, textStatus, errorThrown);
             }
           });
         },
-        close:function () {
+        close: function() {
           $dialog.remove();
         }
       });
     },
 
-    refreshTrashWindow:function (page_id) {
+    refreshTrashWindow: function(page_id) {
       if ($('#alchemyTrashWindow').length > 0) {
-        $('#alchemyTrashWindow').html(Alchemy.getOverlaySpinner({x:380, y:270}));
-        $.get(Alchemy.routes.admin_trash_path(page_id), function (html) {
+        $('#alchemyTrashWindow').html(Alchemy.getOverlaySpinner({
+          x: 380,
+          y: 270
+        }));
+        $.get(Alchemy.routes.admin_trash_path(page_id), function(html) {
           $('#alchemyTrashWindow').html(html);
         });
       }
+    },
+
+    overlayObserver: function(scope) {
+      $('a[data-alchemy-overlay]', scope).on('click', function(event) {
+        var $this = $(this);
+        var options = $this.data('alchemy-overlay');
+        event.preventDefault();
+        Alchemy.openWindow($this.attr('href'), options.title, options.size_x, options.size_y, options.resizable, options.overflow);
+        return false;
+      });
+
+      $('a[data-alchemy-confirm]', scope).on('click', function(event) {
+        var $this = $(this);
+        var options = $this.data('alchemy-confirm');
+        event.preventDefault();
+        Alchemy.confirmToDeleteWindow($this.attr('href'), options.title, options.message, options.ok_label, options.cancel_label);
+        return false;
+      });
     }
 
   });
+
+  $(document).ready(function() {
+    Alchemy.overlayObserver();
+  });
+
 })(jQuery);

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

@@ -1459,7 +1459,7 @@ div#overlay_toolbar a.button:active {
       border: $default-border;
       background-color: white;
       @include rounded-corner;
-      &.element {
+      &.elements {
         background-color: #E5DCCA;
         border: 1px solid #BBA589;
       }
@@ -1467,6 +1467,12 @@ div#overlay_toolbar a.button:active {
   }
 }
 
+#trash_items {
+  height: 310px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
 .mceEditor table {
   border-spacing: 0 !important;
 }

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

@@ -1,37 +1,43 @@
 @import "alchemy/defaults";
 
-a.button.small.cloned-button img {
-  display: inline-block;
-  float: none;
-  position: relative;
-  height: 16px;
-  width: 16px;
-  top: -1px;
-}
-
 a.button {
   padding: 5px 8px;
   text-decoration: none;
   float: left;
   line-height: 13px;
-}
 
-a.button.small {
-  height: 14px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  border-radius: 10px;
-  -o-border-radius: 10px;
-  -ms-border-radius: 10px;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-}
+  &.small {
+    height: 14px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    border-radius: 10px;
+    -o-border-radius: 10px;
+    -ms-border-radius: 10px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+
+    &.cloned-button img {
+      display: inline-block;
+      float: none;
+      position: relative;
+      height: 16px;
+      width: 16px;
+      top: -1px;
+    }
 
-a.small.button.with_icon span.icon {
-  margin-top: -5px;
-  position: relative;
-  top: 3px;
-  left: -1px;
+    &.with_icon span.icon {
+      margin-top: -5px;
+      position: relative;
+      top: 3px;
+      left: -1px;
+    }
+  }
+
+  span.icon {
+    vertical-align: -2px;
+    margin-bottom: -2px;
+    margin-left: -4px;
+  }
 }
 
 input.button,