initial commit

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 InCuca Tecnologia
+
+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.

README.md

@@ -0,0 +1,8 @@
+# enfold-plugin-template
+Enfold component plugin template
+
+## Usage
+
+1. Put these files into `wp-content/plugins/ic-hello` folder
+2. Rename all ic-hello and ic-hello-msg terms to your plugin and shortcode name
+3. Enfold shortcodes must be located in `shortcodes` folder

ic-enfold-section-drp.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Plugin Name:     Enfold Section Tabs with Dropdown
+ * Plugin URI:      https://incuca.net
+ * Description:     Turns Tabs of Section Tabs into a dropdown by use of dropdown-on-mobile and dropdown-on-desktop classes
+ * Author:          INCUCA
+ * Author URI:      https://incuca.net
+ * Text Domain:     ic-enfold-section-drp
+ * Version:         0.1.0
+ *
+ * @package         Ic_Enfold
+ */
+
+function ic_enfold_section_drp_scripts() {
+    $plugin_dir = plugin_dir_url(__FILE__);
+    wp_enqueue_script( 'ic-enfold-section-drp' , $plugin_dir.'main.js' , array(), false );
+}
+add_action('wp_enqueue_scripts', 'ic_enfold_section_drp_scripts');

index.php

@@ -0,0 +1,3 @@
+
+<?php
+// Silence is golden.

main.js

@@ -0,0 +1,90 @@
+function createResizeHandler(tabSection) {
+    const drp = tabSection.querySelector('.av-tab-section-dropdown-container');
+    const tabs = tabSection.querySelector('.av-tab-section-tab-title-container');
+    const alwaysDropdown = tabSection.classList.contains('dropdown-on-desktop');
+    function setDropdown() {
+        drp.style.display = 'block';
+        tabs.style.display = 'none';
+    }
+
+    function setTabs() {
+        drp.style.display = 'none';
+        tabs.style.display = 'block';
+    }
+
+    return function () {
+        if (alwaysDropdown || window.matchMedia('(max-width: 768px)').matches) {
+            setDropdown();
+        } else {
+            setTabs();
+        }
+    }
+}
+
+function addResizeListeners(tabSection) {
+    const resizeHandler = createResizeHandler(tabSection);
+    window.addEventListener('resize', resizeHandler);
+    resizeHandler();
+}
+
+function addDropdownListeners(tabSection) {
+    const select = tabSection.querySelector('.av-tab-section-dropdown-container select');
+    select.addEventListener('change', function (event) {
+        const [value] = event.target.value;
+        const query = '.av-section-tab-title[data-av-tab-section-title="' + value + '"]';
+        const targetTab = tabSection.querySelector(query);
+        targetTab.click();
+    })
+}
+
+function addTabsListeners(tabSection) {
+    const tabs = tabSection.querySelectorAll('.av-section-tab-title');
+    function addTabListener(tab) {
+        const select = tabSection.querySelector('.av-tab-section-dropdown-container select');
+        const value = tab.dataset.avTabSectionTitle;
+        const query = 'option[value="' + value + '"]';
+        const targetOption = select.querySelector(query);
+        const foundIndex = Array.prototype.indexOf.call(select.childNodes, targetOption);
+        if (foundIndex < 0) throw Error('not found target option');
+        const observer = new MutationObserver(function () {
+            if (tab.classList.contains('av-active-tab-title')) {
+                select.selectedIndex = foundIndex;
+            }
+        });
+        observer.observe(tab, { attributes: true });
+    }
+    Array.prototype.forEach.call(tabs, addTabListener);
+}
+
+function attachDropdown(tabSection) {
+    const drp = document.createElement('div');
+    drp.classList.add('av-tab-section-dropdown-container');
+
+    function attachOption(tab) {
+        const option = document.createElement('option');
+        option.value = tab.dataset.avTabSectionTitle;
+        option.innerHTML = tab.querySelector('.av-inner-tab-title').innerText;
+        if (tab.classList.contains('av-active-tab-title')) {
+            option.setAttribute('selected', 'selected');
+        }
+        select.appendChild(option);
+    }
+    const tabs = tabSection.querySelectorAll('.av-section-tab-title');
+    const select = document.createElement('select');
+    Array.prototype.forEach.call(tabs, attachOption);
+    drp.appendChild(select);
+
+    const outerCont = tabSection.querySelector('.av-tab-section-outer-container');
+    const innerCont = outerCont.querySelector('.av-tab-section-inner-container');
+    outerCont.insertBefore(drp, innerCont);
+}
+
+/* This script transorms .av-tab-section tabs into dropdown selector */
+/* add .dropdown-on-mobile or dropdown-on-desktop class to enable this behavior */
+document.addEventListener('DOMContentLoaded', function () {
+    var tabSection = document.querySelectorAll('.dropdown-on-mobile, .dropdown-on-desktop');
+    Array.prototype.forEach.call(tabSection, attachDropdown);
+    Array.prototype.forEach.call(tabSection, addDropdownListeners);
+    Array.prototype.forEach.call(tabSection, addTabsListeners);
+    Array.prototype.forEach.call(tabSection, addResizeListeners);
+});