RubyGems - jekyll-tabs - Versions diffs - 1.1.1 → 1.2.1 - Mend

jekyll-tabs 1.1.1 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6c266623f115ba3a1622127faa6198a519ec07f088acf63eda6f3699ddcedc9d
-  data.tar.gz: 41a9a2a5a7900e78b74b26bf251ff78a997fd62bb4992e9b2adf37d7a57421aa
+  metadata.gz: 49d3f07cb95500acd0b2866c35e78b2c425616708ba8460446b0337642a9ed9c
+  data.tar.gz: 8e237cea3292d2ad4875640b3cdd5ba6cd7704b8cdf653f8dc5d2eb4917c94da
 SHA512:
-  metadata.gz: a528f0a8014d0fa8c623fc364cd8d9a617d37a6fdd319c8fcbfd53580fb1e87e6e226e995bc2ad4c5a4c26acd7021ceb47fcbe04e8eb7a5412c80c200c116d6b
-  data.tar.gz: 712766d195a12f7db59a4fb78d086cd6199b9d50a392afc396f4c8cd4d372aec83a714a5dac6b70efc0ca0eaaa0193a4a8746a130b079e05edd7ea5d120e88de
+  metadata.gz: a49f0c568b7a74376be5b22cea12e98a042f89deadb9e73ff3da5b22aa00972be5c017ae2f13d07acb60cfec3b6ee0cbdc3f4070cc5303db5dc240122c7dfcd4
+  data.tar.gz: 201fa4899553cc756998ae997c160653e795eaa1b9e266308db26b2f199852bd6c90e65d6839c5f6aeb2a8d5de3bf14da79cfe0202bfca3154881ccc5fc0d921

data/README.md CHANGED Viewed

@@ -10,60 +10,63 @@ Installation
 ### Install the plugin
-Add this line to your Gemfile:
+Add this line to your `Gemfile`:
 ```ruby
 group :jekyll_plugins do
+  # ... other gems
   gem "jekyll-tabs"
 end
 ```
-Add in you _config.yml:
+Install the gem by running:
-```yaml
-plugins:
-  - jekyll-tabs
+```bash
+bundle install
 ```
-And then execute:
-    $ bundle
-and put this in your ``_config.yml``
+Then add the gem to the plugin list in your `_config.yml` file:
 ```yaml
 plugins:
   - jekyll-tabs
 ```
-### Add the javascripts
+### Include the javascript
-Copy the content of [this file](docs/tabs.js) in your public folder, let's say **public/js/tabs.js**.
-Include the script in your layout, for instance in **_layouts_/default.html**
+Copy the content of [this file](https://raw.githubusercontent.com/Ovski4/jekyll-tabs/master/docs/tabs.js) in your public folder (for example **assets/js/tabs.js**), and include the script in your layout (such as **_layouts/default.html**).
 ```html
 <!DOCTYPE html>
 <html lang="en-us">
-  {% include head.html %}
-  <body>
-      {{ content }}
-    <script src="/public/js/tabs.js"></script>
-  </body>
+    <head>
+        ...
+    </head>
+    <body>
+        {{ content }}
+        <script src="/assets/js/tabs.js"></script>
+    </body>
 </html>
 ```
-### Add some style to the tabs
+### Style the tabs
-Feel free to style it the way you want. Here is an example.
+Feel free to style it the way you want. You can use [this existing css file](https://raw.githubusercontent.com/Ovski4/jekyll-tabs/master/docs/tabs.css) to get started.
-Create a file called **custom.css** in **public/css** with [this content](docs/tabs.css). Include it in **_include/head.html**
+Paste the content in a file (for example **assets/css/custom.css**), and include it in the html <head> tag of your jekyll website.
 ```html
-<link rel="stylesheet" href="/public/css/custom.css">
+<!DOCTYPE html>
+<html lang="en-us">
+    <head>
+        ...
+        <link rel="stylesheet" href="/assets/css/custom.css">
+    </head>
+    <body>
+        ....
 ```
-That's it
+You are all set! Let's see the markup.
 Usage
 -----
@@ -121,6 +124,41 @@ hello:
 Here is the result:
-![Image of Yaktocat](docs/tabs-example.png)
+![Example to demo how tabs will render](docs/tabs-example.png)
+In the following markup:
+```
+{% tab data-struct Some label here %}
+```
+* The first word after the `tab` keyword (`data-struct` here) is used to group tabs.
+* All words after will be displayed as the tab label.
+Which is why in the above example, we have 2 groups of tabs: `data-struct` and `log`.
+Additional configuration
+------------------------
+### Sync tabs with similar labels
+To get all tabs with the same label synced, set the `syncTabsWithSameLabels` value to **true** in the `jekyllTabsConfiguration` object ([link to related line of code](https://github.com/Ovski4/jekyll-tabs/blob/master/docs/tabs.js#L5)).
+### Open a specific tab on page load
+To link and open a specific tab on page load, set the `activateTabFromUrl` value to **true** in the `jekyllTabsConfiguration` object ([link to related line of code](https://github.com/Ovski4/jekyll-tabs/blob/master/docs/tabs.js#L6)).
+You will need to append a combination of url anchor (#) and query param (?active_tab) to the page URL.
+* The anchor is used to target the tab group
+* The query parameter `active_tab` is used to target the tab that will open
+Clicking on a tab will automatically set the anchor and query parameter in the url.
+### Add a copy to clipboard button
+To get a button to copy the code within a tab, set the `addCopyToClipboardButton` value to **true** in the `jekyllTabsConfiguration` object ([link to related line of code](https://github.com/Ovski4/jekyll-tabs/blob/master/docs/tabs.js#L7)).
+This will apply only if `<pre>` tags can be found inside the tabs contents.
-Characters before the first space must be the same between tabs of the same scope (log and data-struct in this example). Every characters following will be displayed as the tab label.
+You can override the button HTML using the `copyToClipboardButtonHtml` property.

data/docs/tabs.css CHANGED Viewed

@@ -31,18 +31,18 @@
     border-color: #1e87f0;
 }
-.tab li a {
+.tab > li > a {
     text-decoration: none;
-        cursor: pointer;
+    cursor: pointer;
 }
-.tab-content{
+.tab-content {
     padding: 0;
 }
-.tab-content li {
+.tab-content > li {
     display: none;
 }
-.tab-content li.active {
+.tab-content > li.active {
     display: initial;
 }

data/docs/tabs.js CHANGED Viewed

@@ -1,14 +1,43 @@
-const removeActiveClasses = function (ulElement) {
-    const lis = ulElement.querySelectorAll('li');
-    Array.prototype.forEach.call(lis, function(li) {
-        li.classList.remove('active');
-    });
-  }
+/**
+ * Configure the tabs behavior.
+ */
+const jekyllTabsConfiguration = {
+    syncTabsWithSameLabels: false,
+    activateTabFromUrl: false,
+    addCopyToClipboardButton: false,
+    copyToClipboardButtonHtml: '<button>Copy</button>',
+};
+const jekyllTabsModule = (function() {
+    /**
+     * Remove all "active" classes on li elements that belong to the given ul element.
+     */
+    const removeActiveClasses = function (ulElement) {
+        const liElements = ulElement.querySelectorAll('ul > li');
+        Array.prototype.forEach.call(liElements, function(liElement) {
+            liElement.classList.remove('active');
+        });
+    }
+    /**
+     * Get the element position looking from the perspective of the parent element.
+     *
+     * Considering the following html:
+     *
+     * <ul>
+     *   <li class="zero">0</li>
+     *   <li class="one">1</li>
+     *   <li class="two">2</li>
+     * </ul>
+     *
+     * Then getChildPosition(document.querySelector('.one')) would return 1.
+     */
+    const getChildPosition = function (element) {
+        const parent = element.parentNode;
-  const getChildPosition = function (element) {
-        var parent = element.parentNode;
-        var i = 0;
-        for (var i = 0; i < parent.children.length; i++) {
+        for (let i = 0; i < parent.children.length; i++) {
             if (parent.children[i] === element) {
                 return i;
             }
@@ -17,27 +46,195 @@ const removeActiveClasses = function (ulElement) {
         throw new Error('No parent found');
     }
-window.addEventListener('load', function () {
-    const tabLinks = document.querySelectorAll('ul.tab li a');
+    /**
+     * Returns a list of elements of the given tag that contains the given text.
+     */
+    const findElementsContaining = function(elementTag, text) {
+        const elements = document.querySelectorAll(elementTag);
+        const elementsThatContainText = [];
-    Array.prototype.forEach.call(tabLinks, function(link) {
-      link.addEventListener('click', function (event) {
-        event.preventDefault();
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            if (element.textContent.includes(text)) {
+                elementsThatContainText.push(element);
+            }
+        }
+        return elementsThatContainText;
+    }
+    /**
+     * Handle adding or removing active classes on tab list items.
+     */
+    const handleTabClicked = function(link) {
+        const liTab = link.parentNode;
+        const ulTab = liTab.parentNode;
+        const liPositionInUl = getChildPosition(liTab);
-        liTab = link.parentNode;
-        ulTab = liTab.parentNode;
-        position = getChildPosition(liTab);
         if (liTab.className.includes('active')) {
-          return;
+            return;
         }
+        const tabContentId = ulTab.getAttribute('data-tab');
+        const tabContentElement = document.getElementById(tabContentId);
+        // Remove all "active" classes first.
         removeActiveClasses(ulTab);
-        tabContentId = ulTab.getAttribute('data-tab');
-        tabContentElement = document.getElementById(tabContentId);
         removeActiveClasses(tabContentElement);
-        tabContentElement.querySelectorAll('li')[position].classList.add('active');
+        // Then add back active classes depending on the tab (ul element) that was clicked on.
+        tabContentElement.querySelectorAll('ul.tab-content > li')[liPositionInUl].classList.add('active');
         liTab.classList.add('active');
-      }, false);
+    }
+    /**
+     * Create a javascript element from html markup.
+     */
+    const createElementFromHtml = function(html) {
+        const template = document.createElement('template');
+        template.innerHTML = html.trim();
+        return template.content.firstChild;
+    }
+    /**
+     * Copy the given text in the clipboard.
+     *
+     * See https://stackoverflow.com/questions/51805395/navigator-clipboard-is-undefined
+     */
+    const copyToClipboard = function(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+            navigator.clipboard.writeText(text);
+        } else {
+            // Use the 'out of viewport hidden text area' trick
+            const textArea = document.createElement("textarea");
+            textArea.value = text;
+            // Move textarea out of the viewport so it's not visible
+            textArea.style.position = "absolute";
+            textArea.style.left = "-999999px";
+            document.body.prepend(textArea);
+            textArea.select();
+            try {
+                document.execCommand('copy');
+            } catch (error) {
+                console.error(error);
+            } finally {
+                textArea.remove();
+            }
+        };
+    }
+    /**
+     * Open the tab specified by a combination of url anchor (#) and query param (?active_tab).
+     *
+     * For example, considering url http://your-jekyll-website.com/some-page/?active_tab=tab-2#my_tabs
+     * Then the tabs with name 'my_tabs' would see tab with label 'tab 2' automatically open.
+     */
+    const activateTabFromUrl = function() {
+        const tabsAnchor = window.location.hash.substring(1);
+        if (!tabsAnchor) {
+            return;
+        }
+        const targetedTabs = document.getElementById(tabsAnchor);
+        if (!targetedTabs) {
+            return;
+        }
+        const urlParams = new URLSearchParams(window.location.search);
+        const tabIdToActivate = urlParams.get('active_tab');
+        if (!tabIdToActivate) {
+            return;
+        }
+        const tabLink = targetedTabs.querySelector('li#' + tabIdToActivate + ' > a');
+        if (!tabLink) {
+            return;
+        }
+        jekyllTabsModule.handleTabClicked(tabLink);
+    }
+    /**
+     * Update the url when clicking on a tab. See method activateTabFromUrl above.
+     */
+    const updateUrlWithActiveTab = function(link) {
+        const liTab = link.parentNode;
+        const ulTab = liTab.parentNode;
+        const searchParams = new URLSearchParams(window.location.search);
+        searchParams.set('active_tab', liTab.id);
+        const updatedUrl = window.location.pathname + '?' + searchParams.toString() + '#' + ulTab.id;
+        history.replaceState(null, '', updatedUrl);
+    };
+    return {
+        findElementsContaining,
+        handleTabClicked,
+        createElementFromHtml,
+        copyToClipboard,
+        activateTabFromUrl,
+        updateUrlWithActiveTab,
+    };
+})();
+window.addEventListener('load', function () {
+    const tabLinks = document.querySelectorAll('ul.tab > li > a');
+    Array.prototype.forEach.call(tabLinks, function(link) {
+        link.addEventListener('click', function (event) {
+            event.preventDefault();
+            jekyllTabsModule.handleTabClicked(link);
+            if (jekyllTabsConfiguration.activateTabFromUrl) {
+                jekyllTabsModule.updateUrlWithActiveTab(link);
+            }
+            if (jekyllTabsConfiguration.syncTabsWithSameLabels) {
+                const linksWithSameName = jekyllTabsModule.findElementsContaining('a', link.textContent);
+                for(let i = 0; i < linksWithSameName.length; i++) {
+                    if (linksWithSameName[i] !== link) {
+                        jekyllTabsModule.handleTabClicked(linksWithSameName[i]);
+                    }
+                }
+            }
+        }, false);
     });
+    if (jekyllTabsConfiguration.addCopyToClipboardButton) {
+        const preElements = document.querySelectorAll('ul.tab-content > li pre');
+        for(let i = 0; i < preElements.length; i++) {
+            const preElement = preElements[i];
+            const preParentNode = preElement.parentNode;
+            const button = jekyllTabsModule.createElementFromHtml(jekyllTabsConfiguration.copyToClipboardButtonHtml);
+            preParentNode.style.position = 'relative';
+            button.style.position = 'absolute';
+            button.style.top = '0px';
+            button.style.right = '0px';
+            preParentNode.appendChild(button);
+            button.addEventListener('click', function () {
+                jekyllTabsModule.copyToClipboard(preElement.innerText);
+            });
+        }
+    }
+    if (jekyllTabsConfiguration.activateTabFromUrl) {
+        jekyllTabsModule.activateTabFromUrl();
+    }
 });

data/lib/jekyll-tabs/version.rb CHANGED Viewed

@@ -1,5 +1,5 @@
 module Jekyll
     module Tabs
-      VERSION = "1.1.1"
+      VERSION = "1.2.1"
     end
 end

data/lib/jekyll-tabs.rb CHANGED Viewed

@@ -1,6 +1,13 @@
 require 'securerandom'
 require 'erb'
+def sanitizeName(name)
+    return name
+        .strip                  # remove leading and trailing whitespace
+        .downcase               # lowercase
+        .gsub(/[^0-9a-z]/, '-') # replace all non alphabjetical or non numerical characetrs by a dash
+end
 module Jekyll
     module Tabs
         class TabsBlock < Liquid::Block
@@ -9,7 +16,8 @@ module Jekyll
                 if markup == ''
                     raise SyntaxError.new("Block #{block_name} requires 1 attribute")
                 end
-                @name = markup.strip
+                @name = sanitizeName(markup)
             end
             def render(context)
@@ -33,7 +41,7 @@ module Jekyll
                 if markups.length != 2
                     raise SyntaxError.new("Block #{block_name} requires 2 attributes")
                 end
-                @name = markups[0]
+                @name = sanitizeName(markups[0])
                 @tab = markups[1]
             end

data/lib/template.erb CHANGED Viewed

@@ -1,6 +1,6 @@
-<ul class="tab" data-tab="<%= uuid %>" data-name="<%= @name %>">
+<ul id="<%= @name %>" class="tab" data-tab="<%= uuid %>" data-name="<%= @name %>">
   <% environment["tabs-#{@name}"].each_with_index do |(key, value), index| %>
-      <li<%= index == 0 ? ' class="active"' : ''%>>
+      <li<%= index == 0 ? ' class="active"' : ''%> id="<%= @name + '-' + key.dup.strip.downcase.gsub(/[^0-9a-z]/, '-') %>">
           <a href="#"><%= key %></a>
       </li>
   <% end %>

metadata CHANGED Viewed

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-tabs
 version: !ruby/object:Gem::Version
-  version: 1.1.1
+  version: 1.2.1
 platform: ruby
 authors:
 - Nejc Zdovc
 - Baptiste Bouchereau
-autorequire:
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-02-25 00:00:00.000000000 Z
+date: 2023-12-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -52,7 +52,7 @@ homepage: https://github.com/ovski4/jekyll-tabs
 licenses:
 - MIT
 metadata: {}
-post_install_message:
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -67,8 +67,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
-signing_key:
+rubygems_version: 3.3.15
+signing_key:
 specification_version: 4
 summary: A Jekyll plugin to add tabs
 test_files: []