This one started off as a simple task I had to do, and ended up being rather complicated.
I had to make icons placed on a skuid page redirect, when clicked, to another page.
Simple enough right? Well I would have liked to use an image component, and run Action Framework actions when the image was clicked, however the image component can’t currently do that. I suppose I could have given the images a special class and jQueried an event handler onto them, but that would have been messy…
So I did it initially with a stock Template component, with the “Allow HTML” option checked, adding a href around my img tag pointing to my page’s URL. I was satisfied to some extent with that. There was quite a bit of HTML clutter in the template though, and despite the href giving me the nice mouse-over indicator in chrome like so:
(bottom left of browser window when you hover over a link), the whole thing wasn’t very declarative, and still didn’t accommodate Action Framework Events.
So, simply, I made an Action Framework-able Template Component!
It assumes that if you are firing Action Framework Events with a mouseClick that you want the resulting template to have the
cursor: pointer;
CSS set to make it look like a clickable URL.
DEMO:
Part 1: the builder!
Part 2: the runtime!
Please visit https://github.com/mBlazonry/mBlazonrySupport for installation instructions,
updated instructions, new versions of this and other components!
Cheers, A.
