[TYPO3-jobs] Re: JSTree Navigation im FE einbauen

[wagner]

Ich bin nicht sicher ob das der richtige Ort ist um das hier zu posten. Falls es der falsche Ort ist "Asche über mein Haupt".. 
Es ist nicht die eleganteste Lösung aber sie funktioniert (ich bin halt auch nur ein Hobby Entwickler -.-')

Die JS Tree files in den Fileadmin schmeissen..
Dann im TS Setup die nötigen JS und CSS includen

  includeCSS {
    jstree = fileadmin/jstree/dist/themes/default/style.min.css
    jstree.media = all
  }
  includeJSlibs.jquery = //ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
  includeJSlibs.jquery{
    external = 1
    disableCompression = 1
    excludeFromConcatenation = 1
  }
  includeJS {
    jstree = fileadmin/jstree/dist/jstree.min.js
  }

Im <li> wrap für das Menü mit der uid versehen.. (hab jetzt nicht das ganze Navi TS gepostet, sollte ja klar sein..)
NO.wrapItemAndSub = <li data-pid='{field:uid}'> | </li>

Damit es dann auch wirklich funzt am Ende irgendwo dran hängen.. 
page.jsFooterInline {
  10 = TEXT
  10.value (
  $(function () { 
    $("#jstree").bind("loaded.jstree", function(event, data) {
      data.instance.open_all();   
    });
    $('#jstree').jstree({
      core: {
        expand_selected_onload: true
      }
    });
    )
    20 = TEXT
    20.dataWrap = mySelectNode({field:uid}); curpid = {field:uid};
    30 = TEXT
    30.value (
    $('#jstree').on("changed.jstree", function (e, data) {
      var url = data.instance.get_node(data.selected[0]).a_attr.href;
      if (data.instance.get_node(data.selected[0]).data.pid != curpid)
      window.location.href = url;
    });
  });
  function mySelectNode(pid) {
    var el = $("li[data-pid='" + pid + "']");
    if (el) {
      var nodeid = $(el).attr('id');
      $('#jstree').jstree(true).select_node(nodeid, true, true);
    }
  }
  )
 

Viel Spass! Gibt sicher bessere Lösungen, aber es funzt.