Widget:Menus

<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;
}
 
 .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;

}

.menu-tree {

   border: 1px solid lightgray;
   margin: 1em;
   padding: 1em;

}

 .menu-tree span {
   width: 100%;
   padding: .5em 1em;
   background: #cdcdd2;
   display: block;
   margin: 2px;
   border-radius: 4px;

}

.menu-tree b {

   float: left;
   transform: translate(-52px, -36px);

}

.menu-tree ul {

   list-style: none;

} .menu-tree span .fa {

   margin-right: 6px;

}

.clone, #app .clone-group li span{
   border:1px solid gray;
   width: 100%;
   background:#3da8a9;
  padding: .5em 1em;
  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: 'bey';
   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);
 }

}

</style>

<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/vuex"></script>

  <select @change="getmenu"  class="form-control" v-if="!namespace" >
     <option disabled selected>Select a menu</option>
     
     <option v-for="menu in menus" :value="menu">

</option>

   </select> 

<tree v-for="tree in trees" :dragitems="tree.dragitems" :name="tree.name" class="menu-tree"></tree>

 <label>Text<input id="textmenu" @input="input" type="text" :value="Title"  class="form-control" ></label>
   <label>Type<select @change="inputtype" :value="Type" class="form-control" >
  <option disabled selected>Select a type</option>
   <option value="page">Page</option>
   <option value="external">External</option>
   <option value="dropdown">Dropdown</option>
  </select>
   </label>
   
   
  <label v-if="isPageType" >Page<select @change="inputpage" :value="Href" class="form-control" >
  <option disabled selected>Select a page</option>
   <option v-for="page in pages" :value="page.fulltext">{{page.printouts.Title[0].fulltext}}</option>
    </select>
   </label>  
   
   
    <label v-if="!isPageType" >Sjabloon:Type<input @input="inputhref" type="text" :value="Href" class="form-control" ></label>
 <label @click.prevent="showsearch" >Icon <input v-show="!ifsearch"  type="text" @change="inputicon"  :value="Icon"  class="form-control"/>
   
   
   
 </label>

<input type="text" v-model="search" class="form-control" >

<fav v-for="(result, index) in filterresult" :result="result" :key="index" :index="index" ></fav>

<label class="d-none">Permission<select class="form-control" >
  <option disabled selected>Select a permission</option>
   <option >None</option>
   <option value="Admin">Admin</option>
   <option value="Space">Space</option>
  </select>
   </label>
   <button @click="savemenu" class="btn btn-primary" >Save menu</button>
 <transition name="delay">

   </transition>

<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:`

Sjabloon:Name

`, 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 //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(ob.name == store.getters.selected.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 = store.getters.selected.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) } return }) } function saveToWiki(page, wikitext){ var params = { action: 'edit', title: 'wiki:'+page, text: wikitext, format: 'json' }, api = new mw.Api(); api.postWithToken( 'csrf', params ).done( function ( data ) { console.log( data ); //set status // store.commit('status', 'Saved'); } ); } var store = new Vuex.Store({ state:{ selected: "", dragging: "", info: "" }, mutations:{ info(state, value){ state.info = value; }, select(state, item){ state.selected = item; app.search = state.selected.dragitem.printouts.Icon[0] }, 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; } }, 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: `

{{ dragitem.printouts.Text[0] }}

• Sjabloon:CloneTitle

   <itemgroup :name="name" :dragitems="dragitem.dragchildren" ></itemgroup>

Sjabloon:CloneTitle

`, methods: { selected(e){ store.commit('select', this); }, dragStart(e) { store.commit('info', "saved"); store.commit('drag', this); e.dataTransfer.dropEffect = 'move' e.dataTransfer.effectAllowed = 'move' setTimeout(function(){ e.target.style.display = "none"; },0) }, dragEnd(e) { e.target.style.display = ""; store.commit('drag', ""); }, dropItem(e){ 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) }, addItem(item) { this.dragitem.dragchildren.splice(0,0, item) }, dragOver(e){ console.log('over') // console.log("mouse", e.clientX); var viewportOffset = e.target.getBoundingClientRect(); // console.log("el", viewportOffset.left); if((e.clientX - viewportOffset.left) > 40 ){ // console.log("groter"); this.isDragOver = "side"; // this.$emit('add-item', item) }else{ this.isDragOver = true; } // counter++; //console.log("in", counter) // e.target.closest('li').parentNode.insertBefore( div , e.target.closest('li').nextSibling) // e.target.style.borderBottom = "7px solid red"; }, dragOut(e){ // 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;
       }
     }
   }

})

Vue.component('tree', {

template:`

Sjabloon:Menuname<itemgroup :dragitems="dragitems" :name="name" ></itemgroup>

`,

 props:{
   dragitems:Object,
   name:String
 },
 computed:{
 menuname(){
   if(!namespace){
  return this.name;
   }
 }
 }

})

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;
     }
   },
   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:["dropdown"],
      Type:["dropdown"],
      Text: ["dropdown"],
      Icon: ["fa-chevron-down"],
      Href: ["dropdown"]
   },
   dragchildren: []
 }
   ]
 }

],

 selectedmenu:false,
 pages:[],
 search:"",
 space:namespace,
 menus:mns,
 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:{

 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', "");
 },
 trashDragEnter(e){
   
   // e.target.closest('.trashcan').classList.add('active')
 },
  trashDragLeave(e){
   
 //   e.target.closest('.trashcan').classList.remove('active')
 }

} })

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::Wiki:${page}\]\]|?Id|?Parent|?Href|?Text|?Icon|?Type`,
           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('space-'+namespace+'-menu');
   app.selectedmenu = true;
   getpages()
   }, 1500)
 
 }
   

</script>