alchemy_cms 4.6.7 → 5.0.0.beta1

data/package/src/__tests__/i18n.spec.js

@@ -0,0 +1,70 @@
+import translate from "../i18n"
+
+describe("translate", () => {
+  describe("if Alchemy.locale is not set", () => {
+    it("Throws an error", () => {
+      expect(() => {
+        translate("help")
+      }).toThrow("Alchemy.locale is not set")
+    })
+  })
+
+  describe("if Alchemy.locale is set to a known locale", () => {
+    beforeEach(() => {
+      Alchemy.locale = "en"
+    })
+
+    describe("if translation is present", () => {
+      it("Returns translated string", () => {
+        expect(translate("help")).toEqual("Help")
+      })
+
+      describe("if key includes a period", () => {
+        describe("that is translated", () => {
+          it("splits into group", () => {
+            expect(translate("formats.date")).toEqual("Y-m-d")
+          })
+        })
+
+        describe("that is not translated", () => {
+          it("returns key", () => {
+            expect(translate("formats.lala")).toEqual("formats.lala")
+          })
+        })
+
+        describe("that has unknown group", () => {
+          it("returns key", () => {
+            expect(translate("foo.bar")).toEqual("foo.bar")
+          })
+        })
+      })
+
+      describe("if replacement is given", () => {
+        it("replaces it", () => {
+          expect(translate("allowed_chars", 5)).toEqual("of 5 chars")
+        })
+      })
+    })
+
+    describe("if translation is not present", () => {
+      it("Returns passed string", () => {
+        expect(translate("foo")).toEqual("foo")
+      })
+    })
+  })
+
+  describe("if Alchemy.locale is set to a unknown locale", () => {
+    beforeEach(() => {
+      Alchemy.locale = "kl"
+    })
+
+    it("Returns passed string and logs a warning", () => {
+      const spy = jest.spyOn(console, "warn").mockImplementation(() => {})
+      expect(translate("help")).toEqual("help")
+      expect(spy.mock.calls).toEqual([
+        ["Translations for locale kl not found!"]
+      ])
+      spy.mockRestore()
+    })
+  })
+})

data/package/src/i18n.js

@@ -0,0 +1,48 @@
+import translationData from "./translations"
+
+const KEY_SEPARATOR = /\./
+
+function currentLocale() {
+  if (Alchemy.locale == null) {
+    throw "Alchemy.locale is not set! Please set Alchemy.locale to a locale string in order to translate something."
+  }
+  return Alchemy.locale
+}
+
+function getTranslations() {
+  const locale = currentLocale()
+  const translations = translationData[locale]
+
+  if (translations) {
+    return translations
+  }
+  console.warn(`Translations for locale ${locale} not found!`)
+  return {}
+}
+
+function nestedTranslation(translations, key) {
+  const keys = key.split(KEY_SEPARATOR)
+  const group = translations[keys[0]]
+  if (group) {
+    return group[keys[1]] || key
+  }
+  return key
+}
+
+function getTranslation(key) {
+  const translations = getTranslations()
+
+  if (KEY_SEPARATOR.test(key)) {
+    return nestedTranslation(translations, key)
+  }
+  return translations[key] || key
+}
+
+export default function translate(key, replacement) {
+  let translation = getTranslation(key)
+
+  if (replacement) {
+    return translation.replace(/%\{.+\}/, replacement)
+  }
+  return translation
+}

data/package/src/node_tree.js

@@ -0,0 +1,72 @@
+import Sortable from "sortablejs"
+import ajax from "./utils/ajax"
+import { on } from "./utils/events"
+
+function displayNodeFolders() {
+  document.querySelectorAll("li.menu-item").forEach((el) => {
+    const leftIconArea = el.querySelector(".nodes_tree-left_images")
+    const list = el.querySelector(".children")
+    const node = { folded: el.dataset.folded === "true", id: el.dataset.id }
+
+    if (list.children.length > 0 || node.folded) {
+      leftIconArea.innerHTML = HandlebarsTemplates.node_folder({ node: node })
+    } else {
+      leftIconArea.innerHTML = " "
+    }
+  })
+}
+
+function onFinishDragging(evt) {
+  const url = Alchemy.routes.move_api_node_path(evt.item.dataset.id)
+  const data = {
+    target_parent_id: evt.to.dataset.nodeId,
+    new_position: evt.newIndex
+  }
+
+  ajax("PATCH", url, data)
+    .then(() => {
+      const message = Alchemy.t("Successfully moved menu item")
+      Alchemy.growl(message)
+      displayNodeFolders()
+    })
+    .catch((error) => {
+      Alchemy.growl(error.message || error, "error")
+    })
+}
+
+function handleNodeFolders() {
+  on("click", ".nodes_tree", ".node_folder", function () {
+    const nodeId = this.dataset.nodeId
+    const menu_item = this.closest("li.menu-item")
+    const url = Alchemy.routes.toggle_folded_api_node_path(nodeId)
+    const list = menu_item.querySelector(".children")
+
+    ajax("PATCH", url)
+      .then(() => {
+        list.classList.toggle("folded")
+        menu_item.dataset.folded =
+          menu_item.dataset.folded == "true" ? "false" : "true"
+        displayNodeFolders()
+      })
+      .catch((error) => {
+        Alchemy.growl(error.message || error)
+      })
+  })
+}
+
+export default function NodeTree() {
+  handleNodeFolders()
+  displayNodeFolders()
+
+  document.querySelectorAll(".nodes_tree ul.children").forEach((el) => {
+    new Sortable(el, {
+      group: "nodes",
+      animation: 150,
+      fallbackOnBody: true,
+      swapThreshold: 0.65,
+      handle: ".node_name",
+      invertSwap: true,
+      onEnd: onFinishDragging
+    })
+  })
+}

data/package/src/translations.js

@@ -0,0 +1,32 @@
+const translations = {
+  en: {
+    allowed_chars: "of %{count} chars",
+    cancel: "Cancel",
+    cancelled: "Cancelled",
+    click_to_edit: "click to edit",
+    complete: "Complete",
+    element_dirty_notice:
+      "This element has unsaved changes. Do you really want to fold it?",
+    help: "Help",
+    ok: "Ok",
+    page_dirty_notice:
+      "You have unsaved changes on this page. They will be lost if you continue.",
+    page_found: "Page found",
+    pages_found: "Pages found",
+    url_validation_failed: "The url has no valid format.",
+    warning: "Warning!",
+    "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": "Maximum number of files exceeded.",
+    "Uploaded bytes exceed file size": "Uploaded bytes exceed file size",
+    formats: {
+      datetime: "Y-m-d H:i",
+      date: "Y-m-d",
+      time: "H:i",
+      time_24hr: false
+    }
+  }
+}
+
+export default translations

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

@@ -0,0 +1,124 @@
+import xhrMock from "xhr-mock"
+import ajax from "../ajax"
+
+const token = "s3cr3t"
+
+beforeEach(() => {
+  document.head.innerHTML = `<meta name="csrf-token" content="${token}">`
+  xhrMock.setup()
+})
+
+describe("ajax('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")
+  })
+
+  it("sends Content-Type header", async () => {
+    xhrMock.get("/users", (req, res) => {
+      expect(req.header("Content-Type")).toEqual(
+        "application/json; charset=utf-8"
+      )
+      return res.status(200).body('{"message":"Ok"}')
+    })
+    await ajax("get", "/users")
+  })
+
+  it("sends Accept header", async () => {
+    xhrMock.get("/users", (req, res) => {
+      expect(req.header("Accept")).toEqual("application/json")
+      return res.status(200).body('{"message":"Ok"}')
+    })
+    await ajax("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) => {
+      expect(res.data).toEqual({ email: "mail@example.com" })
+    })
+  })
+
+  it("JSON parse errors get rejected", async () => {
+    xhrMock.get("/users", (_req, res) => {
+      return res.status(200).body('email => "mail@example.com"')
+    })
+    expect.assertions(1)
+    await ajax("get", "/users").catch((e) => {
+      expect(e.message).toMatch("Unexpected token")
+    })
+  })
+
+  it("network errors get rejected", async () => {
+    xhrMock.get("/users", () => {
+      return Promise.reject(new Error())
+    })
+    expect.assertions(1)
+    await ajax("get", "/users").catch((e) => {
+      expect(e.message).toEqual("An error occurred during the transaction")
+    })
+  })
+
+  it("server errors get rejected", async () => {
+    xhrMock.get("/users", (_req, res) => {
+      return res.status(401).body('{"error":"Unauthorized"}')
+    })
+    expect.assertions(1)
+    await ajax("get", "/users").catch((e) => {
+      expect(e.error).toEqual("Unauthorized")
+    })
+  })
+
+  it("server errors parsing errors get rejected", async () => {
+    xhrMock.get("/users", (_req, res) => {
+      return res.status(401).body("Unauthorized")
+    })
+    expect.assertions(1)
+    await ajax("get", "/users").catch((e) => {
+      expect(e.message).toMatch("Unexpected token")
+    })
+  })
+})
+
+describe("ajax('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 ajax("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 ajax("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 ajax("post", "/users")
+  })
+
+  it("sends JSON data", async () => {
+    xhrMock.post("/users", (req, res) => {
+      expect(req.body()).toEqual('{"email":"mail@example.com"}')
+      return res.status(200).body('{"message":"Ok"}')
+    })
+    await ajax("post", "/users", { email: "mail@example.com" })
+  })
+})
+
+afterEach(() => xhrMock.teardown())

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

@@ -0,0 +1,38 @@
+import { on } from "../events"
+
+describe("on", () => {
+  const callback = jest.fn()
+
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <ul class="list">
+        <li class="first item"><span>One</span></li>
+        <li class="second item">Two</li>
+      </ul>
+    `
+  })
+
+  it("adds event listener to base node", () => {
+    const baseNode = document.querySelector(".list")
+    const spy = jest.spyOn(baseNode, "addEventListener")
+    on("click", ".list", ".item", callback)
+    expect(spy).toHaveBeenCalledWith("click", expect.any(Function))
+    spy.mockReset()
+  })
+
+  it("event triggered on matching child node calls callback", () => {
+    const childNode = document.querySelector(".first.item")
+    on("click", ".list", ".item", callback)
+    childNode.click()
+    expect(callback).toHaveBeenCalledWith(expect.any(MouseEvent))
+  })
+
+  it("event triggered on child of registered target still calls callback", () => {
+    const child = document.querySelector(".first.item span")
+    on("click", ".list", ".item", callback)
+    child.click()
+    expect(callback).toHaveBeenCalledWith(expect.any(MouseEvent))
+  })
+
+  afterEach(() => callback.mockReset())
+})

data/package/src/utils/ajax.js

@@ -0,0 +1,48 @@
+function buildPromise(xhr) {
+  return new Promise((resolve, reject) => {
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 400) {
+        try {
+          resolve({
+            data: JSON.parse(xhr.responseText),
+            status: xhr.status
+          })
+        } catch (error) {
+          reject(error)
+        }
+      } else {
+        try {
+          reject(JSON.parse(xhr.responseText))
+        } catch (error) {
+          reject(error)
+        }
+      }
+    }
+    xhr.onerror = () => {
+      reject(new Error("An error occurred during the transaction"))
+    }
+  })
+}
+
+function getToken() {
+  const metaTag = document.querySelector('meta[name="csrf-token"]')
+  return metaTag.attributes.content.textContent
+}
+
+export default function ajax(method, url, data) {
+  const xhr = new XMLHttpRequest()
+  const promise = buildPromise(xhr)
+
+  xhr.open(method, url)
+  xhr.setRequestHeader("Content-type", "application/json; charset=utf-8")
+  xhr.setRequestHeader("Accept", "application/json")
+  xhr.setRequestHeader("X-CSRF-Token", getToken())
+
+  if (data) {
+    xhr.send(JSON.stringify(data))
+  } else {
+    xhr.send()
+  }
+
+  return promise
+}

data/package/src/utils/events.js

@@ -0,0 +1,16 @@
+export function on(eventName, baseSelector, targetSelector, callback) {
+  document.querySelectorAll(baseSelector).forEach((baseNode) => {
+    baseNode.addEventListener(eventName, (evt) => {
+      const targets = Array.from(baseNode.querySelectorAll(targetSelector))
+      let currentNode = evt.target
+
+      while (currentNode !== baseNode) {
+        if (targets.includes(currentNode)) {
+          callback.call(currentNode, evt)
+          return
+        }
+        currentNode = currentNode.parentElement
+      }
+    })
+  })
+}

data/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@alchemy_cms/admin",
+  "version": "0.2.0",
+  "description": "AlchemyCMS",
+  "browser": "package/admin.js",
+  "files": [
+    "package/**/*"
+  ],
+  "directories": {
+    "lib": "package"
+  },
+  "scripts": {
+    "test": "jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AlchemyCMS/alchemy_cms.git"
+  },
+  "keywords": [],
+  "author": "Thomas von Deyen",
+  "license": "BSD-3-Clause",
+  "bugs": {
+    "url": "https://github.com/AlchemyCMS/alchemy_cms/issues"
+  },
+  "homepage": "https://github.com/AlchemyCMS/alchemy_cms#readme",
+  "dependencies": {
+    "sortablejs": "^1.10.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "babel-jest": "^26.0.1",
+    "jest": "^25.2.7",
+    "prettier": "^2.0.2",
+    "xhr-mock": "^2.5.1"
+  },
+  "jest": {
+    "globals": {
+      "Alchemy": {}
+    },
+    "roots": [
+      "package"
+    ]
+  }
+}