Jexcel Spreadsheets - Integrating a third party jquery plugin in jExcel.

Jexcel Spreadsheets - Integrating a third party jquery plugin in jExcel to create a custom column.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://bossanova.uk/components/bossanova-ui/js/jquery.jexcel.js"></script>
<link rel="stylesheet" href="https://bossanova.uk/components/bossanova-ui/css/jquery.jexcel.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
<div id="my"></div>

CSS

body
{
  font:14px Helvetica;
}

JavaScript

var spectrumEditor = {
    // Methods
    closeEditor : function(cell, save) {
        // Get value
        var value = $(cell).find('.editor').spectrum('get').toHexString();

        // Set visual value
        $(cell).html(value);
        $(cell).css('color', value);

        // Close edition
        $(cell).removeClass('edition');

        // Save history
        return value;
    },
    openEditor : function(cell) {
        // Get current content
        var html = $(cell).html();

        // Create the editor
        var editor = document.createElement('div');
        $(cell).html(editor);
        $(editor).prop('class', 'editor');

        // Create the instance of the plugin
        $(editor).spectrum({ color:html, preferredFormat:'hex', hide: function(color) {
            // Close editor through jexcel
            $('#' + $.fn.jexcel.current).jexcel('closeEditor', $(cell), true);
        }});

        // Run
        $(editor).spectrum('show');
    },
    getValue : function(cell) {
        return $(cell).html();
    },
    setValue : function(cell, value) {
        $(cell).html(value);
        $(cell).css('color', value);

        return true;
    }
}

data = [
    ['Google', '#542727'],
    ['Yahoo', '#724f4f'],
    ['Bing', '#b43131'],
];

$('#my').jexcel({
    data:data,
    colHeaders: [ 'Name', 'Custom color' ],
    colWidths: [ 300, 200 ],
    columns: [
        { type: 'text' },
        { type: 'text', editor:spectrumEditor },
    ]
});