Added color picker plugin

diff --git a/client/assets/css/custom.css b/client/assets/css/custom.css
new file mode 100644 (file)
index 0000000..fa09e0a
--- /dev/null
+++ b/client/assets/css/custom.css
@@ -0,0 +1 @@
+#kiwi .controlbox .input_tools .active { margin:0 1em; display:inline; background-color: #DEDEDE}
\ No newline at end of file

diff --git a/client/assets/img/color_picker.png b/client/assets/img/color_picker.png
new file mode 100644 (file)
index 0000000..809fb00
Binary files /dev/null and b/client/assets/img/color_picker.png differ

diff --git a/client/assets/plugins/bold.html b/client/assets/plugins/bold.html
new file mode 100644 (file)
index 0000000..7b97e2e
--- /dev/null
+++ b/client/assets/plugins/bold.html
@@ -0,0 +1,41 @@
+<script type="text/javascript">
+    (function () {
+        var network = kiwi.components.Network();
+        var control = kiwi.components.ControlInput();
+        var $area = $("#kiwi .controlbox textarea");
+ 
+        var $icon = $('<strong style="cursor:pointer; cursor: hand">B</strong>');
+        var bold = false;
+ 
+        $.fn.toggleClick=function(){
+            console.log('toggle click');
+            var functions=arguments, iteration=0
+            return this.click(function(){
+                functions[iteration].apply(this,arguments)
+                iteration= (iteration+1) %functions.length
+            })
+        }
+ 
+        $icon.toggleClick(function(){
+            console.log('bold');
+            $area.css('font-weight', 'bold');
+            $icon.parent().addClass('active');
+            bold = true;
+        },function(){
+            console.log('unbold');
+            $area.css('font-weight', '');
+            $icon.parent().removeClass('active');
+            bold = false;
+        });
+
+        $area.keydown(function(e){
+            var code = e.keyCode || e.which;
+
+            if(code == 13 && bold){
+                $area.val('\x02'+$area.val());
+            }
+        });
+ 
+        control.addPluginIcon($icon);
+    })();
+</script>
\ No newline at end of file

diff --git a/client/assets/plugins/font_color.html b/client/assets/plugins/font_color.html
new file mode 100644 (file)
index 0000000..3aae5c2
--- /dev/null
+++ b/client/assets/plugins/font_color.html
@@ -0,0 +1,85 @@
+<style>
+    #color-picker li {
+        list-style: none;
+        float: left;
+        width: 20px;
+    }
+
+    #color-picker ul {
+        width: 80px;
+        position: absolute;
+    }
+</style>
+
+<div id="color-picker" class="tool">
+    <img src="../kiwi/assets/img/color_picker.png">
+    <ul>
+        <li data-color="0" style="background-color: #FFFFFF">&nbsp;</li>
+        <li data-color="1" style="background-color: #000000">&nbsp;</li>
+        <li data-color="2" style="background-color: #000080">&nbsp;</li>
+        <li data-color="3" style="background-color: #008000">&nbsp;</li>
+        <li data-color="4" style="background-color: #FF0000">&nbsp;</li>
+        <li data-color="5" style="background-color: #800040">&nbsp;</li>
+        <li data-color="6" style="background-color: #800080">&nbsp;</li>
+        <li data-color="7" style="background-color: #FF8040">&nbsp;</li>
+        <li data-color="8" style="background-color: #FFFF00">&nbsp;</li>
+        <li data-color="9" style="background-color: #80FF00">&nbsp;</li>
+        <li data-color="10" style="background-color: #008080">&nbsp;</li>
+        <li data-color="11" style="background-color: #00FFFF">&nbsp;</li>
+        <li data-color="12" style="background-color: #0000FF">&nbsp;</li>
+        <li data-color="13" style="background-color: #FF55FF">&nbsp;</li>
+        <li data-color="14" style="background-color: #808080">&nbsp;</li>
+        <li data-color="16" style="background-color: #C0C0C0">&nbsp;</li>
+
+    </ul>
+</div>
+
+<script type="text/javascript">
+    
+    (function () {
+        var network = kiwi.components.Network();
+        var control = kiwi.components.ControlInput();
+        var selected_color = null;
+        var $area = $("#kiwi .controlbox textarea");
+
+        var $icon = $('#color-picker');
+        var $colors = $icon.find('ul');
+
+        var setColorsPosition = function() {
+            $colors.css('top', (-($icon.position().top + $icon.height() + 80))+'px');
+        };
+
+        $colors.hide();
+
+        $icon.click(function(e){
+            e.stopPropagation();
+
+            $colors.show();
+        });
+
+        //we need to hide the color box every time we click outside of the color list
+        $(document).click(function() {
+            $colors.hide();
+        });
+
+        $colors.find('li').click(function(e){
+            e.stopPropagation();
+
+            $this = $(this);
+            $area.css('color', $this.css('background-color'));
+            selected_color = $this.data('color');
+            $this.parent().hide();
+        });
+
+        $area.keydown(function(e){
+            var code = e.keyCode || e.which;
+
+            if(code == 13 && selected_color){
+                $area.val('\x03'+selected_color+$area.val());
+            }
+        });
+
+        control.addPluginIcon($icon);
+        setColorsPosition();
+    })();
+</script>
\ No newline at end of file