aboutsummaryrefslogtreecommitdiffstats
path: root/resources/src/jquery/jquery.makeCollapsible.js
Commit message (Collapse)AuthorAgeFilesLines
* eslint: Autofix var to let/constEd Sanders2024-09-121-25/+25
| | | | | | | Temporarily disable no-var & prefer-const as resulting errors need to be fixed manually. Change-Id: I6cb62a2c70a4c1fc265a00b1f18af127ac9d5029
* build: Update eslint-config-wikimedia to 0.28.1 and autofixEd Sanders2024-06-111-2/+2
| | | | | | | Also remove temporary explicit dependency on eslint-plugin-vue introduced in Ibd616750f046a. Change-Id: Ic6330fcb116e99d5827b4877e094e3073e2b7b72
* Merge "docs: Document jQuery plugins with modules"jenkins-bot2024-05-241-8/+9
|\
| * docs: Document jQuery plugins with modulesapaskulin2024-05-241-8/+9
| | | | | | | | | | | | | | | | Moves jQuery plugins from a namespace to individual module pages to be more clear about installation requirements. Bug: T353357 Change-Id: I07f6d07202d9525bb9c6a2e7c403a53bfcfb9aa7
* | jquery.makeCollapsible: fallback to original collapsibleSportzpikachu2024-05-221-0/+4
|/ | | | | | | | | | | | 610b9ac91c4b changed the behaviour of jquery.makeCollapsible to check if the toggle is inside the original collapsible. If not, it searches up the DOM tree to find a .mw-collapsible element. However, this new behaviour causes jquery.makeCollapsible to do nothing if the toggle link has been moved outside of the collapsible but not in the children of the collapsible. Add a fallback that uses the original collapsible in case one could not be found. Bug: T364712 Change-Id: I6ace62acccdbdd1fbc6307f2090d68f601477a6c
* jquery.makeCollapsible: Make toggle buttons work inside cloned contentjwbth2024-04-161-1/+10
| | | | | | | | | | | Collapsible elements may be cloned, e.g. for use in reference popups (see T362561). In this case they should keep their functionality. This patch adds an instruction that makes sure the button element is inside the collapsible element (which it should be when no custom togglers are used, if my understanding is correct). If not, it looks for the closest `.mw-collapsible` element up in the DOM tree. If I understand correctly, the first `actionHandler` declaration relates to the case when no custom togglers is used, so changing it won't affect the behavior with custom togglers which would require a different approach. Bug: T362561 Change-Id: I1f8f1108a17246f16f89599025cb128ede307161
* docs: Migrate hooks to JSDocapaskulin2024-03-151-2/+2
| | | | | Bug: T359280 Change-Id: I4b47aacfb63036e7591a58ac10fc337dce40ede6
* docs: Migrate @mixins tags to JSDocapaskulin2024-03-051-1/+1
| | | | | Bug: T357811 Change-Id: I2f7d9d79ffcb7aafbec4d9fbb0e4e2fe78d515bb
* docs: Format descriptionsapaskulin2024-02-051-1/+1
| | | | | | | | Make sure all JSDoc descriptions end with a period in order to populate the summary field in the theme. Bug: T352308 Change-Id: I787b9c8a59b5e981b78a24f2b380c190eec6a21d
* Document jQuery pluginsJon Robson2024-01-081-3/+7
| | | | | Bug: T352308 Change-Id: Id3a0ec3d71e4e2966baf46f43652001c3b00674a
* jquery.makeCollapsible: Refactor misleading docNardog2023-11-261-1/+1
| | | | | | | | The hook fires once per element with the mw-collapsible class. This came up while reviewing I4a33323. Change-Id: I559ab1dcf1eafac474272969622b5cea234e09bd
* makeCollapsible: Convert bi-state string to booleanEd Sanders2023-10-211-10/+6
| | | | Change-Id: I12d89f5b581520cd3d9648637dc6002498866853
* jquery.makeCollapsible: Fix double activation when pressing SpaceBartosz Dziewoński2023-04-131-4/+4
| | | | | | | | | | | | | | | | | | | | | | | | | | | Since change I06acf7dc19fba13e23d2594f8a41cbc58f973939 we're using <button> elements instead of <a> elements for the default toggles. I noticed that they are now activated twice when pressing Space. This happens because if we don't call preventDefault() in a keydown handler, and the event target is a <button> and the pressed key is Space, then browsers will run the button's activation behavior, which is to fire a fake 'click' event. We end up handling both the real 'keypress' and the fake 'click'. (Good luck finding a spec, any spec, that states this clearly. I could only find vague hints about element activation behavior.) The recommended way to avoid these problems is to only handle 'click' events, and not 'keypress' or 'keydown', since keyboard interactions will fire 'click' through this activation behavior as well. However, we also support custom toggles, which are elements that may not have activation behaviors, so we can't do that in this code. Instead, we can switch from 'keypress' events to 'keydown' events. Despite subtle differences they work the same for our use case, and let us cancel the activation behavior by calling preventDefault(). Change-Id: I50463860a7eb44b182b3196c8e0d629d86cdef21
* jquery.makeCollapsible: Use <button> instead of <a>, but styled like a linkBartosz Dziewoński2023-04-131-7/+3
| | | | | Bug: T333357 Change-Id: I06acf7dc19fba13e23d2594f8a41cbc58f973939
* jquery.makeCollapsible: support toggle placeholderLucas Werkmeister2023-03-211-5/+13
| | | | | | | | | | | | Previously, makeCollapsible users could either accept the default placement of the toggle button, or supply their own button anywhere in the DOM and be fully responsible for it (contents, events, etc.). This change adds a third option: specify the position in the DOM using a placeholder element, but still let jQuery.makeCollapsible populate the button to look just like a default button. Bug: T329167 Change-Id: Ic2c222f139e56b4bd8c12490646d213fd9d25337
* jquery.makeCollapsible: Use mw.util.getTargetFromFragmentEd Sanders2022-08-311-1/+1
| | | | | | | | | | | :target does not get updated when the URL is changed by history.pushState/replaceState, which is used in numerous places throughout MediaWiki. The utility method uses the hash fragment from the current URL when called with no parameters. Change-Id: I78eab4fd7180bef28f70cae903f94f006de4c012
* src/jquery: Move var declarations inlineEd Sanders2022-07-251-22/+20
| | | | Change-Id: Ie977d8ff13daf790aa28632f34b51f1a2b7ec4d3
* Remove or replace usages of "sane"Reedy2021-11-221-1/+1
| | | | | Bug: T254646 Change-Id: I096b2cf738a1395a14f1d47bcbed0c2c686c2581
* build: Update eslint-config-wikimedia to 0.21.0Ed Sanders2021-11-091-1/+1
| | | | | | | | | | | * Replace `substr`/`substring` with `slice`. The second argument to `substring` is length, not end index as in `substr`/`slice`, so convert where necessary. * Replace `new Date().getTime()` with `Date.now()` * Documentation fixes * Replace `throw Error` with `throw new Error` Change-Id: I532500ea4c99d8ebec01efb21273c8df21626e59
* jquery.makeCollapsible: Use CSS :target when handling links to collapsed ↵Bartosz Dziewoński2021-06-141-8/+2
| | | | | | | | | | | | elements This works correctly when the fragment identifier is percent-encoded, and relies on the browser to handle the annoying work of decoding it. Follow-up to 599c80d06ecdf6829cd53af02da18de3c5725672. Bug: T283959 Change-Id: I6062912b496a85d5838580824dbfcbfc726f896c
* Expand collapsed elements when the browser tries to scroll to a childNardog2021-03-211-0/+49
| | | | | | | | | | Known issue: If you scroll to a fragment via hash, collapse a parent, and then click a link to the same fragment or press Enter in the address bar, the scrolling won't happen. This is because the hashchange event doesn't get fired, and I doubt there's a good solution. Bug: T276741 Change-Id: Ibd42d4a051b7bb07beeea4a36b0dc5977f315518
* Revert "Move activating of makeCollapsible out of 'mediawiki.page.ready'"Bartosz Dziewoński2020-10-131-4/+0
| | | | | | | | | This reverts commit afc2517bd13b181c564d167d025daf869f9d028c. Caused T265134. Bug: T260642 Bug: T265134 Change-Id: Ia88feaef4213579acebfeec19b33a5f4d3ed8085
* Move activating of makeCollapsible out of 'mediawiki.page.ready'Fomafix2020-09-111-0/+4
| | | | | | | | | | | | The module 'jquery.makeCollapsible' activates the collapsible elements now itself. The module get loaded by a detection in Skin::getDefaultModules. To avoid any breaking change the module get still also gets loaded by the detection in 'mediawiki.page.ready' but generate a warning. Bug: T260642 Change-Id: Ieafaaaa4acfcbd6b1f8d890c9ad953c87eadfe5d
* SECURITY: jquery.makeCollapsible: Escape user-generated CSS selectorsBartosz Dziewoński2020-03-261-0/+1
| | | | | Bug: T246602 Change-Id: Iea64a258499ab597b9a8900418a42162fdb5f391
* jquery.makeCollapsible: Add toggleARIA option and enable for plain toggleVolker E2019-09-211-0/+7
| | | | | | | | | | Adding `aria-expanded` attributes to `$toggle`. That is not resolving each and every issue, but it gives at least a valuable hint for screen readers and resolves the situation for togglers, where the toggled content comes directly after `$toggle`. Bug: T222904 Change-Id: Ic457bda58e56fb9ba2dce6df195e9fb48afb07f6
* build: Update eslint-config-wikimedia to 0.13.0Ed Sanders2019-07-051-0/+2
| | | | Change-Id: I7df5840bc97f8bbcd8cfc875c2b48b3061ef2c9e
* makeCollapsible: Avoid Sizzle selectorsEd Sanders2019-06-271-2/+2
| | | | Change-Id: I1a36e66fd18249b064ebb66fa558743c162e0ec8
* Use HTTPS for creativecommons.orgFomafix2019-06-141-1/+1
| | | | | | http://creativecommons.org/ redirects to https://creativecommons.org/ Change-Id: I625a09b32a30df2043620c0ce0756b2a963ba0c7
* build: Update eslint-config-wikimedia to 0.10.1Ed Sanders2019-02-021-1/+0
| | | | Change-Id: Id98af16c1ec1c6c4a790948a35e96e2fe925ebb5
* build: Update eslint-config-wikimedia to 0.10.0Ed Sanders2019-01-081-0/+1
| | | | Change-Id: I2930bcabeeb7b7b2eb36063e77b26e664a691b43
* Avoid HTML string parsingEd Sanders2018-11-231-1/+2
| | | | | | Identified using https://github.com/wikimedia/eslint-plugin-jquery/pull/12 Change-Id: Ic3ac53804085aa61be54793e7e5f27b23d99a560
* resources: Strip '$' and 'mw' from file closuresTimo Tijhof2018-09-141-2/+2
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Follows-up Id6d13bbea6: - '$': mw.loader.implement does this already. - 'mw': Use the canonical name directly. This replaces the following patterns: File closures (common): - `( function ( $, mw ) {` => `( function () {` - `( function ( $ ) {` => `( function () {` - `( function ( mw ) {` => `( function () {` - `( function ( mw, $ ) {` => `( function () {` File closures (rare): - `( function ( mw, $, OO ) {` => `( function () {` - `( function ( mw, OO, $ ) {` => `( function () {` - `( function ( mw, document ) {` => `( function () {` Combined dom-ready and file closure (rare): - `jQuery( function ( $ ) {` => `$( function () { - `jQuery( function () {` => `$( function () { Remaining references in files without a closure, as found by the new ESLint setting (rare): - `jQuery` => `$` - `mediaWiki` => `mw` Change-Id: I7cf2426cde597259e8c6f3f6f615a1a81a0ca82b
* makeCollapsible: Reduce duplicate code for adding eventhandlersDerk-Jan Hartman2018-06-041-30/+19
| | | | Change-Id: I3d15ef24f8a3fafb05f2d9ed614e29baa6555bde
* makeCollapsible: Remove animationsDerk-Jan Hartman2018-05-191-58/+8
| | | | | | | | | | | | | | | The animations are: * not well liked * non-configurable (in presence and time) * bad for performance * javascript based instead of CSS Removing them allows us to make it easier to replace NavFrame and collapsible as deployed by the communities, and will be better for mobile use as well. Bug: T195049 Change-Id: I5eb505d1bd2097fe5d98db47293583e7225310de
* makeCollapsible: fix state of nested collapsiblesDerk-Jan Hartman2018-05-101-1/+1
| | | | | | | | | | | | When collapsing or expanding an element which has nested other collapsibles, the labels of all nested toggles were updating to the value of the parent, while their state was not. Apply to the specific toggle only, just as the classes are applied to just the specific toggle. Bug: T168689 Change-Id: I1c3c29dc9ca4ccbf8da83796e56964a7a6d58a81
* jquery.makeCollapsible: Fix typo in documentationBartosz Dziewoński2018-05-081-1/+1
| | | | Change-Id: Iaf53f0e460bc8684f0925c2f3963d988f8624aa4
* sortable tables/mw-collapsible no longer causes page jumpjdlrobson2018-05-021-1/+8
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | Relatively straightforwardly - we move padding-right definition into top styles to avoid a reflow This turned out to be a little tricker than first imagined. The code in jquery.makeCollapsible.js finds elements marked up as collapsible and then 1) collapses them 2) inserts a toggle button. To avoid a reflow on the page, we have to make sure the collapsed content is collapsed prior to the code running and reserve space for the toggle button. The toggle button is tricky as it is subject to i18n. However we can access this label via a LESS variable and use a pseudo element (which is supported by the majority of modern browsers) to preserve the space we need. When the JavaScript has loaded there is no need for that CSS any more. Note on slow connections, collapsed content will not be accessible until the JavaScript has fully loaded, however this is arguably less of a problem then the existing reflows. Note, there are many many many usages of mw-collapsible, because of this this does not claim to address all reflows in all usages - but it does provide support for the more widespread usages. Follow up patches can be added for specific situations - for example table of contents toggle. Bug: T42792 Bug: T42812 Depends-On: I3388c3c4f91cdbab11e89cdc95973b688d3f1ce7 Change-Id: If9c8f0974e3a4b08e4a66d37f7f5adf67d73054e
* jquery.makeCollapsible: Only add '[' ']' to autogenerated togglesBartosz Dziewoński2018-04-181-1/+1
| | | | | | | | | | These should not be added if a pre-generated toggle was provided in page HTML. Follow-up to 46a7aa7e3e8ea98b69ae4bd0aff51465da57bcd3. Bug: T192140 Change-Id: I4b7a7091c1db3559a474de94f8286c0df0af8a67
* jquery.makeCollapsible: Use pseudo elements for square brackets around togglejdlrobson2018-04-121-3/+0
| | | | | | | | | | We want to use this in Minerva and mixing presentation with functionality makes styling it differently difficult. This change will also make it easier to deal with the reflow on initialisation (see follow up If9c8f0974e3a4b08e4a66d37f7f5adf67d7305). Change-Id: I4d96226c63563f16ad181e06f6bd12e6cf6bec67
* build: Upgrade grunt-eslint from 19.0.0 to 20.0.0Ed Sanders2017-07-181-8/+9
| | | | | | Most indent and escaping fixes. Change-Id: I210e2fc3c0ce3148327ef81f824e1ce9f1e269b6
* Making the default toggle look clickable againMoritz Oberhauser2017-05-271-1/+1
| | | | | | | The toggle should now look same same prior to the premade toggle changes. The brackets are not part of the link, but the text inbetween. The link has no href property, so the toggle action is still triggered. Bug: T166359 Change-Id: I38698cd66d380626728eae9b8a9da1e465b207a6
* jquery.makeCollapsible: Restore considering empty <a> as part of toggleTimo Tijhof2017-05-251-1/+2
| | | | | | | | | | | | | | | | | | Before 2d95d36a8e, clicks on links inside toggles with non-empty targets that are not '#', were ignored ("pass through") since they are not intended for the toggle. In 2d95d36a8e, this was simplified to ignoring clicks from all <a> elements inside toggles. However this ignored too much as links without 'href' attribute are also sometimes used inside toggles to look like links and have no href-target, which means clicking them does nothing and is in fact meant to toggle the element. Restore previous behaviour and restore previous test + add a new test for this specific case. Bug: T166298 Change-Id: Ia3a0648f809f94be0977a83b469fbd184aa72aff
* Allow more customization on the default toggle systemMoritz Oberhauser2017-05-201-37/+16
| | | | | | | | | | | | | | | | The naming convention remains unchainched. Default toggles are added if no mw-collapsible-toggle child element is present. Premade toggles have already one ore more mw-collapsible-toggle elements defined. Default and premade toggles (mw-collapsible-toggle) still cannot be mixed/combined with remote toggles (mw-customtoggle). * The default toggle got less rigid by removing dependency on <a> elements. * Support for multiple premade toggles was introduced. * The expand/collapse messages can be used by premade toggles via mw-collapsible-text. * Removed the linksPassthru option. This step allowed merging premadeToggleHandler into actionHandler. * The pass through functionality is now applied to all <a> elements since the default toggle does no longer depends on those. * Removed mw-collapsible-bracket because it was not used and is deprecated by mw-collapsible-text. * The test suite was adapted to reflect the latest changes. Change-Id: Ic8627c4c185e8e4175e6fef1c8e1c2190e54edaa
* Replace deprecated jQuery.nodeNameFomafix2017-03-171-1/+1
| | | | | | | | | jQuery.nodeName gets deprecated in jQuery 3.2.0. [1] [2] [1] https://blog.jquery.com/2017/03/16/jquery-3-2-0-is-out/ [2] https://github.com/jquery/jquery/issues/3475 Change-Id: I7e6d5191e4db5117dbcfa89b07f25e672ed1e4d2
* Use <a> instead of <a href="#"> for JavaScript click eventsFomafix2016-10-111-1/+5
| | | | | | | | | | | | | | * No status line with URL and "#". * No new tab on middle click. a { cursor: pointer; } ensures to have a pointer as mouse cursor on hover. tabindex="0" ensures to have a normal tab order. role="button" according to https://www.mediawiki.org/wiki/Accessibility_guide_for_developers Change-Id: I5903901752ffb52e778f3582c7da0f820dc305c8
* Deprecated jQuery method .size() replaced with property .lengthVictor Porton2016-08-221-2/+2
| | | | | Bug: T143596 Change-Id: I1b37715097ea3f801bb4b8fdfda2a1232fdb118c
* jquery.makeCollapsible: Support for .mw-collapsible-toggle inside <li>Victor Porton2016-08-221-1/+2
| | | | | Bug: T143484 Change-Id: Ib3480f543399c206e6ee7fc47ad7b22b9c2446b5
* jquery.makeCollapsible: Special case of content inside <li>Victor Porton2016-06-301-0/+7
| | | | | Bug: T137676 Change-Id: Ie4228e63a63157e3909e938a4086f46dcbbf6767
* jquery.makeCollapsible: Simplify codeCblair912016-05-021-7/+2
| | | | | Instead of using if checks, use a piping system (like in the first function). Change-Id: Ib96f9db9c56965c336ac85d9bdcf21bdbb4e9cce
* jquery.makeCollapsible: Don't ignore clicks on fake links without hrefBartosz Dziewoński2016-03-311-0/+1
| | | | Change-Id: I409d6316d71338379feae851cb75466915309d08