UI: an Input ModeViewControl

components/ILIAS/UI/UI.php

@@ -600,6 +600,9 @@ public function init(
             new Component\Resource\ComponentJS($this, "js/Progress/dist/progress.min.js");
         $contribute[Component\Resource\PublicAsset::class] = fn() =>
             new Component\Resource\ComponentJS($this, "js/MainControls/dist/footer.min.js");
+        $contribute[Component\Resource\PublicAsset::class] = fn() =>
+            new Component\Resource\ComponentJS($this, "js/Input/ViewControl/dist/input.viewcontrols.min.js");
+
         /*
         those are contributed by MediaObjects
         $contribute[Component\Resource\PublicAsset::class] = fn() =>

components/ILIAS/UI/resources/js/ViewControl/src/jqueryeventdispatcher.js → components/ILIAS/UI/resources/js/Core/src/jqueryeventdispatcher.js

@@ -34,4 +34,13 @@ export default class JQueryEventDispatcher {
   dispatch(element, eventType, data) {
     this.#jquery(element).trigger(eventType, data);
   }
+
+  /**
+   * @param {HTMLElement} element
+   * @param {string} eventType
+   * @param {function} handler
+   */
+  register(element, eventType, handler) {
+    this.#jquery(element).on(eventType, handler);
+  }
 }

components/ILIAS/UI/resources/js/Input/ViewControl/rollup.config.js

@@ -0,0 +1,39 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+import terser from '@rollup/plugin-terser';
+import copyright from '../../../../../../../scripts/Copyright-Checker/copyright.js';
+import preserveCopyright from '../../../../../../../scripts/Copyright-Checker/preserveCopyright.js';
+
+export default {
+  input: './src/index.js',
+  output: {
+    file: './dist/input.viewcontrols.min.js',
+    format: 'iife',
+    banner: copyright,
+    plugins: [
+      terser({
+        format: {
+          comments: preserveCopyright,
+        },
+      }),
+    ],
+    globals: {
+      il: 'il',
+      jquery: '$',
+    },
+  },
+  external: ['il', 'jquery'],
+};

components/ILIAS/UI/resources/js/Input/ViewControl/src/fieldselection.js

@@ -0,0 +1,62 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+export default class FieldSelection {
+  /**
+   * @type {JQueryEventDispatcher}
+   */
+  #eventDispatcher;
+
+  /**
+   * @param {JQueryEventDispatcher} eventDispatcher
+   */
+  constructor(eventDispatcher) {
+    this.#eventDispatcher = eventDispatcher;
+  }
+
+  /**
+   * @param {HTMLElement} component
+   * @param {string} internalSignal
+   * @param {string} containerSubmitSignal
+   * @param {string} componentName
+   * @return {void}
+   */
+  init(component, internalSignal, containerSubmitSignal, componentName) {
+    this.#eventDispatcher.register(
+      component.ownerDocument,
+      internalSignal,
+      (event) => {
+        const container = event.target.closest('.il-viewcontrol-fieldselection');
+        const checkbox = container.querySelectorAll('input[type=checkbox]');
+        const valueContainer = container.querySelector('.il-viewcontrol-value');
+        const value = Object.values(checkbox).map((o) => (o.checked ? o.value : ''));
+
+        valueContainer.innerHTML = '';
+        value.forEach(
+          (v) => {
+            const element = component.ownerDocument.createElement('input');
+            element.type = 'hidden';
+            element.name = `${componentName}[]`;
+            element.value = v;
+            valueContainer.appendChild(element);
+          },
+        );
+
+        this.#eventDispatcher.dispatch(event.target, containerSubmitSignal);
+        return false;
+      },
+    );
+  }
+}

components/ILIAS/UI/resources/js/Input/ViewControl/src/index.js

@@ -0,0 +1,32 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+import il from 'il';
+import $ from 'jquery';
+import FieldSelection from './fieldselection.js';
+import Sortation from './sortation.js';
+import Pagination from './pagination.js';
+import Mode from './mode.js';
+import JQueryEventDispatcher from '../../../Core/src/jqueryeventdispatcher.js';
+
+const eventDispatcher = new JQueryEventDispatcher($);
+
+il.UI = il.UI || {};
+il.UI.Input = il.UI.Input || {};
+il.UI.Input.Viewcontrols = il.UI.Input.Viewcontrols || {};
+il.UI.Input.Viewcontrols.FieldSelection = new FieldSelection(eventDispatcher);
+il.UI.Input.Viewcontrols.Sortation = new Sortation(eventDispatcher);
+il.UI.Input.Viewcontrols.Pagination = new Pagination(eventDispatcher);
+il.UI.Input.Viewcontrols.Mode = new Mode(eventDispatcher);

components/ILIAS/UI/resources/js/Input/ViewControl/src/mode.js

@@ -0,0 +1,52 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+export default class Mode {
+  /**
+   * @type {JQueryEventDispatcher}
+   */
+  #eventDispatcher;
+
+  /**
+   * @param {JQueryEventDispatcher} eventDispatcher
+   */
+  constructor(eventDispatcher) {
+    this.#eventDispatcher = eventDispatcher;
+  }
+
+  /**
+   * @param {HTMLElement} component
+   * @param {string} optValue
+   * @param {string} containerSubmitSignal
+   * @return {void}
+   */
+  init(component, optValue, containerSubmitSignal) {
+    component.addEventListener(
+      'click',
+      (event) => {
+        const btn = event.target;
+        btn.parentElement.querySelectorAll('button').forEach(
+          (button) => button.classList.remove('engaged'),
+        );
+        btn.classList.add('engaged');
+        btn.closest('.il-viewcontrol')
+          .querySelector('.il-viewcontrol-value > input')
+          .value = optValue;
+        this.#eventDispatcher.dispatch(event.target, containerSubmitSignal);
+        return false;
+      },
+    );
+  }
+}

components/ILIAS/UI/resources/js/Input/ViewControl/src/pagination.js

@@ -0,0 +1,51 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+export default class Pagination {
+  /**
+   * @type {JQueryEventDispatcher}
+   */
+  #eventDispatcher;
+
+  /**
+   * @param {JQueryEventDispatcher} eventDispatcher
+   */
+  constructor(eventDispatcher) {
+    this.#eventDispatcher = eventDispatcher;
+  }
+
+  /**
+   * @param {HTMLElement} component
+   * @param {string} internalSignal
+   * @param {string} containerSubmitSignal
+   * @return {void}
+   */
+  init(component, internalSignal, containerSubmitSignal) {
+    this.#eventDispatcher.register(
+      component.ownerDocument,
+      internalSignal,
+      (event, signalData) => {
+        const inputs = event.target
+          .closest('.il-viewcontrol-pagination')
+          .querySelectorAll('.il-viewcontrol-value input');
+        inputs[0].value = signalData.options.offset;
+        inputs[1].value = signalData.options.limit;
+
+        this.#eventDispatcher.dispatch(event.target, containerSubmitSignal);
+        return false;
+      },
+    );
+  }
+}

components/ILIAS/UI/resources/js/Input/ViewControl/src/sortation.js

@@ -0,0 +1,58 @@
+/**
+ * This file is part of ILIAS, a powerful learning management system
+ * published by ILIAS open source e-Learning e.V.
+ *
+ * ILIAS is licensed with the GPL-3.0,
+ * see https://www.gnu.org/licenses/gpl-3.0.en.html
+ * You should have received a copy of said license along with the
+ * source code, too.
+ *
+ * If this is not the case or you just want to try ILIAS, you'll find
+ * us at:
+ * https://www.ilias.de
+ * https://github.com/ILIAS-eLearning
+ */
+
+export default class Sortation {
+  /**
+   * @type {JQueryEventDispatcher}
+   */
+  #eventDispatcher;
+
+  /**
+   * @param {JQueryEventDispatcher} eventDispatcher
+   */
+  constructor(eventDispatcher) {
+    this.#eventDispatcher = eventDispatcher;
+  }
+
+  /**
+   * @param {HTMLElement} component
+   * @param {string} internalSignal
+   * @param {string} containerSubmitSignal
+   * @return {void}
+   */
+  init(component, internalSignal, containerSubmitSignal) {
+    this.#eventDispatcher.register(
+      component.ownerDocument,
+      internalSignal,
+      (event, signalData) => {
+        let container = event.target.closest('.il-viewcontrol-fieldselection');
+        if (signalData.options.parent_container) {
+          container = component.ownerDocument.querySelector(
+            `#${signalData.options.parent_container
+            } .il-viewcontrol-sortation`,
+          );
+        } else {
+          container = event.target.closest('.il-viewcontrol-sortation');
+        }
+        const inputs = container.querySelectorAll('.il-viewcontrol-value > input');
+        const val = signalData.options.value.split(':');
+        [inputs[0].value, inputs[1].value] = val;
+
+        this.#eventDispatcher.dispatch(event.target, containerSubmitSignal);
+        return false;
+      },
+    );
+  }
+}

components/ILIAS/UI/resources/js/ViewControl/rollup.config.js

@@ -15,8 +15,8 @@
  ******************************************************************** */
 
 import terser from '@rollup/plugin-terser';
-import copyright from '../../../../../../scripts/Copyright-Checker/copyright';
-import preserveCopyright from '../../../../../../scripts/Copyright-Checker/preserveCopyright';
+import copyright from '../../../../../../scripts/Copyright-Checker/copyright.js';
+import preserveCopyright from '../../../../../../scripts/Copyright-Checker/preserveCopyright.js';
 
 export default {
   input: './src/viewcontrols.js',

components/ILIAS/UI/resources/js/ViewControl/src/viewcontrols.js

@@ -15,9 +15,9 @@
 
 import il from 'il';
 import $ from 'jquery';
-import SortationFactory from './sortation.factory';
-import PaginationFactory from './pagination.factory';
-import JQueryEventDispatcher from './jqueryeventdispatcher';
+import SortationFactory from './sortation.factory.js';
+import PaginationFactory from './pagination.factory.js';
+import JQueryEventDispatcher from '../../Core/src/jqueryeventdispatcher.js';
 
 const eventDispatcher = new JQueryEventDispatcher($);
 il.UI = il.UI || {};