JSFiddle - React, Tailwind, and code Playground

by adrianlynch

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<form>
    <input id="imagecrop" data-spring-plugin="alignment-picker" type="text" value="tl" />
</form>

CSS

.alignment-picker {
    border-collapse: collapse;
}
.alignment-picker td {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
    font-size: 10px;
}
.alignment-picker {
    color: #ccc;
}
.alignment-picker.selected-tl .tl, .alignment-picker.selected-tl .t, .alignment-picker.selected-tl .l, .alignment-picker.selected-tl .c {
    color: #333;
    background-color: #ddd;
}
.alignment-picker.selected-t .tl, .alignment-picker.selected-t .t, .alignment-picker.selected-t .tr, .alignment-picker.selected-t .l, .alignment-picker.selected-t .c, .alignment-picker.selected-t .r {
    color: #333;
    background-color: #ddd;
}
.alignment-picker.selected-tr .t, .alignment-picker.selected-tr .tr, .alignment-picker.selected-tr .c, .alignment-picker.selected-tr .r {
    color: #333;
    background-color: #ddd;
}
.alignment-picker.selected-l .tl, .alignment-picker.selected-l .t, .alignment-picker.selected-l .l, .alignment-picker.selected-l .c, .alignment-picker.selected-l .bl, .alignment-picker.selected-l .b {
    color: #333;
    background-color: #ddd;
}
.alignment-picker.selected-c td {
    color: #333;
    background-color: #ddd;
}
.alignment-picker.selected-r .t, .alignment-picker.selected-r .tr, .alignment-picker.selected-r .c, .alignment-picker.selected-r .r, .alignment-picker.selected-r .b, .alignment-picker.selected-r .br {
    color: #333;
    background-color: #ddd;
}
.alignment-picker.selected-bl .l, .alignment-picker.selected-bl .c, .alignment-picker.selected-bl .bl, .alignment-picker.selected-bl .b {
    color: #333;
    background-color: #ddd;
}
.alignment-picker.selected-b .l, .alignment-picker.selected-b .c, .alignment-picker.selected-b .r, .alignment-picker.selected-b .bl, .alignment-picker.selected-b .b, .alignment-picker.selected-b .br {
    color: #333;
    background-color: #ddd;
}
.alignment-picker.selected-br .c, .alignment-picker.selected-br .r, .alignment-picker.selected-br .b,...

JavaScript

jQuery(document).ready(function ($) {

    $('*[data-spring-plugin="alignment-picker"]').each(function (event) {
        var target = $(this).attr('id');
        var pickerid = 'picker-'+target;
        var value = $(this).val();

        var pickerhtml = '<table id="'+pickerid+'" class="alignment-picker" data-alignment-picker-target="'+target+'"><tr><td class="tl" data-alignment-picker-value="tl"><i class="fa fa-circle"></i></td><td class="t" data-alignment-picker-value="t"><i class="fa fa-circle"></i></td><td class="tr" data-alignment-picker-value="tr"><i class="fa fa-circle"></i></td></tr><tr><td class="l" data-alignment-picker-value="l"><i class="fa fa-circle"></i></td><td class="c" data-alignment-picker-value="c"><i class="fa fa-circle"></i></td><td class="r" data-alignment-picker-value="r"><i class="fa fa-circle"></i></td></tr><tr><td class="bl" data-alignment-picker-value="bl"><i class="fa fa-circle"></i></td><td class="b" data-alignment-picker-value="b"><i class="fa fa-circle"></i></td><td class="br" data-alignment-picker-value="br"><i class="fa fa-circle"></i></td></tr></table>';

        $(this).after(pickerhtml);
        
        if (value !== '' && value != '1') {
            selected = value;
        }
        
        $('#'+pickerid).find('td.'+selected).addClass("selected");
        $('#'+pickerid).removeClass().addClass('alignment-picker selected-'+selected);

    });
    
    $('*[data-spring-plugin="alignment-picker-target"] td').on('click', function (event) {
        alert('this');
        var parent = $(this).closest('table');
        var target = parent.data("alignment-picker-target");
        var newvalue = $(this).data("alignment-picker-value");
        var selectedclass = $(this).attr("class");
        parent.find('.selected').removeClass("selected");
        parent.removeClass().addClass('alignment-picker selected-' + selectedclass);
        $(this).addClass("selected");
        $('#' + target).val(newvalue);
    });
});