"
return lines.join('');
}
/**
* Generate the xml representing a note (used when we save notes).
* @type string
*/
Note.prototype.toXML = function()
{
var ret = "
"
}
/**
* Change the text of a note.
* @param {string} str the text for the note.
*/
Note.prototype.setText = function(str)
{
// convert characters from 160-255 to html codepoints (this provides
// Safari compatability)
var chars = new Array();
var i;
for (i = 0; i < str.length; i++)
{
var c = str.charCodeAt(i);
if (c >= 160 && c <= 255)
chars.push("&#" + c + ";");
else
chars.push(str.charAt(i));
}
str = chars.join('');
if (str != this.text)
{
this.parent.changed = true;
this.text = str;
}
var elt = get(this.id);
elt.innerHTML = this.getHTML();
// make images undraggable
var imgs = elt.getElementsByTagName('img');
for (i = 0; i < imgs.length; i++) {
imgs[i].addEventListener('mousedown', function() { return false; }, true);
}
elt.title = 'double click to edit';
}
/**
* We keep track of the size of the note internally; this method updates
* that value.
*/
Note.prototype.updateSize = function()
{
var elt = get(this.id);
this.size.x = parseInt(elt.style.width);
this.size.y = parseInt(elt.style.height);
}
/**
* Disable a note (can't be moved or edited).
*/
Note.prototype.disable = function()
{
this.selectable = this.editable = false;
var elt = get(this.id);
elt.title = '';
}
/**
* Enable a note (can be moved and edited).
*/
Note.prototype.enable = function()
{
this.selectable = this.editable = true;
var elt = get(this.id);
elt.title = 'double click to edit';
}
/**
* When a note is selected from the mini note toolbar, we bring it to the
* front and flash the background.
*/
Note.prototype.select = function()
{
this.parent.reZOrder(this.id);
var self = this;
var elt = get(this.id);
elt.style.backgroundColor = (new Color(this.bgColor.toString())).hsvadj(0, 0, -0.1);
setTimeout(function() { elt.style.backgroundColor = self.bgColor.toString(); }, 500);
}
/**
* Send a note to the back of the workspace.
*/
Note.prototype.sendToBack = function()
{
var elt = get(this.id);
elt.style.zIndex = 0;
this.parent.reZOrder();
}
/**
* Determine which note is above which other note. Used when re-stacking
* notes. Returns -1 if a is below b, +1 if a is above b, and 0 if they
* have the same z value.
* @param {Note} a
* @param {Note} b
* @type int
*/
function cmpNotesZ(a, b)
{
var av = parseInt(get(a.id).style.zIndex);
var bv = parseInt(get(b.id).style.zIndex);
if (av < bv)
return -1;
if (av > bv)
return 1;
return 0;
}
//
// Mouse objects
//
/**
* @class A class that tracks the mouse position and handles mouse events.
* @constructor
*/
var Mouse =
{
/**
* When resizing a note, this determines which edges need to be moved and
* which edges remain fixed. It is a dictionary from string -> boolean
* where the string is either 'top, 'right', 'bottom' or 'left' and true
* means the edge is moving.
* @see Note#mouseMove
* @type dictionary
*/
notePosRel : {},
/**
* The current location of the mouse. We initialize it to a dummy value
* because object.js probably hasn't loaded yet (and Point is undefined).
* It actually gets set in {@link GLOBALS#init}
* @type Point
*/
curPos : 0,
/**
* Update the mouse position and resize/move notes if necessary.
* @param {int} x x position
* @param {int} y y position
*/
update : function(x, y)
{
this.curPos.x = x;
this.curPos.y = y;
// if something is selected
if (this.selObj)
this.selObj.update(this);
},
/**
* Select a note either for dragging or for resizing.
* @param {Note} note the selected note
* @param {event} ev the javascript event object
*/
select : function(note, ev)
{
if (this.selObj) // something already selected
return;
if (get(note.id).style.cursor != "move")
this.selObj = new SelectedObjectResize(note, this.notePosRel);
else
{
if (ev.altKey)
{
this.selObj = new SelectedObjectResize(note,
{'top': false, 'bottom':true, 'left':false, 'right':true});
}
else if (ev.ctrlKey)
this.selObj = new SelectedObjectDrag(note, true)
else
this.selObj = new SelectedObjectDrag(note, false);
}
this.downPos = this.curPos.copy();
// move the selected item to the top
workspace.reZOrder(note.id);
},
/**
* Release selected notes.
*/
deselect : function()
{
if (this.selObj)
{
this.selObj.deselect();
delete this.selObj;
}
}
};
/**
* Create a new Dragging object.
* @class A class that contains information about note(s) that is being
* dragged.
* @see Mouse#select
* @param {Note} note a reference to the note being dragged
* @param {boolean} isGroup are we dragging all notes of the same color?
* @constructor
*/
function SelectedObjectDrag(note, isGroup)
{
/**
* The note(s) being dragged.
* @type Array
*/
this.notes = new Array();
// if ctrl is down, move all the notes of the same color
if (isGroup)
{
for (var n in workspace.notes)
{
if (workspace.notes[n].bgColor.toString() == note.bgColor.toString())
{
this.notes.push( { 'id' : workspace.notes[n].id,
'pos' : workspace.notes[n].getPosition() } );
}
}
}
else // single note move
this.notes.push( { 'id' : note.id, 'pos' : note.getPosition() } );
// set the border color of the notes that are being moved
var elt;
for (n in this.notes)
{
elt = get(this.notes[n].id);
elt.style.border = noteBorder + 'px #980000 solid';
}
}
/**
* Update the position of note(s) when the user moves the mouse.
* @param {Mouse} md a reference to the parent mouse object
*/
SelectedObjectDrag.prototype.update = function(md)
{
var offset = md.curPos.sub(md.downPos);
var elt;
for (n in this.notes)
{
elt = get(this.notes[n].id);
var newPos = this.notes[n].pos.add(offset);
elt.style.left = newPos.x + 'px';
elt.style.top = newPos.y + 'px';
}
workspace.changed = true;
};
/**
* When we drop a note, we need to reset the colors of borders and add
* information to the undo stack.
*/
SelectedObjectDrag.prototype.deselect = function()
{
// check to see if we moved the object(s). if we did, add
// information to the undo stack.
var md = workspace.mouse;
var offset = md.curPos.sub(md.downPos);
if (!offset.equals(new Point(0, 0)))
{
var f = {
title : 'move note(s)',
notes : this.notes,
off : offset,
undo : function()
{
var elt;
for (n in this.notes)
{
elt = get(this.notes[n].id);
pos = this.notes[n].pos;
elt.style.left = pos.x + 'px';
elt.style.top = pos.y + 'px';
}
},
redo : function()
{
var elt;
for (n in this.notes)
{
elt = get(this.notes[n].id);
pos = this.notes[n].pos.add(this.off);
elt.style.left = pos.x + 'px';
elt.style.top = pos.y + 'px';
}
}
};
workspace.history.add(f);
}
// reset the border color to black
var elt;
for (var n in this.notes)
{
elt = get(this.notes[n].id);
elt.style.border = noteBorder + 'px ' + noteBorderColor + ' solid';
}
};
// inheritance might be useful here
/**
* Create a new Resizing object.
* @class A class that contains information about a note being resized.
* @see Mouse#select
* @param {Note} note a reference to the note being dragged
* @param {dictionary} pnotePosRel which edges are being resized? It is
* a dictionary from string -> boolean where the string is either
* 'top, 'right', 'bottom' or 'left' and true means the edge is moving.
* @constructor
*/
function SelectedObjectResize(note, pnotePosRel)
{
/**
* The note being resized
* @type Note
*/
this.note = note;
/**
* The original size of the note
* @type Point
*/
this.size = note.getSize();
/**
* The original position of the note
* @type Point
*/
this.pos = note.getPosition();
/**
* The edges being moved.
* @type dictionary
*/
this.edges = pnotePosRel;
}
/**
* Update the size of the note when the user moves the mouse.
* @param {Mouse} md a reference to the parent Mouse object
*/
SelectedObjectResize.prototype.update = function(md)
{
var elt = get(this.note.id);
// this depends on which edge they grabbed
var minSize = 10;
var offset = md.curPos.sub(md.downPos);
if (this.edges['top'])
{
if (this.size.y - offset.y > minSize)
{
elt.style.top = (this.pos.y + offset.y) + 'px';
elt.style.height = (this.size.y - offset.y) + 'px';
}
}
else if (this.edges['bottom'])
elt.style.height = Math.max(this.size.y + offset.y, minSize) + 'px';
if (this.edges['left'])
{
if (this.size.x - offset.x > minSize)
{
elt.style.left = (this.pos.x + offset.x) + 'px';
elt.style.width = (this.size.x - offset.x) + 'px';
}
}
else if (this.edges['right'])
elt.style.width = Math.max(this.size.x + offset.x, minSize) + 'px';
if (this.note.parent.edit == this.note)
{
var edit = get(this.note.id + 'text');
var pSize = this.note.getCorrectedSize();
pSize.x -= 2*(noteBorder+notePadding+1);
pSize.y -= 2*(noteBorder+notePadding+1) + 16;
edit.style.height = pSize.y + 'px';
edit.style.width = pSize.x + 'px';
}
this.note.updateSize();
workspace.changed = true;
};
/**
* Add information to the undo stack when the user stops resizing.
*/
SelectedObjectResize.prototype.deselect = function()
{
// add information to the undo stack if the item was resized
var curSize = this.note.getSize();
if (!this.size.equals(curSize))
{
var f = {
title : 'resize note',
usize : this.size,
upos : this.pos,
rsize : curSize,
rpos : this.note.getPosition(),
id : this.note.id,
undo : function()
{
this.set(this.usize, this.upos);
},
redo : function()
{
this.set(this.rsize, this.rpos);
},
set : function(size, pos)
{
var elt = get(this.id);
elt.style.top = pos.y + 'px';
elt.style.left = pos.x + 'px';
elt.style.height = size.y + 'px';
elt.style.width = size.x + 'px';
workspace.notes[this.id].updateSize();
}
};
workspace.history.add(f);
}
};
/**
* @class A class that maintains the undo/redo stacks.
*/
var History =
{
/**
* The number of items to keep in the undo stack.
* @type int
*/
maxSize : 40,
/**
* @type Array
*/
undoStack : new Array(), // each item in the array is an object
/**
* @type Array
*/
redoStack : new Array(), // with methods called undo and redo
/**
* Add an event to the undo stack. This clears the redo stack.
* @param {function} funcPtr a closure that when called will
* undo the last action
*/
add : function(funcPtr) {
this.redoStack = new Array();
this.undoStack.push(funcPtr);
if (this.undoStack.length > this.maxSize)
this.undoStack.shift();
},
/**
* Undo the last action and move an item from the undo stack to the
* redo stack.
*/
undo : function() {
if (this.undoStack.length > 0) {
var f = this.undoStack.pop();
this.redoStack.push(f);
f.undo();
}
},
/**
* Redo the last undo action. Moves the action back to the undo stack.
*/
redo : function() {
if (this.redoStack.length > 0)
{
var f = this.redoStack.pop();
this.undoStack.push(f);
f.redo();
}
}
};
//
/**
* @class A generator class that returns the position of the next new note.
*/
var NotePos = {
/**
* @type int
*/
x : 170,
/**
* @type int
*/
y : 40,
/**
* Compute the position of a new note given the size of the note.
* @param {int} w the width of the new note
* @param {int} h the height of the new note
* @type Point
*/
nextPos : function(w, h) {
var ret = new Point(this.x, this.y);
this.x += 20;
this.y += 20;
var s = getPageSize();
if (this.x + w > s.x || this.y + h > s.y) {
this.x = 40;
this.y = 40;
}
ret.x += window.scrollX;
ret.y += window.scrollY;
return ret;
}
};
/**
* @class A class that represents the workspace. This includes maintaining
* information about the notes and undo/redo information.
*/
var workspace = {
/**
* A dictionary of all the notes.
* @type dictionary
*/
notes : {},
/**
* When creating new notes, we sometimes need to assign a random name to
* it. The first random note is note0, the second is note1, etc.
* @type int
*/
nextNoteNum : 0,
/**
* Number of notes on the workspace. We keep this as a separate variable
* since there's no way to determine the size of a dictionary.
* @type int
*/
numNotes : 20,
/**
* The last time that we loaded this workspace (used to check for update
* collision).
* @type int
*/
loadedTime : 0,
/**
* Have we changed the workspace?
* @type boolean
*/
changed : false,
/**
* The note we are editing.
* @type Note
*/
edit : '',
/**
* The name of the workspace.
* @type string
*/
name : 'Untitled',
/**
* @type History
*/
history : History,
/**
* @type NotePos
*/
notePos : NotePos,
/**
* @type Mouse
*/
mouse : Mouse,
/**
* Should keyboard shortcuts work?
* @type boolean
*/
shortcuts : true,
/**
* Create a new note. Any of the parameter values may be left blank
* and default values will be used.
* @param {dictionary} note a dictionary with any of the following keys:
* note['id'] = the name of the note
* note['xPos'] = the x position of the note
* note['yPos'] = the y position of the note
* note['height'] = the height of the note
* note['width'] = the width of the note
* note['bgcolor'] = the background color of the note (hex)
* note['zIndex'] = the stacking position of the note
* note['text'] = the text value of the note
*/
createNote : function(note)
{
if (!note)
note = {};
if (!('id' in note))
{
note.id = "note" + this.nextNoteNum;
// a new note is being made, save information to the undo stack
var self = this;
var f = {
title : 'create note',
nnn : this.nextNoteNum,
id : note.id,
pos : new Point(this.notePos.x, this.notePos.y),
undo : function()
{
self.notes[this.id].destroy(); // don't add to history
self.nextNoteNum = this.nnn;
},
redo : function()
{
self.createNote({'id': this.id, 'xPos' : this.pos.x,
'yPos' : this.pos.y});
self.nextNoteNum++;
}
};
this.history.add(f);
this.nextNoteNum++;
}
// don't create a layer if it already exists, just move it to the top
if (get(note.id)) {
this.reZOrder(note.id);
return;
}
if (!('height' in note)) note.height = 150;
if (!('width' in note)) note.width = 250;
var pos;
if (!('xPos' in note) || !('yPos' in note))
pos = this.notePos.nextPos(note.width, note.height);
if (!('xPos' in note)) note.xPos = pos.x;
if (!('yPos' in note)) note.yPos = pos.y;
if (!('bgcolor' in note)) note.bgcolor = '#ff8';
if (!('text' in note)) note.text = '';
// disable editing of a different note
this.editOff();
var newDiv = document.createElement('div');
newDiv.setAttribute('class', 'note');
newDiv.setAttribute('id', note.id);
newDiv.addEventListener('mouseover', function(ev) {
workspace.notes[note.id].mouseOver(ev); }, true);
newDiv.addEventListener('mouseout', function(ev) {
workspace.notes[note.id].mouseOut(ev); }, true);
newDiv.addEventListener('mousedown', function(ev) {
workspace.notes[note.id].mouseDown(ev); }, false);
newDiv.addEventListener('mouseup', function(ev) {
workspace.notes[note.id].mouseUp(ev); }, true);
newDiv.addEventListener('mousemove', function(ev) {
workspace.notes[note.id].mouseMove(ev); }, true);
newDiv.addEventListener('dblclick', function(ev) {
workspace.notes[note.id].mouseDblClick(ev); }, false);
newDiv.setAttribute('title', 'double click to edit');
document.body.appendChild(newDiv);
var elt = get(note.id);
elt.style.backgroundColor = note.bgcolor;
elt.style.width = note.width + 'px';
elt.style.height = note.height + 'px';
elt.style.left = note.xPos + 'px';
elt.style.top = note.yPos + 'px';
elt.style.padding = notePadding + 'px';
elt.style.position = 'absolute';
elt.style.border = noteBorder + 'px ' + noteBorderColor + ' solid';
elt.style.MozBorderRadius = '4px';
elt.style.textAlign = 'left';
elt.style.overflow = 'hidden';
elt.style.MozBoxSizing = 'content-box';
if (!('zIndex' in note))
{
this.reZOrder();
elt.style.zIndex = this.numNotes + 1;
}
else
elt.style.zIndex = note.zIndex;
this.numNotes++;
var nNote = new Note(elt, this, note.text);
this.notes[nNote.id] = nNote;
},
/**
* Mouse up action on the workspace.
*/
mouseUp : function()
{
if (this.mouse.selObj)
{
this.mouse.selObj.deselect();
delete this.mouse.selObj;
}
},
/**
* If we are editing any note, stop editing.
*/
editOff : function()
{
if (this.edit)
{
var textbox = get(this.edit.id + 'text');
// check to see if the text changed. add to the
// undo stack if it did.
if (textbox.value != this.edit.text) {
var f = {
title : 'edit note',
utext : this.edit.text,
rtext : textbox.value,
note : this.edit,
undo : function()
{
this.note.setText(this.utext);
},
redo : function()
{
this.note.setText(this.rtext);
}
};
this.history.add(f);
}
this.edit.setText(textbox.value);
this.edit = '';
}
},
/**
* Resort the notes and place topNoteID in front.
* @param {string} topNoteID the name of the note to bring to the front.
*/
reZOrder : function(topNoteID)
{
if (this.notes)
{
// it's not possible to sort an associative array
// so we copy it into a regular array first
var nArray = new Array();
var i = 0;
for (nid in this.notes)
{
nArray[i] = this.notes[nid];
i++;
}
nArray.sort(cmpNotesZ);
// set zIndex based on order
var found = 0;
for (i = 0; i < nArray.length; i++)
{
if (nArray[i].id == topNoteID)
{
found = 1;
get(nArray[i].id).style.zIndex = this.numNotes;
}
else
get(nArray[i].id).style.zIndex = i + 1 - found;
}
}
},
/**
* Generate the xml representation of the workspace (used when saving).
* @type string
*/
toString : function()
{
var ret = ""
},
/**
* Get the next (or previous) note relative to the top note.
* @param {int} diff The offset from the top note (positive mean
* below and negative mean up from the bottom note).
*/
selectNote : function(diff)
{
var max = -1;
var maxNote;
var noteArr = [];
// determine which note is on top
for (var n in this.notes)
{
var cur = parseInt(get(this.notes[n].id).style.zIndex);
if (cur > max)
{
max = cur;
maxNote = noteArr.length;
}
noteArr.push(this.notes[n]);
}
noteArr[ (maxNote+diff+noteArr.length) % noteArr.length ].select();
},
/**
* Load the workspace.
*/
load : function() {
var xmlhttp = getxmlreqobj();
xmlhttp.onreadystatechange = function(xmlhttp) {
if (xmlhttp.responseText) {
eval(xmlhttp.responseText);
}
}
xmlhttp.open('GET', BASEURL + 'load.py?url='
+ escape(hex_md5(document.location.href)),
true);
xmlhttp.send('');
},
/**
* Save the workspace.
*/
save : function()
{
// there have to be changes to the workspace before saving is enabled
// img in top left with animation
var s = get('wngmsave');
if (s.style.display == 'block')
return;
get('wngmstext').innerHTML = 'Saving notes ...';
s.style.display = 'block';
this.editOff();
var xmlhttp = getxmlreqobj();
var self = this;
xmlhttp.onreadystatechange = function(xmlhttp) {
var doc = document.createElement('div');
doc.innerHTML = xmlhttp.responseText;
db("response: " + xmlhttp.responseText);
var success = false;
try {
success = doc && 'ok' == doc.getElementsByTagName('status')[0].getAttribute('value');
} catch (e) {
}
if (success) {
try {
self.changed = false;
self.loadedTime = doc.getElementsByTagName('status')[0].getAttribute('update');
get('wngmstext').innerHTML = 'Success!';
} catch(e) {
}
}
else {
alert(xmlhttp.responseText);
}
};
xmlhttp.open('POST', BASEURL + 'save.py', true);
xmlhttp.send('' + workspace);
}
};
///
/// global methods
///
/**
* Write a message to the debug textarea.
* @param {string} msg the message to display
*/
function db(msg)
{
if (debugOn)
get('debug').value += '\n' + msg;
}
/**
* Initialize the workspace.
*/
function init() {
if (debugOn) {
var d = document.createElement('div');
d.id = 'db';
d.innerHTML = "";
document.body.appendChild(d);
get('debug').value = '';
}
// setup the saving layer
var save = document.createElement('div');
save.id = 'wngmsave';
save.setAttribute('style', 'position:fixed;top:0;left:0;'
+ 'background-color:#ccc;'
+ 'border-right: 1px #000 dashed;'
+ 'border-bottom: 1px #000 dashed;'
+ 'padding: 2px;'
+ 'display: none;');
save.innerHTML = '
Saving ...';
document.body.appendChild(save);
// absolute mouse positions; modified from:
// http://www.web-wise-wizard.com/javascript-tutorials/javascript-mouse-event-handlers.html
workspace.mouse.curPos = new Point();
document.addEventListener('mousemove', function(e)
{
var x, y;
x = e.pageX;
y = e.pageY;
workspace.mouse.update(x, y);
}, true);
document.addEventListener('keydown', function(ev)
{
// the keydown event only seems to be a document event so we
// can't put the event on the div layer. Instead, events
// need to be passed to the note that is being hovered over.
if (workspace.mouse.noteOver)
workspace.mouse.noteOver.keyDown(ev);
if (workspace.shortcuts && !workspace.edit)
{
var key = String.fromCharCode(ev.keyCode);
if ('N' == key && (ev.altKey ||
(navigator.oscpu.indexOf('OS X') > -1 && ev.ctrlKey))) {
workspace.createNote();
}
}
}, true);
/**
* If the user clicks on the background, turn of note editing.
*/
document.body.addEventListener('mousedown', function(ev)
{
workspace.editOff();
}, false);
/**
* @see workspace#mouseUp
*/
document.body.addEventListener('mouseup', function(ev)
{
workspace.mouseUp();
}, false);
/**
* Save before they user leaves.
*/
window.addEventListener('beforeunload', function(ev) {
if (workspace.changed) {
workspace.save(true);
}
}, false);
// load data
workspace.load();
}
/**
* Get the size of the browser.
* @type Point
*/
function getPageSize() {
return new Point(window.innerWidth, window.innerHeight);
}
/**
* Get a reference to an html object given the id.
* @param {string} id id of the object
* @type {HtmlElement}
*/
function get(id) { return document.getElementById(id); }
init();
"
+ "
Saving ...';
document.body.appendChild(save);
// absolute mouse positions; modified from:
// http://www.web-wise-wizard.com/javascript-tutorials/javascript-mouse-event-handlers.html
workspace.mouse.curPos = new Point();
document.addEventListener('mousemove', function(e)
{
var x, y;
x = e.pageX;
y = e.pageY;
workspace.mouse.update(x, y);
}, true);
document.addEventListener('keydown', function(ev)
{
// the keydown event only seems to be a document event so we
// can't put the event on the div layer. Instead, events
// need to be passed to the note that is being hovered over.
if (workspace.mouse.noteOver)
workspace.mouse.noteOver.keyDown(ev);
if (workspace.shortcuts && !workspace.edit)
{
var key = String.fromCharCode(ev.keyCode);
if ('N' == key && (ev.altKey ||
(navigator.oscpu.indexOf('OS X') > -1 && ev.ctrlKey))) {
workspace.createNote();
}
}
}, true);
/**
* If the user clicks on the background, turn of note editing.
*/
document.body.addEventListener('mousedown', function(ev)
{
workspace.editOff();
}, false);
/**
* @see workspace#mouseUp
*/
document.body.addEventListener('mouseup', function(ev)
{
workspace.mouseUp();
}, false);
/**
* Save before they user leaves.
*/
window.addEventListener('beforeunload', function(ev) {
if (workspace.changed) {
workspace.save(true);
}
}, false);
// load data
workspace.load();
}
/**
* Get the size of the browser.
* @type Point
*/
function getPageSize() {
return new Point(window.innerWidth, window.innerHeight);
}
/**
* Get a reference to an html object given the id.
* @param {string} id id of the object
* @type {HtmlElement}
*/
function get(id) { return document.getElementById(id); }
init();