Widget:Menus3

Uit Amicitia Den Hout
Ga naar:navigatie, zoeken

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

}

  1. 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@2.0.0"></script>

  • clone
    • 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">
    

    </option>

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

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

  • {{ dragitem.printouts.Text[0] }} <itemgroup :name="name" :dragitems="dragitem.dragchildren" ></itemgroup>
  • `, 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;
           }
         }
       }
    

    })

    //

    Vue.component('tree', {

    template:`

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

    `,

     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>