In this series of posts I’ll try to explain how you can improve your Raphael.js custom code by extracting parts of it into Raphael’s primitives that can be later instantiated and used in your or other people projects.
About the problem
Its a good practice to always have a good start when developing things. By that I mean it always good to take a bit more time to consider how to architect the solution for the problem you are fixing so that you can later easily refer to it and maybe potentially reuse it in some of your further projects. Doing so usually brings up a subject of introducing OO design and modularization to your applications.
I wanted to show you how you might improve your Raphael.js code by factoring out a thing that might be reusable in a separate Raphael component (or primitive) that can be later easily used anywhere by simply including and instantiating it.
What we would ideally want to have from our Outfit Editor is:
- That it offers a list of items to select from in a separate section/area (‘Carousel‘)
- That we could pick up each item and bring it to the ‘Editing Stage‘ – place where we bring in all the items that we like, so that we can combine them, see how they fit together, change tier sizes, dump them if we don’t like them…
- That each item should be draggable.
- Within the Carousel we should be to able to visually distinguish outfit editor items that are already selected
- Items brought to the Editing Stage – Active Items, should be restricted to only be dragged within the Editing Stage so that they are still partially visible when we try to drag them out.
Here is the image of how our final thing will look like:
We will touch on following technologies in this post:
Sit tight and please send some feedback ( motivate me to do more )!