Commit graph

162 commits

Author SHA1 Message Date
Volker E 6fa5e1758c build: Update SVGO to v3.0.2 & re-crush icons
svgo         ^2.8.0  →   ^3.0.2

Amending to new `cleanupIds` plugin name.
Re-crushing SVGs while at it.

Bug: T333158
Change-Id: I29e74ec1240142af3440004b68ac985558836410
2023-03-27 06:10:37 -07:00
Moh'd Khier Abualruz 25f5f4975a Add indicator that appears when TOC & page tools menu have been hidden
Show a popup to the user to point them to the new location of the element

Bug: T311160
Change-Id: I967d027b23931d99767b31bd7a6af5f6410c8f5d
2023-03-23 21:46:51 +00:00
Moh'd Khier Abualruz bd7be711df Linting: run npm -s run lint:js -- --fix
reduce the number of warnings on precommit hook

Change-Id: Iad9fa273f9a661614fa3e40e1af6e9aa7697ea42
2023-03-22 20:22:33 +00:00
bwang f36c58db2f Update how pinnable elements are handled with no-js and gradeC cases
Bug: T331563
Bug: T331168
Change-Id: Ibd5aaa605c45216783a2707b3813e1e7e2c46b9b
2023-03-14 17:35:59 -05:00
bwang 62da66047f Ensure the TOC works across all pinned/unpinned cases when JS is disabled
- Also consolidates how we hide the pin/unpin buttons into a single CSS block

Bug: T331176
Change-Id: I359bde8abee48596186486d48fa6e59297094153
2023-03-13 23:48:18 +00:00
bwang 0006324f55 [cleanup] Factor out bindPinnableBreakpoint for readability, ensure auto unpinning logic doesnt apply to TOC
Change-Id: I3ba6b42ac3a2c79c2ff8018cf929d3153809ffed
2023-03-13 15:58:07 -05:00
ksarabia aba94865c2 Removes old style rule
This patch removes the old style rules for .vector-toc-pinned after one
week of cache.
Also removes 'data-name' which was no longer used

Bug: T325032
Change-Id: I7c8d8e51a61646151706b71a1733b1daac5dbd45
2023-03-10 14:31:44 -06:00
Nicholas Ray 17433b63fc Add hash fragment support to table of contents
Per T325086, the TOC should expand and activate the section that corresponds to
the window's hash fragment.

Additional changes:

* Moves logic  that runs on page load to determine the
intersection from section observer to main.js, since the hash fragment can
take precedence over the scroll position (e.g. when scrolled all the way to the
bottom).

* Make section observer's pause() cancel any pending intersection calculations
so that it doesn't interfere with other async logic.

* Moves onHeadingClick and onToggleClick logic to activate and expand a section
to tableOfContents.js to facilitate unit testing this behavior with clicks and
hash fragment changes.

Bug: T325086
Change-Id: I8a2cf0e6a96467fae97608450b321c181155e424
2023-03-09 00:33:37 -07:00
jenkins-bot c0aa8c2a87 Merge "Update scroll threshold to be the same as scroll padding top" 2023-03-07 18:44:27 +00:00
bwang c9389b7dab Update scroll threshold to be the same as scroll padding top
Bug: T317661
Bug: T314419
Change-Id: Ia2d14dca1e3e2069828b201d6d3a053e4df712fc
2023-03-07 18:28:23 +00:00
Ed Sanders 2f9cf813fe Fix selector for add topic button
Bug: T267444
Change-Id: Icd75f16c794f6f990a194fd57f99490934ded9de
2023-03-06 22:50:11 +00:00
bwang a274c9bcde Add threshold to TOC section observer
- Also renames 'header' to 'stickyHeaderElement' to be more clear

Bug: T317661
Change-Id: Iad519036d4622ff28115abb7de544f69fe8eb597
2023-03-01 16:26:42 -06:00
jenkins-bot 5f6932c605 Merge "Increase scroll-padding-top for page sections" 2023-03-01 19:46:33 +00:00
ksarabia 74addde337 [WIP] Removes the TOC class in body and adds in html
Adds new constants for TOC and registers feature.

Bug: T325032
Change-Id: I5e0f5f3a6d186b245bdbc98c2bb9e4cc17a03fdb
2023-02-28 17:21:16 -06:00
Jan Drewniak cfc454f615 Increase scroll-padding-top for page sections
This introduces a general scroll-padding-top value of 50px
for Vector 2022's HTML element.

This changes makes it so that when navigating sections via the
TOC, the section headings are 50px lower on the screen.

This change has been synced with the ToC active sections as well,
so that active sections become active at the same offset.

Bug: T314419
Change-Id: I99e5fe2047f5ad1e61ef51b6ba7e76a6cac36fc5
2023-02-28 14:48:31 -05:00
Jon Robson c06c547b02 Table of contents: FIXME cleanup
Follow up to Ib42d532d4e900c01061e1c5e39c03b17f0619c46

Hoist hook binding into main.js and update tests

main.js now only tests hook wire up.
tableOfContents calls reloadTableOfContents directly.

Bug: T316025
Change-Id: Ia06feab7cfb47a64ac3519bd7bd0428dc661045a
2023-02-24 01:16:20 +00:00
Jon Robson 450a395f95 SectionObserver should be updated at certain points in MediaWiki lifecycle
* When wikipage.tableOfContents is executed, the table of contents has been
replaced so we should update the sections associated with the section
observer as the old sections no longer exist in theDOM.
* If VisualEditor repaints the page, we should update the elements associated
with the table of contents as the body-content element no longer exists in the page.
* When VisuaLEditor is active we should disable the intersection observer as
there is no table of contents to update.

Minor changes:
* Light refactor of large function in main.js
* reloadTableOfContents returns a promise and now fires a new hook
wikipage.tableOfContents.vector to signal when it is finished which
has also been requested by community members. This allows the code in main.js
to update elements at relevant point in time
* Add FIXME note (doing this would have been considerable work)
* I've added a call to mw.log.warn which would have saved me considerable
debugging time for this issue to diagnose the issue.

Bug: T316037
Bug: T316025
Change-Id: Ib42d532d4e900c01061e1c5e39c03b17f0619c46
2023-02-23 01:39:46 +00:00
bwang c72cacec71 Cleanup: Remove unused TOC scroll hooks code
Previously for the table of contents A/B test we triggered
scroll events when the table of contents was scrolled into
view. Now this is never referenced, so the code is cleaned
up to only apply to when the title is scrolled into view.

Change-Id: Ie9a5c4b6d88068d914cbbcc3d046ac288d49172b
2023-02-22 16:00:33 +00:00
bwang ea1a0b0778 Shows TOC below page title for anon users
- Removes 'mw-ui-quiet' class from the TOC button when below the page title, meaning the TOC is just using default button styles. However, these styles are still not to spec due to button/icon tech debt (https://jmp.sh/jbuivqlM). The styles are fixed in the following patch
- DRY up TOC CSS
- Fix no-js collapsed TOC styles

Results in 4 expected visual changes. Note, the button styles are still incorrect and will be fixed in the next patch
https://jmp.sh/nHujNdVK

Bug: T315932
Bug: T320453
Depends-on: I490eb6244a35f18149844a87297c5f1ccc5b7df9
Change-Id: Id11805029b78847734d15041d31c2538412cf20a
2023-02-21 10:41:44 -06:00
Jon Robson 5c39353d6d [Refactor] Split out table of contents code
Large diff mostly to
hoist setupTableOfContents above main where it is used
(originally part of Id11805029b78847734d15041d31c2538412cf20a)

Change-Id: Icc41a86546ebc90ae35989ccd4dbb38b214efbb8
2023-02-18 00:36:23 +00:00
bwang fca03c873b Update user links dropdown id
- Update naming convention to use dropdown instead of menu

Follow-up: Iac0586893fec26a8a6c2c904ce08fbf1e19b339c
Change-Id: Ie51f7fc280eeef8470613c07850dad83e4435ee8
2023-02-16 11:21:56 -06:00
bwang f415a556dd Additional FIXME cleanup relating to moving feature classes from body
Additional follow up to Id5afe2c60dc0067e7c74433eda5cd7858f54b0d7
(55bb37f2a)

Change-Id: Id98161572a09b1d3fc340d75bd8e28b277d68e30
2023-02-08 10:49:13 -06:00
Jon Robson d16d7e80d9 Sticky header logout goes via API avoiding a second click
Bug: T324638
Change-Id: I59a192863706f1d2a09ec59090c0b099ced8cde0
2023-02-06 21:40:30 +00:00
bwang f3ddc51534 Add setFocusToToggleButton function to pinnableElement.js
Bug: T325020
Change-Id: I3829b146551ea55b84ae717a5db27003b0f2b97b
2023-02-01 14:31:53 -06:00
jenkins-bot 24b5f902fb Merge "Revert "Add setFocusToToggleButton function to pinnableElement.js"" 2023-01-31 23:01:47 +00:00
Nray 6af76a6d7a Revert "Add setFocusToToggleButton function to pinnableElement.js"
This reverts commit 45247802db.

Reason for revert: This is causing the TOC button to become focused on page load

Change-Id: Ib3d5ca79372dd40587879cbb39846e4c9ed9eb21
2023-01-31 22:35:21 +00:00
jenkins-bot a0afec8fb4 Merge "Fire a simluated window resize event when toggling limited width" 2023-01-31 17:41:45 +00:00
jenkins-bot 4c65b5ec59 Merge "Add setFocusToToggleButton function to pinnableElement.js" 2023-01-31 16:59:59 +00:00
Ed Sanders 50c8d1631e Fire a simluated window resize event when toggling limited width
Bug: T328121
Change-Id: I07695bb359ce849a80e8839744511a6f74a4320f
2023-01-31 10:08:10 -06:00
bwang 45247802db Add setFocusToToggleButton function to pinnableElement.js
Bug: T325020
Change-Id: I0b2f528dd71c9842ac5d04f9affdf938bcddcbb8
2023-01-31 14:48:37 +00:00
bwang 15cd69b169 Add check for activeTopSection in activateSection
Bug: T328089
Change-Id: Ibe3b407e15b9b9c0ccc475f5632b4b7db7261d24
2023-01-30 22:03:23 +00:00
jenkins-bot 7812db242e Merge "Make sticky header edit the default" 2023-01-30 19:02:31 +00:00
Bartosz Dziewoński 7077fedcbd Enable sticky header on all talk pages
Bug: T328133
Change-Id: Ib72d7aa9334bdb67a11dc0220eb731d94f050243
2023-01-27 15:30:55 +00:00
Jon Robson 8173c91a4e Limited width made persistent for anonymous users
Depends-On: Ic3b6eec19953932c697ab5bf48c33a4ac1841b07
Bug: T321498
Change-Id: I141a744abe7528203e6e05bf89ea225125319eb4
2023-01-25 17:51:02 +00:00
Jon Robson 55bb37f2ab Moves feature classes from BODY element to HTML element
Move feature classes to HTML element - this is significant
for anonymous as placing the classes on the body tag breaks
the browser's ability to parse the article concurrently
with the stylesheet download, because inline scripts
are spec'ed to be able to see document.styleSheets.

Changes:
* Feature classes are moved from BODY tag to HTML tag
* For now disable localStorage storage until we've worked out
the storage mechanism in core.

Bug: T321498
Change-Id: Id5afe2c60dc0067e7c74433eda5cd7858f54b0d7
2023-01-24 18:22:13 -06:00
Jon Robson 93c833030b Make sticky header edit the default
In production this is always true, so remove feature flag.
Retain A/B testing code in case it is still needed.

Bug: T324799
Change-Id: Ia2057eb69d0a8d3e6e51acb5729a4399fb17a18b
2023-01-24 19:48:48 +00:00
jenkins-bot 1ebe553429 Merge "Change limited-width toggle to appear at 1400px" 2023-01-23 18:29:01 +00:00
Jan Drewniak 40d1a89b42 Change limited-width toggle to appear at 1400px
Bug: T326887
Change-Id: I256866f615c8c0f10b29e6135faca6add16ff195
2023-01-23 17:59:13 +00:00
Derk-Jan Hartman ff830f201e DI: Make pinnable elements work on Safari 13 and earlier
The pinnable element would cause exceptions on older versions of
Safari during the setup and the ToC menu would show instead of being
pinned and hidden.

Bug: T327602
Change-Id: I99b656d0070d3e9af5641274134736b742c28f58
2023-01-23 09:17:16 +00:00
bwang 128a01bd35 [Clean up] Remove CSS and HTML from cached TOC html
Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da
Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-16 17:21:12 -06:00
Moh'd Khier Abualruz 96ff431213 Table of contents Collapse/Expand not working
Bug: T327064
Change-Id: Ica3b43d51169d33b01d7203c3672c301e775ec04
2023-01-16 18:06:30 +01:00
Moh'd Khier Abualruz 29a2254b9a Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element
Extra:
- Reactivated active list element, This still does not work if the current active gets edited.
- Removed pinning event reattach as we do not replace teh full element anymore.

Known Issues:
 - Collapse/Expand not working

Bug: T326839
Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 12:39:05 +01:00
Jan Drewniak 4d1c0b8940 Override PinnableElement behaviour at low resolutions.
At resolutions below 1000px, we want pinned elements
such as the Page Tools menu and Main Menu to collapse.
This behaviour is temporary and when the browser is resized,
the pinned elements should revert to their previous pinned state.

We also want to remove the ability to pin these menus at
low resolutions, so the "hide/move" button is hidden.

A new matchMedia event handler is added to PinnableElement.js
to handle this behaviour.

CSS is also added to hide the pinned menus at low resolution.
This is to account for the situation where the page is loaded
at narrow widths, with pinned elements,
and the JS hasn't loaded yet.

features.js is refactors so that class toggling can happen
independently of saving the state to user preferences
(since we want to toggle the classes but not save the state
at lower resolutions).

Bug: T326364
Change-Id: I3113ab83deb15843e04ed63ec767a85c522517b5
2023-01-13 18:09:11 +00:00
Jan Drewniak 98c92edbba Factor out functions in PinnableElement.js
Splits the click handler for pinnable elements into
separate functions to reduce indentation and
maybe improve testability.

The click handler for pinnable elements is now
placed in a function called `togglePinnableElement()`
and attached to the click event via `.bind()`.

Class toggling is split into a separate
function called `togglePinnableClasses()` as well.

This should have no functional impact.

Change-Id: Ib27a469f6eb7e28360203d09db3315c6bde5c890
2023-01-11 23:58:30 +00:00
bwang 5195949674 Fix mustache template rendering when TOC is rerendered after an edit
Bug: T326682
Change-Id: I7e8f5572a33c4440aed5e6e525a48d8abe4a2afb
2023-01-10 19:12:55 -07:00
jenkins-bot bffa375753 Merge "Add label and title attribute/tooltip to full-screen toggle button" 2023-01-05 02:11:16 +00:00
Jon Robson cf56a37b00 Add label and title attribute/tooltip to full-screen toggle button
Bug: T323625
Change-Id: If12837cd0e3c443a023671b2a9ab85098ffd6119
2023-01-05 00:56:39 +00:00
bwang 8e4da83908 Replace .sidebar-toc class with .vector-toc and use PinnableElement in TOC
Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway
Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector.
"sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term

Bug: T324877
Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
2023-01-04 17:48:03 -06:00
jenkins-bot 41116ede40 Merge "Mark active sections even when their headings are in wrapper elements" 2022-12-16 00:36:12 +00:00
bwang 97de09dcba Refactor page tools, main menu, and TOC components
- getTocData is moved into VectorComponentTableOfContents and it's test file
The following changes were made to the main menu, toc and page tools PHP components
- Avoid passing in $skin to the constructor
- Handle isPinned logic inside the component
- Add a public ID constant to the components
- Dropdown data for each feature use the same naming convention

Bug: T317900
Change-Id: I77a617a6c1d93bccd3b6e59353299f5534624e53
2022-12-15 14:23:25 -08:00