mynameistechno / finderjs Goto Github PK

ie. finder.destroy() should:

• clear all event listeners
• clear container html
• return destroyed object

Is it possible to add a functionality that will allow to preset a specific path into FinderJS view? I mean, suppose we have the following "directory tree" (i.e. object):

+ root
     |
     + -- dir1
     + -- dir2
           |
           + -- file.txt

Then, we can do something like:

var finder = createFinderJS();
finder.navigate('/dir2/file.txt');

And FinderJS will navigate to this path like if one do it manually using mouse or keyboard. Or, if it is not planned, could you please give a tip how to introduce this functionality manually?

Mobile/tablet support.

Hi there,

I just installed the package using npm, and I found out this version does not allow the change of the defaults keys for "label" and "children".

Could you please publish the updtaed version on npm too ?

Great work btw, this works like a charm.

Thank you.

HI
First of all thanks for the marvelous work produced !!
I'm using item-selected event
but on click in some case I'd like to preventDefault behavior, cause when children are empty it repeats the navigation tree base instead of stoping
is there a way to manage this ?

emitter.on('item-selected', function(item) {
        console.warn('Item selected', item.item["_item"]);
        
        if( item.item["_item"].open == "column" ){
            emitter.emit( 'create-column' , createSimpleColumn(item.item["_item"]) );
        }
        else if( item.item["_item"].open == "page" ){
            window.open(baseUrl+'/costum/co/index/id/ctenat#"@'+item.item["_item"].slug);
            //TODO : preventDefault event
        }
        else if( item.item["_item"].open == "finder" ){
            window.location.href = baseUrl+'/graph/<?php echo Yii::app()->controller->id ?>/finder/slug/'+item.item["_item"].slug+"/open/element";
            //TODO : preventDefault event
        } 
     });

I think that it will be a nice and useful feature to (re)render all columns with a new structure data(array) given as parameter. Currently we are forced to render each column partially.
While performing (re)render, new loading template would be welcome too, ie. set in options or by another method.

Implement role="tree" on the outer widget.
For each item that gets focused, use role="treeitem" aria-level="[number]"

Hi! I am a member of CDNJS!
We would like to add this library to our CDN(issue), could you please upload the pre-built files to GitHub repo or npm? Thanks!

When selecting the last column visible on the current screen, the child-column is hidden and is only visible when scrolling. The window should auto-scroll to show that child-column in the current view.

The leaf-selected handler gets the JavaScript object from the tree data structure, while the item-selected handler gets an object containing the column div and item div that were clicked.

The documentation doesn't highlight the difference here.

I should be able to get information about the selected node that isn't a leaf; even in the first example with static data, the interior nodes still have metadata such as size and modification date.

It's hard to tell from the examples if Finder.js implements the behavior that ancestor views slide off to the left when the user browses deeper.

Hi,

The navigation with arrow keys works fine but when you click on a leaf element and then go to parent item with the left arrow, the keyDown event listener doesn't fire again.

The only way to bring back the event listener is to click on the container wherever you want except on a leaf item otherwise you repeat the bug.

I have duplicated the rest api json and ahve it as a file on my server. I have tested the json file is valid using json valid tool online, however when i use the file url as the uri for example-async but the spinner just keeps spinning. The rest API url works fine.

When initialising finder using an async function rather than static array, the "go-to" event does not work.

The following error is seen in the console:

TypeError: n.find is not a function at Function.finder.selectPath (vendor/finder.min.js)

This is because finder.selectPath is passed the original "data" and expects this to be an array, calling data.find to get the path. However, in this case data is a function and the above error occurs.

I know that go-to may not be possible to find a path which hasn't been retrieved by the async function (and defaultPath wouldn't work at all for the same reason). However, in my case I am emitting go-to to navigate to a path that I know is in the data that already exists in the tree.

What I really want to do is automatically select the top-level child if there is only a single top-level child after building the tree in the async function. Is there a way to do this?

Thanks,
Giles

Expose the event emitter so one can attach listeners.

I believe it would be useful.

hi I'm trying to test using the jquery version

<script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
  <script type="text/javascript" src="build/jquery.finder.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function() {

  console.log("build","co finder");

  emitter = finder("container2", [
    {
      label : 'Item 1',
      children : [
        {
          label: 'Item 1A',
          children: [
            {
              label: 'Item 1A1'
            }
          ]
        },
        {
          label: 'Item 1B'
        }
      ]
    }
  ]);
});

but I get this in console

TypeError: e.addEventListener is not a function

any idea what I might be doing wrong ?
great pluggin BTW and thanks for having opensourced it !!!