CLDR-17799 Use Vue components for forum form and buttons #3968
Conversation
-New ForumButton.vue, ForumForm.vue; revise cldrForum.mjs; related refactoring
| /** | ||
| * Encapsulate this class name -- caution: it's used literally in surveytool.css | ||
| */ | ||
| const FORUM_DIV_CLASS = "forumDiv"; |
There was a problem hiding this comment.
FORUM_DIV_CLASS is moved from cldrForum to cldrForumPanel since no longer needs export
| if (!window.getSelection) { | ||
| return false; | ||
| if (cldrForum.isFormVisible()) { | ||
| return true; |
There was a problem hiding this comment.
Adding this condition to isInputBusy is not elegant. It reflects the fact that we have Vue components (buttons) embedded in legacy DOM elements in the Info Panel, and the whole form is attached to one of those buttons and would get obliterated by an auto-scheduled page update if we didn't prevent it
| @@ -0,0 +1,104 @@ | |||
| <script setup> | |||
There was a problem hiding this comment.
"script setup" appears to be the latest recommended syntax, and so is putting script, template, style in that order
See:
https://vuejs.org/api/sfc-script-setup
https://vuejs.org/style-guide/rules-recommended#single-file-component-top-level-element-order
There was a problem hiding this comment.
it's very handy, has some caveats.
|
|
||
| function formatParent(parentPost) { | ||
| const div = cldrForum.parseContent([parentPost], "parent"); | ||
| return new XMLSerializer().serializeToString(div); |
There was a problem hiding this comment.
This method takes DOM elements generated by legacy code (cldrForum.parseContent) and turns them into html using v-html. In the short term this is easy and achieves consistency with the legacy formatting. Eventually of course there should be a Vue component for rendering completed forum posts.
| ); | ||
| const message = | ||
| "Your post was added, #" + data.postId + " but could not be shown."; | ||
| cldrNotify.error("Error posting to Forum", message); |
| return false; | ||
| }); | ||
| return replyButton; | ||
| function addPostVueButton(containerEl, pi, label, disabled) { |
There was a problem hiding this comment.
good incremental improvement. we'll get it all sorted out…
| /** | ||
| * An empty paragraph at the bottom of the info panel enables scrolling | ||
| * to bring the bottom content fully into view without being overlapped | ||
| * by the xpath shown by addXpath | ||
| */ | ||
| function addBottom() { |
There was a problem hiding this comment.
should it be padding-bottom: 2em; or something in the CSS for the element instead? that would have a similar result without requiring mutation of the html
There was a problem hiding this comment.
This is quick and avoids going deep into the legacy css. The order of elements in the info panel seems likely to change. Having this new "bottom" element at the bottom keeps its style separate from the rest.
-New ForumButton.vue, ForumForm.vue; revise cldrForum.mjs; related refactoring
CLDR-17799
ALLOW_MANY_COMMITS=true