--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/stylesheet/stylesheet-theme.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,323 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Example: Adjusting a Page Theme on the Fly</title>
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
+ <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
+ <link rel="stylesheet" href="../assets/css/main.css">
+ <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
+ <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
+ <script src="../../build/yui/yui-min.js"></script>
+
+</head>
+<body>
+<!--
+<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+-->
+<div id="doc">
+ <div id="hd">
+ <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
+ </div>
+
+
+ <h1>Example: Adjusting a Page Theme on the Fly</h1>
+ <div class="yui3-g">
+ <div class="yui3-u-3-4">
+ <div id="main">
+ <div class="content"><div class="intro">
+ <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>
+
+ <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. <code>#123456</code>, <code>#135</code>, <code>rgb(0,0,0)</code>, or <code>red</code>).</p>
+</div>
+
+<div class="example newwindow">
+ <a href="stylesheet-theme-example.html" target="_blank" class="button">
+ View Example in New Window
+ </a>
+</div>
+
+<h3 class="first">Full code listing</h3>
+<h4 id="markup">Markup</h4>
+<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>
+
+<pre class="code prettyprint"><div id="form_container">
+ <form class="yui3-widget-bd" id="theme_form" action="#" method="get">
+ <fieldset>
+ <h3>Update Theme</h3>
+ <label for="font_size">Font size:</label>
+ <input type="text" size="3" id="font_size" value="16px">
+
+ <label for="heading_color">Heading color:</label>
+ <input type="text" size="12" id="heading_color" value="#005A9C">
+
+ <label for="link_hover">Link hover backgound:</label>
+ <input type="text" size="12" id="link_hover" value="#ffa">
+ </fieldset>
+ <input type="submit">
+ </form>
+</div></pre>
+
+
+<h4>JavaScript</h4>
+
+<pre class="code prettyprint"><script src="../../build/yui/yui-min.js"></script>
+<script>
+// Create a new YUI instance, requiring stylesheet, overlay, slider, and the
+// dd-plugin to make the overlay draggable
+YUI().use("stylesheet","overlay","slider","dd-plugin", function (Y) {
+
+ var myStyleSheet = new Y.StyleSheet(),
+ overlayContent = Y.one('#form_container'),
+ overlay,
+ slider,
+ slider_container,
+ fontSizeInput,
+
+ // Create the Overlay, using the form container as the contentBox.
+ // The form is assigned a class yui-widget-bd that will be automatically
+ // discovered by Overlay to populate the Overlay's body section.
+ // The overlay is positioned in the top right corner, but made draggable
+ // using Y.Plugin.Drag, provided by the dd-plugin module.
+ overlay = new Y.Overlay({
+ srcNode: overlayContent,
+ alignOn: [],
+ width: '225px',
+ align: { points: [ Y.WidgetPositionAlign.TR, Y.WidgetPositionAlign.TR ] },
+ plugins: [ Y.Plugin.Drag ]
+ }).render();
+
+ // Slider needs a parent element to have the sam skin class for UI skinning
+ overlayContent.addClass('yui3-skin-sam');
+
+ // Progressively enhance the font-size input with a Slider
+ fontSizeInput = Y.one('#font_size');
+ fontSizeInput.set('type','hidden');
+ fontSizeInput.get('parentNode').insertBefore(
+ Y.Node.create('6 <span></span> 36'),
+ fontSizeInput);
+
+ slider_container = fontSizeInput.previous( "span" );
+
+ // Create a Slider to contain font size between 6px and 36px, using the
+ // page's current font size as the initial value.
+ // Set up an event subscriber during construction to update the replaced
+ // input field's value and apply the change to the StyleSheet
+ slider = new Y.Slider({
+ length: '100px',
+ min: 6,
+ max: 36,
+ value: parseInt(Y.one('body').getStyle('fontSize')) || 13,
+ after: {
+ valueChange: function (e) {
+ var size = e.newVal + 'px';
+
+ this.thumb.set('title', size);
+ fontSizeInput.set('value', size);
+
+ myStyleSheet.set('body', { fontSize: size });
+ }
+ }
+ }).render( slider_container );
+
+ // The color inputs are assigned keyup listeners that will update the
+ // StyleSheet if the current input value is a valid CSS color value
+
+ // The heading input affects all h1s, h2, and h3s
+ Y.on('keyup', function (e) {
+ var color = this.get('value');
+
+ if (isValidColor(color)) {
+ myStyleSheet.set('h1, h2, h3', { color: color });
+ }
+ }, '#heading_color');
+
+ // The link hover affects the background color of links when they are
+ // hovered. There is no way other than via stylesheet modification to
+ // change pseudo-class styles.
+ Y.on('keyup', function (e) {
+ var color = this.get('value');
+
+ if (isValidColor(color)) {
+ myStyleSheet.set('a:hover', { backgroundColor: color });
+ }
+ }, '#link_hover');
+
+ // Progressive form enhancement complete, now prevent the form from
+ // submitting normally.
+ Y.one('#theme_form input[type=submit]').remove();
+
+ Y.on('submit', function (e) {
+ e.halt();
+ }, '#theme_form');
+
+ // A rudimentary validator to make sure we're not trying to set
+ // invalid color values in StyleSheet.
+ function isValidColor(v) {
+ return /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(v) ||
+ /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(v) ||
+ /^[a-z]{3,}$/i.test(v);
+ }
+
+});
+</script>
+
+
+<script>
+YUI.Env.Tests = {
+ examples: [],
+ project: '../assets',
+ assets: '../assets/stylesheet',
+ name: 'stylesheet-theme',
+ title: 'Adjusting a Page Theme on the Fly',
+ newWindow: 'true',
+ auto: false
+};
+YUI.Env.Tests.examples.push('stylesheet-theme');
+YUI.Env.Tests.examples.push('photo-browser');
+
+</script>
+<script src="../assets/yui/test-runner.js"></script></pre>
+
+
+<h4>CSS</h4>
+<p>This is the CSS added to the page to skin the Overlay and its content.</p>
+
+<pre class="code prettyprint"><style>
+/* For supporting browsers, the overlay is rendered semi-transparent with
+ * fancy rounded corners */
+.yui3-overlay {
+ background: rgba(128,128,128,0.3);
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ padding: 7px;
+ cursor: move;
+}
+.yui3-overlay-content {
+ background: rgba(205,205,205,0.3);
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ padding: 1px;
+}
+.yui3-overlay form {
+ background: #f2fbff url(../assets/stylesheet/gradient-promo.png) repeat-x scroll 0 0;
+ border: 2px solid #fff;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ margin: 0;
+ padding: 0;
+ font-size: 13px;
+}
+.yui3-overlay fieldset {
+ border: 1px solid #cde;
+ -moz-border-radius: 10px;
+ -webkit-border-radius: 10px;
+ border-radius: 10px;
+ margin: 0;
+ padding: 20px;
+}
+.yui3-overlay h3 {
+ border-bottom: 2px solid #fff;
+ color: #479;
+ background: transparent;
+ margin: 0;
+ font-size: 175%;
+}
+.yui3-overlay label {
+ display: block;
+ margin: 1.3em 0 0.5ex;
+ font-weight: bold;
+ color: #003;
+}
+.yui3-overlay p {
+ margin: 2em 0 0;
+}
+/* override the move cursor for the Slider */
+.yui3-overlay .yui3-slider:hover {
+ cursor: default;
+}
+</style></pre>
+
+
+</div>
+ </div>
+ </div>
+
+ <div class="yui3-u-1-4">
+ <div class="sidebar">
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+ <li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input">
+ <a href="stylesheet-theme.html">Adjusting a Page Theme on the Fly</a>
+ </li>
+
+
+
+
+ </ul>
+ </div>
+ </div>
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples That Use This Component</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+
+
+ <li data-description="Example Photo Browser application.">
+ <a href="../dd/photo-browser.html">Photo Browser</a>
+ </li>
+
+
+ </ul>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+</div>
+
+<script src="../assets/vendor/prettify/prettify-min.js"></script>
+<script>prettyPrint();</script>
+
+<script>
+YUI.Env.Tests = {
+ examples: [],
+ project: '../assets',
+ assets: '../assets/stylesheet',
+ name: 'stylesheet-theme',
+ title: 'Adjusting a Page Theme on the Fly',
+ newWindow: 'true',
+ auto: false
+};
+YUI.Env.Tests.examples.push('stylesheet-theme');
+YUI.Env.Tests.examples.push('photo-browser');
+
+</script>
+<script src="../assets/yui/test-runner.js"></script>
+
+
+
+</body>
+</html>