: declarative context menus?
:
: I have managed to create a nice CTRL, SHIFT selection & context menu system with my DataView (table).
:
: CTRL select works nicely. However the SHIFT selection always seems to create a drag-selection between the start and ending rows.
:
: A little reminder. CTRL select is when one holds the CTRL key and mouse left-click on rows to select individual rows (eg. row 1, 3, 5). SHIFT select is when one holds the SHIFT key and left-click on row 1 and then row 10 to automatically select all rows between 1 and 10.
:
: Does anyone know how to prevent IE & FF from selecting the text inbetween the SHIFT selection phase?
:
:
: Currently I use td background-color for selection and knowing what to delete, etc. Is there a better way to do this?
:
Why not do it the phpmyadmin way, and place checkboxes in front of each row, so you can select them...
I've made you an example... ofcourse this is only step one, but you can build a nici object around it. I always start like this making html with some JavaScript Functions and then make an object that lets you create multiple instances so that the ID of the table doesn't matter anymore for the functions etc... makes it a lot easier.
In this example I didn't quite get the event.x working in firefox, but in IE it does work. The rest of the selection procedure does work in IE and FF. only thing that goes wrong in FF is that the contextmenu appears on the wrong location...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<html lang="nl">
<head>
<title>website - page</title>
<link rel="Stylesheet" type="text/css" href="../css/mainstyles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="R.V. van Doggenaar" />
<meta name="company" content="MAC-DOGGIE" />
<meta name="template" content="" />
<style type="text/css">
.selected { background-color : #EDEDED; }
.notselected { background-color : #FFFFFF;}
.contextmenu {border : 1px solid orange;background-color:yellow;color:blue;}
#theTable tr {cursor:pointer; cursor:hand;}
</style>
<script type="text/JavaScript" Language="JavaScript">
var selection = Array();
var selecting = false;
function select(obj, event) {
if(event.ctrlKey) {
addToSelection(obj)
}else if(event.shiftKey) {
extendSelection(obj)
}else {
selection = new Array();
selection[0] = obj.id;
}
setStyles();
//alert(selection);
}
function addToSelection(obj) {
// Check if it is allready in the selection, then remove it
//
var selected = false;
for(i=0;i<selection.length;i++) {
if(selection[i] == obj.id) {
selection.splice(i,1);
selected = true;
}
}
if(!selected) {
selection[selection.length] = obj.id;
}
}
function extendSelection(obj) {
first = selection[selection.length -1];
if(parseInt(first.split('_')[1]) < parseInt(obj.id.split('_')[1])) {
last = obj.id;
}else {
last = first;
first = obj.id;
}
var elements = document.getElementById('theTable').getElementsByTagName('TR');
selection = Array();
for(i=0;i<elements.length;i++) {
if(elements[i].id == first) {
selecting = true;
}
if(selecting) {
selection[selection.length] = elements[i].id;
}
if(elements[i].id == last) {
selecting = false;
}
}
}
function setStyles() {
var elements = document.getElementById('theTable').getElementsByTagName('TR');
for(j=0;j<elements.length;j++) {
var selected = false;
for(i=0;i<selection.length;i++) {
var obj = document.getElementById(selection[i]);
if(obj.id == elements[j].id) {
selected = true;
}
}
if(selected) {
elements[j].className = 'selected';
}else {
elements[j].className = 'notselected';
}
}
}
function showContextmenu(obj, event) {
// Check wether this item was within the selection, else end the selection
//
var selected = false;
for(i=0;i<selection.length;i++) {
if(obj.id == selection[i]) {
selected = true;
}
}
if(!selected) {
// End Selection
//
selection = Array();
selection[0] = obj.id;
setStyles();
}
context = document.createElement('DIV');
context.id = 'context';
context.className = 'contextmenu';
document.body.appendChild(context);
context.style.width = '150px';
context.style.height = '300px';
context.style.position = 'absolute';
context.style.top = (event.y-10)+'px';
context.style.left = (event.x-10)+'px';
context.style.display = 'block';
context.innerHTML = '<a href="JavaScript:Copy();">Copy</a>';
context.style.margin = '0px';
context.style.padding = '0px';
context.onmouseout = function() {document.body.removeChild(document.getElementById('context'));};
return false;
}
function Copy() {
alert('Rows Copied...');
// ToDo:...
}
</script>
</head>
<body onmousemove="document.getElementById('coords').innerHTML='x:'+event.x+', y:'+event.y">
<table id="theTable" cellpadding="0" cellspacing="0">
<tr id="row_1" onclick="select(this, event)" oncontextmenu="return showContextmenu(this, event);">
<td>a</td><td>b</td><td>c</td><td>d</td>
</tr>
<tr id="row_2" onclick="select(this, event)" oncontextmenu="return showContextmenu(this, event);">
<td>a</td><td>b</td><td>c</td><td>d</td>
</tr>
<tr id="row_3" onclick="select(this, event)" oncontextmenu="return showContextmenu(this, event);">
<td>a</td><td>b</td><td>c</td><td>d</td>
</tr>
<tr id="row_4" onclick="select(this, event)" oncontextmenu="return showContextmenu(this, event);">
<td>a</td><td>b</td><td>c</td><td>d</td>
</tr>
<tr id="row_5" onclick="select(this, event)" oncontextmenu="return showContextmenu(this, event);">
<td>a</td><td>b</td><td>c</td><td>d</td>
</tr>
<tr id="row_6" onclick="select(this, event)" oncontextmenu="return showContextmenu(this, event);">
<td>a</td><td>b</td><td>c</td><td>d</td>
</tr>
</table>
<span id="coords"></span>
</body>
</html>
Hope this is what you meant. What you put in the contextmenu you must decide for your own ofcourse...
good luck with it.
-mac-
mailto:mac_doggie@hotmail.com
the Netherlands...
