iterations-live-website/kiwi-irc/client/assets/plugins/textstyle.html

<style>
    #kiwi .style-grid {
        position: absolute;
        display: block;
        z-index: 1000;

        background: #121314;
        padding: 2px;
        width: 120px;

        border-radius: 3px;
    }

    #kiwi .style-colours { overflow: hidden; }
    #kiwi .style-colour {
        width: 25%;
        height: 27px;
        display: block;
        float: left;
        cursor: pointer;
    }
    #kiwi .style-color-selected {
        -webkit-box-shadow: inset 0px 0px 5px 0px rgba(255, 255, 255, 0.75);
        -moz-box-shadow:    inset 0px 0px 5px 0px rgba(255, 255, 255, 0.75);
        box-shadow:         inset 0px 0px 5px 0px rgba(255, 255, 255, 0.75);
        z-index: 10;
        position: relative;
    }

    #kiwi .style-formats {
        margin: 10px 0;
        overflow: hidden;
    }

    #kiwi .style-format {
        width: 33%;
        cursor: pointer;
        display: block;
        float: left;
        text-align: center;
    }
    #kiwi .style-format-bold { font-weight: bold; }
    #kiwi .style-format-italic { font-style: italic; }
    #kiwi .style-format-underline { text-decoration: underline; }
    #kiwi .style-reset {
        color: #D6D6D6;
        font-size: 20px;
        text-align: right;
        display: block;
        cursor: pointer;
        margin: 5px 6px 10px;
    }
</style>

<script type="text/html" id="tmpl_styles">
<div class="style-grid">
    <i class="fa fa-undo style-reset"></i>

    <div class="style-colours">
        <a class="style-colour" style="background:#FFFFFF;border-radius: 3px 0 0 0;" data-colour="0"></a>
        <a class="style-colour" style="background:#000000;" data-colour="1"></a>
        <a class="style-colour" style="background:#000080;" data-colour="2"></a>
        <a class="style-colour" style="background:#008000;border-radius: 0 3px 0 0;" data-colour="3"></a>
        <a class="style-colour" style="background:#FF0000;" data-colour="4"></a>
        <a class="style-colour" style="background:#800040;" data-colour="5"></a>
        <a class="style-colour" style="background:#800080;" data-colour="6"></a>
        <a class="style-colour" style="background:#FF8040;" data-colour="7"></a>
        <a class="style-colour" style="background:#FFFF00;" data-colour="8"></a>
        <a class="style-colour" style="background:#80FF00;" data-colour="9"></a>
        <a class="style-colour" style="background:#008080;" data-colour="10"></a>
        <a class="style-colour" style="background:#00FFFF;" data-colour="11"></a>
        <a class="style-colour" style="background:#0000FF;" data-colour="12"></a>
        <a class="style-colour" style="background:#FF55FF;" data-colour="13"></a>
        <a class="style-colour" style="background:#808080;" data-colour="14"></a>
        <a class="style-colour" style="background:#C0C0C0;" data-colour="15"></a>
    </div>

    <div class="style-formats">
        <a class="style-format style-format-bold">Aa</a>
        <a class="style-format style-format-italic">Aa</a>
        <a class="style-format style-format-underline">Aa</a>
    </div>
</div>

</script>

<script type="text/javascript">
    (function() {
        var $list = $($('#tmpl_styles').html());
        var $icon = $('<a><i class="fa fa-font"></i></a>');
        var $inp = $('#kiwi .controlbox .inp');

        var control = kiwi.components.ControlInput();
        control.addPluginIcon($icon);

        var styles = {
            colour: false,
            css_colour: false,
            bold: false,
            italic: false,
            underline: false
        };

        var updateStyles = function() {
            $inp.css('color', styles.css_colour ? styles.css_colour : '');
            $inp.css('font-weight', styles.bold ? 'bold' : '');
            $inp.css('font-style', styles.italic ? 'italic' : '');
            $inp.css('text-decoration', styles.underline ? 'underline' : '');

            $('#kiwi .style-colour').removeClass('style-color-selected');
            $('#kiwi .style-colour[data-colour='+styles.colour+']').addClass('style-color-selected');
        };


        // When a message is typed in, add any styling we have enabled
        kiwi.events.on('command', function(event, data) {
            if (data.command !== 'msg') {
                return;
            }

            var style_codes = '';

            if (styles.colour !== false) {
                var colour_code = styles.colour.toString();

                if (styles.colour < 10) {
                    colour_code = '0' + colour_code;
                }

                style_codes += String.fromCharCode(3) + colour_code;
            }

            if (styles.bold) {
                style_codes += '\x02';
            }

            if (styles.italic) {
                style_codes += '\x1D';
            }

            if (styles.underline) {
                style_codes += '\x1F';
            }

            // Add the styles to the emssage
            if (style_codes && data.params[1]) {
                data.params[1] = style_codes + ' ' + data.params[1];
            }
        });


        // Opening style changer...
        $icon.on('click', function(event) {
            event.stopPropagation();

            $list.appendTo($('#kiwi'))
                .show()
                .css({
                    bottom: ($('.controlbox').outerHeight()) + 'px',
                    right: '10px'
                });
        });


        // Closing style changer...
        $(document).on('click', function() {
            $list.hide();
        });


        // Reset all styles...
        $list.on('click', '.style-reset', function(event) {
            event.stopPropagation();

            styles.colour =  false;
            styles.css_colour =  false;
            styles.bold =  false;
            styles.italic =  false;
            styles.underline =  false;

            updateStyles();
        });


        // Changing colour...
        $list.on('click', '.style-colour', function(event) {
            event.stopPropagation();

            var colour = parseInt($(this).data('colour'), 10);
            if (isNaN(colour)) {
                return;
            }

            styles.css_colour = $(this).css('background-color');
            styles.colour = colour;
            updateStyles();
        });


        // Changing styles...
        $list.on('click', '.style-format-bold', function() {
            event.stopPropagation();
            styles.bold = !styles.bold;
            updateStyles();
        });
        $list.on('click', '.style-format-italic', function() {
            event.stopPropagation();
            styles.italic = !styles.italic;
            updateStyles();
        });
        $list.on('click', '.style-format-underline', function() {
            event.stopPropagation();
            styles.underline = !styles.underline;
            updateStyles();
        });

    })();
</script>