mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-17 15:03:25 +00:00
169 lines
6.3 KiB
HTML
169 lines
6.3 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 addModule to Add Custom (Non-YUI) Content with YUILoader</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" />
|
|
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
|
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
|
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
|
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
|
<script type="text/javascript" src="../../build/yuiloader/yuiloader-min.js"></script>
|
|
|
|
|
|
<!--begin custom header content for this example-->
|
|
<style type="text/css">
|
|
#mapContainer {
|
|
height: 400px;
|
|
width: 500px;
|
|
background-color:#666;
|
|
margin-top:1em;
|
|
color:#FFF;
|
|
}
|
|
</style>
|
|
|
|
<!--end custom header content for this example-->
|
|
|
|
</head>
|
|
|
|
<body class="yui-skin-sam">
|
|
|
|
|
|
<h1>Using addModule to Add Custom (Non-YUI) Content with YUILoader</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p><a href="http://developer.yahoo.com/yui/yuiloader/">The YUILoader Utility</a> is designed, of course, to help you put YUI components on the page. But your applications will frequently consist of a YUI-component foundation with your own application logic built on top. In other words, when you're loading YUI components you'll often want to load your own components as well.</p>
|
|
|
|
<p>This example shows you how to create a custom (non-YUI) module and load it via YUILoader. Click the "Load Yahoo! Maps" button below to load the Yahoo! Maps widget using the <a href="http://developer.yahoo.com/maps/ajax/">Yahoo! Maps AJAX API</a>. The Maps widget requires specific YUI functionality to be loaded before its own JavaScript files are loaded. YUI Loader accepts our definition of a new <code>yahoomaps</code> module and, when we request it, the required files are brought into the page in the correct order.</p>
|
|
|
|
<p><strong>Note 1:</strong> As of YUI 2.4.1, defining custom modules that override existing YUI skins requires a specific syntax. See the <a href="#overrideskins">example code</a> below for details. <strong>Note 2:</strong> Opera is not fully supported by the Yahoo! Maps AJAX API.</p>
|
|
|
|
</div>
|
|
|
|
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
<!--Container for our call-to-action button-->
|
|
<div id="buttonContainer"></div>
|
|
|
|
<!--Container for our Maps instance-->
|
|
<div id="mapContainer">Click the button above; Yahoo! Maps will load here.</div>
|
|
|
|
<script type="text/javascript">
|
|
//create our Button Instance which will trigger Loader to
|
|
//load the JSON utility from json.org.
|
|
YAHOO.example.buttoninit = function() {
|
|
|
|
//Create the button instance:
|
|
var oButton = new YAHOO.widget.Button({
|
|
id: "mapInsertButton",
|
|
type: "button",
|
|
label: "Click here to load Yahoo! Maps",
|
|
container: "buttonContainer"
|
|
});
|
|
YAHOO.log("Button created; click button to begin loading Yahoo! Maps.", "info", "example");
|
|
|
|
//Create a handler that handles the button click;
|
|
//it logs the click, hides the button, then fires
|
|
//the function (loaderinit) that brings in the Maps module:
|
|
var onButtonClick = function() {
|
|
YAHOO.log("Button clicked; hiding button now and loading Yahoo! Maps", "info", "example");
|
|
this.set("disabled", true); //disable the button
|
|
YAHOO.example.loaderinit(); //initialize loader
|
|
}
|
|
|
|
//attach the handler to the Button's click event:
|
|
oButton.on("click", onButtonClick);
|
|
};
|
|
|
|
//Once the buttonContainer element is on the page, we can create
|
|
//our button instance; in this case, the onContentReady deferral is unnecessary,
|
|
//because we're writing the element to the page before this script,
|
|
//but in many cases the onContentReady wrapper gives you added
|
|
//flexibility and it comes at low expense:
|
|
YAHOO.util.Event.onAvailable("buttonContainer",
|
|
YAHOO.example.buttoninit);
|
|
|
|
//Once Yahoo! Maps is loaded, we want to initialize the Maps display:
|
|
YAHOO.example.onMapsLoaded = function(){
|
|
YAHOO.log("onMapsLoaded firing.");
|
|
|
|
//The following lines employ the Yahoo! Maps
|
|
//Ajax API: http://developer.yahoo.com/maps/ajax/
|
|
|
|
// Create a lat/lon object
|
|
var myPoint = new YGeoPoint(37.754164,-122.454464);
|
|
// Create a map object
|
|
var map = new YMap(document.getElementById('mapContainer'));
|
|
// Add a pan control
|
|
map.addPanControl();
|
|
// Add a slider zoom control
|
|
map.addZoomLong();
|
|
// Add map type control
|
|
map.addTypeControl();
|
|
// Display the map centered on a latitude and longitude
|
|
map.drawZoomAndCenter(myPoint, 6);
|
|
|
|
//Log the completion of the process:
|
|
YAHOO.log("Yahoo! Maps was successfully loaded into the page, and the Maps display was initialized. The process is complete.", "info", "example");
|
|
|
|
};
|
|
|
|
YAHOO.example.loaderinit = function() {
|
|
YAHOO.log("YAHOO.example.loaderinit firing; we'll define our custom Maps module and load it now.", "info", "example");
|
|
|
|
//Begin by creating a new Loader instance:
|
|
var loader = new YAHOO.util.YUILoader({
|
|
onSuccess: YAHOO.example.onMapsLoaded,
|
|
base: "../../build/"
|
|
});
|
|
|
|
//Here we define the Yahoo! Maps API module
|
|
//in YUI Loader:
|
|
loader.addModule({
|
|
name: 'yahoomaps', //module name; must be unique
|
|
type: 'js', //can be "js" or "css"
|
|
// a variable that will be available when the script is loaded. Needed
|
|
// in order to act on the script immediately in Safari 2.x and below:
|
|
varName: "YahooMapsAPIAjax",
|
|
//can use a path instead, extending base path:
|
|
fullpath: 'http://l.yimg.com/d/lib/map/js/api/ymapapi_3_8_2_3.js',
|
|
//the list of modules that this new module requires:
|
|
requires: ['yahoo','dom','event','json','animation','dragdrop']
|
|
});
|
|
|
|
//This appid, available from
|
|
//http://developer.yahoo.com/maps/ajax/ , must come before
|
|
//the insert method is called. And yes, this must be a global variable:
|
|
YMAPPID = "YUIBlogger";
|
|
|
|
loader.require("yahoomaps"); //include the new module
|
|
|
|
//Insert JSON utility on the page, passing in our callback:
|
|
loader.insert();
|
|
|
|
|
|
};
|
|
</script>
|
|
|
|
|
|
|
|
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
</body>
|
|
</html>
|