Ok ppl. I got some spare time and decided to do something usefull…
I changed my save and delete methods of the photo notes to use mootools instead o prototype.
Why??
Many reasons, but the main one is that I’m kind of in love with mootools at this moment. Not that I dont like prototype anymore, because I still love it, but mootools is kicking their asses big time and can be compressed, besides getting a long with most of the code out there…
so, tonight I’m going to post the new version, with some other tweaks, like hiding the notes when the mouse is out of the image.
Laterz
First of all, I’m sorry, but I didn’t have the time to stop and write. Besides, my internet connection at the new apartment still sucks.
A long time ago, I came across the Dusty Davidson’s PhotoNotes library. Which in his words is:
Photo Notes is a JavaScript implementation of photo “annotations”.
Ok, after downloading it and having a lot of fun, I noted that the save function was missing and decided to create one.
Probably there is more than 100 ways of doing this better, since I made it really running, just trying to help all the ppl who commented asking for it. Hope it helps somehow… at least to give you ideas on how to do it better.
As soon as I get the time, I’ll do it better.
But here follows
my solution.
First of all, download and install the photonotes library, following Dusty’s instructions.
also, install a copy of the Prototype js framework
Run all the tests you want, make sure it works in your environment.
STEP ONE.
After that, open the photonotes.v1.js file and locate your save function (on my file, it was located around line 362)
Add the following piece of code on the top of the function:
var oldNote = currentNote; //Cloning the note so we can revert
currentNote.Save(); // Save it so the text is already available
After that, you will change the line:
if(res)
for
if(res > 0)
and add this two lines on the “ELSE” part of the function, bellow the alert(‘error blablabla’);
currentNote = oldNote(); //REVERT IN CASE OF ERROR SAVING NOTE
currentNote.Cancel();
Also, find the “PhotoNote.prototype.Save” (mine is around line #160) and add the following line before the “Unselect” command:
if(this.selected)
Thats it. Save this file. or download my version."
STEP TWO.
Add this script to the page you want to have the saving feature running on. (I added it to the page because I didnt want to change Dusty’s files too much, but I’ll make another version of everything including all in the same file, as soon as I have the time to do it).
<script>
function saveNoteDb(note){
note.Save();
var url = 'saveNote.php?text='+ encodeURIComponent(note.text)+' &width=' + note.rect.width + '&height=' + note.rect.height + '&left=' +note.rect.left+'&top=' + note.rect.top +'&id='+note.id ;
var retorno = new Ajax.Request(url, {
method: 'get',
onSuccess: function(transport) {
var notice = $('divResultado');
if (transport.responseText > 0)
{
notice.update('Note saved!').setStyle({ background: '#dfd' });
note.id = transport.responseText;
}
else
{
notice.update('Note not saved!<br>'+transport.responseText).setStyle({ background: '#fdd' });
}
}
});
return 1;
}
function deleteNoteDb(note){
var url = 'deleteNote.php?id='+note.id ;
var retorno = new Ajax.Request(url, {
method: 'get',
onSuccess: function(transport) {
var notice = $('divResultado');
if (transport.responseText > 0)
{
notice.update('Note Deleted!').setStyle({ background: '#dfd' });
note.Delete();
}
else
{
notice.update('Note not deleted!<br>').setStyle({ background: '#fdd' });
}
}
});
return 1;
}
</script>
STEP THREE
Make the “onSave” and “onDelete” methods of your photonote look like the following:
yourNote.onsave = function (note) { return saveNoteDb(note); };
yourNote.ondelete = function (note) { return deleteNoteDb(note);};
STEP FOUR
Download this zip file with the php files I used to interact with the DB.
So, I decided to keep track of what I do for a living, no matter if its in the personal living or the professional living…
I’m pretty sure that I won’t get past the first month of writing everyday, but who knows… maybe this helps me get through the loneness when Brenda goes back to Brazil.
Ok. Now I have to get back to work. so I have the time to publish my first article today, which will be “How to change the PhotoNotes library to save items to database”.
Laterz
