Colouring In Drag and Drop Sharing Tutorial
✂🏃🏾‍♀️🏃🏼‍♂️
📖

🔀 📅 ➕ 📧
Colouring In Drag and Drop Sharing Tutorial

Colouring In Drag and Drop Sharing Tutorial

We’re hoping yesterday’s Colouring In Drag and Drop Settings Tutorial new Colouring In web application is seen as a creative’s tool. As such, you’re going to want to share and collaborate … some of you, that is?!

You’re going to want to hashtag … oops … we’re going to want to hashtag. Yes, there is lots of data to share, but it worries us even involving hashtagging, how much there is, underlying, regarding that table element acting a bit like a television’s pixels. How do you effectively share even a snapshot of that?

But the difference between us and the television is, at least for a lot of people’s creations, the table is likely to be untouched, so can’t we “nickname” these repeated table cell scenarios? If you just said “indeed”, we’d concur! Take a look at some global Javascript variables we thought might help …



var defemail='';

var defsms='', snum=null, sparewes=null;

var prefixnickchar='.';

var prefixfor='<td class="tdone" id="';

var suffixnickchar='-';

var suffixfor='" style="text-align:center;" data-answer="1"></td>';

… and for those untouched cells you’re saving more than (because of encryption) the length difference between the “nickchars” above and their “fixfor” counterparts for each “boring” table cell encountered. And all this eases our mind somewhat, as a design, realized, on the way to the emailee or smsee this way …



function doemail(inidea) {

var bihbig='';

var azx=top.document.getElementById('xae' + 'mail');

//alert(33);

if (!azx) { azx=top.document.createElement("a"); }

//alert(3333);

//if (1 == 1) {

//document.getElementById('divas').appendChild(azx);

//} else {

top.document.body.appendChild(azx);

//}

//(334);

azx.style = "display: none";

//alert(2334);

azx.target = "_top";

//alert(6334);

azx.id = 'xae' + 'mail';

if (inidea.indexOf('@') == -1) {

inidea=('' + prompt('Please enter Email address to send to.', defemail));

if (inidea == null) { inidea=''; }

}

if (inidea.indexOf('@') == -1) { return ''; }



bihbig=document.body.innerHTML;

while (bihbig.indexOf(suffixfor) != -1) {

bihbig=bihbig.replace(suffixfor, suffixnickchar);

}

while (bihbig.indexOf(prefixfor + 'td') != -1) {

bihbig=bihbig.replace(prefixfor + 'td', prefixnickchar + 'td');

}



//if (1 == 6 && bihbig.indexOf('</he' + 'ad>') != -1 || bihbig.indexOf('<b' + 'o' + 'dy') != -1 || bihbig.indexOf('<h' + '1') == 0) {

//azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(document.getElementsByTagName('h1')[0].innerText.split('&')[0].split('<')[0].replace(/\`/g,'').replace(/^Events\ in\ /g, 'Events in Month ').substring(0)) + '&body=' + encodeURIComponent(document.URL.replace('php#', 'php?').replace('#', '&') + '#cibih=' + encodeURIComponent(encodeURIComponent(bihbig))); //encodeURIComponent(document.URL.split('#')[0] + '<h2' + document.body.innerHTML.split('<h2')[1]));

//} else {

if (sparewes) {

azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(sparewes.document.getElementsByTagName('h1')[0].innerText.split('&')[0].split('<')[0].replace(/\`/g,'').replace(/^Events\ in\ /g, 'Events in Month ').substring(0)) + '&body=' + encodeURIComponent(document.URL.replace('php#', 'php?').replace('#', '&') + '#cibih=' + encodeURIComponent(encodeURIComponent(bihbig))); //encodeURIComponent(document.URL.split('#')[0] + '<h2' + sparewes.document.body.innerHTML.split('<h2')[1]));

} else {

azx.href = 'mailto:' + inidea + '?subject=' + encodeURIComponent(document.getElementsByTagName('h1')[0].innerText.split('&')[0].split('<')[0].replace(/\`/g,'').replace(/^Events\ in\ /g, 'Events in Month ').substring(0)) + '&body=' + encodeURIComponent(document.URL.replace('php#', 'php?').replace('#', '&') + '#cibih=' + encodeURIComponent(encodeURIComponent(bihbig))); //encodeURIComponent(document.URL.split('#')[0] + '<h2' + document.body.innerHTML.split('<h2')[1]));

}

//}

azx.click();

return '';

}



function dosms() {

var bihbig='';

if (('' + window.localStorage.getItem('colouringincollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') {

defemail=window.localStorage.getItem('colouringincollaboratoremailee');

}

if (('' + window.localStorage.getItem('colouringincollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') {

defsms=window.localStorage.removeItem('colouringincollaboratorsmsno');

}

if (eval('' + ('sms:' + snum + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '#cibih=' + encodeURIComponent(parent.hfanalyze()))).length) >= 18000) {

snum=('' + prompt('Please enter SMS number to send to. We suspect message is too long for an SMS and if you enter an email address here instead, we will try to send an email instead. Append space(s) to remember, whatever you enter, for next time.', snum)).replace(/^null/g, (defemail.indexOf('@') != -1 ? defemail : (defsms != '' ? defsms : '')) );

} else {

snum=('' + prompt('Please enter SMS number to send to. Append space(s) to remember for next time.', snum)).replace(/^null/g, (defsms != '' ? defsms : (defemail.indexOf('@') != -1 ? defemail : '')));

}

if (snum == null) { snum=''; }



if (snum.indexOf('@') != -1) {

if (snum.trim() != snum) {

snum=snum.trim();

if (('' + window.localStorage.getItem('colouringincollaboratoremailee')).replace(/^null/g,'').replace(/^undefined/g,'') != '') {

window.localStorage.removeItem('colouringincollaboratoremailee');

}

window.localStorage.setItem('colouringincollaboratoremailee', snum);

defemail=snum;

}

return doemail(snum);

} else if (snum.trim() != '' && snum.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'').trim() == '') {

//alert('Snum=' + snum + '?');

if (snum.trim() != snum) {

snum=snum.trim();

if (('' + window.localStorage.getItem('colouringincollaboratorsmsno')).replace(/^null/g,'').replace(/^undefined/g,'') != '') {

window.localStorage.removeItem('colouringincollaboratorsmsno');

}

window.localStorage.setItem('colouringincollaboratorsmsno', snum);

defsms=snum;

}



bihbig=document.body.innerHTML;

while (bihbig.indexOf(suffixfor) != -1) {

bihbig=bihbig.replace(suffixfor, suffixnickchar);

}

while (bihbig.indexOf(prefixfor + 'td') != -1) {

bihbig=bihbig.replace(prefixfor + 'td', prefixnickchar + 'td');

}



var azx=top.document.getElementById('xas' + 'ms');

if (azx == null) { azx=top.document.createElement("a"); }

//if (1 == 1) {

// document.getElementById('divas').appendChild(azx);

//} else {

top.document.body.appendChild(azx);

// }

azx.id = 'xas' + 'ms';

azx.target = "_top";

azx.style = "display: none";

azx.href = 'sms:' + snum + '&body=' + encodeURIComponent(document.URL.replace('php#', 'php?').replace('#', '&') + '#cibih=' + encodeURIComponent(encodeURIComponent(bihbig)));

azx.click();

}

return '';

}

… and when arriving back from an emailee’s or smsee’s link click …



function cibihcheck() {

var partslh=('' + location.hash).split('#ci' + 'bih=');

if (eval('' + partslh.length) > 1) {

var bihbig=decodeURIComponent(decodeURIComponent(partslh[1]));



bihbig=bihbig.replace(/\.td/g, prefixfor + 'td');

bihbig=bihbig.replace(/0\-/g, '0' + suffixfor);

bihbig=bihbig.replace(/1\-/g, '1' + suffixfor);

bihbig=bihbig.replace(/2\-/g, '2' + suffixfor);

bihbig=bihbig.replace(/3\-/g, '3' + suffixfor);

bihbig=bihbig.replace(/4\-/g, '4' + suffixfor);

bihbig=bihbig.replace(/5\-/g, '5' + suffixfor);

bihbig=bihbig.replace(/6\-/g, '6' + suffixfor);

bihbig=bihbig.replace(/7\-/g, '7' + suffixfor);

bihbig=bihbig.replace(/8\-/g, '8' + suffixfor);

bihbig=bihbig.replace(/9\-/g, '9' + suffixfor);



document.body.innerHTML=bihbig;

}

}

Codewise …

… helped with this sense of collaboration.


Previous relevant Colouring In Drag and Drop Settings Tutorial is shown below.

Colouring In Drag and Drop Settings Tutorial

Colouring In Drag and Drop Settings Tutorial

Onto the start for our Colouring In web application via yesterday’s Colouring In Canvas Clone of Numbers Guessing Game Tutorial we’re starting to enhance, on top of that “clone level” functionality, via two new settings with two approaches to the management of data, regarding, those being …

  • number of table cells across (that programmatically is made to be the same number of cells, as down) … we deal with via a get ? (or &) address line URL arrangement … whereas …
  • pen “width” can be 1 or 2 (where 2 colours in the 1+8=9 surrounding cells of a dragged over cell) … we deal with via a hashtag arrangement

Why the difference in approach? Let’s start with hashtag methodologies. This arrangement can leave everything about a webpage, in place, regarding the user actions on a webpage, while the Javascript can detect that change in …



location.hash

… dynamically. In other words some dragging canvas drawings with pen “width” 2 can be combined with some using pen “width” 1 in the same user creation.

But when the data management involves get ? (or &) address line URL arrangements, this involves navigation to a new incarnation of the webpage creation logic, effectively wiping the webpage slate clean. This is apt for the “number of table cells across” data item, because the HTML content of the table element is not just affected, but is totally structured, according to this user setting.

Lately, more and more, we’ve been hashtagging data to dynamically created “a” link “mailto:” email or “sms:” SMS communication body webpage URL links. An email link or SMS link, from the recipient’s point of view is a “brand new start” that can address either or both of these data conduit arrangements, we’re getting happier and happier to discover …



// ondragover event function code snippet below ...

ev.target.style.backgroundColor='' + document.getElementById('ddcolour').value;

if (decodeURIComponent(('' + location.hash)).indexOf('fontweight=') != -1) {

ifontweight=eval('' + ('' + decodeURIComponent(('' + location.hash))).split('fontweight=')[1].substring(0,1));

} else if (document.getElementById('numfontweight')) {

ifontweight=eval('' + document.getElementById('numfontweight').value);

}

if (ifontweight == 2) { // colour in 8 surrounding cells, as applicable

var minusthree=-3;

if (document.getElementById('numacross')) {

minusthree=eval(-1 * eval('' + document.getElementById('numacross').value.length));

}

var tdx=eval(('' + ev.target.id).substring(2).split('_')[0].replace(/^0/g,'').replace(/^0/g,''));

var tdy=eval(('' + ev.target.id).split('_')[1].replace(/^0/g,'').replace(/^0/g,''));

if (document.getElementById('td' + ('000' + eval(-1 + tdx)).slice(minusthree) + '_' + ('000' + eval(-1 + tdy)).slice(minusthree))) {

document.getElementById('td' + ('000' + eval(-1 + tdx)).slice(minusthree) + '_' + ('000' + eval(-1 + tdy)).slice(minusthree)).style.backgroundColor='' + document.getElementById('ddcolour').value;

}

if (document.getElementById('td' + ('000' + eval(-1 + tdx)).slice(minusthree) + '_' + ('000' + eval(0 + tdy)).slice(minusthree))) {

document.getElementById('td' + ('000' + eval(-1 + tdx)).slice(minusthree) + '_' + ('000' + eval(0 + tdy)).slice(minusthree)).style.backgroundColor='' + document.getElementById('ddcolour').value;

}

if (document.getElementById('td' + ('000' + eval(-1 + tdx)).slice(minusthree) + '_' + ('000' + eval(1 + tdy)).slice(minusthree))) {

document.getElementById('td' + ('000' + eval(-1 + tdx)).slice(minusthree) + '_' + ('000' + eval(1 + tdy)).slice(minusthree)).style.backgroundColor='' + document.getElementById('ddcolour').value;

}



if (document.getElementById('td' + ('000' + eval(0 + tdx)).slice(minusthree) + '_' + ('000' + eval(-1 + tdy)).slice(minusthree))) {

document.getElementById('td' + ('000' + eval(0 + tdx)).slice(minusthree) + '_' + ('000' + eval(-1 + tdy)).slice(minusthree)).style.backgroundColor='' + document.getElementById('ddcolour').value;

}

if (document.getElementById('td' + ('000' + eval(0 + tdx)).slice(minusthree) + '_' + ('000' + eval(1 + tdy)).slice(minusthree))) {

document.getElementById('td' + ('000' + eval(0 + tdx)).slice(minusthree) + '_' + ('000' + eval(1 + tdy)).slice(minusthree)).style.backgroundColor='' + document.getElementById('ddcolour').value;

}



if (document.getElementById('td' + ('000' + eval(1 + tdx)).slice(minusthree) + '_' + ('000' + eval(-1 + tdy)).slice(minusthree))) {

document.getElementById('td' + ('000' + eval(1 + tdx)).slice(minusthree) + '_' + ('000' + eval(-1 + tdy)).slice(minusthree)).style.backgroundColor='' + document.getElementById('ddcolour').value;

}

if (document.getElementById('td' + ('000' + eval(1 + tdx)).slice(minusthree) + '_' + ('000' + eval(0 + tdy)).slice(minusthree))) {

document.getElementById('td' + ('000' + eval(1 + tdx)).slice(minusthree) + '_' + ('000' + eval(0 + tdy)).slice(minusthree)).style.backgroundColor='' + document.getElementById('ddcolour').value;

}

if (document.getElementById('td' + ('000' + eval(1 + tdx)).slice(minusthree) + '_' + ('000' + eval(1 + tdy)).slice(minusthree))) {

document.getElementById('td' + ('000' + eval(1 + tdx)).slice(minusthree) + '_' + ('000' + eval(1 + tdy)).slice(minusthree)).style.backgroundColor='' + document.getElementById('ddcolour').value;

}

}

Codewise …

Did you know?

Our recent Earth Scanner project was conducted during our “Hashtagging Enlightenment Period”, whereby, around here, the …

What the Hep?

… greeting, is code for “Have yourself a happy and fruitful hashtagging day” … but we digress. In amongst it’s code there was an example codeline …



var nontz=('' + location.search + ('' + location.hash).replace(/^\#/g,'')).split('nontz=')[1] ? decodeURIComponent(('' + location.search + ('' + location.hash).replace(/^\#/g,'')).split('nontz=')[1].split('&')[0].split('#')[0]) : '';

… exemplifying, how more and more, we’re happy with setting (or other types of incoming) data coming from get (? and & ( eg. ?nontz=Alice_Springs%7C133.8807%7C_23.6980%7C )) arguments via location.search and/or hashtagged data coming from location.hash ( eg. #nontz=Alice_Springs%7C133.8807%7C_23.6980%7C ) above, either or both, perhaps, used in an email or SMS body URL link.

Previous relevant Colouring In Canvas Clone of Numbers Guessing Game Tutorial is shown below.

Colouring In Canvas Clone of Numbers Guessing Game Tutorial

Colouring In Canvas Clone of Numbers Guessing Game Tutorial

As the blog posting title suggests, cloned from yesterday’s Numbers Guessing Game Dragover Tutorial …

  • Numbers Guessing Game dragover “value add” proof of concept work … comes …
  • Colouring In Canvas drag and (faux) drop web application

… where a “canvas” palette (which is really an HTML table element made up of lots of table cells, rather than an HTML5 canvas element). Why this design? Well, each table cell element can be identified as an individual “dragged over” element. “Dragged over” by what? Well, we turn some “draggable” wording in the basis HTML into …

This entry was posted in eLearning, Event-Driven Programming, Games, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *