alchemy_cms 3.5.0 → 3.6.0

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

@@ -90,7 +90,7 @@ class window.Alchemy.Dialog
 
   # Adds a spinner into Dialog body
   show_spinner: ->
-    @spinner = Alchemy.Spinner.medium()
+    @spinner = new Alchemy.Spinner('medium')
     @spinner.spin(@dialog_body[0])
 
   # Removes the spinner from Dialog body

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

@@ -136,16 +136,11 @@ Alchemy.ElementEditors =
   # Folds or expands the element editor with the given id.
   #
   toggleFold: (id, callback) ->
-    $el = $("#element_#{id}")
-    spinner = Alchemy.Spinner.small()
-    $toggler = $('> .element-header .ajax-folder', $el)
+    spinner = new Alchemy.Spinner('small')
+    spinner.spin("#element_#{id} > .element-header .ajax-folder")
     $("#element_#{id}_folder").hide()
-    $toggler.prepend(spinner.spin().el)
     $.post Alchemy.routes.fold_admin_element_path(id), =>
-      $("#element_#{id}_folder").show()
-      spinner.stop()
-      if callback?
-        callback.call()
+      callback.call() if callback?
       return
 
   # Updates the title quote if one of the several conditions are met

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

@@ -34,7 +34,7 @@ Alchemy.ElementsWindow =
       false
     height = @resize()
     window.requestAnimationFrame =>
-      spinner = Alchemy.Spinner.medium()
+      spinner = new Alchemy.Spinner('medium')
       spinner.spin @element_area[0]
     $('#main_content').append(@element_window)
     @reload()

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

@@ -12,7 +12,6 @@ Alchemy.GUI =
     Alchemy.watchForDialogs(scope)
     Alchemy.Hotkeys(scope)
     Alchemy.ListFilter(scope)
-    Alchemy.Spinner.watch(scope)
     Alchemy.Autocomplete.tags(scope)
     $('[data-alchemy-char-counter]', scope).each ->
       new Alchemy.CharCounter(this)

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

@@ -1,48 +1,24 @@
-if (typeof(Alchemy) === 'undefined') {
-  var Alchemy = {};
-}
+Alchemy.PageSorter = function() {
+  var $sortables = $('ul#sitemap').find('ul.level_1_children');
 
-(function($) {
+  $sortables.nestedSortable({
+    disableNesting: 'no-nest',
+    forcePlaceholderSize: true,
+    handle: '.handle',
+    items: 'li',
+    listType: 'ul',
+    opacity: 0.5,
+    placeholder: 'placeholder',
+    tabSize: 16,
+    tolerance: 'pointer',
+    toleranceElement: '> div'
+  });
 
-  var PageSorter = {};
-  $.extend(Alchemy, PageSorter);
-
-  Alchemy.PageSorter = {
-
-    init: function() {
-      var $sortables = $('ul#sitemap').find('ul.level_1_children');
-      $sortables.nestedSortable({
-        disableNesting: 'no-nest',
-        forcePlaceholderSize: true,
-        handle: '.handle',
-        items: 'li',
-        listType: 'ul',
-        opacity: 0.5,
-        placeholder: 'placeholder',
-        tabSize: 16,
-        tolerance: 'pointer',
-        toleranceElement: '> div'
-      });
-      $('#save_page_order').click(function(e) {
-        var params = {
-          set: JSON.stringify($sortables.nestedSortable('toHierarchy'))
-        };
-        $.post(Alchemy.routes.order_admin_pages_path, params);
-        return false;
-      });
-      $('#sort_panel .button').click(Alchemy.pleaseWaitOverlay);
-      Alchemy.PageSorter.disableButton();
-    },
-
-    disableButton: function() {
-      var $buttonLink = $('#page_sorting_button a');
-      $buttonLink.removeAttr('onclick');
-      $('#page_sorting_button').addClass('active');
-      $buttonLink.css({
-        cursor: 'default'
-      });
-    }
-
-  }
-
-})(jQuery);
+  $('#save_page_order').click(function(e) {
+    e.preventDefault();
+    Alchemy.Buttons.disable(this);
+    $.post(Alchemy.routes.order_admin_pages_path, {
+      set: JSON.stringify($sortables.nestedSortable('toHierarchy'))
+    });
+  });
+};

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

@@ -38,7 +38,7 @@ Alchemy.PreviewWindow =
 
   _showSpinner: ->
     @reload = $('#reload_preview_button')
-    @spinner = Alchemy.Spinner.small()
+    @spinner = new Alchemy.Spinner('small')
     @reload.html @spinner.spin().el
 
   _hideSpinner: ->

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

@@ -29,13 +29,13 @@ Alchemy.Sitemap =
     self = Alchemy.Sitemap
 
     if foldingId
-      spinner = Alchemy.Spinner.small()
+      spinner = new Alchemy.Spinner('small')
       spinTarget = $('#fold_button_' + foldingId)
       renderTarget = $('#page_' + foldingId)
       renderTemplate = @list_template
       pageId = foldingId
     else
-      spinner = @options.spinner || Alchemy.Spinner.medium()
+      spinner = @options.spinner || new Alchemy.Spinner('medium')
       spinTarget = @sitemap_wrapper
       renderTarget = @sitemap_wrapper
       renderTemplate = @template

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

@@ -0,0 +1,32 @@
+Alchemy.Spinner = function Spinner(size, styles) {
+  var html = HandlebarsTemplates.spinner(),
+      $spinner = $(html),
+      $svg = $spinner.find('svg'),
+      className;
+
+  switch (size) {
+    case 'small': className = 'spinner--small';
+      break;
+    case 'large': className = 'spinner--large';
+      break;
+    default: className = 'spinner--medium';
+  }
+
+  $spinner.addClass(className);
+
+  if (styles) {
+    $svg.find('path').css(styles);
+  }
+
+  this.el = $spinner;
+
+  this.spin = function spin(parent) {
+    if (parent === undefined) parent = 'body';
+    $(parent).append($spinner);
+    return this;
+  };
+
+  this.stop = function stop() {
+    $spinner.remove();
+  };
+};

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

@@ -55,7 +55,7 @@ $.extend Alchemy.Tinymce,
       return
     config = @getConfig(id, textarea[0].classList[1])
     if config
-      spinner = Alchemy.Spinner.small()
+      spinner = new Alchemy.Spinner('small')
       textarea.closest('.tinymce_container').prepend spinner.spin().el
       tinymce.init(config)
     else

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

@@ -0,0 +1 @@
+//= require alchemy/templates/spinner

data/app/assets/javascripts/alchemy/templates/spinner.hbs

@@ -0,0 +1,7 @@
+<div class="spinner">
+  <svg width="100%" viewBox="0 0 28 28">
+    <path class="hex1" d="M5.938,18.07l-5.878-5.9l2.154-8.058l8.024-2.161l5.87,5.9l-2.144,8.058L5.938,18.07z"/>
+    <path class="hex2" d="M19.686,20.785l-4.731-4.754l1.725-6.487l6.468-1.742l4.733,4.754l-1.734,6.487L19.686,20.785z"/>
+    <path class="hex3" d="M11.708,26.294l-3.47-3.485l1.276-4.758l4.74-1.276l3.468,3.485l-1.265,4.758L11.708,26.294z"/>
+  </svg>
+</div>

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

@@ -12,6 +12,7 @@
 }
 
 %thumbnail-background {
+  position: relative;
   display: table-cell;
   background-color: $dark-gray;
   text-align: center;

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

@@ -29,6 +29,7 @@
 @import "alchemy/search";
 @import "alchemy/selects";
 @import "alchemy/sitemap";
+@import "alchemy/spinner";
 @import "alchemy/tables";
 @import "alchemy/lists";
 @import "alchemy/upload";

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

@@ -3,8 +3,7 @@ html {
 
   &.turbolinks-progress-bar::before,
   .turbolinks-progress-bar {
-    background-color: $blue !important;
-    height: 3px !important;
+    background-color: #fff !important;
     z-index: 400001;
   }
 }
@@ -125,11 +124,6 @@ hr {
 
 .center {
   text-align: center;
-
-  .spinner {
-    display: inline-block;
-    vertical-align: middle;
-  }
 }
 
 kbd {

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

@@ -1,5 +1,6 @@
 button, input[type="submit"], a.button, input.button {
   @include button-defaults;
+  position: relative;
 
   &.small {
     padding: $default-padding 3*$default-padding;
@@ -51,11 +52,6 @@ button, input[type="submit"], a.button, input.button {
   overflow: hidden;
   text-align: center;
 
-  .spinner {
-    left: 50% !important; // the spin.js lib calculates false!
-    top: 50% !important;
-  }
-
   .icon {
     display: inline-block;
     vertical-align: middle;

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

@@ -97,10 +97,6 @@
       max-height: 600px;
     }
 
-    .spinner {
-      left: 50% !important;
-    }
-
     form {
       padding: 0;
       position: absolute;

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

@@ -87,6 +87,8 @@
 
 .ajax-folder {
   position: absolute;
+  width: 16px;
+  height: 16px;
   right: 8px;
   top: 8px;
 
@@ -255,11 +257,6 @@
   @extend .disable-user-select;
   cursor: pointer;
 
-  .spinner {
-    top: 9px;
-    right: 9px;
-  }
-
   > .hint-with-icon {
     position: absolute;
     right: 32px;
@@ -582,7 +579,6 @@ div.tinymce_container {
 
   .spinner {
     top: 70px;
-    left: 50%;
   }
 }
 

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

@@ -8,11 +8,6 @@ div#overlay {
   z-index: 400000;
   background-color: rgba(229, 229, 229, 0.4);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #40E5E5E5, endColorstr = #40E5E5E5);
-
-  .spinner {
-    top: 50%;
-    left: 50%;
-  }
 }
 
 div#overlay_text_box {

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

@@ -38,10 +38,6 @@ $image-overlay-transition-easing: ease-in;
       right: $picture-overlay-handle-width;
     }
 
-    .spinner {
-      margin-left: 0;
-    }
-
     .picture-overlay-handle {
       right: 0;
 
@@ -162,15 +158,6 @@ $image-overlay-transition-easing: ease-in;
     margin-left: -4px;
   }
 
-  .spinner {
-    position: absolute !important;
-    left: 50% !important;
-    top: 50% !important;
-    @include transform(translateY(-50%));
-    margin-left: -$image-overlay-form-width/2 + $picture-overlay-handle-width;
-    @include transition(margin-left $image-overlay-transition-duration $image-overlay-transition-easing);
-  }
-
   img {
     display: inline-block;
     height: auto;

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

@@ -1,8 +1,8 @@
 #sort_panel {
-  background: $medium-gray;
-  padding: 45px 0 8px 0;
+  background: $light-gray;
+  padding: 47px 0 8px 0;
   position: fixed;
-  top: 27px;
+  top: 29px;
   left: 0;
   z-index: 1;
   width: 100%;
@@ -13,19 +13,14 @@
   }
 
   .buttons {
-    margin-left: 163px;
+    margin: 0 12px 0 163px;
+    text-align: right;
   }
 }
 
 #sitemap-wrapper {
   position: relative;
   min-height: 100%;
-
-  .loading .spinner {
-    position: absolute !important;
-    top: 50% !important;
-    left: 50% !important;
-  }
 }
 
 .sitemap_pagename_link {
@@ -357,27 +352,3 @@ a.folder_link {
 .elements_from_page_selector {
   width: 100%;
 }
-
-.elements_for_page {
-  position: absolute;
-  right: 32px;
-  top: -7px;
-  z-index: 15;
-  background-color: white;
-  width: 280px;
-  height: 33px;
-  padding: $default-padding;
-  border: $default-border;
-  box-shadow: #9ea09f 0px 0px 4px;
-  @extend %rounded-border;
-
-  .spinner {
-    top: 17px !important;
-    left: 50% !important;
-    margin-left: $default-margin;
-  }
-
-  .alchemy_selectbox {
-    width: 252px;
-  }
-}

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

@@ -0,0 +1,52 @@
+.spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  line-height: 1;
+
+  path {
+    fill: $dark-gray;
+    opacity: 1;
+    animation: spinner 1s infinite ease-in-out both;
+  }
+
+  &.spinner--tiny {
+    width: 8px;
+    height: 8px;
+  }
+
+  &.spinner--small {
+    width: 16px;
+    height: 16px;
+  }
+
+  &.spinner--medium {
+    width: 32px;
+    height: 32px;
+  }
+
+  &.spinner--large {
+    width: 48px;
+    height: 48px;
+  }
+
+  .hex2 {
+    animation-delay: 0.15s;
+  }
+
+  .hex3 {
+    animation-delay: 0.3s;
+  }
+}
+
+@keyframes spinner {
+  0%, 100% {
+    opacity: 1;
+  }
+
+  25%, 75% {
+    opacity: 0.1;
+  }
+}