WTS - Lang/City Selector

by Paulo Ávila

HTML

<div id="edit-strings"></div>

<a href="#" id="toggle-city-specific">show/hide city-specific</a>

<div class="legend">
    <span class="value complete"></span> Published
    <span class="value"></span> Not published
    <span class="complete"></span> Published without content
</div>

CSS

body { font: 12px Arial; }

#lang-city-legend { border-spacing: 0; border-collapse: collapse; }
#lang-city-legend td { padding: 0; vertical-align: middle; border: 1px solid #ccc; width: 15px; }

#lang-city-matrix { border-spacing: 0; border-collapse: collapse; }
#lang-city-matrix td { padding: 0; vertical-align: middle; border: 1px solid #ccc; width: 15px; }

#lang-city-matrix td.lang { padding: 0 3px; font-weight: bold; text-align: center; white-space: nowrap; }
#lang-city-matrix td.city { padding: 0 4px; font-weight: bold; text-align: left; white-space: nowrap; }
#lang-city-matrix td.lang.highlight,
#lang-city-matrix td.city.highlight { background-color: #ccc; }

.value { background-color: #fce2a1; } /*blue d4e8f9*/
.complete { background-color: #f2cccc; } /*red*/
.value.complete { background-color: #d5f0ce; } /*green*/
.checked { outline: 2px solid #9a49df; } /*purple*/

input[name=edit] { width: 13px; }

#edit-strings { position: absolute; top: 5px; right: 100px; }
.legend span { display: inline-block; margin: 15px 0 0 10px; width: 10px; height: 10px; border: 1px solid #ccc; }

JavaScript

var matrixTable = '<table id="lang-city-matrix">',
    langs = ["EN", "ES", "DE", "IT", "NL", "FR", "RU", "KO"],
    cities = ["None", "Barcelona", "Berlin", "Brussels", "Budapest", "Dublin", "Edinburgh", "Florence", "Istanbul", "Lisbon", "London", "Madrid", "Paris", "Prague", "Rome", "Seville", "Valencia", "Vienna"];

//matrixTable += '<thead><tr><th> </th>';
matrixTable += '<tbody><tr><td> </td>';

$.each(langs, function (i) {
    matrixTable += '<td class="lang">' + langs[i] + '</td>';
    //<span class="lang-select-all"><a href="#" class="lang-all">all</a></span>
});

//matrixTable += '</tr></thead>';
//matrixTable += '<tbody>';
matrixTable += '</tr>';

$.each(cities, function (i) {
    matrixTable += '<tr class="city-row">';
    matrixTable += '<td class="city">' + cities[i] + '</td>';
    // <span class="city-select-all">(<a href="#" class="city-all">all</a</span>)

    $.each(langs, function (j) {
        matrixTable += '<td class="lang-city"><input type="radio" name="edit" id="' + langs[j] + '-' + cities[i] + '"></td>';
    });

    matrixTable += '</tr>';
});
    
matrixTable += '</tbody></table>';
    
$('body').prepend($(matrixTable));


////////// Event bindings
/*
$('#generate-fields').on('click', function () {
    var fieldTemplate = $('#form-template').html(),
        fields = '';

    $('#lang-city-matrix input:checked:not(:disabled)').each(function () {
        fields += '<tr><td>' + $(this).attr('id') + '</td>';
        fields += fieldTemplate;
        fields += '</tr>'
    });

    $('#field-form').html(fields);
});
//*/

$('.lang-city').on('hover', function highlightCombination() {
    var langIndx = $(this).index(),
        cityIndx = $(this).parent().index();

    $('.lang').removeClass('highlight');
    $('.city').removeClass('highlight');

    $('.lang:eq(' + --langIndx + ')').addClass('highlight');
    $('.city:eq(' + --cityIndx + ')').addClass('highlight');
});

$('#lang-city-matrix input').on('change', function checkboxChange() {
   ...