views:

44

answers:

0

Hello,

I am trying to mimic the file selecting from Windows Explorer in Javascript. I notice Windows Explorer has two types of "selecting". One is the normal selection which highlights the file and the other one is a dotted line which means that file is currently focussed on. So I am using "selected" and "focus" as css classes.

Here you can find an example of my code working in a webpage.

In my code it just finds the rows between the focussed item and the current item and select those.

select: function (e) {
    if (e.ctrlKey) {
        rs.removeFocus();
        $(this).toggleClass("selected");
        $(this).addClass("focus");
    }
    else if (e.shiftKey) {
        var focusItem = $("#Items p.focus");
        var currentItem = $(this);
        var betweenItems = rs.betweenItems(currentItem, focusItem);

        rs.unSelectAll();
        rs.removefocus();

        $(betweenItems).each(function () {
            this.addClass("selected");
        });

        focusItem.addClass("selected");
        $(this).addClass("focus");
        $(this).addClass("selected");
    }
    else {
        rs.unSelectAll();
        rs.removeFocus();
        $(this).addClass("selected");
        $(this).addClass("focus");
    }
}

This works "okay" but it's not exactly as advanced as the Windows Explorer selecting. In Windows Explorer they don't always select the rows between last focussed item and the current one. If there are no "gaps" in the selection they will add those items to the selection. But if there is a gap it will start from the focussed item.

I am not sure how I should do this. It seems the algorithm they use in Windows is a little to complex for me. So if anybody can help me or push me into the right direction I would appreciate it.