Flickr Style Image Note Part 1: Hacking the YUI Image Cropper Tool
I was thinking about how to go about building the image noting service built into flickr as seen above when I ran across the YUI Image Cropper Tool, which contained most of the functionality I wanted. You can view a functional example on YUI’s page at: http://developer.yahoo.com/yui/examples/imagecropper/feedback_crop.html
We are going to base our example from this, and contunie to build onto it throughout many articles. In this article we will focus on creating the form that moves with the crop tool.
The first step that comes to mind is attaching a form to the selection tool. The first thing to do was to check to see if the crop too is rendered. You can check this by checking to see if the crop tools onready event has fired:
crop.on('contentReady', yourClosure(){});
The second step is fairly straight forward and to create the div with an id and insert the related html:
var tempnod=document.createElement('div');
tempnod.id='vote';
tempnoeinnerHTML='<input type="text" id="comment" value="Comment Here!!">
<br><button id="save" type="button">Save</button>
<button id="cancel" type="button">Cancel</button>';
Dom.get('yui_img_wrap').appendChild(tempnod);
The Third step is to add the event listeners for the save and cancel buttons:
Event.on('save','click',saveFun);
Event.on('cancel','click',cancelFun);
The forth step set the style dynamically in the image cropper’s move event in order to position the form with the crop tool. Please note the additon of 10 pixels as a bit of buffer space.:
Dom.setStyle('vote','left',region.left+'px');
Dom.setStyle('vote','top',(region.top+region.height+10)+'px');
Don’t forget to set up your styles to reflect your changes and set the orginal cordinates of your comment box:
#vote {
position: absolute;
left:20px;
top:125px;
}
#comment{
margin:2px;
width:200px;
background: #FFFFD3;
text-align:center;
}
#save{
background: #0063DC;
color:#fff;
font-weight:bold;
}
#cancel{
background: #DDD;
color:#666;
font-weight:bold;
}
Feel free to check out a working example at: http://www.zomie.com/examples/imagecomment.html
Later on I will come up with something for the save and cancel functions…