refactor: JS work in progress (ems-project#727)

EMS/admin-ui-bundle/assets/css/core/components/iframe_preview.scss

@@ -0,0 +1,4 @@
+iframe.styleset-preview {
+  border-width: 0;
+  width: 100%;
+}

EMS/admin-ui-bundle/assets/css/core/components/json_menu_nested.scss

@@ -1,3 +1,4 @@
+@import "@fortawesome/fontawesome-free/scss/variables";
 @import "../helpers/mixins";
 
 .json-menu-nested-component {
@@ -143,9 +144,9 @@
         background-color: white;
     }
 
-    .jmn-dropdown { @include icon-after("\f0d7"); }
-    .jmn-dropdown-add { @include icon-before("\f067"); }
-    .jmn-dropdown-more { @include icon-before("\f142", 0); }
+    .jmn-dropdown { @include icon-after($fa-var-caret-down); }
+    .jmn-dropdown-add { @include icon-before($fa-var-plus); }
+    .jmn-dropdown-more { @include icon-before($fa-var-ellipsis-v, 0); }
 
     .jmn-btn-move {
         cursor: move;

EMS/admin-ui-bundle/assets/css/core/helpers/mixins.scss

@@ -1,20 +1,22 @@
-@mixin icon($unicode) {
-  font-family: FontAwesome, serif;
+@import "@fortawesome/fontawesome-free/scss/functions";
+
+@mixin icon($icon) {
+  font-family: $fa-style-family;
   font-weight: 400;
-  content: $unicode;
+  content: fa-content($icon);
 }
 
-@mixin icon-before($unicode, $marginRight : 5px) {
+@mixin icon-before($icon, $marginRight : 5px) {
   &::before {
-    @include icon($unicode);
+    @include icon($icon);
 
     margin-right: $marginRight;
   }
 }
 
-@mixin icon-after($unicode, $marginLeft : 5px) {
+@mixin icon-after($icon, $marginLeft : 5px) {
   &::after {
-    @include icon($unicode);
+    @include icon($icon);
 
     margin-left: $marginLeft;
   }

EMS/admin-ui-bundle/assets/css/core/plugins/wysiwyg.scss

@@ -0,0 +1,28 @@
+@import "@fortawesome/fontawesome-free/scss/functions";
+@import "@fortawesome/fontawesome-free/scss/variables";
+
+// Specific to dialog popup
+.cke_dialog {
+	.select2-container {
+		z-index:10020;
+		position:relative !important;
+
+		.select2-selection--single .select2-selection__rendered .fa {
+			font-family: $fa-style-family !important;
+		}
+	}
+
+	div.cke_dialog_ui_input_select {
+		display: block;
+	}
+}
+
+// More generic change, because dialog z-index is higher than select2 dropdown.
+.select2-dropdown {
+	z-index: 10051 !important;
+	position: absolute !important;
+}
+
+.cke_combopanel {
+	width:350px !important;
+}

EMS/admin-ui-bundle/assets/js/core/components/iframePreview.js

@@ -0,0 +1,58 @@
+import '../../../css/core/components/iframe_preview.scss'
+
+export class IframePreview {
+  constructor (iframe) {
+    this.iframe = iframe
+    const self = this
+    window.addEventListener('message', function (event) {
+      self.onMessage(event)
+    })
+  }
+
+  onMessage (event) {
+    if (event.source !== this.iframe.contentWindow) {
+      return
+    }
+
+    if (event.data === 'ready') {
+      this.loadBody()
+    } else if (event.data === 'resize') {
+      this.adjustHeight()
+    } else {
+      console.log('Unknown event type: ' + event.data)
+    }
+  }
+
+  loadBody () {
+    let body = this.iframe.getAttribute('data-iframe-body')
+    body = this.#changeSelfTargetLinksToParent(body)
+    const window = this.iframe.contentWindow || this.iframe.contentDocument.defaultView
+    window.postMessage(body, '*')
+  }
+
+  adjustHeight () {
+    const window = this.iframe.contentWindow || this.iframe.contentDocument.defaultView
+
+    let height = window.document.documentElement.scrollHeight;
+
+    ['border-top-width', 'border-bottom-width', 'padding-top', 'padding-bottom'].forEach((v) => {
+      height += parseInt(window.getComputedStyle(this.iframe, null).getPropertyValue(v).replace('px', ''), 10)
+    })
+
+    this.iframe.height = height
+  }
+
+  #changeSelfTargetLinksToParent (body) {
+    const parser = new DOMParser()
+    const dom = parser.parseFromString(body, 'text/html')
+        ;[...dom.getElementsByTagName('a')].forEach((link) => {
+      if (!link.getAttribute('target')) {
+        link.setAttribute('target', '_parent')
+      }
+    })
+
+    return dom.documentElement.outerHTML
+  }
+}
+
+export default IframePreview

EMS/admin-ui-bundle/assets/js/core/components/revisionTask.js

@@ -0,0 +1,164 @@
+import ajaxModal from '../../../js/core/helpers/ajaxModal'
+import Sortable from 'sortablejs'
+
+export default class RevisionTask {
+  constructor () {
+    this.dashboard()
+
+    this.tasksTab = document.querySelector('#tab_tasks')
+    if (this.tasksTab !== null) {
+      this.revisionTasks = document.querySelector('div#revision-tasks')
+      this.revisionTaskLoading = this.revisionTasks.querySelector('div#revision-tasks-loading')
+      this.revisionTasksContent = this.revisionTasks.querySelector('div#revision-tasks-content')
+      this._addClickListeners()
+      this.loadTasks()
+    }
+  }
+
+  dashboard () {
+    document.addEventListener('click', (e) => {
+      if (e.target.classList.contains('task-modal')) {
+        e.preventDefault()
+        ajaxModal.load({ url: e.target.dataset.url, title: e.target.dataset.title })
+      }
+      if (e.target.classList.contains('btn-task-change-owner-modal')) {
+        e.preventDefault()
+        ajaxModal.load(
+          { url: e.target.dataset.url, title: e.target.dataset.title },
+          (json) => {
+            if (Object.prototype.hasOwnProperty.call(json, 'modalSuccess') && json.modalSuccess === true) {
+              window.location.reload()
+            }
+          }
+        )
+      }
+    })
+  }
+
+  loadTasks () {
+    fetch(this.revisionTasks.dataset.url, {
+      method: 'GET',
+      headers: { 'Content-Type': 'application/json' }
+    })
+      .then((response) => { return response.json() })
+      .then((json) => {
+        if (Object.prototype.hasOwnProperty.call(json, 'tab')) this._updateTab(json.tab)
+      })
+  }
+
+  _updateTab (tab) {
+    this.revisionTasksContent.outerHTML = tab
+    this.revisionTasksContent = this.revisionTasks.querySelector('div#revision-tasks-content')
+    this.revisionTaskLoading.style.display = 'none'
+    this.revisionTasksContent.style.display = 'block'
+  }
+
+  _addClickListeners () {
+    this.tasksTab.addEventListener('click', (event) => {
+      const target = event.target
+
+      if (target.classList.contains('btn-task-modal')) this._onClickButtonTaskCreateOrUpdate(target)
+      if (target.classList.contains('btn-task-handle')) this._onClickButtonHandle(target)
+      if (target.id === 'btn-tasks-reorder') this._onClickButtonTaskReorder(target)
+      if (target.id === 'btn-tasks-approved') this._onClickButtonTasksApproved(event, target)
+
+      const closestTasksItem = target.closest('.tasks-item')
+      if (closestTasksItem || target.classList.contains('tasks-item')) {
+        this._onClickTaskItem(event, closestTasksItem ?? target)
+      }
+    }, true)
+    document.addEventListener('click', (event) => {
+      const target = event.target
+      if (target.id === 'btn-task-delete') this._onClickButtonTaskDelete(target)
+    })
+  }
+
+  _onClickButtonTaskCreateOrUpdate (button) {
+    ajaxModal.load({ url: button.dataset.url, title: button.dataset.title }, (json) => {
+      if (Object.prototype.hasOwnProperty.call(json, 'modalSuccess') && json.modalSuccess) {
+        this.loadTasks()
+      }
+    })
+  }
+
+  _onClickButtonTaskDelete (button) {
+    ajaxModal.load({ url: button.dataset.url, title: button.dataset.title }, (json) => {
+      if (Object.prototype.hasOwnProperty.call(json, 'modalSuccess') && json.modalSuccess) {
+        this.loadTasks()
+      }
+    })
+  }
+
+  _onClickButtonHandle (button) {
+    const formData = new FormData(this.tasksTab.querySelector('form'))
+    formData.set('handle', button.dataset.type)
+
+    fetch(this.revisionTasks.dataset.url, { method: 'POST', body: formData })
+      .then((response) => response.json())
+      .then((json) => {
+        if (Object.prototype.hasOwnProperty.call(json, 'success') && json.success) this.loadTasks()
+        if (Object.prototype.hasOwnProperty.call(json, 'tab')) this._updateTab(json.tab)
+      })
+  }
+
+  _onClickButtonTaskReorder (button) {
+    this.tasksTab.classList.add('reorder')
+    button.style.display = 'none'
+
+    const btnReorderCancel = this.tasksTab.querySelector('#btn-tasks-reorder-cancel')
+    const btnReorderSave = this.tasksTab.querySelector('#btn-tasks-reorder-save')
+
+    btnReorderSave.style.display = 'inline-block'
+    btnReorderCancel.style.display = 'inline-block'
+    btnReorderCancel.removeAttribute('disabled')
+
+    const tasksPlannedList = this.tasksTab.querySelector('ul#revision-tasks-planned-list')
+    tasksPlannedList.querySelectorAll('.tasks-item').item(0).classList.remove('tasks-item-current')
+
+    Sortable.create(tasksPlannedList, {
+      fallbackTolerance: 3,
+      animation: 150,
+      ghostClass: 'dragging'
+    })
+
+    const finishReorder = () => {
+      this.loadTasks()
+      this.tasksTab.classList.remove('reorder')
+    }
+
+    btnReorderCancel.onclick = () => finishReorder()
+    btnReorderSave.onclick = () => {
+      const taskIds = []
+      tasksPlannedList.querySelectorAll('.tasks-item').forEach((item) => {
+        taskIds.push(item.dataset.id)
+      })
+      fetch(btnReorderSave.dataset.url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ taskIds })
+      }).finally(() => finishReorder())
+    }
+  }
+
+  _onClickButtonTasksApproved (event, button) {
+    event.preventDefault()
+    const btnText = button.textContent
+    const toggleText = button.dataset.toggleText
+    const list = this.tasksTab.querySelector('ul#revision-tasks-approved')
+
+    button.dataset.toggleText = btnText
+    button.innerHTML = toggleText
+    if (button.dataset.toggle === 'true') {
+      list.style.display = 'block'
+      button.dataset.toggle = 'false'
+    } else {
+      list.style.display = 'none'
+      button.dataset.toggle = 'true'
+    }
+  }
+
+  _onClickTaskItem (event, link) {
+    event.preventDefault()
+    ajaxModal.load({ url: link.dataset.url, title: link.dataset.title })
+  }
+}