diff options
Diffstat (limited to 'desk/web/board/new.hoon')
| -rw-r--r-- | desk/web/board/new.hoon | 299 |
1 files changed, 299 insertions, 0 deletions
diff --git a/desk/web/board/new.hoon b/desk/web/board/new.hoon new file mode 100644 index 0000000..ed71a91 --- /dev/null +++ b/desk/web/board/new.hoon @@ -0,0 +1,299 @@ +/- *boke, cnt=contact, tp=trill-post +/+ ui=trill-ui, kaji, const=constants, wall +/= user /web/components/user +|_ [tt=tags-table =bowl:gall edit=(unit [thread:tp post:tp])] +++ css ^~ %- trip +''' +#error-div{ + color: red; +} +#new-thread{ + padding: 10px; + margin: auto; + border: 1px solid var(--background-color); + border-radius: 1%; + + & fieldset{ + border: none; + padding: 0; + margin-top: 1rem; + + & label{ + display: block; + } + & input{ + width: 100%; + line-height: 1.5rem; + } + } + + & .board-choice{ + display: flex; + align-items: center; + + & .left{ + width: 20%; + & select{ + background-color: var(--background-color); + height: 2rem; + } + } + & .right{ + margin-left: 2rem; + flex-grow: 1; + } + } + & .author{ + img{ + width:30px; + height:30px; + } + & .name{ + margin-left: 1rem; + } + } + & #bordered{ + border: 1px solid black; + width: 100%; + height: 50vh; + overflow-y: scroll; + & textarea{ + resize: none; + width: 100%; + height: 90%; + border: none; + outline: none; + } + } + & #chips{ + position: relative; + width: 100%; + border: 1px solid rgb(107, 114, 128); + padding: 0 0.5rem; + + & .chip{ + display: inline-block; + font-size: 13px; + font-weight: 500; + color: rgba(0, 0, 0, 0.6); + line-height: 26px; + padding: 0 12px; + border-radius: 16px; + background-color: #e4e4e4; + cursor: pointer; + margin: 0 2px; + } + & .selected-chip{ + background-color: rgb(100, 100, 100); + } + & .chip:hover{ + background-color: rgb(100, 100, 100); + } + + & input{ + border: 0; + display: inline-block; + font-size: 16px; + height: 2rem; + line-height: 32px; + outline: 0; + margin: 0; + padding: 0 !important; + } + } +} +@media (min-width: 800px){ + #new-thread{ + width: 70%; + } + +} +@media (max-width: 800px){ + +} +.buttons{ + display: flex; + gap: 0.5rem; + justify-content: end; + align-items: center; + +} +#poll-button{ + border: none; + background: url('https://s3.spandrell.ch/assets/board/ui/poll.svg'); + background-size: cover; + width: 30px; + height: 30px; +} +''' +++ script +=/ json-tags=json %- pairs:enjs:format + %+ turn ~(tap by tt) |= [tag=@t p=(list *)] + :+ tag %n (scot %ud (lent p)) +=/ json-string %- trip %- en:json:html json-tags +^~ %+ weld +""" +const jsonString = '{json-string}'; +const allTags = JSON.parse(jsonString); + +""" +%- trip +''' +console.log(allTags, "tags") +const tagInput = document.getElementById("tag-input"); +const tagStore = document.getElementById("tag-store"); +const chipContainer = document.getElementById("chips"); +tagInput.addEventListener("keypress", handleKey); +tagInput.addEventListener("keyup", handleBackspace); + +const chipList = new Set(); + +function init(){ + setTimeout(() => { + console.log(tagStore.value, "tagstore") + const initTags = tagStore.value.split(","); + for (let tag of initTags){ + if (tag){ + chipList.add(tag); + loadChip(tag); + } + } + }, 500) +} +init(); + +function chipString(){ + const string = [...chipList].reduce((acc, i) => `${acc},${i}`); + // const string = JSON.stringify(Array.from(chipList)); + tagStore.value = string; +} +function addChip(itag){ + const tag = itag.toLowerCase(); + if (!chipList.has(tag) && tag.length > 0 && tag.length < 32) { + chipList.add(tag); + this.loadChip(tag) + tagInput.value = ""; + chipString(); + } +} +function removeChip(e){ + chipList.delete(e.target.innerText); + chipContainer.removeChild(e.target); + chipString(); +} +function loadChip(tag) { + const c = document.createElement('div'); + c.classList.add("chip"); + c.id = tag; + c.innerText = tag; + c.addEventListener("click", removeChip) + chipContainer.insertBefore(c, tagInput); +} +function handleBackspace(e){ + console.log(e.keyCode, "keyup") + console.log(e.target.selectionStart, "keyup") + if (!(e.keyCode === 8 && e.target.selectionStart == 0)) return + const chips = chipContainer.querySelectorAll('.chip'); + if (chips.length === 0) return + const to_delete = chipContainer.querySelector('.selected-chip'); + + if (to_delete) removeChip({target: to_delete}); + else { + const last_chip = chips[chips.length - 1]; + last_chip.classList.add("selected-chip"); + } +} +function handleKey(e) { + // autocomplete? + console.log(e.keyCode, "keycode") + console.log(e) + if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) e.preventDefault(); + if (e.keyCode === 13) addChip(e.target.value); +} + + +''' +++ $ ^- manx +=/ [stitle=tape stags=tape stext=tape] ?~ edit ["" "" ""] +:+ (trip title.-.u.edit) + (tags-to-tape:ui tags.-.u.edit) + (content-to-md:ui contents.+.u.edit) +=/ wal ~(. wall src.bowl) +=/ cats boards:wal +=/ whoms (get-contacts:cnt bowl) +=/ usr (user src.bowl whoms 30) +=/ subscription (subscription-type:wal now.bowl) +;div#new-thread.fsy + ;style:"{css}" + ;+ ?~ edit + ;h1.tc:"New Thread" + ;h1.tc:"Edit Thread" + ;form + =kaji "poke" + =action "add-thread" + ;fieldset + ;label:"Title" + ;input(type "text", name "title", value stitle); + == + ;fieldset.board-choice + ;label.left + ;div:"Board" + ;select + =name "board" + ;* %+ turn %- sort :_ aor ~(tap in cats) |= nam=@t + =/ name (trip nam) + ?: .=(nam 'public') + ;option(value name, selected ""):"{name}" + ;option(value name):"{name}" + == + == + ;label.right + ;div:"Tags" + ;div#chips + ;input(type "text", placeholder "press enter to input individual tags, click on a tag to delete", enterkeyhint "enter", id "tag-input"); + ;input(type "hidden", id "tag-store", name "tags", value stags); + == + == + == + ;fieldset + ;label:"Text" + ;div#bordered + ;textarea(name "text") + ; {stext} + == + == + == + ;div.f1 + ;div.author.flex + ;div:"Posting as" + ;div.flex.ml1 + ;+ avatar.usr + ;+ name.usr + == + == + ;input(type "hidden", name "error-div", value "#error-div"); + ;span#error-div; + ;div.buttons + ;* ?~ subscription ~ + ;= ;button#poll-button(type "button") + =kaji "scry" + =swap "add" + =cont "#bordered" + =path "/board/f/poll/new" + ; + == + ;input#upload-img@"https://s3.spandrell.ch/assets/board/octicons/image-24.svg"(type "image"); + == + ;* ?~ edit ;+ ;input(type "submit", value "Submit"); + ;= ;input(type "submit", value "Edit"); + ;input(type "hidden", name "editing") + =value (enc:kaji pid.-.u.edit) + ; + == + == + == + == + == + ;script:"{script}" +== +-- |