UI: Add Column Type List

components/ILIAS/Calendar/classes/ConsultationHours/BookingTableGUI.php

@@ -207,15 +207,15 @@ protected function getColumns(): array
             'booking_participant' => $this->ui_factory
                     ->table()
                     ->column()
-                    ->linkListing($this->lng->txt('cal_ch_booking_participants')),
+                    ->listing($this->lng->txt('cal_ch_booking_participants')),
             'booking_comment' => $this->ui_factory
                 ->table()
                 ->column()
-                ->linkListing($this->lng->txt('cal_ch_booking_col_comments')),
+                ->listing($this->lng->txt('cal_ch_booking_col_comments')),
             'booking_location' => $this->ui_factory
                 ->table()
                 ->column()
-                ->linkListing($this->lng->txt('cal_ch_target_object'))
+                ->listing($this->lng->txt('cal_ch_target_object'))
         ];
 
     }

components/ILIAS/Course/classes/Grouping/Table/GroupingHandler.php

@@ -95,7 +95,7 @@ protected function buildColumns(): array
             self::COL_DESCRIPTION => $f->text($this->lng->txt('description'))->withIsSortable(true),
             self::COL_SOURCE => $f->link($this->lng->txt('groupings_source'))->withIsSortable(true),
             self::COL_UNIQUE_FIELD => $f->text($this->lng->txt('unambiguousness'))->withIsSortable(true),
-            self::COL_ASSIGNED_OBJS => $f->linkListing($this->lng->txt('groupings_assigned_obj_' . $type))->withIsSortable(true)
+            self::COL_ASSIGNED_OBJS => $f->listing($this->lng->txt('groupings_assigned_obj_' . $type))->withIsSortable(true)
         ];
     }
 

components/ILIAS/Repository/Service/Table/TableAdapterGUI.php

@@ -137,7 +137,7 @@ public function linkListingColumn(
         string $title,
         bool $sortable = false
     ): self {
-        $column = $this->ui->factory()->table()->column()->linkListing($title)->withIsSortable($sortable);
+        $column = $this->ui->factory()->table()->column()->listing($title)->withIsSortable($sortable);
         $this->addColumn($key, $column);
         return $this;
     }

components/ILIAS/Skill/Table/classes/class.AssignMaterialsTable.php

@@ -100,7 +100,7 @@ protected function getColumns(): array
                                     ->withIsSortable(false),
             "description" => $this->ui_fac->table()->column()->text($this->lng->txt("description"))
                                           ->withIsSortable(false),
-            "resources" => $this->ui_fac->table()->column()->linkListing($this->lng->txt("skmg_materials"))
+            "resources" => $this->ui_fac->table()->column()->listing($this->lng->txt("skmg_materials"))
                                         ->withIsSortable(false)
         ];
 

components/ILIAS/UI/UI.php

@@ -551,6 +551,16 @@ public function init(
                             $use[UI\HelpTextRetriever::class],
                             $internal[UI\Implementation\Component\Input\UploadLimitResolver::class],
                         ),
+                        new UI\Implementation\Component\Listing\ListingRendererFactory(
+                            $use[UI\Implementation\FactoryInternal::class],
+                            $internal[UI\Implementation\Render\TemplateFactory::class],
+                            $use[Language\Language::class],
+                            $internal[UI\Implementation\Render\JavaScriptBinding::class],
+                            $use[UI\Implementation\Render\ImagePathResolver::class],
+                            $pull[Data\Factory::class],
+                            $use[UI\HelpTextRetriever::class],
+                            $internal[UI\Implementation\Component\Input\UploadLimitResolver::class],
+                        ),
                     )
                 )
             );
@@ -593,6 +603,8 @@ public function init(
             new Component\Resource\ComponentJS($this, "js/Input/Field/input.js");
         $contribute[Component\Resource\PublicAsset::class] = fn() =>
             new Component\Resource\ComponentJS($this, "js/Item/dist/notification.js");
+        $contribute[Component\Resource\PublicAsset::class] = fn() =>
+            new Component\Resource\ComponentJS($this, "js/Listing/dist/listing.min.js");
         $contribute[Component\Resource\PublicAsset::class] = fn() =>
             new Component\Resource\ComponentJS($this, "js/MainControls/dist/mainbar.js");
         $contribute[Component\Resource\PublicAsset::class] = fn() =>

components/ILIAS/UI/resources/js/Listing/dist/listing.min.js

@@ -0,0 +1,15 @@
+/**
+ * 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
+ */
+!function(t,e){"use strict";function i(t,...e){const i=[...e];return t.replace(/%s/g,(()=>i.shift()??""))}function n(t,e){const n=e.parentElement.querySelector(`[aria-controls="${e.id}"]`);if(!n)throw new Error("Could not find button associated with list.");if(!e.hasAttribute("data-max-items"))throw new Error("Could not find max items attribute.");const a=parseInt(e.getAttribute("data-max-items"),10),r=e.querySelectorAll("li");n.addEventListener("click",(()=>{!function(t,e,n,a){const r=e.hasAttribute("aria-expanded")&&"true"===e.getAttribute("aria-expanded");n.forEach(((t,e)=>{e>a-1&&(r?t.classList.replace("visible","hidden"):t.classList.replace("hidden","visible"))})),r?(e.setAttribute("aria-expanded","false"),e.textContent=i(t.txt("show_x_items"),n.length-a)):(e.setAttribute("aria-expanded","true"),e.textContent=i(t.txt("hide_x_items"),n.length-a))}(t,n,r,a)}))}t.UI=t.UI||{},t.UI.Listing={createExpandableList:i=>n({txt:e=>t.Language.txt(e)},e.getElementById(i))}}(il,document);

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

@@ -0,0 +1,43 @@
+/**
+ * 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/listing.js',
+  external: [
+    'ilias',
+    'document',
+  ],
+  output: {
+    // file: '../../../../../../public/assets/js/listing.min.js',
+    file: './dist/listing.min.js',
+    format: 'iife',
+    banner: copyright,
+    globals: {
+      ilias: 'il',
+      document: 'document',
+    },
+    plugins: [
+      terser({
+        format: {
+          comments: preserveCopyright,
+        },
+      }),
+    ],
+  },
+};

components/ILIAS/UI/resources/js/Listing/src/createExpandableList.js

@@ -0,0 +1,76 @@
+/**
+ * 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 sprintf from '../../Core/src/sprintf.js';
+
+/**
+ * @param {{ txt: function(string): string }}
+ * @param {HTMLButtonElement} button
+ * @param {HTMLLIElement[]} listItems
+ * @param {number} maxItemCount
+ */
+function toggleListItems(
+  language,
+  button,
+  listItems,
+  maxItemCount,
+) {
+  const isExpanded = button.hasAttribute('aria-expanded')
+    && button.getAttribute('aria-expanded') === 'true';
+
+  listItems.forEach((item, index) => {
+    if (index > (maxItemCount - 1)) {
+      if (isExpanded) {
+        item.classList.replace('visible', 'hidden');
+      } else {
+        item.classList.replace('hidden', 'visible');
+      }
+    }
+  });
+  if (isExpanded) {
+    button.setAttribute('aria-expanded', 'false');
+    button.textContent = sprintf(language.txt('show_x_items'), listItems.length - maxItemCount);
+  } else {
+    button.setAttribute('aria-expanded', 'true');
+    button.textContent = sprintf(language.txt('hide_x_items'), listItems.length - maxItemCount);
+  }
+}
+
+/**
+ * @param {{ txt: function(string): string }}
+ * @param {HTMLUListElement|HTMLOListElement} list
+ */
+export default function createExpandableList(language, list) {
+  const button = list.parentElement.querySelector(`[aria-controls="${list.id}"]`);
+  if (!button) {
+    throw new Error('Could not find button associated with list.');
+  }
+  if (!list.hasAttribute('data-max-items')) {
+    throw new Error('Could not find max items attribute.');
+  }
+  const maxItemCount = parseInt(list.getAttribute('data-max-items'), 10);
+  const listItems = list.querySelectorAll('li');
+
+  button.addEventListener('click', () => {
+    toggleListItems(
+      language,
+      button,
+      listItems,
+      maxItemCount,
+    );
+  });
+}

components/ILIAS/UI/resources/js/Listing/src/listing.js

@@ -0,0 +1,27 @@
+/**
+ * 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 'ilias';
+import document from 'document';
+import createExpandableList from './createExpandableList.js';
+
+il.UI = il.UI || {};
+
+il.UI.Listing = {
+  createExpandableList: (id) => createExpandableList(
+    { txt: (key) => il.Language.txt(key) },
+    document.getElementById(id),
+  ),
+};

components/ILIAS/UI/src/Component/Listing/Ordered.php

@@ -20,10 +20,12 @@
 
 namespace ILIAS\UI\Component\Listing;
 
+use ILIAS\UI\Component\JavaScriptBindable;
+
 /**
  * Interface Ordered
  * @package ILIAS\UI\Component\Listing
  */
-interface Ordered extends Listing
+interface Ordered extends Listing, JavaScriptBindable
 {
 }

components/ILIAS/UI/src/Component/Listing/Unordered.php

@@ -20,10 +20,12 @@
 
 namespace ILIAS\UI\Component\Listing;
 
+use ILIAS\UI\Component\JavaScriptBindable;
+
 /**
  * Interface Unordered
  * @package ILIAS\UI\Component\Listing
  */
-interface Unordered extends Listing
+interface Unordered extends Listing, JavaScriptBindable
 {
 }

components/ILIAS/UI/src/Component/Table/Column/Factory.php

@@ -136,12 +136,13 @@ public function link(string $title): Link;
      * ---
      * description:
      *   purpose: >
-     *      The LinkListing Column features an Ordered or Unordered Listing of Standard Links.
+     *      The Listing Column features an Ordered or Unordered Listing.
      *
      * ---
-     * @return \ILIAS\UI\Component\Table\Column\LinkListing
+     * @param string $title
+     * @return \ILIAS\UI\Component\Table\Column\Listing
      */
-    public function linkListing(string $title): LinkListing;
+    public function listing(string $title): Listing;
 
     /**
      * ---

components/ILIAS/UI/src/Component/Table/Column/LinkListing.php → components/ILIAS/UI/src/Component/Table/Column/Listing.php

@@ -20,6 +20,6 @@
 
 namespace ILIAS\UI\Component\Table\Column;
 
-interface LinkListing extends Column
+interface Listing extends Column
 {
 }

components/ILIAS/UI/src/Implementation/Component/Listing/ListingRendererFactory.php

@@ -0,0 +1,54 @@
+<?php
+
+/**
+ * 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
+ */
+
+declare(strict_types=1);
+
+namespace ILIAS\UI\Implementation\Component\Listing;
+
+use ILIAS\UI\Implementation\Render\DefaultRendererFactory;
+use ILIAS\UI\Implementation\Render\ComponentRenderer;
+use ILIAS\UI\Component\Component;
+
+/**
+ * @author Thibeau Fuhrer <thibeau@sr.solutions>
+ */
+class ListingRendererFactory extends DefaultRendererFactory
+{
+    /** @var string[] cannonical names of table components */
+    protected const array TABLE_COLUMN_CONTEXTS = [
+        'OrderingRowTable',
+        'DataRowTable',
+    ];
+
+    public function getRendererInContext(Component $component, array $contexts): ComponentRenderer
+    {
+        if (!empty(array_intersect(self::TABLE_COLUMN_CONTEXTS, $contexts))) {
+            return new TableColumnContextRenderer(
+                $this->ui_factory,
+                $this->tpl_factory,
+                $this->lng,
+                $this->js_binding,
+                $this->image_path_resolver,
+                $this->data_factory,
+                $this->help_text_retriever,
+                $this->upload_limit_resolver,
+            );
+        }
+
+        return parent::getRendererInContext($component, $contexts);
+    }
+}

components/ILIAS/UI/src/Implementation/Component/Listing/Ordered.php

@@ -21,11 +21,13 @@
 namespace ILIAS\UI\Implementation\Component\Listing;
 
 use ILIAS\UI\Component as C;
+use ILIAS\UI\Implementation\Component\JavaScriptBindable;
 
 /**
  * Class Listing
  * @package ILIAS\UI\Implementation\Component\Listing\Listing
  */
 class Ordered extends Listing implements C\Listing\Ordered
 {
+    use JavaScriptBindable;
 }