mynameistechno / finderjs Goto Github PK
View Code? Open in Web Editor NEWBrowse hierarchical data in columns, similar to OS X's Finder
Home Page: https://markmatyas.dev/finderjs/
License: MIT License
Browse hierarchical data in columns, similar to OS X's Finder
Home Page: https://markmatyas.dev/finderjs/
License: MIT License
Implement role="tree" on the outer widget.
For each item that gets focused, use role="treeitem" aria-level="[number]"
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 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 !!!
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?
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.
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.
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
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.
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.
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.
Mobile/tablet support.
Expose the event emitter so one can attach listeners.
I believe it would be useful.
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.
ie. finder.destroy()
should:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.