Module Description
Toc.js module integrate the jQuery plugin TOC.js into Drupal.
TOC.js is a jQuery plugin which automatically generate a table of contents for your page. This module provide :
* An extra field available on node. This extra field display a Toc based on the settings of the node type.
* A block which can generate a Toc for any kind of page.
The Table of content is generated from the front end and allow :
* Smooth scrolling when jumping to heading
* Highlight on scroll on the TOC elements
* Custom configuration for the container and the heading you want to target.
You can put as many TOCs, with specific settings, as you need, on a page.
Requirements Toc.js module works with the jquery TOC.js library. Required modules (core module) * node * block
Similar modules available on Drupal 8
* The TOC API module provide the API to generate a TOC based on configuration entity type. TOC are generate on the backend.
* The TOC filter module use the TOC API and can generate a TOC for a body field using the a filter on the body.
* The TOC API Node use the TOC API module and generate a TOC on a whole node, always from the backend.
* TOC Formatter set a TOC to the top of a text area field. This module uses PHP DOMDocument to manipulate content.
* ...
See the Comparison of Table of Contents / TOC modules : https://www.drupal.org/node/2278811
Toc.js have a more lightweight approch than theses modules and delegate the most part of the work to the awesome TOC.js jquery library, which comes with native options (selectors, containers, smooth scrolling, highlight on scroll).
Installation * Install as you would normally install a contributed Drupal module. See: https://www.drupal.org/docs/8/extending-drupal-8/installing-modules for further information. * Download the library TOC.js (https://github.com/jgallen23/toc/tree/greenkeeper/update-all) and place the following file toc.min.js under the libraries/toc folder. The complete path of the file attended is : libraries/toc/toc.min.js * Check the status report * You can use composer to download and install the jQuery library. For this you have to add to your composer.json file the following repository:
"repositories": [ { "type": "composer", "url": "https://packages.drupal.org/8" }, { "type": "package", "package": { "name": "toc/toc", "version": "v0.3.2", "type": "drupal-library", "dist": { "url": "https://raw.githubusercontent.com/jgallen23/toc/greenkeeper/update-all/dist/toc.min.js", "type": "file" } } } ], And "toc/toc": "*" in the require part.
Configuration For the Toc.js Block
Place a Toc.js block and configure the Toc settings. Toc settings are the same that for node. See below.
For node
* Enable the Table of content on the content type you want place a TOC
* Configure the Toc settings
* In the manage display page configuration of this content type, place the TOC extra field in the region you content to display it, in any view mode you need.
The Toc.js settings available are :
* Title : the title displayed on top of the Toc list. Default: "Table of contents".
* Selectors : the elements to use as headings. Each element separated by comma. Default: "h2,h3".
* Container : Element to find all selectors in. Default: ".node".
* Prefix : Prefix for anchor tags and class names. Default: "toc".
* List type : Choose between an unordered HTML list or an ordered HTML list. Default: "ul".
* Back to top : Add a back to top link on heading. Default: false
* Back to top label : The back to top link label. Default: 'Back to top'
* Smooth scrolling : Enable or disable smooth scrolling on click.
* ScrollTo offset : Offset to trigger with smooth scrolling enabled.
* Highlight on scroll : Add a class to heading that is currently in focus.
* Highlight offset : Offset to trigger the next headline.
* Sticky : Stick the toc on window scroll.
* Sticky offset : The offset (in px) to apply when the toc is sticky.
Table of content per node This module contains a sub module "Toc.js per node" which permit to enable/disable the Toc per node. Once this sub module enabled, you must allow the override per node for the content type.
You have then for each content type a new settings :
* Permit to enable/disable toc per node
Once this option checked, you can for each node disable / enable the TOC generated.
See screenshots for the configuration
Theming The Toc generated is not themed. You need to put some css magic for a better look, according to your theme. Relevant class are added on each element item of the TOC list.
TOC.js is a jQuery plugin which automatically generate a table of contents for your page. This module provide :
* An extra field available on node. This extra field display a Toc based on the settings of the node type.
* A block which can generate a Toc for any kind of page.
The Table of content is generated from the front end and allow :
* Smooth scrolling when jumping to heading
* Highlight on scroll on the TOC elements
* Custom configuration for the container and the heading you want to target.
You can put as many TOCs, with specific settings, as you need, on a page.
Requirements Toc.js module works with the jquery TOC.js library. Required modules (core module) * node * block
Similar modules available on Drupal 8
* The TOC API module provide the API to generate a TOC based on configuration entity type. TOC are generate on the backend.
* The TOC filter module use the TOC API and can generate a TOC for a body field using the a filter on the body.
* The TOC API Node use the TOC API module and generate a TOC on a whole node, always from the backend.
* TOC Formatter set a TOC to the top of a text area field. This module uses PHP DOMDocument to manipulate content.
* ...
See the Comparison of Table of Contents / TOC modules : https://www.drupal.org/node/2278811
Toc.js have a more lightweight approch than theses modules and delegate the most part of the work to the awesome TOC.js jquery library, which comes with native options (selectors, containers, smooth scrolling, highlight on scroll).
Installation * Install as you would normally install a contributed Drupal module. See: https://www.drupal.org/docs/8/extending-drupal-8/installing-modules for further information. * Download the library TOC.js (https://github.com/jgallen23/toc/tree/greenkeeper/update-all) and place the following file toc.min.js under the libraries/toc folder. The complete path of the file attended is : libraries/toc/toc.min.js * Check the status report * You can use composer to download and install the jQuery library. For this you have to add to your composer.json file the following repository:
"repositories": [ { "type": "composer", "url": "https://packages.drupal.org/8" }, { "type": "package", "package": { "name": "toc/toc", "version": "v0.3.2", "type": "drupal-library", "dist": { "url": "https://raw.githubusercontent.com/jgallen23/toc/greenkeeper/update-all/dist/toc.min.js", "type": "file" } } } ], And "toc/toc": "*" in the require part.
Configuration For the Toc.js Block
Place a Toc.js block and configure the Toc settings. Toc settings are the same that for node. See below.
For node
* Enable the Table of content on the content type you want place a TOC
* Configure the Toc settings
* In the manage display page configuration of this content type, place the TOC extra field in the region you content to display it, in any view mode you need.
The Toc.js settings available are :
* Title : the title displayed on top of the Toc list. Default: "Table of contents".
* Selectors : the elements to use as headings. Each element separated by comma. Default: "h2,h3".
* Container : Element to find all selectors in. Default: ".node".
* Prefix : Prefix for anchor tags and class names. Default: "toc".
* List type : Choose between an unordered HTML list or an ordered HTML list. Default: "ul".
* Back to top : Add a back to top link on heading. Default: false
* Back to top label : The back to top link label. Default: 'Back to top'
* Smooth scrolling : Enable or disable smooth scrolling on click.
* ScrollTo offset : Offset to trigger with smooth scrolling enabled.
* Highlight on scroll : Add a class to heading that is currently in focus.
* Highlight offset : Offset to trigger the next headline.
* Sticky : Stick the toc on window scroll.
* Sticky offset : The offset (in px) to apply when the toc is sticky.
Table of content per node This module contains a sub module "Toc.js per node" which permit to enable/disable the Toc per node. Once this sub module enabled, you must allow the override per node for the content type.
You have then for each content type a new settings :
* Permit to enable/disable toc per node
Once this option checked, you can for each node disable / enable the TOC generated.
See screenshots for the configuration
Theming The Toc generated is not themed. You need to put some css magic for a better look, according to your theme. Relevant class are added on each element item of the TOC list.
Module Link
Project Usage
2053
Security Covered
Covered By Security Advisory
Version Available
Production
Module Summary
Toc.js module integrates the jQuery plugin TOC.js into Drupal to automatically generate a table of contents for web pages with smooth scrolling and highlight features.
Data Name
toc_js
OPENAI CHATBOT
OPENAI CHATBOT
