alchemy_cms 4.0.5 → 4.1.0.beta

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

@@ -1,92 +1,80 @@
-#= require alchemy/alchemy.jquery_loader
-#= require alchemy/alchemy.browser
 #= require alchemy/alchemy.i18n
 
-window.Alchemy = {} if typeof(Alchemy) is 'undefined'
+window.Alchemy = Alchemy || {}
 
-Alchemy.initAlchemyPreviewMode = ($) ->
-
-  # Setting jQueryUIs global animation duration
-  $.fx.speeds._default = 400
+Alchemy.initAlchemyPreviewMode = ->
 
   # The Alchemy JavaScript Object contains all Functions
-  $.extend Alchemy,
+  Object.assign Alchemy,
 
     ElementSelector:
 
-      # defaults
-      scrollOffset: 20
-
       styles:
         reset:
           outline: ""
           "outline-offset": ""
-          "-moz-outline-radius": ""
-        default_hover:
-          outline: "3px solid #F0B437"
+          cursor: ""
+        hover:
+          outline: "2px dashed #f0b437"
           "outline-offset": "4px"
           cursor: "pointer"
-        webkit_hover:
-          outline: "4px auto #F0B437"
-        moz_hover:
-          "-moz-outline-radius": "3px"
-        default_selected:
-          outline: "3px solid #90B9D0"
+        selected:
+          outline: "2px dashed #90b9d0"
           "outline-offset": "4px"
-        webkit_selected:
-          outline: "4px auto #90B9D0"
-        moz_selected:
-          "-moz-outline-radius": "3px"
 
       init: ->
-        $elements = $("[data-alchemy-element]")
-        @$previewElements = $elements
-        $elements.mouseover (e) =>
-          $el = $(e.delegateTarget)
-          $el.attr("title", Alchemy.t('click_to_edit'))
-          $el.css(@getStyle("hover")) unless $el.hasClass("selected")
-          return
-        $elements.mouseout (e) =>
-          $el = $(e.delegateTarget)
-          $el.removeAttr("title")
-          $el.css(@getStyle("reset")) unless $el.hasClass("selected")
-          return
-        $elements.on "SelectPreviewElement.Alchemy", (e) =>
-          $el = $(e.delegateTarget)
-          # Stop the event from bubbling up to parent elements
-          e.stopPropagation()
-          @selectElement($el)
-          return
-        $elements.click (e) =>
-          $el = $(e.delegateTarget)
-          # Stop the event from bubbling up to parent elements
-          e.stopPropagation()
-          # Stop default click events from running
-          e.preventDefault()
-          # Mark current preview element as selected
-          @selectElement($el)
-          # Focus the element editor
-          @focusElementEditor($el)
+        window.addEventListener "message", (message) =>
+          if message.data == "blurAlchemyElements"
+            @blurElements()
+        , false
+        @elements = document.querySelectorAll("[data-alchemy-element]")
+        @elements.forEach (element) =>
+          element.addEventListener 'mouseover', =>
+            element.setAttribute('title', Alchemy.t('click_to_edit'))
+            unless element.classList.contains('selected')
+              Object.assign element.style, @getStyle('hover')
+            return
+          element.addEventListener 'mouseout', =>
+            element.removeAttribute('title')
+            unless element.classList.contains('selected')
+              Object.assign element.style, @getStyle('reset')
+            return
+          element.addEventListener 'SelectPreviewElement.Alchemy', =>
+            @selectElement(element)
+            return
+          , false
+          element.addEventListener 'click', (e) =>
+            e.stopPropagation()
+            e.preventDefault()
+            @selectElement(element)
+            @focusElementEditor(element)
+            return
           return
         return
 
       # Mark element in preview frame as selected and scrolls to it.
-      selectElement: ($el) ->
-        offset = $el.offset()
-        @$previewElements.removeClass("selected").css(@getStyle("reset"))
-        $el.addClass("selected").css(@getStyle("selected"))
-        $("html, body").animate
-          scrollTop: offset.top - @scrollOffset
-          scrollLeft: offset.left - @scrollOffset
-        , 400
+      selectElement: (element) ->
+        @blurElements()
+        element.classList.add('selected')
+        Object.assign element.style, @getStyle('selected')
+        element.scrollIntoView
+          behavior: 'smooth'
+          block: 'start'
+        return
+
+      # Blur all elements in preview frame.
+      blurElements: ->
+        @elements.forEach (element) =>
+          element.classList.remove('selected')
+          Object.assign element.style, @getStyle('reset')
+          return
         return
 
       # Focus the element editor in the Alchemy element window.
-      focusElementEditor: ($el) ->
+      focusElementEditor: (element) ->
         alchemy_window = window.parent
-        alchemy_$ = alchemy_window.jQuery
-        target_id = $el.data("alchemy-element")
-        $element_editor = alchemy_$("#element_#{target_id}")
+        target_id = element.getAttribute('data-alchemy-element')
+        $element_editor = alchemy_window.$("#element_#{target_id}")
         elements_window = alchemy_window.Alchemy.ElementsWindow
         $element_editor.trigger("FocusElementEditor.Alchemy", target_id)
         elements_window.show() if elements_window.hidden
@@ -96,17 +84,8 @@ Alchemy.initAlchemyPreviewMode = ($) ->
         if state == "reset"
           @styles["reset"]
         else
-          default_state_style = @styles["default_#{state}"]
-          browser = "webkit" if Alchemy.Browser.isWebKit
-          browser = "moz" if Alchemy.Browser.isFirefox
-          if browser
-            $.extend(default_state_style, @styles["#{browser}_#{state}"])
-          else
-            default_state_style
+          @styles[state]
 
   Alchemy.ElementSelector.init()
 
-if typeof(jQuery) is 'undefined'
-  Alchemy.loadjQuery(Alchemy.initAlchemyPreviewMode)
-else
-  Alchemy.initAlchemyPreviewMode(jQuery)
+Alchemy.initAlchemyPreviewMode()

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

@@ -13,16 +13,12 @@ Alchemy.PreviewWindow =
     $('body').append($iframe)
     @currentWindow = $iframe
     @_bindReloadButton()
-    @resize()
 
-  resize: ->
-    width = @_calculateWidth()
-    height = $(window).height() - @HEIGHT
+  resize: (width) ->
     width = @MIN_WIDTH if width < @MIN_WIDTH
     @currentWidth = width
     @currentWindow.css
       width: width
-      height: height
 
   refresh: (callback) ->
     $iframe = $('#alchemy_preview_window')
@@ -43,20 +39,15 @@ Alchemy.PreviewWindow =
 
   _hideSpinner: ->
     @spinner.stop()
-    @reload.html('<span class="icon reload"></span>')
+    @reload.html('<i class="icon fas fa-redo fa-fw"></i>')
 
   _bindReloadButton: ->
     $reload = $('#reload_preview_button')
     key 'alt+r', =>
       @refresh()
-    $reload.click =>
+    $reload.click (e) =>
+      e.preventDefault()
       @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

@@ -96,6 +96,7 @@ Alchemy.Sitemap =
     @filter_field_clear.click =>
       @search_field.val('')
       filter('')
+      false
 
   # Handles the page publication date fields
   watchPagePublicationState: ->

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

@@ -63,12 +63,18 @@ $.extend Alchemy.Tinymce,
 
   # Gets called after an editor instance gets intialized
   #
-  initInstanceCallback: (inst) ->
-    $this = $("##{inst.id}")
-    parent = $this.closest('.element-editor')
-    parent.find('.spinner').remove()
-    inst.on 'dirty', (e) ->
-      Alchemy.setElementDirty(parent)
+  initInstanceCallback: (editor) ->
+    $this = $("##{editor.id}")
+    element = $this.closest('.element-editor')
+    element.find('.spinner').remove()
+    editor.on 'dirty', ->
+      Alchemy.setElementDirty(element)
+      return
+    editor.on 'click', (event) ->
+      event.target = element[0]
+      Alchemy.ElementEditors.onClickElement(event)
+      return
+    return
 
   # Removes the TinyMCE editor from given dom ids.
   #

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

@@ -3,34 +3,6 @@ window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
 # Holds translations for javascripts
 #
 Alchemy.translations =
-
-  # German
-  de:
-    allowed_chars: 'von %{count} Zeichen'
-    cancel: 'Abbrechen'
-    cancelled: 'Abgebrochen'
-    click_to_edit: 'Klicken zum Bearbeiten'
-    complete: 'Abgeschlossen'
-    element_dirty_notice: 'Dieses Element hat nicht gespeicherte Änderungen. Möchten Sie es wirklich einklappen?'
-    help: 'Hilfe'
-    ok: 'Ok'
-    page_dirty_notice: 'Sie haben ungesicherte Änderungen auf der Seite. Diese gehen verloren, wenn Sie fortfahren.'
-    page_found: 'Seite gefunden'
-    pages_found: 'Seiten gefunden'
-    url_validation_failed: 'Die URL hat kein gültiges Format.'
-    warning: 'Achtung!'
-    'File is too large': 'Datei ist zu groß.'
-    'File is too small': 'Datei ist zu klein.'
-    'File type not allowed': 'Dateityp nicht erlaubt.'
-    'Maximum number of files exceeded': 'Maximale Anzahl gleichzeitig erlaubter Datei-Uploads erreicht.'
-    'Uploaded bytes exceed file size': 'Maximale Größe der erlaubten Dateigröße erreicht.'
-    formats:
-      datetime: "d.m.Y H:i"
-      date: "d.m.Y"
-      time: "H:i"
-      start_of_week: 1
-
-  # English
   en:
     allowed_chars: 'of %{count} chars'
     cancel: 'Cancel'
@@ -55,133 +27,3 @@ Alchemy.translations =
       date: "Y-m-d"
       time: "H:i"
       start_of_week: 0
-
-  # Dutch
-  nl:
-    allowed_chars: 'of %{count} chars'
-    cancel: 'Annuleren'
-    cancelled: 'Afgebroken'
-    click_to_edit: 'klik om aan te passen'
-    complete: 'Klaar'
-    element_dirty_notice: 'Dit element bevat niet opgeslagen wijzigingen. Wilt u dit echt inklappen?'
-    help: 'Hulp'
-    ok: 'Ok'
-    page_found: 'Page found'
-    pages_found: 'Pages found'
-    page_dirty_notice: 'Er zijn wijzigingen op deze pagina aangebracht. Deze gaan verloren als u doorgaat.'
-    url_validation_failed: 'De url heeft geen geldig formaat.'
-    warning: 'Waarschuwing!'
-    'File is too large': 'File is too large'
-    'File is too small': 'File is too small'
-    'File type not allowed': 'File type not allowed'
-    'Maximum number of files exceeded': 'Uploadlimiet bereikt.'
-    'Uploaded bytes exceed file size': 'Uploaded bytes exceed file size'
-    formats:
-      datetime: "Y-m-d H:i"
-      date: "Y-m-d"
-      time: "H:i"
-      start_of_week: 1
-
-  # French
-  fr:
-    allowed_chars: 'von %{count} signes'
-    cancel: 'abandonner'
-    cancelled: 'annulé'
-    click_to_edit: 'Cliquez pour modifier'
-    complete: 'terminé'
-    element_dirty_notice: 'Cet élément a des modifications non enregistrées. Souhaitez-vous vraiment plier?'
-    help: 'Aide'
-    ok: 'Ok'
-    page_dirty_notice: 'Vous avez des modifications non enregistrées sur la page. Ce sera perdue si vous continuez.'
-    page_found: 'page trouvée'
-    pages_found: 'pages trouvées'
-    url_validation_failed: "L'URL n'est pas correctement formatée."
-    warning: 'Attention!'
-    'File is too large': 'Le fichier est trop grand.'
-    'File is too small': 'Le fichier est trop petit.'
-    'File type not allowed': 'Type de document non autorisé.'
-    'Maximum number of files exceeded': 'Le nombre maximum de fichiers est atteint.'
-    'Uploaded bytes exceed file size': 'Taille de fichier maximale autorisée atteint.'
-    formats:
-      datetime: "d.m.Y H:i"
-      date: "d.m.Y"
-      time: "H:i"
-      start_of_week: 1
-
-  # Russian
-  ru:
-    allowed_chars: '%{count} знаков'
-    cancel: 'Отмена'
-    cancelled: 'Отменено'
-    click_to_edit: 'нажмите, чтобы редактировать'
-    complete: 'Завершено'
-    element_dirty_notice: 'Для этого элемента есть несохраненные изменения. Вы действительно хотите их сбросить?'
-    help: 'Помощь'
-    ok: 'Ок'
-    page_dirty_notice: 'На странице есть несохраненные изменения. Если вы продолжите, то они пропадут.'
-    page_found: 'Страница найдена'
-    pages_found: 'Страницы найдены'
-    url_validation_failed: 'Адрес (URL) имеет неверный формат.'
-    warning: 'Внимание!'
-    'File is too large': 'Файл слишком большой'
-    'File is too small': 'Файл слишком маленький'
-    'File type not allowed': 'Этот тип файла не разрешен'
-    'Maximum number of files exceeded': 'Исчерпано максимальное количество файлов.'
-    'Uploaded bytes exceed file size': 'Превышен максимальный размер файла'
-    formats:
-      datetime: "d.m.Y H:i"
-      date: "d.m.Y"
-      time: "H:i"
-      start_of_week: 1
-
-  # Spanish
-  es:
-    allowed_chars: 'de %{count} caracteres'
-    cancel: 'Cancelar'
-    cancelled: 'Cancelado'
-    click_to_edit: 'Pulsar para editar'
-    complete: 'Completado'
-    element_dirty_notice: 'Este elemento tiene cambios sin guardar. ¿Realmente quieres plegarlo?'
-    help: 'Ayuda'
-    ok: 'Aceptar'
-    page_dirty_notice: 'Tienes cambios sin guardar en esta página. Si continúas se perderán.'
-    page_found: 'Página encontrada'
-    pages_found: 'Páginas encontradas'
-    url_validation_failed: 'La url no tiene un formato válido.'
-    warning: '¡Atención!'
-    'File is too large': 'El archivo es demasiado grande'
-    'File is too small': 'El archivo es demasiado pequeño'
-    'File type not allowed': 'El tipo de archivo no está permitido'
-    'Maximum number of files exceeded': 'Número máximo de archivos excedido.'
-    'Uploaded bytes exceed file size': 'Los bytes subidos exceden el tamaño del archivo'
-    formats:
-      datetime: "d/m/Y H:i"
-      date: "d/m/Y"
-      time: "H:i"
-      start_of_week: 1
-
-  # Italian
-  it:
-    allowed_chars: 'di %{count} caratteri'
-    cancel: 'Annulla'
-    cancelled: 'Annullato'
-    click_to_edit: 'clicca per modificare'
-    complete: 'Completato'
-    element_dirty_notice: 'Questo elemento contiene delle modifiche non salvate. Vuoi veramenter chiuderlo?'
-    help: 'Aiuto'
-    ok: 'Ok'
-    page_dirty_notice: 'Su questa pagina hai delle modifiche non salvate. Verranno perse se decidi di continuare.'
-    page_found: 'Pagina trovata'
-    pages_found: 'Pagine trovate'
-    url_validation_failed: 'Formato URL non valido.'
-    warning: 'Attenzione!'
-    'File is too large': 'Il file è troppo grande'
-    'File is too small': 'Il file è troppo piccolo'
-    'File type not allowed': 'Tipo di file non consentito'
-    'Maximum number of files exceeded': 'Numero massimo di file raggiunto.'
-    'Uploaded bytes exceed file size': 'Il numero di byte caricati eccede la dimensione del file'
-    formats:
-      datetime: "Y-m-d H:i"
-      date: "Y-m-d"
-      time: "H:i"
-      start_of_week: 1

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

@@ -1,5 +1,3 @@
-@import "bourbon";
 @import "alchemy/variables";
 @import "alchemy/mixins";
 @import "alchemy/extends";
-@import "alchemy/icon-font";

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

@@ -1,7 +1,3 @@
-%rounded-border {
-  border-radius: $default-border-radius;
-}
-
 %text-overflow {
   white-space: nowrap;
   overflow: hidden;
@@ -33,20 +29,19 @@
 }
 
 %default-input-style {
-  @extend %rounded-border;
-  box-shadow: inset 0px 1px 1px $medium-gray;
+  border-radius: $default-border-radius;
+  box-shadow: $form-field-box-shadow;
   font: $default-font-style;
-  padding: 1px 2*$default-padding;
-  margin: $default-form-field-margin;
-  background: rgba(#fff, 0.9);
-  border-top: 1px solid $default-border-color;
-  border-left: 1px solid $default-border-color;
-  border-bottom: 1px solid $border-inset-color;
-  border-right: 1px solid $border-inset-color;
+  color: $form-field-text-color;
+  padding: $form-field-padding;
+  margin: $form-field-margin;
+  background: $form-field-background-color;
+  border-width: $form-field-border-width;
+  border-style: $form-field-border-style;
+  border-color: $form-field-border-color;
   width: 100%;
-  font-size: 12px;
-  line-height: 12px;
-  height: $default-form-field-height;
+  font-size: $form-field-font-size;
+  line-height: $form-field-line-height;
   transition-property: box-shadow, background-color, border;
   transition-duration: 0.25s;
   transition-timing-function: ease-in-out;
@@ -56,8 +51,8 @@
   }
 
   &[disabled], .disabled {
-    color: #888;
-    background-color: rgba(#fff, 0.5);
+    color: $form-field-disabled-text-color;
+    background-color: $form-field-disabled-bg-color;
     cursor: not-allowed;
   }
 }