/********************************* ** Responsive Design Tutorial 2 ** ** Feel free to learn from this ** ** Ask Gordon if not understand ** *********************************/ /********************************* ** Structure Overview Region ** *********************************/ /*** Utility ***/ // $id(id) // randInt(min, max) // randColor() // randThemeColor() // matchesPolyfill() /*** Feature functions ***/ // reverseOrder() // inputHandler() // // incl(isthis, inthis) // // showHide(dom, containing) // newShowHide() // filterByLevel() // filterByCourse() // filterBySeries() // setFontSize(size) // modifyCSSVar(ns) // changeLang(lang) // // loopOverArr(dom,lang) // // changeText(lang) /*** Click event delegation ***/ // handleClick(e) // // menuAddClass() // // menuRemoveClass() // // openMenu() // // closeMenu() // // findLink(id) // // toggleSearchBar() // // functionMapper(elem) // // filterOptionChosen(type, keyword) // // toggleFilLvl() // // toggleFilCourse() // // toggleFilSeries() // // toggleFontSizePanel() // // toggleColorPanel() // // toggleLangPanel() /*** Initial rendering ***/ // generateLink(obj) // fillNewEntry(parent,obj) // renderListEntry(obj) // appendSuppListEntry() // renderFullList() // openingAnimation(callback) // loadEJavatar() // addClickHandler() // addInputHandler() // main() /********************************* ** Developer's Options Region ** *********************************/ var switches = { functionTracer : false, printTarget : false, matchTracer : false, }; var flags = { menuOpened : false, isReversed : false, isFilteringLevel : false, isFilteringCourse : false, isFilteringSeries : false, isSearching : false, colorPanelShowing : false, }; /********************************* ** Data Declaration Region ** *********************************/ var comp = { slCode : { prefix : 'https://code.sololearn.com/', suffix : '/?ref=app' }, slPost : { prefix : 'https://www.sololearn.com/post/', suffix : '/?ref=app', } }; var categories = { authors : new Set(), series : new Set(), courses : new Set(), lessons : new Set(), levels : new Set() }; var listEntries = []; var suppEntries = []; var namespace = ["js","gc","cp19","if"]; var data = [ { id : '0', // (int unique not null) category : "main", // (main entry) // "supp" (supplementary) follow : '', // (id) type : "slCode", // "slCode", "extRef" slNum : 'W3gS00IGw160', url : '', desc : { en : 'This is second tutorial which is the modern way, if you have not read the first tutorial yet, please click this to go through it for the basics.', } }, { id : '1', category : "main", follow : '', type : "slCode", slNum : 'WpoHI9UC2DUk', url : '', desc : { en : 'flexbox icon navbar', } }, { id : '2', category : "main", follow : '', type : "slCode", slNum : 'WvaRKiCT03Ii', url : '', desc : { en : 'grid menu', } }, ]; /********************************* ** Utility Function Region ** *********************************/ function $id(id) { return document.getElementById(id); } // randInt(min, max) function randInt(min,max){ return Math.floor(Math.random()*(max-min)+min); } // randColor() function randColor(){ return namespace[randInt(0,namespace.length)]; } function randThemeColor(){ modifyCSSVar(randColor()); } function matchesPolyfill(){ /** reference : https://developer.mozilla.org/en-US/docs/Web/API/Element/matches **/ if (!Element.prototype.matches) { Element.prototype.matches = Element.prototype .matchesSelector || Element.prototype .mozMatchesSelector || Element.prototype .msMatchesSelector || Element.prototype .oMatchesSelector || Element.prototype .webkitMatchesSelector || function(s) { var matches = ( this.document || this.ownerDocument ).querySelectorAll(s), i = matches.length; while (--i >= 0 && matches.item(i) !== this) { } return i > -1; }; } } // close matchesPolyfill() /********************************* ** Feature Functions Region ** *********************************/ function reverseOrder(){ $id("list-ctnr").innerHTML = ""; if(flags.isReversed){ for(var i=0;i-1;j--){ $id("list-ctnr") .appendChild(listEntries[j]); } } flags.isReversed = !flags.isReversed; } // close reverseOrder() function inputHandler(){ var searchArray = $id("searchBar").value.split(" "); for(var i=0; i < listEntries.length; i++ ){ var containing = true; var inThis = listEntries[i].innerHTML; for(var j=0 ; j < searchArray.length; j++){ incl( searchArray[j], inThis); } // close for j //showHide( listEntries[i], containing); listEntries[i].dataset.containAllStrings = containing; newShowHide(); } // close for i function incl(isthis, inthis){ var reg = new RegExp("\\b" + isthis); if (inthis.match(reg)===null){ containing = false; } } // close incl() function showHide(dom, containing){ if(containing){ dom.style.display = "block"; }else{ dom.style.display = "none"; } } // close showHide() } // close inputHandler() function newShowHide(){ if(switches.functionTracer){ console.log("newShowHide()"); } for(var i = 0; i < listEntries.length; i++ ){ //console.log(listEntries[i].dataset.containAllStrings); var searchMatch = !flags.isSearching || listEntries[i].dataset.containAllStrings; //console.log("searchMatch = " + searchMatch); //console.log(typeof searchMatch); //console.log(typeof listEntries[i].dataset.levelFit); var levelMatch = !flags.isFilteringLevel || listEntries[i].dataset.levelFit; //console.log("levelMatch = " + levelMatch); var courseMatch = !flags.isFilteringCourse || listEntries[i].dataset.courseFit; var seriesMatch = !flags.isFilteringSeries || listEntries[i].dataset.seriesFit; var fulfilledAll = !(searchMatch == "false") && !( levelMatch == "false") && !(courseMatch == "false") && !(seriesMatch == "false"); //console.log("fulfilledAll = " + fulfilledAll); //console.log(typeof fulfilledAll) if(fulfilledAll){ //console.log("in if code block"); listEntries[i].style.display = "block"; }else{ //console.log("in else code block"); listEntries[i].style.display = "none"; } } } // close newShowHide() function filterByLevel(keyword){ if(switches.functionTracer){ console.log("filterByLevel()"); } for(var i=0; i < listEntries.length; i++ ){ var thisID = listEntries[i].dataset.id; var thisLevel = data[thisID].level; //console.log(thisLevel); if(thisLevel==keyword){ listEntries[i].dataset.levelFit = "true"; }else{ listEntries[i].dataset.levelFit = "false"; } } // close for newShowHide(); } // close filterByLevel() function filterByCourse(keyword){ if(switches.functionTracer){ console.log("filterByCourse()"); } for(var i=0; i < listEntries.length; i++ ){ var thisID = listEntries[i].dataset.id; var thisCourse = data[thisID].course; //console.log(thisLevel); if(thisCourse==keyword){ listEntries[i].dataset.courseFit = "true"; }else{ listEntries[i].dataset.courseFit = "false"; } } // close for newShowHide(); } // close filterByCourse() function filterBySeries(keyword){ if(switches.functionTracer){ console.log("filterBySeries()"); } for(var i=0; i < listEntries.length; i++ ){ var thisID = listEntries[i].dataset.id; var thisSeries = data[thisID].series; //console.log(thisLevel); if(thisSeries==keyword){ listEntries[i].dataset.seriesFit = "true"; }else{ listEntries[i].dataset.seriesFit = "false"; } } // close for newShowHide(); } // close filterBySeries() function setFont(size){ document.body.className = ""; document.body.classList.add("font-"+size); } // close setFont() function modifyCSSVar(ns){ function setC(prop,col){ document.documentElement.style.setProperty('--'+prop, 'var(--'+col+')'); } setC("currentBackground",ns+"BG"); setC("currentFront",ns+"FT"); setC("borderColor",ns+"Bdr"); setC("curLgt",ns+"Lgt"); setC("curDrk",ns+"Drk"); } // close modifyCSSVar() function changeLang(lang){ lang = lang.toLowerCase(); loopOverArr(listEntries,lang); loopOverArr(suppEntries,lang); function loopOverArr(arr,lang) { for(var i = 0; i "+obj.course+" "+obj.level+""; parent.appendChild(child2);*/ } // close fillNewEntry() function renderListEntry(obj) { var newEntry = document.createElement("div"); fillNewEntry(newEntry,obj); newEntry.dataset.id = obj.id; var num = listEntries.length; listEntries[num] = newEntry; } // close renderListEntry() function appendSuppListEntry(obj){ var newEntry = document.createElement("div"); fillNewEntry(newEntry,obj); newEntry.dataset.id = obj.id; for(var i = 0; i < listEntries.length; i++){ if(listEntries[i].dataset.id == obj.follow){ listEntries[i].appendChild(newEntry); } // close if } // close for suppEntries.push(newEntry); } // close appendSuppListEntry() function renderFullList() { if(switches.functionTracer) console.log("renderFullList()"); for(var i=0; i