search

codingdavinci / relaunch2018

This is the new Coding da Vinci website (online since September 2020).
https://codingdavinci.de
GNU General Public License v2.0
1 stars 1 forks source link

Page anchors? #207

Closed lucyWMDE closed 3 years ago

lucyWMDE commented 4 years ago

Might be a stupid question, but do we already have the option to make page anchors so that we can use internal inks to skip to a particular place in a page? How would this work for paragraph styles. Looks like it should be an option in the editor (see here) but I can't find the icon in the settings under Konfiguration/Inhaltserstellung/Textformate und -editoren.

Snater commented 4 years ago

It does not seem to be included in Drupal core which is why this separate module exists. To be able to insert anchors, we'd need to install the module. Only with installing the module, it would be possible to add the option to text formats.

lucyWMDE commented 4 years ago

ok. At this stage feature requests are out unless they're super-essential. I'll double-check with the Geschäftstelle that they can live without it - closing for now.

lucyWMDE commented 4 years ago

Doch. This one would apparently be good to have. If installing the module is not such a big deal and won't cause additional delay, please do so.

Snater commented 4 years ago

This adds the anchor_link module. Config files are added to the commit and could be installed to add the anchor link button to the text formats "Einfaches HTML" and "Vollständiges HTML". Otherwise just do per admin interface. I could do it as soon as I have access to the test deployment and the commit is pulled.

lucyWMDE commented 3 years ago

I've tried to do it myself under Konfiguration>Inhaltserstellung>Textformate und -editoren, Werkzeugleisten-Buttons... I remember doing this before a while ago and you could just drag and drop buttons from the available selection to the toolbar. I'm not seeing this view now, just a text representation of what's currently in the toolbar ([[{"name":"Formatting","items":["Bold","Italic","Strike","Superscript","Subscript","-","RemoveFormat"]},{"name":"Block Formatting","items":["Format","Styles"]},{"name":"Links","items":["DrupalLink","DrupalUnlink"]},{"name":"Einf\u00fcgen","items":["Copy","Cut","Paste","PasteText","PasteFromWord"]},{"name":"Lists","items":["BulletedList","NumberedList","Table"]},{"name":"Tools","items":["Source"]}]]) ...and I don't know how to describe the anchor link button.

Could you please do this next time you're working on the site. As you say, adding it to "Einfaches HTML" and "Vollständiges HTML" would make the most sense. Thanks.

Snater commented 3 years ago

The commit only includes the module files, it still needed to be installed first—sorry I was not clear on that. I installed the module and added the anchor button to the two text formats. Hope things are as expected now. :)

lucyWMDE commented 3 years ago

Was activated for "Vollständiges HTML" but not for "Einfaches HTML". To get the button to appear there I had to uncheck "Erlaubte HTML-Tags begrenzen und fehlerhaftes HTML korrigieren". I hope this won't cause us any problems. It's still a rather limited group of people who'll be using the "Einfaches HTML" editor.

testing here: https://test.codingdavinci.de/de/test-page-anchors - I have a couple of problems:

  1. Inserting the urls for page anchor links is a problem. I had to do it manually by figuring out what the link should be and inserting the url. I don't think this is how it's supposed to work... I think there might be something further to be configured... From researching it and playing around I think, when you click the link button, there should be a fancier create link dialog window including a dropdown where you can select the option to link to a page anchor and choose from a list. I can get this dialog when I doubleclick on a link I've already created: image but it won't let me open the dropdowns... on any of the tabs... or edit any of the content. We can hack our way around this problem for now, but it'd be good to install the thing properly.

  2. Is there an easy way to offset exactly where the page scrolls to when you click an anchor link? Right now the anchor link falls under the navibar. And since we can't add page anchors to section titles, only to text underneath them, they're landing rather far off the mark. Again, we can work around it by adding the page anchor to the end of the text above the section title (see here) but if we can fix this more cleanly that'd be great.

Snater commented 3 years ago
  1. I re-enabled the HTML tag filter. I hope disabling and re-enabling it did not drop any particular attributes. Obviously, the required attributes for anchors are not automatically added to the filter and need to be added manually. I have added that the attribute id and name are allowed on a tags. That should work now with the filter.
  2. You are trying some fancy thing here, which is linking across paragraphs. Paragraphs are kind of separately encapsulated components that do not have a knowledge of each other. You can very well add an anchor in a paragraph and link to it using the UI in the same paragraph. But cross-paragraph linking is something that's beyond this module as each paragraph features a separate CKEditor instance. Cross-paragraph linking is not trivial and has to be done manually the way you did it.
  3. I have added a custom module that is to handle scrolling to anchors per JavaScript. It considers the offset caused by the navigation menu bar. As soon as the deployment has updated, you can install the module on "Erweitern" per the admin menu—look for the module "Scroll to anchors" there, check it, hit "Installieren" on the bottom of the page and continue to just install the module. No further action is required.
lucyWMDE commented 3 years ago 
I re-enabled the HTML tag filter. I hope disabling and re-enabling it did not drop any particular attributes. Obviously, the required attributes for anchors are not automatically added to the filter and need to be added manually. I have added that the attribute id and name are allowed on a tags. That should work now with the filter.

cool thx

You are trying some fancy thing here, which is linking across paragraphs. Paragraphs are kind of separately encapsulated components that do not have a knowledge of each other. You can very well add an anchor in a paragraph and link to it using the UI in the same paragraph. But cross-paragraph linking is something that's beyond this module as each paragraph features a separate CKEditor instance. Cross-paragraph linking is not trivial and has to be done manually the way you did it.

Weird - you'd think that since the use case for page anchors is generally pages with a LOT of content, likely with multiple paragaraphs to enable richer content, that linking between paragraphs would have been a basic requirement for the feature. Either way.. I tested linking to anchors within one paragraph - I'm still not offered the more complex url-creation UI. I can sometimes access it if I go back to edit an already created link, but I still can't open any dropdowns or edit any content. No change from before. Will test again later in the week. But I guess we're just going to have to live with the work-around here.

I have added a custom module that is to handle scrolling to anchors per JavaScript. It considers the offset caused by the navigation menu bar. As soon as the deployment has updated, you can install the module on "Erweitern" per the admin menu—look for the module "Scroll to anchors" there, check it, hit "Installieren" on the bottom of the page and continue to just install the module. No further action is required.

Would be great - I installed it as per your instructions. No change yet. Will test again later in the week.

Snater commented 3 years ago

Finally, I figured out. :) The configuration was still flawed. The anchor_link module comes with replacements for the link / unlink feature in CKEdtior as well. So the old link / unlink buttons had to be removed from the editor and the ones coming with anchor_link added. The extended UI was already there when editing a link with double click, but now it there initially when creating a link.

On https://test.codingdavinci.de/de/test-page-anchors/, I recreated the "section 1" link and it also scrolls smoothly with the new module. You need to make sure the link is just #<anchor> and does not contain the full URL. Such links without the full URL are created by the anchor_link module, so linking within paragraphs should not be an issue.

Linking across paragraphs is really something that's out of scope. Paragraphs itself are not an integral part of Drupal, but an extension. Joining those two features is not trivial. I also edited the "one" link and it works as well with the scrolling module: You would select Link-Typ URL, Protokoll <andere> and then as URL you enter the anchor #one.