Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

Navigation drag drop tree

edited November 2012 in Framework

Hi guys, I started my own OpenSource Project :-)

Its just started, but you can check it out, anyways: https://github.com/betaman/tree-drag-drop

It aims to eventually squat that everlasting navigation bug. I'll keep you updated on my Progress...

See you

Betaman

«1

Comments

  • Cool! The example seems to work pretty well so far :)

    The biggest trouble (you can see from the source of the navigation app) with jsTree is the really inconsistent API. It feels like a collection of hacks to do things like dragging an item from outside the tree into it, or dragging an item out of it, things like that. I'd love to see a nice replacement!

  • edited November 2012

    Hey Johnny, I think the /navigation/api/add, /navigation/api/remove, /navigation/api/move interface is a bit complicated.

    My plan is to have only two api items: /navigation/api/get and /navigation/api/update.

    /navigation/api/get reads the JSON und constructs the tree and the trashbin

    Update passes a JSON of the complete tree to /navigation/api/update. and all the ids are saved. All the ids that are not in this tree will then be dealt with as is in trashbin.

    This way no items can get lost, because of buggy frontend :-) I think that will save a lot of code in frontend and backend.

    What do you think about that?

  • I like it! I was mirroring the actions of jsTree in the old API, so feel free to replace them with get/update calls, I think that will work much better anyway!

  • And while we are at it: Do you use that sort attribute or is this from jsTree as well?

  • I believe the sort attribute is only used by jsTree, but it's there because JavaScript doesn't guarantee the sorting order of arrays across browsers, so we may need to keep it. Here's some info on that:

    http://stackoverflow.com/questions/5773950/how-to-keep-an-javascript-object-array-ordered-while-also-maintaining-key-lookup

  • I think we don't have this problem, because we store our data in an array.

    [
    {"data":"Home","attr":{"id":"index","sort":0}},
    {"data":"Contact","attr":{"id":"contact","sort":2}}, 
    ...
    ]
    

    As far as i understand this post the problem only occcurs in objects.

  • Ah yes, right you are! That should keep things simpler then :)

  • Hi i got pretty far with the new navigation tree menu, but now I'm stuck: Here is my fork:

    https://github.com/betaman/elefant

    Maybe someone can give me a clue:

    On /navigation/admin I included {! navigation/admin_tree !} which is supposed to render my new selfmade apps/navigation/handlers/admin_tree.php , but although the conf/navigation.json looks good it always renders:

    <ul class="tdd-tree">
    <li class=""><a href="/index">Home</a></li> 
    </ul>
    

    Maybe $this->cache = true; is the culprit? Or something went completly wrong and this is some default navigation->tree output?

    Maybe some one can get me out of this trap :-)

  • Try wiping your cache (rm -Rf cache/*), and definitely comment the $this->cache = true; out while making changes.

  • Hi Guys,

    here is my first try for the navigation/admin makeover.

    https://github.com/betaman/elefant/

    Check it out an let me know what you think about it...

    I tested it on Windows 7 in IE9, IE9 with Browsermode and Dokumentmode IE8, FF 16, and Chrome 23. It seems to work pretty well on all browsers

    On this commit I added some Todos on functions wich have become obsolete from my perspective (which is the navigation/admin perspective)

    https://github.com/betaman/elefant/commit/a2579e9dcfbfa3eea342c1533c0aff4ff67dcff7

    Maybe you can have a look if this is needed by some other components..

    Cheers betaman

  • Looking really good! Just found an issue: I created a site structure that looks like this:

    https://gist.github.com/4118855

    But when I go back to Tools > Navigation, it's now just showing me Home on the left and nothing on the right. No JS warnings or errors.

    After dragging the Home link for a second, it rewrote the navigation.json back to just Home, and the other links appeared on the right again (after a refresh, that is).

    As for the unused methods, I think we should keep them in apps/navigation/lib/Navigation.php since they're still potentially useful methods for operating on the structure itself, but we can safely take them out of apps/admin/handlers/api.php since we don't need to expose them via REST any more.

    It looks like we may need to modify apps/navigation/lib/Navigation.php in places though to remove references to the sort property.

  • Do you have a cached navigation.json, I had trouble when cash was on.. I tried to reproduce it but I couldn't. What Browser did you use?

  • Ah I see now. You have $this->cache = true in apps/navigation/handlers/admin_tree.php. Taking that out fixes it. Caching should probably only be on for public-facing nav handlers.

    Only other thing I'd suggest is changing line 60 in apps/navigation/js/tree-drag-drop/css/tree-drag-drop.css to background:#A753CC; to better match the admin color theme. Other than that, it seems to be working really well now, and with the position highlighting the drag/drop feels more intuitive than jsTree too :)

  • Sorry I didn't mean navigation.json, but apps/navigation/handlers/admin_tree.php I fixed this along with the color ...

  • Just pulled the latest, looking great over here!

  • Cool, i made a pull request :-)

    • 517 additions
    • 4,740 deletions

    Yeah!

  • Nice ratio :) Merged into master!

  • Made one small change to add cursor:move to the pages in the tree:

    https://github.com/jbroadway/elefant/commit/f16122d6cd99fba3f6e1927cc6d90b0c60c4a9fc

  • The move cursor is a good idea, but i dont know if i like it always on: How do you like this: it only shows if you are dragging sth.. http://treedragdrop.die-symbionten.de/docs/example_1.html

  • The cursor is mainly an indicator that the thing you're hovering over can be dragged & dropped, so it's more important to have it change from the default on hover than on drag. It might be more intuitive to use cursor:pointer on the hover and cursor:move while dragging, like this:

    http://jsfiddle.net/mWYEH/

  • Yes, that's true ist should change on hover...

  • I made an update, on my testpage, let me know what you think about it.. http://treedragdrop.die-symbionten.de/docs/example_1.html

  • Seems like IE8 is having trouble withe the custom cursor, i'll check that..

  • I like the hand grabbing :) Do you think we should also change it to cursor:pointer over the expand/collapse icons?

  • its not so easy, the li has a clickhandler and a draghandler, but there is no actual icon, to put the pointer on. Maybe I have to do changes all along: it seems to be that its not working in IE8. I thought I tested it, but I seem to have accidently left Documentmode on IE9.

  • Ah I see. No worries about the cursor:pointer, just a minor suggestion.

  • I updated my fork to grab mode..

Sign In or Register to comment.