Add a hook for collapsible content

This might allow a script to intervene after the inital setup and to
process custom state like for instance; autocollapse, inner/outercollapse.

I also note that the hook is deliberately AFTER the changes to the DOM,
since hooks can be executed after they have been fired, so predictable
DOM is required, which is only after the makeCollapsible setup.

Expose expand/collapse/toggle functions using element data.

Bug: T72762
Change-Id: I099c533740bbe15a1d65c8821bad8bb8395f3806

diff --git a/resources/src/jquery/jquery.makeCollapsible.js b/resources/src/jquery/jquery.makeCollapsible.js
index 19fdb26..ddc57ec 100644 (file)
--- a/resources/src/jquery/jquery.makeCollapsible.js
+++ b/resources/src/jquery/jquery.makeCollapsible.js
@@ -244,7 +244,7 @@
                        options = {};
                }
 
-               return this.each( function () {
+               this.each( function () {
                        var $collapsible, collapseText, expandText, $caption, $toggle, actionHandler, buildDefaultToggleLink,
                                premadeToggleHandler, $toggleLink, $firstItem, collapsibleId, $customTogglers, firstval;
 
@@ -392,13 +392,39 @@
                                }
                        }
 
+                       $( this ).data( 'mw-collapsible', {
+                               collapse: function () {
+                                       actionHandler.call( $toggleLink.get( 0 ), null, { instantHide: true, wasCollapsed: false } );
+                               },
+                               expand: function () {
+                                       actionHandler.call( $toggleLink.get( 0 ), null, { instantHide: true, wasCollapsed: true } );
+                               },
+                               toggle: function () {
+                                       actionHandler.call( $toggleLink.get( 0 ), null, null );
+                               }
+                       } );
+
                        // Initial state
                        if ( options.collapsed || $collapsible.hasClass( 'mw-collapsed' ) ) {
                                // One toggler can hook to multiple elements, and one element can have
                                // multiple togglers. This is the sanest way to handle that.
                                actionHandler.call( $toggleLink.get( 0 ), null, { instantHide: true, wasCollapsed: false } );
                        }
+
                } );
+
+               /**
+                * Fired after collapsible content has been initialized
+                *
+                * This gives an option to modify the collapsible behavior.
+                *
+                * @event wikipage_collapsibleContent
+                * @member mw.hook
+                * @param {jQuery} $content All the elements that have been made collapsible
+                */
+               mw.hook( 'wikipage.collapsibleContent' ).fire( this );
+
+               return this;
        };
 
        /**