Widget:Menus3
<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-tree span {
width: 100%;
padding: .5em 1em;
background: #cdcdd2;
display: block;
margin: 0;
border-radius: 4px;
}
.menu-tree b { float: left;
transform: translate(-77px,-28px); color: #cdcdd2; background: white; position: absolute; z-index: 999999; border: 2px solid #cccccc; border-radius: 50%; height: 1em; width: 1em; cursor: pointer; text-align: center; padding: 0; line-height: .6em;
}
.menu-tree ul {
list-style: none;
} .menu-tree span .fa {
margin-right: 6px;
}
.clone, #app .clone-group li span{
pointer-events:none; }
hr {
border-top: 1px solid #dedeed;
}
.icon-list li:hover {
background: #cdcdd2;
} .icon-list i {
margin-right: 1em;
} .icon-list {
list-style: none; max-height: 6em; overflow-y: scroll; position: absolute; background: white; padding: .2em; border: 1px solid; width: calc(100% - 4em); left: 2em;
}
.menu-form {
position: relative; padding: 2em;
}
.menu-tree span.selected {
background: #182054; color: white;
}
.trashcan {
background: white;
border: 1px solid #d4d6e9;
width: 80px;
margin: 2em auto;
text-align: center;
height: 121px;
border-radius: 14px 14px 0 0;
filter: drop-shadow(2px 4px 6px #d4d6e9);
border-bottom-left-radius: 20px 182%;
border-bottom-right-radius: 20px 182%;
}
.trashcan div:first-child {
border-radius: 14px 14px 0 0; background: #182054; height: 33px; border: 5px solid white; border-bottom-left-radius: 13px 100%; border-bottom-right-radius: 13px 100%;
}
.trashcan div:last-child {
margin-top: 12px; font-size: 2em; color: #3da7a9;
}
.trashcan.active:before {
content: 'bye'; position: absolute; top: -69px; left: -36px; background: #3da7a9; padding: .5em 1.5em; border-radius: 5px; animation: bey 1s; transform-origin: bottom; transform:translate(0px,0px) rotate(0deg) scaleY(0) scaleX(1);
}
@keyframes bey{
0%{
transform:translate(0px,0px) rotate(0deg) scaleY(0) scaleX(1);
}
50%{
transform:translate(15px, 10px) rotate(45deg) scaleY(1) scaleX(1);
}
100%{
transform:translate(20px, 50px) rotate(90deg) scaleY(1) scaleX(0);
}
}
.menu-tree ul {
margin-left: 20px;
}
.menu-tree li {
list-style-type: none; margin-right: 10px; position: relative; margin-top: 0; margin-left: 0; margin-bottom: 0; padding-top: 10px;
}
.menu-tree li::before {
content: ""; position: absolute; top: 0px; left: -20px; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; border-radius: 0 0 0 0px; width: 20px; height: 31px;
}
.menu-tree li::after {
position: absolute; content: ""; top: 0px; left: -20px; border-left: 1px solid #ccc; border-radius: 0px 0 0 0; width: 20px; height: calc(100% + 11px);
}
.menu-tree li:last-child::after {
display:none;
}
.menu-tree li:last-child:before{
border-radius: 0 0 0 5px;
}
.menu-tree li a {
border: 1px #ccc solid; border-radius: 5px; padding:2px 5px;
}
- clone{
pointer-events:none; }
.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@2.6.14"></script> <script src="https://unpkg.com/vuex@3.0.0/dist/vuex.global.js"></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}\]\]|?Ids=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>