JSFiddle - React, Tailwind, and code Playground

by damyanpetev

HTML

<!--<script src="http://dev.igniteui.local/17-1/js/modernizr.min.js"></script>-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://dev.igniteui.local/17-1/IgniteUI/js/infragistics.core.js"></script>
<script src="http://dev.igniteui.local/17-1/IgniteUI/js/infragistics.lob.js"></script>
<script src="http://dev.igniteui.local/17-1/js/apiviewer.js"></script>
<link href="http://dev.igniteui.local/17-1/IgniteUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://dev.igniteui.local/17-1/IgniteUI/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="http://dev.igniteui.local/17-1/css/apiviewer.css" rel="stylesheet" type="text/css"></link>

<div id="figuresArea">
        <div class="element-container">
            <table>
                <tr>
                    <td>
                        <div class="manipulator-container">
                            <div id="split-button-circle"></div><span> - Change shape</span><br /><br />
                            <div id="color-picker-circle"></div><span> - Change color</span><br /><br />
                            <div id="text-align-button-circle"></div><span> - Change text alignment</span><br /><br />
                            <div id="text-style-button-circle"></div><span> - Change text style</span><br /><br />
                            <div id="font-color-picker-circle"></div><span> - Change font color</span><br /><br />
                            <div id="back-color-picker-circle"></div><span> - Change background color</span><br /><br />
                        </div>
                    </td>
                    <td>
                        <canvas id="circle"></canvas>
                    </td>
                </tr>
            </table>
        </div>
    </div>

CSS

#figuresArea {
            margin: 0px 0px 40px 0px;
        }

        #circle, #triangle, #rectangle, #square {
            padding: 0px 0px 0px 60px;
        }

        .manipulator-container {
            /*border-bottom: 1px solid black;*/
            padding: 0px 0px 5px 0px;
            width: 400px;
        }

        .ui-button {
            width: 18px;
            height: 18px;
            padding: 3px;
        }

        .ui-igbutton .ui-igbutton-forecolor, .button-split {
            background-image: url('http://dev.igniteui.local/17-1/igniteui/css/themes/infragistics/images/ui-icons_888888_256x240.png')!important;
            background-size: 384px 370px;
        }

        #color-picker-circle .ui-igbutton .ui-igbutton-forecolor, .button-circle.ui-icon {
            background-position: -123px -230px;
            background-image: url('http://dev.igniteui.local/17-1/igniteui/css/themes/infragistics/images/ui-icons_888888_256x240.png')!important;
        }

        #font-color-picker-circle .ui-igbutton .ui-igbutton-forecolor {
            background-position: 0 -448px;
            background-image: url('http://dev.igniteui.local/17-1/igniteui/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-size: auto;
        }

        #back-color-picker-circle .ui-igbutton .ui-igbutton-backcolor {
            background-position: 0 -464px;
            background-image: url('http://dev.igniteui.local/17-1/igniteui/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-size: auto;
        }

        #text-align-button-circle .ui-btn-justifyleft {
            background-image: url('http://dev.igniteui.local/17-1/igniteui/css/themes/metro/images/igHtmlEditor/html-editor-sprite.png')!important;
            background-position: 0 -384px;
        }

        #text-align-button-circle .ui-btn-justifycenter {
            background-image:...

JavaScript

$(function () {
  var frozen = false;
  var $splitBtn = $("#split-button-circle").igSplitButton({
    items: [{
      name: "pane",
      label: "pane",
      iconClass: "ui-icon-bookmark"
    }, {
      name: "firstRow",
      label: "firstRow",
      iconClass: "ui-icon-bookmark"
    },
            {
              name: "firstColumn",
              label: "firstColumn",
              iconClass: "ui-icon-bookmark"
            }],
    defaultItemName: "pane",
    swapDefaultEnabled: false,
    click: function (evt, ui) {
      if (ui.item === "pane") {
        frozen = !frozen;
        debugger;
        ui.item.igToolbarButton("option", "isSelected", frozen);
      }
      //$splitBtn.igSplitButton("expand");
    }
  });
});