Integrate StickyTOC to chameleon as modification component #386

xSavitar · 2023-06-17T13:39:15Z

@note: This fixes deprecated call to Hook::run() as well.

xSavitar · 2023-06-17T13:39:43Z

NOTE: This is my first time doing chameleon components, so I'm learning as I go and would need someone to help me test and go review. Thanks!

bawolff · 2023-07-03T12:01:01Z

I tested and read through the code. Mostly looks good but I have some notes:

[minor] I think maybe $wgStickyTOCFloat = "aside"; should be the default as the current default for that variable is a bit odd [I suppose if I am on the subject, it is a bit odd this is a config variable instead of something specified in a layout file, but perhaps that's out of scope of this change]
stickytoc should be added to the layout.rng schema file.
This seems to always enable sticky TOC if you are using the stickyhead layout (Or more specifically the sticky modification is set, so i guess clean and fixedhead as well). That makes sense when this was a separate extension - presumably you wouldn't enable the extension if you didn't want the toc to be sticky. However presumably many people using the chameleon skin might right now with the stickyhead layout might not want a sticky toc. So i think this shouldn't be included as part of the sticky modification only the stickytoc modification. Perhaps a new layout file could be added just for sticky toc.

@note

@note: This fixes deprecated call to Hook::run() as well.

xSavitar · 2023-07-08T17:03:01Z

Thanks for reviewing @bawolff.

I tested and read through the code. Mostly looks good but I have some notes:

[minor] I think maybe $wgStickyTOCFloat = "aside"; should be the default as the current default for that variable is a bit odd [I suppose if I am on the subject, it is a bit odd this is a config variable instead of something specified in a layout file, but perhaps that's out of scope of this change]

For this one, I'm still trying to understand what "aside" means. Does it mean "left" or "right" aside? Maybe but I have no issue with setting it as the default instead of "left". Just the ambiguity in the word "aside" for me.

stickytoc should be added to the layout.rng schema file.

Done!

This seems to always enable sticky TOC if you are using the stickyhead layout (Or more specifically the sticky modification is set, so i guess clean and fixedhead as well). That makes sense when this was a separate extension - presumably you wouldn't enable the extension if you didn't want the toc to be sticky. However presumably many people using the chameleon skin might right now with the stickyhead layout might not want a sticky toc. So i think this shouldn't be included as part of the sticky modification only the stickytoc modification. Perhaps a new layout file could be added just for sticky toc.

Done! I've introduced a new stickytoc.xml file. And applied the chameleon modification for sticky-toc on the content. Let me know if that makes sense to you.

bawolff · 2023-07-10T02:13:48Z

     For this one, I'm still trying to understand what "aside" means. Does it mean "left" or "right" aside? Maybe but I have no issue with setting it as the default instead of "left". Just the ambiguity in the word "aside" for me.

aside means the TOC is separate from the text on the left side, where 'left' basically means it overlaps text after scrolling. I guess it is just personal preference and doesn't matter too much.

bawolff · 2023-07-17T03:55:34Z

Done! I've introduced a new stickytoc.xml file. And applied the chameleon modification for sticky-toc on the content. Let me know if that makes sense to you.

Yep that looks good. I think we should also not apply the stickytoc setting to things setting sticky but not stickytoc for backwards compatibility.

bawolff · 2023-07-17T05:44:06Z

It looks like there is also a typo on the script path for sticky.js

…tioned.

bawolff · 2023-07-17T05:53:30Z

I made a pull request for the two small remaining issues. https://github.com/xSavitar/chameleon/pull/1

xSavitar · 2023-07-17T09:40:42Z

I made a pull request for the two small remaining issues. xSavitar#1

Thank you @bawolff

Fix typo in script path and don't apply sticky toc to just sticky

malberts · 2023-08-11T10:49:49Z

layouts/stickytoc.xml

+
+		<row>
+			<cell>
+				<modification type="Stickytoc"/>


Is the TOC in this layout (without additional settings or styling) supposed to overlap the content?

Top of the page:

When I scroll down the TOC overlaps the content:

malberts · 2023-08-11T10:50:59Z

resources/styles/Components/Modifications/Stickytoc.scss.pcss

Do we need this file?

malberts · 2023-08-11T10:56:38Z

resources/styles/Components/Modifications/Stickytoc.less

+
+.stickytoc ul li {
+	font-size: 16px;
+	color: #355B84;


Why the color override here?

Default TOC:

Sticky TOC:

malberts · 2023-08-11T10:57:40Z

resources/styles/Components/Modifications/Stickytoc.less

My minor concern with using Less is that the rest of the skin uses SCSS. Adding colors into this file means it cannot automatically use SCSS variables. It also seems like Less is used only for nesting purposes here, but it's inconsistent since many of the selectors have multiple classes but don't use nesting.

Not using SCSS is not necessary an issue if this file contains only the minimum structural styling necessary. But I would prefer to not introduce Less in a SCSS project when we're not really using any Less features.

malberts · 2023-08-11T10:58:54Z

resources/styles/Components/Modifications/Stickytoc.less

+.stickytoc #toc .toctitle h2 {
+	font-weight: 700;
+	font-size: 15px;
+	//color: white;


Remove unnecessary CSS.

malberts · 2023-08-11T11:01:33Z

skin.json

@@ -40,8 +40,23 @@
 		},
 		"ChameleonEnableExternalLinkIcons": {
 			"value": false
+		},
+		"ChameleonStickyTOCFloat": {


I don't think we should have component config in here. All other components do this in the layout file and I don't see a special reason for this to be an exception.

malberts · 2023-08-11T11:15:51Z

src/Components/Modifications/Stickytoc.php

+ * @since 1.0
+ * @ingroup Skins
+ */
+class Stickytoc extends Modification {


I'm not sure that this should be a Modification. If you look at the other Modifications, they are generic and intended to be used for modifying other components, e.g. making something else sticky or hidden. Specifically, by placing the modification node inside the component node to be affected in the XML.

In this case Stickytoc is not really modifying the parent node (<cell> in stickytoc.xml). While it is technically making changes to what is inside MainContent, it does not work in the same way as other Modifications.

malberts · 2023-08-11T11:24:23Z

In additional to my review above, I'm wondering if we shouldn't take a difference approach here. Instead of pulling the TOC next to the main content, can't we make it place the TOC where it is placed in the layout? So for example if I have a sidebar layout, then I might want the sticky TOC there, not just simply pulled next to the content.

For example, with this layout snippet:

<row>
	<cell class="border col-3">
		<modification type="Stickytoc"/>
	</cell>
	<cell class="col-9">
		<component type="MainContent"/>
	</cell>
</row>

I would've expected the TOC to go where I placed it in the layout (the bordered sidebar):

(This also illustrates the issue with this being a Modification that does not actually modify the parent Component.)

Or is this current implementation solving a specific use case which is not necessarily supposed to handle my use case example?

krabina · 2023-09-18T14:56:59Z

I agree that the TOC should go in the bordered sidebar.

krabina · 2023-11-02T11:10:33Z

@xSavitar do you think you will find time to update your PR?

malberts · 2023-11-02T11:31:46Z

@krabina We have since merged an alternative approach, although it is currently undocumented and needs more testing for custom layouts. On the latest master branch, you can add the Toc component where you want to move the original TOC (e.g. into a sidebar):

<component type="Toc"/>

I don't currently have a wiki to show, but here is an early video of it:

normal.mp4

krabina · 2023-11-02T16:23:51Z

Looking great! Can you share your layout.xml file?

malberts · 2023-11-03T09:53:28Z

@krabina Here's a basic example:

<?xml version="1.0" encoding="utf-8"?>
<structure xmlns="https://ProfessionalWiki.github.io/chameleon/schema/3.5/layout.rng">

	<component type="NavbarHorizontal" class="sticky-top">
		<component type="Logo" position="head"/>
		<component type="NavMenu" flatten="navigation"/>
		<component type="PageTools" class="flex-row" position="right" hideSelectedNameSpace="yes"/>
		<component type="SearchBar" class="order-first order-cmln-0" position="right" buttons="go"/>
		<component type="PersonalTools" position="right"/>
	</component>

	<grid mode="fluid">
		<row>
			<cell class="d-none d-md-block col-md-3 col-lg-2 border-right">
				<component type="Toc"/>
			</cell>
			<cell class="col-12 col-md-9 col-lg-10">
				<component type="SiteNotice"/>
				<component type="MainContent"/>
			</cell>
		</row>
	</grid>

	<grid class="mb-2 mt-4" mode="fluid">
		<row>
			<cell>
				<component type="NavbarHorizontal" collapsible="no" class="small mb-2" >
					<component type="Toolbox" flatten="no" class="dropup"/>
					<component type="LangLinks" flatten="no" class="dropup"/>
				</component>
			</cell>
		</row>

		<row>
			<cell>
				<component type="FooterInfo"/>
				<component type="FooterPlaces"/>
			</cell>
			<cell>
				<component type="FooterIcons" class="justify-content-end"/>
			</cell>
		</row>
	</grid>
</structure>

krabina · 2023-11-03T17:14:31Z

In my first test it looks great and is working. However, the "hide" "show" for the TOC is not working and in the browser console I see this:

Uncaught TypeError: $(...).scrollspy is not a function
    <anonymous> https://...i/skins/chameleon/resources/js/Components/toc.js?eb8ea:48
    jQuery 2
        mightThrow
        process

krabina · 2023-11-09T11:33:18Z

Another issue: on pages where there is no TOC at all, the space for the TOC should not be wasted.

kghbln · 2023-11-09T12:35:07Z

Another issue: on pages where there is no TOC at all, the space for the TOC should not be wasted.

What should be shown instead? I personally would not like to expand the content area to the sidebar.

krabina · 2023-11-09T13:40:28Z

Oh yes, exactly that. I have a wiki where the customer wants this because of very long content pages. There it is a great feature. But on many other pages, content is shown with different result formats (tables, etc.). There every inch of screen size is precious. I really only need the StickyTOC on the left side if there is a TOC. Since you can deliberatly chose this with TOC NOTOC (and even FORCETOC it would be a great feature to only use the space once a TOC should be there and give it back to the main content of there is no TOC

krabina · 2023-11-09T13:42:07Z

BTW: an option position="right" would also be great, since a blank space on the left is much more annoying than a blank space on the right. Tweeki does it like this: https://tweeki.kollabor.at/wiki/How-Tos

malberts · 2023-11-10T09:03:07Z

Another issue: on pages where there is no TOC at all, the space for the TOC should not be wasted.

The difficulty here is that the sidebar is defined in the layout, independent of the TOC. So you could also put other things in the sidebar, or even define the sidebar in a completely different way. Having the TOC then take control of a parent element/component is kind of out of scope for the TOC component. But we could perhaps add a class to the tag to indicate that a TOC is present/absent. And then the admin can add custom styling to hide the whole sidebar.

krabina · 2023-11-27T16:21:11Z

I observed an interesting effect: If you use the result format "datatables" on a page, it will somehow use the left sidebar as well. This is good, because datatables usually need as much width as they can get, but it is somehow unintended. So maybe this gives a hint on how this could be turned into a feature.

DanielWTQ · 2023-11-28T23:30:26Z

I've sent #405 to try and improve the styles of the component; I believe this can be closed

malberts · 2024-01-24T20:18:45Z

Closing this as superceded by work being done for #390.

tosfos mentioned this pull request Jun 27, 2023

Add component for sticky TOC #29

Open

Integrate Extension:StickyTOC to chameleon as modification

66ab0a3

@note: This fixes deprecated call to Hook::run() as well.

xSavitar force-pushed the make-stickyTOC-a-component branch from 48d2044 to 66ab0a3 Compare July 8, 2023 17:02

Fix typo in script path and don't apply sticky toc if only sticky men…

1147dfc

…tioned.

Merge pull request #1 from bawolff/make-stickyTOC-a-component

fe65cbd

Fix typo in script path and don't apply sticky toc to just sticky

malberts reviewed Aug 11, 2023

View reviewed changes

malberts mentioned this pull request Dec 18, 2023

Toc component: style improvements #405

Merged

malberts closed this Jan 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Integrate StickyTOC to chameleon as modification component #386

Integrate StickyTOC to chameleon as modification component #386

xSavitar commented Jun 17, 2023

xSavitar commented Jun 17, 2023

bawolff commented Jul 3, 2023

xSavitar commented Jul 8, 2023 •

edited

Loading

bawolff commented Jul 10, 2023

bawolff commented Jul 17, 2023

bawolff commented Jul 17, 2023

bawolff commented Jul 17, 2023

xSavitar commented Jul 17, 2023

malberts Aug 11, 2023

malberts Aug 11, 2023

malberts Aug 11, 2023

malberts Aug 11, 2023

malberts Aug 11, 2023

malberts Aug 11, 2023

malberts Aug 11, 2023

malberts commented Aug 11, 2023

krabina commented Sep 18, 2023

krabina commented Nov 2, 2023

malberts commented Nov 2, 2023

krabina commented Nov 2, 2023

malberts commented Nov 3, 2023

krabina commented Nov 3, 2023

krabina commented Nov 9, 2023

kghbln commented Nov 9, 2023

krabina commented Nov 9, 2023

krabina commented Nov 9, 2023

malberts commented Nov 10, 2023

krabina commented Nov 27, 2023

DanielWTQ commented Nov 28, 2023

malberts commented Jan 24, 2024

Integrate StickyTOC to chameleon as modification component #386

Integrate StickyTOC to chameleon as modification component #386

Conversation

xSavitar commented Jun 17, 2023

xSavitar commented Jun 17, 2023

bawolff commented Jul 3, 2023

xSavitar commented Jul 8, 2023 • edited Loading

bawolff commented Jul 10, 2023

bawolff commented Jul 17, 2023

bawolff commented Jul 17, 2023

bawolff commented Jul 17, 2023

xSavitar commented Jul 17, 2023

malberts Aug 11, 2023

Choose a reason for hiding this comment

malberts Aug 11, 2023

Choose a reason for hiding this comment

malberts Aug 11, 2023

Choose a reason for hiding this comment

malberts Aug 11, 2023

Choose a reason for hiding this comment

malberts Aug 11, 2023

Choose a reason for hiding this comment

malberts Aug 11, 2023

Choose a reason for hiding this comment

malberts Aug 11, 2023

Choose a reason for hiding this comment

malberts commented Aug 11, 2023

krabina commented Sep 18, 2023

krabina commented Nov 2, 2023

malberts commented Nov 2, 2023

krabina commented Nov 2, 2023

malberts commented Nov 3, 2023

krabina commented Nov 3, 2023

krabina commented Nov 9, 2023

kghbln commented Nov 9, 2023

krabina commented Nov 9, 2023

krabina commented Nov 9, 2023

malberts commented Nov 10, 2023

krabina commented Nov 27, 2023

DanielWTQ commented Nov 28, 2023

malberts commented Jan 24, 2024

xSavitar commented Jul 8, 2023 •

edited

Loading