vvjt

The Vanilla Views suite F.L.A.S.H.C.R.P.T.B FlashCrptb is a collection of ten powerful Drupal modules designed to enhance the visual and interactive experience of Drupal Views using pure, lightweight Vanilla JavaScript. Originally developed as Paragraphs Bundles, these modules Accordion, Basic Carousel, 3D Carousel, 3D FlipBox, Hero, Lightbox, Parallax, Reveal, Slideshow, and Tabs.

Additionally, I have created a demo for each module: Accordion Demo, 3D Carousel Demo, Carousel Demo, 3D FlipBox Demo, Hero Demo, Lightbox Demo, Parallax Demo, Reveal Demo, Slideshow Demo, and Tabs Demo.
To get started, check out our Video Demo for a step-by-step guide on using the module effectively. Explore our mixed demos here: Live Demo One | Live Demo Two. The site for the live demo is built with the Solo Theme.

Overview

The Views Vanilla JavaScript Tabs module (machine name: vvjt) is a versatile and lightweight Views style plugin designed to render items in tabs using vanilla JavaScript. This module enhances user experience by providing smooth and engaging tabbed navigation for content displayed through Drupal Views. It offers robust configuration options for tab positioning, animation, and responsiveness. In addition to the traditional use of tabs—whether vertical or horizontal, where users click on links to open tabs—this module also allows you to create a slideshow using image thumbnails instead of links. The thumbnails are scrollable and clickable, enabling users to view the corresponding image in a seamless and interactive way.

Features

• No jQuery: By using vanilla JavaScript, the module ensures faster performance, reduced page load times, and no reliance on heavy external libraries. This makes it an ideal choice for modern, lightweight Drupal websites.
• Dynamic Animation Options: Choose from various animation types such as Top, Bottom, Left, Right, Zoom, and Opacity to create smooth transitions between tab panes, enhancing the visual appeal.
• Unique ID Generation: Automatically generates a unique numeric ID for each view display to ensure consistency and prevent conflicts, making it easier to manage multiple tabbed interfaces.
• Flexible Tab Positions: Configure tabs to be positioned at the top, right, bottom, or left, allowing for versatile layout options that suit different design needs.
• Responsive Design with Custom Breakpoints: Define custom breakpoints for when vertical tabs should collapse into horizontal tabs, ensuring a responsive layout that adapts to various screen sizes and devices.
• Configurable Maximum Width: Set a maximum width for tab buttons to ensure they expand based on content but do not exceed specified limits, maintaining a balanced and organized appearance.
• Optional CSS Inclusion: Enable or disable the CSS library to style the tabs, providing control over the visual presentation of the tabbed content.
• Adaptive Tab Wrapping: Option to wrap tab buttons when they exceed available space or use default auto-scroll, ensuring efficient navigation across different screen sizes.
• Two Background Colors: Allows you to set two background colors—one for the buttons and another for the panes.
• Disable Background Colors: Includes a checkbox to disable the background colors for both the buttons and the panes.

Accessibility

The VVJT module incorporates accessibility features to ensure that your tabs are usable by all visitors, including those using assistive technologies. Key features include:

• ARIA Roles and Properties: Implements proper ARIA roles and properties to provide context and state information to screen readers, improving accessibility for visually impaired users.
• Keyboard Navigation: Allows users to navigate through tab items using keyboard shortcuts, ensuring full functionality without the need for a mouse.
• Focus Management: Manages focus to ensure the currently selected tab is focused, providing a better experience for keyboard and screen reader users.

Configuration

After installing and enabling the module, configure it through the Views UI:

1. Animation Type: Select the desired animation type for transitions between tab panes.
2. Tabs Position: Choose the position for tab buttons (Top, Right, Bottom, or Left) to fit your design requirements.
3. Enable CSS Library: Check this option to include the CSS library for styling the tabs.
4. Wrap Tabs: Optionally enable tab wrapping when tab buttons exceed the available space, or use the default auto-scroll behavior.
5. Max Width: Define the maximum width for tab buttons when using vertical tabs. Options range from Auto to fixed widths (100px to 600px).
6. Available Breakpoints: Choose the breakpoint at which vertical tabs will collapse and become horizontal. Options include 576px, 768px, 992px, 1200px, and 1400px.

Custom Token for views header/footer from first row

In Views header/footer, if you add a field using Global: Text area or Global: Unfiltered text, there is an option called "Use replacement tokens from the first row."
The default tokens will not work in this case. Please use the custom tokens created by VVJA instead.
For example:

• The default token {{ title }} should be replaced with [vvjt:title].
• The default token {{ field_image }} should be replaced with [vvjt:field_image].

You can append :plain to the token to strip any HTML.

Example: [vvjt:title:plain]

Note: The [vvjt:*] tokens pull data directly from the rendered View fields.
Fields using complex rewrites (e.g., Global: Custom text with {{ tokens }}) are not supported by default for token replacement. Please use individual field tokens like [vvjt:title], [vvjt:field_image], etc.

Example Usage

1. Create a new view or edit an existing view.
2. Under the "Format" section, select "Views Vanilla JavaScript Tabs" as the style.
3. Configure the animation type, tab positions, and responsive breakpoints as needed.
4. Save the view and observe the tabbed navigation in action on the front end.

Additional Information

• Dependencies: This module does not have dependencies on other contributed modules, making it lightweight and easy to integrate.

Installation

1. Download and install the VVJS module from Drupal.org:
   

   composer require drupal/vvjt

2. Enable the module through the Drupal admin interface or using Drush:
   

   drush en vvjt

3. Clear caches to ensure the new plugin is available:
   

   drush cr

Support

For issues, feature requests, and general support, please use the issue queue on Drupal.org.

Support and Contributions

If you encounter any issues or have suggestions for improvements, please open an issue in the module's issue queue. Contributions are welcome and appreciated!

Tabs - Developer & Site Builder Tips:

• Every view created with this plugin has a CSS class vvj-tabs placed alongside js-view-dom-id.
• You must choose "Row Style" as the format, with at least two fields.
• The first field should not be clickable. If this is forgotten, the module includes a fallback to disable any links.
• The rest of the fields will be grouped as the tab pane.
• The active button has a CSS class active.

How to Configure Multiple Fields as the Button or Front Card in Views Display

Our contrib modules for Drupal Views Plugin Display, such as Accordion, Tabs, Reveal, and 3D FlipBox, allow for dynamic content display based on the first field in your view. By default, the first field selected in the view configuration is used as the button or front card. However, if you wish to utilize more than one field as the "first field" for the button or front card, follow these steps:

Step-by-Step Instructions:

1. Add Desired Fields: In your Views configuration, add all the fields you want to use as the button or front card.
2. Exclude from Display: For each of these fields, mark them as "Exclude from display". This ensures that these fields are available for use but are not directly shown in the final output.
3. Create a Custom Global Field:
   • Add a Custom Global Field (Text) to your view.
   • Use the Replacement Patterns feature to insert tokens for the fields you've excluded from the display. This allows you to combine multiple fields into one single output.

Field Ordering Guidance:

• Arrange the fields in your view so that the hidden fields (the ones excluded from display) come first.
• Follow the hidden fields with the custom global field that will act as the button or front card.
• After these fields, add any remaining fields that will make up the rest of your content.

By following these steps and arranging your fields in this order, you can use multiple fields as the first field for your button or front card, offering greater flexibility and customization in your Drupal Views displays.

Module Limitation Notice: Grouping Field Feature

Please note that the current version of this module does not support the
Grouping Field feature available in Drupal Views. The
"Grouping Field" option allows you to group records by a specified field,
but this functionality is not compatible with the module's current implementation.

We recommend avoiding the use of this feature with this module to ensure
proper functionality and display of your Views.

back to top ☝️

Developed & Designed By: Alaa Haddad

A Personal Thank You for Your Support

Every project you see here, including this one, reflects countless hours of work driven by my passion for making Drupal better for everyone. Your support truly makes a difference, and there are a few simple ways you can help these projects grow and reach others who might benefit:

• Use & Share Feedback: Have you found this project (or any of my other work) helpful? Let me know what worked well or how it could be improved. Real user input drives better tools for the entire community.
• Click "Like" on Drupal.org: It may seem small, but liking this project on Drupal.org helps others discover and trust these tools.
• Spread the Word: Share these projects on social media, Slack groups, or anywhere Drupal folks connect. Your word of mouth helps these tools find the people who need them.
• Explore More of My Work: Check out my other projects on Drupal.org to see what else might support your workflow or inspire your next build.

W3CSS Theme (d8w3css) - Solo - W3CSS Paragraphs - Paragraphs Bundles - Amun - Amunet - Anhur - Acquia Purge Varnish - Cloudflare Purge - Reference Blocked Users - Solo Copy Blocks - Solo Utilities - PB Import - VVJA - Accordion - VVJC - 3D Carousel - VVJB - Basic Carousel - VVJF - 3D FlipBox - VVJH - Hero - VVJL - Lightbox - VVJP - Parallax - VVJR - Reveal - VVJS - Slideshow - VVJT - Tabs - Module Matrix - Selectify - Utilikit

If you have any questions, ideas, or feedback about my Drupal.org projects, I’d love to hear from you! To keep things open and helpful for the entire community, I encourage you to post directly in the project's issue queue on Drupal.org. This way, your questions and the answers can benefit others who may have the same needs.

At the end of the day, my goal is to make Drupal easier and more enjoyable for everyone, especially small businesses and site builders who want to create professional sites without extra hassle. Together, we can build something even better. Thank you for your support, and for being part of this journey!