Commit graph

21 commits

Author SHA1 Message Date
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 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 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
chixvv1 d70049f67b
fix: one pixel offset on tab panels (#47) 2022-08-13 18:38:49 -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
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
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 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 893611e41d
feat: replace loading message with animation 2022-04-18 22:46:40 -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 775d38e36a
feat: only smooth scroll in viewport larger than tablet 2021-06-21 18:48:56 -04:00
alistair3149 2ee7bea7e9
fix: recalculate height based on tab content 2021-06-21 15:42:29 -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