Site pinning in IE9 presents a way to interoperate with the Windows 7 desktop and make a website feel more like a native app. This library adds missng wraps some of the sitemode methods in window.external and adds..
<script src="pin.js"></script>
<script>
pin.jumplist.title("Recently visited");
pin.jumplist.add("Test Link " + (new Date), "#" + (new Date));
</script>
<script>
if( ( "external" in window ) && ( "msIsSiteMode" in window.external ) && window.external.msIsSiteMode() ){
window.external.msSiteModeCreateJumpList("My List Label");
window.external.msSiteModeAddJumpListItem("Test Link " + (new Date), "#" + (new Date));
window.external.msSiteModeShowJumpList();
}
</script>
pin.name("Development with IE9 pin.js");
pin.starturl("./?start");
pin.tasks([
{title: "Tasks", url : window.location.href, icon : "favicon.ico" },
{title: "Jumplist", url : window.location.href, icon : "favicon.ico" }
]);
First of all we initiate a new list. We typically only want to when a pinned
application is loaded, so wrap it in the condition if( pin.first ){...}
pin.jumplist.title( "My Jumplist" ); alert(pin.jumplist.title());
position is optional, e.g. setting the position to 0 the new item will be appended to the top of the list. Without it items are placed at the end of the list.
pin.jumplist.add("Test Link " + (new Date), "#" + (new Date));
position is optional
object[] - is an array of objects containing the attributes title, url, icon(optional). E.g...
pin.jumplist.add([
{title : "Jumplists", url : "#jumplist"},
{title : "Tasks", url : "#tasks"},
{title : "Buttons", url : "#buttons"},
]);
var s = '',
a = pin.jumplist.items();
for( var i in a ){
s += [a[i].title, a[i].url, (a[i].icon||'Image not defined')].join(', ') + '<br />';
}
document.getElementById('list').innerHTML = s;
This the secondparameter specifies an optional length to delete more than one item.
E.g delete the first item
pin.jumplist.remove(0);
pin.jumplist.clear();
The second parameter specifies an optional length to delete more than one item before new items are inserted into their place. The number of items do not have to match.
E.g. replace first item from the list, pos=0
pin.jumplist.replace(0,{title:"Replaced at "+ (new Date), url: '#'+(new Date)})
btnId = pin.button.add("tick.ico", "Tick", function(){alert("Hello");});
pin.button.update(btnId, "banned.ico", "Banned", function(){alert("Goodbye");});
pin.button.hide( btnId );
if( pin.pinned ){
// Add a toggle button
(function(){
var toggle = true;
pin.button.add('/winconnect/toobify/images/toob_play.ico','Toggle Play', function(btnid){
// Change style
toggle = !toggle;
var s = (toggle?"play":"pause");
pin.button.update(btnid,'/winconnect/toobify/images/toob_'+s+'.ico','Toggle '+s);
});
})();
// Add a self-disappearing button
pin.button.add('/winconnect/toobify/images/toob_next.ico','Hide Me',function(btnid){
pin.button.hide(btnid);
});
}
If the button is linked to a visual property in the page then you might like bring the page into focus, maximised and infront of other windows if it not already.
pin.button.add("tick.ico","Bring to forefront", function(){
window.blur();
window.focus();
});
E.g. add an icon overlay for 3 seconds
pin.overlay("tick.ico","Tick", 3000);
E.g. switch periodically between two overlays
pin.overlay("bug.ico","Bug");
pin.overlay("banned.ico","Banned");
pin.overlay("tick.ico","Tick", 0);
Add a bug and then remove after 3 seconds
var o = pin.overlay("bug.ico","Bug");
setTimeout(function(){
pin.overlay(o, 0);
},3000)
Remove all current overlays
pin.overlay(0);
When testing this please ALT+tab to remove focus from your browser window
setTimeout(function(){
pin.activate();
}, 3000);
Use this as a condition to run code which would of otherwise been executed as many times as the user has tabs and windows open to the site. Very useful for updating shared features i.e. like the jumplist.
alert( pin.master() ? "master window" : "slave window" );
Master is a title that can be held by only one of the pinned window or tabs. Using this property will help reduce unnessecary duplicate actions. e.g. each page calling a server script to populate the Jumplist.
alert( pin.master(true) ? "master window" : "slave window" );
If another window doesn't take over as master before calling pin.master() in this window then the window will be reassigned as master.
alert( pin.master(false) ? "master window" : "slave window" );
// 120 seconds pin.masterRegin = 120e3;
alert( pin.pinable ? "Yes this browser supports pinning" : "This browser does not support pinning" );
alert( pin.pinned ? "Site is Pinned" : "Please pin this site");
alert( pin.first ? "First" : "Nope");
alert( pin.pinnedUrl );