alchemy_cms 5.3.0 → 5.3.1

data/config/locales/alchemy.en.yml

@@ -292,7 +292,6 @@ en:
     "Site successfully removed": "Website successfully removed."
     "Site successfully updated": "Website successfully updated."
     "Size": "Size"
-    "Sort pages": "Reorder pages"
     "Successfully added content": "Successfully added %{content}"
     "Successfully deleted content": "Successfully deleted %{content}"
     "Tags": "Tags"
@@ -394,7 +393,6 @@ en:
     enter_external_link: "Please enter the URL you want to link with"
     explain_cropping: "<p>Move the frame and change its size with the mouse or arrow keys to adjust the image mask. Click on \"apply\" when you are satisfied with your selection.</p><p>If you want to return to the original centered image mask like it was defined in the layout, click \"reset\" and \"apply\" afterwards.</p>"
     explain_publishing: "Publish the page and remove the cached version from the server."
-    explain_sitemap_dragndrop_sorting: "Tip: Drag the pages at the icon in order to sort them."
     explain_unlocking: "Leave page and unlock it for other users."
     external_link_notice_1: "Please enter the complete url with http:// or a similar protocol."
     external_link_notice_2: "To refer a path from your website url, start with a /."
@@ -553,7 +551,6 @@ en:
     robot_follow: "robot may follow links."
     robot_index: "allow robot to index."
     save: "Save"
-    "save order": "Save order"
     saved_link: "Link saved."
     search: "search"
     search_engines: "Search engines"

data/config/routes.rb

@@ -28,13 +28,12 @@ Alchemy::Engine.routes.draw do
         post :copy_language_tree
         get :create_language
         get :link
-        get :sort
         get :tree
       end
       member do
         post :unlock
         post :publish
-        post :fold
+        patch :fold
         post :visit
         get :configure
         get :preview
@@ -145,6 +144,9 @@ Alchemy::Engine.routes.draw do
       collection do
         get :nested
       end
+      member do
+        patch :move
+      end
     end
 
     get "/pages/*urlname(.:format)" => "pages#show", as: "page"

data/lib/alchemy/permissions.rb

@@ -149,7 +149,6 @@ module Alchemy
           :copy_language_tree,
           :flush,
           :order,
-          :sort,
           :switch_language,
         ], Alchemy::Page
 

data/lib/alchemy/version.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Alchemy
-  VERSION = "5.3.0"
+  VERSION = "5.3.1"
 
   def self.version
     VERSION

data/package/src/page_sorter.js

@@ -0,0 +1,68 @@
+import Sortable from "sortablejs"
+
+function onFinishDragging(evt) {
+  const pageId = evt.item.dataset.pageId
+  const url = Alchemy.routes.move_admin_page_path(pageId)
+  const data = {
+    target_parent_id: evt.to.dataset.parentId,
+    new_position: evt.newIndex
+  }
+
+  fetch(url, {
+    method: "PATCH",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json"
+    },
+    body: JSON.stringify(data)
+  })
+    .then(async (response) => {
+      const pageData = await response.json()
+      const pageEl = document.getElementById(`page_${pageId}`)
+      const urlPathEl = pageEl.querySelector(".sitemap_url")
+
+      Alchemy.growl(Alchemy.t("Successfully moved page"))
+      urlPathEl.textContent = pageData.url_path
+      displayPageFolders()
+    })
+    .catch((error) => {
+      Alchemy.growl(error.message || error, "error")
+    })
+}
+
+export function displayPageFolders() {
+  document.querySelectorAll("li.sitemap-item").forEach((el) => {
+    const pageFolderEl = el.querySelector(".page_folder")
+    const list = el.querySelector(".children")
+    const page = {
+      folded: el.dataset.folded === "true",
+      id: el.dataset.pageId,
+      type: el.dataset.type
+    }
+
+    if (list.children.length > 0 || page.folded) {
+      pageFolderEl.outerHTML = HandlebarsTemplates.page_folder({ page })
+    } else {
+      pageFolderEl.innerHTML = ""
+    }
+  })
+}
+
+export function createSortables(sortables) {
+  sortables.forEach((el) => {
+    new Sortable(el, {
+      group: "pages",
+      animation: 150,
+      fallbackOnBody: true,
+      swapThreshold: 0.65,
+      handle: ".handle",
+      onEnd: onFinishDragging
+    })
+  })
+}
+
+export default function () {
+  const sortables = document.querySelectorAll("ul.children")
+  displayPageFolders()
+  createSortables(sortables)
+}

data/package/src/sitemap.js

@@ -1,12 +1,14 @@
 // The admin sitemap Alchemy class
+import PageSorter from "./page_sorter"
+import { on } from "./utils/events"
+import { createSortables, displayPageFolders } from "./page_sorter"
 
 export default class Sitemap {
   // Storing some objects.
   constructor(options) {
-    const list_template_regexp = new RegExp("/" + options.page_root_id, "g")
     const list_template_html = document
       .getElementById("sitemap-list")
-      .innerHTML.replace(list_template_regexp, "/{{id}}")
+      .innerHTML.replace(/__ID__/g, "{{id}}")
     this.search_field = document.querySelector(".search_input_field")
     this.filter_field_clear = document.querySelector(".search_field_clear")
     this.filter_field_clear.removeAttribute("href")
@@ -24,56 +26,68 @@ export default class Sitemap {
 
   // Loads the sitemap
   load(pageId) {
-    const spinner = this.options.spinner || new Alchemy.Spinner("medium")
+    const spinner = new Alchemy.Spinner("medium")
     const spinTarget = this.sitemap_wrapper
     spinTarget.innerHTML = ""
     spinner.spin(spinTarget)
-    this.fetch(
-      `${this.options.url}?id=${pageId}&full=${this.options.full}`
-    ).then(async (response) => {
-      this.render(await response.json())
-      spinner.stop()
-    })
+    fetch(`${this.options.url}?id=${pageId}`)
+      .then(async (response) => {
+        this.render(await response.json())
+        this.handlePageFolders()
+        spinner.stop()
+      })
+      .catch(this.errorHandler)
   }
 
-  // Reload the sitemap for a specific branch
-  reload(pageId) {
-    const spinner = new Alchemy.Spinner("small")
-    const spinTarget = document.getElementById(`fold_button_${pageId}`)
-    spinTarget.querySelector(".far").remove()
-    spinner.spin(spinTarget)
-    this.fetch(`${this.options.url}?id=${pageId}`).then(async (response) => {
-      this.render(await response.json(), pageId)
-      spinner.stop()
-    })
-  }
+  // Watch page folder clicks and re-render the page branch
+  handlePageFolders() {
+    on(
+      "click",
+      "#sitemap",
+      ".page_folder",
+      function (evt) {
+        const spinner = new Alchemy.Spinner("small")
+        const pageFolder = evt.target.closest(".page_folder")
+        const pageId = pageFolder.dataset.pageId
+        pageFolder.innerHTML = ""
+        spinner.spin(pageFolder)
 
-  fetch(url) {
-    return fetch(url).catch((error) => console.warn(`Request failed: ${error}`))
+        fetch(Alchemy.routes.fold_admin_page_path(pageId), {
+          method: "PATCH",
+          headers: {
+            Accept: "application/json"
+          }
+        })
+          .then(async (response) => {
+            this.reRender(pageId, await response.json())
+            spinner.stop()
+          })
+          .catch(this.errorHandler)
+      }.bind(this)
+    )
   }
 
   // Renders the sitemap
-  render(data, foldingId) {
-    let renderTarget, renderTemplate
+  render(data) {
+    const renderTarget = this.sitemap_wrapper
+    const renderTemplate = this.template
 
-    if (foldingId) {
-      renderTarget = document.getElementById(`page_${foldingId}`)
-      renderTemplate = this.list_template
-      renderTarget.outerHTML = renderTemplate({ children: data.pages })
-    } else {
-      renderTarget = this.sitemap_wrapper
-      renderTemplate = this.template
-      renderTarget.innerHTML = renderTemplate({ children: data.pages })
-    }
+    renderTarget.innerHTML = renderTemplate({ children: data.pages })
     this.items = document
       .getElementById("sitemap")
       .querySelectorAll(".sitemap_page")
     this.sitemap_wrapper = document.getElementById("sitemap-wrapper")
     this._observe()
+    PageSorter()
+  }
 
-    if (this.options.ready) {
-      this.options.ready()
-    }
+  reRender(pageId, data) {
+    let pageEl = document.getElementById(`page_${pageId}`)
+    pageEl.outerHTML = this.list_template({ children: data.pages })
+    pageEl = document.getElementById(`page_${pageId}`)
+    const sortables = pageEl.querySelectorAll("ul.children")
+    createSortables(sortables)
+    displayPageFolders()
   }
 
   // Filters the sitemap
@@ -130,4 +144,9 @@ export default class Sitemap {
       return false
     })
   }
+
+  errorHandler(error) {
+    Alchemy.growl(error.message || error, "error")
+    console.error(error)
+  }
 }

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alchemy_cms/admin",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "description": "AlchemyCMS",
   "browser": "package/admin.js",
   "files": [

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: alchemy_cms
 version: !ruby/object:Gem::Version
-  version: 5.3.0
+  version: 5.3.1
 platform: ruby
 authors:
 - Thomas von Deyen
@@ -13,7 +13,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-03-09 00:00:00.000000000 Z
+date: 2022-03-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: active_model_serializers
@@ -633,7 +633,6 @@ files:
 - app/assets/javascripts/alchemy/alchemy.initializer.js.coffee
 - app/assets/javascripts/alchemy/alchemy.link_dialog.js.coffee
 - app/assets/javascripts/alchemy/alchemy.list_filter.js.coffee
-- app/assets/javascripts/alchemy/alchemy.page_sorter.js
 - app/assets/javascripts/alchemy/alchemy.preview.js.coffee
 - app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee
 - app/assets/javascripts/alchemy/alchemy.spinner.js
@@ -650,6 +649,7 @@ files:
 - app/assets/javascripts/alchemy/templates/node.hbs
 - app/assets/javascripts/alchemy/templates/node_folder.hbs
 - app/assets/javascripts/alchemy/templates/page.hbs
+- app/assets/javascripts/alchemy/templates/page_folder.hbs
 - app/assets/javascripts/alchemy/templates/spinner.hbs
 - app/assets/javascripts/tinymce/plugins/alchemy_link/plugin.min.js
 - app/assets/stylesheets/alchemy/_defaults.scss
@@ -927,7 +927,6 @@ files:
 - app/views/alchemy/admin/pages/configure.html.erb
 - app/views/alchemy/admin/pages/edit.html.erb
 - app/views/alchemy/admin/pages/flush.js.erb
-- app/views/alchemy/admin/pages/fold.js.erb
 - app/views/alchemy/admin/pages/index.html.erb
 - app/views/alchemy/admin/pages/info.html.erb
 - app/views/alchemy/admin/pages/link.html.erb
@@ -935,7 +934,6 @@ files:
 - app/views/alchemy/admin/pages/locked.html.erb
 - app/views/alchemy/admin/pages/new.html.erb
 - app/views/alchemy/admin/pages/show.html.erb
-- app/views/alchemy/admin/pages/sort.html.erb
 - app/views/alchemy/admin/pages/unlock.js.erb
 - app/views/alchemy/admin/pages/update.js.erb
 - app/views/alchemy/admin/partials/_autocomplete_tag_list.html.erb
@@ -1190,6 +1188,7 @@ files:
 - package/src/i18n.js
 - package/src/node_tree.js
 - package/src/page_publication_fields.js
+- package/src/page_sorter.js
 - package/src/sitemap.js
 - package/src/translations.js
 - package/src/utils/__tests__/ajax.spec.js
@@ -1215,7 +1214,6 @@ files:
 - vendor/assets/javascripts/flatpickr/flatpickr.min.js
 - vendor/assets/javascripts/jquery_plugins/jquery.Jcrop.min.js
 - vendor/assets/javascripts/jquery_plugins/jquery.scrollTo.min.js
-- vendor/assets/javascripts/jquery_plugins/jquery.ui.nestedSortable.js
 - vendor/assets/javascripts/jquery_plugins/jquery.ui.tabspaging.js
 - vendor/assets/javascripts/jquery_plugins/select2.js
 - vendor/assets/javascripts/keymaster.js

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

@@ -1,24 +0,0 @@
-Alchemy.PageSorter = function () {
-  var $sortables = $("ul#sitemap").find("ul.level_0_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) {
-    e.preventDefault()
-    Alchemy.Buttons.disable(this)
-    $.post(Alchemy.routes.order_admin_pages_path, {
-      set: JSON.stringify($sortables.nestedSortable("toHierarchy"))
-    })
-  })
-}

data/app/views/alchemy/admin/pages/fold.js.erb

@@ -1,2 +0,0 @@
-$('#fold_button_<%= @page.id %>').css('background', 'none');
-Alchemy.currentSitemap.reload(<%= @page.id %>);

data/app/views/alchemy/admin/pages/sort.html.erb

@@ -1,19 +0,0 @@
-<% content_for :toolbar do %>
-  <div class="button_with_label">
-    <%= link_to alchemy.admin_pages_path, class: 'icon_button' do %>
-      <%= render_icon 'angle-double-left' %>
-    <% end %>
-    <label><%= Alchemy.t(:cancel) %></label>
-  </div>
-<% end %>
-
-<div id="sort_panel">
-  <%= render_message do %>
-    <%= Alchemy.t(:explain_sitemap_dragndrop_sorting) %>
-  <% end %>
-  <div class="buttons">
-    <%= button_tag Alchemy.t('save order'), id: 'save_page_order' %>
-  </div>
-</div>
-
-<%= render 'sitemap', page_partial: 'page', full: true %>