Skip to content

Commit

Permalink
RTE forecolor tool implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
kaievns committed Nov 26, 2010
1 parent 5158338 commit cec534d
Show file tree
Hide file tree
Showing 10 changed files with 248 additions and 25 deletions.
6 changes: 4 additions & 2 deletions src/rte/__init__.js
Expand Up @@ -24,6 +24,8 @@ include_module_files(

'rte/tool',
'rte/tool/format',
'rte/tool/options',
'rte/tool/color',

'tools/bold',
'tools/italic',
Expand Down Expand Up @@ -56,8 +58,8 @@ include_module_files(
'tools/indent',
'tools/outdent',

'tools/color',
'tools/background',
'tools/forecolor',
'tools/backcolor',

'tools/source',
'tools/clear',
Expand Down
74 changes: 72 additions & 2 deletions src/rte/rte.css
Expand Up @@ -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 {
Expand Down
6 changes: 3 additions & 3 deletions src/rte/rte.js
Expand Up @@ -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'
]
},

Expand Down Expand Up @@ -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'
},

Expand Down
4 changes: 2 additions & 2 deletions src/rte/rte/tool.js
Expand Up @@ -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
Expand Down Expand Up @@ -130,7 +130,7 @@ Rte.Tool = new Class(Element, {
// protected

// mousedown event receiver (might be replaced in subclasses)
_mousedown: function() {
mousedown: function() {
this.exec();
}

Expand Down
81 changes: 81 additions & 0 deletions 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: '&bull;',
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;
}
}
});
70 changes: 70 additions & 0 deletions 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'});
}

});
8 changes: 8 additions & 0 deletions 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'
});
8 changes: 0 additions & 8 deletions src/rte/tools/background.js

This file was deleted.

8 changes: 0 additions & 8 deletions src/rte/tools/color.js

This file was deleted.

8 changes: 8 additions & 0 deletions 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'
});

0 comments on commit cec534d

Please sign in to comment.