Skip to content

Instantly share code, notes, and snippets.

@stuff

stuff/MyImageWidget.html

Created February 11, 2010 14:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stuff/301529 to your computer and use it in GitHub Desktop.
Save stuff/301529 to your computer and use it in GitHub Desktop.
Download ZIP
UWA Sample 1, Image Widget
Raw
MyImageWidget.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:widget="http://www.netvibes.com/ns/">
<head>
<title>My Image Widget</title>
<meta name="keywords" content="image, link" />
<meta name="author" content="Nicolas Challeil" />
<meta name="description" content="Display an image with optional link and title" />
<meta name="apiVersion" content="1.2-ginger" />
<meta name="debugMode" content="false" />
<link rel="icon" href="http://a1.twimg.com/profile_images/496987956/image_search-128_bigger.gif" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="http://www.netvibes.com/themes/uwa/style.css" />
<script type="text/javascript" src="http://www.netvibes.com/js/UWA/load.js.php?env=Standalone"></script>
<style type="text/css">
.MyImageWidget div {
text-align: center;
}
.MyImageWidget h3 {
font-size:2em;
}
</style>
<!-- Add your UWA preferences as needed -->
<widget:preferences>
<preference label="Title" type="text" name="title" />
<preference label="Image url" type="text" name="imageUrl" />
<preference label="Image link" type="text" name="imageLink" />
</widget:preferences>
<script type="text/javascript">
var MyImageWidget = {
/* Property: elements
Object: cache various widget DOM elements
*/
elements : {},
/* Method: load
Method called by widget.onLoad to build the widget
Parameters:
* None.
Returns:
* Nothing.
*/
load: function() {
MyImageWidget.buildSkeleton();
MyImageWidget.display();
widget.callback('onUpdateBody');
},
/* Method: buildSkeleton
Build the widget Skeleton
Parameters:
* None.
Returns:
* Nothing.
*/
buildSkeleton: function() {
widget.body.empty();
MyImageWidget.elements['body'] = widget.createElement('div', {'class' : 'MyImageWidget'});
MyImageWidget.elements['body'].inject(widget.body);
MyImageWidget.elements['container'] = widget.createElement('div').inject(MyImageWidget.elements['body']);
MyImageWidget.elements['image-container'] = widget.createElement('div', {'class' : 'image-container'})
.inject(MyImageWidget.elements['container']);
MyImageWidget.elements['help-container'] = widget.createElement('div', {'class' : 'help-container'})
.setHTML('<p>This widget is not configured, please click on the Edit link</p>')
.inject(MyImageWidget.elements['container']);
},
/* Method: display
Main method to display widget content
Parameters:
* None.
Returns:
* Nothing.
*/
display: function() {
var imageUrl = widget.getValue('imageUrl');
var imageLink = widget.getValue('imageLink');
var title = widget.getValue('title');
if (imageUrl){
// add title if needed
if (title){
widget.createElement('h3')
.setText(title)
.inject(MyImageWidget.elements['image-container']);
}
// add image
var image = widget.createElement('img', {'src' : imageUrl})
.inject(MyImageWidget.elements['image-container']);
// add image events
if (imageLink){
var info = widget.createElement('div')
.setHTML('Cliquez pour aller sur <strong>' + imageLink + '</strong>')
.setStyle('visibility', 'hidden')
.inject(MyImageWidget.elements['image-container']);
// change mouse cursor
image.setStyle('cursor', 'pointer');
image.onclick = function(){
widget.openURL(lienImage);
};
image.onmouseover = function(){
info.setStyle('visibility', 'visible');
};
image.onmouseout = function(){
info.setStyle('visibility', 'hidden');
};
}
MyImageWidget.elements['help-container'].hide();
MyImageWidget.elements['image-container'].show();
} else {
MyImageWidget.elements['image-container'].hide();
MyImageWidget.elements['help-container'].show();
}
}
}
/* UWA Widget events */
widget.onLoad = MyImageWidget.load;
</script>
</head>
<body>
<p>Loading ...</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment