Verified Commit 278baecf authored by Camil Staps's avatar Camil Staps 🙂

Add variants of dropdown, dropdownWithGroups, and chooseWithDropdown to Extensions.Editors.Select2

parent 32eea856
implementation module BasicAPIExamples.Extensions.Select2
import Text
import iTasks
import iTasks.UI.Editor.Common
import iTasks.Extensions.Editors.Select2
wf :: String -> Workflow
wf a = workflow a "Enter an expression using Select2 input fields" enter
wf a = workflow a "Try out the Select2 extension for searchable select boxes" main
main :: Task ()
main = enter @! ()
main = ArrangeWithTabs False @>>
allTasks
[ select2AndNormal "Enter expression (withSelect2)" enterExpression
, select2AndNormal "Dropdown" enterWithDropdown
, select2AndNormal "Dropdown with groups" enterWithDropdownWithGroups
]
@! ()
where
select2AndNormal title task = Title title @>> ArrangeHorizontal @>>
(
forever (task True "with Select2 input fields")
-&&-
forever (task False "with standard HTML select boxes")
)
@! ()
:: Expr
= Literal Int
......@@ -16,9 +33,42 @@ main = enter @! ()
derive class iTask Expr
enter :: Task Expr
enter =
Hint "Enter an expression:" @>>
enterInformation [EnterUsing id (withSelect2 gEditor{|*|})] >>! \expr ->
enterExpression :: !Bool !String -> Task Expr
enterExpression select2 hint =
Hint (concat ["Enter an expression ",hint,":"]) @>>
enterInformation [EnterUsing id editor] >>! \expr ->
Hint "You entered:" @>>
viewInformation [] expr >>! return
where
editor = if select2 (withSelect2 gEditor{|*|}) gEditor{|*|}
enterWithDropdown :: !Bool !String -> Task String
enterWithDropdown select2 hint =
Hint (concat ["Enter a value ",hint,":"]) @>>
enterInformation [EnterUsing id (choose options)] @ ((!!) options) >>! \choice ->
Hint "You entered:" @>>
viewInformation [] choice >>! return
where
choose = if select2 chooseWithSelect2Dropdown chooseWithDropdown
options = ["Apple", "Banana", "Cherry"]
enterWithDropdownWithGroups :: !Bool !String -> Task String
enterWithDropdownWithGroups select2 hint =
Hint (concat ["Enter a value ",hint,":"]) @>>
enterInformation [EnterUsing id editor] @ (fst o (!!) options) >>! \choice ->
Hint "You entered:" @>>
viewInformation [] expr
viewInformation [] choice >>! return
where
editor = bijectEditorValue
(\i -> [i])
(\sel -> case sel of [x] -> x; _ -> 0)
(withConstantChoices numberedOptions
(if select2 select2DropdownWithGroups dropdownWithGroups))
numberedOptions =
[({ChoiceText | id=i, text=t}, group) \\ (t,group) <- options & i <- [0..]]
options =
[(opt, Just "Fruits") \\ opt <- fruits] ++
[(opt, Just "Veggies") \\ opt <- veggies]
where
fruits = ["Apple", "Banana", "Cherry"]
veggies = ["Arugula", "Broccoli", "Chickpea"]
definition module iTasks.Extensions.Editors.Select2
/**
* Allows you to replace standard HTML `select` boxes in editors with Select2
* input fields (https://select2.org/). This lets the user search for options.
*/
from StdMaybe import :: Maybe
from iTasks.UI.Editor import :: Editor
from iTasks.UI.Editor.Controls import :: ChoiceText
/**
* Replaces all HTML `select` boxes in the editor with Select2 input fields
* (https://select2.org/), including `select` boxes of child editors and that
* are added later dynamically.
*/
withSelect2 :: !(Editor a) -> Editor a
/**
* A replacement for `dropdown` (iTasks.UI.Editor.Controls) using Select2 input
* fields (https://select2.org/).
*/
select2Dropdown :: Editor ([ChoiceText], [Int])
/**
* A replacement for `dropdownWithGroups` (iTasks.UI.Editor.Controls) using
* Select2 input fields (https://select2.org/).
*/
select2DropdownWithGroups :: Editor ([(ChoiceText, Maybe String)], [Int])
/**
* A replacement for `chooseWithDropdown` (iTasks.UI.Editor.Common) using
* Select2 input fields (https://select2.org/).
*/
chooseWithSelect2Dropdown :: [String] -> Editor Int
......@@ -7,7 +7,7 @@ import Data.Func
import ABC.Interpreter.JavaScript
import iTasks.UI.Editor
import iTasks
JQUERY_JS :== "/select2/jquery-3.5.1.slim.min.js"
SELECT2_JS :== "/select2/select2.min.js"
......@@ -16,7 +16,10 @@ SELECT2_CSS :== "/select2/select2.min.css"
jQuery :== jsGlobal "jQuery"
withSelect2 :: !(Editor a) -> Editor a
withSelect2 editor=:{Editor | genUI} =
withSelect2 editor = withSelect2` True editor
withSelect2` :: !Bool !(Editor a) -> Editor a
withSelect2` observeMutations editor=:{Editor | genUI} =
{ Editor
| editor
& genUI = withClientSideInit initUI genUI
......@@ -25,9 +28,11 @@ where
initUI :: !JSVal !*JSWorld -> *JSWorld
initUI me world
# world = addCSSFromUrl SELECT2_CSS world
# (fun,world) = jsWrapFun (initDOMEl me) me world
# (orgInitDOMEl,world) = me .# "initDOMEl" .? world
# (fun,world) = jsWrapFun (initDOMEl me orgInitDOMEl) me world
= (me .# "initDOMEl" .= fun) world
initDOMEl me _ world
initDOMEl me orgInitDOMEl _ world
# world = (jsCall (orgInitDOMEl .# "bind") me .$! ()) world
# (fun,world) = jsWrapFun (initDOMEl` me) me world
= addJSFromUrl JQUERY_JS (Just fun) world
initDOMEl` me _ world
......@@ -37,6 +42,8 @@ where
# (onSelect,world) = jsWrapFun onSelect me world
// Install select2 on the currently present select fields
# world = installSelect2 onSelect (me .# "domEl") world
| not observeMutations
= world
// Install a MutationObserver to also install select fields added later
# (onDOMMutation,world) = jsWrapFun (onDOMMutation onSelect) me world
# (observer,world) = jsNew "MutationObserver" onDOMMutation world
......@@ -44,6 +51,9 @@ where
= (observer .# "observe" .$! (me .# "domEl", config)) world
installSelect2 onSelect elem world
# (tag,world) = elem .# "tagName" .? world
| jsValToString` "" tag == "SELECT"
= initSelect2 elem world
# (elem,world) = (jQuery .$ elem) world
# (elems,world) = (elem .# "find" .$ "select") world
# (elems,world) = jsValToList` elems id world
......@@ -74,3 +84,17 @@ where
handleMutation mutation world
# (addedNodes,world) = jsValToList` (mutation .# "addedNodes") id world
= seqSt (installSelect2 onSelect) addedNodes world
select2Dropdown :: Editor ([ChoiceText], [Int])
select2Dropdown = withSelect2` False dropdown
select2DropdownWithGroups :: Editor ([(ChoiceText, Maybe String)], [Int])
select2DropdownWithGroups = withSelect2` False dropdownWithGroups
chooseWithSelect2Dropdown :: [String] -> Editor Int
chooseWithSelect2Dropdown labels = bijectEditorValue
(\i -> [i])
(\sel -> case sel of [x] -> x; _ -> 0)
(withConstantChoices options select2Dropdown <<@ multipleAttr False)
where
options = [{ChoiceText|id=i,text=t} \\ t <- labels & i <- [0..]]
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment