Widget:Menus3: verschil tussen versies
Regel 1.071: | Regel 1.071: | ||
if(!value.printouts.Parent[0]){ | if(!value.printouts.Parent[0]){ | ||
each = value; | each = value; | ||
− | + | console.log(each.printouts.Id) | |
// for (var [key, each] of Object.entries(topLevel(data))){ | // for (var [key, each] of Object.entries(topLevel(data))){ | ||
− | + | // each.dragchildren = traverse(data, each.printouts.Id[0]); | |
− | + | // nwtree.push(each); | |
} | } | ||
Versie van 10 nov 2020 14:36
<style>
li > ul:nth-of-type(2) b{ display:none } .fade-enter-active, .fade-leave-active { transition: opacity .2s;
} .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
.delay-enter-active { transition: opacity 0s; transition-delay:0s;
}
.delay-leave-active { transition: opacity 0s; transition-delay:1s;
} .delay-enter, .delay-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
} .dragging b, .dragging .clone-group, .clone{
pointer-events:none; } .delay2-enter-active { transition: opacity 0s; transition-delay:.5s;
}
.delay2-leave-active { transition: opacity 0s; transition-delay:0s;
} .delay2-enter, .delay2-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
/* .clone-group:before{ content:'[-]'; top:0; left:-2em; font-weight: 900; } */ .menu-form { padding: 2em;
} .menu-form label, .menu-form input, .menu-form select {
width: 100%; display: block;
}
#clone, #clone-group{ pointer-events:none;
} #clone span, #clone-group span, .info-clone span{
background: #d1d1ff;
color: #d1d1fd; filter: blur(2px); } .menu-tree #clone, .menu-tree #clone-group{ } .dragmode{ opacity:0.2; } .dragmode ul{ display:none; } .dragmode:after, .dragmode:before{ content:""; display:none; } li.info-drag:after, li.info-drag:before{ display:none; } li.info-drag{ position: absolute; width: fit-content; z-index: 999999999; top: 42px; transition:transform .5s; transform:translateX(120px) } li.info-drag.in{ transform:translateX(20px) } .info-drag span{ background: #00a7a9; } .info-drag .fa-hand-pointer { transform: translate(55px, -16px); font-size: 36px;
}
.tree-top-item { height: 1em; width: 100%; background: #cccccc;
} </style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/vuex"></script>
- clone
<label><input type="checkbox" v-model="help" class="d-none"> </label>
<select @change="getmenu" class="form-control" v-if="!selectedmenu" > <option disabled selected>Select a menu</option> <option v-for="menu in menus" :value="menu">
</select>
<script type="text/javascript">
var wikitexttosave = ""; var pagetosave = ""; var div = document.createElement('div'); div.innerText = "hoi2"; var mns = []; var namespace =[]; if(namespace.length){ namespace = namespace[0] }else{ namespace = false; } Vue.component('fav', {
template:`
`, props:{ result:String }, computed:{ name(){ return this.result.replace('fa-', ) }, icon(){ return 'fa '+this.result } }, methods:{ selecticon(e){ debounce('icon', this.result); app.ifsearch = false; } } }) //auto-save function, plugs in to vuex store to save all neede changes to tasks var autosave = function(store){ store.subscribe(function(mutation, state){ if(mutation.type === "type" || mutation.type === "href" || mutation.type === "icon" || mutation.type === "title" || mutation.type === "info" ){ //if right mutation save changes wtz(); } return }) } function wtz(){ //create wiki text var wikitext=` test link nog een link nog een link22`; //set status // store.commit('status', 'Saving ...'); //do mw-api post var flat = ""; // app.trees.forEach(function(ob) if(app.trees[1]){ var ob = app.trees[1]; if(ob.name){ console.log(ob); var order = 0; var level = 0; loopthat(ob.dragitems); function loopthat(x){ x.forEach(function(el){ var parnt =""; if(el.printouts.Parent && el.printouts.Parent.length ){ console.log(el.printouts.Parent) parnt = el.printouts.Parent[0]; } level++; flat += `"${order}" is geen getal. ${el.printouts.Text[0]}}`; order++ loopthat(el.dragchildren); level--; }) } console.log(flat) // saveToWiki(store.getters.selected.name, flat) wikitexttosave = ob.name; pagetosave = flat; } // console.log( ob.keys(ob).find(key => ob[key] === store.getters.selected.name) ); } //) // console.log(app.trees); // saveToWiki('Wiki:Sites menu', wikitext) } function saveToWiki(page, wikitext){ var params = { action: 'edit', title: page, text: wikitext, format: 'json' }, api = new mw.Api(); api.postWithToken( 'csrf', params ).done( function ( data ) { console.log( data ); mw.notify($('Saved')) //set status // store.commit('status', 'Saved'); } ); } var store = new Vuex.Store({ state:{ selected: "", dragging: "", info: "", clone: "" }, mutations:{ info(state, value){ state.info = value; }, select(state, item){ state.selected = item; app.search = state.selected.dragitem.printouts.Icon[0] }, clone(state, item){ state.clone = item; }, drag(state, item){ state.dragging = item; }, dragid(state, title){ state.dragging.dragitem.printouts.Id = [title]; }, parent(state, item){ state.dragging.dragitem.printouts.Parent = [item]; }, title(state, title){ state.selected.dragitem.printouts.Text = [title]; }, type(state, title){ state.selected.dragitem.printouts.Type = [title]; }, href(state, title){ state.selected.dragitem.printouts.Href = [title]; } , icon(state, title){ state.selected.dragitem.printouts.Icon = [title]; } }, actions:{ }, getters:{ dragging(state){ return state.dragging; }, selected(state){ return state.selected; }, info(state){ return state.info; }, clonen(state){ return state.clone; } }, plugins: [autosave]// the autosave plugin }) var counter = 0; Vue.component('dragitem', { props:{ dragitem:Object, name:String }, data: function() { return { isDragOver: false, } }, computed: { isselected(){ if(store.getters.selected == this){ return 'selected' } }, fa(){ if(this.dragitem.printouts.Icon){ return 'fa '+this.dragitem.printouts.Icon[0]; } }, cloneTitle() { if(store.getters.dragging){ return store.getters.dragging.dragitem.printouts.Text[0]; } }, tit(){ return this.dragitem.printouts.Text[0] } }, template: `
`, methods: { selected(e){ if(this.name != "Menu items"){ store.commit('select', this); } }, dragStart(e) { store.commit('info', "saved"); store.commit('drag', this); e.dataTransfer.dropEffect = 'move' e.dataTransfer.effectAllowed = 'move'; e.target.classList.add('dragmode'); setTimeout(function(){ e.target.style.display = "none"; },0) }, dragEnd(e) { e.target.classList.remove('dragmode'); e.target.style.display = ""; store.commit('drag', ""); $('#clonetainer').append($('#clone')) $('#clonetainer').append($('#clone-group')) }, dropItem(e){ if(this.name != "Menu items"){ $('#clonetainer').append($('#clone')) $('#clonetainer').append($('#clone-group')) var tosel = "" var tname = ~~(Date.now() / 1000); e.dataTransfer.dropEffect = 'move' e.dataTransfer.effectAllowed = 'move' var copu = store.getters.dragging.dragitem; if(this.isDragOver == 'side'){ console.log('side', this.dragitem.printouts.Id[0]) store.commit('parent', this.dragitem.printouts.Id[0]); }else{ // console.log(this.$parent.dragitems[this.$attrs.index]) if(this.dragitem.printouts.Parent && this.dragitem.printouts.Parent[0]){ console.log('notside', this.dragitem.printouts.Parent[0]) store.commit('parent', this.dragitem.printouts.Parent[0]); }else{ console.log('notside', 'no parent') store.commit('parent', ) } } elm = this; if(store.getters.dragging.name == "Menu items"){ console.log('keep'); store.commit('dragid', 'zzz'+tname); // setTimeout(function(){ // console.log(this) // tosel = elm.$el.closest('.menu-tree').querySelector('#zzz'+tname); // },1000) // store.getters.dragging.dragitem.dragchildren.splice(0,0, clonex); var clonex = copy(store.getters.dragging.dragitem) store.getters.dragging.$parent.dragitems.splice(store.getters.dragging.$attrs.index, 1, clonex); }else{ store.getters.dragging.$parent.dragitems.splice(store.getters.dragging.$attrs.index, 1); // var id = store.getters.dragging.dragitem.printouts.Id[0] // setTimeout(function(){ // tosel = elm.$el.closest('.menu-tree').querySelector('#'+id); // },1000) } // console.log(store.getters.dragging.$el) if(this.isDragOver == 'side'){ // this.addItem(copu); this.dragitem.dragchildren.splice(0,0, copu) }else{ // var id = store.getters.dragging.dragitem.printouts.Id[0] this.$parent.dragitems.splice(this.$attrs.index + 1, 0, copu) // setTimeout(function(){ // tosel = elm.$el.closest('.menu-tree').querySelector('#'+id); //},1000) } // e.target.style.borderBottom = ""; if(store.getters.dragging.name == "Menu items"){ store.commit('select', store.getters.dragging); // store.commit('select', store.getters.dragging); // store.commit('select', clonex); }else{ store.commit('select', store.getters.dragging); } store.commit('drag', ""); this.isDragOver = false; // store.commit('info', "saving"); // setTimeout(function(){ // console.log(this) // tosel.click(); // },1000) wtz(); } }, addItem(item) { this.dragitem.dragchildren.splice(0,0, item) }, dragOver(e){ if(this.name != "Menu items"){ // console.log(this.dragitem.printouts.Text[0]) // console.log("mouse", e.clientX); var viewportOffset = e.target.getBoundingClientRect(); // console.log("el", viewportOffset.left); if(e.clientY - viewportOffset.top > 20){ console.log(e.clientY, viewportOffset.top ) } if((e.clientX - viewportOffset.left) > 40 ){ if( this.isDragOver != "side"){ console.log('side') this.isDragOver = "side"; if(e.target.closest('li').querySelector('ul')){ $('#clonetainer').append($('#clone-group')) $(e.target.closest('li').querySelector('ul')).prepend($('#clone')) }else{ $('#clonetainer').append($('#clone')) $(e.target.closest('li')).append($('#clone-group')) } } }else{ if(!this.isDragOver || this.isDragOver == "side"){ $('#clonetainer').append($('#clone-group')) $(e.target.closest('li')).after($('#clone')) console.log('not-side') } this.isDragOver = true; } } }, dragOut(e){ // $('#clonetainer').append($('#clone')) // $('#clonetainer').append($('#clone-group')) if(this.isDragOver == "side"){ // console.log(store.getters.clonen) //store.getters.clonen.dragitem.dragchildren.splice(0,1) // var chld = [] // store.getters.clonen.dragitem.dragchildren.forEach(function(el, index){ // console.log(index) // if(el.printouts.Id[0] != 'clone'){ // store.getters.clonen.dragitem.dragchildren.splice(0,1) // } // store.getters.clonen.dragitem.dragchildren = chld; // }) }else{ // console.log(store.getters.clonen) // store.getters.clonen.$parent.dragitems.splice(store.getters.clonen.$attrs.index + 1, 1) } // console.log(this); // e.target.style.borderBottom = ""; // counter--; // console.log(counter) // if(counter === 0){ this.isDragOver = false; // } } } }) Vue.component('itemgroup', { props:{ dragitems:Object, name:String }, template: `
-
Sjabloon:IsOpen ? '-' : '+'
<dragitem :name="name"
v-show="isOpen"
v-for="(dragitem, index) in dragitems"
:key="dragitem.printouts.Id[0]"
:id="dragitem.printouts.Id[0]"
:index="index"
:dragitem="dragitem"
></dragitem>
`,
computed: { isFolder: function() { return this.dragitems.length ; } }, data: function() { return { isOpen: true }; }, methods: { toggle: function() { if (this.isFolder) { this.isOpen = !this.isOpen; } } }
})
//
- Sjabloon:Menuname
- hoi <itemgroup :dragitems="dragitems" :name="name" ></itemgroup>
Vue.component('tree', {
template:`
`,
props:{ dragitems:Object, name:String }, computed:{ menuname(){ if(!namespace){ return this.name; } } }, methods:{ dragover(e){ if(this.name != "Menu items"){
$(e.target.closest('.menu-tree').querySelector('ul')).prepend($('#clone')) } }, dropit(e){ if(this.name != "Menu items"){ var clonex = copy(store.getters.dragging.dragitem)
this.dragitems.unshift(clonex); wtz(); } //console.log('hoi', this) } }
})
var app = new Vue({
el: '#app', computed: { filterresult(){//function to filter to do tasks list, it takes input form the text input on the top right if(this.search && this.search != 'None'){ var search = this.search.replace('/','\/'); var favs = this.faicons; var regex = new RegExp(search, 'i'); var filtered = favs.filter( function(key, index){//chek if plaats, adres, naam of opdracht number contains the search term // console.log(key, index) if(regex.exec(key)){ return favs[index]; } }) if( filtered.length){ return filtered; }else{ return ['no results'] } }else{//else show all the tasks to do this.search = ""; return this.faicons; } }, selectedmenu(){ return this.selectedmenu; }, isPageType(){ if(store.getters.selected && store.getters.selected.dragitem.printouts.Type[0] == "page" && this.space){ return true; } }, infodrag(){ if(this.info){ return 'info-drag'; }else{
return 'info-drag in'; }
}, Title() { if(store.getters.selected){ return store.getters.selected.dragitem.printouts.Text[0]; } }, Href() { if(store.getters.selected && store.getters.selected.dragitem.printouts.Href){ return store.getters.selected.dragitem.printouts.Href[0]; } }, Type() { if(store.getters.selected && store.getters.selected.dragitem.printouts.Type){ return store.getters.selected.dragitem.printouts.Type[0]; } }, Icon() { if(store.getters.selected && store.getters.selected.dragitem.printouts.Icon){ return store.getters.selected.dragitem.printouts.Icon[0]; } }, dragging(){ if(store.getters.dragging){ return 'dragging'; } } }, data: {trees:[{ name:"Menu items", dragitems: [ { printouts: { Id:["page"], Type:["page"], Text: ["page"], Icon: ["fa-link"], Href: ["link"] }, dragchildren: [] }, { printouts: { Id:["external"], Type:["external"], Text:["external"], Icon: ["fa-external-link-alt"], Href: ['external'] }, dragchildren: [] }, { printouts: { Id:["template"], Type:["template"], Text:["template"], Icon: ["fa-cog"], Href: ['template'] }, dragchildren: [] }, { printouts: { Id:["dropdown"], Type:["dropdown"], Text: ["dropdown"], Icon: ["fa-chevron-down"], Href: ["dropdown"] }, dragchildren: [] } ] }
],
selectedmenu:false, pages:[], search:"", space:namespace, menus:mns, info:false, pause:true, help:false, ifsearch:false, faicons:["None", "fa-address-book", "fa-address-book-o", "fa-address-card", "fa-address-card-o", "fa-adjust", "fa-adn", "fa-align-center", "fa-align-justify", "fa-align-left", "fa-align-right", "fa-amazon", "fa-ambulance", "fa-american-sign-language-interpreting", "fa-anchor", "fa-android", "fa-angellist", "fa-angle-double-down", "fa-angle-double-left", "fa-angle-double-right", "fa-angle-double-up", "fa-angle-down", "fa-angle-left", "fa-angle-right", "fa-angle-up", "fa-apple", "fa-archive", "fa-area-chart", "fa-arrow-circle-down", "fa-arrow-circle-left", "fa-arrow-circle-o-down", "fa-arrow-circle-o-left", "fa-arrow-circle-o-right", "fa-arrow-circle-o-up", "fa-arrow-circle-right", "fa-arrow-circle-up", "fa-arrow-down", "fa-arrow-left", "fa-arrow-right", "fa-arrow-up", "fa-arrows", "fa-arrows-alt", "fa-arrows-h", "fa-arrows-v", "fa-asl-interpreting", "fa-assistive-listening-systems", "fa-asterisk", "fa-at", "fa-audio-description", "fa-automobile", "fa-backward", "fa-balance-scale", "fa-ban", "fa-bandcamp", "fa-bank", "fa-bar-chart", "fa-bar-chart-o", "fa-barcode", "fa-bars", "fa-bath", "fa-bathtub", "fa-battery", "fa-battery-0", "fa-battery-1", "fa-battery-2", "fa-battery-3", "fa-battery-4", "fa-battery-empty", "fa-battery-full", "fa-battery-half", "fa-battery-quarter", "fa-battery-three-quarters", "fa-bed", "fa-beer", "fa-behance", "fa-behance-square", "fa-bell", "fa-bell-o", "fa-bell-slash", "fa-bell-slash-o", "fa-bicycle", "fa-binoculars", "fa-birthday-cake", "fa-bitbucket", "fa-bitbucket-square", "fa-bitcoin", "fa-black-tie", "fa-blind", "fa-bluetooth", "fa-bluetooth-b", "fa-bold", "fa-bolt", "fa-bomb", "fa-book", "fa-bookmark", "fa-bookmark-o", "fa-braille", "fa-briefcase", "fa-btc", "fa-bug", "fa-building", "fa-building-o", "fa-bullhorn", "fa-bullseye", "fa-bus", "fa-buysellads", "fa-cab", "fa-calculator", "fa-calendar", "fa-calendar-check-o", "fa-calendar-minus-o", "fa-calendar-o", "fa-calendar-plus-o", "fa-calendar-times-o", "fa-camera", "fa-camera-retro", "fa-car", "fa-caret-down", "fa-caret-left", "fa-caret-right", "fa-caret-square-o-down", "fa-caret-square-o-left", "fa-caret-square-o-right", "fa-caret-square-o-up", "fa-caret-up", "fa-cart-arrow-down", "fa-cart-plus", "fa-cc", "fa-cc-amex", "fa-cc-diners-club", "fa-cc-discover", "fa-cc-jcb", "fa-cc-mastercard", "fa-cc-paypal", "fa-cc-stripe", "fa-cc-visa", "fa-certificate", "fa-chain", "fa-chain-broken", "fa-check", "fa-check-circle", "fa-check-circle-o", "fa-check-square", "fa-check-square-o", "fa-chevron-circle-down", "fa-chevron-circle-left", "fa-chevron-circle-right", "fa-chevron-circle-up", "fa-chevron-down", "fa-chevron-left", "fa-chevron-right", "fa-chevron-up", "fa-child", "fa-chrome", "fa-circle", "fa-circle-o", "fa-circle-o-notch", "fa-circle-thin", "fa-clipboard", "fa-clock-o", "fa-clone", "fa-close", "fa-cloud", "fa-cloud-download", "fa-cloud-upload", "fa-cny", "fa-code", "fa-code-fork", "fa-codepen", "fa-codiepie", "fa-coffee", "fa-cog", "fa-cogs", "fa-columns", "fa-comment", "fa-comment-o", "fa-commenting", "fa-commenting-o", "fa-comments", "fa-comments-o", "fa-compass", "fa-compress", "fa-connectdevelop", "fa-contao", "fa-copy", "fa-copyright", "fa-creative-commons", "fa-credit-card", "fa-credit-card-alt", "fa-crop", "fa-crosshairs", "fa-css3", "fa-cube", "fa-cubes", "fa-cut", "fa-cutlery", "fa-dashboard", "fa-dashcube", "fa-database", "fa-deaf", "fa-deafness", "fa-dedent", "fa-delicious", "fa-desktop", "fa-deviantart", "fa-diamond", "fa-digg", "fa-dollar", "fa-dot-circle-o", "fa-download", "fa-dribbble", "fa-drivers-license", "fa-drivers-license-o", "fa-dropbox", "fa-drupal", "fa-edge", "fa-edit", "fa-eercast", "fa-eject", "fa-ellipsis-h", "fa-ellipsis-v", "fa-empire", "fa-envelope", "fa-envelope-o", "fa-envelope-open", "fa-envelope-open-o", "fa-envelope-square", "fa-envira", "fa-eraser", "fa-etsy", "fa-eur", "fa-euro", "fa-exchange", "fa-exclamation", "fa-exclamation-circle", "fa-exclamation-triangle", "fa-expand", "fa-expeditedssl", "fa-external-link", "fa-external-link-square", "fa-eye", "fa-eye-slash", "fa-eyedropper", "fa-fa", "fa-facebook", "fa-facebook-f", "fa-facebook-official", "fa-facebook-square", "fa-fast-backward", "fa-fast-forward", "fa-fax", "fa-feed", "fa-female", "fa-fighter-jet", "fa-file", "fa-file-archive-o", "fa-file-audio-o", "fa-file-code-o", "fa-file-excel-o", "fa-file-image-o", "fa-file-movie-o", "fa-file-o", "fa-file-pdf-o", "fa-file-photo-o", "fa-file-picture-o", "fa-file-powerpoint-o", "fa-file-sound-o", "fa-file-text", "fa-file-text-o", "fa-file-video-o", "fa-file-word-o", "fa-file-zip-o", "fa-files-o", "fa-film", "fa-filter", "fa-fire", "fa-fire-extinguisher", "fa-firefox", "fa-first-order", "fa-flag", "fa-flag-checkered", "fa-flag-o", "fa-flash", "fa-flask", "fa-flickr", "fa-floppy-o", "fa-folder", "fa-folder-o", "fa-folder-open", "fa-folder-open-o", "fa-font", "fa-font-awesome", "fa-fonticons", "fa-fort-awesome", "fa-forumbee", "fa-forward", "fa-foursquare", "fa-free-code-camp", "fa-frown-o", "fa-futbol-o", "fa-gamepad", "fa-gavel", "fa-gbp", "fa-ge", "fa-gear", "fa-gears", "fa-genderless", "fa-get-pocket", "fa-gg", "fa-gg-circle", "fa-gift", "fa-git", "fa-git-square", "fa-github", "fa-github-alt", "fa-github-square", "fa-gitlab", "fa-gittip", "fa-glass", "fa-glide", "fa-glide-g", "fa-globe", "fa-google", "fa-google-plus", "fa-google-plus-circle", "fa-google-plus-official", "fa-google-plus-square", "fa-google-wallet", "fa-graduation-cap", "fa-gratipay", "fa-grav", "fa-group", "fa-h-square", "fa-hacker-news", "fa-hand-grab-o", "fa-hand-lizard-o", "fa-hand-o-down", "fa-hand-o-left", "fa-hand-o-right", "fa-hand-o-up", "fa-hand-paper-o", "fa-hand-peace-o", "fa-hand-pointer-o", "fa-hand-rock-o", "fa-hand-scissors-o", "fa-hand-spock-o", "fa-hand-stop-o", "fa-handshake-o", "fa-hard-of-hearing", "fa-hashtag", "fa-hdd-o", "fa-header", "fa-headphones", "fa-heart", "fa-heart-o", "fa-heartbeat", "fa-history", "fa-home", "fa-hospital-o", "fa-hotel", "fa-hourglass", "fa-hourglass-1", "fa-hourglass-2", "fa-hourglass-3", "fa-hourglass-end", "fa-hourglass-half", "fa-hourglass-o", "fa-hourglass-start", "fa-houzz", "fa-html5", "fa-i-cursor", "fa-id-badge", "fa-id-card", "fa-id-card-o", "fa-ils", "fa-image", "fa-imdb", "fa-inbox", "fa-indent", "fa-industry", "fa-info", "fa-info-circle", "fa-inr", "fa-instagram", "fa-institution", "fa-internet-explorer", "fa-intersex", "fa-ioxhost", "fa-italic", "fa-joomla", "fa-jpy", "fa-jsfiddle", "fa-key", "fa-keyboard-o", "fa-krw", "fa-language", "fa-laptop", "fa-lastfm", "fa-lastfm-square", "fa-leaf", "fa-leanpub", "fa-legal", "fa-lemon-o", "fa-level-down", "fa-level-up", "fa-life-bouy", "fa-life-buoy", "fa-life-ring", "fa-life-saver", "fa-lightbulb-o", "fa-line-chart", "fa-link", "fa-linkedin", "fa-linkedin-square", "fa-linode", "fa-linux", "fa-list", "fa-list-alt", "fa-list-ol", "fa-list-ul", "fa-location-arrow", "fa-lock", "fa-long-arrow-down", "fa-long-arrow-left", "fa-long-arrow-right", "fa-long-arrow-up", "fa-low-vision", "fa-magic", "fa-magnet", "fa-mail-forward", "fa-mail-reply", "fa-mail-reply-all", "fa-male", "fa-map", "fa-map-marker", "fa-map-o", "fa-map-pin", "fa-map-signs", "fa-mars", "fa-mars-double", "fa-mars-stroke", "fa-mars-stroke-h", "fa-mars-stroke-v", "fa-maxcdn", "fa-meanpath", "fa-medium", "fa-medkit", "fa-meetup", "fa-meh-o", "fa-mercury", "fa-microchip", "fa-microphone", "fa-microphone-slash", "fa-minus", "fa-minus-circle", "fa-minus-square", "fa-minus-square-o", "fa-mixcloud", "fa-mobile", "fa-mobile-phone", "fa-modx", "fa-money", "fa-moon-o", "fa-mortar-board", "fa-motorcycle", "fa-mouse-pointer", "fa-music", "fa-navicon", "fa-neuter", "fa-newspaper-o", "fa-object-group", "fa-object-ungroup", "fa-odnoklassniki", "fa-odnoklassniki-square", "fa-opencart", "fa-openid", "fa-opera", "fa-optin-monster", "fa-outdent", "fa-pagelines", "fa-paint-brush", "fa-paper-plane", "fa-paper-plane-o", "fa-paperclip", "fa-paragraph", "fa-paste", "fa-pause", "fa-pause-circle", "fa-pause-circle-o", "fa-paw", "fa-paypal", "fa-pencil", "fa-pencil-square", "fa-pencil-square-o", "fa-percent", "fa-phone", "fa-phone-square", "fa-photo", "fa-picture-o", "fa-pie-chart", "fa-pied-piper", "fa-pied-piper-alt", "fa-pied-piper-pp", "fa-pinterest", "fa-pinterest-p", "fa-pinterest-square", "fa-plane", "fa-play", "fa-play-circle", "fa-play-circle-o", "fa-plug", "fa-plus", "fa-plus-circle", "fa-plus-square", "fa-plus-square-o", "fa-podcast", "fa-power-off", "fa-print", "fa-product-hunt", "fa-puzzle-piece", "fa-qq", "fa-qrcode", "fa-question", "fa-question-circle", "fa-question-circle-o", "fa-quora", "fa-quote-left", "fa-quote-right", "fa-ra", "fa-random", "fa-ravelry", "fa-rebel", "fa-recycle", "fa-reddit", "fa-reddit-alien", "fa-reddit-square", "fa-refresh", "fa-registered", "fa-remove", "fa-renren", "fa-reorder", "fa-repeat", "fa-reply", "fa-reply-all", "fa-resistance", "fa-retweet", "fa-rmb", "fa-road", "fa-rocket", "fa-rotate-left", "fa-rotate-right", "fa-rouble", "fa-rss", "fa-rss-square", "fa-rub", "fa-ruble", "fa-rupee", "fa-s15", "fa-safari", "fa-save", "fa-scissors", "fa-scribd", "fa-search", "fa-search-minus", "fa-search-plus", "fa-sellsy", "fa-send", "fa-send-o", "fa-server", "fa-share", "fa-share-alt", "fa-share-alt-square", "fa-share-square", "fa-share-square-o", "fa-shekel", "fa-sheqel", "fa-shield", "fa-ship", "fa-shirtsinbulk", "fa-shopping-bag", "fa-shopping-basket", "fa-shopping-cart", "fa-shower", "fa-sign-in", "fa-sign-language", "fa-sign-out", "fa-signal", "fa-signing", "fa-simplybuilt", "fa-sitemap", "fa-skyatlas", "fa-skype", "fa-slack", "fa-sliders", "fa-slideshare", "fa-smile-o", "fa-snapchat", "fa-snapchat-ghost", "fa-snapchat-square", "fa-snowflake-o", "fa-soccer-ball-o", "fa-sort", "fa-sort-alpha-asc", "fa-sort-alpha-desc", "fa-sort-amount-asc", "fa-sort-amount-desc", "fa-sort-asc", "fa-sort-desc", "fa-sort-down", "fa-sort-numeric-asc", "fa-sort-numeric-desc", "fa-sort-up", "fa-soundcloud", "fa-space-shuttle", "fa-spinner", "fa-spoon", "fa-spotify", "fa-square", "fa-square-o", "fa-stack-exchange", "fa-stack-overflow", "fa-star", "fa-star-half", "fa-star-half-empty", "fa-star-half-full", "fa-star-half-o", "fa-star-o", "fa-steam", "fa-steam-square", "fa-step-backward", "fa-step-forward", "fa-stethoscope", "fa-sticky-note", "fa-sticky-note-o", "fa-stop", "fa-stop-circle", "fa-stop-circle-o", "fa-street-view", "fa-strikethrough", "fa-stumbleupon", "fa-stumbleupon-circle", "fa-subscript", "fa-subway", "fa-suitcase", "fa-sun-o", "fa-superpowers", "fa-superscript", "fa-support", "fa-table", "fa-tablet", "fa-tachometer", "fa-tag", "fa-tags", "fa-tasks", "fa-taxi", "fa-telegram", "fa-television", "fa-tencent-weibo", "fa-terminal", "fa-text-height", "fa-text-width", "fa-th", "fa-th-large", "fa-th-list", "fa-themeisle", "fa-thermometer", "fa-thermometer-0", "fa-thermometer-1", "fa-thermometer-2", "fa-thermometer-3", "fa-thermometer-4", "fa-thermometer-empty", "fa-thermometer-full", "fa-thermometer-half", "fa-thermometer-quarter", "fa-thermometer-three-quarters", "fa-thumb-tack", "fa-thumbs-down", "fa-thumbs-o-down", "fa-thumbs-o-up", "fa-thumbs-up", "fa-ticket", "fa-times", "fa-times-circle", "fa-times-circle-o", "fa-times-rectangle", "fa-times-rectangle-o", "fa-tint", "fa-toggle-down", "fa-toggle-left", "fa-toggle-off", "fa-toggle-on", "fa-toggle-right", "fa-toggle-up", "fa-trademark", "fa-train", "fa-transgender", "fa-transgender-alt", "fa-trash", "fa-trash-o", "fa-tree", "fa-trello", "fa-tripadvisor", "fa-trophy", "fa-truck", "fa-try", "fa-tty", "fa-tumblr", "fa-tumblr-square", "fa-turkish-lira", "fa-tv", "fa-twitch", "fa-twitter", "fa-twitter-square", "fa-umbrella", "fa-underline", "fa-undo", "fa-universal-access", "fa-university", "fa-unlink", "fa-unlock", "fa-unlock-alt", "fa-unsorted", "fa-upload", "fa-usb", "fa-usd", "fa-user", "fa-user-circle", "fa-user-circle-o", "fa-user-md", "fa-user-o", "fa-user-plus", "fa-user-secret", "fa-user-times", "fa-users", "fa-vcard", "fa-vcard-o", "fa-venus", "fa-venus-double", "fa-venus-mars", "fa-viacoin", "fa-viadeo", "fa-viadeo-square", "fa-video-camera", "fa-vimeo", "fa-vimeo-square", "fa-vine", "fa-vk", "fa-volume-control-phone", "fa-volume-down", "fa-volume-off", "fa-volume-up", "fa-warning", "fa-wechat", "fa-weibo", "fa-weixin", "fa-whatsapp", "fa-wheelchair", "fa-wheelchair-alt", "fa-wifi", "fa-wikipedia-w", "fa-window-close", "fa-window-close-o", "fa-window-maximize", "fa-window-minimize", "fa-window-restore", "fa-windows", "fa-won", "fa-wordpress", "fa-wpbeginner", "fa-wpexplorer", "fa-wpforms", "fa-wrench", "fa-xing", "fa-xing-square", "fa-y-combinator", "fa-y-combinator-square", "fa-yahoo", "fa-yc", "fa-yc-square", "fa-yelp", "fa-yen", "fa-yoast", "fa-youtube", "fa-youtube-play", "fa-youtube-square"]
}, methods:{
play(){
this.pause = false; render()
}, stop(){ this.pause = true; }, showsearch(){ this.ifsearch = true; setTimeout(function(){ document.querySelector('#fasearch input').focus() },100) }, savemenu(){ if(wikitexttosave){ saveToWiki(wikitexttosave, pagetosave); } }, getmenu(e){ tasksToDo(e.target.value); this.selectedmenu = true; getpages() }, input(e){ debounce('title', e.target.value); }, inputtype(e){ debounce('type', e.target.value); }, inputhref(e){ if(store.getters.selected && store.getters.selected.dragitem.printouts.Type[0] == "external"){ if(!e.target.value.toLowerCase().includes('http')){ debounce('href', 'http://'+e.target.value); }else{ debounce('href', e.target.value); } }else{ debounce('href', e.target.value);
} }, inputpage(e){ // document.querySelector('#textmenu').value = 'hoi' // debounce('href', e.target.value); // debounce('title', e.target.value); store.commit('title', e.target.querySelector('[value="'+e.target.value+'"]').innerText); store.commit('href', e.target.value); // store.commit(action, val); }, inputicon(e){ debounce('icon', e.target.value); }, removeItem(e){ e.target.closest('.trashcan').classList.add('active') setTimeout(function(){ e.target.closest('.trashcan').classList.remove('active') },1000) store.getters.dragging.$parent.dragitems.splice(store.getters.dragging.$attrs.index, 1) store.commit('drag', ""); wtz(); }, trashDragEnter(e){ // e.target.closest('.trashcan').classList.add('active') }, trashDragLeave(e){ // e.target.closest('.trashcan').classList.remove('active') }
} })
var iz = 0;
function render() {
if (++iz % 120 == 0){ if( app.info == true){ app.info = false; }else{ app.info = true; } } if(app.pause == true){return} requestAnimationFrame(render)
}
function debounce(action, val){
if (this.timeout) clearTimeout(this.timeout)//debounce this.timeout = setTimeout(() => { store.commit(action, val); }, 300)
}
//function to copy object function copy(o) { if (o === null) return null;
var output, v, key; output = Array.isArray(o) ? [] : {}; for (key in o) { v = o[key]; output[key] = (typeof v === "object") ? copy(v) : v; } return output; } var nwtree = [];
var tree = "";
//function to get the tasks to do, gets triggerd the first time through mediawiki:common.js because of mw.api var tasksToDo = function(page){ // store.commit('status', 'Loading ...');//set status //create the #ask var params = { action: 'ask', query: `\[\[Subobject of::${page}\]\]|?Id|?Parent|?Href|?Text|?Icon|?Type|?order|sort=order|order=asc`, format: 'json' }, api = new mw.Api();//need to add fail function
api.postWithToken( 'csrf', params ).done( function ( data ) {
console.log(data.query.results) if(data.query.results.length == undefined){ // PopulateTreeNode(data.query.results, 'none'); // console.log(tree) nwtree = []; treez(data.query.results) var obg = {name:page, dragitems:nwtree}; app.trees.push(obg ) }else{//if result is array create empty object var tname = ~~(Date.now() / 1000); var obg = {name:page, dragitems:[ { printouts: { Id:[tname], Type:["page"], Text: ["page"], Icon: ["fa-link"], Href: ["link"] }, dragchildren: [] }]} app.trees.push(obg ) } } ); } function getpages(){ if(app.space){ var params = { action: 'ask', query: `\[\[Class::Page\]\]\[\[Namespace::${app.space}\]\]|?Title`, format: 'json' }, api = new mw.Api();//need to add fail function
api.postWithToken( 'csrf', params ).done( function ( data ) { // console.log(data.query.results); app.pages = data.query.results; }) } }
function topLevel(data) { for (var [key, value] of Object.entries(data)){ // console.log(value) if(!value.printouts.Parent[0]){
//console.log(value)
return value; } }
}
//var nwtree {}; function treez3(data) { var levs = []; for (var [key, value] of Object.entries(data)){ levs.push(levelup(value, data)); } // console.log(levs) return levs;
} function levelup(each, data){ if(!each.printouts.Parent[0]){ // console.log(each.printouts.Id)
// for (var [key, each] of Object.entries(topLevel(data))){ each.dragchildren = traverse(data, each.printouts.Id[0]); return each; } } function treez(data) { // console.log(data) //var each = topLevel(data); for (var [key, value] of Object.entries(data)){ // console.log(value.printouts.Text, value.printouts.Parent) if(!value.printouts.Parent[0]){ each = value; console.log(each.printouts.Id)
// for (var [key, each] of Object.entries(topLevel(data))){ // each.dragchildren = traverse(data, each.printouts.Id[0]); // nwtree.push(each); } } // };
}
function traverse(data, parentId) { var children = []; for (var [key, each] of Object.entries(data)){ if(each.printouts.Parent[0] == parentId){ children.push(each); } } children.forEach(child => { child.dragchildren = traverse(data, child.printouts.Id[0]); }); return children;
}
if(namespace){ setTimeout(function(){ tasksToDo(mns); app.selectedmenu = true; getpages() }, 1500) }
</script>