{"id":59767,"date":"2023-06-18T03:01:02","date_gmt":"2023-06-17T17:01:02","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=59767"},"modified":"2023-06-18T07:51:51","modified_gmt":"2023-06-17T21:51:51","slug":"youtube-music-video-external-javascript-more-genericization-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/youtube-music-video-external-javascript-more-genericization-tutorial\/","title":{"rendered":"YouTube Music Video External Javascript More Genericization Tutorial"},"content":{"rendered":"
\"YouTube<\/a>

YouTube Music Video External Javascript More Genericization Tutorial<\/p><\/div>\n

Yesterday’s YouTube Music Video External Javascript Genericization Tutorial<\/a> started our external Javascript genericizations with our Peer to Peer YouTube Web Application. Some may find it irritating, but we even use code like<\/font> …<\/p>\n


\n if (document.getElementById('sshuffle')) {
\n var ssos=document.getElementById('sshuffle').innerHTML.split('<\/option>');
\n console.log('sshuffle option numbers=' + eval(-1 + ssos.length));
\n if (eval(-1 + ssos.length) <= 1) {
\n if (typeof<\/a> process == \"function\") {
\n nogocnt++;
\n if (nogocnt >= 3) { process(document.getElementById('sshuffle')); }
\n }<\/font>
\n }
\n }
\n<\/code><\/p>\n

… to have external Javascript look back at its hosting webpage’s code, rather than duplicating effort, especially for optional workflow functionality. We don’t think it’s so<\/i> bad, as we’d resiled ourselves to HTML iframe logic that looks back at its parent for clientside help, in the past.<\/p>\n

With us, it’s in large part Javascript DOM<\/a> here, and DOM has that …<\/p>\n


\n \/\/ document.getElementById([elementId]).style.[CSSpropertyLessMinusBecomesCapital] = [value]; \/\/ eg .
\n document.getElementById('rshuffle').style.backgroundColor='#f9f9f9';
\n<\/code><\/p>\n

… ability to change the look of the webpage CSS styling.<\/p>\n

And external Javascript can be the “backup” system, as it checks to see whether it needs to help populate that shuffle functionality dropdown at the bottom of the webpage, in that code snippet above.<\/p>\n

The “right click” ideas of yesterday were okay for non-mobile, but not so much for mobile (where we now offer double click event functionality), and so we recoded<\/font> …<\/p>\n


\n if (document.getElementById('rshuffle')) {
\n if (('' + document.getElementById('rshuffle').placeholder).indexOf(' click ') == -1) {
\n betterhc=capitfl(document.URL.split('.htm')[0].split('\/')[eval(-1 + document.URL.split('.htm')[0].split('\/').length)].replace(\/\\_\/g,' '));
\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {
\n document.getElementById('rshuffle').placeholder+=' ... double click for ' + decodeURIComponent(inpttls[curvalis]);
\n document.getElementById('rshuffle').ondblclick=function(event) { if (event.target.value == '') { event.target.value=inpvals[curvalis] + ',' + inpttls[curvalis]; event.target.blur(); } };
\n } else {<\/font>
\n document.getElementById('rshuffle').placeholder+=' ... right click (or two finger gesture) for ' + decodeURIComponent(inpttls[curvalis]);
\n document.getElementById('rshuffle').oncontextmenu=function(event) { if (event.target.value == '') { event.target.value=inpvals[curvalis] + ',' + inpttls[curvalis]; event.target.blur(); } };
\n }<\/font>
\n document.getElementById('rshuffle').style.backgroundColor='#f9f9f9';
\n } else {
\n var wascur=curvalis;
\n curvalis++;
\n if (curvalis >= eval('' + inpvals.length)) { curvalis=0; }
\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {
\n if (curvalis != wascur && document.getElementById('rshuffle').placeholder.indexOf(' ... double click for ') != -1) {
\n document.getElementById('rshuffle').placeholder=document.getElementById('rshuffle').placeholder.split(' ... double click for ')[0] + ' ... double click for ' + decodeURIComponent(inpttls[curvalis]);
\n }
\n } else {<\/font>
\n if (curvalis != wascur && document.getElementById('rshuffle').placeholder.indexOf(' ... right click (or two finger gesture) for ') != -1) {
\n document.getElementById('rshuffle').placeholder=document.getElementById('rshuffle').placeholder.split(' ... right click (or two finger gesture) for ')[0] + ' ... right click (or two finger gesture) for ' + decodeURIComponent(inpttls[curvalis]);
\n }
\n }<\/font>
\n }
\n }
\n<\/code><\/p>\n

Yesterday’s code had a curiosity, we were curious to know whether you were curious about … curiouser and curiouser<\/a><\/font> …<\/p>\n

\nvar inpvals=[‘zPv0S1-ETdI,qYf35nBq8Oo,Se3kxManWUY,i7hk-TupE5g,LnK0tnaNUag,dbH4Amzn-Rk,BL-Jg7CyqLQ,0v7Ea7kg2gA,NRjWEE0hmjQ’];
\nvar inpttls=[encodeURIComponent(‘Mr Smith Goes To Washington’)];\n<\/p><\/blockquote>\n

Why use arrays for what is ostensibly scalar data? Well, arrays are not much more bother to work with (ie. just {scalarName}[0] really), and they give scope to …<\/p>\n