WebSVN – Moodle – Diff – /lib/amd/src/bulkactions/bulk_actions.js

     /** @property {boolean} isBulkActionsModeEnabled Whether the bulk actions mode is enabled. */
     isBulkActionsModeEnabled = false;
+    /**
+     * @property {int} maxButtons Sets the maximum number of action buttons to display. If exceeded, additional actions
+     *                            are shown in a dropdown menu.
+     */
+    maxButtons = 5;
     /**
+     * The class constructor.
+     *
-     * The class constructor.
+     * @param {int|null} maxButtons Sets the maximum number of action buttons to display. If exceeded, additional actions
      *                              are shown in a dropdown menu.
      * @returns {void}
      */
-    constructor() {
+    constructor(maxButtons = null) {
         if (!this.getStickyFooterContainer()) {
             throw new Error('Sticky footer not found.');
+        }
         // Store any pre-existing content in the sticky footer. When bulk actions mode is enabled, this content will be
+        // replaced with the bulk actions content and restored when bulk actions mode is disabled.
+        this.initialStickyFooterContent = this.getStickyFooterContainer().innerHTML;
+        if (maxButtons) {
-        // replaced with the bulk actions content and restored when bulk actions mode is disabled.
+            this.maxButtons = maxButtons;
         this.initialStickyFooterContent = this.getStickyFooterContainer().innerHTML;
         // Register and handle the item select change event.
         this.registerItemSelectChangeEvent(async() => {
             this.selectedItems = this.getSelectedItems();
     registerItemSelectChangeEvent(eventHandler) {
         throw new Error(`registerItemSelectChangeEvent(${eventHandler}) must be implemented in ${this.constructor.name}`);
+    }
+    /**
+     * Defines the action for deselecting a selected item.
+     *
+     * The base bulk actions class supports deselecting all selected items but does not have knowledge of the type of the
+     * selected element. Therefore, each subclass must explicitly define the action of resetting the attributes that
+     * indicate a selected state.
+     *
+     * @method deselectItem
+     * @param {HTMLElement} selectedItem The selected element.
+     * @returns {void}
+     */
+    deselectItem(selectedItem) {
+        throw new Error(`deselectItem(${selectedItem}) must be implemented in ${this.constructor.name}`);
+    }
     /**
      * Returns the sticky footer container.
+     *
      * @method getStickyFooterContainer
      * @returns {HTMLElement}
     /**
      * Enables the bulk action mode.
+     *
      * @method enableBulkActionsMode
-     * @returns {Promise}
+     * @returns {Promise<void>}
      */
     async enableBulkActionsMode() {
         // Make sure that the sticky footer is enabled.
         enableStickyFooter();
             bulkAction.setSelectedItems(this.selectedItems);
         });
         // Register the click listener event for the cancel bulk mode button.
         bulkModeContainer.addEventListener('click', (e) => {
             if (e.target.closest(Selectors.cancelBulkActionModeElement)) {
-                // Uncheck all selected items.
+                // Deselect all selected items.
                 this.selectedItems.forEach((item) => {
-                    item.checked = false;
+                    this.deselectItem(item);
                 });
                 // Disable the bulk action mode.
                 this.disableBulkActionsMode();
+            }
         });
         this.isBulkActionsModeEnabled = true;
+        // Calling `renderBulkActions()` already renders the item selection count.
+        // Because of this, screen readers will not announce the item selection count on first load given that aria-live regions
+        // must be present in the DOM and have their contents changed before screen readers can announce their content.
+        // So, we call `updateBulkItemSelection()` after a short delay to ensure that screen readers announce the item count.
+        setTimeout(async() => {
+            await this.updateBulkItemSelection();
+        }, 300);
+    }
     /**
      * Disables the bulk action mode.
     /**
      * Renders the bulk actions content.
+     *
      * @method renderBulkActions
-     * @returns {Promise}
+     * @returns {Promise<string>}
      */
     async renderBulkActions() {
-        let data = {
+        const data = {
-            'bulkselectioncount': this.selectedItems.length,
+            bulkselectioncount: this.selectedItems.length,
+            actions: [],
+            moreactions: [],
-            'actions': []
+            hasmoreactions: false,
+        };
+        const bulkActions = this.getBulkActions();
+        const showMoreButton = bulkActions.length > this.maxButtons;
-        };
+        // Get all bulk actions and render them in order.
-        // Render the bulk actions trigger element for each available bulk action.
+        const actions = await Promise.all(
+            bulkActions.map((bulkAction, index) =>
+                bulkAction.renderBulkActionTrigger(
+                    showMoreButton && (index >= this.maxButtons - 1),
+                    index
+                )
+            )
+        );
+        // Separate rendered actions into data.actions and data.moreactions in the correct order.
+        actions.forEach((actionTrigger, index) => {
+            if (showMoreButton && (index >= this.maxButtons - 1)) {
+                data.moreactions.push({'actiontrigger': actionTrigger});
-        await Promise.all(this.getBulkActions().map(async(bulkAction) => {
+            } else {
+                data.actions.push({'actiontrigger': actionTrigger});
-            data.actions.push({'actiontrigger': await bulkAction.renderBulkActionTrigger()});
+            }
+        });
-        }));
+        data.hasmoreactions = data.moreactions.length > 0;
         return Templates.render('core/bulkactions/bulk_actions', data);

Proyectos de Subversion Moodle

(root)/lib/amd/src/bulkactions/bulk_actions.js – Rev 1 → 1441