The Story
I'm a huge fan of rap music. I've been one ever since I was a kid. Lately, I've been doing a lot of writing on rap music, and by extension, I've been perusing Genius.com's massive lyric database. I even have an account with them, but in perusing Genius.com's database is that regular account holder's can't contribute annotations unless they've reached a certain level of credibility. Genius I'm sure has their own reasons for doing this, but it made me think about creating a project that functioned similarly to Genius without limiting the user's ability to create annotations.
I'm not trying to recreate Genius.com. What I'm trying to do is recreate the functionality of their website with JavaScript
The Plan
Thankfully, I'm not working alone. My friend, Ned, a fellow programmer, and I are teaming up to tackle this project, and our first step was to review Genius's site and make a list of all the things we want the user to be able to do. In doing so we came up with the following list in a Google doc.
List of things we want the user to do
- Users can highlight and click lines of verse (first column) w/ no clicking before highlighting
- Click produces second column (block editor / form thread)
- Write/post to column
- Edit the column (could have different users - shows which user made which changes)
- Exit the column
No doubt we'll run into blind spots as we begin to scaffold and test our application, but at the moment, we're using this list as a starting point for building our web app.
Step 1 (Detecting when a user has highlighted a portion of text)
In this example, I'm using a verse from Drake's "Jimmy Cooks," which released on his seventh studio album, Honestly Nevermind(2022)
In the below example I've placed each line of the verse inside a p tag.
In order to detect what text the user has selected, I'm using the onmouseup attribute and I'm setting that to a javaScript function that will grab the text that was selected and, as a test, store it in a text area element. The function definition as well as what it looks like in practice is included here.
Considerations
Being able to detect which text the user has selected and returning it is an important first step in making this project come alive. However, in working on this feature, I realized that I could also accomplish the same thing by using the onmousedown attribute.
Interestingly, the difference between onmouseup and onmousedown really comes down to user experience. Whereas onmouseup will highlight the text as soon as the user has released the mouse button on whatever has been highlighted, onmousedown, by default, creates a 'pause' between when the text is highlighted and when the information is stored in the text area. Check the image below for an example.
This could be useful if in the event the user finds that they selected the wrong text on accident. We could, for example, include a "are you sure?" prompt after the user has selected the text that they want.
Top comments (1)
I think that a step forward would be to attach an event listener to the whole article and then based on the paragraph clicked it could handle this logic - without having the onclick in the HTML.