sibu 0.7.3 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 667c4b9cf1f4ef1bd0e3a7713df142d23bf429d4
-  data.tar.gz: 481f1264b52f5a2591035ba55a2239988f293815
+  metadata.gz: d1e386778852e44a0751ec065d259a3d02423e04
+  data.tar.gz: 63734db5d138f1a863428a8990c8abc901c6dbce
 SHA512:
-  metadata.gz: 850463b883dfd41aa0b048cfaccca4af385f6ef2f725189e15ecfb047e10da872442b19f4a14c9545549cddc1dbc6a7d6c7ed922883fa7b18fd60739c7d1e0ec
-  data.tar.gz: e702dda5a7578bc2655c568b6a4602ef43af759293de983e53a44b1cf21fb0e879030369ff7a9c3e0b09d0ff2ef00ef9c867da4229b0b0265e6653c414d14fb0
+  metadata.gz: e82342f402b119115ed0fa6e76c2c1ba819847022ccb0ab45e890d8ddcc171b792b95287b99004b4b2c02122f152e1210f85677dff984e922beb4144b8c5a8cc
+  data.tar.gz: 168e70cca77e87181e289a5e624bfe60eadca752d35d95c80f31b66b4d68af3ba89409822fe1caadf1182e7af1ac3f767491051b27de47fada7ae950a08af645

data/app/assets/javascripts/sibu/sibu.js.erb

@@ -2,6 +2,7 @@
 //= require jquery_ujs
 //= require sibu/common
 //= require ../quill/quill
+//= require ../tabs/van11y-accessible-tab-panel-aria
 //= require_self
 
 var Inline = Quill.import('blots/inline');
@@ -116,7 +117,6 @@ function initCustomCenter() {
         var rect = e.target.getBoundingClientRect();
         var x = e.clientX - rect.left;
         var y = e.clientY - rect.top;
-        console.log('x : ' + x + ' -  y : ' + y);
         centerPos.css("top", y + "px");
         centerPos.css("left", x + "px");
         $("#element_class").val(`posx_${Math.floor((x / rect.width) * 10) * 10} posy_${Math.floor((y / rect.height) * 10) * 10}`);
@@ -138,32 +138,6 @@ function displayCurrentCenter(img, centerPos) {
     centerPos.show();
 }
 
-
-//function initCropper(imgId) {
-//    var wrapper = $(".sibu_crop").first();
-//    var srcImg = $("#content_panel").find(".sb-editing img[data-id='" + imgId + "']").first();
-//    var srcContainer = srcImg.parent();
-//    var ratio = parseFloat(srcContainer.css("width")) / parseFloat(wrapper.css("width"));
-//    var wrapperHeight = Math.min(320, parseFloat(srcContainer.css("height")) / ratio) + "px";
-//    wrapper.css("height", wrapperHeight);
-//    return new Cropper(wrapper.find("img")[0], {
-//        crop: function(event) {
-//            var data = event.detail;
-//            var cropper = this.cropper;
-//            var imageData = cropper.getImageData();
-//            var previewWidth = parseFloat(srcContainer.css("width"));
-//            var imageScaledRatio = data.width / previewWidth;
-//            var width = imageData.naturalWidth / imageScaledRatio + 'px';
-//            var height = imageData.naturalHeight / imageScaledRatio + 'px';
-//            var marginLeft = -data.x / imageScaledRatio + 'px';
-//            var marginTop = -data.y / imageScaledRatio + 'px';
-//            // console.log("crop detail : " + JSON.stringify(data));
-//            // console.log('img data : ' + JSON.stringify(imageData));
-//            $("#element_style").val("width: " + width + "; height: " + height + "; margin-left: " + marginLeft + "; margin-top: " + marginTop +"; max-width: none; max-height: none;");
-//        }
-//    });
-//}
-
 function refreshAfterEdit(reload, sectionId) {
     var baseUrl = window.location.href.split('?')[0];
     if (reload) {
@@ -175,4 +149,8 @@ function refreshAfterEdit(reload, sectionId) {
     } else {
         window.history.replaceState(null, null, window.location.pathname);
     }
+}
+
+function initSectionsPanel() {
+
 }

data/app/assets/javascripts/tabs/van11y-accessible-tab-panel-aria.js

@@ -0,0 +1,466 @@
+/*
+ * ES2015 accessible tabs panel system, using ARIA
+ * Website: https://van11y.net/accessible-tab-panel/
+ * License MIT: https://github.com/nico3333fr/van11y-accessible-tab-panel-aria/blob/master/LICENSE
+ */
+'use strict';
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+(function (doc) {
+
+    'use strict';
+
+    var TABS_JS = 'js-tabs';
+    var TABS_JS_LIST = 'js-tablist';
+    var TABS_JS_LISTITEM = 'js-tablist__item';
+    var TABS_JS_LISTLINK = 'js-tablist__link';
+    var TABS_JS_CONTENT = 'js-tabcontent';
+    var TABS_JS_LINK_TO_TAB = 'js-link-to-tab';
+
+    var TABS_DATA_PREFIX_CLASS = 'data-tabs-prefix-class';
+    var TABS_DATA_HX = 'data-hx';
+    var TABS_DATA_GENERATED_HX_CLASS = 'data-tabs-generated-hx-class';
+    var TABS_DATA_EXISTING_HX = 'data-existing-hx';
+
+    var TABS_DATA_SELECTED_TAB = 'data-selected';
+
+    var TABS_PREFIX_IDS = 'label_';
+
+    var TABS_STYLE = 'tabs';
+    var TABS_LIST_STYLE = 'tabs__list';
+    var TABS_LISTITEM_STYLE = 'tabs__item';
+    var TABS_LINK_STYLE = 'tabs__link';
+    var TABS_CONTENT_STYLE = 'tabs__content';
+
+    var TABS_HX_DEFAULT_CLASS = 'invisible';
+
+    var TABS_ROLE_TABLIST = 'tablist';
+    var TABS_ROLE_TAB = 'tab';
+    var TABS_ROLE_TABPANEL = 'tabpanel';
+    var TABS_ROLE_PRESENTATION = 'presentation';
+
+    var ATTR_ROLE = 'role';
+    var ATTR_LABELLEDBY = 'aria-labelledby';
+    var ATTR_HIDDEN = 'aria-hidden';
+    var ATTR_CONTROLS = 'aria-controls';
+    var ATTR_SELECTED = 'aria-selected';
+
+    var DELAY_HASH_UPDATE = 1000;
+
+    var hash = window.location.hash.replace('#', '');
+
+    //const IS_OPENED_CLASS = 'is-opened';
+
+    var findById = function findById(id) {
+        return doc.getElementById(id);
+    };
+
+    var addClass = function addClass(el, className) {
+        if (el.classList) {
+            el.classList.add(className); // IE 10+
+        } else {
+            el.className += ' ' + className; // IE 8+
+        }
+    };
+
+    /*const removeClass = (el, className) => {
+          if (el.classList) {
+            el.classList.remove(className); // IE 10+
+          }
+          else {
+               el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); // IE 8+
+               }
+          }*/
+
+    var hasClass = function hasClass(el, className) {
+        if (el.classList) {
+            return el.classList.contains(className); // IE 10+
+        } else {
+            return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); // IE 8+ ?
+        }
+    };
+
+    var setAttributes = function setAttributes(node, attrs) {
+        Object.keys(attrs).forEach(function (attribute) {
+            node.setAttribute(attribute, attrs[attribute]);
+        });
+    };
+    var unSelectLinks = function unSelectLinks(elts) {
+        elts.forEach(function (link_node) {
+            var _setAttributes;
+
+            setAttributes(link_node, (_setAttributes = {}, _defineProperty(_setAttributes, ATTR_SELECTED, 'false'), _defineProperty(_setAttributes, 'tabindex', '-1'), _setAttributes));
+        });
+    };
+    var unSelectContents = function unSelectContents(elts) {
+        elts.forEach(function (content_node) {
+            content_node.setAttribute(ATTR_HIDDEN, true);
+        });
+    };
+
+    var selectLink = function selectLink(el) {
+        var _setAttributes2;
+
+        var destination = findById(el.getAttribute(ATTR_CONTROLS));
+        setAttributes(el, (_setAttributes2 = {}, _defineProperty(_setAttributes2, ATTR_SELECTED, 'true'), _defineProperty(_setAttributes2, 'tabindex', '0'), _setAttributes2));
+        destination.removeAttribute(ATTR_HIDDEN);
+        setTimeout(function () {
+            el.focus();
+        }, 0);
+        // Note : removed to prevent conflicts when editing sibu elements
+        // setTimeout(function () {
+        //     history.pushState(null, null, location.pathname + location.search + '#' + el.getAttribute(ATTR_CONTROLS));
+        // }, DELAY_HASH_UPDATE);
+    };
+
+    var selectLinkInList = function selectLinkInList(itemsList, linkList, contentList, param) {
+        var indice_trouve = undefined;
+
+        itemsList.forEach(function (itemNode, index) {
+            if (itemNode.querySelector('.' + TABS_JS_LISTLINK).getAttribute(ATTR_SELECTED) === 'true') {
+                indice_trouve = index;
+            }
+        });
+        unSelectLinks(linkList);
+        unSelectContents(contentList);
+        if (param === 'next') {
+            selectLink(linkList[indice_trouve + 1]);
+            setTimeout(function () {
+                linkList[indice_trouve + 1].focus();
+            }, 0);
+        }
+        if (param === 'prev') {
+            selectLink(linkList[indice_trouve - 1]);
+            setTimeout(function () {
+                linkList[indice_trouve - 1].focus();
+            }, 0);
+        }
+    };
+
+    /* gets an element el, search if it is child of parent class, returns id of the parent */
+    var searchParent = function searchParent(el, parentClass) {
+        var found = false;
+        var parentElement = el.parentNode;
+        while (parentElement && found === false) {
+            if (hasClass(parentElement, parentClass) === true) {
+                found = true;
+            } else {
+                parentElement = parentElement.parentNode;
+            }
+        }
+        if (found === true) {
+            return parentElement.getAttribute('id');
+        } else {
+            return '';
+        }
+    };
+
+    /** Find all tabs inside a container
+     * @param  {Node} node Default document
+     * @return {Array}
+     */
+    var $listTabs = function $listTabs() {
+        var node = arguments.length <= 0 || arguments[0] === undefined ? doc : arguments[0];
+        return [].slice.call(node.querySelectorAll('.' + TABS_JS));
+    };
+
+    /**
+     * Build tooltips for a container
+     * @param  {Node} node
+     */
+    var attach = function attach(node) {
+
+        $listTabs(node).forEach(function (tabs_node) {
+
+            var iLisible = Math.random().toString(32).slice(2, 12);
+            var prefixClassName = tabs_node.hasAttribute(TABS_DATA_PREFIX_CLASS) === true ? tabs_node.getAttribute(TABS_DATA_PREFIX_CLASS) + '-' : '';
+            var hx = tabs_node.hasAttribute(TABS_DATA_HX) === true ? tabs_node.getAttribute(TABS_DATA_HX) : '';
+            var hxGeneratedClass = tabs_node.hasAttribute(TABS_DATA_GENERATED_HX_CLASS) === true ? tabs_node.getAttribute(TABS_DATA_GENERATED_HX_CLASS) : TABS_HX_DEFAULT_CLASS;
+            var existingHx = tabs_node.hasAttribute(TABS_DATA_EXISTING_HX) === true ? tabs_node.getAttribute(TABS_DATA_EXISTING_HX) : '';
+            var $tabList = [].slice.call(tabs_node.querySelectorAll('.' + TABS_JS_LIST));
+            var $tabListItems = [].slice.call(tabs_node.querySelectorAll('.' + TABS_JS_LISTITEM));
+            var $tabListLinks = [].slice.call(tabs_node.querySelectorAll('.' + TABS_JS_LISTLINK));
+            var $tabListPanels = [].slice.call(tabs_node.querySelectorAll('.' + TABS_JS_CONTENT));
+            var noTabSelected = true;
+
+            // container
+            addClass(tabs_node, prefixClassName + TABS_STYLE);
+            tabs_node.setAttribute('id', TABS_STYLE + iLisible);
+
+            // ul
+            $tabList.forEach(function (tabList) {
+                var _setAttributes3;
+
+                addClass(tabList, prefixClassName + TABS_LIST_STYLE);
+                setAttributes(tabList, (_setAttributes3 = {}, _defineProperty(_setAttributes3, ATTR_ROLE, TABS_ROLE_TABLIST), _defineProperty(_setAttributes3, 'id', TABS_LIST_STYLE + iLisible), _setAttributes3));
+            });
+            // li
+            $tabListItems.forEach(function (tabListItem, index) {
+                var _setAttributes4;
+
+                addClass(tabListItem, prefixClassName + TABS_LISTITEM_STYLE);
+                setAttributes(tabListItem, (_setAttributes4 = {}, _defineProperty(_setAttributes4, ATTR_ROLE, TABS_ROLE_PRESENTATION), _defineProperty(_setAttributes4, 'id', TABS_LISTITEM_STYLE + iLisible + '-' + (index + 1)), _setAttributes4));
+            });
+            // a
+            $tabListLinks.forEach(function (tabListLink) {
+                var _setAttributes5, _setAttributes6;
+
+                var idHref = tabListLink.getAttribute("href").replace('#', '');
+                var panelControlled = findById(idHref);
+                var linkText = tabListLink.innerText;
+                var panelSelected = tabListLink.hasAttribute(TABS_DATA_SELECTED_TAB) === true;
+
+                addClass(tabListLink, prefixClassName + TABS_LINK_STYLE);
+                setAttributes(tabListLink, (_setAttributes5 = {
+                    'id': TABS_PREFIX_IDS + idHref
+                }, _defineProperty(_setAttributes5, ATTR_ROLE, TABS_ROLE_TAB), _defineProperty(_setAttributes5, ATTR_CONTROLS, idHref), _defineProperty(_setAttributes5, 'tabindex', '-1'), _defineProperty(_setAttributes5, ATTR_SELECTED, 'false'), _setAttributes5));
+
+                // panel controlled
+                setAttributes(panelControlled, (_setAttributes6 = {}, _defineProperty(_setAttributes6, ATTR_HIDDEN, 'true'), _defineProperty(_setAttributes6, ATTR_ROLE, TABS_ROLE_TABPANEL), _defineProperty(_setAttributes6, ATTR_LABELLEDBY, TABS_PREFIX_IDS + idHref), _setAttributes6));
+                addClass(panelControlled, prefixClassName + TABS_CONTENT_STYLE);
+
+                // if already selected
+                if (panelSelected && noTabSelected) {
+                    noTabSelected = false;
+                    setAttributes(tabListLink, _defineProperty({
+                        'tabindex': '0'
+                    }, ATTR_SELECTED, 'true'));
+                    setAttributes(panelControlled, _defineProperty({}, ATTR_HIDDEN, 'false'));
+                }
+
+                // hx
+                if (hx !== '') {
+                    var hx_node = document.createElement(hx);
+                    hx_node.setAttribute('class', hxGeneratedClass);
+                    hx_node.setAttribute('tabindex', '0');
+                    hx_node.innerHTML = linkText;
+                    panelControlled.insertBefore(hx_node, panelControlled.firstChild);
+                }
+                // existingHx
+
+                if (existingHx !== '') {
+                    var $hx_existing = [].slice.call(panelControlled.querySelectorAll(existingHx + ':first-child'));
+                    $hx_existing.forEach(function (hx_item) {
+                        hx_item.setAttribute('tabindex', '0');
+                    });
+                }
+
+                tabListLink.removeAttribute('href');
+            });
+
+            if (hash !== '') {
+                var nodeHashed = findById(hash);
+                if (nodeHashed !== null) {
+                    // just in case of an dumb error
+                    // search if hash is current tabs_node
+                    if (tabs_node.querySelector('#' + hash) !== null) {
+                        // search if hash is ON tabs
+                        if (hasClass(nodeHashed, TABS_JS_CONTENT) === true) {
+                            // unselect others
+                            unSelectLinks($tabListLinks);
+                            unSelectContents($tabListPanels);
+                            // select this one
+                            nodeHashed.removeAttribute(ATTR_HIDDEN);
+                            var linkHashed = findById(TABS_PREFIX_IDS + hash);
+                            setAttributes(linkHashed, _defineProperty({
+                                'tabindex': '0'
+                            }, ATTR_SELECTED, 'true'));
+                            noTabSelected = false;
+                        } else {
+                            // search if hash is IN tabs
+                            var panelParentId = searchParent(nodeHashed, TABS_JS_CONTENT);
+                            if (panelParentId !== '') {
+                                // unselect others
+                                unSelectLinks($tabListLinks);
+                                unSelectContents($tabListPanels);
+                                // select this one
+                                var panelParent = findById(panelParentId);
+                                panelParent.removeAttribute(ATTR_HIDDEN);
+                                var linkParent = findById(TABS_PREFIX_IDS + panelParentId);
+                                setAttributes(linkParent, _defineProperty({
+                                    'tabindex': '0'
+                                }, ATTR_SELECTED, 'true'));
+                                noTabSelected = false;
+                            }
+                        }
+                    }
+                }
+            }
+
+            // if no selected => select first
+            if (noTabSelected === true) {
+                setAttributes($tabListLinks[0], _defineProperty({
+                    'tabindex': '0'
+                }, ATTR_SELECTED, 'true'));
+                var panelFirst = findById($tabListLinks[0].getAttribute(ATTR_CONTROLS));
+                panelFirst.removeAttribute(ATTR_HIDDEN);
+            }
+        });
+    };
+
+    /* listeners */
+    var bindListeners = function() {
+        ['click', 'keydown'].forEach(function (eventName) {
+            //let isCtrl = false;
+
+            doc.body.addEventListener(eventName, function (e) {
+
+                // click on a tab link or on something IN a tab link
+                var parentLink = searchParent(e.target, TABS_JS_LISTLINK);
+                if ((hasClass(e.target, TABS_JS_LISTLINK) === true || parentLink !== '') && eventName === 'click') {
+                    var linkSelected = hasClass(e.target, TABS_JS_LISTLINK) === true ? e.target : findById(parentLink);
+                    var parentTabId = searchParent(e.target, TABS_JS);
+                    var parentTab = findById(parentTabId);
+                    //let $parentListItems = [].slice.call(parentTab.querySelectorAll('.' + TABS_JS_LISTITEM));
+                    var $parentListLinks = [].slice.call(parentTab.querySelectorAll('.' + TABS_JS_LISTLINK));
+                    var $parentListContents = [].slice.call(parentTab.querySelectorAll('.' + TABS_JS_CONTENT));
+
+                    // aria selected false on all links
+                    unSelectLinks($parentListLinks);
+                    // add aria-hidden on all tabs contents
+                    unSelectContents($parentListContents);
+                    // add aria selected on selected link + show linked panel
+                    selectLink(linkSelected);
+
+                    e.preventDefault();
+                }
+
+                // Key down on tabs
+                if ((hasClass(e.target, TABS_JS_LISTLINK) === true || parentLink !== '') && eventName === 'keydown') {
+                    //let linkSelected = hasClass( e.target, TABS_JS_LISTLINK) === true ? e.target : findById( parentLink );
+                    var parentTabId = searchParent(e.target, TABS_JS);
+                    var parentTab = findById(parentTabId);
+                    var $parentListItems = [].slice.call(parentTab.querySelectorAll('.' + TABS_JS_LISTITEM));
+                    var $parentListLinks = [].slice.call(parentTab.querySelectorAll('.' + TABS_JS_LISTLINK));
+                    var $parentListContents = [].slice.call(parentTab.querySelectorAll('.' + TABS_JS_CONTENT));
+                    var firstLink = $parentListItems[0].querySelector('.' + TABS_JS_LISTLINK);
+                    var lastLink = $parentListItems[$parentListItems.length - 1].querySelector('.' + TABS_JS_LISTLINK);
+
+                    // strike home on a tab => 1st tab
+                    if (e.keyCode === 36) {
+                        unSelectLinks($parentListLinks);
+                        unSelectContents($parentListContents);
+                        selectLink(firstLink);
+
+                        e.preventDefault();
+                    }
+                    // strike end on a tab => last tab
+                    else if (e.keyCode === 35) {
+                        unSelectLinks($parentListLinks);
+                        unSelectContents($parentListContents);
+                        selectLink(lastLink);
+
+                        e.preventDefault();
+                    }
+                    // strike up or left on the tab => previous tab
+                    else if ((e.keyCode === 37 || e.keyCode === 38) && !e.ctrlKey) {
+                        if (firstLink.getAttribute(ATTR_SELECTED) === 'true') {
+                            unSelectLinks($parentListLinks);
+                            unSelectContents($parentListContents);
+                            selectLink(lastLink);
+
+                            e.preventDefault();
+                        } else {
+                            selectLinkInList($parentListItems, $parentListLinks, $parentListContents, 'prev');
+                            e.preventDefault();
+                        }
+                    }
+                    // strike down or right in the tab => next tab
+                    else if ((e.keyCode === 40 || e.keyCode === 39) && !e.ctrlKey) {
+                        if (lastLink.getAttribute(ATTR_SELECTED) === 'true') {
+                            unSelectLinks($parentListLinks);
+                            unSelectContents($parentListContents);
+                            selectLink(firstLink);
+
+                            e.preventDefault();
+                        } else {
+                            selectLinkInList($parentListItems, $parentListLinks, $parentListContents, 'next');
+                            e.preventDefault();
+                        }
+                    }
+                }
+
+                // Key down in tab panels
+                var parentTabPanelId = searchParent(e.target, TABS_JS_CONTENT);
+                if (parentTabPanelId !== '' && eventName === 'keydown') {
+                    (function () {
+                        var linkSelected = findById(findById(parentTabPanelId).getAttribute(ATTR_LABELLEDBY));
+                        var parentTabId = searchParent(e.target, TABS_JS);
+                        var parentTab = findById(parentTabId);
+                        var $parentListItems = [].slice.call(parentTab.querySelectorAll('.' + TABS_JS_LISTITEM));
+                        var $parentListLinks = [].slice.call(parentTab.querySelectorAll('.' + TABS_JS_LISTLINK));
+                        var $parentListContents = [].slice.call(parentTab.querySelectorAll('.' + TABS_JS_CONTENT));
+                        var firstLink = $parentListItems[0].querySelector('.' + TABS_JS_LISTLINK);
+                        var lastLink = $parentListItems[$parentListItems.length - 1].querySelector('.' + TABS_JS_LISTLINK);
+
+                        // strike up + ctrl => go to header
+                        if (e.keyCode === 38 && e.ctrlKey) {
+                            setTimeout(function () {
+                                linkSelected.focus();
+                            }, 0);
+                            e.preventDefault();
+                        }
+                        // strike pageup + ctrl => go to prev header
+                        if (e.keyCode === 33 && e.ctrlKey) {
+                            // go to header
+                            linkSelected.focus();
+                            e.preventDefault();
+                            // then previous
+                            if (firstLink.getAttribute(ATTR_SELECTED) === 'true') {
+                                unSelectLinks($parentListLinks);
+                                unSelectContents($parentListContents);
+                                selectLink(lastLink);
+                            } else {
+                                selectLinkInList($parentListItems, $parentListLinks, $parentListContents, 'prev');
+                            }
+                        }
+                        // strike pagedown + ctrl => go to next header
+                        if (e.keyCode === 34 && e.ctrlKey) {
+                            // go to header
+                            linkSelected.focus();
+                            e.preventDefault();
+                            // then next
+                            if (lastLink.getAttribute(ATTR_SELECTED) === 'true') {
+                                unSelectLinks($parentListLinks);
+                                unSelectContents($parentListContents);
+                                selectLink(firstLink);
+                            } else {
+                                selectLinkInList($parentListItems, $parentListLinks, $parentListContents, 'next');
+                            }
+                        }
+                    })();
+                }
+
+                // click on a tab link
+                var parentLinkToPanelId = searchParent(e.target, TABS_JS_LINK_TO_TAB);
+                if ((hasClass(e.target, TABS_JS_LINK_TO_TAB) === true || parentLinkToPanelId !== '') && eventName === 'click') {
+                    var panelSelectedId = hasClass(e.target, TABS_JS_LINK_TO_TAB) === true ? e.target.getAttribute('href').replace('#', '') : findById(parentLinkToPanelId).replace('#', '');
+                    var panelSelected = findById(panelSelectedId);
+                    var buttonPanelSelected = findById(panelSelected.getAttribute(ATTR_LABELLEDBY));
+                    var parentTabId = searchParent(e.target, TABS_JS);
+                    var parentTab = findById(parentTabId);
+                    //let $parentListItems = [].slice.call(parentTab.querySelectorAll('.' + TABS_JS_LISTITEM));
+                    var $parentListLinks = [].slice.call(parentTab.querySelectorAll('.' + TABS_JS_LISTLINK));
+                    var $parentListContents = [].slice.call(parentTab.querySelectorAll('.' + TABS_JS_CONTENT));
+
+                    unSelectLinks($parentListLinks);
+                    unSelectContents($parentListContents);
+                    selectLink(buttonPanelSelected);
+
+                    e.preventDefault();
+                }
+            }, true);
+        });
+    };
+
+    var onLoad = function onLoad() {
+        attach();
+        bindListeners();
+        document.removeEventListener('DOMContentLoaded', onLoad);
+    };
+
+    document.addEventListener('DOMContentLoaded', onLoad);
+
+    window.van11yAccessibleTabPanelAria = attach;
+})(document);

data/app/assets/stylesheets/sibu/defaults.scss

@@ -255,6 +255,8 @@ $sibu-color3 : #333 !default;
 #sections_panel {
   .sibu_sections {
     padding: 2rem;
+    max-height: 60vh;
+    overflow-y: scroll;
 
     > div {
       > * {
@@ -277,6 +279,51 @@ $sibu-color3 : #333 !default;
         }
       }
     }
+
+    .tabs__list {
+      margin: 0;
+      padding: 0;
+    }
+    .tabs__item {
+      display: inline-block;
+      > a {
+        text-decoration: none;
+      }
+    }
+
+    .tabs__link {
+      display: inline-block;
+      cursor: pointer;
+      margin-bottom: -2px;
+      padding: 1rem 2.5rem;
+      border-bottom: 4px solid transparent;
+      color: $sibu-color1;
+      text-decoration: none;
+      border-radius: 0 0 0 0;
+      transition: .25s;
+      transition-property: color, border, background-color;
+      font-size: 2rem;
+      &:focus {
+        border-bottom-color: $sibu-color2;
+        color: $sibu-color2;
+        outline: 0;
+      }
+    }
+
+    [aria-selected="true"].tabs__link {
+      border-bottom-color: $sibu-color2;
+      color: $sibu-color2;
+      outline: 0;
+    }
+
+    .tabs__content {
+      padding: 3rem 2rem;
+      background-color: white;
+    }
+
+    [aria-hidden="true"].tabs__content {
+      display: none;
+    }
   }
 
   .sibu_actions {

data/app/assets/stylesheets/sibu/sibu.css

@@ -63,11 +63,6 @@
     background-color: white;
 }
 
-#sections_panel .sibu_sections {
-    max-height: 60vh;
-    overflow-y: scroll;
-}
-
 #element_actions button {
     display: none;
 }

data/app/controllers/sibu/pages_controller.rb

@@ -131,7 +131,7 @@ module Sibu
       @after = params[:after]
       @links = @site.pages_path_by_id
 
-      @site.site_template.available_templates.each do |t|
+      @site.site_template.available_sections.each do |t|
         template_defaults = @site.site_template.templates ? (@site.site_template.templates[t["template"]] || {}) : {}
         @page.sections << template_defaults.merge(t).to_h
       end

data/app/helpers/sibu/pages_helper.rb

@@ -8,7 +8,7 @@ module Sibu
     end
 
     def sections_templates
-      @site.site_template.available_templates
+      @site.site_template.available_sections
     end
 
     def site_images

data/app/models/sibu/site.rb

@@ -36,7 +36,7 @@ module Sibu
     end
 
     def section_template(section)
-      "#{site_template.path}/#{section["template"]}"
+        "#{site_template.path}/#{section["category"]}/#{section["template"]}"
     end
 
     def not_found

data/app/models/sibu/site_template.rb

@@ -9,9 +9,14 @@ module Sibu
       name.parameterize.gsub('-', '_')
     end
 
-    def available_templates
-      Dir.glob(File.join(Rails.root, "app/views/shared/#{path}/*.erb")).map {|f| f.split('/').last}
-          .map {|f| f[1..-1].gsub('.html.erb', '')}.select {|f| f != 'site'}.map {|f| {"id" => "sibu_template_#{f}", "template" => f}}
+    def available_sections(path_prefix = 'app/views/shared')
+      sections_list = []
+      Dir.glob(File.join(Rails.root, "#{path_prefix}/#{path}/*/")).each do |dir|
+        cat = dir.split('/').last
+        sections_list += Dir.glob(dir + "*.erb").map {|f| f.split('/').last}.
+            map {|f| f[1..-1].gsub('.html.erb', '')}.map {|f| {"id" => "sibu_template_#{f}", "category" => cat, "template" => f}}
+      end
+      sections_list
     end
   end
 end

data/app/views/layouts/sibu/edit_content.html.erb

@@ -90,6 +90,13 @@
 
     function newSection(isAfter) {
         var section = $(".sb-editing").first();
+        var sectionsPanel = $("#sections_panel");
+        sectionsPanel.html(
+            '<div class="sibu_panel sibu_view"><h2>Choix du type de section</h2></div>' +
+            '<div><div class="sibu_sections sibu_site_content" style="text-align: center;">Chargement en cours...</div></div>' +
+            '<div class="sibu_panel sibu_view"><div class="sibu_actions"><a href="#" onclick="cancelSectionsEdit(); return false;">Annuler</a></div></div>'
+        );
+        sectionsPanel.slideDown("fast");
         $.ajax({
             url: "<%= new_section_site_page_path(@site.id, @page.id) %>",
             method: "GET",

data/app/views/sibu/pages/_media_edit_panel.html.erb

@@ -20,7 +20,7 @@
           <p>Veuillez sélectionner une image.</p>
         <% end %>
         <div class="sibu_custom_center" style="display: <%= (@element["src"] == DEFAULT_IMG || @element["src"].blank?) ? 'none' : 'block' %>">
-          <%= check_box_tag('custom_center', true, !@element["class"].blank?, id: 'custom_center', class: 'checkbox') %>
+          <%= check_box_tag('custom_center', true, (!@element["class"].blank? && @element["class"].include?('posx')), id: 'custom_center', class: 'checkbox') %>
           <%= label_tag 'custom_center', "Recentrer l'image" %>
         </div>
         <div class="sibu_center">

data/app/views/sibu/pages/_new_section_panel.html.erb

@@ -4,16 +4,32 @@
 </div>
 <div>
   <div class="sibu_sections sibu_site_content">
-    <div id="<%= "#{@site.site_template.reference}_sections" %>">
-      <% sections_templates.each do |st| %>
-        <div data-sb-template="<%= st["template"] %>">
-          <%= render "shared/#{@site.section_template(st)}", sec: st %>
-        </div>
-      <% end %>
+    <div id="<%= "#{@site.site_template.reference}_sections" %>" class="sibu_sections_tabs">
+      <% sections_by_category = sections_templates.group_by {|st| st['category']} %>
+      <div class="js-tabs">
+        <ul class="js-tablist" data-existing-hx="h3">
+          <% sections_by_category.keys.each do |cat| %>
+            <li class="js-tablist__item">
+              <a href="#<%= cat %>" class="js-tablist__link" data-selected="1"><%= t "sibu.section.category.#{cat}" %></a>
+            </li>
+          <% end %>
+        </ul>
+        <% sections_by_category.each_pair do |cat, sections| %>
+          <div id="<%= cat %>" class="js-tabcontent">
+            <h3 style="display: none;"><%= t "sibu.section.category.#{cat}" %></h3>
+            <% sections.each do |st| %>
+              <div data-sb-template="<%= st["template"] %>" data-sb-category="<%= st["category"] %>">
+                <%= render "shared/#{@site.section_template(st)}", sec: st %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
     </div>
   </div>
   <%= form_tag(create_section_site_page_path(@site.id, @page.id), method: :post, remote: true) do |f| %>
     <%= hidden_field_tag 'section[template]', '' %>
+    <%= hidden_field_tag 'section[category]', '' %>
     <%= hidden_field_tag :section_id, @section_id %>
     <%= hidden_field_tag :after, @after%>
     <%= hidden_field_tag :entity, @entity_type %>

data/app/views/sibu/pages/edit_element.js.erb

@@ -46,29 +46,29 @@ editPanel.slideDown("fast", function() {
                 $(this).addClass('selected');
                 $("#element_src").val($(this).data("src"));
                 $("#element_alt").val($(this).data("alt"));
-                editPanel.find(".sibu_center").html('<img src="' + $("#element_src").val() + '"/>');
+                editPanel.find(".sibu_center").html('<img src="' + $("#element_src").val() + '"/><div id="sibu_center_pos" style="display: none;">✕</div>');
                 editPanel.find(".sibu_selected_image > p:first-child").hide();
                 editPanel.find(".sibu_selected_image").find(".sibu_custom_center").show();
                 editPanel.find(".sibu_selected_image").find(".sibu_field").show();
                 if(customCenter.is(":checked")) {
-                    customCtr = initCustomCenter();
+                    customCenter.removeAttr("checked");
+                    $("#element_class").val("");
+                    $(".sibu_center").attr("style", "");
                 }
             }
         });
         if(editPanel.find(".sibu_center img").size() > 0) {
             if(customCenter.is(":checked")) {
-                customCtr = initCustomCenter("<%= @element_id %>");
+                initCustomCenter("<%= @element_id %>");
             }
         }
         customCenter.change(function() {
           if($(this).is(":checked")) {
-              customCtr = initCustomCenter("<%= @element_id %>");
+              initCustomCenter("<%= @element_id %>");
           } else {
-              $("#element_style").val("");
+              $("#element_class").val("");
               $(".sibu_center").attr("style", "");
-//              if(cropper) {
-//                  cropper.destroy();
-//              }
+              $(".sibu_center > #sibu_center_pos").hide();
           }
         });
     <% when 'link' %>

data/app/views/sibu/pages/new_section.js.erb

@@ -1,18 +1,19 @@
 var sectionsPanel = $("#sections_panel");
-sectionsPanel.html("");
-sectionsPanel.html("<%= j(render 'new_section_panel') %>");
-var sections = sectionsPanel.find(".sibu_sections [data-sb-template]");
-sections.click(function() {
-    if(!$(this).hasClass('selected')) {
-        sections.removeClass('selected');
-        $(this).addClass('selected');
-        $("#section_template").val($(this).data("sb-template"));
-    }
-});
-sectionsPanel.slideDown("fast", function() {
+if (sectionsPanel.size()) {
+    sectionsPanel.html("<%= j(render 'new_section_panel') %>");
+    van11yAccessibleTabPanelAria($(".sibu_sections_tabs")[0]);
+    var sections = sectionsPanel.find(".sibu_sections [data-sb-template]");
+    sections.click(function() {
+        if(!$(this).hasClass('selected')) {
+            sections.removeClass('selected');
+            $(this).addClass('selected');
+            $("#section_template").val($(this).data("sb-template"));
+            $("#section_category").val($(this).data("sb-category"));
+        }
+    });
     if(typeof initSectionsForm === "function") {
         initSectionsForm();
     }
-});
-document.body.style.overflow = "hidden";
-sibuCallback("newSection");
+    document.body.style.overflow = "hidden";
+    sibuCallback("newSection");
+}

data/lib/sibu/version.rb

@@ -1,3 +1,3 @@
 module Sibu
-  VERSION = '0.7.3'
+  VERSION = '0.8.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sibu
 version: !ruby/object:Gem::Version
-  version: 0.7.3
+  version: 0.8.0
 platform: ruby
 authors:
 - Jean-Baptiste Vilain
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-02-11 00:00:00.000000000 Z
+date: 2019-03-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -129,6 +129,7 @@ files:
 - app/assets/javascripts/quill/quill.js
 - app/assets/javascripts/sibu/common.js
 - app/assets/javascripts/sibu/sibu.js.erb
+- app/assets/javascripts/tabs/van11y-accessible-tab-panel-aria.js
 - app/assets/stylesheets/cropper/cropper.css
 - app/assets/stylesheets/quill/quill.snow.css
 - app/assets/stylesheets/sibu/defaults.scss