Bonjour !
Depuis plusieurs jours je parcours ouragans et tempêtes dans les terres arides qu'est le Web.
J'ai fais beaucoup de recherche pour faire un Breadcrumbs ( autrement dit Fil d'Ariane ) en JS.
Beaucoup sont codé côté serveur en PhP, mais mon but est de le faire uniquement en JS ( c'est beaucoup plus compliqué.. )
Après plusieurs recherches en vain..
Des collègues m'ont ( plus ou moins ) aidés en donnant une partie de code..... ( sans me donner d'explication )
N'étant pas très expérimenté en JS je vous laisse imaginer le charabia...
Toute fois j'essaye encore de décoder tout ça en vain..
En continuant mon étrange périple qui est de comprendre l'étendu de ce code.
Je voulais savoir si quelque uns d'entre vous pourriez m'éclaircir sur mon chemin !
( Encore ça va j'ai a peux près compris cette partie )
Mais celle la... C'est de la magie ou je ne m'y connais pas !
Bibbidi-Bobbidi-Boo ! :
Merci à ceux qui pourront m'aider,
Bon week end !
[/i][/i][/i]
Modifié par Golderen (02 Dec 2016 - 10:32)
Depuis plusieurs jours je parcours ouragans et tempêtes dans les terres arides qu'est le Web.
J'ai fais beaucoup de recherche pour faire un Breadcrumbs ( autrement dit Fil d'Ariane ) en JS.
Beaucoup sont codé côté serveur en PhP, mais mon but est de le faire uniquement en JS ( c'est beaucoup plus compliqué.. )
Après plusieurs recherches en vain..
Des collègues m'ont ( plus ou moins ) aidés en donnant une partie de code..... ( sans me donner d'explication )
N'étant pas très expérimenté en JS je vous laisse imaginer le charabia...
Toute fois j'essaye encore de décoder tout ça en vain..
En continuant mon étrange périple qui est de comprendre l'étendu de ce code.
Je voulais savoir si quelque uns d'entre vous pourriez m'éclaircir sur mon chemin !
function breadcrumbs() {
sURL = new String;
bits = new Object;
var x = 0;
var stop = 0;
var output = "<div class=topnav><a href=/>home</a> » ";
sURL = location.href;
sURL = sURL.slice(8,sURL.length);
chunkStart = sURL.indexOf("/");
sURL = sURL.slice(chunkStart+1,sURL.length)
while(!stop){
chunkStart = sURL.indexOf("/");
if (chunkStart != -1){
bits[x] = sURL.slice(0,chunkStart)
sURL = sURL.slice(chunkStart+1,sURL.length);
} else {
stop = 1;
}
x++;
}
for(var i in bits){
output += "<a href=\"";
for(y=1;y<x-i;y++){
output += "../";
}
output += bits[i] + "/\">" + bits[i] + "</a> » ";
}
document.write(output + document.title);
document.write("</div>");
}( Encore ça va j'ai a peux près compris cette partie )
Mais celle la... C'est de la magie ou je ne m'y connais pas !
Bibbidi-Bobbidi-Boo ! :
;( function( window ) {
'use strict';
var document = window.document;
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}
function cbpHorizontalSlideOutMenu( el, options ) {
this.el = el;
this.options = extend( this.defaults, options );
this._init();
}
// GetComputedStyle polyfill for IE8
// http://snipplr.com/view/13523/
if (!window.getComputedStyle) {
window.getComputedStyle = function(el, pseudo) {
this.el = el;
this.getPropertyValue = function(prop) {
var re = /(\-([a-z]){1})/g;
if (prop == 'float') prop = 'styleFloat';
if (re.test(prop)) {
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
return el.currentStyle[prop] ? el.currentStyle[prop] : null;
}
return this;
}
}
cbpHorizontalSlideOutMenu.prototype = {
defaults: {},
_init: function () {
this.current = -1;
this.touch = Modernizr.touch;
this.menu = this.el.querySelector('.rte-menu');
this.menuItems = this.el.querySelectorAll('.rte-menu > li:not(.user-menu)');
this.menuBg = document.createElement('div');
this.menuBg.className = 'rte-menubg';
this.el.appendChild(this.menuBg);
this._initEvents();
this._initBreadcrumb();
},
_openMenu: function (el, ev) {
var self = this,
item = el.parentNode,
items = Array.prototype.slice.call(this.menuItems),
submenu = item.querySelector('.rte-submenu'),
subsubmenu = item.querySelectorAll('.rte-sub-submenu'),
activeHeight, // Stores the max height
// among the different <ul>s of the currently open menu.
// [submenu.height, subsubmenu[item1].heigth, ..., subsubmenu[itemN].heigth]
closeCurrent = function (current) {
var current = current || self.menuItems[self.current];
current.className = '';
current.setAttribute('data-open', '');
},
closePanel = function () {
self.current = -1;
self.menuBg.style.height = '0px';
};
if (submenu) {
ev.preventDefault();
/*if (item.getAttribute('data-open') === 'open') {
closeCurrent(item);
closePanel();
}
else {*/
item.setAttribute('data-open', 'open');
if (self.current !== -1) {
closeCurrent();
}
self.current = items.indexOf(item);
item.className = 'cbp-hsitem-open';
// Use dynamic Height of the current active menu
// Active Submenu height (level 2)
activeHeight = submenu.clientHeight;
// Get paddings of active submenu (level 2) to add them to active submenu (level 3)
var paddingTop = window.getComputedStyle(submenu, "").getPropertyValue('padding-top');
var paddingBottom = window.getComputedStyle(submenu, "").getPropertyValue('padding-bottom');
var paddings = +paddingTop.split('px')[0] + +paddingBottom.split('px')[0];
// Active submenu height (level 3)
// Store maximum height to set height of the bg menu element
[].forEach.call(subsubmenu, function (el) {
activeHeight = Math.max(activeHeight, el.clientHeight + paddings);
});
self.menuBg.style.height = activeHeight + 'px';
//}
}
else {
if (self.current !== -1) {
closeCurrent();
closePanel();
}
}
},
_initEvents: function () {
var self = this;
Array.prototype.slice.call(this.menuItems).forEach(function (el, i) {
var trigger = el.querySelector('a');
// Listeners for menu elements.
if (self.touch) {
trigger.addEventListener('touchstart', function (ev) {
self._openMenu(this, ev);
});
trigger.addEventListener('open', function (ev) {
self._openMenu(this, ev);
});
}
else {
trigger.addEventListener('click', function (ev) {
self._openMenu(this, ev);
});
trigger.addEventListener('open', function (ev) {
self._openMenu(this, ev);
});
}
});
window.addEventListener('resize', function (ev) {
self._resizeHandler();
});
},
_initBreadcrumb: function () {
var self = this;
var breadcrumbs_trigger = document.querySelectorAll("nav.breadcrumb a[data-link]");
Array.prototype.slice.call(breadcrumbs_trigger).forEach(function (el, i) {
// Listeners for menu elements.
if (self.touch) {
el.addEventListener('touchstart', function (ev) {
var elem = document.querySelector('.rte-menu li a[data-link="' + link + '"]');
self._getParentDataLinks(elem);
self._openMenu(elem, ev);
}, false);
}
else {
el.addEventListener('click', function (ev) {
ev.preventDefault();
var clicked_link = this;
// Loop over all elements until this one to open then
for (var i = 0; breadcrumbs_trigger.length; i++) {
var el = breadcrumbs_trigger[i];
var link = el.getAttribute("data-link");
// Get the corresponding rte-menu element.
var rte_elem = document.querySelector('.rte-menu li a[data-link="' + link + '"]');
// Open this element.
self._eventFire(rte_elem, 'open');
// Stop at current element.
if (el == clicked_link) {
break;
}
}
}, false);
}
});
window.addEventListener('resize', function (ev) {
self._resizeHandler();
});
},
_resizeHandler: function () {
var self = this;
function delayed() {
self._resize();
self._resizeTimeout = null;
}
if (this._resizeTimeout) {
clearTimeout(this._resizeTimeout);
}
this._resizeTimeout = setTimeout(delayed, 50);
},
_resize: function () {
if (this.current !== -1) {
this.menuBg.style.height = this.menuItems[this.current].querySelector('.rte-submenu').offsetHeight + 'px';
}
},
_eventFire: function(el, etype) {
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
};
// add to global namespace
window.cbpHorizontalSlideOutMenu = cbpHorizontalSlideOutMenu;
} )( window );Merci à ceux qui pourront m'aider,
Bon week end !
[/i][/i][/i] Modifié par Golderen (02 Dec 2016 - 10:32)
