--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui3.0.0/examples/attribute/attribute-getset_clean.html Mon Nov 23 15:14:29 2009 +0100
@@ -0,0 +1,410 @@
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Attribute Getters, Setters and Validators</title>
+
+<style type="text/css">
+/*margin and padding on body element
+ can introduce errors in determining
+ element position and are not recommended;
+ we turn them off as a foundation for YUI
+ CSS treatments. */
+body {
+ margin:0;
+ padding:0;
+}
+</style>
+
+<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
+<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
+
+
+<!--begin custom header content for this example-->
+<style type="text/css">
+
+ #boxParent {
+ overflow:hidden;
+ background-color:#004c6d;
+ height:25em;
+ padding:10px;
+ margin:5px;
+ }
+
+ #boxParent .yui-box p, #attrs p {
+ margin:2px;
+ }
+
+ .attrs {
+ border:1px solid #000;
+ background-color:#cdcdcd;
+ margin:5px;
+ }
+
+ .attrs .header {
+ font-weight:bold;
+ background-color:#aaa;
+ padding:5px;
+ }
+
+ .attrs .body {
+ padding:10px;
+ }
+
+ .attrs .body .hints li {
+ padding-bottom:10px;
+ }
+
+ .attrs .footer {
+ padding:0px 20px 10px 20px;
+ }
+
+ .attrs label {
+ font-weight:bold;
+ display:block;
+ float:left;
+ width:4em;
+ }
+
+ .attrs .hint {
+ font-size:85%;
+ color: #004c6d;
+ }
+
+ .attrs .fields {
+ border-top:1px solid #aaa;
+ padding:10px;
+ }
+
+ .yui-box {
+ padding:5px;
+ border:1px solid #000;
+ width:8em;
+ height:8em;
+ text-align:center;
+ color:#000;
+ }
+
+ .yui-box .color, .yui-box .coord {
+ font-family:courier;
+ }
+
+</style>
+
+<!--end custom header content for this example-->
+
+</head>
+
+<body class=" yui-skin-sam">
+
+<h1>Attribute Getters, Setters and Validators</h1>
+
+<div class="exampleIntro">
+ The <a href="attribute-basic.html">"Basic Attribute Configuration" example</a> shows how you can add attributes to a host class, and set up default values for them using the attribute configuration object. This example explores how you can configure <code>setter</code>, <code>getter</code> and <code>validator</code> functions for individual attributes, which can be used to modify or normalize attribute values during get and set invocations, and prevent invalid values from being stored.
+
+
+
+</div>
+
+<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
+
+<div id="attrs" class="attrs">
+ <div class="header">Enter new values and click the "Set" buttons</div>
+ <div class="body">
+ <ul class="hints">
+ <li>Try entering valid and invalid values for x, y; or values which attempt to position the box outside it's parent (parent box co-ordinates are displayed next to the text box).</li>
+ <li>Try entering rgb, hex or keyword color values [ <code>rgb(255,0,0)</code>, <code>#ff0000</code>, <code>red</code> ].</li>
+ </ul>
+ <div class="fields">
+ <p>
+ <label for="x">x:</label>
+ <input type="text" name="x" id="x" />
+ <button type="button" class="action" id="setX">Set</button>
+ <span id="xhint" class="hint"></span>
+ </p>
+ <p>
+ <label for="y">y:</label>
+ <input type="text" name="y" id="y" />
+ <button type="button" class="action" id="setY">Set</button>
+ <span id="yhint" class="hint"></span>
+ </p>
+ <p>
+ <label for="color">color:</label>
+ <input type="text" name="color" id="color" />
+ <button type="button" class="action" id="setColor">Set</button>
+ </p>
+ </div>
+ </div>
+ <div class="footer">
+ <button type="button" class="action" id="setXY">Set XY</button>
+ <button type="button" class="action" id="setAll">Set All</button>
+ <button type="button" class="action" id="getAll">Get All</button>
+ </div>
+</div>
+
+<div id="boxParent"></div>
+
+<script type="text/javascript">
+// Get a new YUI instance
+YUI({base:"../../build/", timeout: 10000}).use("node", "attribute", function(Y) {
+
+ var boxParent = Y.one("#boxParent");
+
+ // Setup a custom class with attribute support
+ function Box(cfg) {
+ this._createNode(cfg);
+
+ // Attribute configuration
+ var attrs = {
+
+ "parent" : {
+ value: null
+ },
+
+ "x" : {
+ setter: function(val, name) {
+ // Pass through x value to xy
+ this.set("xy", [parseInt(val), this.get("y")]);
+ },
+
+ getter: function(val, name) {
+ // Get x value from xy
+ return this.get("xy")[0];
+ }
+ },
+
+ "y" : {
+ setter: function(val, name) {
+ // Pass through y value to xy
+ this.set("xy", [this.get("x"), parseInt(val)]);
+ },
+
+ getter: function() {
+ // Get y value from xy
+ return this.get("xy")[1];
+ }
+ },
+
+ "xy" : {
+ // Actual stored xy co-ordinates
+ value: [0, 0],
+
+ setter: function(val, name) {
+ // Constrain XY value to the parent element.
+
+ // Returns the constrained xy value, which will
+ // be the final value stored.
+ return this.constrain(val);
+ },
+
+ validator: function(val, name) {
+ // Ensure we only store a valid data value
+ return (Y.Lang.isArray(val) && val.length == 2 && Y.Lang.isNumber(val[0]) && Y.Lang.isNumber(val[1]));
+ }
+ },
+
+ "color" : {
+ value: "olive",
+
+ getter: function(val, name) {
+ // Always normalize the returned value to
+ // a hex color value, even if the stored
+ // value is a keyword, or an rgb value.
+ if (val) {
+ return Y.Color.toHex(val);
+ } else {
+ return null;
+ }
+ },
+
+ validator: function(val, name) {
+ // Ensure we only store rgb, hex or keyword values.
+ return (Y.Color.re_RGB.test(val) || Y.Color.re_hex.test(val) || Y.Color.KEYWORDS[val]);
+ }
+ }
+ };
+
+ this.addAttrs(attrs, cfg);
+
+ this._sync();
+ this._bind();
+ }
+
+ Box.BUFFER = 5;
+
+ // Create the box node
+ Box.prototype._createNode = function() {
+ this._node = Y.Node.create('<div class="yui-box"><p>Positioned Box</p><p class="coord"></p><p class="color">None</p></div>');
+ };
+
+ // Update rendered state to match the attribute state
+ Box.prototype._sync = function() {
+ this._syncParent();
+ this._syncXY();
+ this._syncColor();
+ };
+
+ Box.prototype._syncParent = function() {
+ this.get("parent").appendChild(this._node);
+ };
+
+ Box.prototype._syncXY = function() {
+ this._node.setXY(this.get("xy"));
+ this._node.one("p.coord").set("innerHTML", "[" + this.get("x") + "," + this.get("y") + "]");
+ };
+
+ Box.prototype._syncColor = function() {
+ this._node.setStyle("backgroundColor", this.get("color"));
+ this._node.one("p.color").set("innerHTML", this.get("color"));
+ };
+
+ // Bind listeners for attribute change events
+ Box.prototype._bind = function() {
+
+ // Reflect any changes in xy, to the rendered Node
+ this.after("xyChange", this._syncXY);
+
+ // Reflect any changes in color, to the rendered Node
+ // and output the color value received from get
+ this.after("colorChange", this._syncColor);
+
+ // Append the rendered node to the parent provided
+ this.after("parentChange", this._syncParent);
+
+ };
+
+ // Get min, max unconstrained values for X. Using Math.round to handle FF3's sub-pixel region values
+ Box.prototype.getXConstraints = function() {
+ var parentRegion = this.get("parent").get("region");
+ return [Math.round(parentRegion.left + Box.BUFFER), Math.round(parentRegion.right - this._node.get("offsetWidth") - Box.BUFFER)];
+ };
+
+ // Get min, max unconstrained values for Y. Using Math.round to handle FF3's sub-pixel region values
+ Box.prototype.getYConstraints = function() {
+ var parentRegion = this.get("parent").get("region");
+ return [Math.round(parentRegion.top + Box.BUFFER), Math.round(parentRegion.bottom - this._node.get("offsetHeight") - Box.BUFFER)];
+ };
+
+ // Constrain the x,y value provided
+ Box.prototype.constrain = function(val) {
+
+ // If the X value places the box outside it's parent,
+ // modify it's value to place the box inside it's parent.
+
+ var xConstraints = this.getXConstraints();
+
+ if (val[0] < xConstraints[0]) {
+ val[0] = xConstraints[0];
+ } else {
+ if (val[0] > xConstraints[1]) {
+ val[0] = xConstraints[1];
+ }
+ }
+
+ // If the Y value places the box outside it's parent,
+ // modify it's value to place the box inside it's parent.
+
+ var yConstraints = this.getYConstraints();
+
+ if (val[1] < yConstraints[0]) {
+ val[1] = yConstraints[0];
+ } else {
+ if (val[1] > yConstraints[1]) {
+ val[1] = yConstraints[1];
+ }
+ }
+
+ return val;
+ };
+
+
+ Y.augment(Box, Y.Attribute);
+
+ // ------
+
+ // Create a new instance of Box
+ var box = new Box({
+ parent : boxParent
+ });
+
+ // Set references to form controls
+ var xTxt = Y.one("#x");
+ var yTxt = Y.one("#y");
+ var colorTxt = Y.one("#color");
+
+ var xHint = Y.one("#xhint");
+ var yHint = Y.one("#yhint");
+
+ function getAll() {
+ xTxt.set("value", box.get("x"));
+ yTxt.set("value", box.get("y"));
+ colorTxt.set("value", box.get("color"));
+ }
+
+ // Bind DOM events for Form Controls
+
+ // Use event delegation for the action button clicks
+ Y.on("delegate", function(e) {
+
+ // Get Node target from the event object
+
+ // We already know it's a button which has an action because
+ // of our selector (button.action), so all we need to do is
+ // route it based on the id.
+ var id = e.currentTarget.get("id");
+
+ switch (id) {
+ case "setXY":
+ box.set("xy", [parseInt(xTxt.get("value")), parseInt(yTxt.get("value"))]);
+ break;
+ case "setX":
+ box.set("x", parseInt(xTxt.get("value")));
+ break;
+ case "setY":
+ box.set("y", parseInt(yTxt.get("value")));
+ break;
+ case "setColor":
+ box.set("color", Y.Lang.trim(colorTxt.get("value")));
+ break;
+ case "setAll":
+ box.set("xy", [parseInt(xTxt.get("value")), parseInt(yTxt.get("value"))]);
+ box.set("color", Y.Lang.trim(colorTxt.get("value")));
+ break;
+ case "getAll":
+ getAll();
+ break;
+ default:
+ break;
+ }
+
+ }, "#attrs", "click", "button.action");
+
+ // Bind listeners to provide min, max unconstrained value hints for x, y
+ // (focus/blur doesn't bubble, so bind individual listeners)
+ Y.on("focus", function() {
+ var minmax = box.getXConstraints();
+ xHint.set("innerHTML", "Valid values: " + minmax[0] + " to " + minmax[1]);
+ }, xTxt);
+
+ Y.on("focus", function() {
+ var minmax = box.getYConstraints();
+ yHint.set("innerHTML", "Valid values: " + minmax[0] + " to " + minmax[1]);
+ }, yTxt);
+
+ Y.on("blur", function() {
+ xHint.set("innerHTML", "");
+ }, xTxt);
+
+ Y.on("blur", function() {
+ yHint.set("innerHTML", "");
+ }, yTxt);
+
+ getAll();
+});
+</script>
+
+<!--END SOURCE CODE FOR EXAMPLE =============================== -->
+
+</body>
+</html>