alchemy_cms 3.4.2 → 3.5.0.rc1

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

@@ -157,6 +157,7 @@ class window.Alchemy.LinkDialog extends Alchemy.Dialog
 
   # Handles actions for internal link tab.
   selectInternalLinkTab: ->
+    return unless @$link
     url = @$link.attr('href').split('#')
     urlname = url[0]
     anchor = url[1]

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

@@ -1,6 +1,8 @@
 window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
 
 Alchemy.PreviewWindow =
+  MIN_WIDTH: 240
+  HEIGHT: 75 # Top menu height
 
   init: (url) ->
     $iframe = $("<iframe name=\"alchemy_preview_window\" src=\"#{url}\" id=\"alchemy_preview_window\" frameborder=\"0\"/>")
@@ -14,13 +16,9 @@ Alchemy.PreviewWindow =
     @resize()
 
   resize: ->
-    $window = $(window)
-    if Alchemy.ElementsWindow.hidden
-      width = $window.width() - 64
-    else
-      width = $window.width() - 466
-    height = $window.height() - 73
-    width = 240 if width < 240
+    width = @_calculateWidth()
+    height = $(window).height() - @HEIGHT
+    width = @MIN_WIDTH if width < @MIN_WIDTH
     @currentWidth = width
     @currentWindow.css
       width: width
@@ -54,5 +52,11 @@ Alchemy.PreviewWindow =
     $reload.click =>
       @refresh()
 
+  _calculateWidth: ->
+    width = $(window).width() - $('#left_menu').width()
+    unless Alchemy.ElementsWindow.hidden
+      width -= $('#alchemy_elements_window').width()
+    return width
+
 Alchemy.reloadPreview = ->
   Alchemy.PreviewWindow.refresh()

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

@@ -7,7 +7,7 @@ Alchemy.Sitemap =
 
   # Storing some objects.
   init: (options) ->
-    @search_field = $("#search_field")
+    @search_field = $(".search_input_field")
     @filter_field_clear = $('.js_filter_field_clear')
     @display = $('#page_filter_result')
     @sitemap_wrapper = $('#sitemap-wrapper p.loading')

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

@@ -45,7 +45,11 @@ $.extend Alchemy.Tinymce,
   #   - Editor id that should be initialized.
   #
   initEditor: (id) ->
-    textarea = $("#tinymce_#{id}")
+    editor_id = "tinymce_#{id}"
+    textarea = $("##{editor_id}")
+    editor = tinymce.get(editor_id)
+    # remove editor instance, if already initialized
+    editor.remove() if editor
     if textarea.length == 0
       Alchemy.log_error "Could not initialize TinyMCE for textarea#tinymce_#{id}!"
       return
@@ -63,7 +67,7 @@ $.extend Alchemy.Tinymce,
     $this = $("##{inst.id}")
     parent = $this.closest('.element-editor')
     parent.find('.spinner').remove()
-    inst.on 'change', (e) ->
+    inst.on 'dirty', (e) ->
       Alchemy.setElementDirty(parent)
 
   # Removes the TinyMCE editor from given dom ids.
@@ -77,6 +81,7 @@ $.extend Alchemy.Tinymce,
   # Remove all tinymce instances for given selector
   removeFrom: (selector) ->
     $(selector).each ->
-      tinymce.get(this.id).remove()
+      elem = tinymce.get(this.id)
+      elem.remove() if elem
       return
     return

data/app/assets/javascripts/alchemy/alchemy.tooltips.coffee

@@ -0,0 +1,10 @@
+window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
+
+Alchemy.Tooltips = (scope) ->
+  $('[data-alchemy-tooltip]', scope).each ->
+    $el = $(this)
+    text = $el.data('alchemy-tooltip')
+    $el.wrap('<span class="with-hint"/>')
+    $el.after('<span class="hint-bubble">'+text+'</span>')
+    return
+  return

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

@@ -10,6 +10,9 @@ window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
 Alchemy.Uploader = (settings) ->
   totalFilesCount = 0
   completedUploads = 0
+  $filesContainer = $('.upload-progress-container')
+  selector = settings.selector || '.fileupload'
+  $fields = $(selector)
   $dropZone = $(settings.dropzone)
 
   # Normalize file types regex
@@ -22,79 +25,107 @@ Alchemy.Uploader = (settings) ->
   $dropZone.on 'dragleave', ->
     $dropZone.removeClass('dragover')
 
-  # Init jquery.fileupload
-  $(".fileupload").fileupload
-    dropZone: $dropZone
-    dataType: 'json'
-    filesContainer: $('.upload-progress-container')
-    acceptFileTypes: new RegExp("(.|/)(#{file_types})", "i")
-    maxNumberOfFiles: Alchemy.uploader_defaults.file_upload_limit
-    maxFileSize: Alchemy.uploader_defaults.file_size_limit * 1000000
-    getNumberOfFiles: ->
-      @filesContainer
-        .children()
-        .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)
-      $dropZone.removeClass('dragover').addClass('upload-in-progress')
-      $('.overall-upload').addClass('visible')
-      # trigger validations
-      data.process -> $this.fileupload('process', data)
-      if data.files.error
-        data.context.setError()
-        data.context.setStatus(data.files[0].error)
-        data.context.$fileProgressCancel.click (e) ->
-          e.preventDefault()
-          data.context.setCancelled()
-          data.context.setStatus('cancelled')
-          false
-        false
-      else
-        xhr = data.submit()
-        data.context.$fileProgressCancel.click (e) ->
-          e.preventDefault()
-          xhr.abort()
-          data.context.setCancelled()
-          data.context.setStatus('cancelled')
-          false
-        xhr
-    progress: (e, data) ->
-      progress = parseInt(data.loaded / data.total * 100, 10)
-      data.context.setProgress(progress)
-    progressall: (e, data) ->
-      progress = parseInt(data.loaded / data.total * 100, 10)
-      bar = $('.overall-upload .progress')
-      bar.css width: "#{progress}%"
-      $('.progress-status').text("#{progress}%")
-    done: (e, data) ->
-      completedUploads += 1
-      $('.uploaded-files-count').text(completedUploads)
-      data.context.setComplete()
-      data.context.setStatus('complete')
-      response_data = data.xhr().response
-      if completedUploads == totalFilesCount
-        completedUploads = 0
-        totalFilesCount = 0
-        $('.overall-upload').removeClass('visible')
-        settings.complete()
-    fail: (e, data) ->
+  getNumberOfFiles = ->
+    $filesContainer
+      .children()
+      .not('.progress-bar-in-progress').length - 1
+
+  dragover = ->
+    $dropZone.addClass('dragover')
+    return
+
+  add = (e, data) ->
+    $this = $(this)
+    data.context = new Alchemy.FileProgress(data.files[0])
+    totalFilesCount = data.originalFiles.length
+    $('.total-files-count').text(totalFilesCount)
+    $dropZone.removeClass('dragover').addClass('upload-in-progress')
+    $('.overall-upload').addClass('visible')
+    # trigger validations
+    data.process -> $this.fileupload('process', data)
+    if data.files.error
       data.context.setError()
-      response_data = data.xhr().response
-      if response_data
-        response = JSON.parse(response_data)
-        error = response.files[0].error
-      data.context.setStatus(error || data.textStatus)
-    always: (e, data) ->
-      xhr = data.xhr()
-      response_data = xhr.response
-      if response_data
-        response = JSON.parse(response_data)
-        if response.growl_message
-          Alchemy.growl(response.growl_message, if xhr.status == 422 then 'alert' else 'notice')
+      data.context.setStatus(data.files[0].error)
+      data.context.$fileProgressCancel.click (e) ->
+        data.context.setCancelled()
+        data.context.setStatus('cancelled')
+        return false
+      return false
+    else
+      xhr = data.submit()
+      data.context.$fileProgressCancel.click (e) ->
+        xhr.abort()
+        data.context.setCancelled()
+        data.context.setStatus('cancelled')
+        return false
+      return xhr
+
+  progress = (e, data) ->
+    progress = parseInt(data.loaded / data.total * 100, 10)
+    data.context.setProgress(progress)
+    return
+
+  progressall = (e, data) ->
+    progress = parseInt(data.loaded / data.total * 100, 10)
+    bar = $('.overall-upload .progress')
+    bar.css width: "#{progress}%"
+    $('.progress-status').text("#{progress}%")
+    return
+
+  done = (e, data) ->
+    completedUploads += 1
+    $('.uploaded-files-count').text(completedUploads)
+    data.context.setComplete()
+    data.context.setStatus('complete')
+    response_data = data.xhr().response
+    if completedUploads == totalFilesCount
+      completedUploads = 0
+      totalFilesCount = 0
+      $('.overall-upload').removeClass('visible')
+      settings.complete()
+    return
+
+  fail = (e, data) ->
+    data.context.setError()
+    response_data = data.xhr().response
+    if response_data
+      response = JSON.parse(response_data)
+      error = response.files[0].error
+    data.context.setStatus(error || data.textStatus)
+    return
+
+  always = (e, data) ->
+    xhr = data.xhr()
+    response_data = xhr.response
+    if response_data
+      response = JSON.parse(response_data)
+      if response.growl_message
+        Alchemy.growl(response.growl_message, if xhr.status == 422 then 'alert' else 'notice')
+    return
+
+  $fields.each ->
+    $field = $(this)
+    $form = $field.parents('form')
+    url = $form.attr('action')
+    http_method = $form.find('[name="_method"]').val()
+    # Init jquery.fileupload
+    $field.fileupload
+      url: url
+      type: if http_method then http_method.toUpperCase() else 'POST'
+      dropZone: $dropZone
+      dataType: 'json'
+      filesContainer: $filesContainer
+      acceptFileTypes: new RegExp("(.|/)(#{file_types})", "i")
+      maxNumberOfFiles: Alchemy.uploader_defaults.file_upload_limit
+      maxFileSize: Alchemy.uploader_defaults.file_size_limit * 1000000
+      getNumberOfFiles: getNumberOfFiles
+      dragover: dragover
+      add: add
+      progress: progress
+      progressall: progressall
+      done: done
+      fail: fail
+      always: always
+    return
 
   return

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

@@ -1,7 +1,4 @@
-@import "compass/css3";
-@import "compass/css3/user-interface";
-@import "compass/utilities/general/clearfix";
-@import "sassy-buttons";
+@import "bourbon";
 @import "alchemy/variables";
 @import "alchemy/mixins";
 @import "alchemy/extends";

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

@@ -1,5 +1,5 @@
 %rounded-border {
-  @include border-radius($default-border-radius);
+  border-radius: $default-border-radius;
 }
 
 %text-overflow {
@@ -11,33 +11,6 @@
   -moz-text-overflow: ellipsis;
 }
 
-%tooltip {
-  display: none;
-  background: $light_yellow;
-  @extend %rounded-border;
-  @include box-shadow(0 4px 24px $dark-gray);
-  position: absolute;
-  right: -25px;
-  top: 26px;
-  z-index: 100;
-  padding: 8px;
-  line-height: 1.5em;
-  min-width: 180px;
-  font-size: 12px;
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: -8px;
-    right: 24px;
-    width: 0px;
-    height: 0px;
-    border-style: solid;
-    border-width: 0 8px 8px 8px;
-    border-color: transparent transparent $light_yellow transparent;
-  }
-}
-
 %thumbnail-background {
   display: table-cell;
   background-color: $dark-gray;
@@ -51,7 +24,7 @@
   border-color: $error_border_color;
   color: $error_text_color;
   background-color: lighten($error_background_color, 8%);
-  @include box-shadow(inset 1px 1px 4px rgba($error_border_color, 0.5));
+  box-shadow: inset 1px 1px 4px rgba($error_border_color, 0.5);
 }
 
 %blue-focus-style {
@@ -59,10 +32,9 @@
 }
 
 %default-input-style {
-  @include box-sizing(border-box);
-  $border-inset-color: lighten($default-border-color, 20%);
+  box-sizing: border-box;
   @extend %rounded-border;
-  @include box-shadow(inset 0px 1px 1px $medium-gray);
+  box-shadow: inset 0px 1px 1px $medium-gray;
   font: $default-font-style;
   padding: 1px 2*$default-padding;
   margin: $default-form-field-margin;
@@ -74,7 +46,7 @@
   width: 100%;
   font-size: 12px;
   line-height: 12px;
-  height: 29px;
+  height: $default-form-field-height;
   @include transition(
     box-shadow 0.25s ease-in-out,
     background-color 0.25s ease-in-out,
@@ -84,10 +56,16 @@
   &:focus {
     @extend %blue-focus-style;
   }
+
+  &[disabled], .disabled {
+    color: #888;
+    background-color: rgba(#fff, 0.5);
+    cursor: not-allowed;
+  }
 }
 
 %gradiated-toolbar {
-  background: $medium-gray;
+  background: $toolbar-bg-color;
   padding: 8px 4px;
-  height: 29px;
+  height: $default-form-field-height;
 }

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

@@ -1,6 +1,6 @@
 @mixin default-focus-style {
   border-color: $blue;
-  @include box-shadow(0 0 1px 2px $blue);
+  box-shadow: 0 0 1px 1px $blue;
   outline: none;
 
   &::-moz-focus-inner {
@@ -9,10 +9,58 @@
   }
 }
 
-@mixin button-defaults {
-  @include sassy-button('simple', $sb-border-radius, $sb-font-size, $sb-base-color, $sb-second-color, $sb-text-color, $sb-text-style, $sb-pseudo-states, $sb-ie-support);
-  border-color: $button-border-color;
-  margin: $default-form-field-margin;
+@mixin button-defaults(
+  $first-color: $button-gradient-first-color,
+  $second-color: $button-gradient-second-color,
+  $border-radius: $default-border-radius,
+  $padding: $button-padding,
+  $margin: $button-margin) {
+  display: inline-block;
+  font-size: 12px;
+  padding: $padding;
+  cursor: pointer;
+  border-radius: $border-radius;
+  background-color: $button-bg-color;
+  background-image: linear-gradient($first-color, $second-color);
+  box-shadow: white 0 1px 0 inset;
+  border: 1px solid $button-border-color;
+  color: $text-color;
+  text-shadow: $button-text-shadow;
+  margin: $margin;
+  @include appearance(none);
+
+  &:hover {
+    text-decoration: none;
+    background-color: $button-hover-bg-color;
+    background-image: linear-gradient(
+      darken($first-color, 5%),
+      darken($second-color, 5%)
+    );
+    border-color: $button-hover-border-color;
+  }
+
+  &:active, &:active:focus {
+    box-shadow: #c4c4c4 0 1px 2px inset;
+    border-color: $button-border-color;
+  }
+
+  &:focus {
+    @include default-focus-style;
+  }
+
+  &.disabled, &[disabled],
+  &.disabled:active, &[disabled]:active,
+  &.disabled:hover, &[disabled]:hover {
+    opacity: 0.6;
+    background: $second-color;
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  &::-moz-focus-inner {
+    padding: 0 !important;
+    margin: -1px !important;
+  }
 }
 
 @mixin default-label-style {
@@ -54,7 +102,7 @@
   margin: $default-form-field-margin;
   padding: $default-padding 2*$default-padding;
   line-height: 21px;
-  min-height: 29px;
+  min-height: $default-form-field-height;
   background: white;
   @extend %rounded-border;
   @extend .border-box-sizing;
@@ -123,17 +171,33 @@
 }
 
 @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
+  @include button-defaults(
+    $first-color: $linked-color,
+    $second-color: darken($linked-color, 10%),
+    $border-radius: $border-radius,
+    $padding: 3px,
+    $margin: 0
   );
-  padding: 3px;
-  border-color: $default-border-color;
+}
+
+@mixin zoom-in {
+  cursor: pointer;
+  cursor: image-url('alchemy/lupe.cur');
+  cursor: -webkit-zoom-in;
+  cursor: -moz-zoom-in;
+  cursor: zoom-in;
+}
+
+@mixin truncate($max-width, $display: inline-block) {
+  display: $display;
+  max-width: $max-width;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin hint-hover-style {
+  visibility: visible;
+  top: 26px;
+  opacity: 1;
+  transition-delay: .2s;
 }