This is Part 4 of Real Time Commenting System Functionality. Part 1, Part 2 and Part 3 are Prerequisites of Part 4. Real Time Commenting System | Part 1 Real Time Commenting System | Part 2 Real Time Commenting System | Part 3 View the Functionality It involves WiX Database and WiX Real time. (You can go through the Velo Documentation) For now, you just need to know few basic concepts: The idea of PubSub is core to Real Time. To make it real time, wix-realtime form and wix-realtime-backend are used. Any message published to a channel is immediately received by all of the subscribers to the channel. All the comments of every channel is stored in Database. Real time makes it more interactive and makes the user experience more engaging. - Priyanka Verma

This is Part 3 of Real Time Commenting System Functionality. Part 1 and Part 2 are Prerequisites of Part 3. Real Time Commenting System | Part 1 Real Time Commenting System | Part 2 Now you will be able to Edit and Delete your comments. View the Functionality. These additions are made just by creating two new functions. Functions editBtn_click deleteBtn_click editBtn_click disable the comment and delete buttons get the repeater data in commentData variable find the index of selected comment get the data of selected comment in editCommentData variable If the label of button is edit then set the value of comment input box to selected comment and change the label of button to "Save" else get the edited comment in editedComment variable update the data of selected comment using editedComment update commentData and set this to repeater data fill the repeater with updated data set the value of comment Input box to null after 100ms, collapse the comment box and empty the placeholder of comment Input box change the label of button to "Edit" enable the comment and delete button deleteBtn_click get the repeater data in commentData variable find the index of selected comment get the id of all the selected sub-comments of selected comment in itemIdArr variable using for loop remove the selected comments and its sub-comments from commentData using splice function update the repeater data set the value of commentInput to null after 100ms, collapse the input box and empty the placeholder of comment input box - Priyanka Verma

This is Part 2 of Threaded Comments Functionality. Part 1 is a Prerequisite of Part 2. Real Time Commenting System | Part 1 You will be able to show and hide the all the sub-comments just on a double click. View the Functionality. This feature is added just by creating one additional function. expandCollapse() id of the item which is double clicked is stored in a variable data of the repeater is stored in commentData variable index of selected item is found using findIndex() all the comments with depth greater than the element which is double clicked are stored in itemIdArr using for loop all the sub comments collapse if they were expanded and expand if they were collapsed - Priyanka Verma

This is Part 1 of creating Real Time Commenting System Element. Real Time Threaded comments allow readers to reply to other comments inline/nested which encourages better discussion and responses. View the Element Before moving forward, go through the Code and Comment down all the 10 steps discussed in How to Read the Code. This Forum Post will cover Step 5 onwards. Step 5 WiX Elements: 1 Text (#heading) 1 Repeater (#commentsRepeater) 1 Input Box (#commentInput) 1 Button (#sendBtn) 1 Container Box (#inputBox) Note: The id of Elements is mentioned in brackets with # Step 6 Global Variables: toCommentOn Step 7 Functions: onReady heading_click sendBtn_click commentInput fillRepeater Step 8 onReady When #heading is clicked heading_click() is called When #sendBtn is clicked sendBtn_click() is called When #comment is clicked commentInput is clicked fillRepeater() is called fillRepeater() fills the data in the #repeater heading_click() updates toCommentOn variable expands #inputBox update the placeholder text of #commentInput sendBtn_click() gets the #repeater data in commentData variable create new object for new comment entered update repeater data commentInput get the id of clicked item from repeater get the comment of clicked item update placeholder of #commentInput - Priyanka Verma

Before we begin with it, It’s is necessary that you get this - It is not the Coding that’s valuable. What’s valuable is what you build from it. You might not understand it this way, Let me give you an example - Suppose you want to build a Software for your Startup. To build the Software, there are two ways One is uttering a Mantra and the Second is Coding What would you choose? Will you choose to Code? I don’t think so. (There isn’t any need either) You must be able to see this distinction before you get into Coding. Otherwise? What’s the value of just Coding? It’s worthless. Reading Code is one of the initial steps in Learning to Code. In Learning, Initial steps are very crucial. If you mess up initially, there’s a high chance that you have cut short the possibility of how much you could have learned. But, I’ll not mess up... (Did you think that?) You will if you don’t exactly know how someone messes up. One messes up only when one forms opinions about what he doesn't know. Popular opinions in coding... One must start with C as it covers the basics of programming. I will learn C because that’s what my College teaches. What’s the point in learning Web Development now? Industry prefers C++ and Java, so why should I learn JavaScript? I’ll learn DS&A because that’s what dream companies demands. I’ll build my website from the core. Low Code/ No Code isn’t a long term thing. It doesn’t allow flexibility. Just think… Do you have the right to have such opinions if you don’t know about Coding? You don’t have the Right! Now, Let’s get into the actual thing. The example functionality referred to : https://coderwix.wixsite.com/proicoding Step 1: You Code on paper, not on Editor Get your Paper-Pen ready. Step 2: Observe the Functionality Carefully and Note down your observations. Example : Every Slide is of different duration. The Animation Effect is not the same for all Slides. Step 3: Visualize the functionality. The Clearer you are able to visualize, the easier it will be for you to understand it fully. Step 4: Read the Code once. Just go through. Do not start searching for how exactly it works. For Example : You were going through the code and you started searching for setInterval() If you start searching for everything, you will go out of track! Step 5: Note down all the WiX Elements used. Example : WiX Elements in this functionality are : 1 Slider 1 Image 2 Container Box 2 TextBox Step 6: Note down all the Global Variables. Also, note the initialized values. Example : Global Variables in this functionality are : data Array with Objects Each Object in the form : { “title“ :__, “slideImageUrl” :__, “subtitle” : __, “onClickUrl” : __, “duration” : __ } currentSlideIndex = 0 slidePace = 0 setIntervalVar Step 7 : Note down all the functions. Example : The functions in this Functionality are : onReady showSlide nextSlide prevSlide isCurrentSlideIndexValid openLink prevBtn_click nextBtn_click imgAnim Step 8 : Now, Step 3 will help you to go through the functions. Start from onReady function (The function which runs when the page loads) Go through whatever is written in it. Step 9 : Whenever a function is called, keep track of parameters of the function and what it returns. Once you have understood the function, go back to the calling line of code. Assign the returned value to the variable (If the function returns) In this way, Draw a map of function calls. Step 10 : Note down your understanding of the function. Example : showSlide(i) Function The index of slide i. imgAnim() called to animate the slide. The slideData variable has the title, slideImageUrl, subtitle, onClickUrl, duration of the slide in the form of object. The value of title, subtitle, image url is assigned. The target kink of title, subtitle image is assigned. The rate of slide is set using the duration of slide In setInterval, every 50ms, nextSlide() function is called. Note : While going through the functions, you might come across certain JS functions which you don’t know, you can search about them from Velo Documentation and then continue. Example : In the imgAnim(), you want to know how wixAnimations.timeline() work. You can search for it in Velo Documentation. Most of the functions are covered this way. In case some functions are not covered this way, You will figure out which function to go to next with the help of Step 3. - Team PROi