From cec534dfe07364a4068654b52fbfc70fde8970bc Mon Sep 17 00:00:00 2001 From: "Nikolay V. Nemshilov aka St" Date: Fri, 26 Nov 2010 19:56:38 +0300 Subject: [PATCH] RTE forecolor tool implementation --- src/rte/__init__.js | 6 ++- src/rte/rte.css | 74 ++++++++++++++++++++++++++++++++- src/rte/rte.js | 6 +-- src/rte/rte/tool.js | 4 +- src/rte/rte/tool/color.js | 81 +++++++++++++++++++++++++++++++++++++ src/rte/rte/tool/options.js | 70 ++++++++++++++++++++++++++++++++ src/rte/tools/backcolor.js | 8 ++++ src/rte/tools/background.js | 8 ---- src/rte/tools/color.js | 8 ---- src/rte/tools/forecolor.js | 8 ++++ 10 files changed, 248 insertions(+), 25 deletions(-) create mode 100644 src/rte/rte/tool/color.js create mode 100644 src/rte/rte/tool/options.js create mode 100644 src/rte/tools/backcolor.js delete mode 100644 src/rte/tools/background.js delete mode 100644 src/rte/tools/color.js create mode 100644 src/rte/tools/forecolor.js diff --git a/src/rte/__init__.js b/src/rte/__init__.js index bfbd0e2..83f6622 100644 --- a/src/rte/__init__.js +++ b/src/rte/__init__.js @@ -24,6 +24,8 @@ include_module_files( 'rte/tool', 'rte/tool/format', + 'rte/tool/options', + 'rte/tool/color', 'tools/bold', 'tools/italic', @@ -56,8 +58,8 @@ include_module_files( 'tools/indent', 'tools/outdent', - 'tools/color', - 'tools/background', + 'tools/forecolor', + 'tools/backcolor', 'tools/source', 'tools/clear', diff --git a/src/rte/rte.css b/src/rte/rte.css index 5ad5b1a..444e721 100644 --- a/src/rte/rte.css +++ b/src/rte/rte.css @@ -156,9 +156,79 @@ div.rui-rte-toolbar div.numlist i { background-position: -20px -140px; } div.rui-rte-toolbar div.indent i { background-position: -40px -140px; } div.rui-rte-toolbar div.outdent i { background-position: -60px -140px; } -div.rui-rte-toolbar div.color i { background-position: 0px -160px; } -div.rui-rte-toolbar div.background i { background-position: -20px -160px; } +div.rui-rte-toolbar div.forecolor i { background-position: 0px -160px; } +div.rui-rte-toolbar div.backcolor i { background-position: -20px -160px; } +/** Generic options tool styles */ +div.rui-rte-toolbar div.with-options ul.options, +div.rui-rte-toolbar div.with-options ul.options li { + list-style: none; + margin: 0; + padding: 0; +} +div.rui-rte-toolbar div.with-options ul.options { + display: none; + cursor: default; + position: absolute; + background: #fff; + border: 1px solid #aaa; +} +div.rui-rte-toolbar div.with-options ul.options li { + padding: .2em .5em; +} + +/* Colorpicker styles */ +div.rui-rte-toolbar div.color ul.options { + right: 0; + margin-bottom: 1px; + margin-right: -1px; + padding-bottom: .5em; + border-radius: .25em; + -moz-border-radius: .25em; + -webkit-border-radius: .25em; + box-shadow: #bbb .1em .1em .25em; + -moz-box-shadow: #bbb .1em .1em .25em; + -webkit-box-shadow: #bbb .1em .1em .25em; +} +div.rui-rte-toolbar div.color ul.options li.group ul { + width: 144px; + clear: both; + padding-top: .5em; +} +div.rui-rte-toolbar div.color ul.options li.group ul li { + float: left; + width: 16px; + height: 16px; + line-height: 16px; + font-size: 80%; + text-align: center; + text-indent: -9999em; + padding: 0; + cursor: pointer; + border: 1px solid transparent; +} +div.rui-rte-toolbar div.color ul.options li.group ul li:hover, +div.rui-rte-toolbar div.color ul.options li.group ul li.active { + border-color: #444; + border-radius: .1em; + -moz-border-radius: .1em; + -webkit-border-radius: .1em; +} +div.rui-rte-toolbar div.color ul.options li.group ul li.active { + text-indent: 0; +} +div.rui-rte-toolbar div.color div.display { + position: absolute; + bottom: 2px; + left: 3px; + margin: 0; + padding: 0; + width: 15px; + height: 4px; + border-radius: .1em; + -moz-border-radius: .1em; + -webkit-border-radius: .1em; +} /** The editor block styles */ div.rui-rte-editor { diff --git a/src/rte/rte.js b/src/rte/rte.js index 4112a65..c5579b7 100644 --- a/src/rte/rte.js +++ b/src/rte/rte.js @@ -31,7 +31,7 @@ var Rte = new Widget({ small: ['bold italic underline strike ttext|cut copy paste|header code quote|link image video|source'], basic: [ 'save clear|cut copy paste|bold italic underline strike ttext|left center right justify', - 'undo redo|header code quote|link image video|dotlist numlist|indent outdent|color background|source' + 'undo redo|header code quote|link image video|dotlist numlist|indent outdent|forecolor backcolor|source' ] }, @@ -63,8 +63,8 @@ var Rte = new Widget({ Numlist: 'List with numbers', Indent: 'Indent', Outdent: 'Outdent', - Color: 'Text color', - Background: 'Background color', + Forecolor: 'Text color', + Backcolor: 'Background color', Select: 'Select' }, diff --git a/src/rte/rte/tool.js b/src/rte/rte/tool.js index c5987ba..cd38585 100644 --- a/src/rte/rte/tool.js +++ b/src/rte/rte/tool.js @@ -44,7 +44,7 @@ Rte.Tool = new Class(Element, { // connecting the mousedown the way that the editor din't loose the focus this.onMousedown(function(e) { - e.stop(); this._mousedown(); + e.stop(); this.mousedown(); }); // checking the command initial state @@ -130,7 +130,7 @@ Rte.Tool = new Class(Element, { // protected // mousedown event receiver (might be replaced in subclasses) - _mousedown: function() { + mousedown: function() { this.exec(); } diff --git a/src/rte/rte/tool/color.js b/src/rte/rte/tool/color.js new file mode 100644 index 0000000..8657eea --- /dev/null +++ b/src/rte/rte/tool/color.js @@ -0,0 +1,81 @@ +/** + * an abstract color-picking tool + * + * Copyright (C) 2010 Nikolay Nemshilov + */ +Rte.Tool.Color = new Class(Rte.Tool.Options, { + extend: { + COLORS: R([ + // TODO that's ain't no cool hacker's approach! + '000000 444444 666666 999999 cccccc eeeeee f4f4f4 ffffff', + 'f24020 f79c33 fff84c 6af244 5ef9fd 0048f7 8950f7 ee5ff8', + 'e39e9b f5cba1 fee3a1 bcd3ab a6c3c8 a2c6e5 b1abd3 d0aabc '+ + 'd77169 f1b374 fdd675 9cbe83 7ca4ae 74aad8 8983bf bb839f '+ + 'cc0100 e79138 f1c332 69a84f 45818e 3d85c6 674ea7 a64d79 '+ + '990000 b45f05 bf9000 38761c 134f5c 0b5394 351b75 751a47 '+ + '660000 783e03 7f6000 264e13 0b333d 063763 1f124c 4c1030' + ]) + }, + + /** + * Basic constructor, builds the colors picking panel + * + * @param Rte rte + * @return Rte.Tool.Color this + */ + initialize: function(rte) { + this.colors = {}; + + this.$super(rte, {}).addClass('color'); + + // building the color picker menu + Rte.Tool.Color.COLORS.each(function(line) { + var group = $E('li', {'class': 'group'}), + list = $E('ul').insertTo(group), + colors = line.split(' '), i = 0, color; + + for (; i < colors.length; i++) { + color = '#' + colors[i]; + + this.items.push( + $E('li', { + html: '•', + style: { + background: color, + color: '#' +( + // calculating an opposite color so the text would be visible + 'ffffff'.toInt(16) - colors[i].toInt(16) + ).toString(16) + } + }) + .insertTo(list) + .onMousedown(R(this.pick).bind(this)) + ); + + this.colors[color] = this.items.last(); + this.colors[color].value = color; + } + + this.options.append(group); + }, this); + + return this; + }, + + /** + * Overloading the original method to check the color + * + * @return boolean check result + */ + active: function() { + var color = document.queryCommandValue(this.command); + + if (color in this.colors) { + this.display._.style.background = color; + return true; + } else { + this.display._.style.background = 'transparent'; + return false; + } + } +}); \ No newline at end of file diff --git a/src/rte/rte/tool/options.js b/src/rte/rte/tool/options.js new file mode 100644 index 0000000..5c42c02 --- /dev/null +++ b/src/rte/rte/tool/options.js @@ -0,0 +1,70 @@ +/** + * An abstract tool with an options menu + * + * Copyright (C) 2010 Nikolay Nemshilov + */ +Rte.Tool.Options = new Class(Rte.Tool, { + + /** + * Constructor + * + * @param Rte rte instance + * @param Object key -> value hash + */ + initialize: function(rte, options) { + this.display = $E('div', {'class': 'display'}); + this.options = $E('ul', {'class': 'options'}); + + this + .$super(rte) + .addClass('with-options') + .append(this.display, this.options); + + this.items = R([]); + + for (var value in options) { + this.items.push($E('li', {html: options[value]})); + this.items.last().insertTo(this.list).value = value; + } + + this.options.onMousedown(R(this.pick).bind(this)); + + // hidding the menu when the user interacts with the document outside of the document + var hide = R(this.options.hide).bind(this.options, null); + + $(document).on({ + mousedown: hide, + keydown: function(event) { + if (event.keyCode === 27) { + hide(); + } + } + }); + + return this; + }, + +// protected + + // handling an option pick + pick: function(event) { + var target = event.stop().target, value = target.value; + + if (value !== undefined) { + this.options.hide(); + this.items.each('removeClass', 'active'); + target.addClass('active'); + this.value = value; + this.exec(); + } + }, + + // toggling the menu on the icon-click + mousedown: function() { + $$('.rui-rte-toolbar div.with-options ul.options') + .without(this.options).each('hide'); + + this.options.toggle('fade', {duration: 'short'}); + } + +}); \ No newline at end of file diff --git a/src/rte/tools/backcolor.js b/src/rte/tools/backcolor.js new file mode 100644 index 0000000..53fa032 --- /dev/null +++ b/src/rte/tools/backcolor.js @@ -0,0 +1,8 @@ +/** + * the 'backcolor' tool + * + * Copyright (C) 2010 Nikolay Nemshilov + */ +Rte.Tool.Backcolor = new Class(Rte.Tool.Color, { + command: 'backcolor' // 'hiliteColor' +}); \ No newline at end of file diff --git a/src/rte/tools/background.js b/src/rte/tools/background.js deleted file mode 100644 index 4307fd2..0000000 --- a/src/rte/tools/background.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * the 'background' color tool - * - * Copyright (C) 2010 Nikolay Nemshilov - */ -Rte.Tool.Background = new Class(Rte.Tool, { - command: 'backcolor' -}); \ No newline at end of file diff --git a/src/rte/tools/color.js b/src/rte/tools/color.js deleted file mode 100644 index ca93172..0000000 --- a/src/rte/tools/color.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * the 'color' tool - * - * Copyright (C) 2010 Nikolay Nemshilov - */ -Rte.Tool.Color = new Class(Rte.Tool, { - command: 'forecolor' -}); \ No newline at end of file diff --git a/src/rte/tools/forecolor.js b/src/rte/tools/forecolor.js new file mode 100644 index 0000000..091200f --- /dev/null +++ b/src/rte/tools/forecolor.js @@ -0,0 +1,8 @@ +/** + * the 'forecolor' tool + * + * Copyright (C) 2010 Nikolay Nemshilov + */ +Rte.Tool.Forecolor = new Class(Rte.Tool.Color, { + command: 'forecolor' +}); \ No newline at end of file