refinerycms-core 4.0.3 → 4.1.0

data/app/assets/javascripts/refinery/admin.js.erb

@@ -443,7 +443,7 @@ var link_dialog = {
         }
       }
 
-      $('.form-actions-dialog #cancel_button').trigger('click');
+      $('.form-actions-dialog #cancel_button').click;
     });
   },
 
@@ -636,7 +636,7 @@ var page_options = {
               if( typeof(visual_editor_init) == "function" ) {
                 visual_editor_init();
               }
-              
+
 
               // Wipe the title and increment the index counter by one.
               $('#new_page_part_index').val(parseInt($('#new_page_part_index').val(), 10) + 1);
@@ -746,7 +746,7 @@ function ImageDialog(options) {
   };
 
   this.init_select = function() {
-    $('#existing_image_area_content ul li img').click(function() {
+    $(document).on('click', '#existing_image_area_content ul li img, #existing_image_area_crops ul li img', function() {
       self.toggle_image($(this));
     });
 
@@ -758,37 +758,52 @@ function ImageDialog(options) {
 
   this.toggle_image = function(img) {
     if (img.length > 0) {
-      if (!self.settings.multiple) $('#existing_image_area_content ul li.selected').removeClass('selected');
+      if (!self.settings.multiple) {
+        $('#existing_image_area_content ul li.selected, #existing_image_area_crops ul li.selected').removeClass('selected');
+      }
 
       img.parent().toggleClass('selected');
-      var imageId = img.attr('data-id');
-      var geometry = $('#existing_image_size_area li.selected a').attr('data-geometry');
-      var size = $('#existing_image_size_area li.selected a').attr('data-size');
-      var resize = $("#wants_to_resize_image").is(':checked');
 
-      image_url = resize ? img.attr('data-' + size) : img.attr('data-original');
+      if(img.parent().find('.crops').length) {
+        $('#existing_image_area_crops').html(img.parent().find('.crops').html());
+      }
+
+      self.prepare_wysiwyg();
+    }
+  };
+
+  this.prepare_wysiwyg = function(){
+    var geometry = $('#existing_image_size_area select#resize option:selected').attr('data-geometry');
+    var size = $('#existing_image_size_area select#resize').val();
+    var resize = $("#wants_to_resize_image").is(':checked');
+
+    var img = $(document).find('#existing_image_area_content ul li.selected img:first-child');
+
+    if(img.length == 0) img = $(document).find('#existing_image_area_crops ul li.selected img');
+
+    image_url = resize && size != 0 ? img.attr('data-' + size) : img.attr('data-original');
 
-      if (parent) {
-        if ((visual_editor_src = parent.document.getElementById('visual_editor_src')) != null) {
+    if (parent) {
+      if ((visual_editor_src = parent.document.getElementById('visual_editor_src')) != null) {
           visual_editor_src.value = image_url;
-        }
-        if ((visual_editor_title = parent.document.getElementById('visual_editor_title')) != null) {
+      }
+      if ((visual_editor_title = parent.document.getElementById('visual_editor_title')) != null) {
           visual_editor_title.value = img.attr('title');
-        }
-        if ((visual_editor_alt = parent.document.getElementById('visual_editor_alt')) != null) {
+      }
+      if ((visual_editor_alt = parent.document.getElementById('visual_editor_alt')) != null) {
           visual_editor_alt.value = img.attr('alt');
-        }
-        if ((visual_editor_size = parent.document.getElementById('visual_editor_size')) != null
-            && typeof(geometry) != 'undefined') {
+      }
+      if ((visual_editor_size = parent.document.getElementById('visual_editor_size')) != null
+          && typeof(geometry) != 'undefined') {
           visual_editor_size.value = geometry.replace(/[<>=]/g, '');
-        }
       }
     }
-  };
+  }
 
   this.submit_image_choice = function(e) {
     e.preventDefault();
-    selected_images = $('#existing_image_area_content ul li.selected img');
+    selected_images = $(document).find('#existing_image_area_content ul li.selected img:first-child');
+    if(selected_images.length == 0) selected_images = $(document).find('#existing_image_area_crops ul li.selected img');
     selected_images = self.settings.multiple ? selected_images.get() : selected_images.get(0);
 
     if(selected_images && $.isFunction(self.callback))
@@ -830,6 +845,7 @@ function ImageDialog(options) {
     image_area = $('#existing_image_area').not('#visual_editor_iframe_body #existing_image_area');
     image_area.find('.form-actions input#submit_button').click($.proxy(function(e) {
       e.preventDefault();
+      self.prepare_wysiwyg();
       $(this.document.getElementById('visual_editor_dialog_submit')).click();
     }, parent));
     image_area.find('.form-actions a.close_dialog').click(close_dialog);

data/app/assets/javascripts/refinery/ajaxy_pagination.js

@@ -0,0 +1,16 @@
+window.init_ajaxy_pagination = function() {
+  if (typeof window.history.pushState === "function") {
+    $(".pagination_container .pagination a").on("click", function(e) {
+      let navigate_to = this.href.replace(/(\&(amp\;)?)?from_page\=\d+/, "");
+      navigate_to += "&from_page=" + $(".current").text();
+      navigate_to = navigate_to.replace("?&", "?").replace(/\s+/, "");
+      
+      const current_state_location = location.pathname + location.href.split(location.pathname)[1];
+      
+      window.history.pushState({ path: current_state_location }, "", navigate_to);
+      $(document).paginateTo(navigate_to);
+      
+      e.preventDefault();
+    });
+  }
+};

data/app/assets/javascripts/refinery/image_crop.js

@@ -0,0 +1,101 @@
+window.onload = function () {
+  'use strict';
+
+  const image = document.getElementById('crop');
+  const ratios = document.getElementById('ratios');
+  const defaultAspectRatio = ratios.querySelector('button').getAttribute('data-value');
+  const submitCropSubmit = document.getElementById('save_crop');
+  let selectedCropRatio, cropWidth, cropHeight;
+
+  let options = {
+    aspectRatio: defaultAspectRatio,
+    crop: function (e) {
+      let data = e.detail;
+      cropWidth = data.width;
+      cropHeight = data.height;
+    },
+    zoomOnWheel: false
+  };
+
+  let cropper = new Cropper(image, options);
+
+  // Toggle aspect ratio after initialization
+  ratios.querySelectorAll('button').forEach(function(ratioButton) {
+    ratioButton.addEventListener('click', function() {
+      options.aspectRatio = ratioButton.getAttribute('data-value');
+      selectedCropRatio = ratioButton.getAttribute('data-ratio');
+
+      cropper.destroy();
+      cropper = new Cropper(image, options);
+    });
+  });
+
+  submitCropSubmit.addEventListener('click', function(e) {
+    e.preventDefault();
+
+    const filename = image.getAttribute('data-filename');
+    const mimeType = image.getAttribute('data-mime-type');
+
+    const imageId = image.getAttribute('data-image-id');
+    const form = document.getElementById('crop_image_'+imageId);
+    const actionUrl = form.getAttribute('action');
+
+    cropper.getCroppedCanvas().toBlob(function(blob) {
+      let formData = new FormData(form);
+
+      formData.append('image', blob, filename);
+      formData.append('ratio', selectedCropRatio);
+      formData.append('height', cropHeight);
+      formData.append('width', cropWidth);
+
+      ajaxPostNewCrop(formData, actionUrl);
+    }, mimeType);
+  });
+
+  function ajaxPostNewCrop(formData, actionUrl) {
+    let xhr = new XMLHttpRequest();
+
+    xhr.open('PATCH', actionUrl, true);
+    xhr.send(formData);
+    xhr.onreadystatechange = function() {
+      if (xhr.readyState === 4) {
+        if (xhr.status === 200) {
+          const response = JSON.parse(xhr.responseText);
+          appendNewCropInList(response.crop, 'crop-list');
+        }
+      }
+    };
+  }
+
+  function appendNewCropInList(newCrop, listId) {
+    initCropList(listId);
+
+    let child = document.createElement('div');
+    child.innerHTML = newCrop;
+    child = child.firstChild;
+
+    return document.getElementById(listId).appendChild(child);
+  }
+
+  function initCropList(listId){
+    let cropsId = document.getElementById('crops');
+    let cropListId = document.getElementById(listId);
+
+    if(cropListId == null) {
+      cropListId = document.createElement('ul');
+      cropListId.setAttribute("id", listId);
+      cropListId.setAttribute("class", "clearfix");
+      cropsId.appendChild(cropListId);
+    }
+
+    hideNoCropsYetText();
+  }
+
+  function hideNoCropsYetText(){
+    const noCropsYetText = document.getElementById('no-crops-yet');
+
+    if(noCropsYetText !== null && noCropsYetText.style.display != 'none')  {
+      noCropsYetText.style.display = 'none';
+    }
+  }
+};

data/app/assets/javascripts/refinery/interface.js.erb

@@ -0,0 +1,42 @@
+window.init_interface = function() {
+  if (parent && parent.document.location.href !== document.location.href) {
+    $("body#dialog_container.dialog").addClass("iframed");
+  }
+  
+  $("input:submit:not(.button)").addClass("button");
+
+  if (typeof visual_editor_init_interface_hook !== 'undefined') {
+    visual_editor_init_interface_hook();
+  }
+
+  $("#current_locale li a").click(function(e) {
+    $("#current_locale li a span.action").each(function() {
+      $(this).css("display", $(this).css("display") === "none" ? "" : "none");
+    });
+
+    $("#other_locales").animate({
+      opacity: "toggle",
+      height: "toggle"
+    }, 250);
+    
+    $("html,body").animate({ scrollTop: $("#other_locales").parent().offset().top }, 250);
+    e.preventDefault();
+  });
+
+  $(".form-actions .form-actions-left input:submit#submit_button").click(function(e) {
+    $(this).nextAll('#spinner').removeClass('hidden_icon').addClass('unhidden_icon');
+  });
+
+  $(".form-actions.form-actions-dialog .form-actions-left a.close_dialog").click(function(e) {
+    let titlebar_close_button = $('.ui-dialog-titlebar-close');
+    if (parent) {
+      titlebar_close_button = parent.$('.ui-dialog-titlebar-close');
+    }
+    titlebar_close_button.click();
+    e.preventDefault();
+  });
+
+  $("a.suppress").on("click", function(e) {
+    e.preventDefault();
+  });
+};

data/app/assets/javascripts/refinery/refinery.js.erb

@@ -1,9 +1,9 @@
 /*
  *= require jquery
  *= require jquery_ujs
- *= require jquery-ui/dialog
- *= require jquery-ui/sortable
- *= require jquery-ui/tabs
+ *= require jquery-ui/widgets/dialog
+ *= require jquery-ui/widgets/sortable
+ *= require jquery-ui/widgets/tabs
  *= require modernizr-min
  *= require jquery/jquery.html5-placeholder-shim
  *= require jquery/jquery.timers

data/app/assets/javascripts/refinery/submit_continue.js.erb

@@ -0,0 +1,23 @@
+<%# encoding: utf-8 %>
+window.init_submit_continue = function() {
+  $("#submit_continue_button").click(submit_and_continue);
+  
+  $("form").change(function(e) {
+    $(this).attr("data-changes-made", true);
+  });
+
+  const continue_editing_button = $("#continue_editing");
+  if (continue_editing_button.length > 0 && continue_editing_button.attr("rel") !== "no-prompt") {
+    $("#editor_switch a").click(function(e) {
+      if ($("form[data-changes-made]").length > 0) {
+        if (!confirm("<%= ::I18n.t("refinery.js.admin.confirm_changes") %>")) {
+          e.preventDefault();
+        }
+      }
+    });
+  }
+
+  $("input[id=page_custom_slug]").change(function() {
+    $("#submit_continue_button").remove();
+  });
+};

data/app/assets/stylesheets/refinery/components/_file_type_icons.scss

@@ -0,0 +1,36 @@
+%icon-font { font-family: 'FontAwesome', Helvetica, Arial, sans-serif; }
+$adobe_red: B30C00FF;
+$ms_word_blue: #1558BB;
+$msxl_green: #0F7C42;
+$mspp_brown: #C94B26;
+/* icons */
+
+.pdf_icon {@include icon(file-pdf-o, $adobe_red);}
+
+.word_icon {@include icon(file-word-o, $ms_word_blue);}
+
+.excel_icon {@include icon(file-excel-o, $msxl_green);}
+
+.powerpoint_icon {@include icon(file-powerpoint-o, $mspp_brown);}
+
+.photo_icon {@include icon(file-photo-o);}
+
+.picture_icon {@include icon(file-picture-o);}
+
+.plain_icon {@include icon('file-text')}  // text/plain
+
+.image_icon {@include icon(file-image-o);}
+
+.zip_icon {@include icon(file-zip-o);}
+
+.archive_icon {@include icon(file-archive-o);}
+
+.sound_icon {@include icon(file-sound-o);}
+
+.audio_icon {@include icon(file-audio-o);}
+
+.movie_icon {@include icon(file-movie-o);}
+
+.video_icon {@include icon(file-video-o);}
+
+.code_icon {@include icon(file-code-o);}

data/app/assets/stylesheets/refinery/components/_icons.scss

@@ -2,62 +2,104 @@
 
 /* icons */
 
-.add_icon             {@include icon('plus-circle');}
-.back_icon            {@include icon('arrow-left');}
-.close_icon           {@include icon('times-circle')}
+.add_icon {@include icon('plus-circle');}
+
+.back_icon {@include icon('arrow-left');}
+
+.close_icon {@include icon('times-circle')}
 
 .delete_icon,
-.delete_section_icon  {@include icon('minus-circle', $icon_delete_colour);}
-
-.download_icon        {@include icon('download');}
-.edit_email_icon      {@include icon('envelope-o');}
-.edit_icon            {@include icon('edit', $icon_edit_colour);}
-.email_icon           {@include icon('envelope-o');}
-.error_icon           {@include icon('question-circle', $icon_error_colour);}
-.failure_icon         {@include icon('times');}
-.folder_icon          {@include icon('folder',$icon_folder_colour)}
-.go_icon              {@include icon('caret-square-o-right');}
-.info_icon            {@include icon('info-circle');}
-.loading_icon         {@include icon('spinner'); @extend .fa-spin}
-.page_icon            {@include icon('file-o',$icon_page_colour)}
-.preview_icon         {@include icon('eye', $icon_preview_colour)}
-.remove_icon          {@include icon('unlink', $icon_delete_colour);}
-.reorder_done_icon    {@include icon('thumbs-o-up')}
-.reorder_h_icon       {@include icon('exchange');}
-.reorder_icon         {@include icon('unsorted');}
+.delete_section_icon {@include icon('minus-circle', $icon_delete_colour);}
+
+.download_icon {@include icon('download');}
+
+.edit_email_icon {@include icon('envelope-o');}
+
+.edit_icon {@include icon('edit', $icon_edit_colour);}
+
+.edit_locale_icon {@include icon('edit', $icon_locale_colour, $size: 1.2rem)}
+
+.locale_icon {@include icon('comment', $icon_locale_colour) }
+
+.email_icon {@include icon('envelope-o');}
+
+.error_icon {@include icon('question-circle', $icon_error_colour);}
+
+.failure_icon {@include icon('times');}
+
+.folder_icon {@include icon('folder', $icon_folder_colour)}
+
+.folderopen_icon {@include icon('folder-open', $icon_folder_colour)}
+
+.go_icon {@include icon('caret-square-o-right');}
+
+.info_icon {@include icon('info-circle');}
+
+.loading_icon {@include icon('spinner'); @extend .fa-spin}
+
+.page_icon {@include icon('file-o', $icon_page_colour)}
+
+.preview_icon {@include icon('eye', $icon_preview_colour)}
+
+.remove_icon {@include icon('unlink', $icon_delete_colour);}
+
+.reorder_done_icon {@include icon('thumbs-o-up')}
+
+.reorder_h_icon {@include icon('exchange');}
+
+.reorder_icon {@include icon('unsorted');}
+
 .reorder_icon.loading {@include icon('spinner')}
-.search_icon          {@include icon('search')}
-.settings_icon        {@include icon('gear')}
-.sortdown_icon        {@include icon('sort-down')}
-.sortup_icon          {@include icon('sort-up')}
-.spam_empty_icon      {@include icon('trash-o');}
-.spam_icon            {@include icon('trash');}
-.success_icon         {@include icon('check');}
+
+.search_icon {@include icon('search')}
+
+.settings_icon {@include icon('gear')}
+
+.sortdown_icon {@include icon('sort-down')}
+
+.sortup_icon {@include icon('sort-up')}
+
+.spam_empty_icon {@include icon('trash-o');}
+
+.spam_icon {@include icon('trash');}
+
+.success_icon {@include icon('check');}
+
 .switch_view_grid_icon {@include icon('th')}
+
 .switch_view_list_icon {@include icon('list')}
-.upload_icon          {@include icon('upload');}
-.user_comment_icon    {@include icon('comment-o');}
-.warning_icon         {@include icon('warning', $icon_warning_colour)}
 
-.hidden_icon  {display:none}
+.upload_icon {@include icon('upload');}
+
+.user_comment_icon {@include icon('comment-o');}
+
+.warning_icon {@include icon('warning', $icon_warning_colour)}
+
+.hidden_icon {display: none}
+
 .unhidden_icon {display: inline-block}
 
-// stacked icon/text used for locales
-.locale_marker {
-    display: inline-block;
-    font-size: 8px;
-    margin-right: 10px;
-    position: relative;
-    top: -8px;
-    .fa-stack strong {
-      left: 7px;
-      line-height: 1em;
-      position: absolute;
-      top: 9px;
-    }
+.locale_icon {
+  position: relative;
+  // icon_base (the icon) occupies the ::before position
+  @include icon_base($locale_icon_colour, $size: 1.5rem);
+
+  &::after {
+    position: absolute;
+    left: 0.3rem;
+    font-size: 0.8rem;
+    color: $locale_text_colour;
+    font-weight: bold;
+    content: attr(id);
+    text-transform: uppercase;
+  }
 }
 
 // don't want underlines on icons
-#content a[class$='icon'] {border-bottom: none}
-#content a[class$='icon']:hover {border-bottom: none}
+#content {
+  a[class$='icon'] {
+    border-bottom: none;
 
+    &:hover {border-bottom: none}
+  }
+}

data/app/assets/stylesheets/refinery/global/_colours.scss

@@ -7,15 +7,22 @@ $icon_locale_colour:  #b7e3fc;    // pale blue
 $icon_page_colour:    #86cffa;   //
 $icon_warning_colour: #FF6600; // orange
 
-$info_icon_blue:      #316CC8;
+$info_icon_blue: #022864;
 
 $icon_preview_colour: $icon_default_colour;
 $icon_edit_colour: $icon_default_colour;
 $icon_add_colour: $icon_default_colour;
 
+$locale_icon_colour: $icon_locale_colour;    // pale blue
+$locale_text_colour: #444444AA;
+$locale_selected_background: #65c3f7;
+$locale_hover_background: #cae7fb;
+$current_active_locale:  #22A7F2;
+$locale_active_background:  #22A7F2;
+
 $action_background_colour: lighten($icon_locale_colour,10%);
-$action_border_colour: $icon_locale_colour;
+$action_border_colour: #b7e3fc;
 
-// $icon_preview_colour: #7f00ff;   // violet
-// $icon_edit_colour:    #007fff;   // azure
-// $icon_add_colour:     #7fff00;   // chartreuse
+$index_entry_hover_background: #f1f1f1;
+$index_entry_actions_background: #f1f1f1;
+$index_entry_actions_border: #788;

data/app/assets/stylesheets/refinery/mixins/_images.scss

@@ -0,0 +1,99 @@
+@mixin indexImage {
+  padding: 0;
+  margin: 0;
+  line-height: 1.2;
+  a.edit_link {
+    display: inline-block;
+    font-weight: bold;
+    height: fit-content;
+
+    &:has(img) { border-bottom: 0}
+  }
+  .alt {font-style: italic}
+  .filename {font-style: italic}
+  .title {text-transform: capitalize}
+}
+
+@mixin gridImage {
+  @include indexImage;
+
+  a:has(img) ~ * {
+    display: inline-block;
+    margin-right: 2px;
+  }
+  .actions {
+    @include imageActions {
+      justify-content: flex-start;
+    };
+    margin: 0 0.25rem;
+    border: 0.5px solid $index_entry_actions_border;
+    background-color: $index_entry_actions_background;
+    border-radius: 2px;
+  }
+}
+
+@mixin listImage {
+  @include indexImage;
+  //margin: 0 12px 12px 0;
+  padding: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: baseline;
+  gap: 1rem;
+  .actions {
+    @include imageActions {
+      margin-left: auto;
+      justify-content: flex-end;
+    }
+  }
+
+  &:hover {
+    background-color: $index_entry_hover_background;
+  }
+}
+
+@mixin imageIndexLayout {
+  list-style-type: none;
+  width: 100%;
+  padding: 0;
+  line-height: 1.2;
+  @content;
+}
+
+// apply to #image_grid
+@mixin imageGridLayout {
+  @include imageIndexLayout {
+    padding-inline-start: 0;
+    display: grid;
+    grid-template-columns: repeat(4, 150px);
+    grid-template-rows: auto;
+    gap: 15px;
+  }
+}
+
+// apply to #image_list
+@mixin imageListLayout {
+  @include imageIndexLayout {
+    margin: 10px 0 15px 0;
+  }
+}
+
+@mixin imageActions {
+    // unset some
+    position: relative;
+    top: unset;
+    right: unset;
+    width: auto;
+
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+    line-height: 1.5;
+    a {
+      float: none;
+      margin: 0;
+    }
+    @content;
+  }

data/app/assets/stylesheets/refinery/mixins/_locales.scss

@@ -0,0 +1,22 @@
+@mixin locale_button {
+  padding: 7px 3px 3px 3px;
+  background-color: #cdcdcd;
+  border-bottom: 0;
+  display: flex;
+  flex-direction: row;
+  gap: 0.25rem;
+  align-items: center;
+  font-size: 1rem;
+  &.selected { background-color: $locale_selected_background; }
+  &:active { background-color: $locale_active_background;}
+}
+
+@mixin locale_group {
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  @content;
+}