I’ve updated this to use a list of named HTML colors I found on the Web. They’re in alphabetical order, so they don’t look all that coherent. I’ve also tightened up the code to make it run faster.
Here’s how to thread this into Freeway (version 5.6.2 or newer). You will need the Protaculous and External JavaScript Actions, both available at ActionsForge. (Download the latest of each, unless you already have the latest version installed.)
Start with a blank page to begin, and make sure that the CSS Layout button is on. You can style up this page with additional elements after you have gone through these basic steps, but I want you to succeed at first, so you know it works, before you start mixing in other Actions and confusing the issue.
- Apply the External JavaScript Action to the page, use it to link your colors file (which you should name colors.js) to the page, in the Before position.
- Apply Protaculous to the page. Set the Library picker to prototype-packed.
- Somewhere off-screen (like above the visible page on the pasteboard) draw an HTML box to be your large “popover” swatch. (The script will move it into place, you just have to make it look the way you want it to look.) Be sure to give it a solid background color. Use the Padding control in the Inspector to create the amount of inset you want (if you’re trying to copy my example, that’s 5px). Name this box ‘popover’.
- Double-click inside that box and choose Insert / HTML Item from the main menu. Drag the bottom of the inline HTML box to be the size you want the color swatch to be. You can set a color for design purposes, it will be overridden by the script later.
- Click elsewhere, then double-click in your example swatch again and type a return followed by a line of placeholder text for your color name. Be sure to style this text using a paragraph style that you make yourself in the Styles palette. It has to be a paragraph style so it won’t have any inline tags in it (these would get wiped out by the script, leaving unstyled text).
- Draw another HTML box on the page that is large enough to hold your swatches. You don’t need to actually create the swatches inside it, the script will do that. Name this box ‘swatches’. In the Inspector, set the Overflow attribute for this box to Hidden.
- Use the Page / HTML Markup dialog in the Before section to add the following CSS to the page:
<style type="text/css">
#swatches div {
width: 64px;
height: 64px;
float: left;
border: 1px solid #ccc;
margin: 0 5px 5px 0;
padding: 0;
}
</style>
- Click on the Protaculous tab in the Actions palette, and click on the top Function Body button. Paste in the following script:
var popover = $('popover').hide().observe(
'mouseleave',
function(){ this.hide(); }
);
var example = popover.down('div');
var caption = popover.down('p');
var box = $('swatches');
colors.each(function(color){
var swatch = new Element('div');
swatch.setStyle('background-color: #' + $H(color).keys().first());
swatch.store('caption', $H(color).values().first());
box.insert(swatch);
});
box.on('mouseover','#swatches > div', function(evt, elm){
example.setStyle('background-color: ' + elm.getStyle('background-color'));
caption.update(elm.retrieve('caption'));
popover.clonePosition(elm, {
offsetTop: -25,
offsetLeft: -22,
setWidth: false,
setHeight: false
}).show();
});
Preview into a browser, and see what happens. If you’ve followed these directions closely, you should see something similar to my example. Things you can start tinkering with after the page works:
- The size of the swatches. Remember that they have to be large enough to “peek out” from the left and right of the popover overlay, so you can switch from one color to the next by swiping the cursor over the grid.
- The amount of the
offsetTop and offsetLeft attributes in the JavaScript. This is related to the size of your swatches, and the size of your popover. Fiddle with these values, which are the number of pixels up and to the left of the top-left corner of the swatch that the popover is related to. I fiddled to get these, based on the dimensions in my example, so that the popover would be visually centered over its parent swatch.
- Add the CSS3 Shadow Action to the popover to give it some lift above the grid.
Walter
On Nov 17, 2012, at 1:41 PM, Walter Lee Davis wrote:
Yes. I have the rest of it working here:
Mr. Chips
This is just using the same five colors over and over, but it’s working in terms of layout.
About that layout: this page is currently hand-coded, but in a way that resembles how Freeway would draw a page. I have to run out right now, but I’ll try to get you some instructions for threading this all together in Freeway later today.
Walter
On Nov 17, 2012, at 1:14 PM, Roy H wrote:
Hey Walter - Just wanted to make sure I’ve got the format correct before I jump into it…
var colors = $A([
{‘84472F’: ‘BH005 Fall Back’},
{‘AF694B’: ‘BH107 Cream soda’},
{‘873A26’: ‘FC063 Western Setting’} ]);
So if I understand you correctly, if I wanted “Cream Soda” to be the first color in the series I would reorganize the database like this:
var colors = $A([
{‘AF694B’: ‘BH107 Cream soda’},
{‘84472F’: ‘BH005 Fall Back’},
{‘873A26’: ‘FC063 Western Setting’} ]);
Also, I don’t have all the colors I want to use ready yet but I should be able to add or remove colors from the database at any point, no?
This is incredibly helpful.
Thanks,
Roy
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options