{"id":28803,"date":"2017-03-12T03:01:55","date_gmt":"2017-03-11T17:01:55","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=28803"},"modified":"2022-04-11T17:55:55","modified_gmt":"2022-04-11T07:55:55","slug":"wordpress-code-download-table-interface-double-click-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-code-download-table-interface-double-click-tutorial\/","title":{"rendered":"WordPress Code Download Table Interface Double Click Tutorial"},"content":{"rendered":"
\"WordPress<\/a>

WordPress Code Download Table Interface Double Click Tutorial<\/p><\/div>\n

If you’ve been coding Javascript in a web application have you ever pondered the string functions …<\/p>\n\n\n
\n
\nincludes()<\/a>
\n<\/code>\n<\/td>\n		 … versus … <\/td>\n\n
\nindexOf()<\/a>
\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n

? To be honest, I haven’t much, because am always using indexOf()<\/a>, but to be fair, you might use includes()<\/a> in a code scenario where you are trepidatious as to whether to proceed with something more involved, and are sort of just “testing the waters” so to speak, and\/or perhaps if you are doing this several thousand times, and you are not interested in anything other than one string’s existence<\/i> in another. So, thinking on it, perhaps I should get around more.<\/p>\n

What’s the relevance of all this? Well, yesterday, when we presented WordPress Code Download Table Interface Primer Tutorial<\/a>, as shown below, we showed a code snippet containing what was, for us, a very critical Javascript variable called cafd<\/b> which was used in a binary<\/i> (boolean) way, in that it moved from a value of false<\/i> initially to a value of true<\/i> for the rest, but this binary<\/i> feeling design (reminiscent of an includes()<\/a>‘s<\/i> type of approach) is not enough for the more ambitious aims today of adding in an “on double click” two layer event logic design where a first click does different things to what the second click does. To be honest, we get fond of our critical var<\/i>iables and we wanted to just use cafd<\/i> more usefully, so we rearranged its use to be that of an (integer) number, in a similar line of thinking to how indexOf()<\/a> works (by starting with a value of -1 meaning “not found”) to having various other useful larger than zero values that are the means by which the web application, via the id<\/i> property, can get back to deriving the span<\/i> element object involved with the user’s click (or second part of double click). Read more on this below.<\/p>\n

Now, another idea from today’s work, though not spelt out<\/i> in what we do, is the extension of functionality via event<\/i> thinking. What we mean by that, is that what we did yesterday with the addition of those Emoji (span<\/i> element) onclick<\/i> event logics was to link the event with window.open()<\/i> popup functionalities, not popular with all, but what if we were to, on that first click, instead, place the URL findings we navigate to into an …<\/p>\n

    \n
  1. iframe<\/i> element, for the first click … and then onto those same …<\/li>\n
  2. window.open()<\/i> popups on the second click (and then toggle back to the previous again, all this controlled by the existence, or not, for the Emoji span<\/i> element of a 2px solid yellow<\/i> border)<\/li>\n<\/ol>\n

    Notice the numbering above? Everything is pointing at the use of the ondblclick<\/a> (on double click) event here, but there are a couple of reasons we do not proceed down that route, and we want to suggest another idea, and those reasons are …<\/p>\n