Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Commit

Permalink
all table manipulation functions added
Browse files Browse the repository at this point in the history
  • Loading branch information
@xrado @cheeaun
xrado authored and cheeaun committed Sep 5, 2009
1 parent 430c554 commit 90dbf67
Showing 1 changed file with 82 additions and 24 deletions.
106 changes: 82 additions & 24 deletions Source/MooEditable/MooEditable.Table.js
View file
Expand Up @@ -23,23 +23,24 @@ Author:
Radovan Lozej <radovan lozej gmail com>
*/

MooEditable.UI.TableDialog = function(editor){
var html = 'columns <input type="text" class="table-c" value="" size="4" /> '
+ 'rows <input type="text" class="table-r" value="" size="4" /> '
+ '<button class="dialog-button dialog-ok-button">Insert</button>'
MooEditable.UI.TableDialog = function(editor,dialog){
var html = {
tableadd : 'columns <input type="text" class="table-c" value="" size="4" /> ' +
'rows <input type="text" class="table-r" value="" size="4" /> ',
tableedit : 'width <input type="text" class="table-w" value="" size="4" /> ' +
'class <input type="text" class="table-c" value="" size="15" /> ',
tablerowedit : 'class <input type="text" class="table-c" value="" size="15" /> ',
tablecoledit : 'width <input type="text" class="table-w" value="" size="4" /> ' +
'class <input type="text" class="table-c" value="" size="15" /> ' +
'align <select class="table-a"><option>none</option><option>left</option><option>center</option><option>right</option></select>' +
'valign <select class="table-va"><option>none</option><option>top</option><option>middle</option><option>bottom</option></select>'
}
html[dialog]+= '<button class="dialog-button dialog-ok-button">OK</button>'
+ '<button class="dialog-button dialog-cancel-button">Cancel</button>';
return new MooEditable.UI.Dialog(html, {
'class': 'mooeditable-prompt-dialog',
onOpen: function(){
var input = this.el.getElement('.table-c');
(function(){ input.focus(); }).delay(10);
},
onClick: function(e){
if (e.target.tagName.toLowerCase() == 'button') e.preventDefault();
var button = document.id(e.target);
if (button.hasClass('dialog-cancel-button')) this.close();
else if (button.hasClass('dialog-ok-button')){
this.close();

var action = {
tableadd: {
click : function(e){
var col = this.el.getElement('.table-c').value.toInt();
var row = this.el.getElement('.table-r').value.toInt();
if(!(row>0 && col>0)) return;
Expand All @@ -53,6 +54,64 @@ MooEditable.UI.TableDialog = function(editor){
}
editor.selection.insertContent(div.get('html'));
}
},
tableedit : {
load : function(e){
var node = editor.selection.getNode().getParent('table');
this.el.getElement('.table-w').set('value',node.get('width'));
this.el.getElement('.table-c').set('value',node.className);
},
click : function(e){
var node = editor.selection.getNode().getParent('table');
node.set('width',this.el.getElement('.table-w').value);
node.className = this.el.getElement('.table-c').value;
}
},
tablerowedit : {
load : function(e){
var node = editor.selection.getNode().getParent('tr');
this.el.getElement('.table-c').set('value',node.className);
},
click : function(e){
var node = editor.selection.getNode().getParent('tr');
node.className = this.el.getElement('.table-c').value;
}
},
tablecoledit : {
load : function(e){
var node = editor.selection.getNode();
if(node.get('tag')!='td') node = node.getParent('td');
this.el.getElement('.table-w').set('value',node.get('width'));
this.el.getElement('.table-c').set('value',node.className);
this.el.getElement('.table-a').set('value',node.get('align'));
this.el.getElement('.table-va').set('value',node.get('valign'));
},
click : function(e){
var node = editor.selection.getNode();
if(node.get('tag')!='td') node = node.getParent('td');
node.set('width',this.el.getElement('.table-w').value);
node.className = this.el.getElement('.table-c').value;
node.set('align',this.el.getElement('.table-a').value);
node.set('valign',this.el.getElement('.table-va').value);
}
}
};

return new MooEditable.UI.Dialog(html[dialog], {
'class': 'mooeditable-prompt-dialog',
onOpen: function(){
if(action[dialog].load) action[dialog].load.apply(this);
var input = this.el.getElement('input');
(function(){ input.focus(); }).delay(10);
},
onClick: function(e){
if (e.target.tagName.toLowerCase() == 'button') e.preventDefault();
var button = document.id(e.target);
if (button.hasClass('dialog-cancel-button')) this.close();
else if (button.hasClass('dialog-ok-button')){
this.close();
action[dialog].click.apply(this);
}
}
});
};
Expand All @@ -63,7 +122,7 @@ MooEditable.Actions.extend({
title: 'Add Table',
dialogs: {
prompt: function(editor){
return MooEditable.UI.TableDialog(editor);
return MooEditable.UI.TableDialog(editor,'tableadd');
}
},
command: function(){
Expand All @@ -75,11 +134,11 @@ MooEditable.Actions.extend({
title: 'Edit Table',
dialogs: {
prompt: function(editor){
return MooEditable.UI.TableDialog(editor);
return MooEditable.UI.TableDialog(editor,'tableedit');
}
},
command: function(){
this.dialogs.tableadd.prompt.open();
if(this.selection.getNode().getParent('table')) this.dialogs.tableedit.prompt.open();
}
},

Expand All @@ -95,11 +154,11 @@ MooEditable.Actions.extend({
title: 'Edit Row',
dialogs: {
prompt: function(editor){
return MooEditable.UI.TableDialog(editor);
return MooEditable.UI.TableDialog(editor,'tablerowedit');
}
},
command: function(){
this.dialogs.tableadd.prompt.open();
if(this.selection.getNode().getParent('table')) this.dialogs.tablerowedit.prompt.open();
}
},

Expand Down Expand Up @@ -147,12 +206,11 @@ MooEditable.Actions.extend({
title: 'Edit Column',
dialogs: {
prompt: function(editor){
return MooEditable.UI.TableDialog(editor);
// class,align,width,valign
return MooEditable.UI.TableDialog(editor,'tablecoledit');
}
},
command: function(){
this.dialogs.tableadd.prompt.open();
if(this.selection.getNode().getParent('table')) this.dialogs.tablecoledit.prompt.open();
}
},

Expand Down

0 comments on commit 90dbf67

Please sign in to comment.