mirror of
https://github.com/aelve/guide.git
synced 2024-12-24 21:35:06 +03:00
Use a textarea for pros/cons
This commit is contained in:
parent
16021a3d26
commit
ddcbc2bd16
54
src/Main.hs
54
src/Main.hs
@ -611,10 +611,15 @@ renderRoot globalState = do
|
|||||||
onPageLoad $ JS.showOrHideHelp ("#help" :: JQuerySelector, helpVersion)
|
onPageLoad $ JS.showOrHideHelp ("#help" :: JQuerySelector, helpVersion)
|
||||||
-- TODO: use ordinary form-post search instead of Javascript search (for
|
-- TODO: use ordinary form-post search instead of Javascript search (for
|
||||||
-- people with NoScript)
|
-- people with NoScript)
|
||||||
textInput [id_ "search", placeholder_ "search"] $
|
textInput [
|
||||||
JS.search ("#categories" :: JQuerySelector, inputValue)
|
id_ "search",
|
||||||
textInput [placeholder_ "add a category"] $
|
placeholder_ "search",
|
||||||
JS.addCategory ("#categories" :: JQuerySelector, inputValue) <> clearInput
|
-- TODO: add something to construct a selector
|
||||||
|
onEnter $ JS.search ("#categories" :: JQuerySelector, inputValue) ]
|
||||||
|
textInput [
|
||||||
|
placeholder_ "add a category",
|
||||||
|
onEnter $ JS.addCategory ("#categories" :: JQuerySelector, inputValue) <>
|
||||||
|
clearInput ]
|
||||||
-- TODO: sort categories by popularity, somehow? or provide a list of
|
-- TODO: sort categories by popularity, somehow? or provide a list of
|
||||||
-- “commonly used categories” or even a nested catalog
|
-- “commonly used categories” or even a nested catalog
|
||||||
renderCategoryList (globalState^.categories)
|
renderCategoryList (globalState^.categories)
|
||||||
@ -679,9 +684,11 @@ renderCategoryTitle editable category =
|
|||||||
textButton "edit" $
|
textButton "edit" $
|
||||||
JS.setCategoryTitleMode (titleNode, category^.uid, InEdit)
|
JS.setCategoryTitleMode (titleNode, category^.uid, InEdit)
|
||||||
InEdit -> do
|
InEdit -> do
|
||||||
textInput [value_ (category^.title)] $
|
textInput [
|
||||||
|
value_ (category^.title),
|
||||||
|
onEnter $
|
||||||
JS.submitCategoryTitle (titleNode, category^.uid, inputValue) <>
|
JS.submitCategoryTitle (titleNode, category^.uid, inputValue) <>
|
||||||
clearInput
|
clearInput ]
|
||||||
emptySpan "1em"
|
emptySpan "1em"
|
||||||
textButton "cancel" $
|
textButton "cancel" $
|
||||||
JS.setCategoryTitleMode (titleNode, category^.uid, Editable)
|
JS.setCategoryTitleMode (titleNode, category^.uid, Editable)
|
||||||
@ -720,8 +727,10 @@ renderCategory category =
|
|||||||
itemsNode <- div_ [class_ "items"] $ do
|
itemsNode <- div_ [class_ "items"] $ do
|
||||||
mapM_ (renderItem Normal category) (category^.items)
|
mapM_ (renderItem Normal category) (category^.items)
|
||||||
thisNode
|
thisNode
|
||||||
textInput [placeholder_ "add an item"] $
|
textInput [
|
||||||
JS.addLibrary (itemsNode, category^.uid, inputValue) <> clearInput
|
placeholder_ "add an item",
|
||||||
|
onEnter $ JS.addLibrary (itemsNode, category^.uid, inputValue) <>
|
||||||
|
clearInput ]
|
||||||
|
|
||||||
-- TODO: add arrows for moving items up and down in category, and something
|
-- TODO: add arrows for moving items up and down in category, and something
|
||||||
-- to delete an item – those things could be at the left side, like on Reddit
|
-- to delete an item – those things could be at the left side, like on Reddit
|
||||||
@ -871,8 +880,10 @@ renderItemTraits editable cat item = do
|
|||||||
listNode <- ul_ $ do
|
listNode <- ul_ $ do
|
||||||
mapM_ (renderTrait Editable (item^.uid)) (item^.pros)
|
mapM_ (renderTrait Editable (item^.uid)) (item^.pros)
|
||||||
thisNode
|
thisNode
|
||||||
textInput [placeholder_ "add pro"] $
|
textInput [
|
||||||
JS.addPro (listNode, item^.uid, inputValue) <> clearInput
|
placeholder_ "add pro",
|
||||||
|
onEnter $ JS.addPro (listNode, item^.uid, inputValue) <>
|
||||||
|
clearInput ]
|
||||||
-- TODO: maybe add a separator explicitly? instead of CSS
|
-- TODO: maybe add a separator explicitly? instead of CSS
|
||||||
div_ [class_ "traits-group"] $ do
|
div_ [class_ "traits-group"] $ do
|
||||||
p_ "Cons:"
|
p_ "Cons:"
|
||||||
@ -884,8 +895,10 @@ renderItemTraits editable cat item = do
|
|||||||
listNode <- ul_ $ do
|
listNode <- ul_ $ do
|
||||||
mapM_ (renderTrait Editable (item^.uid)) (item^.cons)
|
mapM_ (renderTrait Editable (item^.uid)) (item^.cons)
|
||||||
thisNode
|
thisNode
|
||||||
textInput [placeholder_ "add con"] $
|
textInput [
|
||||||
JS.addCon (listNode, item^.uid, inputValue) <> clearInput
|
placeholder_ "add con",
|
||||||
|
onEnter $ JS.addCon (listNode, item^.uid, inputValue) <>
|
||||||
|
clearInput ]
|
||||||
case editable of
|
case editable of
|
||||||
Normal -> textButton "edit pros/cons" $
|
Normal -> textButton "edit pros/cons" $
|
||||||
JS.setItemTraitsMode (this, item^.uid, Editable)
|
JS.setItemTraitsMode (this, item^.uid, Editable)
|
||||||
@ -909,11 +922,12 @@ renderTrait Editable itemId trait = li_ $ do
|
|||||||
JS.deleteTrait (itemId, trait^.uid, this, trait^.content)
|
JS.deleteTrait (itemId, trait^.uid, this, trait^.content)
|
||||||
textButton "edit" $
|
textButton "edit" $
|
||||||
JS.setTraitMode (this, itemId, trait^.uid, InEdit)
|
JS.setTraitMode (this, itemId, trait^.uid, InEdit)
|
||||||
-- TODO: and textarea here
|
-- TODO: the text area should be bigger
|
||||||
renderTrait InEdit itemId trait = li_ $ do
|
renderTrait InEdit itemId trait = li_ $ do
|
||||||
this <- thisNode
|
this <- thisNode
|
||||||
textInput [value_ (trait^.content)] $
|
let submitHandler = JS.submitTrait (this, itemId, trait^.uid, inputValue) <>
|
||||||
JS.submitTrait (this, itemId, trait^.uid, inputValue) <> clearInput
|
clearInput
|
||||||
|
textarea_ [onEnter submitHandler] $ toHtml (trait^.content)
|
||||||
textButton "cancel" $
|
textButton "cancel" $
|
||||||
JS.setTraitMode (this, itemId, trait^.uid, Editable)
|
JS.setTraitMode (this, itemId, trait^.uid, Editable)
|
||||||
|
|
||||||
@ -925,11 +939,11 @@ onPageLoad js = script_ $ format "$(document).ready(function(){{}});" [js]
|
|||||||
emptySpan :: Text -> HtmlT IO ()
|
emptySpan :: Text -> HtmlT IO ()
|
||||||
emptySpan w = span_ [style_ ("margin-left:" <> w)] mempty
|
emptySpan w = span_ [style_ ("margin-left:" <> w)] mempty
|
||||||
|
|
||||||
textInput :: [Attribute] -> JS -> HtmlT IO ()
|
onEnter :: JS -> Attribute
|
||||||
textInput attrs handler =
|
onEnter handler = onkeydown_ $ format "if (event.keyCode == 13) {{}}" [handler]
|
||||||
input_ (type_ "text" : onkeyup_ handler' : attrs)
|
|
||||||
where
|
textInput :: [Attribute] -> HtmlT IO ()
|
||||||
handler' = format "if (event.keyCode == 13) {{}}" [handler]
|
textInput attrs = input_ (type_ "text" : attrs)
|
||||||
|
|
||||||
inputValue :: JS
|
inputValue :: JS
|
||||||
inputValue = JS "this.value"
|
inputValue = JS "this.value"
|
||||||
|
Loading…
Reference in New Issue
Block a user