-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
use json to dynamically build multi selection tree
- Loading branch information
peterorlowsky
committed
Apr 23, 2018
1 parent
f9c701c
commit 310aa1b
Showing
3 changed files
with
3,848 additions
and
98 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,67 @@ | ||
| order = [] | ||
| anchors = $$('a') | ||
| anchors.addClass('test') | ||
| $$('a').addEvent('click', function(event){ | ||
| recursiveRemoveClass(event.target.parentElement.parentElement, 'clicked') | ||
| event.target.parentElement.addClass('clicked') | ||
| level = Number(event.target.parentElement.parentElement.id.replace('level', '')) | ||
| addProperty(level, event.target.innerHTML) | ||
| console.log('your Order: ' + order) | ||
| }); | ||
| function addProperty(level, item){ | ||
| order[level] = item | ||
| //slice the last part of the array | ||
| if(level < order.length-1) { | ||
| order = order.slice(0, level+1) | ||
| } | ||
| const locale = 'de'; // 'set to 'en' for english localisation | ||
| let selectedId = ''; | ||
| // run into CORS while serving .json local on Chrome - run in firefox for developent | ||
| const jsonRequest = new Request.JSON({ | ||
| url: 'navigation.json', | ||
| headers: {'Access-Control-Allow-Headers': ' X-Requested-With'}, | ||
| onSuccess: function(navigation){ | ||
| buildMultiSelection(navigation, '.nav.site-nav', '.flyout').inject('ms-wrapper') | ||
| }}).send(); | ||
|
|
||
| function buildMultiSelection(navigation, ulClasses, liClasses) { | ||
| let multiSelection = new Element('ul' + ulClasses); | ||
| navigation.forEach(function(selectable) { | ||
| let listElement = new Element('li' + liClasses).grab( | ||
| new Element('a',{ | ||
| text: locale === 'de'? selectable.titleDe: selectable.titleEn, | ||
| href: '#', | ||
| events: { | ||
| click: function (event) { | ||
| recursiveRemoveClass(event.target.parentElement.parentElement, 'clicked'); | ||
| event.target.parentElement.addClass('clicked'); | ||
| selectedId = selectable.id; | ||
| enableSearch(selectable.executable); | ||
| } | ||
| } | ||
| }) | ||
| ); | ||
| if(selectable.children != null){ | ||
| listElement.grab(buildMultiSelection(selectable.children, '.flyout-content.nav.stacked', '.flyout-alt')); | ||
| } | ||
| multiSelection.grab(listElement); | ||
| }); | ||
| return multiSelection; | ||
| } | ||
| function enableSearch(executable){ | ||
| $$('button').setProperties({ | ||
| disabled: !executable | ||
| }) | ||
| } | ||
|
|
||
| function recursiveRemoveClass(element, className) { | ||
| if(element.children) { | ||
| for (var i = 0; i < element.children.length; i++) { | ||
| recursiveRemoveClass(element.children[i], className) | ||
| if (element.children) { | ||
| for (let i = 0; i < element.children.length; i++) { | ||
| recursiveRemoveClass(element.children[i], className); | ||
| } | ||
| } | ||
| element.removeClass(className) | ||
| } | ||
| element.removeClass(className); | ||
| } | ||
|
|
||
| // function loadJSON(callback) { | ||
| // var xobj = new XMLHttpRequest(); | ||
| // xobj.overrideMimeType("application/json"); | ||
| // xobj.open('GET', 'navigation.json', true); | ||
| // xobj.onreadystatechange = function () { | ||
| // if (xobj.readyState == 4 && xobj.status == "200") { | ||
| // // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode | ||
| // callback(xobj.responseText); | ||
| // } | ||
| // }; | ||
| // xobj.send(null); | ||
| // } | ||
|
|
||
| // loadJSON(res => { | ||
| // navigation = JSON.parse(res) | ||
| // console.log(navigation) | ||
| // buildMultiSelection(navigation) | ||
| // }) |
Oops, something went wrong.