Some time ago, after having played a bit with Balsamiq I wanted to try to implement with React and Flux the basics of a simple editing tool and so this project was born.
Unfortunately, at some point I had no more enough time to continue, but it was very interesting, allowing me to mix some cool things like
react, flux, svg(the design objects are rendered with SVG) and other topics.
There’s no demo because I had to stop the development in the middle of the implementation of some critical features(proper scaling of multiple selected objects) but the source is on github.
- Demo (If the app is loading slowly just make a refresh because it could be in the idle state on Openshift)
- Source code on GitHub
Just added an expand/collapse animation to the voters widget body.
To accomplish this a CSS transition on the max-height property was used.
I’ve had to make some changes to the Body component to wait for the end of this transition before loading the visible avatars, to have the container viewport reached its final hight.
Notice how the vertical scrollbar track is now always present even when it would not be needed. This is to prevent visual glitches for few-votes widgets where the scrolling is it not needed.
Another point to note is how the max-height transition to 50vh causes a too fast expansion on low-votes widgets, typically when there is only a row of avatars.
Additionally, it was added a zoom transition when hovering on the avatars(the images are very tiny though, 30px, so the zoomed version is a bit blurry) and now the voter profile page opens in a new tab.
Demo (If the app is loading slowly just make a refresh because it could be in the idle state on Openshift)
- Source code on GitHub
Another addiction for the card page sidebar. Now, if the card has votes, the entire list of voters can be consulted.
Two forms of lazy/on-demand data fetching was employed.
First, voters data is not fetched until the widget is expanded(the number of votes comes down with the other card data).
Second, for the avatar images. Some cards can have a massive number of voters(see links below) so this would mean asking the browser to throttle the loading of hundres of (tiny) images, even if they will not never be watched by the user because they are beyond the fold of the widget.
So avatar images are only requested when they ‘enter’ in the widget vieport during scrolling.
This feature is implemented in the Body component, a subcomponent of the Voters component that handles the rendering of the voters. The core of the code is in the uncover() method, invoked when the voters are displayed the first time and then on every container scroll (debounced)event, where unloaded avatars vertical positions are compared with the new y coordinate of the bottom of the viewport.
This uncovering process is performed even on the window resize event simply because the widget body has a CSS max-height specified with viewport coordinates(vh).
The widget header layout is implemented with Flexbox.
Here are some testing cards: