WTS - Lang/City Matrix

by Paulo Ávila

HTML

<button id="generate-fields">Generate fields</button>
<table id="field-form"></table>

<script type="text/template" id="form-template">
        <td><input type="text" placeholder="Breadcrumb"></td>
        <td><input type="text" placeholder="Show footer links"></td>
        <td><input type="text" placeholder="Do not index"></td>
        <td><input type="text" placeholder="META title"></td>
        <td><input type="text" placeholder="META description"></td>
        <td><input type="text" placeholder="META keywords"></td>
</script>

CSS

body { font: 12px Arial; }
.lang,

.city { text-align: center; }
.city.checked { background-color: #d5f0ce; }
.city.exists { background-color: #d4e8f9; }

.lang-selectors { display: block; font-size: 10px; }
.city-selectors { font-size: 10px; }

JavaScript

var matrixTable = '<table id="lang-city-matrix" border="1" cellpadding="2">',
    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>';

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

    $.each(langs, function (j) {
        matrixTable += '<td class="city' + (i === 6 ? ' checked exists' : '') + '"><input type="checkbox" id="' + langs[j] + '-' + cities[i] + '"' + (i === 6 ? ' checked disabled' : '') + '></td>';
    });
    
    matrixTable += '</tr>';
});
    
matrixTable += '</tbody></table>';
    
$('body').prepend($(matrixTable));
//*/

$('#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-matrix input').on('change', function checkboxChange() {
    if (this.checked) {
        $(this).closest('td').addClass('checked');
    } else {
        $(this).closest('td').removeClass('checked');
    }
});


// replace on() with delegate() if current version of jquery doesn't use it
//$('.lang').delegate('a', 'click', function () {
$('.lang-all').on('click', function () {
    var toggle = false,
        indx =...