Interface CbnSelectoOptions

extended options for Selecto with additional select-specific properties

interface CbnSelectoOptions {
    boundContainer: null | string | boolean | HTMLElement | BoundContainer;
    checkInput: boolean;
    checkOverflow: boolean;
    className: string;
    clickBySelectEnd: boolean;
    container: null | HTMLElement;
    continueSelect: boolean;
    continueSelectWithoutDeselect: boolean;
    cspNonce: string;
    customSelectionAreaCssClass: string;
    disableMultiselect: boolean;
    dragCondition: null | ((e) => boolean);
    dragContainer: undefined | null | string | Element | Window | Element[];
    drawCustomSelectionArea: boolean;
    getElementRect: getElementRectFunction;
    hitRate: string | number | ((element) => string | number);
    innerScrollOptions: boolean | Partial<DragScrollOptions>;
    keyContainer: null | Document | HTMLElement | Window;
    portalContainer: null | HTMLElement;
    preventClickEventByCondition?: null | ((e) => boolean);
    preventClickEventOnDrag?: boolean;
    preventClickEventOnDragStart?: boolean;
    preventDefault: boolean;
    preventDragFromInside: boolean;
    preventRightClick?: boolean;
    ratio: number;
    rootContainer: null | HTMLElement;
    scrollOptions: DragScrollOptions;
    selectByClick: boolean;
    selectFromInside: boolean;
    selectableTargets: (string | ElementType | ElementRef<ElementType> | (() => ElementType | ElementType[]))[];
    showMultiselectWarnings: boolean;
    toggleContinueSelect: null | string | string[] | string[][];
    toggleContinueSelectWithoutDeselect: null | string | string[] | string[][];
}

Hierarchy

  • SelectoOptions
    • CbnSelectoOptions

Properties

boundContainer checkInput checkOverflow className clickBySelectEnd container continueSelect continueSelectWithoutDeselect cspNonce customSelectionAreaCssClass disableMultiselect dragCondition dragContainer drawCustomSelectionArea getElementRect hitRate innerScrollOptions keyContainer portalContainer preventClickEventByCondition? preventClickEventOnDrag? preventClickEventOnDragStart? preventDefault preventDragFromInside preventRightClick? ratio rootContainer scrollOptions selectByClick selectFromInside selectableTargets showMultiselectWarnings toggleContinueSelect toggleContinueSelectWithoutDeselect

Properties

boundContainer

boundContainer: null | string | boolean | HTMLElement | BoundContainer

Container to bound the selection area. If false, do not bound. If true, it is the container of selecto.

Default

false

checkInput

checkInput: boolean

hecks whether this is an element to input text or contentEditable, and prevents dragging.

Default

false

checkOverflow

checkOverflow: boolean

Inspect the overflow area and exclude the outside target from the select.

Default

false

className

className: string

custom class name of selecto element

Default

""

clickBySelectEnd

clickBySelectEnd: boolean

Whether to click when mouse(touch) ends while using selectByClick(true)

Default

false

container

container: null | HTMLElement

The container to add a selection element for vanilla

continueSelect

continueSelect: boolean

After the select, whether to select the next target with the selected target (deselected if the target is selected again)

Default

false

continueSelectWithoutDeselect

continueSelectWithoutDeselect: boolean

Whether to continue the previously selected items without deselect when using continueSelect or toggleContinueSelect.

Default

false

cspNonce

cspNonce: string

add nonce property to style for CSP

Default

""

customSelectionAreaCssClass

customSelectionAreaCssClass: string

disableMultiselect

disableMultiselect: boolean

dragCondition

dragCondition: null | ((e) => boolean)

Conditional function to start dragging

Type declaration

    • (e): boolean

    • Parameters

      • e: OnDragStart<Gesto>

      Returns boolean

Default

null

dragContainer

dragContainer: undefined | null | string | Element | Window | Element[]

The area to drag selection element.

Default

container

drawCustomSelectionArea

drawCustomSelectionArea: boolean

getElementRect

getElementRect: getElementRectFunction

A function to get the exact position of an element's rect

Default

null

hitRate

hitRate: string | number | ((element) => string | number)

The rate at which the target overlaps the drag area to be selected. If you want an absolute number, set it to a px value. (ex: 10px)

Type declaration

    • (element): string | number

    • Parameters

      • element: Element

      Returns string | number

Default

100

innerScrollOptions

innerScrollOptions: boolean | Partial<DragScrollOptions>

Set the inner scroll options, time, etc. to automatically scroll by dragging.

Default

null

keyContainer

keyContainer: null | Document | HTMLElement | Window

The container for keydown and keyup events.

Private portalContainer

portalContainer: null | HTMLElement

Selection Element to apply for framework.

Optional preventClickEventByCondition

preventClickEventByCondition?: null | ((e) => boolean)

Prevent click event according to specific conditions. Returning true allows the click event, returning false prevents it.

Type declaration

    • (e): boolean

    • Parameters

      • e: MouseEvent

      Returns boolean

Default

null

Optional preventClickEventOnDrag

preventClickEventOnDrag?: boolean

Prevent click event on drag. (mousemove, touchmove)

Default

false

Optional preventClickEventOnDragStart

preventClickEventOnDragStart?: boolean

Prevent click event on dragStart. (mousedown, touchstart)

Default

false

preventDefault

preventDefault: boolean

When dragging, preventDefault is called. (Touch occurs unconditionally)

Default

false

preventDragFromInside

preventDragFromInside: boolean

When the target is clicked, the event is stopped and selected. (If hitTest is 0, it becomes click as well.)

Default

true

Optional preventRightClick

preventRightClick?: boolean

Whether to prevent dragging of the right mouse button

Default

true

ratio

ratio: number

Adjust the ratio of the selection.

Default

0

rootContainer

rootContainer: null | HTMLElement

Selecto's root container (No transformed container.)

Dfeault

null

scrollOptions

scrollOptions: DragScrollOptions

Set the scroll options, time, etc. to automatically scroll by dragging.

Default

null

selectByClick

selectByClick: boolean

Whether to force drag end when selectFromInside, selectByClick is true.

Default

false

selectFromInside

selectFromInside: boolean

Whether to select from the target inside (If hitTest is 0, it becomes inside select as well)

Default

true

selectableTargets

selectableTargets: (string | ElementType | ElementRef<ElementType> | (() => ElementType | ElementType[]))[]

Targets to select. You can register a queryselector or an Element.

Default

[]

showMultiselectWarnings

showMultiselectWarnings: boolean

toggleContinueSelect

toggleContinueSelect: null | string | string[] | string[][]

Determines which key to continue selecting the next target via keydown and keyup. The initially set continueSelect value is the inactive(keyup) value.

toggleContinueSelectWithoutDeselect

toggleContinueSelectWithoutDeselect: null | string | string[] | string[][]

Determines which key to continue selecting the next target without deselect via keydown and keyup. The initially set continueSelectWithoutDeselect value is the inactive(keyup) value.

Settings

Member Visibility

Theme

On This Page

boundContainercheckInputcheckOverflowclassNameclickBySelectEndcontainercontinueSelectcontinueSelectWithoutDeselectcspNoncecustomSelectionAreaCssClassdisableMultiselectdragConditiondragContainerdrawCustomSelectionAreagetElementRecthitRateinnerScrollOptionskeyContainerportalContainerpreventClickEventByConditionpreventClickEventOnDragpreventClickEventOnDragStartpreventDefaultpreventDragFromInsidepreventRightClickratiorootContainerscrollOptionsselectByClickselectFromInsideselectableTargetsshowMultiselectWarningstoggleContinueSelecttoggleContinueSelectWithoutDeselect