public/assets/plugins/pickletree/pickletree.js
/**
   *
   * @param {object} node object for creating html element
   */
@param {object} node object for creating html element
@param { object } node object for creating html element
drawNode(node) {
    let icon = this.config.unFoldedIcon;
    let style = '';
    if (node.foldedStatus) {
      icon = this.config.foldedIcon;
      style = 'none';
    }
    let li_item = document.createElement('li');
    let a_item = document.createElement('a');
    let i_item = document.createElement('i');
    let ul_item = document.createElement('ul');
    let div_item = document.createElement('div');
    if (this.config.drag) {
      let a_ditem = document.createElement('a');
      let i_ditem = document.createElement('i');
      i_ditem.classList.add('fa');
      i_ditem.classList.add('fa-bars');
      a_ditem.classList.add('drag-handler');
      a_ditem.id = 'a_dr_' + node.id;
      a_ditem.appendChild(i_ditem);
      a_ditem.href = 'javascript:;';
      a_ditem.setAttribute('dragable', true);
      a_ditem.setAttribute('drag-title', node.title);
      div_item.appendChild(a_ditem);
      div_item.classList.add('drop_target');
    }
    i_item.id = 'i_' + node.id;
    i_item.style.color = 'black';
    icon = icon.split(' ');
    for (let i = 0; i < icon.length; i++) {
      i_item.classList.add(icon[i]);
    }
    i_item.style.display = 'none';
    ul_item.id = 'c_' + node.id;
    ul_item.style.display = style;
    a_item.id = 'a_toggle_' + node.id;
    a_item.appendChild(i_item);
    a_item.href = 'javascript:;';
    a_item.innerHTML += ' ' + node.title;
    li_item.id = node.id;
    div_item.id = 'div_g_' + node.id;
    div_item.appendChild(a_item);
    if (this.config.switchMode) {
      let sw_item = document.createElement('label');
      let ck_item = document.createElement('input');
      let spn_item = document.createElement('span');
      spn_item.classList.add('slider');
      spn_item.classList.add('round');
      ck_item.type = 'checkbox';
      sw_item.classList.add('switch');
      sw_item.appendChild(ck_item);
      sw_item.appendChild(spn_item);
      ck_item.id = 'ck_' + node.id;
      sw_item.id = 'sw_' + node.id;
      ck_item.value = node.value;
      ck_item.checked = node.checkStatus;
      div_item.appendChild(sw_item);
    }
    if (node.elements.length > 0) {
      let a_item = document.createElement('a');
      let i_item = document.createElement('i');
      for (let i = 0; i < this.config.menuIcon.length; i++) {
        i_item.classList.add(this.config.menuIcon[i]);
      }
      a_item.id = 'a_me_' + node.id;
      a_item.appendChild(i_item);
      a_item.href = 'javascript:;';
      a_item.classList.add('menuIcon');
      div_item.appendChild(a_item);
    }
    li_item.appendChild(div_item);
    li_item.appendChild(ul_item);
    if (node.parent.id === 0) {
      this.area.appendChild(li_item);
    } else {
      this.setChildNodes(node);
      document.getElementById('c_' + node.parent.id).appendChild(li_item);
    }
    this.setNodeEvents(node);
    if (typeof this.rowCreateCallback == 'function')
      this.rowCreateCallback(node);
  }
drawNode ( node ) { let icon = this . config . unFoldedIcon ; let style = '' ; if ( node . foldedStatus ) { icon = this . config . foldedIcon ; style = 'none' ; } let li_item = document . createElement ( 'li' ) ; let a_item = document . createElement ( 'a' ) ; let i_item = document . createElement ( 'i' ) ; let ul_item = document . createElement ( 'ul' ) ; let div_item = document . createElement ( 'div' ) ; if ( this . config . drag ) { let a_ditem = document . createElement ( 'a' ) ; let i_ditem = document . createElement ( 'i' ) ; i_ditem . classList . add ( 'fa' ) ; i_ditem . classList . add ( 'fa-bars' ) ; a_ditem . classList . add ( 'drag-handler' ) ; a_ditem . id = 'a_dr_' + node . id ; a_ditem . appendChild ( i_ditem ) ; a_ditem . href = 'javascript:;' ; a_ditem . setAttribute ( 'dragable' , true ) ; a_ditem . setAttribute ( 'drag-title' , node . title ) ; div_item . appendChild ( a_ditem ) ; div_item . classList . add ( 'drop_target' ) ; } i_item . id = 'i_' + node . id ; i_item . style . color = 'black' ; icon = icon . split ( ' ' ) ; for ( let i = 0 ; i < icon . length ; i ++ ) { i_item . classList . add ( icon [ i ] ) ; } i_item . style . display = 'none' ; ul_item . id = 'c_' + node . id ; ul_item . style . display = style ; a_item . id = 'a_toggle_' + node . id ; a_item . appendChild ( i_item ) ; a_item . href = 'javascript:;' ; a_item . innerHTML += ' ' + node . title ; li_item . id = node . id ; div_item . id = 'div_g_' + node . id ; div_item . appendChild ( a_item ) ; if ( this . config . switchMode ) { let sw_item = document . createElement ( 'label' ) ; let ck_item = document . createElement ( 'input' ) ; let spn_item = document . createElement ( 'span' ) ; spn_item . classList . add ( 'slider' ) ; spn_item . classList . add ( 'round' ) ; ck_item . type = 'checkbox' ; sw_item . classList . add ( 'switch' ) ; sw_item . appendChild ( ck_item ) ; sw_item . appendChild ( spn_item ) ; ck_item . id = 'ck_' + node . id ; sw_item . id = 'sw_' + node . id ; ck_item . value = node . value ; ck_item . checked = node . checkStatus ; div_item . appendChild ( sw_item ) ; } if ( node . elements . length > 0 ) { let a_item = document . createElement ( 'a' ) ; let i_item = document . createElement ( 'i' ) ; for ( let i = 0 ; i < this . config . menuIcon . length ; i ++ ) { i_item . classList . add ( this . config . menuIcon [ i ] ) ; } a_item . id = 'a_me_' + node . id ; a_item . appendChild ( i_item ) ; a_item . href = 'javascript:;' ; a_item . classList . add ( 'menuIcon' ) ; div_item . appendChild ( a_item ) ; } li_item . appendChild ( div_item ) ; li_item . appendChild ( ul_item ) ; if ( node . parent . id === 0 ) { this . area . appendChild ( li_item ) ; } else { this . setChildNodes ( node ) ; document . getElementById ( 'c_' + node . parent . id ) . appendChild ( li_item ) ; } this . setNodeEvents ( node ) ; if ( typeof this . rowCreateCallback == 'function' ) this . rowCreateCallback ( node ) ; }
@param {object} node object for creating html element
@param { object } node object for creating html element
//#region elements //node li item //node a item //node i item //node ul item //node group item //make node dragable //add drag button to start //set icon drag button //icon added to div //set i item id //set i item style //set i item icon //set ul item id //set ul item style //set a item id //set i tag to a item //set a item href //set a_item title //set li item id //set a tag to div item //set switch to li item if user is wanted //id definitions //if item created as checked //switch is added to li element //if node has extra elements //add menu button to end //set icon for menu //icon added to div //set ul tag to li item //#endregion //if is main node //check if element is exist for preventing copy elements //put item to area //if has parent set to parents childs //then put item //set node events //draw callback  method