Linden Lab Official:Viewer Web Widgets - Revision history

Natty Linden: update widget loader URLs to HTTPS versions

2021-08-09T18:32:02Z

update widget loader URLs to HTTPS versions

← Older revision		Revision as of 11:32, 9 August 2021
Line 3:		Line 3:
	{{KBcaution\|Work-in-progress! Expect these widgets to change over time. Watch this page for updates.}}		{{KBcaution\|Work-in-progress! Expect these widgets to change over time. Watch this page for updates.}}

	These viewer web widgets are a first attempt at making the current Second Life Viewer [~~http~~://viewer-~~login~~.~~agni.lindenlab~~.com/ ~~login~~ screen] features available for easy use in third-party viewers. Linden Lab provides a base Javascript library that searches the DOM of a given page, populating specifically-named divs with widget content.		These viewer web widgets are a first attempt at making the current Second Life Viewer [https://viewer-splash.secondlife.com/ splash screen] features available for easy use in third-party viewers. Linden Lab provides a base Javascript library that searches the DOM of a given page, populating specifically-named divs with widget content.

	==Basic implementation==		==Basic implementation==
Line 12:		Line 12:
	<html>		<html>
	<head>		<head>
	<script type="text/javascript" src="<nowiki>~~http~~:/</nowiki>/lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v2/modules/sl.widgets.js">		<script type="text/javascript" src="<nowiki>https:/</nowiki>/lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v2/modules/sl.widgets.js">
	</script>		</script>
	</head>		</head>
Line 22:		Line 22:
	Version 2 of the main sl.widgets.js library currently lives here:		Version 2 of the main sl.widgets.js library currently lives here:

	~~http~~://lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v2/modules/sl.widgets.js		https://lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v2/modules/sl.widgets.js

	This library will pull in all the supporting content it needs -- other Javascript files, CSS, and the content for each widget. It uses its own version of jQuery, and will create a separate namespace to avoid conflicts if you already have jQuery installed.		This library will pull in all the supporting content it needs -- other Javascript files, CSS, and the content for each widget. It uses its own version of jQuery, and will create a separate namespace to avoid conflicts if you already have jQuery installed.
Line 162:		Line 162:

	The teleport widget provides a more intuitive user experience for links to locations within Second Life (both <tt><nowiki>secondlife://</nowiki></tt> links and <tt><nowiki>maps.secondlife.com</nowiki></tt> links). If a user has the Second Life viewer installed, the link should launch the viewer and teleport to that location. If the user does not have the viewer installed, the link should take the user to the corresponding page in <tt><nowiki>maps.secondlife.com</nowiki></tt>. The widget provides the following behavior:		The teleport widget provides a more intuitive user experience for links to locations within Second Life (both <tt><nowiki>secondlife://</nowiki></tt> links and <tt><nowiki>maps.secondlife.com</nowiki></tt> links). If a user has the Second Life viewer installed, the link should launch the viewer and teleport to that location. If the user does not have the viewer installed, the link should take the user to the corresponding page in <tt><nowiki>maps.secondlife.com</nowiki></tt>. The widget provides the following behavior:
	* If the viewer is installed, links to both <tt><nowiki>secondlife://</nowiki></tt> URLs and <tt><nowiki>~~http://~~maps.secondlife.com</nowiki></tt> URLs should launch the viewer and go to the specified location in-world.		* If the viewer is installed, links to both <tt><nowiki>secondlife://</nowiki></tt> URLs and <tt><nowiki>maps.secondlife.com</nowiki></tt> URLs should launch the viewer and go to the specified location in-world.
	* If the viewer is not installed, links to both <tt><nowiki>secondlife://</nowiki></tt>URLs and <tt><nowiki>~~http://~~maps.secondlife.com</nowiki></tt> URLs should go to the specified location in <tt><nowiki>maps.secondlife.com</nowiki></tt>.		* If the viewer is not installed, links to both <tt><nowiki>secondlife://</nowiki></tt>URLs and <tt><nowiki>maps.secondlife.com</nowiki></tt> URLs should go to the specified location in <tt><nowiki>maps.secondlife.com</nowiki></tt>.
	* If the link is to something other than a <tt><nowiki>secondlife://</nowiki></tt> URL or a <tt><nowiki>~~http://~~maps.secondlife.com</nowiki></tt> URL, the link should behave normally and go to the specified href.		* If the link is to something other than a <tt><nowiki>secondlife://</nowiki></tt> URL or a <tt><nowiki>maps.secondlife.com</nowiki></tt> URL, the link should behave normally and go to the specified href.
	To employ the widget requires only two steps:		To employ the widget requires only two steps:
	* Add the following script tag to your webpage:		* Add the following script tag to your webpage:
	<nowiki><script type="text/javascript" src="https://lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v2/modules/sl.teleport.js"></script></nowiki>		<nowiki><script type="text/javascript" src="https://lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v2/modules/sl.teleport.js"></script></nowiki>
	* Add the class "sl-teleport" to any links you wish to be controlled by the widget, for example:		* Add the class "sl-teleport" to any links you wish to be controlled by the widget, for example:
	<nowiki><a class="sl-teleport" href="~~http~~://maps.secondlife.com/secondlife/MyCoolPlace/000/000/000/">My cool place</a></nowiki>		<nowiki><a class="sl-teleport" href="https://maps.secondlife.com/secondlife/MyCoolPlace/000/000/000/">My cool place</a></nowiki>
	:''or''		:''or''
	<nowiki><a class="sl-teleport" href="secondlife://MyCoolPlace/000/000/000/">My cool place</a></nowiki>		<nowiki><a class="sl-teleport" href="secondlife://MyCoolPlace/000/000/000/">My cool place</a></nowiki>

Natty Linden: fix code blocks

2021-07-30T21:09:41Z

fix code blocks

← Older revision		Revision as of 14:09, 30 July 2021
Line 9:		Line 9:
	The example below shows the simplest way to implement these widgets. Simply include the sl.widgets.js library, then include a div with both id="[the widget you want]" and class="second-life-widget".		The example below shows the simplest way to implement these widgets. Simply include the sl.widgets.js library, then include a div with both id="[the widget you want]" and class="second-life-widget".

	~~<html4strict>~~		<!DOCTYPE html>
	<!DOCTYPE html>		<html>
	<html>		<head>
	<head>		<script type="text/javascript" src="<nowiki>http:/</nowiki>/lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v2/modules/sl.widgets.js">
	<script type="text/javascript" src="http://lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v2/modules/sl.widgets.js">		</script>
	</script>		</head>
	</head>		<body>
	<body>		<div id="whats-hot-now-widget" class="second-life-widget"></div>
	<div id="whats-hot-now-widget" class="second-life-widget"></div>		</body>
	</body>		</html>
	</html>
	~~</html4strict~~>

	Version 2 of the main sl.widgets.js library currently lives here:		Version 2 of the main sl.widgets.js library currently lives here:
Line 39:		Line 37:
	All configuration is passed to widgets through a global javascript variable called - '''slconfig'''. It's a javascript object which further contains individual configuration object for each widget. Below is an example of setting some options to the What's Hot Now widget.		All configuration is passed to widgets through a global javascript variable called - '''slconfig'''. It's a javascript object which further contains individual configuration object for each widget. Below is an example of setting some options to the What's Hot Now widget.

	~~<html4strict>~~		<script type="text/javascript">
	<script type="text/javascript">		var slconfig = {};
			slconfig['whatshotnow'] = {
	var slconfig = {};		itemsPerPage : 4,
	slconfig['whatshotnow'] = {		onclick: localClick
	itemsPerPage : 4,		};
	onclick: localClick
	};		function localClick(stuff){
			alert(stuff);
	function localClick(stuff){		return false;
	alert(stuff);		}
	return false;		</script>
	}

	</script>
	~~</html4strict~~>

	In the above code we do couple of things.		In the above code we do couple of things.

Oz Linden at 18:09, 25 May 2016

2016-05-25T18:09:26Z

@@ Line 164: / Line 164: @@
 Widget strings can be localized by adding ?lang=[de|es|fr|ja|pt] to your page's URL.
 ==Future roadmap==
 For other features or requests, please file a Jira in the 'Web' project for component 'Viewer Login Page' and/or discuss in the talk page here.

Cornelius Linden at 17:52, 4 May 2012

2012-05-04T17:52:18Z

← Older revision		Revision as of 10:52, 4 May 2012
Line 13:		Line 13:
	<html>		<html>
	<head>		<head>
	<script type="text/javascript" src="http://lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v1/modules/sl.widgets.js">		<script type="text/javascript" src="http://lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v2/modules/sl.widgets.js">
	</script>		</script>
	</head>		</head>
Line 22:		Line 22:
	</html4strict>		</html4strict>

	Version 1 of the main sl.widgets.js library currently lives here:		Version 2 of the main sl.widgets.js library currently lives here:

	http://lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v1/modules/sl.widgets.js		http://lecs-viewer-login-agni.s3.amazonaws.com/pubwidgets/v2/modules/sl.widgets.js

	This library will pull in all the supporting content it needs -- other Javascript files, CSS, and the content for each widget. It uses its own version of jQuery, and will create a separate namespace to avoid conflicts if you already have jQuery installed.		This library will pull in all the supporting content it needs -- other Javascript files, CSS, and the content for each widget. It uses its own version of jQuery, and will create a separate namespace to avoid conflicts if you already have jQuery installed.

Cornelius Linden: /* Widget Options */

2011-10-13T17:38:55Z

Widget Options

← Older revision		Revision as of 10:38, 13 October 2011
Line 37:		Line 37:
	# The callback javascript function that needs to be called when someone clicks the particular event/item inside the widget.		# The callback javascript function that needs to be called when someone clicks the particular event/item inside the widget.

	All configuration is passed to widgets through a global javascript variable called - '''slconfig'''. It's a javascript object which further contains individual configuration object for each widget. Below is an example of setting some options to ~~what~~'s ~~what now~~ widget.		All configuration is passed to widgets through a global javascript variable called - '''slconfig'''. It's a javascript object which further contains individual configuration object for each widget. Below is an example of setting some options to the What's Hot Now widget.

	<html4strict>		<html4strict>

Oz Linden: /* Future roadmap */

2011-10-13T11:26:49Z

Future roadmap

← Older revision		Revision as of 04:26, 13 October 2011
Line 167:		Line 167:
	==Future roadmap==		==Future roadmap==

	~~In the near future we plan to add widgets for each item on the current Second Life Viewer [http://viewer-login.agni.lindenlab.com/ login screen]:~~		For other features or requests, please file a Jira in the 'Web' project for component 'Viewer Login Page' and/or discuss in the talk page here.
	* Editors' Picks slideshow (the big one, top left)
	* Destinations main widget (with category selector)
	* Upcoming events
	* Second Life Blog

	~~Other features we plan to enable for all widgets:~~
	* Ability to set custom click function: currently the default click behavior triggers a modal notification dialog in addition to initiating a secondlife:// teleport action. We plan to enable a widget setting that can override this with a custom javascript function.

	For other features or requests, please file a Jira and/or discuss in the talk page here.

Tatva Linden at 05:34, 13 October 2011

2011-10-13T05:34:27Z

← Older revision		Revision as of 22:34, 12 October 2011
Line 80:		Line 80:
	This widget expects the above div to be a fixed height of 148px. It will adapt its content to 100% of the div's width, so you can make it as wide as you like. To control positioning, size, and other parameters, just style the #whats-hot-now-widget in your own page's CSS.		This widget expects the above div to be a fixed height of 148px. It will adapt its content to 100% of the div's width, so you can make it as wide as you like. To control positioning, size, and other parameters, just style the #whats-hot-now-widget in your own page's CSS.

	This widget takes 2 options. It needs to be set in slconfig['whatshotnow'] object. Below are the options.		This widget takes 2 options. It needs to be set in '''slconfig['whatshotnow']''' object. Below are the options.

	# itemsPerPage - the number of items in the widget per page.		# itemsPerPage - the number of items in the widget per page.
Line 95:		Line 95:
	This widget expects the above div to be a fixed height of 148px. It will adapt its content to 100% of the div's width, so you can make it as wide as you like. To control positioning, size, and other parameters, just style the #destinations-widget in your own page's CSS.		This widget expects the above div to be a fixed height of 148px. It will adapt its content to 100% of the div's width, so you can make it as wide as you like. To control positioning, size, and other parameters, just style the #destinations-widget in your own page's CSS.

	This widget takes 2 options. It needs to be set in slconfig['destinations'] object. Below are the options.		This widget takes 2 options. It needs to be set in '''slconfig['destinations']''' object. Below are the options.

	# itemsPerPage - the number of items in the widget per page.		# itemsPerPage - the number of items in the widget per page.
Line 110:		Line 110:
	This widget expects the above div to be a fixed width of 263px. The height will change based on the css/itemsPerPage options. To control positioning, size, and other parameters, just style the #blogs-widget in your own page's CSS.		This widget expects the above div to be a fixed width of 263px. The height will change based on the css/itemsPerPage options. To control positioning, size, and other parameters, just style the #blogs-widget in your own page's CSS.

	This widget takes 2 options. It needs to be set in slconfig['blog'] object. Below are the options.		This widget takes 2 options. It needs to be set in '''slconfig['blog']''' object. Below are the options.

	# itemsPerPage - the number of blog listings in the widget per page.		# itemsPerPage - the number of blog listings in the widget per page.
Line 125:		Line 125:
	This widget expects the above div to be a fixed height of 267px and fixed width of 660px. To control positioning, and other parameters, just style the #destination-widget in your own page's CSS.		This widget expects the above div to be a fixed height of 267px and fixed width of 660px. To control positioning, and other parameters, just style the #destination-widget in your own page's CSS.

	This widget takes 1 options. It needs to be set in slconfig['destination-images'] object. Below are the options.		This widget takes 1 options. It needs to be set in '''slconfig['destination-images']''' object. Below are the options.

	# onclick - a javascript function which needs to be called when an item in this widget gets clicked. The javascript function is called back with the clicked item slurl. When this option is set, the overlay which usually shows up is cancelled.		# onclick - a javascript function which needs to be called when an item in this widget gets clicked. The javascript function is called back with the clicked item slurl. When this option is set, the overlay which usually shows up is cancelled.

			===Upcoming Events (List Version)===

			This widget displays a list of upcoming events sorted with the most recent one at top

			With the main js library loaded, include this div in your html markup:

			<div id="upcoming-events-widget" class="second-life-widget"></div>

			This widget expects the above div to be a fixed width of 263px. It will adapt its content to 100% of the div's width, so you can make it as wide as you like. To control positioning, size, and other parameters, just style the #upcoming-events-widget in your own page's CSS.

			This widget takes 2 options. It needs to be set in '''slconfig['events']''' object. Below are the options.

			# itemsPerPage - the number of items in the widget per page.
			# onclick - a javascript function which needs to be called when an item in this widget gets clicked. The javascript function is called back with the clicked item slurl. When this option is set, the overlay which usually shows up is cancelled.


			===Upcoming Events (Filmstrip Version)===

			This widget displays thumbnail list of upcoming events sorted with the most recent one at the beginning

			With the main js library loaded, include this div in your html markup:

			<div id="events-fs-widget" class="second-life-widget"></div>

			This widget expects the above div to be a fixed height of 143px. It will adapt its content to 100% of the div's width, so you can make it as wide as you like. To control positioning, size, and other parameters, just style the #upcoming-events-widget in your own page's CSS.

			This widget takes 2 options. It needs to be set in '''slconfig['eventsfs']''' object. Below are the options.

			# itemsPerPage - the number of items in the widget per page.
			# onclick - a javascript function which needs to be called when an item in this widget gets clicked. The javascript function is called back with the clicked item slurl. When this option is set, the overlay which usually shows up is cancelled.

Tatva Linden at 05:27, 13 October 2011

2011-10-13T05:27:18Z

← Older revision		Revision as of 22:27, 12 October 2011
Line 114:		Line 114:
	# itemsPerPage - the number of blog listings in the widget per page.		# itemsPerPage - the number of blog listings in the widget per page.
	# onclick - a javascript function which needs to be called when an item in this widget gets clicked. The javascript function is called back with an object. When this option is set, the overlay which usually shows up is cancelled. Here is what is passed back to the call back - a object with these properties - creator, date, description, link, pubDate, title		# onclick - a javascript function which needs to be called when an item in this widget gets clicked. The javascript function is called back with an object. When this option is set, the overlay which usually shows up is cancelled. Here is what is passed back to the call back - a object with these properties - creator, date, description, link, pubDate, title

			===Destination Images===

			This widget displays a scrollable list of featured destinations with larger pictures. The number of destinations shown is 8.

			With the main js library loaded, include this div in your html markup:

			<div id="destination-images-widget" class="second-life-widget"></div>

			This widget expects the above div to be a fixed height of 267px and fixed width of 660px. To control positioning, and other parameters, just style the #destination-widget in your own page's CSS.

			This widget takes 1 options. It needs to be set in slconfig['destination-images'] object. Below are the options.

			# onclick - a javascript function which needs to be called when an item in this widget gets clicked. The javascript function is called back with the clicked item slurl. When this option is set, the overlay which usually shows up is cancelled.

Tatva Linden at 23:11, 12 October 2011

2011-10-12T23:11:10Z

← Older revision		Revision as of 16:11, 12 October 2011
Line 99:		Line 99:
	# itemsPerPage - the number of items in the widget per page.		# itemsPerPage - the number of items in the widget per page.
	# onclick - a javascript function which needs to be called when an item in this widget gets clicked. The javascript function is called back with the clicked item slurl. When this option is set, the overlay which usually shows up is cancelled.		# onclick - a javascript function which needs to be called when an item in this widget gets clicked. The javascript function is called back with the clicked item slurl. When this option is set, the overlay which usually shows up is cancelled.

			===Blogs===

			This widget displays a list of all recent blog posts from SL.

			With the main js library loaded, include this div in your html markup:

			<div id="blogs-widget" class="second-life-widget"></div>

			This widget expects the above div to be a fixed width of 263px. The height will change based on the css/itemsPerPage options. To control positioning, size, and other parameters, just style the #blogs-widget in your own page's CSS.

			This widget takes 2 options. It needs to be set in slconfig['blog'] object. Below are the options.

			# itemsPerPage - the number of blog listings in the widget per page.
			# onclick - a javascript function which needs to be called when an item in this widget gets clicked. The javascript function is called back with an object. When this option is set, the overlay which usually shows up is cancelled. Here is what is passed back to the call back - a object with these properties - creator, date, description, link, pubDate, title

Tatva Linden at 21:34, 12 October 2011

2011-10-12T21:34:37Z

@@ Line 68: / Line 68: @@
 # Width defined in css
-When items per page is passed, the widget resizes to fit those number of items. It won't take into consideration whether the widget fits the container or not. When the items per page isn't passed - the size of the widgets is taken from the css file. This again has a order. By default all widgets use Second Life widgets css, and can be over-ridden by your local css file or inline css.
+When items per page is passed, the widget resizes to fit those number of items. It won't take into consideration whether the widget fits the container or not. When the items per page isn't passed - the size of the widgets is taken from the css file. This again has an order. By default all widgets use Second Life widgets css, and can be over-ridden by your local css file or inline css.
 ===What's hot now===
@@ Line 84: / Line 84: @@
 # itemsPerPage - the number of items in the widget per page.
 # onclick - a javascript function which needs to be called when an item in this widget gets clicked. The javascript function is called back with the clicked item slurl. When this option is set, the overlay which usually shows up is cancelled.
 ==Localization==