hugosoucycc

[ARCHIVED] Another old source code of <hugo.soucy.cc>.
Log | Files | Refs | Submodules

commit 030fae9d92977a62940bf12a36ac7ff12b00fe71
parent 275ff1a2a4441b0d7b240bdb3d0d3995491b9de7
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Wed, 28 Jun 2017 20:36:40 -0400

Modify the js menu to more progressive enhancement

Diffstat:
Mstatic/dev/js/custom/init.js | 67+++++++++++++++++++------------------------------------------------
Mstatic/prod/js/script.js | 30+++++++++++++++++++++---------
Mstatic/prod/js/script.min.js | 2+-
3 files changed, 41 insertions(+), 58 deletions(-)

diff --git a/static/dev/js/custom/init.js b/static/dev/js/custom/init.js @@ -1,72 +1,43 @@ function setNavigation() { 'use strict'; var $nav = document.querySelector('.nav'); - var $nav_button; + var visible = 'state--visible'; + var hidden = 'state--hidden'; + var $nav_panel; + var $nav_button; var $nav_close; - console.log(document.querySelector('#navButtonTpl')); - - if ($nav) { - $nav_button = document.querySelector('.nav-button'); + if (du.isElement($nav)) { $nav_panel = $nav.querySelector('.nav__panel'); + document.body.insertAdjacentHTML( + 'afterbegin', document.querySelector('#navButtonTpl').innerHTML + ); + + $nav_panel.insertAdjacentHTML( + 'beforeend', document.querySelector('#navCloseTpl').innerHTML + ); + + $nav_button = document.querySelector('.nav-button'); $nav_close = $nav_panel.querySelector('.nav__close'); - du.setClass($nav_panel, 'state--hidden'); + du.setClass($nav_panel, hidden); du.setEvent($nav_button, 'click', function(thatEvt) { thatEvt.preventDefault(); - du.toggleClass($nav_panel, 'state--hidden'); - du.toggleClass($nav_panel, 'state--visible'); + du.toggleClass($nav_panel, hidden); + du.toggleClass($nav_panel, visible); }); du.setEvent($nav_close, 'click', function(thatEvt) { thatEvt.preventDefault(); - du.toggleClass($nav_panel, 'state--hidden'); - du.toggleClass($nav_panel, 'state--visible'); + du.toggleClass($nav_panel, hidden); + du.toggleClass($nav_panel, visible); }); } } -function setHashtagSearch() { - var hashTags = du.queryAll('a.p-category'); - - hashTags.forEach(function(tag) { - du.setEvent(tag, 'click', function(thatEvt) { - thatEvt.preventDefault(); - - console.log(tag.innerHTML); - - document.forms['search'].elements['q'].value = tag.innerHTML; - document.forms['search'].submit(); - }); - }); -} - -function setClickableHashtags(fn) { - var hEntries = du.queryAll('.hentry'); - - hEntries.map(function(hEntry) { - var hEntryHashTagged = hEntry.innerHTML.replace( - /(^|\s)(#[a-zA-ZÀ-ú\d-]+)/ig, '$1<a class="p-category" href="$2" title="Chercher sur DuckDuckGo d\'autres entrées avec le tag $2">$2</a>' - ); - - hEntry.innerHTML = hEntryHashTagged; - }); - - fn(); -} - -// document.body.insertAdjacentHTML( -// 'afterbegin', document.querySelector('#navButtonTpl').innerHTML -// ); - -// document.body.insertAdjacentHTML( -// 'beforeend', document.querySelector('#navCloseTpl').innerHTML -// ); - setNavigation(); -// setClickableHashtags(setHashtagSearch); diff --git a/static/prod/js/script.js b/static/prod/js/script.js @@ -391,29 +391,41 @@ var du = (function(win) { function setNavigation() { 'use strict'; var $nav = document.querySelector('.nav'); - var $nav_button; + var visible = 'state--visible'; + var hidden = 'state--hidden'; + var $nav_panel; + var $nav_button; var $nav_close; - if ($nav) { - $nav_button = document.querySelector('.nav-button'); + if (du.isElement($nav)) { $nav_panel = $nav.querySelector('.nav__panel'); + + document.body.insertAdjacentHTML( + 'afterbegin', document.querySelector('#navButtonTpl').innerHTML + ); + + $nav_panel.insertAdjacentHTML( + 'beforeend', document.querySelector('#navCloseTpl').innerHTML + ); + + $nav_button = document.querySelector('.nav-button'); $nav_close = $nav_panel.querySelector('.nav__close'); - du.setClass($nav_panel, 'state--hidden'); + du.setClass($nav_panel, hidden); du.setEvent($nav_button, 'click', function(thatEvt) { thatEvt.preventDefault(); - du.toggleClass($nav_panel, 'state--hidden'); - du.toggleClass($nav_panel, 'state--visible'); + du.toggleClass($nav_panel, hidden); + du.toggleClass($nav_panel, visible); }); du.setEvent($nav_close, 'click', function(thatEvt) { thatEvt.preventDefault(); - du.toggleClass($nav_panel, 'state--hidden'); - du.toggleClass($nav_panel, 'state--visible'); + du.toggleClass($nav_panel, hidden); + du.toggleClass($nav_panel, visible); }); } } @@ -424,7 +436,7 @@ function setHashtagSearch() { hashTags.forEach(function(tag) { du.setEvent(tag, 'click', function(thatEvt) { thatEvt.preventDefault(); - + console.log(tag.innerHTML); document.forms['search'].elements['q'].value = tag.innerHTML; diff --git a/static/prod/js/script.min.js b/static/prod/js/script.min.js @@ -28,7 +28,7 @@ function triggerEvent(el,eventType){if(document.createEvent){var event=document. function triggerCustomEvent(el,eventType,eventData){var customEvent;if(window.CustomEvent){customEvent=new CustomEvent(eventType,{detail:eventData});}else{customEvent=document.createEvent('CustomEvent');customEvent.initCustomEvent(eventType,true,true,eventData);} el.dispatchEvent(customEvent);} function isElementInViewport(el){var elRect=el.getBoundingClientRect();return(elRect.top>=0&&elRect.left>=0&&elRect.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&elRect.right<=(window.innerWidth||document.documentElement.clientWidth));} -return{doExtend:doExtend,queryAll:queryAll,setAttrs:setAttrs,setEvent:setEvent,setEventList:setEventList,getIndex:getIndex,getClosest:getClosest,getHeight:getHeight,setClass:setClass,unsetClass:unsetClass,hasClass:hasClass,toggleClass:toggleClass,setDebounce:setDebounce,setThrottle:setThrottle,isElement:isElement,isObject:isObject,triggerEvent:triggerEvent,triggerCustomEvent:triggerCustomEvent,isElementInViewport:isElementInViewport};})(window);function setNavigation(){'use strict';var $nav=document.querySelector('.nav');var $nav_button;var $nav_panel;var $nav_close;if($nav){$nav_button=document.querySelector('.nav-button');$nav_panel=$nav.querySelector('.nav__panel');$nav_close=$nav_panel.querySelector('.nav__close');du.setClass($nav_panel,'state--hidden');du.setEvent($nav_button,'click',function(thatEvt){thatEvt.preventDefault();du.toggleClass($nav_panel,'state--hidden');du.toggleClass($nav_panel,'state--visible');});du.setEvent($nav_close,'click',function(thatEvt){thatEvt.preventDefault();du.toggleClass($nav_panel,'state--hidden');du.toggleClass($nav_panel,'state--visible');});}} +return{doExtend:doExtend,queryAll:queryAll,setAttrs:setAttrs,setEvent:setEvent,setEventList:setEventList,getIndex:getIndex,getClosest:getClosest,getHeight:getHeight,setClass:setClass,unsetClass:unsetClass,hasClass:hasClass,toggleClass:toggleClass,setDebounce:setDebounce,setThrottle:setThrottle,isElement:isElement,isObject:isObject,triggerEvent:triggerEvent,triggerCustomEvent:triggerCustomEvent,isElementInViewport:isElementInViewport};})(window);function setNavigation(){'use strict';var $nav=document.querySelector('.nav');var visible='state--visible';var hidden='state--hidden';var $nav_panel;var $nav_button;var $nav_close;if(du.isElement($nav)){$nav_panel=$nav.querySelector('.nav__panel');document.body.insertAdjacentHTML('afterbegin',document.querySelector('#navButtonTpl').innerHTML);$nav_panel.insertAdjacentHTML('beforeend',document.querySelector('#navCloseTpl').innerHTML);$nav_button=document.querySelector('.nav-button');$nav_close=$nav_panel.querySelector('.nav__close');du.setClass($nav_panel,hidden);du.setEvent($nav_button,'click',function(thatEvt){thatEvt.preventDefault();du.toggleClass($nav_panel,hidden);du.toggleClass($nav_panel,visible);});du.setEvent($nav_close,'click',function(thatEvt){thatEvt.preventDefault();du.toggleClass($nav_panel,hidden);du.toggleClass($nav_panel,visible);});}} function setHashtagSearch(){var hashTags=du.queryAll('a.p-category');hashTags.forEach(function(tag){du.setEvent(tag,'click',function(thatEvt){thatEvt.preventDefault();console.log(tag.innerHTML);document.forms['search'].elements['q'].value=tag.innerHTML;document.forms['search'].submit();});});} function setClickableHashtags(fn){var hEntries=du.queryAll('.hentry');hEntries.map(function(hEntry){var hEntryHashTagged=hEntry.innerHTML.replace(/(^|\s)(#[a-zA-ZÀ-ú\d-]+)/ig,'$1<a class="p-category" href="$2" title="Chercher sur DuckDuckGo d\'autres entrées avec le tag $2">$2</a>');hEntry.innerHTML=hEntryHashTagged;});fn();} setNavigation(); \ No newline at end of file