[FEATURE] UI: add UI\Component\Transfer component family

components/ILIAS/UI/UI.php

@@ -214,6 +214,7 @@ public function init(
                 $internal[UI\Implementation\Component\Entity\Factory::class],
                 $internal[UI\Implementation\Component\Prompt\Factory::class],
                 $internal[UI\Implementation\Component\Navigation\Factory::class],
+                $internal[UI\Implementation\Component\Transfer\Factory::class],
             );
 
         $internal[UI\Implementation\Component\Counter\Factory::class] = static fn() =>
@@ -480,6 +481,9 @@ public function init(
                 $use[UI\Storage::class],
             );
 
+        $internal[UI\Implementation\Component\Transfer\Factory::class] = static fn() =>
+            new UI\Implementation\Component\Transfer\Factory();
+
         $internal[UI\Implementation\DefaultRenderer::class] = static fn() =>
             new UI\Implementation\DefaultRenderer(
                 $internal[UI\Implementation\Render\Loader::class],
@@ -500,6 +504,7 @@ public function init(
                             $pull[Data\Factory::class],
                             $use[UI\HelpTextRetriever::class],
                             $internal[UI\Implementation\Component\Input\UploadLimitResolver::class],
+                            $pull[Refinery\Factory::class],
                         ),
                         new UI\Implementation\Component\Button\ButtonRendererFactory(
                             $use[UI\Implementation\FactoryInternal::class],
@@ -510,6 +515,7 @@ public function init(
                             $pull[Data\Factory::class],
                             $use[UI\HelpTextRetriever::class],
                             $internal[UI\Implementation\Component\Input\UploadLimitResolver::class],
+                            $pull[Refinery\Factory::class],
                         ),
                         new UI\Implementation\Component\Input\Field\FieldRendererFactory(
                             $use[UI\Implementation\FactoryInternal::class],
@@ -520,6 +526,7 @@ public function init(
                             $pull[Data\Factory::class],
                             $use[UI\HelpTextRetriever::class],
                             $internal[UI\Implementation\Component\Input\UploadLimitResolver::class],
+                            $pull[Refinery\Factory::class],
                         ),
                         new UI\Implementation\Component\MessageBox\MessageBoxRendererFactory(
                             $use[UI\Implementation\FactoryInternal::class],
@@ -530,6 +537,7 @@ public function init(
                             $pull[Data\Factory::class],
                             $use[UI\HelpTextRetriever::class],
                             $internal[UI\Implementation\Component\Input\UploadLimitResolver::class],
+                            $pull[Refinery\Factory::class],
                         ),
                         new UI\Implementation\Component\Input\Container\Form\FormRendererFactory(
                             $use[UI\Implementation\FactoryInternal::class],
@@ -540,6 +548,7 @@ public function init(
                             $pull[Data\Factory::class],
                             $use[UI\HelpTextRetriever::class],
                             $internal[UI\Implementation\Component\Input\UploadLimitResolver::class],
+                            $pull[Refinery\Factory::class],
                         ),
                         new UI\Implementation\Component\Menu\MenuRendererFactory(
                             $use[UI\Implementation\FactoryInternal::class],
@@ -550,6 +559,7 @@ public function init(
                             $pull[Data\Factory::class],
                             $use[UI\HelpTextRetriever::class],
                             $internal[UI\Implementation\Component\Input\UploadLimitResolver::class],
+                            $pull[Refinery\Factory::class],
                         ),
                     )
                 )
@@ -631,12 +641,12 @@ public function init(
             new Component\Resource\NodeModule("chart.js/dist/chart.umd.js");
         $contribute[Component\Resource\PublicAsset::class] = fn() =>
             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");
         $contribute[Component\Resource\PublicAsset::class] = fn() =>
             new Component\Resource\ComponentJS($this, "js/MathJax/mathjax_config.js");
+        $contribute[Component\Resource\PublicAsset::class] = fn() =>
+            new Component\Resource\ComponentJS($this, "js/Transfer/dist/transfer.min.js");
 
         /*
         those are contributed by MediaObjects

components/ILIAS/UI/docs/ROADMAP.md

@@ -327,6 +327,37 @@ with the file upload library, where working around these constraints made mainte
 more expensive than it needed to be. To avoid the same fate here, we should replace the library 
 with a custom implementation sometime soon.
 
+### Streamline template-embedding mechanisms (expert, ~5d)
+
+There are several different problems that occur during the rendering of a component where solutions require
+to embed content into the components actual template:
+
+* `UI\Component\HasHelpTopics`: tooltip embedding, encapsulated in a dedicated renderer class
+* `UI\Component\JavaScriptBindable`: JavaScript embedding (currently only an ID attribute, but this will change in the
+future), implemented entirely inside the `UI\Render\AbstractComponentRenderer`.
+* Dynamic heading levels: not yet implemented, but will require to embed the correct heading-level (h1-h6).
+* Possibly others: there are probably other solutions which are not (yet) implemented centrally.
+
+These mechanisms should be analysed and streamlined so there is a single documented mechanism that can be used for
+all of the above solutions to embed something into the actual template of a component. During this analysis it must
+be considered, that we may change our template engine soon and that a migration of the new mechanism to a possible
+engine like Twig or Blade is possible. Its even possible this solution becomes obsolete if we switch to such template
+engines.
+
+### Introduce client-side configuration object (advanced, ~5d)
+
+Client-side configuration values, such as debounce delays or visibility durations, are currently hardcoded as inline
+constants – scattered across our JavaScript code-base. For configuration values like this on the server we have already
+a concept in place, where we hide values like this behind dedicated interfaces, so potentially the system can offer
+real implementations to alter some values. This pattern was established during the migration of the UI framework towards
+the new component bootstrap mechanism. Since configuration values on the client are currently left behind, we should
+create a concept for the integration of these values into the bootstrap mechanism as well. The difficulty here lies in
+how we transfer these values from the server to our client in a sophisticated manner. Since values like this do not
+change once the application is built, it only makes sense to compile them into an artifact. Ideally this artifact would
+contain an object that is exported from a `.js` file, which can be imported directly by our ES6 modules (components).
+Alternatively, we build this as a string and store this in an `.php` artifact and ship its content via our component
+renderers, so it is available as global state (e.g. `il.UI.Config`).
+
 ## Long Term
 
 ### Mark Some Components as Internal

components/ILIAS/UI/resources/js/Core/src/sleep.js

@@ -0,0 +1,37 @@
+/**
+ * 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
+ *
+ * @author Thibeau Fuhrer <thibeau@sr.solutions>
+ */
+
+/**
+ * Pauses the execution of an async function for the given duration.
+ *
+ * @example:
+ *   async function someAction() {
+ *     // stops someAction() for 2 seconds:
+ *     await sleep(2_000);
+ *   }
+ *
+ * @param {number} durationInMs
+ * @returns {Promise<void>}
+ */
+export default function sleep(durationInMs) {
+  if (durationInMs <= 0) {
+    throw new TypeError('Duration must be greater than 0.');
+  }
+  return new Promise((resolve) => {
+    setTimeout(resolve, durationInMs);
+  });
+}

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

@@ -49,23 +49,4 @@ export default [
     external: ['il', 'jquery'],
   },
 
-  {
-    input: './src/footer.js',
-    output: {
-      file: './dist/footer.min.js',
-      format: 'iife',
-      banner: copyright,
-      plugins: [
-        terser({
-          format: {
-            comments: preserveCopyright,
-          },
-        }),
-      ],
-      globals: {
-        il: 'il',
-      },
-    },
-    external: ['il'],
-  },
 ];

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

@@ -0,0 +1,47 @@
+/**
+ * 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
+ *
+ * @author Thibeau Fuhrer <thibeau@sr.solutions>
+ */
+
+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/facade.js',
+  external: [
+    'ilias',
+    'document',
+    'window',
+  ],
+  output: {
+    // file: '../../../../../../public/assets/js/transfer.min.js',
+    file: './dist/transfer.min.js',
+    format: 'iife',
+    banner: copyright,
+    globals: {
+      ilias: 'il',
+      document: 'document',
+      window: 'window',
+    },
+    plugins: [
+      terser({
+        format: {
+          comments: preserveCopyright,
+        },
+      }),
+    ],
+  },
+};

components/ILIAS/UI/resources/js/Transfer/src/constants.js

@@ -0,0 +1,37 @@
+/**
+ * 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
+ *
+ * @author Thibeau Fuhrer <thibeau@sr.solutions>
+ */
+
+export const HIDDEN_CLASS = 'hidden';
+export const VISIBLE_CLASS = 'visible';
+
+export const DEFAULT_STATUS = 'default';
+export const SUCCESS_STATUS = 'success';
+export const FAILURE_STATUS = 'failure';
+
+export const CLIPBOARD_TRANSFER_TYPE = 'clipboard';
+export const WEB_SHARE_TRANSFER_TYPE = 'web-share';
+export const QR_CODE_TRANSFER_TYPE = 'qr-code';
+
+export const TRANSFER_STATUS_ATTRIBUTE = 'data-transfer-status';
+export const TRANSFER_TYPE_ATTRIBUTE = 'data-transfer-type';
+
+export const TRANSFER_SELECTOR = '.c-transfer';
+export const PAYLOAD_SELECTOR = `${TRANSFER_SELECTOR}__payload`;
+export const TRANSFER_BUTTON_SELECTOR = `[${TRANSFER_TYPE_ATTRIBUTE}]`;
+export const DEFAULT_STATUS_SELECTOR = `[${TRANSFER_STATUS_ATTRIBUTE}="${DEFAULT_STATUS}"]`;
+export const SUCCESS_STATUS_SELECTOR = `[${TRANSFER_STATUS_ATTRIBUTE}="${SUCCESS_STATUS}"]`;
+export const FAILURE_STATUS_SELECTOR = `[${TRANSFER_STATUS_ATTRIBUTE}="${FAILURE_STATUS}"]`;