GithubHelp home page GithubHelp logo

evulse / finderselect Goto Github PK

View Code? Open in Web Editor NEW
126.0 126.0 21.0 497 KB

jQuery and Zepto Plugin for matching finder like functions making child elements selectable supports Ctrl+Click, Command+Click, Ctrl+Drag, Command+Drag and Shift+Click.

Home Page: http://evulse.github.io/finderSelect

License: MIT License

JavaScript 88.64% CSS 11.36%

finderselect's People

Contributors

evulse avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

finderselect's Issues

$(".safezone") not workind with ajaxed in table fields

Hi,

I am using AJAX to paginate a table, 10 records at a time. finderSelect works perfectly on all fronts, and especially the safezone works when the data is loaded on refresh, but as soon as I ajax in another page with exactly the same data, including the safezone class, it refuses to work. I've noticed that when I put this: console.log("Safezone MOUSEDOWN."); before the return false; then it works on a fresh page, but does not get called on an AJAXed page.

Is there some sort of $("body").on("click", ".safezone", function(e{...})); equivalent that works on AJAX pages?

Multple item selection using checkboxes

This plugin is brilliant and very well designed. We would love to use it in the new version of our web app with over 350k users, but the one thing we need is the ability to be able to select multiple rows by checking a checkbox for that row.

Currently when you check a checkbox in your demo, it selects that row only, and checking subsequent checkboxes in the table highlights only that checked row, and deselects and unchecks all other rows.

We need it to be able to work like the Google Docs list (or Gmail) where checking multiple checkboxes highlights those corresponding rows.

problem with text inputs inside selectable areas

The plugin is amazing. However, when you have textual inputs (or textareas, etc.) inside a selectable area it can cause some problems. Here's a DEMO illustrating the problem. As you can see - when focusing on an input, it selects the entire row. Not only that, but trying to ctrl+a while focused on an input makes everything go crazy

Two ideas for a solution:

  1. add an exempt option to create unclickable areas
  2. add a handle option along with children (the children option sets the selectable elements, while handle will set the clickable element within each child)

select multiples with mouse click and then drag?

Is it possible to use this plugin the way the jQuery UI selectable widget works?
It seems like it would be, except the only difference here is this plugin forces
you to press the Shift or Ctrl keys to select multiples. Would it be possible
to do have just the mouse click and drag work the way Shift key enabling does?

totalSelector elements' number isn't updated after a CTRL+A

After I select all the rows with a CTRL+A I expect all the values inside the elements selected using the "totalSelector" selector to get updated, but they don't.

A test case of this problem can also be the advanced table provided into the demo page.

multi-selection-2 deselects all of multi-selection-1 iso partly or not deselecting multi-selection-1

Assume we have the items A B C D E F G.

Left-click A, Shift-click C
result: multi-selection 1 that has A, B, and C selected.

Ctrl-click E, shift-click C, shift-click G
result: multi-selection 2 that has E, F, and G selected.

expected result: union of the remainder of multi-selection 1 (A, B selected) and multi-selection 2 (E, F, G selected): A, B, E, F, and G selected.

alternative expected result (a la MS Excel): union of multi-selection 1 (A, B, C selected) and multi-selection 2 (E, F, G selected): A, B, C, E, F, and G selected.

Up and Down keys not implemented in minified JS

Up and Down keys work when regular JS jquery.finderselect.js is included however when I include jquery.finderselect.min.js, these keys do not seem to work. I am assuming that minified version jquery.finderselect.min.js does not yet have these implementation.
Thanks

multi select using shift selecting non children elements too

Hi,
1st thing, this is a great library. but i found a small bug and a fix for it too.

Bug is: when using SHIFT key to select elements, library also selects non-childrens.

Example is here: http://jsfiddle.net/abarik/1nmx68fm/2/

capture

Fix for it starting line 428

    elem: function(d, el, s, u) {
        var $els = [], $el = (d) ? el.next() : el.prev();
        while( $el.length ) {
            if(typeof u === 'undefined' || !u || !$el.hasClass(u)) {
                if(typeof s === 'undefined' || !s || $el.hasClass(s)) {
                    // abarik-BUG FIX------START
                    // if children is provided
                    // push only if the element is a child
                    if (o.children) {
                        if ($el.is(o.children)) {
                            $els.push($el[0]);
                        }
                    } else {
                        $els.push($el[0]);
                    }
                    // abarik-BUG FIX------END

                }
                $el = (d) ? $el.next() : $el.prev();
            } else {
                $el = {};
            }
        }
        return $($els)
    },

Limit maximum item selection number

Is it possible to limite the number of items selected? I can achieve it using a mousedown event and returning false, but it will not work when used with shift key.

Any ideas? Thank you

Not able to use finderSelect on a svg

It's not really a issue but maybe someone could help me:
I have this:
spectacle l31586

spectacle x31586

I want to make all those polygons or zone-group to use finderSelect.
I've tried

$('.zone-footprint').finderSelect(_.extend(options,{ children:"g.zone-group" }));
also:

$('.zone-group').finderSelect(_.extend(options,{ children:"g.zone" }));

It should work right? or i'm doing something wrong ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.