tail-select-rails 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: bb5f0cae3224dd89b8818fd901f9f9d55bbf5f496f27e179b217416bb492fcc4
+  data.tar.gz: c5eb92f904c0113c43aa619996216907f4928a44d5fab1b453f255fd6ab8cda8
+SHA512:
+  metadata.gz: 709ce7b81c61db1aae91b4cf86beca85f76e07b15f37928eeb7088ea44a1e60b061239d9b3255062fdc99dc074a49d421a86b3f703f8d88ea67fb3124843bcc7
+  data.tar.gz: fca58fd169a1ddc2fa8b86f9f8ad2954ff1d08ffa84e934be22d8eff2e3d240df72f95d46ce29dda4e7304b9693464a0f3e6347cfda10752e1785b9d4af75409

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Gajendra Jena <gaju.mca@gmail.com>
+
+Permission is hereby granted, free of charge as the original js library is opensource
+, 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

@@ -0,0 +1,42 @@
+tail-select-rails
+=================
+
+A gem to easily integrate [tail-select](https://getbutterfly.com/tail-select/) with the rails 6.1+ asset pipeline.
+
+Currently this gem brings support for tail-select **v1.0.2**.
+
+## Installation
+
+First add the following lines to your applications `Gemfile`:
+
+``` ruby
+gem 'tail-select-rails'
+```
+
+Run `bundle install`.
+
+Add the following lines to `app/assets/javascripts/application.js`:
+
+``` javascript
+//= require jquery
+//= require tail-select-rails
+```
+
+Finalize the setup by adding these lines to `app/assets/stylesheets/application.css`:
+
+``` css
+/*
+ *= require tail-select-rails
+ */
+```
+
+## Usage
+
+Please refer to [https://getbutterfly.com/tail-select/](https://getbutterfly.com/tail-select/)
+for all the details on how to use.
+
+### Credits
+
+* tail-select-rails is (c) Copyright Gajendra Jena
+* This gem is maintained by [@gajendrajena](https://www.twitter.com/gajendrajena)
+

data/lib/tail_select_rails.rb

@@ -0,0 +1,6 @@
+require 'rails'
+
+module TailSelectRails
+  class Engine < Rails::Engine
+  end
+end

data/vendor/assets/javascripts/tail-select-rails.js

@@ -0,0 +1,603 @@
+/**
+ *  tail.select - The vanilla JavaScript solution to make your <select> fields awesome!
+ *
+ *  @author     Ciprian Popescu <getbutterfly@gmail.com>
+ *  @version    1.0.2
+ *  @url        https://getbutterfly.com/tail-select/
+ *  @github     https://github.com/wolffe/tail.select.js
+ *  @license    MIT License
+ *  @copyright  Copyright 2020 - 2024 Ciprian Popescu <getbutterfly@gmail.com>
+ */
+const tail = {
+    select: function (selector, options = {}) {
+        // Default options
+        const defaultOptions = {
+            multiTags: false,
+            multiCounter: true,
+            theme: 'light', // light|dark
+            classNames: 'tail-default',
+            strings: {
+                all: "All",
+                none: "None",
+                placeholder: "Select an option...",
+                search: "Type in to search...",
+            }
+        };
+
+        // Merge default options with provided options
+        const opts = { ...defaultOptions, ...options };
+
+        // Extract options
+        const { multiTags, multiCounter, theme, classNames, strings } = opts;
+
+        //
+        const originalSelects = document.querySelectorAll(selector);
+
+        originalSelects.forEach((originalSelect) => {
+            // Hide original dropdown
+            originalSelect.style.display = "none";
+
+            // Create custom dropdown container
+            const customDropdown = document.createElement("div");
+            customDropdown.classList.add("tail-select");
+            customDropdown.classList.add(originalSelect.id);
+            customDropdown.classList.add(opts.classNames);
+            customDropdown.dataset.theme = `tail-theme--${opts.theme}`;
+
+            if (originalSelect.multiple) {
+                customDropdown.classList.add("tail--multiple");
+            } else {
+                customDropdown.classList.add("tail--single");
+            }
+
+            // Create search input
+            const searchInput = document.createElement("input");
+            searchInput.type = "text";
+            searchInput.classList.add('tail--search');
+            searchInput.placeholder = strings.placeholder || "Select an option...";
+
+            // Add focus event to change the placeholder
+            searchInput.addEventListener("focus", () => {
+                searchInput.placeholder = strings.search || "Type in to search...";
+            });
+
+            // Add blur event to revert the placeholder when not focused
+            searchInput.addEventListener("blur", () => {
+                searchInput.placeholder = strings.placeholder || "Select an option...";
+            });
+
+            // Add input event to change the placeholder
+            searchInput.addEventListener("input", () =>
+                filterOptions(originalSelect, searchInput)
+            );
+
+            // Create floating toolbar
+            const tailFloatingToolbar = document.createElement("div");
+            tailFloatingToolbar.classList.add("tail--toolbar");
+
+            // Create toggle-all checkbox
+            const toggleAllCheckbox = document.createElement("input");
+            toggleAllCheckbox.type = "checkbox";
+            toggleAllCheckbox.value = strings.all || "All";
+            toggleAllCheckbox.addEventListener("change", () =>
+                toggleAll(originalSelect, toggleAllCheckbox)
+            );
+
+            const toggleAllLabel = document.createElement("label");
+            toggleAllLabel.textContent = strings.all || "All";
+            toggleAllLabel.classList.add("all");
+            toggleAllLabel.appendChild(toggleAllCheckbox);
+
+            // Create uncheck-all button
+            const uncheckAllButton = document.createElement("button");
+            uncheckAllButton.type = 'button';
+            uncheckAllButton.textContent = strings.none || "None";
+            uncheckAllButton.classList.add("uncheck");
+            uncheckAllButton.addEventListener("click", () =>
+                uncheckAll(originalSelect)
+            );
+
+            if (opts.multiCounter) {
+                // Create counter
+                const counter = document.createElement("span");
+                counter.textContent = "0";
+                counter.classList.add("tail--counter");
+
+                customDropdown.appendChild(counter);
+            }
+
+            // Create nested list
+            const nestedList = document.createElement("div");
+            nestedList.classList.add("tail--nested-dropdown");
+            nestedList.style.display = "none"; // Initially hide the list
+
+            customDropdown.appendChild(searchInput);
+            customDropdown.appendChild(tailFloatingToolbar);
+            customDropdown.appendChild(nestedList);
+
+            tailFloatingToolbar.appendChild(toggleAllLabel);
+            tailFloatingToolbar.appendChild(uncheckAllButton);
+
+            // Insert custom dropdown after the original select
+            originalSelect.insertAdjacentElement("afterend", customDropdown);
+
+            // Create ul element for displaying selected options as pills
+            const selectedOptionsList = document.createElement("ul");
+            selectedOptionsList.classList.add("tail--selected-options-list");
+
+            if (opts.multiTags) {
+                if (originalSelect.multiple) {
+                    // Insert selectedOptionsList as the next sibling of customDropdown
+                    customDropdown.insertAdjacentElement(
+                        "afterend",
+                        selectedOptionsList
+                    );
+                }
+            }
+            //
+
+            function buildNestedList() {
+                const fragment = document.createDocumentFragment();
+
+                const optgroups = originalSelect.getElementsByTagName(
+                    "optgroup"
+                );
+
+                if (optgroups.length > 0) {
+                    for (let i = 0; i < optgroups.length; i++) {
+                        const optgroup = optgroups[i];
+                        const optgroupItem = document.createElement("div");
+                        optgroupItem.classList.add("tail--optgroup");
+
+                        // Create label for optgroup
+                        const optgroupLabel = document.createElement("label");
+
+                        // Create checkbox for optgroup
+                        const optgroupCheckbox = document.createElement(
+                            "input"
+                        );
+                        optgroupCheckbox.type = "checkbox";
+                        optgroupCheckbox.value = optgroup.label;
+                        optgroupCheckbox.addEventListener("change", () =>
+                            toggleOptgroup(optgroupCheckbox)
+                        );
+                        optgroupLabel.appendChild(optgroupCheckbox);
+
+                        // Label text for optgroup
+                        const optgroupLabelText = document.createElement(
+                            "span"
+                        );
+                        optgroupLabelText.textContent = optgroup.label;
+                        optgroupLabelText.classList.add("tail--optgroup-label");
+                        optgroupLabel.appendChild(optgroupLabelText);
+
+                        optgroupItem.appendChild(optgroupLabel);
+
+                        // Nested options list
+                        const nestedOptionsList = document.createElement("div");
+
+                        // Add ARIA attributes to the nested options list
+                        nestedOptionsList.setAttribute("role", "listbox");
+                        nestedOptionsList.classList.add("tail--nested-dropdown-list");
+                        const options = optgroup.getElementsByTagName("option");
+
+                        for (let j = 0; j < options.length; j++) {
+                            const option = options[j];
+                            const optionItem = document.createElement("div");
+                            optionItem.classList.add("tail--nested-dropdown-item");
+
+                            // Create checkbox for option
+                            const optionCheckbox = document.createElement(
+                                "input"
+                            );
+                            optionCheckbox.type = "checkbox";
+                            optionCheckbox.value = option.textContent;
+
+                            // Create label for option
+                            const optionLabel = document.createElement("label");
+
+                            // Label for option text
+                            const optionLabelText = document.createElement(
+                                "span"
+                            );
+                            optionLabelText.textContent = option.textContent;
+
+                            // Option description
+                            if (option.dataset.description) {
+                                optionLabelText.innerHTML += `<small>${option.dataset.description}</small>`;
+                            }
+
+                            // Check it
+                            if (option.selected && option.hasAttribute('selected')) {
+                                optionCheckbox.checked = true;
+                                updateCounter(originalSelect);
+                                updateCustomTextInput(originalSelect);
+                            }
+
+                            //
+
+                            optionLabel.appendChild(optionCheckbox);
+                            optionLabel.appendChild(optionLabelText);
+
+                            optionItem.appendChild(optionLabel);
+
+                            nestedOptionsList.appendChild(optionItem);
+                        }
+
+                        optgroupItem.appendChild(nestedOptionsList);
+                        nestedList.appendChild(optgroupItem);
+                    }
+                } else {
+                    const options = originalSelect.getElementsByTagName(
+                        "option"
+                    );
+
+                    for (let j = 0; j < options.length; j++) {
+                        const option = options[j];
+                        const optionItem = document.createElement("div");
+                        optionItem.classList.add("tail--nested-dropdown-item");
+
+                        // Create checkbox for option
+                        const optionCheckbox = document.createElement("input");
+                        optionCheckbox.type = "checkbox";
+                        optionCheckbox.value = option.textContent;
+
+                        // Create label for option
+                        const optionLabel = document.createElement("label");
+
+                        // Label for option text
+                        const optionLabelText = document.createElement("span");
+                        optionLabelText.textContent = option.textContent;
+
+                        // Option description
+                        if (option.dataset.description) {
+                            optionLabelText.innerHTML += `<small>${option.dataset.description}</small>`;
+                        }
+
+                        // Check it
+                        if (option.selected && option.hasAttribute('selected')) {
+                            optionCheckbox.checked = true;
+                            updateCounter(originalSelect);
+                            updateCustomTextInput(originalSelect);
+                        }
+                        //
+
+                        optionLabel.appendChild(optionCheckbox);
+                        optionLabel.appendChild(optionLabelText);
+
+                        optionItem.appendChild(optionLabel);
+
+                        nestedList.appendChild(optionItem);
+                    }
+                }
+
+                // Add ARIA attributes to the custom dropdown container
+                customDropdown.setAttribute("role", "combobox");
+                customDropdown.setAttribute("aria-haspopup", "true");
+                customDropdown.setAttribute("aria-expanded", "false");
+
+                attachOptionCheckboxListeners();
+
+                // Append the fragment to the DOM once all changes are made
+                nestedList.appendChild(fragment);
+            }
+
+            function toggleAll(originalSelect, toggleAllCheckbox) {
+                const isChecked = toggleAllCheckbox.checked;
+                const optionCheckboxes = nestedList.querySelectorAll(
+                    'input[type="checkbox"]'
+                );
+
+                optionCheckboxes.forEach((checkbox) => {
+                    checkbox.checked = isChecked;
+                    updateOriginalOptionState(originalSelect, checkbox);
+                });
+            }
+
+            function uncheckAll(originalSelect) {
+                const optionCheckboxes = nestedList.querySelectorAll(
+                    'input[type="checkbox"]'
+                );
+
+                optionCheckboxes.forEach((checkbox) => {
+                    checkbox.checked = false;
+                    updateOriginalOptionState(originalSelect, checkbox);
+                });
+
+                // Uncheck the original <select> options
+                const originalOptions = originalSelect.getElementsByTagName(
+                    "option"
+                );
+                for (let i = 0; i < originalOptions.length; i++) {
+                    originalOptions[i].selected = false;
+                }
+            }
+
+            function toggleOption(checkbox) {
+                if (originalSelect.multiple) {
+                    updateOriginalOptionState(originalSelect, checkbox);
+                } else {
+                    // For single-select, uncheck all and check the current one
+                    const optionCheckboxes = nestedList.querySelectorAll(
+                        '.tail--nested-dropdown-item input[type="checkbox"]'
+                    );
+                    optionCheckboxes.forEach((cb) => (cb.checked = false));
+                    checkbox.checked = true;
+                    updateOriginalOptionState(originalSelect, checkbox);
+                }
+            }
+
+            function toggleOptgroup(optgroupCheckbox) {
+                const isChecked = optgroupCheckbox.checked;
+                const nestedOptionsList = optgroupCheckbox
+                    .closest(".tail--optgroup")
+                    .querySelector(".tail--nested-dropdown-list");
+                const optionCheckboxes = nestedOptionsList.querySelectorAll(
+                    'input[type="checkbox"]'
+                );
+
+                optionCheckboxes.forEach((checkbox) => {
+                    checkbox.checked = isChecked;
+                    toggleOption(checkbox); // Call toggleOption for individual options
+                });
+
+                if (!originalSelect.multiple) {
+                    // For single-select, uncheck all other checkboxes in the same optgroup
+                    const customDropdown = originalSelect.closest(
+                        ".tail-select"
+                    );
+                    if (customDropdown) {
+                        const otherOptgroupCheckboxes = customDropdown.querySelectorAll(
+                            '.tail--nested-dropdown-item input[type="checkbox"]'
+                        );
+
+                        otherOptgroupCheckboxes.forEach((cb) => {
+                            if (cb !== optgroupCheckbox) {
+                                cb.checked = false;
+                                updateOriginalOptionState(originalSelect, cb);
+                            }
+                        });
+                    }
+                }
+
+                updateOriginalOptionState(originalSelect, optgroupCheckbox);
+            }
+
+            function attachOptionCheckboxListeners() {
+                const optionCheckboxes = nestedList.querySelectorAll(
+                    '.tail--nested-dropdown-item input[type="checkbox"]'
+                );
+
+                optionCheckboxes.forEach((checkbox) => {
+                    checkbox.addEventListener("change", () =>
+                        toggleOption(checkbox)
+                    );
+                });
+            }
+
+            function updateOriginalOptionState(
+                originalSelect,
+                checkbox,
+                customDropdown
+            ) {
+                const optionValue = checkbox.value;
+                const option = Array.from(originalSelect.options).find(
+                    (opt) =>
+                        opt.value === optionValue ||
+                        opt.textContent === optionValue
+                );
+
+                if (option) {
+                    if (checkbox.checked) {
+                        option.selected = true;
+                    } else {
+                        option.selected = false;
+                    }
+
+                    // Trigger change event for the original select
+                    const event = new Event("change", { bubbles: true });
+                    originalSelect.dispatchEvent(event);
+                }
+
+                // Get all selected options
+                const selectedOptions = Array.from(
+                    originalSelect.options
+                ).filter((opt) => opt.selected);
+
+                // Update the search input value with the selected option text
+                if (!originalSelect.multiple) {
+                    if (selectedOptions.length > 0 && searchInput) {
+                        searchInput.value = selectedOptions[0].textContent;
+                    } else {
+                        searchInput.value = ""; // Clear the search input if no option is selected
+                    }
+                } else {
+                    // Update searchInput value with selected options
+                    searchInput.value = selectedOptions
+                        .map((opt) => opt.textContent)
+                        .join(", ");
+                }
+
+                if (opts.multiTags) {
+                    if (originalSelect.multiple) {
+                        // Update the selected options list
+                        updateSelectedOptionsList(
+                            selectedOptionsList,
+                            selectedOptions
+                        );
+                    }
+                }
+
+                // Convert selected options to an array of values
+                const selectedValues = selectedOptions.map((opt) => opt.value);
+                // Log the selected values to the console
+                // console.log(selectedValues);
+
+                var options = originalSelect.options,
+                    count = 0;
+                for (var i = 0; i < options.length; i++) {
+                    if (options[i].selected) count++;
+                }
+
+                if (opts.multiCounter) {
+                    // Update the counter element
+                    let customId = originalSelect.id;
+                    if (customId) {
+                        let counterElement = document
+                            .querySelector(`.${customId}`)
+                            .querySelector(".tail--counter");
+
+                        if (counterElement) {
+                            counterElement.textContent = count;
+                        }
+                    }
+                }
+            }
+
+            function filterOptions(originalSelect, searchInput) {
+                const searchTerm = searchInput.value.trim().toLowerCase();
+                const optionItems = nestedList.querySelectorAll("div");
+
+                optionItems.forEach((optionItem) => {
+                    const optionCheckbox = optionItem.querySelector(
+                        'input[type="checkbox"]'
+                    );
+                    const optionLabel = optionCheckbox.nextElementSibling.textContent.toLowerCase();
+                    const optgroupItem = optionItem.closest("div");
+
+                    // Hide or show options based on the search term
+                    optionCheckbox.style.display = optionLabel.includes(
+                        searchTerm
+                    )
+                        ? "inline-block"
+                        : "none";
+                });
+
+                optionItems.forEach((optionItem) => {
+                    const optionCheckbox = optionItem.querySelector(
+                        'input[type="checkbox"]'
+                    );
+                    const optgroupItem = optionItem.closest("div");
+
+                    // Check if there are visible checkboxes within the nested list
+                    const nestedCheckboxes = optionItem.querySelectorAll(
+                        'div input[type="checkbox"]:not([style="display: none;"])'
+                    );
+                    const hasVisibleNestedCheckboxes =
+                        nestedCheckboxes.length > 0;
+
+                    // Show the parent li only if the checkbox or a visible nested checkbox is present
+                    optgroupItem.style.display =
+                        optionCheckbox.style.display === "inline-block" ||
+                            hasVisibleNestedCheckboxes
+                            ? "block"
+                            : "none";
+                });
+            }
+
+            function updateSelectedOptionsList(
+                selectedOptionsList,
+                selectedOptions
+            ) {
+                // Clear existing list items
+                selectedOptionsList.innerHTML = "";
+
+                // Create list items for each selected option
+                selectedOptions.forEach((opt) => {
+                    const listItem = document.createElement("li");
+                    listItem.textContent = opt.textContent;
+                    selectedOptionsList.appendChild(listItem);
+                });
+            }
+
+            function updateCustomTextInput(originalSelect) {
+                // Get all selected options
+                const selectedOptions = Array.from(originalSelect.options).filter((opt) => {
+                    // Check if the option is selected and has the 'selected' attribute
+                    return opt.selected && opt.hasAttribute('selected');
+                });
+
+
+                // Update the search input value with the selected option text
+                if (!originalSelect.multiple) {
+                    if (selectedOptions.length > 0 && searchInput) {
+                        searchInput.value = selectedOptions[0].textContent;
+                    } else {
+                        searchInput.value = ""; // Clear the search input if no option is selected
+                    }
+                } else {
+                    // Update searchInput value with selected options
+                    searchInput.value = selectedOptions
+                        .map((opt) => opt.textContent)
+                        .join(", ");
+                }
+
+                if (opts.multiTags) {
+                    if (originalSelect.multiple) {
+                        // Update the selected options list
+                        updateSelectedOptionsList(
+                            selectedOptionsList,
+                            selectedOptions
+                        );
+                    }
+                }
+            }
+
+
+            function updateCounter(originalSelect) {
+                // Get the custom ID for the current original select
+                let customId = originalSelect.id;
+
+                if (customId) {
+                    // Get the counter element
+                    let counterElement = document
+                        .querySelector(`.${customId}`)
+                        .querySelector(".tail--counter");
+
+                    if (counterElement) {
+                        // Get the count of selected options
+                        const count = Array.from(originalSelect.options).filter(
+                            (opt) => opt.selected
+                        ).length;
+
+                        // Update the counter element
+                        counterElement.textContent = count;
+                    }
+                }
+            }
+
+            function toggleDropdownVisibility() {
+                nestedList.style.display = "block";
+                customDropdown.setAttribute("aria-expanded", "true");
+            }
+
+            function hideDropdown() {
+                nestedList.style.display = "none";
+                customDropdown.setAttribute("aria-expanded", "false");
+            }
+
+            function handleClickOutside(event) {
+                if (!customDropdown.contains(event.target)) {
+                    hideDropdown();
+                }
+            }
+
+            function handleKeyDown(event) {
+                if (event.key === "Escape") {
+                    hideDropdown();
+                }
+            }
+
+            // Show the dropdown when the input field is focused
+            searchInput.addEventListener("focus", toggleDropdownVisibility);
+
+            // Hide the dropdown when clicking outside of it
+            document.addEventListener("click", handleClickOutside);
+
+            // Hide the dropdown when pressing the ESC key
+            document.addEventListener("keydown", handleKeyDown);
+
+            buildNestedList();
+        });
+    }
+};

data/vendor/assets/javascripts/tail-select-rails.min.js

@@ -0,0 +1,11 @@
+/**
+ *  tail.select - The vanilla JavaScript solution to make your <select> fields awesome!
+ *
+ *  @author     Ciprian Popescu <getbutterfly@gmail.com>
+ *  @version    1.0.2
+ *  @url        https://getbutterfly.com/tail-select/
+ *  @github     https://github.com/wolffe/tail.select.js
+ *  @license    MIT License
+ *  @copyright  Copyright 2020 - 2024 Ciprian Popescu <getbutterfly@gmail.com>
+ */
+const tail={select:function(selector,options={}){const defaultOptions={multiTags:!1,multiCounter:!0,theme:"light",classNames:"tail-default",strings:{all:"All",none:"None",placeholder:"Select an option...",search:"Type in to search..."}},opts={...defaultOptions,...options},{multiTags:multiTags,multiCounter:multiCounter,theme:theme,classNames:classNames,strings:strings}=opts,originalSelects=document.querySelectorAll(selector);originalSelects.forEach(originalSelect=>{originalSelect.style.display="none";const customDropdown=document.createElement("div");customDropdown.classList.add("tail-select"),customDropdown.classList.add(originalSelect.id),customDropdown.classList.add(opts.classNames),customDropdown.dataset.theme=`tail-theme--${opts.theme}`,originalSelect.multiple?customDropdown.classList.add("tail--multiple"):customDropdown.classList.add("tail--single");const searchInput=document.createElement("input");searchInput.type="text",searchInput.classList.add("tail--search"),searchInput.placeholder=strings.placeholder||"Select an option...",searchInput.addEventListener("focus",()=>{searchInput.placeholder=strings.search||"Type in to search..."}),searchInput.addEventListener("blur",()=>{searchInput.placeholder=strings.placeholder||"Select an option..."}),searchInput.addEventListener("input",()=>filterOptions(originalSelect,searchInput));const tailFloatingToolbar=document.createElement("div");tailFloatingToolbar.classList.add("tail--toolbar");const toggleAllCheckbox=document.createElement("input");toggleAllCheckbox.type="checkbox",toggleAllCheckbox.value=strings.all||"All",toggleAllCheckbox.addEventListener("change",()=>toggleAll(originalSelect,toggleAllCheckbox));const toggleAllLabel=document.createElement("label");toggleAllLabel.textContent=strings.all||"All",toggleAllLabel.classList.add("all"),toggleAllLabel.appendChild(toggleAllCheckbox);const uncheckAllButton=document.createElement("button");if(uncheckAllButton.type="button",uncheckAllButton.textContent=strings.none||"None",uncheckAllButton.classList.add("uncheck"),uncheckAllButton.addEventListener("click",()=>uncheckAll(originalSelect)),opts.multiCounter){const counter=document.createElement("span");counter.textContent="0",counter.classList.add("tail--counter"),customDropdown.appendChild(counter)}const nestedList=document.createElement("div");nestedList.classList.add("tail--nested-dropdown"),nestedList.style.display="none",customDropdown.appendChild(searchInput),customDropdown.appendChild(tailFloatingToolbar),customDropdown.appendChild(nestedList),tailFloatingToolbar.appendChild(toggleAllLabel),tailFloatingToolbar.appendChild(uncheckAllButton),originalSelect.insertAdjacentElement("afterend",customDropdown);const selectedOptionsList=document.createElement("ul");function buildNestedList(){const fragment=document.createDocumentFragment(),optgroups=originalSelect.getElementsByTagName("optgroup");if(optgroups.length>0)for(let i=0;i<optgroups.length;i++){const optgroup=optgroups[i],optgroupItem=document.createElement("div");optgroupItem.classList.add("tail--optgroup");const optgroupLabel=document.createElement("label"),optgroupCheckbox=document.createElement("input");optgroupCheckbox.type="checkbox",optgroupCheckbox.value=optgroup.label,optgroupCheckbox.addEventListener("change",()=>toggleOptgroup(optgroupCheckbox)),optgroupLabel.appendChild(optgroupCheckbox);const optgroupLabelText=document.createElement("span");optgroupLabelText.textContent=optgroup.label,optgroupLabelText.classList.add("tail--optgroup-label"),optgroupLabel.appendChild(optgroupLabelText),optgroupItem.appendChild(optgroupLabel);const nestedOptionsList=document.createElement("div");nestedOptionsList.setAttribute("role","listbox"),nestedOptionsList.classList.add("tail--nested-dropdown-list");const options=optgroup.getElementsByTagName("option");for(let j=0;j<options.length;j++){const option=options[j],optionItem=document.createElement("div");optionItem.classList.add("tail--nested-dropdown-item");const optionCheckbox=document.createElement("input");optionCheckbox.type="checkbox",optionCheckbox.value=option.textContent;const optionLabel=document.createElement("label"),optionLabelText=document.createElement("span");optionLabelText.textContent=option.textContent,option.dataset.description&&(optionLabelText.innerHTML+=`<small>${option.dataset.description}</small>`),option.selected&&option.hasAttribute("selected")&&(optionCheckbox.checked=!0,updateCounter(originalSelect),updateCustomTextInput(originalSelect)),optionLabel.appendChild(optionCheckbox),optionLabel.appendChild(optionLabelText),optionItem.appendChild(optionLabel),nestedOptionsList.appendChild(optionItem)}optgroupItem.appendChild(nestedOptionsList),nestedList.appendChild(optgroupItem)}else{const options=originalSelect.getElementsByTagName("option");for(let j=0;j<options.length;j++){const option=options[j],optionItem=document.createElement("div");optionItem.classList.add("tail--nested-dropdown-item");const optionCheckbox=document.createElement("input");optionCheckbox.type="checkbox",optionCheckbox.value=option.textContent;const optionLabel=document.createElement("label"),optionLabelText=document.createElement("span");optionLabelText.textContent=option.textContent,option.dataset.description&&(optionLabelText.innerHTML+=`<small>${option.dataset.description}</small>`),option.selected&&option.hasAttribute("selected")&&(optionCheckbox.checked=!0,updateCounter(originalSelect),updateCustomTextInput(originalSelect)),optionLabel.appendChild(optionCheckbox),optionLabel.appendChild(optionLabelText),optionItem.appendChild(optionLabel),nestedList.appendChild(optionItem)}}customDropdown.setAttribute("role","combobox"),customDropdown.setAttribute("aria-haspopup","true"),customDropdown.setAttribute("aria-expanded","false"),attachOptionCheckboxListeners(),nestedList.appendChild(fragment)}function toggleAll(originalSelect,toggleAllCheckbox){const isChecked=toggleAllCheckbox.checked,optionCheckboxes=nestedList.querySelectorAll('input[type="checkbox"]');optionCheckboxes.forEach(checkbox=>{checkbox.checked=isChecked,updateOriginalOptionState(originalSelect,checkbox)})}function uncheckAll(originalSelect){const optionCheckboxes=nestedList.querySelectorAll('input[type="checkbox"]');optionCheckboxes.forEach(checkbox=>{checkbox.checked=!1,updateOriginalOptionState(originalSelect,checkbox)});const originalOptions=originalSelect.getElementsByTagName("option");for(let i=0;i<originalOptions.length;i++)originalOptions[i].selected=!1}function toggleOption(checkbox){if(originalSelect.multiple)updateOriginalOptionState(originalSelect,checkbox);else{const optionCheckboxes=nestedList.querySelectorAll('.tail--nested-dropdown-item input[type="checkbox"]');optionCheckboxes.forEach(cb=>cb.checked=!1),checkbox.checked=!0,updateOriginalOptionState(originalSelect,checkbox)}}function toggleOptgroup(optgroupCheckbox){const isChecked=optgroupCheckbox.checked,nestedOptionsList=optgroupCheckbox.closest(".tail--optgroup").querySelector(".tail--nested-dropdown-list"),optionCheckboxes=nestedOptionsList.querySelectorAll('input[type="checkbox"]');if(optionCheckboxes.forEach(checkbox=>{checkbox.checked=isChecked,toggleOption(checkbox)}),!originalSelect.multiple){const customDropdown=originalSelect.closest(".tail-select");if(customDropdown){const otherOptgroupCheckboxes=customDropdown.querySelectorAll('.tail--nested-dropdown-item input[type="checkbox"]');otherOptgroupCheckboxes.forEach(cb=>{cb!==optgroupCheckbox&&(cb.checked=!1,updateOriginalOptionState(originalSelect,cb))})}}updateOriginalOptionState(originalSelect,optgroupCheckbox)}function attachOptionCheckboxListeners(){const optionCheckboxes=nestedList.querySelectorAll('.tail--nested-dropdown-item input[type="checkbox"]');optionCheckboxes.forEach(checkbox=>{checkbox.addEventListener("change",()=>toggleOption(checkbox))})}function updateOriginalOptionState(originalSelect,checkbox,customDropdown){const optionValue=checkbox.value,option=Array.from(originalSelect.options).find(opt=>opt.value===optionValue||opt.textContent===optionValue);if(option){checkbox.checked?option.selected=!0:option.selected=!1;const event=new Event("change",{bubbles:!0});originalSelect.dispatchEvent(event)}const selectedOptions=Array.from(originalSelect.options).filter(opt=>opt.selected);originalSelect.multiple?searchInput.value=selectedOptions.map(opt=>opt.textContent).join(", "):selectedOptions.length>0&&searchInput?searchInput.value=selectedOptions[0].textContent:searchInput.value="",opts.multiTags&&originalSelect.multiple&&updateSelectedOptionsList(selectedOptionsList,selectedOptions);const selectedValues=selectedOptions.map(opt=>opt.value);for(var options=originalSelect.options,count=0,i=0;i<options.length;i++)options[i].selected&&count++;if(opts.multiCounter){let customId=originalSelect.id;if(customId){let counterElement=document.querySelector(`.${customId}`).querySelector(".tail--counter");counterElement&&(counterElement.textContent=count)}}}function filterOptions(originalSelect,searchInput){const searchTerm=searchInput.value.trim().toLowerCase(),optionItems=nestedList.querySelectorAll("div");optionItems.forEach(optionItem=>{const optionCheckbox=optionItem.querySelector('input[type="checkbox"]'),optionLabel=optionCheckbox.nextElementSibling.textContent.toLowerCase(),optgroupItem=optionItem.closest("div");optionCheckbox.style.display=optionLabel.includes(searchTerm)?"inline-block":"none"}),optionItems.forEach(optionItem=>{const optionCheckbox=optionItem.querySelector('input[type="checkbox"]'),optgroupItem=optionItem.closest("div"),nestedCheckboxes=optionItem.querySelectorAll('div input[type="checkbox"]:not([style="display: none;"])'),hasVisibleNestedCheckboxes=nestedCheckboxes.length>0;optgroupItem.style.display="inline-block"===optionCheckbox.style.display||hasVisibleNestedCheckboxes?"block":"none"})}function updateSelectedOptionsList(selectedOptionsList,selectedOptions){selectedOptionsList.innerHTML="",selectedOptions.forEach(opt=>{const listItem=document.createElement("li");listItem.textContent=opt.textContent,selectedOptionsList.appendChild(listItem)})}function updateCustomTextInput(originalSelect){const selectedOptions=Array.from(originalSelect.options).filter(opt=>opt.selected&&opt.hasAttribute("selected"));originalSelect.multiple?searchInput.value=selectedOptions.map(opt=>opt.textContent).join(", "):selectedOptions.length>0&&searchInput?searchInput.value=selectedOptions[0].textContent:searchInput.value="",opts.multiTags&&originalSelect.multiple&&updateSelectedOptionsList(selectedOptionsList,selectedOptions)}function updateCounter(originalSelect){let customId=originalSelect.id;if(customId){let counterElement=document.querySelector(`.${customId}`).querySelector(".tail--counter");if(counterElement){const count=Array.from(originalSelect.options).filter(opt=>opt.selected).length;counterElement.textContent=count}}}function toggleDropdownVisibility(){nestedList.style.display="block",customDropdown.setAttribute("aria-expanded","true")}function hideDropdown(){nestedList.style.display="none",customDropdown.setAttribute("aria-expanded","false")}function handleClickOutside(event){customDropdown.contains(event.target)||hideDropdown()}function handleKeyDown(event){"Escape"===event.key&&hideDropdown()}selectedOptionsList.classList.add("tail--selected-options-list"),opts.multiTags&&originalSelect.multiple&&customDropdown.insertAdjacentElement("afterend",selectedOptionsList),searchInput.addEventListener("focus",toggleDropdownVisibility),document.addEventListener("click",handleClickOutside),document.addEventListener("keydown",handleKeyDown),buildNestedList()})}};

data/vendor/assets/stylesheets/tail-select-rails.css

@@ -0,0 +1,254 @@
+:root {
+	--option-size: 14px;
+
+	--tail-select--text: #000000;
+	--tail-select--meta: #d1d5db;
+	--tail-select--muted: #b3b3b3;
+	--tail-select--background: #ffffff;
+
+	--tail-select--accent: #3742fa;
+
+	--tail-select--selection: rgba(0, 0, 0, 0.05);
+	--tail-select--selection-text: #ffffff;
+	--tail-select--selection-muted: rgb(147 197 253 / 1);
+}
+
+[data-theme="tail-theme--light"] {
+	color-scheme: light;
+}
+
+[data-theme="tail-theme--dark"] {
+	color-scheme: dark;
+
+	--tail-select--text: #ffffff;
+	--tail-select--meta: #30343b;
+	--tail-select--muted: #4d4d4d;
+	--tail-select--background: #191b1f;
+
+	--tail-select--accent: #3742fa;
+
+	--tail-select--selection: rgba(0, 0, 0, 0.15);
+	--tail-select--selection-text: #ffffff;
+	--tail-select--selection-muted: #353b48;
+}
+
+.tail-select * {
+	box-sizing: border-box;
+}
+
+.tail-select,
+.tail-select.tail--single,
+.tail-select.tail--multiple {
+	position: relative;
+	display: flex;
+	align-items: center;
+	user-select: none;
+
+	width: fit-content;
+	height: fit-content;
+	font-size: 14px;
+	line-height: normal;
+	font-family: inherit;
+
+	cursor: default;
+	color: var(--tail-select--text);
+	padding: 6px 6px 6px 6px;
+	text-align: left;
+	background-color: var(--tail-select--background);
+	border: 1px solid var(--tail-select--meta);
+	border-radius: 3px;
+	box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.05);
+
+	transition: border 0.4s ease-out;
+}
+.tail-select:hover {
+	border-color: var(--tail-select--accent);
+}
+
+.tail-select .tail--search,
+.tail-select input[type="text"].tail--search {
+	font-family: inherit;
+	color: var(--tail-select--text);
+	border: 0 none;
+	border-radius: initial;
+	border-width: 0;
+	border-color: transparent;
+	background-color: transparent;
+	display: inline-block;
+	width: 100%;
+	outline: 0;
+	font-size: 13px;
+	margin: 0;
+	padding: 2px 72px 2px 2px;
+	cursor: text;
+}
+.tail-select .tail--search:hover,
+.tail-select input[type="text"].tail--search:hover {
+	border: 0 none;
+}
+
+.tail-select.tail--single .tail--search,
+.tail-select.tail--single input[type="text"].tail--search {
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23808080' d='M5.7 9.71a1 1 0 0 0 0 1.41l4.9 4.9a2 2 0 0 0 2.83 0l4.89-4.9a1 1 0 1 0-1.42-1.41l-4.18 4.18a1 1 0 0 1-1.42 0L7.12 9.71a1 1 0 0 0-1.41 0Z'/%3E%3C/svg%3E");
+	background-position: 100%, 100% 0;
+	background-size: 1.5em 1.5em;
+	background-repeat: no-repeat;
+}
+.tail-select.tail--single .tail--search:focus,
+.tail-select.tail--single input[type="text"].tail--search:focus {
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%23808080' d='M18.3 15.29a1 1 0 0 0 0-1.41l-4.9-4.9a2 2 0 0 0-2.83 0l-4.89 4.9a1 1 0 1 0 1.42 1.41l4.18-4.18a1 1 0 0 1 1.42 0l4.18 4.18a1 1 0 0 0 1.41 0Z'/%3E%3C/svg%3E");
+}
+.tail-select.tail--multiple .tail--search,
+.tail-select.tail--multiple input[type="text"].tail--search {
+	width: calc(100% - 32px);
+}
+
+.tail-select .tail--toolbar {
+	position: absolute;
+	top: 50%;
+	right: 6px;
+	transform: translateY(-50%);
+}
+
+.tail-select .tail--counter {
+	font-size: 12px;
+	text-align: center;
+	color: var(--tail-select--text);
+	font-weight: 700;
+	width: 24px;
+	display: inline-block;
+	border-right: 1px solid var(--tail-select--muted);
+	padding: 0 0px 0 0;
+	margin: 0 8px 0 0;
+}
+
+.tail-select label.all,
+.tail-select button.uncheck {
+	width: auto;
+	height: auto;
+	margin: 0 2px;
+	padding: 2px 6px;
+	display: inline-block;
+	font-family: inherit;
+	font-size: 10px;
+	line-height: 14px;
+	text-shadow: none;
+	letter-spacing: 0;
+	text-transform: none;
+	vertical-align: top;
+	border-width: 1px;
+	border-style: solid;
+	border-color: transparent;
+	border-radius: 3px;
+	box-shadow: none;
+
+	color: var(--tail-select--text);
+	border-color: var(--tail-select--meta);
+	background-color: transparent;
+	backdrop-filter: blur(2px);
+}
+.tail-select label.all input[type="checkbox"] {
+	display: none;
+}
+.tail-select label.all:hover,
+.tail-select button.uncheck:hover {
+	color: var(--tail-select--text);
+	border-color: var(--tail-select--text);
+}
+
+
+.tail-select > .tail--nested-dropdown {
+	position: absolute;
+	top: 100%;
+	left: 0;
+	z-index: 1;
+	background-color: var(--tail-select--background);
+	border: 1px solid var(--tail-select--meta);
+	border-radius: 3px;
+	box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.05);
+
+	padding: 8px 0;
+	margin: 6px 0 0 0;
+	max-height: 200px;
+	overflow: auto;
+	width: 100%;
+}
+
+.tail-select .tail--optgroup {
+	padding: 0;
+	cursor: default;
+}
+.tail-select .tail--nested-dropdown-list {
+	padding: 0;
+}
+.tail-select .tail--nested-dropdown label {
+	display: flex;
+	padding: 6px 12px;
+	align-items: start;
+}
+.tail-select .tail--nested-dropdown label input[type="checkbox"] {
+	display: block;
+}
+
+.tail-select .tail--nested-dropdown-item {
+	color: var(--tail-select--text);
+	list-style: none;
+	padding: 0;
+	display: block;
+	cursor: default;
+}
+.tail-select .tail--nested-dropdown-item span {
+	font-size: 14px;
+	line-height: 1.5;
+}
+.tail-select .tail--nested-dropdown-item span small {
+	display: block;
+	font-size: 12px;
+}
+
+.tail-select .tail--nested-dropdown-item:hover {
+	background-color: var(--tail-select--selection);
+}
+
+
+.tail--optgroup-label {
+	font-weight: 700;
+}
+
+.tail-select input[type="checkbox"] {
+	height: var(--option-size);
+	width: var(--option-size);
+	padding: 0;
+	margin: 4px 0.5rem 0 0;
+
+	accent-color: #3742fa;
+}
+
+.tail-select input[type="checkbox"]:focus {
+	outline: 3px solid rgb(0 87 255 / 50%);
+	outline: 3px solid rgb(147 197 253 / 1);
+	outline-offset: 0px;
+}
+
+.tail-select.tail--single .tail--counter,
+.tail--single .tail--optgroup > label > input[type="checkbox"],
+.tail--single .tail--toolbar {
+	display: none;
+}
+
+.tail--selected-options-list {
+	padding: 0;
+	margin: 0;
+	display: flex;
+	gap: 2px;
+}
+.tail--selected-options-list li {
+	list-style: none;
+	padding: 8px 12px;
+	font-size: 13px;
+	line-height: 1;
+	margin: 0;
+	border-radius: 48px;
+	background-color: var(--tail-select--accent);
+	color: var(--tail-select--selection-text);
+}

metadata

@@ -0,0 +1,104 @@
+--- !ruby/object:Gem::Specification
+name: tail-select-rails
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Gajendra Jena
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2024-06-03 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '6.1'
+- !ruby/object:Gem::Dependency
+  name: jquery-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sass-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: uglifier
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: Rails gem for easy tail-select-rails (v1.0.2) integration. See https://getbutterfly.com/tail-select/
+  for more information on how to use tail.select
+email: gaju.mca@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- Readme.md
+- lib/tail_select_rails.rb
+- vendor/assets/javascripts/tail-select-rails.js
+- vendor/assets/javascripts/tail-select-rails.min.js
+- vendor/assets/stylesheets/tail-select-rails.css
+homepage: http://github.com/gajendrajena/tail-select-rails
+licenses: []
+metadata: {}
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.2.3
+signing_key:
+specification_version: 4
+summary: Rails gem for easy tail-select-rails integration.
+test_files: []