Skip to content

Commit

Permalink
widgets.Editor : Added ordered and unordered lists to the editor toolbar
Browse files Browse the repository at this point in the history
  • Loading branch information
maslen committed Sep 10, 2009
1 parent e29bc64 commit dcc0925
Show file tree
Hide file tree
Showing 9 changed files with 78 additions and 29 deletions.
63 changes: 46 additions & 17 deletions src/widgets/editor/editor.js
View file
Expand Up @@ -26,9 +26,16 @@
ITALICS_LABEL : "I",

STRIKE_TITLE : "Strikethrough",
STRIKE_LABEL : "Strike"
STRIKE_LABEL : "Strike",

UNORDERED_TITLE : "Unordered list",
UNORDERED_LABEL : "unordered list",

ORDERED_TITLE : "Ordered list",
ORDERED_LABEL : "ordered list"

/*
BLOCK_TITLE : "Blockquote",
BLOCK_LABEL : "blockquote",
Expand Down Expand Up @@ -93,7 +100,7 @@
this.toolbar = new glow.widgets.Editor.Toolbar(this);

if (this._opts.toolset == "basic") {
this.toolbar._addToolset("italics", "bold", "strike"/*, "blockquote"*/);
this.toolbar._addToolset("italics", "bold", "strike", /*"blockquote",*/ "unorderedlist", "orderedlist");
}
else throw new Exception("Unknown toolset name.");

Expand Down Expand Up @@ -291,7 +298,7 @@ Idler.prototype._stop = function() {

this.opts = opts || {};

this.whitelist = ["em", "strong", "strike", "p", "br", "blockquote"]; // TODO: support tags.attributes
this.whitelist = ["em", "strong", "strike", "p", "br", /*"blockquote",*/ "ul", "ol", "li"]; // TODO: support tags.attributes
}

// runs before clean
Expand Down Expand Up @@ -513,7 +520,7 @@ Idler.prototype._stop = function() {
myToolbar._addToolset("Bold", "Italics")
.addButton("MyCustomButton", opts); // will be chainable
*/
glow.widgets.Editor.Toolbar.prototype._addToolset = function() {
glow.widgets.Editor.Toolbar.prototype._addToolset = function(/*arguments*/) {
var toolToAdd;
for (var i = 0, l = arguments.length; i < l; i++) {
if ( (toolToAdd = this.editor._tools[arguments[i]]) ) {
Expand Down Expand Up @@ -553,14 +560,14 @@ Idler.prototype._stop = function() {
H6: true,
DIV: true,
ADDRESS: true,
// BLOCKQUOTE: true,
BLOCKQUOTE: true,
CENTER: true,
PRE: true,
CODE: true,
A: true,
UL: true,
OL: true,
LI: true,
// UL: true,
// OL: true,
// LI: true,
DL: true,
DT: true,
DD: true,
Expand Down Expand Up @@ -692,8 +699,8 @@ Idler.prototype._stop = function() {
*/
glow.widgets.Editor.Toolbar.prototype._update = function(domPath) { /*debug*///console.log("glow.widgets.Editor.Toolbar.prototype._update("+domPath+")")
var handled = false;
for (var i = 0, l = this._tools.length; i < l; i++) {
if (domPath.indexOf("|"+this._tools[i].tag+"|") > -1) {
for (var i = 0, l = this._tools.length; i < l; i++) {
if (domPath.indexOf("|"+this._tools[i].tag+"|") > -1) {
this._tools[i].activate();
handled = true;
}
Expand Down Expand Up @@ -927,19 +934,41 @@ Idler.prototype._stop = function() {
command: "strikethrough",
action: function() { tag.call(this.editor.editArea, this.command); return false; }
}
}
/* tag.call(this.editor.editArea, this.command)
,
blockquote: {
},
/*
blockquote: {
name : "blockquote",
opts : {
title: localeModule.BLOCK_TITLE,
label: localeModule.BLOCK_LABEL,
tag: "blockquote",
command: "formatblock",
action: function() { tag.call(this.editor.editArea, this.command, 'blockquote'); return false; }
command: "indent",
action: function() { tag.call(this.editor.editArea, this.command); return false; }
}
},
*/
unorderedlist: {
name : "unorderedlist",
opts : {
title: localeModule.UNORDERED_TITLE,
label: localeModule.UNORDERED_LABEL,
tag: "ul",
command: "insertunorderedlist",
action: function() { tag.call(this.editor.editArea, this.command); return false; }
}
},
orderedlist: {
name : "orderedlist",
opts : {
title: localeModule.ORDERED_TITLE,
label: localeModule.ORDERED_LABEL,
tag: "ol",
command: "insertorderedlist",
action: function() { tag.call(this.editor.editArea, this.command); return false; }
}
}
/* tag.call(this.editor.editArea, this.command)
,
heading1:{
name : "heading1",
opts : {
Expand Down Expand Up @@ -1329,7 +1358,7 @@ Idler.prototype._stop = function() {
}
else {
this._domPath();
this.contentWindow.document.execCommand(tagName, false, null);
this.contentWindow.document.execCommand(tagName, false, attr);
}
this.contentWindow.focus();
updateArea.call(this);
Expand Down
Binary file modified src/widgets/images/editor/button-blockquote.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/widgets/images/editor/button-orderedlist.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/widgets/images/editor/button-unorderedlist.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/widgets/images/editor/dark-button-blockquote.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/widgets/images/editor/dark-button-orderedlist.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/widgets/images/editor/dark-button-unorderedlist.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 21 additions & 11 deletions src/widgets/widgets.editor.css
View file
Expand Up @@ -63,30 +63,37 @@
width: 1px;
}

.glowCSSVERSION-editor .editor-toolbar-icon span { display: block; height: 1px; overflow: hidden; width: 1px; } .glowCSSVERSION-editor .editor-toolbar-item .bold-button { background-image: url(images/editor/button-bold.png); }
.glowCSSVERSION-editor .editor-toolbar-item .default .bold-button { background-position: 0px 0px; }
.glowCSSVERSION-editor .editor-toolbar-item .disabled .bold-button { background-position: 0px -28px; }
.glowCSSVERSION-editor .editor-toolbar-item .active .bold-button { background-position: 0px -85px; }
.glowCSSVERSION-editor .editor-toolbar-item .hover .bold-button { background-position: 0px -56px; }
.glowCSSVERSION-editor .editor-toolbar-icon span { display: block; height: 1px; overflow: hidden; width: 1px; }

.glowCSSVERSION-editor .editor-toolbar-item .bold-button { background-image: url(images/editor/button-bold.png); }
.glowCSSVERSION-editor .editor-toolbar-item .italics-button { background-image: url(images/editor/button-italics.png); }
.glowCSSVERSION-editor .editor-toolbar-item .default .italics-button { background-position: 0px 0px; }
.glowCSSVERSION-editor .editor-toolbar-item .strike-button { background-image: url(images/editor/button-strike.png); }
.glowCSSVERSION-editor .editor-toolbar-item .blockquote-button { background-image: url(images/editor/button-blockquote.png); }
.glowCSSVERSION-editor .editor-toolbar-item .unorderedlist-button { background-image: url(images/editor/button-unorderedlist.png); }
.glowCSSVERSION-editor .editor-toolbar-item .orderedlist-button { background-image: url(images/editor/button-orderedlist.png); }

.glowCSSVERSION-editor .editor-toolbar-item .default .editor-toolbar-icon { background-position: 0px 0px; }
.glowCSSVERSION-editor .editor-toolbar-item .disabled .editor-toolbar-icon { background-position: 0px -28px; }
.glowCSSVERSION-editor .editor-toolbar-item .active .editor-toolbar-icon { background-position: 0px -85px; }
.glowCSSVERSION-editor .editor-toolbar-item .hover .editor-toolbar-icon { background-position: 0px -56px; }


/*
.glowCSSVERSION-editor .editor-toolbar-item .default .italics-button { background-position: 0px 0px; }
.glowCSSVERSION-editor .editor-toolbar-item .disabled .italics-button { background-position: 0px -28px; }
.glowCSSVERSION-editor .editor-toolbar-item .active .italics-button { background-position: 0px -85px; }
.glowCSSVERSION-editor .editor-toolbar-item .hover .italics-button { background-position: 0px -56px; }
.glowCSSVERSION-editor .editor-toolbar-item .strike-button { background-image: url(images/editor/button-strike.png); }
.glowCSSVERSION-editor .editor-toolbar-item .default .strike-button { background-position: 0px 0px; }
.glowCSSVERSION-editor .editor-toolbar-item .default .strike-button { background-position: 0px 0px; }
.glowCSSVERSION-editor .editor-toolbar-item .disabled .strike-button { background-position: 0px -28px; }
.glowCSSVERSION-editor .editor-toolbar-item .active .strike-button { background-position: 0px -85px; }
.glowCSSVERSION-editor .editor-toolbar-item .hover .strike-button { background-position: 0px -56px; }

.glowCSSVERSION-editor .editor-toolbar-item .blockquote-button { background-image: url(images/editor/button-blockquote.png); }
.glowCSSVERSION-editor .editor-toolbar-item .default .blockquote-button { background-position: 0px 0px; }
.glowCSSVERSION-editor .editor-toolbar-item .disabled .blockquote-button { background-position: 0px -28px; }
.glowCSSVERSION-editor .editor-toolbar-item .active .blockquote-button { background-position: 0px -85px; }
.glowCSSVERSION-editor .editor-toolbar-item .hover .blockquote-button { background-position: 0px -56px; }

*/
.glowCSSVERSION-editor .glowCSSVERSION-hidden {position: absolute; left: -2500px; width: 1px;}


Expand All @@ -102,6 +109,9 @@
.editor-dark .editor-toolbar-item .italics-button { background-image: url(images/editor/dark-button-italics.png); }
.editor-dark .editor-toolbar-item .strike-button { background-image: url(images/editor/dark-button-strike.png); }
.editor-dark .editor-toolbar-item .blockquote-button { background-image: url(images/editor/dark-button-blockquote.png); }
.editor-dark .editor-toolbar-item .blockquote-button { background-image: url(images/editor/dark-button-blockquote.png); }
.editor-dark .editor-toolbar-item .unorderedlist-button { background-image: url(images/editor/dark-button-unorderedlist.png); }
.editor-dark .editor-toolbar-item .orderedlist-button { background-image: url(images/editor/dark-button-orderedlist.png); }


/* END EDITOR */
12 changes: 11 additions & 1 deletion test/glow/widgets/editor/editor.js
View file
Expand Up @@ -228,7 +228,7 @@ t.test("Editor.EditArea#_domPath", function() {
});

t.test("Editor.EditArea#_set/_getContent", function() {
t.expect(4);
t.expect(6);

t.stop();
setTimeout(function() {
Expand All @@ -252,6 +252,16 @@ t.test("Editor.EditArea#_set/_getContent", function() {
content = window.t_editor.cleaner.clean(window.t_editor.editArea._getContent()).toLowerCase();
/*4*/ t.ok(/<strike>.*hello world.*<\/strike>/.test(content), "The strike button produces a strike tag.");

window.t_editor.editArea._select();
window.t_editor.toolbar.getTool("unorderedlist").press();
content = window.t_editor.cleaner.clean(window.t_editor.editArea._getContent()).toLowerCase();
/*5*/ t.ok(/<ul><li>.*hello world.*<\/li><\/ul>/.test(content), "The unorderedlist button produces a ul and li tag.");

window.t_editor.editArea._select();
window.t_editor.toolbar.getTool("orderedlist").press();
content = window.t_editor.cleaner.clean(window.t_editor.editArea._getContent()).toLowerCase();
/*6*/ t.ok(/<ol><li>.*hello world.*<\/li><\/ol>/.test(content), "The orderedlist button produces a ol and li tag.");

t.start();
}, 10);
});
Expand Down

0 comments on commit dcc0925

Please sign in to comment.