mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-17 15:03:25 +00:00
158 lines
5.8 KiB
HTML
158 lines
5.8 KiB
HTML
<!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><div></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 — 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><div></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>
|