Hello all, On Sun, 2008-09-21 at 16:03 +0200, Uli Fouquet wrote:
> Too long ;-) I tried to write a little plugin myself just to support > some basic effects. It turned out to be quite simple and worked like a > charm, although I am sure, that some real JavaScript gurus could improve > it a lot (and there was nothing complicated to implement ;-). > > I'd now like to share the code with others and publish it in some > repository. Two problems have to be solved before: > > (1) I need a better name. Currently the package is called > kss.plugin.effects, which is not very specific nor does it express, that > the package is currently for Zope 3 (Grok to be more specific) only. It > depends on `megrok.kss`. For use with Zope 2 (Plone 3) possibly only > some minor modification would be necessary, for use with django or other > frameworks, probably much more changes would be needed (but django > already has some srcipt.aculo.us-KSS integration, right?). So at least > `megrok`, `zope` or `z3c` should appear in the package name. Maybe > `megrok.kss.scriptaculous`? That's pretty long, but, well... I personally find the scipt.aculo.us API very unflexible. That's why, a while ago, I wrote a not-so-simple plugin to add the YAHOO UI animation package to KSS. It's substantially feature complete, although there are missing demos for some animations. The plugin was mostly designed to be flexible yet easy enough to use so that a webdesigner could handle the task. It defines a set of basic animations that, by tweaking parameters, allows us to have all the proper effects. To give a quick example, the "fade" effect is achieved as follows (taken from the demos, file http://bazaar.launchpad.net/~shywolf9982/kss.animation.yui/alpha/annotate/21?file_id=style.kss-20080625194839-qxmawyrjiwip2xwc-5): #fade-start:click { evt-click-preventdefault: true; action-client: animationStyle; animationStyle-kssSelector: htmlid('fade-test-img'); animationStyle-attributes: 'opacity'; animationStyle-values: 0.0; animationStyle-id: 'fade'; animationStyle-duration: 2.0; animationStyle-method: 'easeOut'; } Basically, it has an <a> element, which when clicked triggers the fade (hence the need for the kssSelector attribute). It uses the Style animation, which modifies style attributes (the names are normalized through browsers). It sets the attribute ``opacity`` to ``0.0``, in two seconds and using a easeOut transition (the frames goes faster at the beginning slowing down at the end). This was just to give a very quick example of what can be achieved: you can read the whole documentation of the plugin at http://bazaar.launchpad.net/~shywolf9982/kss.animation.yui/alpha/annotate/21?file_id=readme.txt-20080609140138-silwxs5g2adzlc51-3 The project is hosted on launchpad at https://launchpad.net/kss.animation.yui There are however some problems that have to be fixed with the current code: * Testing with all browsers (it worked in Firefox 3) * Cutting down and refactoring some code (sometimes I indulged in copy paste) * Documenting it better * Finding a way to properly compose motion and resize animation * Smooth out corner cases of effects chaining Right now, I had defined the KSS events animation-start, animation-tween and animation complete: respectively an event fired at the start of the animation, on frame "rendering" and on animation ending. To define which animation we are chaining to, we have an event parameter (again from the demos): /** * Since during the resize of an image we lose a lot of quality, we subscribe * an event to happen on the end of the animation that swaps the src attribute * so we get the high quality image at the end without the high loss of * performance we will have if we set it before: it is worth noting you have to * do the opposite for shrinking */ #resize-image-thumb:animation-complete { evt-animation-complete-animationId: 'animation-1'; action-client: setAttribute; setAttribute-name: 'src'; setAttribute-value: '++resource++image-1.jpg'; } but that is rather unflexible, because it chains the animation to a document element. I hope that someone would find this code useful, as it turned out for me to be mostly an exercise to properly learn Javascript (people suddenly stopped to ask me to implement fancy effects), and I'm very much open to contributions, suggestions and critics.
_______________________________________________ Kss-devel mailing list Kss-devel@codespeak.net http://codespeak.net/mailman/listinfo/kss-devel
