multiselect._hs

behavior multiselect 

	init
		add .multiselect
		add [@role="menu"]

		tell <label/> in me
			add [@tabIndex=0]
			add [@role="menuitem"]
		end

		tell <input/> in me
			add [@role="menuitemcheckbox"]
		end

		-- if available, make the label sortable
		if Sortable is not null then
			tell <div.options/> in me
				make a Sortable from yourself, {animation:150, whisperClass:'multiselect-whisper', onEnd: \ evt -> evt.item.focus()}
			end
		end

	on change	
		set label to the closest <label/> to the target
		if label is not null then
			take .selected for label
		end

	on click from <button[data-sort=up]/> in me		
		set currentLabel to getSelectedLabel(me)

		if currentLabel is null then
			exit
		end

		set container to the currentLabel's parentNode
		set previousLabel to the currentLabel's previousElementSibling

		if previousLabel is null then 
			exit
		end
		
		container.insertBefore(currentLabel, previousLabel)
		focus() the target

	on click from <button[data-sort=down]/> in me
		set currentLabel to getSelectedLabel(me)
		if currentLabel is null then
			exit
		end

		set container to the currentLabel's parentNode
		set nextLabel to the currentLabel's nextElementSibling
		log nextLabel
		if nextLabel is null then 
			exit
		end
		
		container.insertBefore(nextLabel, currentLabel)
		focus() the target

	on focus from <label/> in me
		take .selected for target

	on focus from <input/> in me
		focus() the closest <label/> to the target

	on keydown[code=="ArrowUp"]
		halt the event
		set currentLabel to getSelectedLabel(me)
		set previousLabel to previous <label/> from currentLabel
		if previousLabel is not null then
			take .selected for previousLabel		
			if currentLabel is document.activeElement then
				focus() the previousLabel
			end
		end
	
	on keydown[code=="ArrowDown"]
		halt the event
		set currentLabel to getSelectedLabel(me)
		set nextLabel to next <label/> from currentLabel
		if nextLabel is not null then
			take .selected for nextLabel
			if currentLabel is document.activeElement then
				focus() the nextLabel
			end
		end

	on keypress[code=="Space"]

		-- handle "sort" buttons
		if target[@data-sort] is not null then
			exit
		end

		-- otherwise, toggle checkboxes
		set selection to first <label.selected/> in me
		if selection is not null then
			set input to first <input/> in selection
			set input.checked to (input.checked == false)
			focus() the selection
			halt the event
		end
	end

end

def getSelectedLabel(container)
	-- try the .selected label
	set result to the first <label.selected/> in container
	if result is not null then
		return result
	end

	-- try the document's active element
	set result to document's activeElement
	if (closest <div.multiselect/> to result) is me then
		take .selected for result
		return result
	end

	-- bail out to the first label in the container
	set result to first <label/> in container
	take .selected for result
	return result
end