Commit graph

133 commits

Author SHA1 Message Date
alistair3149 54166529cb
fix: only resize section when it is the active panel 2023-07-28 02:43:26 -04:00
github-actions a7660375fc ci: 👷 lint code to MediaWiki standards
Check commit and GitHub actions for more details
2023-07-12 02:07:37 +00:00
H. C. Kruse 7f75899995
feat: add support for nested tabbers in Codex (#95)
* refactor: Apply some code cleanup

* feat: WIP dynamic nested tabber in codex

* feat: Make deeply nested tabbers work

* doc: fix comment position

---------

Co-authored-by: alistair3149 <alistair3149@users.noreply.github.com>
2023-07-11 22:06:57 -04:00
alistair3149 857f6f1f9f
feat: allow nested Tabber to be shown in VE preview 2023-07-05 22:57:05 -04:00
alistair3149 a29e3a22c0
feat: reinitialize Tabber after VE edit part 2 2023-07-05 22:10:58 -04:00
github-actions dcfc693834 ci: 👷 lint code to MediaWiki standards
Check commit and GitHub actions for more details
2023-07-06 02:10:01 +00:00
alistair3149 cbf6ca0c1f
feat: reinitalize Tabber after VE edit 2023-07-05 22:09:39 -04:00
alistair3149 a4e59057bf
feat: add Vue component for tab content 2023-07-05 20:00:59 -04:00
alistair3149 5f856a1a73
fix: override default MW list styles 2023-07-05 18:33:04 -04:00
alistair3149 cd63b6c10f
refactor: remove noscript message
Tabber already shows content without JS, and noscript handling is a bit tricky in MW
2023-07-05 18:32:18 -04:00
alistair3149 0fbfefcb87
fix: avoid using noscript as it is disallowed by VE 2023-07-05 18:03:00 -04:00
alistair3149 f8e3b758b2
fix: fix var scope in VE scripts 2023-07-05 17:51:24 -04:00
alistair3149 49d4e8ec29
refactor: various eslint cleanups 2023-07-05 17:43:41 -04:00
github-actions 597f976e7e ci: 👷 lint code to MediaWiki standards
Check commit and GitHub actions for more details
2023-07-05 21:28:55 +00:00
alistair3149 89e90af034
feat: add experimental support of Codex
It can be enabled by setting `$wgTabberNeueEnableLegacyMode` to `true`.
It is the first implementation and a WIP with numerous caveats:
- Nested Tabber does not work
- Tabber Transclue does not work
2023-07-05 17:26:33 -04:00
alistair3149 365777eae3
feat: improve noscript support
1. Allow other tabs to be shown
2. Put noscript message in warning box
2023-02-16 14:02:04 -05:00
alistair3149 7b61ca663e
feat(core): use data-title instead of title attribute for tab panel
Title attribute produces a tooltip over the whole tab panel.
That is not ideal and the a11y need is already fulfilled by aria-label.
2022-11-02 19:55:46 -04:00
alistair3149 e124e8170a
feat: do not animate indicator when scrolling 2022-10-23 18:06:52 -04:00
alistair3149 ce35fb8908
refactor: reduce variable scope 2022-10-23 17:33:39 -04:00
alistair3149 656f3967f9
refactor: use aria attribute instead of class to select panels 2022-10-23 17:11:18 -04:00
alistair3149 9349bc334e
refactor: use aria attribute instead of class to select tabs 2022-10-23 17:07:19 -04:00
alistair3149 1cb5cfb6c7
fix: indicator should not expand header height 2022-10-22 16:38:46 -04:00
alistair3149 852256a75d
fix: typo in variable 2022-10-21 23:10:38 -04:00
alistair3149 57257cd1ba
refactor: simpler indicator update
False alert, no need to use IntersectionObserver so yeahhh
2022-10-21 23:07:56 -04:00
alistair3149 62cb545642
fix: indicator should be visible for nested tabs
This commit also drops support for IE. The script will be rewritten in ES6 and bumping MW requirement
2022-10-21 22:43:14 -04:00
alistair3149 f1e0df2112
feat: separate indicator from active tab
This will allow us to animate the indicator separately.
Which will be needed to make the indicator scroll with the panel.
2022-10-21 18:01:48 -04:00
alistair3149 cb1dbb239f
chore: ci cleanup 2022-10-21 15:54:44 -04:00
alistair3149 1ff78cd0b2
feat: add scroll snap to section
This is required for anchor links to scroll to the correct tab.
However this might re-trigger the bug mentioned in #47 and #38,
need some alternative to fix those.
2022-10-21 15:54:24 -04:00
alex4401 787fede532
fix: jumping to a tabber when no hash specified (#63)
Sorry for this oversight on my end.
2022-09-29 02:13:56 -04:00
alex4401 5b4f9adc15
feat: scroll target hash tabber into view (#62)
This might not happen automatically to a simple race condition: browser may try to look up the anchor before the extension initialises.
2022-09-28 09:53:14 -04:00
chixvv1 d70049f67b
fix: one pixel offset on tab panels (#47) 2022-08-13 18:38:49 -04:00
alistair3149 6a40de7b37
feat: do not set title attribute for tab panel
This should prevent tooltip from showing up when hovering over the tab panel container. Title doesn't really do much accessibility wise since ARIA attributes are already set
2022-07-06 03:07:17 -04:00
alistair3149 380d52e24c
fix: more accurate selector for duplicated MF images 2022-06-29 17:14:55 -04:00
alistair3149 047ba17d1b
fix: hide duplicate images generated by MobileFrontend
When a thumb is placed inside tabber under an article section, MobileFrontend duplicates
the image for some reason. So the hacky way to fix this is to hide the duplicated image.
Since it is an upstream issue, there are not much I can do.

Closes: #2
2022-06-29 17:01:57 -04:00
alistair3149 7762a0e9f4
fix: panel should adjust to content height 2022-06-18 20:02:26 -04:00
alistair3149 8ab7b8330d
fix: tab panel going out of bound 2022-06-16 00:36:05 -04:00
ArdWar 52baab566b
feat: allow for identical tab header (#28) 2022-06-05 15:16:48 -04:00
alistair3149 122df779e7
feat: add config to toggle Tabber animation and default to false
Add a config to enable/disable Tabber scrolling animation.

It is currently default to false as smooth scrolling is broken on Safari,
as tabs would not scroll at all with it on. It is an upstream browser bug
that is being tracked here: https://bugs.webkit.org/show_bug.cgi?id=238497
2022-06-03 16:46:42 -04:00
auburnsummer e54a313de4
fix: run script after document is ready (#25)
* Wait until document ready before main

* More robust ready state handling

Co-authored-by: alistair3149 <alistair3149@users.noreply.github.com>
2022-05-31 03:21:17 -04:00
alistair3149 1f4436843f
feat: improve loading behavior before module is added
* Add skeleton screen to avoid layout shift
* Hide other sections before the module is loaded to avoid layout shift
* Add noscript message
* Header container is now saved in parser instead of being generated.
If you have any issues with the script, try clearing out the parser cache
or do an empty edit.
2022-05-06 17:53:52 -04:00
alistair3149 b9eda4c4e7
fix: incorrect aria attribute label 2022-04-30 17:14:44 -04:00
alistair3149 5df6a0f772
feat: add link to documentation in VE context item
Also make the text label for tabbertransclude different so that it does not get mixed up with regular tabber
2022-04-22 22:22:44 -04:00
alistair3149 5a5e9eecaf
refactor: clean up Javascript according to ESLint 2022-04-22 20:00:32 -04:00
alistair3149 d0be57a629
feat: add basic VE support for tabbertransclude tag
* Add basic inspector tool for tabbertransclude
* Add custom icon for Tabber
* Fix an issue where Tabber VE dialog is triggered when selecting mapframe
2022-04-22 19:34:06 -04:00
alistair3149 5410a1496f
feat: add Tabber icon in VisualEditor 2022-04-22 16:31:21 -04:00
alistair3149 84273da412
feat: generate tab header in visual edit mode 2022-04-22 00:38:16 -04:00
alistair3149 3454f7b2ce
feat: do not run Tabber script if it is already activated 2022-04-21 16:35:23 -04:00
alistair3149 6165b06f28
feat: add basic VisualEditor support for tabber tags
Adding some basic support for visual editing in VisualEditor. Currently it is nothing fancy, just the ability to recognize <tabber/> tags and a simple dialog with code editor to edit the Tabber code. It would be iterated upon in the future.
2022-04-21 15:14:52 -04:00
alistair3149 466573741e refactor: clean up unused CSS
It also fixes the somewhat weird bug (#13) where you can not scroll when the cursor is inside the tab panel for some browsers.
2022-04-19 18:33:11 -04:00
alistair3149 750dd273be
feat: add background fade to indicate scrollable tab header 2022-04-19 16:34:04 -04:00
alistair3149 c045490a01
feat: tweak styles of tab header
* Tab header bottom line is now full width instead of the width of the tabs. It aligns with the previous and current Tabber behavior on Fandom wikis
* Increase padding for tab buttons for bigger click area
2022-04-19 10:53:08 -04:00
alistair3149 69c638330d
feat: use CSS instead of __NOEDITSECTION__ to hide edit buttons
* Appending __NOEDITSECTION__ to tab body seems to break the table markup (#12)
* Edit buttons still work for transcluded tabs so it should be visible

Closes #12
2022-04-19 10:36:38 -04:00
alistair3149 38a47307d7
feat: add HTTP status code to error message
Also use default MediaWiki message 'error' instead of self-defined one.
2022-04-19 10:24:49 -04:00
alistair3149 7504ce5cd2
feat: add proper ARIA attributes to lazyloaded transclusions 2022-04-18 23:09:13 -04:00
alistair3149 893611e41d
feat: replace loading message with animation 2022-04-18 22:46:40 -04:00
ciencia d8c3db4e59 feat: allow tab content to be transclusions of other pages
* Initial merge of the TabberTransclude extension from Ciencia
* Tab content can now be fetched from other pages on the wiki. The content is lazy-loaded when the tab is selected through a XHR request.
* Add a config option to disable setting URL hash on tab change
2022-04-18 21:56:03 -04:00
ciencia 1959fb2928
feat: use replaceState instead of pushState on tab click
This replaces the current history context instead of adding a new entry. The
previous behavior was undesired when you switch tabs and you want to go back
to the previous page.
2022-04-18 20:01:02 -04:00
ciencia 2d4d4121fd
feat: use the ResizeObserver api to detect content size changes
This catches every possible size change of the active tab panel contents:
* Window resize, will update also the offsetLeft property
* Inner size changes like a collapsible element being opened or closed
* And even tabber inside tabber, when the inner tabber is changed and they
  have different sizes

ResizeObserver may not be supported by some old browsers, but that shouldn't
be too bad for them. If something looks displaced they can simply switch
tabs to force a resize.
2022-04-18 19:59:38 -04:00
ciencia f1aee0bdf6
refactor: CSS.escape may not be supported by some browsers 2022-04-18 19:50:20 -04:00
ciencia f9b3892604
refactor: NodeList.prototype.forEach may not be supported by some browsers 2022-04-18 19:34:43 -04:00
alistair3149 c46b918b04
refactor: lower JS requirements to ES5
* Improve compatibility with older browsers
* Preparation to merge changes from TabberTransclude
2022-04-18 19:10:58 -04:00
nobbyfix 9395d641a9
fix: DOMException caused by invalid selector (#10)
* fix for DOMException caused by invalid selector

* use CSS.escape function
2022-02-01 23:04:05 -05:00
nobbyfix 5c40e1fb05
feat: update header buttons when scrolling without them (#7) 2022-01-31 01:35:36 -05:00
alistair3149 09715dcef6
feat: use Tabber count instead of MD5 as identifier 2021-10-23 00:47:49 -04:00
alistair3149 5e4471d23f
fix: incorrect character trimming for tab IDs 2021-10-23 00:29:38 -04:00
alistair3149 dae448ab5a
refactor: change md5 config name to be more clear 2021-10-01 12:23:57 -04:00
alistair3149 d44cbbf6b9
feat: add config to disable MD5 hash (#6) 2021-10-01 12:20:00 -04:00
alistair3149 331b0bea2b
feat: use clone element to get tab height when needed
Sometimes the tab element is hidden by its parent and a cloned element will be able to get its actual height.
This should also fix #4.
2021-10-01 11:11:27 -04:00
alistair3149 0dc1b34965
fix: stricter selectors for activePanel selection 2021-06-23 10:45:14 -04:00
alistair3149 342cc2aa85
fix: stricter selector to prevent issues with nested Tabber 2021-06-23 10:29:42 -04:00
alistair3149 530cdfa1b8
feat: add hover and active states to the arrow buttons 2021-06-21 20:37:28 -04:00
alistair3149 2580c82d06
refactor: rename Tabber classes to be more semantic 2021-06-21 19:46:17 -04:00
alistair3149 c8aa336530
refactor: remove unnessecary quotation marks 2021-06-21 19:38:59 -04:00
alistair3149 46596e450f
feat: add aria-selected support 2021-06-21 19:32:15 -04:00
alistair3149 45fb952d2d
refactor: use documentFragment for buildTabs 2021-06-21 19:28:47 -04:00
alistair3149 775d38e36a
feat: only smooth scroll in viewport larger than tablet 2021-06-21 18:48:56 -04:00
alistair3149 4d79292616
refactor: drop all jQuery 2021-06-21 17:14:33 -04:00
alistair3149 31eb88ca52
refactor: convert HTML generation into ES6 2021-06-21 16:56:00 -04:00
alistair3149 2ee7bea7e9
fix: recalculate height based on tab content 2021-06-21 15:42:29 -04:00
alistair3149 8d980ce8ff
refactor: replace some jQuery with ES6 2021-06-21 15:22:35 -04:00
alistair3149 1ee66a0a94
refactor: lint scripts with ESLint 2021-06-21 14:54:31 -04:00
alistair3149 e9fcf81043
refactor: lint styles with stylelint 2021-06-21 14:45:06 -04:00
alistair3149 eb9564509b
feat: initial refactor into TabberNeue 2021-06-21 13:49:47 -04:00