JSFiddle - React, Tailwind, and code Playground

by nyothecat

HTML

<link rel="stylesheet" href="http://static.ak.fbcdn.net/rsrc.php/yc/r/JJt3yB2LDLj.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<script src="http://james.padolsey.com/demos/prettyprint/prettyprint.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<div style="width: 100%;" id='divMain'>
    <span style="float: left; height: 100%; margin-left: 5px; width: 420px;" id='spanLeft'>
        <a href='javascript:void(0);' id='aLucky'>I feel lucky!</a><a href='javascript:void(0);' class='ClearAll'>Clear all</a> &nbsp;<a href="javascript: void(0);" id='aClearPhoto'>Clear photo</a>
        <br />
        <a href="javascript: void(0);" id='aClearTxtRefPhoto' class='clearOne' accesskey='n'>Clear</a> <label for="txtRefPhoto">Lien destination photo</label><br /><input id="txtRefPhoto" tabindex="1" type="text" class="txtPhoto" />
        <br />
        <a href="javascript: void(0);" id='aClearTxtUrlPhoto' class='clearOne'>Clear</a> <label for="txtUrlPhoto">Lien url photo</label><br /><input id="txtUrlPhoto" tabindex="2" type="text" class="txtPhoto" />
        <br />
        <a href="javascript: void(0);" id='aClearTxtTitrePhoto' class='clearOne'>Clear</a> <label for="txtTitrePhoto">Titre photo</label><br /><input id="txtTitrePhoto" tabindex="3" type="text" class="txtPhoto" />
        <br />
        <a href="javascript: void(0);" id='aClearTxtDescPhoto' class='clearOne'>Clear</a> <label for="txtDescPhoto">Description photo</label><br /><input id="txtDescPhoto" tabindex="3" type="text" class="txtPhoto" />
        <br />
        <a href="javascript: void(0);" id='aClearTxtUrlPpl' class='clearOne'>Clear</a> <label for="txtUrlPpl">Lien photographe</label><br /><input id="txtUrlPpl" tabindex="4" type="text" class="txtPpl" />
        <br />
        <a href="javascript: void(0);" id='aClearTxtNomPpl' class='clearOne'>Clear</a> <label for="txtNomPpl">Nom...

CSS

#aGoImage, #aGoArticle, #aLucky {
    background-color: green;
    color: black;
    padding-left: 3px;
}

.ClearAll {
    background-color: red;
    color: black;
    padding-left: 3px;
}

input[type=text] {
    background-color: #eee;   
    border: 0;
    width: 100%;
}

#taBatchLinks {
    width: 99%;
    height: 95%;
}

#taImageFr, #taCollectionFr, #taPopupFr {
    opacity:0.93;
    no-repeat;
    height: 100px;
    width: 47%;
}
#taImageEn, #taCollectionEn, #taPopupEn {
    opacity:0.93;
    height: 100px;
    width: 47%;
}

#spanPhotoCount {
    color: red;
    font-weight: bolder;
}

JavaScript

/* lezard: add image */
/*
 * Constants & variables *****************************************************
 */
var htmlTemplate = {
    taImage: "<div style=\'background: none repeat scroll 0% 0% white; border: 1px solid black; text-align: center;\'><a href=\'{{txtRefPhoto}}\' target=\'_blank\' title=\'{{txtDescPhoto}}\'><img src=\'{{txtUrlPhoto}}\' style=\'padding-top: 8px; {{chk500}}\' alt=\'{{txtDescPhoto}}\' /></a><br /><span style=\'color:#444444\'>{{txtTitrePhoto}} </span><a href=\'{{txtUrlPpl}}\' target=\'_blank\'>©{{txtNomPpl}}</a></div>",
    tableCollectionRow: "<tr id=\'trCollection{{uniqueId}}\'><td><img src=\'{{txtUrlPhoto}}\' class=\'RemoveFromCollection\' style=\'padding-top: 2px; width: 120px;\' id=\'img{{uniqueId}}\' /></td></tr>",
    collectionRowDialog: "<div title=\'Suppression\'><textarea id='taPopupFr'></textarea><textarea id='taPopupEn'></textarea></div>",
    documentDialog: "<div title=\'Batch\'>Liens pour la collection<br /><textarea id=\'taBatchLinks\'></textarea></div>",
    flagFr: '<img src=\'http://www.azmibazar.ch/tools/flags/flag_fr.jpg\' style=\'position: absolute; z-index:-1; top:{{top}}px; left:{{left}}px; width:{{width}}px; height:108px;\' />',
    flagEn: '<img src=\'http://sainteagnesse.pagesperso-orange.fr/images/flag_uk.gif\' style=\'position: absolute; z-index:-1; top:{{top}}px; left:{{left}}px; width:{{width}}px; height:108px;\' />',
    collectionCount: 'Nombre de photos: <span id=\'spanPhotoCount\'>{{photoCount}}</span>'
};

var currentAPI = null;
var pplManuallyEdited = false;
var uniqueRowId = 0;
var movingId = null;
var contextMenuTarget = null;
var contextMenuOpen = false;
var txtRefPhotoKeyDownActive = false;

/*
 * Objects *************************************************************************
 */
var flickrAPI = {
    key: 'a13626f8f832124b8ca75a60270daff7',
    secret: '7eebc63b225b2d6e',
    requestUrlTemplate:...