entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 9 Releases Wiki Activity

isere-cd38: load crossmenu widget files since isere.fr (#51873)

This commit is contained in:
Thomas Jund 2021-03-10 13:57:51 +01:00
parent dc8e2cb228
commit 575a0394aa
3 changed files with 1 additions and 483 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/isere-cd38/crossmenu.json
View File

File diff suppressed because one or more lines are too long

475
static/isere-cd38/extra.js
View File

@ -1,475 +0,0 @@
//
// Script provisoire du widget Isère
// Pour test d'intégration
// À remplacer par <script src="https://menutrans.isere.fr/widgets/crossmenu.js"></script> quand les authorisations d'accès seront accordées
//
(function (funcName, baseObj) {
// jQuery's $(document).ready() equivalent function
funcName = funcName || "docReady";
baseObj = baseObj || window;
var readyList = [];
var readyFired = false;
var readyEventHandlersInstalled = false;
function ready() {
if (!readyFired) {
readyFired = true;
for (var i = 0; i < readyList.length; i++) {
readyList[i].fn.call(window, readyList[i].ctx);
}
readyList = [];
}
}
function readyStateChange() {
if (document.readyState === "complete") {
ready();
}
}
baseObj[funcName] = function (callback, context) {
if (typeof callback !== "function") {
throw new TypeError("callback for docReady(fn) must be a function");
}
if (readyFired) {
setTimeout(function () {
callback(context);
}, 1);
return;
} else {
readyList.push({fn: callback, ctx: context});
}
if (document.readyState === "complete") {
setTimeout(ready, 1);
} else if (!readyEventHandlersInstalled) {
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", ready, false);
window.addEventListener("load", ready, false);
} else {
document.attachEvent("onreadystatechange", readyStateChange);
window.attachEvent("onload", ready);
}
readyEventHandlersInstalled = true;
}
}
})("docReady", window);
(function () {
/*
* ===== Documentation ======
* to activate this script put this tag in your HTML
* <section id="js_isereMegaMenu"></section>
*
* == CSS confs
* Add "isereMegaMenu--fixed" class to parent element to applay fixed styles
* Add "isereMegaMenu--hideLogin" to hide login button
*
* === Switchers
* if show_isereMegaMenu_state_in_html = true, a class 'js_isereMegaMenu--open' will be added to <html> element
* if variable 'domainWidgetIsere' is not defined, a default value will be assined => 'https://menutrans.isere.fr'
*
* */
if (typeof jQuery == 'undefined') {
docReady(main);
} else {
jQuery(document).ready(main());
}
function main() {
//Temporaire : pour surpasser le cache locale du navigateur
let versionNum = Math.random().toString(36).substring(7);
function _addClass(el, NewClass) {
var lesClass = el.className.toString();
lesClass = lesClass + " " + NewClass;
el.className = lesClass;
return true;
}
function _removeClass(el, NewClass) {
var regEx = new RegExp("\\b" + NewClass + "\\b");
el.className = el.className.toString().replace(regEx, "");
if (el.className == '') {
el.removeAttribute('class');
}
return true;
}
function _checkClass(el, NewClass) {
let lesClass = el.className;
return true;
}
function _toggleClass(el, classToToggle) {
let lesClass = el.className.toString();
if (lesClass.indexOf(classToToggle) == -1) {
_addClass(el, classToToggle);
} else {
_removeClass(el, classToToggle);
}
return true;
}
if (typeof domainWidgetIsere == 'undefined') {
console.warn('Warning: The variable domainWidgetIsere was undifined: Default value is loaded.')
var domainWidgetIsere = 'https://menutrans.isere.fr';
//pour les tests/debug en preprod
// var domainWidgetIsere = "https://preprod-menutrans.isere.fr";
}
//css stylesheet
let css_link = document.createElement('link');
css_link.type = "text/css";
css_link.rel = "preload stylesheet";
css_link.as = "style";
css_link.href = domainWidgetIsere + "/widgets/css/crossmenu.style.css?=" + versionNum;
document.head.appendChild(css_link);
let jsonp_url = "/static/isere-cd38/crossmenu.json",
request = new XMLHttpRequest();
request.open('GET', jsonp_url, true);
request.withCredentials = true;
request.onload = function () {
console.log(this.responseText);
if (this.status >= 200 && this.status < 400) {
// solution temporaire des que tout les sites integrons les nouvelles modifications
if (document.getElementById('js_isereMegaMenu')) {
var isereMegaMenu = document.getElementById('js_isereMegaMenu')
} else if (document.getElementById('containerWidget')){
var isereMegaMenu = document.getElementById('containerWidget');
} else {
console.error('Error: cannot find the <section id="js_isereMegaMenu"></section> element, please add it to DOM');
}
isereMegaMenu.classList.add('isereMegaMenu');
//Creates shade elemenet and inserts into wrapper element
let shadeBlack = document.createElement('span');
shadeBlack.className = 'isereMegaMenu__shadow isereMegaMenu__shadow--fadeIn_start'
shadeBlack.id = 'js_isereMegaMenu__shadow'
isereMegaMenu.insertBefore(shadeBlack, isereMegaMenu.firstChild)
// creates container
let widgetLinks = document.createElement('div');
widgetLinks.className = 'isereMegaMenu__widgetLinks';
isereMegaMenu.appendChild(widgetLinks);
//le div principal
let menuWidget = document.createElement('div');
menuWidget.className = 'isereMegaMenu__menuWidget';
menuWidget.style.height = 0;
menuWidget.style.visibility = 'hidden';
widgetLinks.appendChild(menuWidget);
//le bouton du menu
var buttonSVG = "<svg class ='isereMegaMenu__btnTgl__img' xmlns='http://www.w3.org/2000/svg' baseProfile='tiny' viewBox='0 0 140 93' height='42' width='65' overflow='scroll' xmlns:v='https://vecta.io/nano'><path fill='#f4f3f3' d='M0 0h139.75v93.188H0z'/><circle fill='#1b619d' cx='96.458' cy='17.292' r='9.208'/><path fill='#fcd312' d='M47.375 63.833v29.355h92.375V.738s-26 63.595-92.375 63.095z'/><path fill='#1b619d' d='M105.75 36.164S93 35.667 87.937 47.584c-.698 10.415 0 40.25 0 40.25h17.507l.306-51.67z'/><path fill='#505150' d='M22.76 59.664l-16.2-16.2a2 2 0 0 1 0-2.829l1.89-1.89a2 2 0 0 1 2.826-.003l12.9 12.838 12.9-12.838a2 2 0 0 1 2.826.003l1.89 1.89a2 2 0 0 1 0 2.829l-16.2 16.2a2 2 0 0 1-2.829 0h0z'/></svg>";
let menuButton = document.createElement('span');
menuButton.id = 'js_isereMegaMenu__btnTgl'
menuButton.className = 'isereMegaMenu__btnTgl'
menuButton.title = 'Menu Isere'
menuButton.innerHTML = buttonSVG;
menuButton.style.opacity = '0';
widgetLinks.appendChild(menuButton);
//le Close Button
let menuCloseButton = document.createElement('span');
menuCloseButton.id = 'js_isereMegaMenu__close';
menuCloseButton.className = 'isereMegaMenu__close';
menuCloseButton.innerText = 'Fermer';
menuWidget.appendChild(menuCloseButton);
//le div header
let divTop = document.createElement('div');
divTop.className = 'isereMegaMenu__header';
menuWidget.appendChild(divTop);
let logoLink = document.createElement('a');
logoLink.href = 'https://www.isere.fr/';
logoLink.className = 'isereMegaMenu__header__logo';
logoLink.title = 'isere logo';
divTop.appendChild(logoLink);
// Prepare JSON from menutrans
let data = JSON.parse(this.response).data;
if (data.title != '') {
var spanTitle = document.createElement('span');
spanTitle.className = 'isereMegaMenu__header__title';
spanTitle.innerText = data.title;
divTop.appendChild(spanTitle);
}
//Lien de connexion
if (typeof data.account !== 'undefined' && data.account.link != '') {
// login link
var linkLogin = document.createElement('a');
linkLogin.target = "_blank";
linkLogin.className = 'isereMegaMenu__header__login';
linkLogin.href = data.account.link;
linkLogin.title = data.account.title;
divTop.appendChild(linkLogin);
}
// Big menu wrapper
let divContent = document.createElement('nav');
menuWidget.appendChild(divContent);
// Big menu
let menu = document.createElement('ul');
menu.className = 'isereMegaMenu__menu';
divContent.appendChild(menu);
data.menu.forEach(function (value) {
//Menu item
var menuItem = document.createElement('li');
menuItem.className = 'js_isereMegaMenu__menu__item isereMegaMenu__menu__item isereMegaMenu__menu__item--withChild ';
//Menu item link
var linkA = document.createElement('a');
linkA.className = 'isereMegaMenu__menu__item__link';
linkA.href = 'javascript:void(0)';
linkA.innerText = value.title;
menuItem.appendChild(linkA);
if (value.icon) {
menuItem.classList.add('isereMegaMenu__menu__item--avecImage');
// Debug : on force le HTTPS sur les îcones pour éviter les bugs mixed content
if (value.icon.substr(0, 5) !== 'https') {
value.icon = value.icon.replace('http', 'https');
}
switch (value.title) {
case 'Le Département':
menuItem.classList.add('isereMegaMenu__menu__item--departement');
break;
case 'Solidarité - Santé':
menuItem.classList.add('isereMegaMenu__menu__item--solidarite');
break;
case 'Education - Sport - Jeunesse':
menuItem.classList.add('isereMegaMenu__menu__item--education');
break;
case 'Mobilité':
menuItem.classList.add('isereMegaMenu__menu__item--developpement');
break;
case 'Développement du territoire - Environnement':
menuItem.classList.add('isereMegaMenu__menu__item--mobilite');
break;
case 'Culture - Evénements':
menuItem.classList.add('isereMegaMenu__menu__item--culture');
break;
case 'Tourisme - Attractivité':
menuItem.classList.add('isereMegaMenu__menu__item--sport');
break;
default:
menuItem.classList.add('isereMegaMenu__menu__item--departement');
}
}
if (value.color) {
linkA.dataset.color = value.color;
}
//Sub menu
if ("sub" in value) {
// sub menu
var subMenu = document.createElement('ul');
subMenu.className = "isereMegaMenu__menu__item__sub";
menuItem.appendChild(subMenu);
// iteration sur les listed des sumenus
value.sub.forEach(function (subValue) {
// sub menu item
let subMenuItem = document.createElement('li');
subMenuItem.className = 'isereMegaMenu__menu__item__sub__item';
subMenu.appendChild(subMenuItem);
// sub menu item link
let subLinkA = document.createElement('a');
subLinkA.className = 'isereMegaMenu__menu__item__sub__item__link';
subLinkA.href = subValue.path;
if (subValue.description != null) {
subLinkA.title = subValue.description;
}
subLinkA.innerText = subValue.title;
subMenuItem.appendChild(subLinkA);
if (value.color) {
subLinkA.dataset.color = value.color;
}
});
} else {
// Si pas de sub items
menuItem = document.createElement('li')
var linkA = document.createElement('a');
linkA.href = 'javascript:void(0)';
linkA.className = "lien";
linkA.innerText = value.title;
if (value.color) {
linkA.dataset.color = value.color;
}
menuItem.appendChild(linkA);
}
menu.appendChild(menuItem);
});
// Footer social icons
var socialNetwork = document.createElement('ul');
socialNetwork.className = 'isereMegaMenu__social';
data.social_network.forEach(function (value) {
if (value.link != '') {
//social icon item
var menuItem = document.createElement('li');
menuItem.className = "isereMegaMenu__social__item isereMegaMenu__social__item--" + value.title.toLowerCase();
//social icon item link
var menuItem__link = document.createElement('a');
menuItem__link.href = value.link;
menuItem__link.className = 'isereMegaMenu__social__item__link';
menuItem__link.title = value.title;
menuItem__link.setAttribute('aria-label', value.title);
menuItem.appendChild(menuItem__link);
}
socialNetwork.appendChild(menuItem);
});
menuWidget.appendChild(socialNetwork);
function calcBigMenuHeight() {
//get and store full height of the menu
menuWidget.style.height = 'auto';
menuWidget.dataset.height = menuWidget.offsetHeight + 'px';
menuWidget.style.height = 0;
}
calcBigMenuHeight();
isereMegaMenu.addEventListener('click', function (event) {
// loop parent nodes from the target to the delegation node
for (var target = event.target; target && target != this; target = target.parentNode) {
//TODO convert this to swith statement
if (target.matches('.isereMegaMenu__menu__item__link')) {
//open submenus
var childSub = target.nextElementSibling;
//checks if submenu is open
if (target.parentNode.className.indexOf('--open') !== -1) {
target.parentNode.classList.remove('isereMegaMenu__menu__item--open');
childSub.removeAttribute('style');
} else {
target.parentNode.classList.add('isereMegaMenu__menu__item--open');
childSub.style.height = childSub.dataset.height;
}
break;
} else if (target.matches('#js_isereMegaMenu__btnTgl')) {
//big button menu OPEN
event.preventDefault();
setTimeout(calcBigMenuHeight(), 300);
isereMegaMenu.classList.add('isereMegaMenu--open')
if (typeof show_isereMegaMenu_state_in_html != 'undefined') {
document.getElementsByTagName('html')[0].classList.add('js_isereMegaMenu--open');
}
menuWidget.style.visibility = 'visible';
//To wait for animation to be finished
setTimeout(function () {
menuWidget.style.height = menuWidget.dataset.height;
setTimeout(function () {
menuWidget.style.height = 'auto';
}, 500);
setTimeout(function () {
isereMegaMenu
.querySelectorAll('.isereMegaMenu__menu__item__sub')
.forEach(function (value) {
var el = value, old = el.style.height;
el.style.height = 'auto';
el.dataset.height = (el.offsetHeight + 10) + 'px';
el.style.height = old;
})
}, 600);
}, 100);
//shade appear animation
shadeBlack.classList.toggle('isereMegaMenu__shadow--show');
shadeBlack.classList.add('isereMegaMenu__shadow--fadeIn');
shadeBlack.classList.remove('isereMegaMenu__shadow--fadeIn_start');
shadeBlack.classList.remove('isereMegaMenu__shadow--fadeOut');
break;
} else if (target.matches('#js_isereMegaMenu__close') || target.matches('#js_isereMegaMenu__shadow')) {
//Close button/shade for menu CLOSE
event.preventDefault();
isereMegaMenu.classList.remove('isereMegaMenu--open');
if (typeof show_isereMegaMenu_state_in_html != 'undefined') {
document.getElementsByTagName('html')[0].classList.remove('js_isereMegaMenu--open');
}
var nowHeight = menuWidget.offsetHeight + 'px'
menuWidget.style.height = nowHeight;
menuWidget.dataset.height = nowHeight;
setTimeout(function () {
menuWidget.style.height = 0;
}, 100);
//shade disappear animation
shadeBlack.classList.remove('isereMegaMenu__shadow--show');
shadeBlack.classList.remove('isereMegaMenu__shadow--fadeIn');
shadeBlack.classList.add('isereMegaMenu__shadow--fadeOut');
} else if (target.matches('.isereMegaMenu__menu__item__sub__item__link')) {
// control animation of selected link
break;
} else {
}
}
}, false);
} else {
}
};
request.onerror = function () {
console.log(this);
};
request.send();
}
})();

8
templates/variants/isere-cd38/combo/page_template.html
View File

@ -10,11 +10,5 @@
{% block body-bottom %}
<section id="js_isereMegaMenu" class="isereMegaMenu--hideLogin"></section>
<!--
À activer une fois les authorisations d'accès et supprimer
static/isere-cd38/extra.js
static/isere-cd38/crossmenu.json
<script src="https://menutrans.isere.fr/widgets/crossmenu.js"></script>
-->
<script src="https://menutrans.isere.fr/widgets/crossmenu.js"></script>
{% endblock %}