stylesheet-theme.mustache revision d9ebfd930512585c2a500e2aea7a6a96578df907
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly<div class="intro">
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly <p>In this example, we'll use a snapshot of the <a href="http://www.w3.org/TR/html401/present/styles.html">W3C HTML 4.01 specification for Style Sheets</a> and add a custom dynamic StyleSheet to apply some color and font size changes.</p>
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly <p>A Progressive enhancement strategy is used to extract a static form on the page into a draggable Overlay. Additionally, one of the form inputs is replaced with a Slider. Enter any valid CSS color value into the other inputs (e.g. `#123456`, `#135`, `rgb(0,0,0)`, or `red`).</p>
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly<div class="example">
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly {{>stylesheet-theme-source}}
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly<h3 class="first">Full code listing</h3>
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly<h4 id="markup">Markup</h4>
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly<p>The markup as stated above is a local snapshot of the HTML 4.01 spec, but with the following markup added to the end of the <code><body></code> to show a progressive enhancement model.</p>
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly<!-- The original body content is above -->
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly<div id="form_container">
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly <form class="yui3-widget-bd" id="theme_form" action="#" method="get">
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly <h3>Update Theme</h3>
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly <label for="font_size">Font size:</label>
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly <input type="text" size="3" id="font_size" value="16px">
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly <label for="heading_color">Heading color:</label>
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly <input type="text" size="12" id="heading_color" value="#005A9C">
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly <label for="link_hover">Link hover backgound:</label>
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly <input type="text" size="12" id="link_hover" value="#ffa">
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly <input type="submit">
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly<h4>JavaScript</h4>
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly// Create a new YUI instance, requiring stylesheet, overlay, slider, and the
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly// dd-plugin to make the overlay draggable
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny DonnellyYUI().use("stylesheet","overlay","slider","dd-plugin", function (Y) {
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly var myStyleSheet = new Y.StyleSheet(),
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly overlayContent = Y.one('#form_container'),
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly slider_container,
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly fontSizeInput,
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // Create the Overlay, using the form container as the contentBox.
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // The form is assigned a class yui-widget-bd that will be automatically
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // discovered by Overlay to populate the Overlay's body section.
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // The overlay is positioned in the top right corner, but made draggable
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // using Y.Plugin.Drag, provided by the dd-plugin module.
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly overlay = new Y.Overlay({
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly srcNode: overlayContent,
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly width: '225px',
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly align: { points: [ Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.TR ] },
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // Slider needs a parent element to have the sam skin class for UI skinning
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // Progressively enhance the font-size input with a Slider
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly fontSizeInput = Y.one('#font_size');
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly fontSizeInput.set('type','hidden');
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly fontSizeInput.get('parentNode').insertBefore(
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly Y.Node.create('6 <span></span> 36'),
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly fontSizeInput);
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly slider_container = fontSizeInput.previous( "span" );
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // Create a Slider to contain font size between 6px and 36px, using the
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // page's current font size as the initial value.
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // Set up an event subscriber during construction to update the replaced
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // input field's value and apply the change to the StyleSheet
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly slider = new Y.Slider({
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly length: '100px',
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly value: parseInt(Y.one('body').getStyle('fontSize')) || 13,
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly valueChange: function (e) {
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly var size = e.newVal + 'px';
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly this.thumb.set('title', size);
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly myStyleSheet.set('body', { fontSize: size });
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly }).render( slider_container );
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // The color inputs are assigned keyup listeners that will update the
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // StyleSheet if the current input value is a valid CSS color value
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // The heading input affects all h1s, h2, and h3s
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly Y.on('keyup', function (e) {
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly var color = this.get('value');
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly if (isValidColor(color)) {
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly myStyleSheet.set('h1, h2, h3', { color: color });
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly }, '#heading_color');
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // The link hover affects the background color of links when they are
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // hovered. There is no way other than via stylesheet modification to
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // change pseudo-class styles.
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly Y.on('keyup', function (e) {
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly var color = this.get('value');
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly if (isValidColor(color)) {
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly myStyleSheet.set('a:hover', { backgroundColor: color });
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly }, '#link_hover');
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // Progressive form enhancement complete, now prevent the form from
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // submitting normally.
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly Y.on('submit', function (e) {
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly }, '#theme_form');
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // A rudimentary validator to make sure we're not trying to set
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly // invalid color values in StyleSheet.
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly function isValidColor(v) {
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly return /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(v) ||
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(v) ||
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly /^[a-z]{3,}$/i.test(v);
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly<p>This is the CSS added to the page to skin the Overlay and its content.</p>
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly/* For supporting browsers, the overlay is rendered semi-transparent with
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly * fancy rounded corners */
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly.yui3-overlay {
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly background: rgba(128,128,128,0.3);
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly -moz-border-radius: 10px;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly -webkit-border-radius: 10px;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly border-radius: 10px;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly padding: 7px;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly cursor: move;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly.yui3-overlay-content {
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly background: rgba(205,205,205,0.3);
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly -moz-border-radius: 10px;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly -webkit-border-radius: 10px;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly border-radius: 10px;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly padding: 1px;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly.yui3-overlay form {
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly background: #f2fbff url(gradient-promo.png) repeat-x scroll 0 0;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly border: 2px solid #fff;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly -moz-border-radius: 10px;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly -webkit-border-radius: 10px;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly border-radius: 10px;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly font-size: 13px;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly.yui3-overlay fieldset {
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly border: 1px solid #bcd;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly -moz-border-radius: 10px;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly -webkit-border-radius: 10px;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly border-radius: 10px;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly padding: 20px;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly.yui3-overlay h3 {
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly border-bottom: 2px solid #fff;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly background: transparent;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly font-size: 175%;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly.yui3-overlay label {
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly display: block;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly margin: 1.3em 0 0.5ex;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly font-weight: bold;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly.yui3-overlay p {
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly margin: 2em 0 0;
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly/* override the move cursor for the Slider */
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly.yui3-overlay .yui3-slider:hover {
d9ebfd930512585c2a500e2aea7a6a96578df907Jenny Donnelly cursor: default;