oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

upgrade to yui 2.5.1

Browse source
This commit is contained in:
JT Smith 2008-03-25 16:13:25 +00:00
parent e00050ad1c
commit ff7d72becc
1632 changed files with 812103 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
www/extras/yui/examples/event/assets/eventdelegation.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

360
www/extras/yui/examples/event/custom-event.html Normal file
View file

File diff suppressed because one or more lines are too long

154
www/extras/yui/examples/event/custom-event_clean.html Normal file
View file

@ -0,0 +1,154 @@
<!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>Using Custom Events</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 rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
#container {width:400px; height:100px; padding:10px; border:1px dotted black;background-color:#CCCCCC; cursor:pointer;}
#resizer {width:200px; height:75px; background-color:#00CCFF;}
#subscriberWidth {width:200px; height:75px; margin-top:10px;background-color:#CC9966;}
#subscriberHeight {width:200px; height:75px; margin-top:10px;background-color:#FF3333;}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Using Custom Events</h1>
<div class="exampleIntro">
<p>Clicking in the grey box resizes the blue <code>&lt;div&gt;</code> within it. We consider this an "interesting moment" in our script, so we create a <a href="/yui/event/#customevent">Custom Event</a> called <code>onSizeChange</code> that fires whenever the blue box is resized. This Custom Event, when fired, publishes the blue box's new size. <strong>Note:</strong> <code>onSizeChange</code> isn't a DOM event &mdash; it's an arbitrary "custom" event that has meaning in the context of our script, and an event that we think other scripts on the page might be interested in knowing about.</p>
<p>One subscriber to our <code>onSizeChange</code> Custom Event looks at the new width and resizes the brown box to match. A second subscriber looks at the blue <code>&lt;div&gt;</code>'s new height and resizes the red box to match. </p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="container">
<div id="resizer">
Click anywhere within the grey box
to resize me.
</div>
</div>
<div id="subscriberWidth">
<strong>Width will resize to match blue
box.</strong>
</div>
<div id="subscriberHeight">
<strong>Height will resize to match blue
box.</strong>
</div>
<script>
(function() {
//create a new custom event, to be fired
//when the resizer div's size is changed
var onSizeChange = new YAHOO.util.CustomEvent("onSizeChange");
//get local references to dom elements,
//for convenience
var container = YAHOO.util.Dom.get("container");
var resizer = YAHOO.util.Dom.get("resizer");
//when the container is clicked on, change the
//dimensions of the resizer -- as long as it appears
//to be a valid new size (>0 width, >12 height).
function fnClick(e){
//0,0 point is the top left corner of the container,
//minus its padding:
var containerX = YAHOO.util.Dom.getX("container");
var containerY = YAHOO.util.Dom.getY("container");
var clickX = YAHOO.util.Event.getPageX(e);
var clickY = YAHOO.util.Event.getPageY(e);
//get container padding using Dom's getStyle():
var containerPaddingX = parseInt(YAHOO.util.Dom.getStyle("container","padding-left"), 10);
var containerPaddingY = parseInt(YAHOO.util.Dom.getStyle("container","padding-top"), 10);
var newWidth = clickX - containerX - containerPaddingX;
var newHeight = clickY - containerY - containerPaddingY;
//if there is a valid new dimension, we'll change
//resizer and fire our custom event
if ((newWidth > 0)||(newHeight > 12)) {
//correct new height/width to guarantee
//minimum of 0x12
if (newWidth < 0) {newWidth = 1;}
if (newHeight < 12) {newHeight = 12;}
//show new dimensions in resizer:
YAHOO.util.Dom.get("resizer").innerHTML = "New size: " + newWidth + "x" + newHeight;
//change the dimensions of resizer, using
//Dom's setStyle:
YAHOO.util.Dom.setStyle("resizer", "width", newWidth + "px");
YAHOO.util.Dom.setStyle("resizer", "height", newHeight + "px");
//fire the custom event, passing
//the new dimensions in as an argument;
//our subscribers will be able to use this
//information:
onSizeChange.fire({width: newWidth, height: newHeight});
};
}
//listen for clicks on the container
YAHOO.util.Event.addListener("container", 'click', fnClick);
//a handler to respond to the custom event that
//we're firing when the resizer changes size; we'll
//resize its width to match the resizer.
fnSubscriberWidth = function(type, args) {
var elWidth = YAHOO.util.Dom.get("subscriberWidth");
var newWidth = args[0].width;
YAHOO.util.Dom.setStyle(elWidth, "width", (newWidth + "px"));
elWidth.innerHTML = ("My new width: " + newWidth + "px");
YAHOO.log("The Custom Event fired; the the new width is " + newWidth + "px.", "info", "example");
}
//another handler to respond to the custom event that
//we're firing when the resizer changes size; this
//one cares about the height of the resizer.
fnSubscriberHeight = function(type, args) {
var elHeight = YAHOO.util.Dom.get("subscriberHeight");
var newHeight = args[0].height;
YAHOO.util.Dom.setStyle(elHeight, "height", (newHeight + "px"));
elHeight.innerHTML = ("My new height: " + newHeight + "px");
YAHOO.log("The Custom Event fired; the the new height is " + newHeight + "px.", "info", "example");
}
//all that remains is to subscribe our
//handlers to the <code>onSizeChange</code> custom event:
onSizeChange.subscribe(fnSubscriberWidth);
onSizeChange.subscribe(fnSubscriberHeight);
YAHOO.log("The example has finished loading; as you interact with it, you'll see log messages appearing here.", "info", "example");
})();
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

364
www/extras/yui/examples/event/custom-event_log.html Normal file
View file

File diff suppressed because one or more lines are too long

274
www/extras/yui/examples/event/event-delegation.html Normal file
View file

File diff suppressed because one or more lines are too long

396
www/extras/yui/examples/event/event-timing.html Normal file
View file

File diff suppressed because one or more lines are too long

240
www/extras/yui/examples/event/eventsimple.html Normal file
View file

File diff suppressed because one or more lines are too long

89
www/extras/yui/examples/event/eventsimple_clean.html Normal file
View file

@ -0,0 +1,89 @@
<!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>Simple Event Handling and Processing</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 rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<!--there is no custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Simple Event Handling and Processing</h1>
<div class="exampleIntro">
<p>Clicking in the blue box will pop up a "Hello World!" alert window. Clicking on the first link will take you to the YUI website; clicking on the second link, which has the same <code>href</code> attribute, will pop up an alert instead and not navigate to a new page.</p>
<p>Event Utility is used here to do two things:</p>
<ol>
<li>Attach the <code>click</code> event handler to the blue box;</li>
<li>Attach an event handler to the second <code>&lt;a&gt;</code> element that uses <code>YAHOO.util.Event.preventDefault()</code> to prevent the link, when clicked, from navigating to a new page. </li>
</ol>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script>
(function() {
//A function that pops up a "Hello World" alert:
var helloWorld = function(e) {
YAHOO.log("helloWorld function firing.", "info", "example");
alert("Hello World!");
}
//subscribe the helloWorld function as an event
//handler for the click event on the container
//div:
YAHOO.util.Event.addListener("container", "click", helloWorld);
//A function that pops up an alert and
//prevents the default behavior of the event
//for which it is a handler:
var interceptLink = function(e) {
YAHOO.util.Event.preventDefault(e);
YAHOO.log("You clicked on the second YUI link.", "info", "example");
alert("You clicked on the second YUI link.");
}
//subscribe our interceptLink function
//as a click handler for the second anchor
//element:
YAHOO.util.Event.addListener("secondA", "click", interceptLink);
//log message to indicate that the example is ready:
YAHOO.log("When you begin interacting with the example at left, you'll see log messages appear here.", "info", "example");
})();
</script>
<style>
#container {background-color:#00CCFF; border:1px dotted black; padding:1em; cursor:pointer;}
</style>
<div id="container">
<p>Click for Hello World alert.</p>
</div>
<p><a href="http://developer.yahoo.com/yui" id="firstA">The YUI Library. (Link navigates away from page.)</a></p>
<p><a href="http://developer.yahoo.com/yui" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a></p>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>

244
www/extras/yui/examples/event/eventsimple_log.html Normal file
View file

File diff suppressed because one or more lines are too long

86
www/extras/yui/examples/event/index.html Normal file
View file

File diff suppressed because one or more lines are too long