It’s a while since our last post from RailsConf, in the meantime we worked on our last fresh application: whodo.es, answering to every feedback email we received and trying to fix all bugs as soon as they appear.
Something around two weeks ago we were in Ballroom 201 of the Oregon Convention Center listening to the amazing Thomas Fuchs tutorial. I was deeply inspired from that speech so I decided to do something related to the conference using Prototype and Script.aculo.us.
Using one of the examples provided by Thomas I create an effect that get all the elements inside a target div and put them in a circle around the parent div.
We’ve called this experiment IFlick.it and while working on it we were enlightened by a few future improvements that we’re going to implement in our spare time.
If you are interested here is the code of the Effect.Circle; it’s still a bit rough at the moment but it does its job.
Effect.Circle = Class.create();
Object.extend(Object.extend(Effect.Circle.prototype,Effect.Base.prototype), {
initialize: function(element) {
this.element = $(element);
this.start(arguments[1] || {});
},
setup: function() {
this.images = this.element.childElements();
counters = this.images.length
radiant = 360/counters;
this.r = (((this.element.getDimensions().width >
this.element.getDimensions().height) ? this.element.getDimensions().height :
this.element.getDimensions().width) / 2);
this.radiants = new Array(counters);
for(x=1;x<=counters;x++){
this.radiants[x] = Math.round(360 – (radiant * x));
}
/* Let’s found the dimensions of the inner elements */
this.size = Math.round(((Math.sin(radiant * Math.PI/180)*this.r)/5) * 4)-1;
this.hsize = Math.round(this.size/2);
},
update: function(position) {
x = 1;
rs = this.radiants;
ra = this.r;
hs = this.hsize;
s = this.size;
this.images.each(function(img,index){
img.setStyle({
top: Math.round((Math.sin(rs[x] * Math.PI/180)* ra) + ra – this.hs) + ‘px’,
left: Math.round((Math.cos(rs[x] * Math.PI/180)* ra) + ra – this.hs) + ‘px’,
width: s + ‘px’,
height: s + ‘px’
});
rs[x] = rs[x] + 0.1;
if (rs[x] == 360){
rs[x] = 1;
}
x = x+1;
});
}
});
