aelve/guide
1
1
Fork 0
mirror of https://github.com/aelve/guide.git synced 2024-12-24 13:26:08 +03:00
Code Issues Projects Releases Wiki Activity

Use a textarea for pros/cons

Browse Source
This commit is contained in:
Artyom 2016-03-04 14:26:18 +03:00
parent 16021a3d26
commit ddcbc2bd16
1 changed files with 35 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/Main.hs
View File

@ -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 [
JS.submitCategoryTitle (titleNode, category^.uid, inputValue) <> value_ (category^.title),
clearInput onEnter $
JS.submitCategoryTitle (titleNode, category^.uid, inputValue) <>
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"