alchemy_cms 5.2.7 → 5.3.2

data/package/src/sitemap.js

@@ -0,0 +1,148 @@
+// The admin sitemap Alchemy class
+import PageSorter from "./page_sorter"
+import { on } from "./utils/events"
+import { patch } from "./utils/ajax"
+import { createSortables, displayPageFolders } from "./page_sorter"
+
+export default class Sitemap {
+  // Storing some objects.
+  constructor(options) {
+    const list_template_html = document
+      .getElementById("sitemap-list")
+      .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")
+    this.display = document.getElementById("page_filter_result")
+    this.sitemap_wrapper = document.getElementById("sitemap-wrapper")
+    this.template = Handlebars.compile(
+      document.getElementById("sitemap-template").innerHTML
+    )
+    this.list_template = Handlebars.compile(list_template_html)
+    this.items = null
+    this.options = options
+    Handlebars.registerPartial("list", list_template_html)
+    this.load(options.page_root_id)
+  }
+
+  // Loads the sitemap
+  load(pageId) {
+    const spinner = new Alchemy.Spinner("medium")
+    const spinTarget = this.sitemap_wrapper
+    spinTarget.innerHTML = ""
+    spinner.spin(spinTarget)
+    fetch(`${this.options.url}?id=${pageId}`)
+      .then(async (response) => {
+        this.render(await response.json())
+        this.handlePageFolders()
+        spinner.stop()
+      })
+      .catch(this.errorHandler)
+  }
+
+  // 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)
+
+        patch(Alchemy.routes.fold_admin_page_path(pageId))
+          .then(async (response) => {
+            this.reRender(pageId, await response.json())
+            spinner.stop()
+          })
+          .catch(this.errorHandler)
+      }.bind(this)
+    )
+  }
+
+  // Renders the sitemap
+  render(data) {
+    const renderTarget = this.sitemap_wrapper
+    const renderTemplate = this.template
+
+    renderTarget.innerHTML = renderTemplate({ children: data.pages })
+    this.items = document
+      .getElementById("sitemap")
+      .querySelectorAll(".sitemap_page")
+    this.sitemap_wrapper = document.getElementById("sitemap-wrapper")
+    this._observe()
+    PageSorter()
+  }
+
+  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
+  filter(term) {
+    const results = []
+
+    this.items.forEach(function (item) {
+      if (
+        term !== "" &&
+        item.getAttribute("name").toLowerCase().indexOf(term) !== -1
+      ) {
+        item.classList.add("highlight")
+        item.classList.remove("no-match")
+        results.push(item)
+      } else {
+        item.classList.add("no-match")
+        item.classList.remove("highlight")
+      }
+    })
+    this.filter_field_clear.style.display = "inline-block"
+    const { length } = results
+
+    if (length === 1) {
+      this.display.style.display = "block"
+      this.display.innerText = `1 ${Alchemy.t("page_found")}`
+      results[0].scrollIntoView({ behavior: "smooth", block: "center" })
+    } else if (length > 1) {
+      this.display.style.display = "block"
+      this.display.innerText = `${length} ${Alchemy.t("pages_found")}`
+    } else {
+      this.items.forEach((item) =>
+        item.classList.remove("no-match", "highlight")
+      )
+      this.display.style.display = "none"
+      window.scrollTo({
+        top: 0,
+        left: 0,
+        behavior: "smooth"
+      })
+      this.filter_field_clear.style.display = "none"
+    }
+  }
+
+  // Adds onkey up observer to search field
+  _observe() {
+    this.search_field.addEventListener("keyup", (evt) => {
+      const term = evt.target.value
+      this.filter(term.toLowerCase())
+    })
+    this.search_field.addEventListener("focus", () => key.setScope("search"))
+    this.filter_field_clear.addEventListener("click", () => {
+      this.search_field.value = ""
+      this.filter("")
+      return false
+    })
+  }
+
+  errorHandler(error) {
+    Alchemy.growl(error.message || error, "error")
+    console.error(error)
+  }
+}

data/package/src/utils/__tests__/ajax.spec.js

@@ -1,5 +1,5 @@
 import xhrMock from "xhr-mock"
-import ajax from "../ajax"
+import { get, patch, post } from "../ajax"
 
 const token = "s3cr3t"
 
@@ -8,13 +8,13 @@ beforeEach(() => {
   xhrMock.setup()
 })
 
-describe("ajax('get')", () => {
+describe("get", () => {
   it("sends X-CSRF-TOKEN header", async () => {
     xhrMock.get("/users", (req, res) => {
       expect(req.header("X-CSRF-TOKEN")).toEqual(token)
       return res.status(200).body('{"message":"Ok"}')
     })
-    await ajax("get", "/users")
+    await get("/users")
   })
 
   it("sends Content-Type header", async () => {
@@ -24,7 +24,7 @@ describe("ajax('get')", () => {
       )
       return res.status(200).body('{"message":"Ok"}')
     })
-    await ajax("get", "/users")
+    await get("/users")
   })
 
   it("sends Accept header", async () => {
@@ -32,14 +32,14 @@ describe("ajax('get')", () => {
       expect(req.header("Accept")).toEqual("application/json")
       return res.status(200).body('{"message":"Ok"}')
     })
-    await ajax("get", "/users")
+    await get("/users")
   })
 
   it("returns JSON", async () => {
     xhrMock.get("/users", (_req, res) => {
       return res.status(200).body('{"email":"mail@example.com"}')
     })
-    await ajax("get", "/users").then((res) => {
+    await get("/users").then((res) => {
       expect(res.data).toEqual({ email: "mail@example.com" })
     })
   })
@@ -49,7 +49,7 @@ describe("ajax('get')", () => {
       return res.status(200).body('email => "mail@example.com"')
     })
     expect.assertions(1)
-    await ajax("get", "/users").catch((e) => {
+    await get("/users").catch((e) => {
       expect(e.message).toMatch("Unexpected token")
     })
   })
@@ -59,7 +59,7 @@ describe("ajax('get')", () => {
       return Promise.reject(new Error())
     })
     expect.assertions(1)
-    await ajax("get", "/users").catch((e) => {
+    await get("/users").catch((e) => {
       expect(e.message).toEqual("An error occurred during the transaction")
     })
   })
@@ -69,7 +69,7 @@ describe("ajax('get')", () => {
       return res.status(401).body('{"error":"Unauthorized"}')
     })
     expect.assertions(1)
-    await ajax("get", "/users").catch((e) => {
+    await get("/users").catch((e) => {
       expect(e.error).toEqual("Unauthorized")
     })
   })
@@ -79,19 +79,19 @@ describe("ajax('get')", () => {
       return res.status(401).body("Unauthorized")
     })
     expect.assertions(1)
-    await ajax("get", "/users").catch((e) => {
+    await get("/users").catch((e) => {
       expect(e.message).toMatch("Unexpected token")
     })
   })
 })
 
-describe("ajax('post')", () => {
+describe("patch", () => {
   it("sends X-CSRF-TOKEN header", async () => {
     xhrMock.post("/users", (req, res) => {
       expect(req.header("X-CSRF-TOKEN")).toEqual(token)
       return res.status(200).body('{"message":"Ok"}')
     })
-    await ajax("post", "/users")
+    await patch("/users")
   })
 
   it("sends Content-Type header", async () => {
@@ -101,7 +101,7 @@ describe("ajax('post')", () => {
       )
       return res.status(200).body('{"message":"Ok"}')
     })
-    await ajax("post", "/users")
+    await patch("/users")
   })
 
   it("sends Accept header", async () => {
@@ -109,7 +109,53 @@ describe("ajax('post')", () => {
       expect(req.header("Accept")).toEqual("application/json")
       return res.status(200).body('{"message":"Ok"}')
     })
-    await ajax("post", "/users")
+    await patch("/users")
+  })
+
+  it("sends method override data", async () => {
+    xhrMock.post("/users", (req, res) => {
+      expect(req.body()).toEqual('{"_method":"patch"}')
+      return res.status(200).body('{"message":"Ok"}')
+    })
+    await patch("/users")
+  })
+
+  it("sends JSON data", async () => {
+    xhrMock.post("/users", (req, res) => {
+      expect(req.body()).toEqual(
+        '{"email":"mail@example.com","_method":"patch"}'
+      )
+      return res.status(200).body('{"message":"Ok"}')
+    })
+    await patch("/users", { email: "mail@example.com" })
+  })
+})
+
+describe("post", () => {
+  it("sends X-CSRF-TOKEN header", async () => {
+    xhrMock.post("/users", (req, res) => {
+      expect(req.header("X-CSRF-TOKEN")).toEqual(token)
+      return res.status(200).body('{"message":"Ok"}')
+    })
+    await post("/users")
+  })
+
+  it("sends Content-Type header", async () => {
+    xhrMock.post("/users", (req, res) => {
+      expect(req.header("Content-Type")).toEqual(
+        "application/json; charset=utf-8"
+      )
+      return res.status(200).body('{"message":"Ok"}')
+    })
+    await post("/users")
+  })
+
+  it("sends Accept header", async () => {
+    xhrMock.post("/users", (req, res) => {
+      expect(req.header("Accept")).toEqual("application/json")
+      return res.status(200).body('{"message":"Ok"}')
+    })
+    await post("/users")
   })
 
   it("sends JSON data", async () => {
@@ -117,7 +163,7 @@ describe("ajax('post')", () => {
       expect(req.body()).toEqual('{"email":"mail@example.com"}')
       return res.status(200).body('{"message":"Ok"}')
     })
-    await ajax("post", "/users", { email: "mail@example.com" })
+    await post("/users", { email: "mail@example.com" })
   })
 })
 

data/package/src/utils/ajax.js

@@ -29,6 +29,18 @@ function getToken() {
   return metaTag.attributes.content.textContent
 }
 
+export function get(url, params) {
+  return ajax("GET", url, params)
+}
+
+export function patch(url, data = {}) {
+  return ajax("POST", url, { ...data, _method: "patch" })
+}
+
+export function post(url, data) {
+  return ajax("POST", url, data)
+}
+
 export default function ajax(method, url, data) {
   const xhr = new XMLHttpRequest()
   const promise = buildPromise(xhr)

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alchemy_cms/admin",
-  "version": "5.2.7",
+  "version": "5.3.2",
   "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.2.7
+  version: 5.3.2
 platform: ruby
 authors:
 - Thomas von Deyen
@@ -13,7 +13,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-03-01 00:00:00.000000000 Z
+date: 2022-03-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: active_model_serializers
@@ -270,7 +270,7 @@ dependencies:
         version: '1.8'
     - - "<"
       - !ruby/object:Gem::Version
-        version: 2.4.2
+        version: '3.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -280,7 +280,7 @@ dependencies:
         version: '1.8'
     - - "<"
       - !ruby/object:Gem::Version
-        version: 2.4.2
+        version: '3.0'
 - !ruby/object:Gem::Dependency
   name: request_store
   requirement: !ruby/object:Gem::Requirement
@@ -590,6 +590,7 @@ files:
 - ".hound.yml"
 - ".localeapp/config.rb"
 - ".prettierrc"
+- ".rspec"
 - ".rubocop.yml"
 - ".yardopts"
 - CHANGELOG.md
@@ -632,10 +633,8 @@ 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.sitemap.js.coffee
 - app/assets/javascripts/alchemy/alchemy.spinner.js
 - app/assets/javascripts/alchemy/alchemy.string_extension.js.coffee
 - app/assets/javascripts/alchemy/alchemy.tinymce.js.coffee
@@ -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
@@ -1189,6 +1187,9 @@ files:
 - package/src/__tests__/i18n.spec.js
 - 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
 - package/src/utils/__tests__/events.spec.js
@@ -1213,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/assets/javascripts/alchemy/alchemy.sitemap.js.coffee

@@ -1,119 +0,0 @@
-window.Alchemy = {} if typeof(window.Alchemy) is 'undefined'
-
-# The admin sitemap Alchemy module
-Alchemy.Sitemap =
-
-  # Storing some objects.
-  init: (options) ->
-    @search_field = $(".search_input_field")
-    @filter_field_clear = $('.search_field_clear')
-    @display = $('#page_filter_result')
-    @sitemap_wrapper = $('#sitemap-wrapper p.loading')
-    @template = Handlebars.compile($('#sitemap-template').html())
-    list_template_regexp = new RegExp '\/' + options.page_root_id, 'g'
-    list_template_html = $('#sitemap-list').html().replace(list_template_regexp, '/{{id}}')
-    @list_template = Handlebars.compile(list_template_html)
-    @items = null
-    @options = options
-    @watchPagePublicationState()
-    true
-
-    Handlebars.registerPartial('list', list_template_html)
-
-    @fetch()
-
-  # Fetches the sitemap from JSON
-  fetch: (foldingId) ->
-    self = Alchemy.Sitemap
-
-    if foldingId
-      spinner = new Alchemy.Spinner('small')
-      spinTarget = $('#fold_button_' + foldingId)
-      renderTarget = $('#page_' + foldingId)
-      renderTemplate = @list_template
-      pageId = foldingId
-    else
-      spinner = @options.spinner || new Alchemy.Spinner('medium')
-      spinTarget = @sitemap_wrapper
-      renderTarget = @sitemap_wrapper
-      renderTemplate = @template
-      pageId = @options.page_root_id
-
-    spinner.spin(spinTarget[0])
-
-    request = $.ajax url: @options.url, data:
-      id: pageId
-      full: @options.full
-
-    request.done (data) ->
-      # This will also remove the spinner
-      renderTarget.replaceWith(renderTemplate({children: data.pages}))
-      self.items = $(".sitemap_page", '#sitemap')
-      self._observe()
-
-      if self.options.ready
-        self.options.ready()
-
-    request.fail (jqXHR, status) ->
-      console.warn("Request failed: " + status)
-
-  # Filters the sitemap
-  filter: (term) ->
-    results = []
-    self = Alchemy.Sitemap
-    self.items.map ->
-      item = $(this)
-      if term != '' && item.attr('name').toLowerCase().indexOf(term) != -1
-        item.addClass('highlight')
-        item.removeClass('no-match')
-        results.push item
-      else
-        item.addClass('no-match')
-        item.removeClass('highlight')
-    self.filter_field_clear.show()
-    length = results.length
-    if length == 1
-      self.display.show().text("1 #{Alchemy.t('page_found')}")
-      $.scrollTo(results[0], {duration: 400, offset: -80})
-    else if length > 1
-      self.display.show().text("#{length} #{Alchemy.t('pages_found')}")
-    else
-      self.items.removeClass('no-match highlight')
-      self.display.hide()
-      $.scrollTo('0', 400)
-      self.filter_field_clear.hide()
-
-  # Adds onkey up observer to search field
-  _observe: ->
-    filter = @filter
-    @search_field.on 'keyup', ->
-      term = $(this).val()
-      filter(term.toLowerCase())
-    @search_field.on 'focus', ->
-      key.setScope('search')
-    @filter_field_clear.click =>
-      @search_field.val('')
-      filter('')
-      false
-
-  # Handles the page publication date fields
-  watchPagePublicationState: ->
-    $(document).on 'DialogReady.Alchemy', (e, $dialog) ->
-      $public_on_field = $('#page_public_on', $dialog)
-      $public_until_field = $('#page_public_until', $dialog)
-      $publication_date_fields = $('.page-publication-date-fields', $dialog)
-
-      $('#page_public', $dialog).click ->
-        $checkbox = $(this)
-        format = $checkbox.data('date-format')
-        now = new Date()
-        if $checkbox.is(':checked')
-          $publication_date_fields.removeClass('hidden')
-          $public_on_field[0]._flatpickr.setDate(now)
-        else
-          $publication_date_fields.addClass('hidden')
-          $public_on_field.val('')
-        $public_until_field.val('')
-        true
-
-    return

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

@@ -1,2 +0,0 @@
-$('#fold_button_<%= @page.id %>').css('background', 'none');
-Alchemy.Sitemap.fetch(<%= @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 %>