alchemy_cms 3.2.1 → 3.3.0.rc1

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

@@ -2,12 +2,14 @@
 #
 $.extend Alchemy.Tinymce,
 
+  customConfigs: {}
+
   # Returns default config for a tinymce editor.
   #
   getDefaultConfig: (id) ->
     config = @defaults
     config.language = Alchemy.locale
-    config.selector = "textarea#tinymce_#{id}"
+    config.selector = "#tinymce_#{id}"
     config.init_instance_callback = @initInstanceCallback
     return config
 
@@ -15,10 +17,12 @@ $.extend Alchemy.Tinymce,
   #
   # It uses the +.getDefaultConfig+ and merges the custom parts.
   #
-  getCustomConfig: (id, selector) ->
+  getConfig: (id, selector) ->
     editor_config = @customConfigs[selector]
     if editor_config
       $.extend({}, @getDefaultConfig(id), editor_config)
+    else
+      @getDefaultConfig(id)
 
   # Initializes all TinyMCE editors with given ids
   #
@@ -29,21 +33,26 @@ $.extend Alchemy.Tinymce,
     for id in ids
       @initEditor(id)
 
+  # Initializes TinyMCE editor with given options
+  #
+  initWith: (options) ->
+    tinymce.init $.extend({}, @defaults, options)
+    return
+
   # Initializes one specific TinyMCE editor
   #
   # @param id [Number]
   #   - Editor id that should be initialized.
   #
   initEditor: (id) ->
-    textarea = $("textarea#tinymce_#{id}")
-    return if textarea.length == 0
-    if selector = textarea[0].classList[1]
-      config = @getCustomConfig(id, selector)
-    else
-      config = @getDefaultConfig(id)
+    textarea = $("#tinymce_#{id}")
+    if textarea.length == 0
+      Alchemy.log_error "Could not initialize TinyMCE for textarea#tinymce_#{id}!"
+      return
+    config = @getConfig(id, textarea[0].classList[1])
     if config
       spinner = Alchemy.Spinner.small()
-      textarea.parents('.tinymce_container').prepend spinner.spin().el
+      textarea.closest('.tinymce_container').prepend spinner.spin().el
       tinymce.init(config)
     else
       Alchemy.debug('No tinymce configuration found for', id)
@@ -52,7 +61,7 @@ $.extend Alchemy.Tinymce,
   #
   initInstanceCallback: (inst) ->
     $this = $("##{inst.id}")
-    parent = $this.parents('.element_editor')
+    parent = $this.closest('.element-editor')
     parent.find('.spinner').remove()
     inst.on 'change', (e) ->
       Alchemy.setElementDirty(parent)
@@ -64,3 +73,10 @@ $.extend Alchemy.Tinymce,
       editor = tinymce.get("tinymce_#{id}")
       if editor
         editor.remove()
+
+  # Remove all tinymce instances for given selector
+  removeFrom: (selector) ->
+    $(selector).each ->
+      tinymce.get(this.id).remove()
+      return
+    return

data/app/assets/javascripts/alchemy/{alchemy.windows.js.coffee → alchemy.trash_window.js.coffee}

@@ -1,17 +1,5 @@
 $.extend Alchemy,
 
-  # Opens an image in a dialog
-  # Used by the picture library
-  zoomImage: (url, title, width, height) ->
-    Alchemy.openDialog url,
-      size: "#{width}x#{height}"
-      title: title
-      padding: false
-      overflow: 'hidden'
-      ready: (dialog) ->
-        Alchemy.ImageLoader dialog,
-          color: '#000'
-
   # Trash window methods
   TrashWindow:
 
@@ -35,7 +23,7 @@ $.extend Alchemy,
       return unless @current?
       $icon = $("#element_trash_button .icon")
       # Is the trash window open?
-      if $("#trash_items div.element_editor").not(".dragged").length is 0
+      if $("#trash_items div.element-editor").not(".dragged").length is 0
         $icon.removeClass("full")
       else
         $icon.addClass("full")

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

@@ -10,6 +10,7 @@ window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
 Alchemy.Uploader = (settings) ->
   totalFilesCount = 0
   completedUploads = 0
+  $dropZone = $(settings.dropzone)
 
   # Normalize file types regex
   file_types = if settings.file_types == '*' then '.+' else settings.file_types
@@ -18,31 +19,30 @@ Alchemy.Uploader = (settings) ->
   $(document).bind 'drop dragover', (e) ->
     e.preventDefault()
 
-  # Hide the upload form submit button
-  $('.upload-button').hide()
+  $dropZone.on 'dragleave', ->
+    $dropZone.removeClass('dragover')
 
   # Init jquery.fileupload
-  $("#fileupload").fileupload
-    dropZone: '#dropbox'
+  $(".fileupload").fileupload
+    dropZone: $dropZone
     dataType: 'json'
-    filesContainer: $('#uploadProgressContainer')
+    filesContainer: $('.upload-progress-container')
     acceptFileTypes: new RegExp("(.|/)(#{file_types})", "i")
-    maxNumberOfFiles: settings.file_upload_limit
-    maxFileSize: settings.file_size_limit * 1000000
-    formData: (form) ->
-      form_data = form.serializeArray()
-      $.merge(form_data, settings.post_params)
-      form_data
+    maxNumberOfFiles: Alchemy.uploader_defaults.file_upload_limit
+    maxFileSize: Alchemy.uploader_defaults.file_size_limit * 1000000
     getNumberOfFiles: ->
       @filesContainer
         .children()
-        .not('.progressBarInProgress').length - 1
+        .not('.progress-bar-in-progress').length - 1
+    dragover: ->
+      $dropZone.addClass('dragover')
     add: (e, data) ->
       $this = $(this)
       data.context = new Alchemy.FileProgress(data.files[0])
       totalFilesCount = data.originalFiles.length
       $('.total-files-count').text(totalFilesCount)
-      $('.overall-upload').show()
+      $dropZone.removeClass('dragover').addClass('upload-in-progress')
+      $('.overall-upload').addClass('visible')
       # trigger validations
       data.process -> $this.fileupload('process', data)
       if data.files.error
@@ -80,10 +80,8 @@ Alchemy.Uploader = (settings) ->
       if completedUploads == totalFilesCount
         completedUploads = 0
         totalFilesCount = 0
-        # wait 2 seconds before calling callback
-        window.setTimeout ->
-          settings.complete()
-        , 2000
+        $('.overall-upload').removeClass('visible')
+        settings.complete()
     fail: (e, data) ->
       data.context.setError()
       response_data = data.xhr().response

data/app/assets/javascripts/tinymce/plugins/alchemy_link/plugin.min.js

@@ -5,15 +5,15 @@ tinymce.PluginManager.add('alchemy_link', function(editor, url) {
     shortcut: 'Ctrl+K',
     stateSelector: 'a[href]',
     onclick: function () {
-      var link_object = {
+      var linkObject = {
         node: editor.selection.getNode(),
         bookmark: editor.selection.getBookmark(),
         selection: editor.selection,
         editor: editor
       };
-      var link_dialog = new Alchemy.LinkDialog(link_object);
+      var linkDialog = new Alchemy.LinkDialog(linkObject);
       editor.focus();
-      link_dialog.open();
+      linkDialog.open();
     }
   });
 });

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

@@ -71,7 +71,7 @@
   border-left: 1px solid $default-border-color;
   border-bottom: 1px solid $border-inset-color;
   border-right: 1px solid $border-inset-color;
-  width: 218px;
+  width: 100%;
   font-size: 12px;
   line-height: 12px;
   height: 29px;

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

@@ -60,6 +60,17 @@
   @extend .border-box-sizing;
 }
 
+@mixin form-hint($background-color: $light_yellow, $border-color: $medium-gray) {
+  font-size: 10px;
+  line-height: 1.5em;
+  padding: $default-padding;
+  background-color: $background-color;
+  border: 1px solid $border-color;
+  display: block;
+  clear: both;
+  @extend %rounded-border;
+}
+
 @mixin animate-left {
   -webkit-transition: left 0.15s ease-in-out;
   -moz-transition: left 0.15s ease-in-out;
@@ -110,3 +121,19 @@
     line-height: 8px;
   }
 }
+
+@mixin linked-button($border-radius: $default-border-radius) {
+  @include sassy-button(
+    'matte',
+    $border-radius,
+    $sb-font-size,
+    $linked-button-color,
+    $sb-second-color,
+    $sb-text-color,
+    $sb-text-style,
+    $sb-pseudo-states,
+    $sb-ie-support
+  );
+  padding: 3px;
+  border-color: $default-border-color;
+}

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

@@ -33,6 +33,7 @@ $button-hover-bg-color: #e6f0f5;
 $button-border-color: #9a9a9a;
 $button-hover-border-color: #888888;
 $button-text-shadow: $white 1px 1px 0;
+$linked-button-color: #ffd77a;
 
 $sb-base-color:      $white;
 $sb-border-radius:   $default-border-radius;

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

@@ -18,6 +18,7 @@
 @import "alchemy/form_fields";
 @import "alchemy/frame";
 @import "alchemy/icons";
+@import "alchemy/image_library";
 @import "alchemy/modules";
 @import "alchemy/notices";
 @import "alchemy/pagination";

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

@@ -14,23 +14,6 @@ div#image_assign_filter_and_image_sizing {
   }
 }
 
-#zoomed_picture_background {
-  text-align: center;
-  height: 100%;
-
-  .spinner {
-    position: absolute !important;
-    left: 50% !important;
-    top: 50% !important;
-  }
-
-  .zoomed_picture {
-    max-width: 100%;
-    max-height: 100%;
-    margin-bottom: -4px;
-  }
-}
-
 .picture_thumbnail {
   padding: $default-padding;
   margin: 2px 1px 2px 2px;
@@ -178,26 +161,6 @@ div.assign_image_list_image {
     }
   }
 
-  &.edit {
-    top: auto;
-    right: 4px;
-    bottom: 24px;
-
-    a {
-      background: image-url('alchemy/icons.png') no-repeat -160px -167px;
-    }
-  }
-
-  &.info {
-    top: auto;
-    left: 4px;
-    bottom: 24px;
-
-    a {
-      background: image-url('alchemy/icons.png') no-repeat -64px -168px;
-    }
-  }
-
   a {
     display: block;
     width: 16px;
@@ -338,26 +301,6 @@ div#filter_bar {
   }
 }
 
-div#pictures_page_list {
-  max-height: 100px;
-  overflow: auto;
-
-  h3 { padding: 0 $default-padding }
-
-  ul {
-    @include form-value-display;
-    list-style-type: none;
-  }
-
-  li {
-    padding: 0 $default-padding;
-
-    &.even { background: #F7F7F7 }
-
-    &:last-child { margin-bottom: 0 }
-  }
-}
-
 #overlay_file_list {
 
   &.with_tag_list {

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

@@ -395,16 +395,6 @@ div.all_rights {
   margin: 2*$default-padding;
 }
 
-div.element_head span.ajax_folder span.error_icon {
-  float: left;
-  width: 14px;
-  height: 15px;
-  text-align: center;
-  background-color: white;
-  border: 1px solid #935b5b;
-  color: #935b5b;
-}
-
 div#images {
   margin-top: 16px;
   margin-bottom: 8px;
@@ -412,14 +402,7 @@ div#images {
 }
 
 .foot_note, form .input .hint {
-  font-size: 10px;
-  line-height: 1.5em;
-  padding: $default-padding;
-  background-color: $light_yellow;
-  border: 1px solid $medium-gray;
-  @extend %rounded-border;
-  display: block;
-  clear: both;
+  @include form-hint;
 }
 
 #all_files td.name a {

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

@@ -2,14 +2,13 @@ button, input[type="submit"], a.button, input.button {
   @include button-defaults;
 
   &.small {
-    padding: 2px 2*$default-padding;
-    @include border-radius(10px);
+    padding: $default-padding 3*$default-padding;
     vertical-align: inherit;
     line-height: 4*$default-padding;
     font-size: inherit;
 
     &.with_icon {
-      padding: 2px 2*$default-padding 2px $default-padding;
+      padding: $default-padding 3*$default-padding $default-padding 6px;
     }
   }
 
@@ -49,8 +48,9 @@ button, input[type="submit"], a.button, input.button {
 }
 
 .icon_button {
-  width: 21px;
-  height: 21px;
+  @include box-sizing(border-box);
+  width: 27px;
+  height: 27px;
   line-height: 21px;
   margin: 0;
   padding: 3px;
@@ -58,8 +58,8 @@ button, input[type="submit"], a.button, input.button {
   text-align: center;
 
   .spinner {
-    left: 50%;
-    top: 50%;
+    left: 50% !important; // the spin.js lib calculates false!
+    top: 50% !important;
   }
 
   .icon {
@@ -96,13 +96,10 @@ button, input[type="submit"], a.button, input.button {
     @include box-shadow(none);
 
     .icon {
-      left: auto;
       position: absolute;
-      left: 1px;
-      top: 3px;
-      width: 8px;
+      top: 50%;
       height: 8px;
-      margin-top: 0;
+      @include transform(translateX(-50%) translateY(-50%));
 
       &:before {
         line-height: 10px;
@@ -117,13 +114,6 @@ button, input[type="submit"], a.button, input.button {
       border: $default-border-width $default-border-style $button-hover-border-color;
       @include border-radius($default-border-radius);
       background: $button-hover-bg-color;
-      top: -1px;
-      right: -1px;
-
-      .icon {
-        left: 1px;
-        top: 3px;
-      }
     }
   }
 
@@ -153,9 +143,7 @@ button, input[type="submit"], a.button, input.button {
   }
 
   &.linked {
-    @include sassy-button('matte', $sb-border-radius, $sb-font-size, #ffd77a, $sb-second-color, $sb-text-color, $sb-text-style, $sb-pseudo-states, $sb-ie-support);
-    padding: 3px;
-    border-color: $default-border-color;
+    @include linked-button;
   }
 
   &:focus {
@@ -168,7 +156,10 @@ button.icon_button {
   border: 0 none;
   @include border-radius(0);
   @include box-shadow(none);
-  @include box-sizing(content-box);
+
+  &:disabled, &.disabled {
+    background: transparent;
+  }
 }
 
 #new_element button.button {
@@ -196,6 +187,7 @@ button.icon_button {
     border: $default-border;
     padding: 2px;
     @extend %rounded-border;
+    cursor: pointer;
 
     &:focus {
       border: 0;
@@ -225,8 +217,8 @@ button.icon_button {
 .button_with_label, .button_group {
 
   .icon_button {
-    width: 23px;
-    height: 23px;
+    width: 29px;
+    height: 29px;
     line-height: 23px;
   }
 
@@ -244,6 +236,7 @@ button.icon_button {
     line-height: 1;
     @include box-shadow(0 0 4px $default-border-color);
     white-space: nowrap;
+    pointer-events: none;
 
     &:before {
       content: '';
@@ -253,6 +246,18 @@ button.icon_button {
       border: 5px transparent solid;
       border-top-color: $dark-gray;
     }
+
+    &.right-aligned {
+      left: auto;
+      margin-left: auto;
+      right: 50%;
+      margin-right: -13px;
+
+      &:before {
+        left: auto;
+        right: 8px;
+      }
+    }
   }
 
   &:hover label { display: block }