COLOR PICKER

COLOR PICKER

pyenthupyenthu Posts: 6Questions: 2Answers: 0

Is there an easy jquery color picker I can use? Example and code injection point would be appreciated.

Answers

  • pyenthupyenthu Posts: 6Questions: 2Answers: 0

    Want to understand how to use it.

  • allanallan Posts: 50,047Questions: 1Answers: 7,403 Site admin

    Hi,

    There isn't a plug-in for Editor that is currently available to use with a date picker, however, it is fairly easy to create plug-ins as described in the manual.

    Let me know how you get on with it.

    Allan

  • Greg BrainerdGreg Brainerd Posts: 9Questions: 1Answers: 0
    edited October 2016

    Hey Allan,
    I just got spectrum to work as a plug in, http://bgrins.github.io/spectrum/.

    Make sure you include the spectrum.css and js.

        <link href="~/assets/plugins/colorpicker/spectrum.css" rel="stylesheet" />
        <script src="~/assets/plugins/colorpicker/spectrum.js"></script>
    

    Then in the editor area script.

        <script type="text/javascript" language="javascript" class="init">
    
        //plugin
        // colorpicker field type plug-in code
        (function ($, DataTable) {
     
        if ( ! DataTable.ext.editorFields ) {
            DataTable.ext.editorFields = {};
        }
     
        var Editor = DataTable.Editor;
        var _fieldTypes = DataTable.ext.editorFields;
     
        _fieldTypes.colorpicker = {
            create: function ( conf ) {
                var that = this;
     
                conf._enabled = true;
     
                // Create the elements to use for the input
                conf._input = $(
                    '<div id="' + Editor.safeId(conf.id) + '">' +
                        '<input type="text" class="basic" id="spectrum"/>' +
                        '<em id="basic-log"></em>' +
                        '</div>');
     
                // Use the fact that we are called in the Editor instance's scope to call
                // input.ClassName
                $("input.basic", conf._input).spectrum({
                    //color: "#f00",
                    change: function (color) {
                        $("#basic-log").text(color.toHexString());
                    }
                });
                return conf._input;
            },
     
            get: function (conf) {
                var val = $("input.basic", conf._input).spectrum("get").toHexString();
                return val;
            },
     
            set: function (conf, val) {
                $("input.basic", conf._input).spectrum({
                    color: val,
                    change: function (color) {
                        $("#basic-log").text("change called: " + color.toHexString());
                    }
                });           
            },
     
            enable: function ( conf ) {
                conf._enabled = true;
                $(conf._input).removeClass( 'disabled' );
            },
     
            disable: function ( conf ) {
                conf._enabled = false;
                $(conf._input).addClass( 'disabled' );
            }
        };
        })(jQuery, jQuery.fn.dataTable);
    

    Then within the editor configuration

               fields: [
                            {
                                type: "colorpicker",
                                label: "Color",
                                name: "color",
                            }]
    

    Lastly I used this to display a square color in the regular table itself. You'll need this CSS

            .colorSquare {
              width: 20px;
              height: 20px;
              margin:auto;
              border: 1px solid rgba(0, 0, 0, .2);
            }
        table.dataTable tbody th.dt-body-center,
        table.dataTable tbody td.dt-body-center {
          text-align: center;
        }
    

    In the table columns,

                    columns: [
                        {
                            data: "color",
                            render: function (data, type, row) {
                                if (type === 'display') {
                                    return '<div class="colorSquare" style="background:' + data + ';"></div>';
                                }
                                return data;
                            },
                            className: "dt-body-center"
                        },]
    

    Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

  • allanallan Posts: 50,047Questions: 1Answers: 7,403 Site admin

    Awesome! Thanks for sharing this with us.

    Allan

  • crush123crush123 Posts: 407Questions: 124Answers: 18

    Cheers Greg.

    Really Useful

  • KarlogKarlog Posts: 7Questions: 3Answers: 0

    Greg Brainerd

    Thanks, you just spared me a lot of work!

  • edanyildizedanyildiz Posts: 43Questions: 13Answers: 4

    Thats grwat.
    Could you please adapt this code for full use of the spectrum, i mean advanced ui
    Thank you so much.

  • maliwikmaliwik Posts: 55Questions: 5Answers: 1
    edited September 2017

    You can also allow conditional formatting of the cell for mixed content (i.e. colors or non-color content in the same cell) by using a regex pattern to detect if a color hex is in the cell or not. I modified Greg Brainerd's code snippet above to do this:

    columns: [{
     /* data option isn't necessary unless your dataset is named "color"
        if not, you can remove it */
      data: "color",
      render: function (data, type, row) {
        if (type === 'display' &&
            data != null &&
            data.match(/#([a-f0-9]{3}){1,2}\b/i)) {
          return '<div class="colorSquare" style="background:' + data + ';"></div>';
        }
        return data;
      },
      /* className isn't necessary either unless you want
         parent-level formatting for the cell's contents */
      className: "dt-body-center"
    }]
    

    The regex /#([a-f0-9]{3}){1,2}\b/i will detect both the shorthand and longform hexadecimal format (one group of 3 alphanumeric characters or two groups of 3 alphanumeric characters such as #f00 or #ff0000 for red). Any time the cell has a color hex content, it'll format accordingly, otherwise it'll leave it alone.

    -- Mike

  • piq_pm_pjkpiq_pm_pjk Posts: 21Questions: 7Answers: 1

    I just realized that this isn't working on mobile devices, clicking the pulldown in the editor modal does not respond. Spectrum is mobile compatible if you check its website. Does anyone have any insight as to why the DT plugin does not carry the mobile functionality?

  • colincolin Posts: 5,590Questions: 0Answers: 976

    Hi @piq_pm_pjk ,

    I'd be surprised if this was because of Editor or DT, I suspect it's more likely to do with Spectrum. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

Sign In or Register to comment.