RubyGems - jekyll-tabs - Versions diffs - 1.1.0 → 1.2.0 - Mend

jekyll-tabs 1.1.0 → 1.2.0

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 (9) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b542d01f26e5f9cc72769abff7065838da5c59b4aa4044d02abaa92c8a45ee44
-  data.tar.gz: 396d97d17d7e3ba0680a08dc6f43aa52c64ae06dbee1223fd37b685b910bce7a
+  metadata.gz: 78ca84e5d1867d7cae701c62eae5c1d9066dfc175212fe271dad345bf85f17c4
+  data.tar.gz: bfaa05193d4fc879493ca5fe66c70e94a1e5baf4ad304325936b329bd09a3237
 SHA512:
-  metadata.gz: ff42e2a0cb9ea91627c1979fa56ef54ab85492057d08350653ea52feabba4eb513519bb579deb0ad2395b0f49084283dacc445347363cfc7e2006b13d83d2ccf
-  data.tar.gz: 261a87fd226df8a5d644386e63ba61c430e9ae9ef0bd130ca8a96d194505062cb20f0dee9b4191fff7f4f5e7332e8e6cdb09c0d9219c9a90e03b0cc0f1cba9f7
+  metadata.gz: bfc9afab28e4defda0c26acb0a5a2f11f879618c8bb10d0c78af08b290741f8a09046215ceecf579d47c2d045349682554676b103876015588d504231e3101ce
+  data.tar.gz: c0ecd449586ec99b82d4a1f8619ac11c51015c8e0422886dddc60621c0a41f3c8fc3e01c0e8a802353f1becf21a96e64c59040c5f5f4d4e93e467749fde974bf

data/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2022 Baptiste Bouchereau
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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 > 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/jekyll-tabs.gemspec CHANGED Viewed

@@ -9,7 +9,7 @@ Gem::Specification.new do |spec|
   spec.description   = 'Generate a tabbed interface on top of markup'
   spec.version       = Jekyll::Tabs::VERSION
-  spec.authors       = ['Baptiste Bouchereau']
+  spec.authors       = ['Nejc Zdovc', 'Baptiste Bouchereau']
   spec.email         = ['baptiste.bouchereau@gmail.com']
   spec.homepage      = 'https://github.com/ovski4/jekyll-tabs'
   spec.licenses      = ['MIT']

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

@@ -1,5 +1,5 @@
 module Jekyll
     module Tabs
-      VERSION = "1.1.0"
+      VERSION = "1.2.0"
     end
 end

data/lib/template.erb CHANGED Viewed

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

metadata CHANGED Viewed

@@ -1,14 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-tabs
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.2.0
 platform: ruby
 authors:
+- Nejc Zdovc
 - Baptiste Bouchereau
-autorequire:
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-02-03 00:00:00.000000000 Z
+date: 2023-11-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -38,6 +39,7 @@ extensions: []
 extra_rdoc_files: []
 files:
 - Gemfile
+- LICENSE
 - README.md
 - docs/tabs-example.png
 - docs/tabs.css
@@ -50,7 +52,7 @@ homepage: https://github.com/ovski4/jekyll-tabs
 licenses:
 - MIT
 metadata: {}
-post_install_message:
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -65,8 +67,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.1
-signing_key:
+rubygems_version: 3.3.15
+signing_key:
 specification_version: 4
 summary: A Jekyll plugin to add tabs
 test_files: []