Support passing multiple containers for scroll selecting.

[shrihari-prakash]

Environments

• Framework name: vue-selecto
• Framework version: 1.20.3
• Component name:
• Component version:
• Testable Address(optional):

Description

issue.mp4

I have a selecto object that spans across multiple containers. From the video, what it first looks like is that the first page of both the lists were selected when I selected across multiple divs. However, it looks like the hidden elements in the first list were also selected which is a little weird. If this is the case, it is good to have an option to pass multiple containers into scrollOptions of vue selecto so that when I scroll past the first set, the screen scrolls and when the scroll reaches the end, it selects the second set. Or is it possible to select only the ones that are not scrolled? Do you have other recommendations for such use cases?

[daybrush]

@shrihari-prakash

Let's consider it as a feature.

[daybrush]

@shrihari-prakash

• lit-selecto 1.21.0
• preact-selecto 1.18.0
• react-selecto 1.21.0
• selecto 1.21.0
• svelte-selecto 1.21.0
• vue-selecto 1.21.0
• vue3-selecto 1.7.0
• ngx-selecto 1.21.0

selecto's new version is released.

use checkOverflow prop to true

[shrihari-prakash]

Hello @daybrush ,
Thanks for your very quick implementation. Appreciate the effort. I can confirm that this is working well and hidden items are not selected anymore. Do you suggest anything about having multiple containers supported on scrollable divs?That is, passing an array of containers in scrollOptions.container or something similar?

[daybrush]

@shrihari-prakash

Selecto's new version is released.

use innerScrollOptions prop and @innerScroll event

<Selecto
   :innerScrollOptions="true"
   @innerScroll="onInnerScroll"
  />

export default {
  methods: {
     onInnerScroll({ container, direction }) {
        console.log("inner");
        container.scrollBy(direction[0] * 10, direction[1] * 10);
    },
  },
}

[jonlepage]

@daybrush am also looking for this feature, but it seem not a fix on my side :(
is it possible to use the dragcontainer for detect scroll ?

because innerScroll seem log random child elements elements !

[jonlepage]

actualy this hack work

[jonlepage]

@daybrush
my bad something wrong and i really not understand !!
just spend ~3hour to understand the issue without success.

current code:

/**
	 * creer une Selecto instance attacher a un dom element
	 * @param id - id de la selecto instance {SelectoId}
	 * @param dragContainer - dom element qui sera le container de drag, le selecto fonctionera seulement si le mouse est dans ce container
	 * @param options - options de la selecto instance
	 */
	public create( id:SelectoId, dragContainer:HTMLDivElement, options?: Partial<SelectoOptions> ) {
		// test hack for allow scroll in fieldset element
		const dragContainer2 = [...dragContainer.querySelectorAll( 'fieldset' )];
		const { selectorsMap } = this;

		const counter = createCounterElement(); // just for ux design.
		const selecto = new Selecto({
			// The container to add a selection element
			container: document.body,
			dragContainer:dragContainer2,

			// Targets to select. You can register a queryselector or an Element.
			selectableTargets: [`.${CLASS_NAME_SELECTABLE}`],

			// Whether to select by click (default: true)
			selectByClick: true,

			// Whether to select from the target inside (default: true)
			selectFromInside: true,

			// After the select, whether to select the next target with the selected target (deselected if the target is selected again).
			continueSelect: true,

			// Determines which key to continue selecting the next target via keydown and keyup.
			toggleContinueSelect: 'shift',

			// The container for keydown and keyup events
			keyContainer: window,
			toggleContinueSelectWithoutDeselect: 'alt', // Determines which key to continue selecting the next target via keydown and keyup without deselecting.
			continueSelectWithoutDeselect: true, // After the select, whether to select the next target with the selected target (not deselected if the target is selected again).
			// The rate at which the target overlaps the drag area to be selected. (default: 100)
			hitRate: 10,
			ratio: 0,
			preventRightClick:false,

			checkOverflow : true,
			scrollOptions: {
				container: dragContainer,
				throttleTime: 30,
				threshold: 0,
				useScroll: true,
			},

			...options,
		})
			.on( 'dragStart', ( e ) => {
				selecto.scrollOptions.container = e.inputEvent.currentTarget as HTMLElement;
				document.getElementsByClassName( 'selecto-selection' )[0].appendChild( counter );
			})
			.on( 'select', ( e ) => {
				counter.innerHTML = e.selected.length.toString();
				gsap.fromTo( counter, { scale: 2 }, { scale: 1, duration: .4, ease: 'back.out(1.7)' });
			})
			.on( 'scroll', ( e ) => {
				e.container.scrollBy( e.direction[0] * 20, e.direction[1] * 20 );
			});

		selectorsMap.set( id, selecto );
		return selecto;
	}