Noosev1.0.0 Examples

Examples of the noose tool and various options/use cases.

Initialization

Simple initialization using the default options.

new Noose('#simple-initialization')
.selected {
    background-color: rgba(36, 143, 220, 0.3) !important;
}

<div id="simple-initialization">
    <table>
        <thead>...</thead>
        <tbody>...</tbody>
    </table>
</div>

Options

classes

Use classes option to apply custom styling. 

new Noose('#option-classes', {
    select: 'td',
    classes: {
        noose: 'noose-light',
        selected: 'selected-green'
    }
})

.noose-light {
    border-color: #FFF !important;
    background-color: rgba(36, 143, 220, 0.3);
}

.selected-green {
    background-color: rgba(26, 247, 153, 0.5);
}

<div id="option-classes" class="table-dark">
    <table>
        <thead>...</thead>
        <tbody>...</tbody>
    </table>
</div>

detach

Setting detach to false leaves the noose element attached to the container element, so it will still be visible after noose-ing ends. 

new Noose('#option-detach', {
    select: 'td',
    classes: {
        noose: 'noose-light-red',
        selected: 'selected'
    },
    detach: false
})

.noose-light-red {
    border-color: #FFF !important;
    background-color: rgba(216, 10, 10, 0.4);
}

.selected {
    background-color: rgba(36, 143, 220, 0.3) !important;
}

<div id="option-detach">
    <table>
        <thead>...</thead>
        <tbody>...</tbody>
    </table>
</div>

mode

Setting mode to 'fit' will not select the element until the entire element fit within the noose. 

new Noose('#option-mode-fit', {
    select: 'td',
    mode: 'fit'
})

.selected {
    background-color: rgba(36, 143, 220, 0.3) !important;
}

<div id="option-mode-fit">
    <table>
        <thead>...</thead>
        <tbody>...</tbody>
    </table>
</div>

scroll, scrollEdge, and scrollbar

By default, the container will be scrolled when the noose is moved over the scroll edge area. Clicking on the scrollbar will not activate the noose. 

new Noose('#option-scroll', {
    select: 'td',
    scroll: 5,
    scrollEdge: 17,
    scrollbar: 17   // Size of scrollbar
})

.selected {
    background-color: rgba(36, 143, 220, 0.3) !important;
}

<div id="option-scroll" style="max-height: 300px; overflow: auto; position: relative;">
    <table>
        <thead>...</thead>
        <tbody>...</tbody>
    </table>
</div>

select

Select only certain elements by specifying the select option.

new Noose('#option-select', {
    select: 'tr'
})

.selected {
    background-color: rgba(36, 143, 220, 0.3) !important;
}

<div id="option-select">
    <table>
        <thead>...</thead>
        <tbody>...</tbody>
    </table>
</div>

Disable selection by setting select option to false. 

new Noose('#option-select-false', {
    select: false
})

<div id="option-select-false">
    <table>
        <thead>...</thead>
        <tbody>...</tbody>
    </table>
</div>

start, move, and stop

Handling start and stop events. 

new Noose('#option-start-move-stop', {
    select: 'td',
    start: function(e, coors) {
        $('#option-start-move-stop-result').text('Selecting...');
    },
    move: function(e, coors, selected) {
        $('#option-start-move-stop-result').text('In progress...' + selected.length + ' cell(s) selected');
    },
    stop: function(e, coors, selected) {
        $('#option-start-move-stop-result').text(selected.length + ' cell(s) selected');
    }
})

.selected {
    background-color: rgba(36, 143, 220, 0.3) !important;
}

<div id="option-start-move-stop">
    <table>
        <thead>...</thead>
        <tbody>...</tbody>
    </table>
</div>
<div id="option-start-move-stop-result" class="p-2 my-2 border"></div>

style

Custom styling of noose. 

new Noose('#option-style', {
    select: 'td',
    style: {
        border: 'dashed 2px red',
        zIndex: 9999
    }
})

.selected {
    background-color: rgba(36, 143, 220, 0.3) !important;
}

<div id="option-style">
    <table>
        <thead>...</thead>
        <tbody>...</tbody>
    </table>
</div>

throttle

Set throttle to 0 for no delay. Only do this for small selectable sets. 

new Noose('#option-throttle', {
    select: 'td',
    throttle: 0
})

.selected {
    background-color: rgba(36, 143, 220, 0.3) !important;
}

<div id="option-throttle">
    <table>
        <thead>...</thead>
        <tbody>...</tbody>
    </table>
</div>

Methods

compute

Manually call compute() to select elements. 

new Noose('#method-compute', {
    select: 'td',
    compute: false,
    stop: function(e, coors, selected) {
        this.compute();
        $('#method-compute-result').text(this.selected.length + ' cell(s) selected');
    }
})

.selected {
    background-color: rgba(36, 143, 220, 0.3) !important;
}

<div id="method-compute">
    <table>
        <thead>...</thead>
        <tbody>...</tbody>
    </table>
</div>
<div id="method-compute-result" class="p-2 my-2 border"></div>

[de]register

Manually register/deregister containers. Unlike the enabled option, this will completely remove add/remove all functionality.

Registered 
(function() {
    var noose = new Noose('#method-de-register', {
        select: 'td',
    });

    var container = document.getElementById('method-de-register');
    var lbl = document.getElementById('method-de-register-lbl');
    var deregisterBtn = document.getElementById('method-deregister-btn');
    var registerBtn = document.getElementById('method-register-btn');

    deregisterBtn.addEventListener('click', function() {
        noose.deregister(container);
        lbl.innerHTML = 'Deregistered';
    });
    registerBtn.addEventListener('click', function() {
        noose.register(container);
        lbl.innerHTML = 'Registered';
    });
}())

.selected {
    background-color: rgba(36, 143, 220, 0.3) !important;
}

<div id="method-de-register-actions" class="p-2 my-2 border">
    <button type="button" id="method-deregister-btn">Deregister</button>
    <button type="button" id="method-register-btn">Register</button>
    <span id="method-de-register-lbl"></span>
</div>
<div id="method-de-register">
    <table>
        <thead>...</thead>
        <tbody>...</tbody>
    </table>
</div>