Project: stringle
Code Location: http://stringle.googlecode.com/svn/trunk/trunk
Browse
/
Download File
stringleProfileSelect.php 
<html>
<head><title>Stringle Profile Selector</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.0/build/reset-fonts-grids/reset-fonts-grids.css"> 

  <style type="text/css">
    h2 {font-size:150%; margin-bottom:10px;}
	hr {margin-top:10px;margin-bottom:20px;}
	#about li {margin-left:15px;}
	a {text-decoration:none;}
   	em {font-style: italic;}
   	blockquote {margin:40px;
   	font-style: italic;}
   	p {margin-top:10px;}
   	#ft {margin-top:40px;}
   	#hd h1 {font-size: 200%; margin-top:10px;}
   	#bd {margin-top:40px;}
   	#container li {margin-top:10px; margin-bottom:20px; }
   	#toolTypes input {margin-right:10px;margin-left:20px;}
   	.cb {margin-right:10px}
   	.courseFeed h2 {font-size:140%}
   	.courseFeed {margin-top:10px;border-style:solid;border-width:1px;padding:5px;}
   	#delmark{margin-top:20px;}

   </style>
  
  <script type="text/javascript">
  
  function handleToolUrls(){
   var t=getToolUrls();
   alert(t);
  }
  
function cleanNode(nodeId){
 var output = document.getElementById(nodeId);
 for (;output.childNodes.length>0;) output.removeChild(output.firstChild);
}

  function gIDval(id){return document.getElementById(id).value;}
  
  function getToolUrls(){
   var tft=document.toolsForm.stringleTool;
   var toolUrls="The aim is to bookmark these with a particular StringLE profile tag ("+gIDval('profileName')+"):\n";
   for (var k=0;k<tft.length;k++) {
    if (tft[k].checked==true) {
     toolUrls+=tft[k].value+"\n";
    }
   }
   return toolUrls;
  }
  </script>
  <script type="text/javascript" 
        src="http://del.icio.us/feeds/json/psychemedia/stringle:profile?count=100"></script>

</head>
<body onload="getTools()">

<div id="doc" class="yui-t7">
   <div id="hd"><h1>StringLE Profile Selector</h1></div>
   <div id="bd">
	<div class="yui-g">
	<div id='about'><h2>About</h2>
	<p><em>StringLE Profiles</em> are predefined profiles - or configurations - of the StringLE environment.
	A StringLE profile defines one or more of:</p>
	<ul>
	<li>the StringLE navigation links that appear in the Grazr widget in the left hand StringLE column;</li>
	<li>the StringLE tool set that appears in the toolbar at the top of the central StringLE panel;</li>
	<li>the web page that is initially loaded into Web tab of the StringLE browser panel;</li>
	</ul>
	<p>Stringle profiles should be saved to delicious with the tag <em>stringle:profile</em>. 
	Although the intention is to feed <em>all</em> bookmarked StringLE profiles into this page, only
	a limited set of profiles are listed here at the current time. If you would like any of your profiles to
	be considered for inclusion here, please bookmark them on delicious with an additional <em>for:psychemedia</em> tag.</p>
	</div><hr />
	<form name="toolsForm">
	<div id="deliName">Your delicious Username: <input id="deliNameInput" type="text" size="20" value='ouseful' />
	<label for="profileTag">Profile/tag name: <input id='profileName' type='textbox' size='20' />
	<!-- <input type="button" value="Save Profile" onclick="handleToolUrls()" /> -->
	<p>This information is used to generate the 'save this' links.</p></div>
	<hr /><div id='toolTypes'>
	<input type='radio' name='tooltype' value="all" checked='checked' onchange="updateTools(this.value)" />All
	<input type='radio' name='tooltype' value="video"  onchange="updateTools(this.value)"/>Video based activity
	<input type='radio' name='tooltype' value="office"  onchange="updateTools(this.value)"/>Office based activity
	<input type='radio' name='tooltype' value="collaboration"  onchange="updateTools(this.value)"/>Collaborative activity 
	<input type='radio' name='tooltype' value="multimedia"  onchange="updateTools(this.value)"/>Multimedia Activity
	<input type='radio' name='tooltype' value="image"  onchange="updateTools(this.value)"/>Image Based Activity
	<!-- <br />	<input type="button" value="View Recommended Profiles" onclick="getTools()" />
	--></div>
	<div id="container"></div>
	
	</form>

<script type="text/javascript">

// http://www.scriptygoddess.com/archives/2007/01/24/javascript-get-or-set-checked-radio-value/
// return the value of the radio button that is checked
// return an empty string if none are checked, or
// there are no radio buttons
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}


    function showImage(img){ return (function(){ img.style.display='inline'; }) }

	function getBookmarkURL(u,d){
	 var deliUser=document.getElementById('deliNameInput').value;
	 var tags=document.getElementById('profileName').value;
	 window.open('http://del.icio.us/'+deliUser+'?url='+u+'&description='+d+'&tags=stringle:profile%20'+encodeURI(tags));
	}

	
    function getTools(){
    var deliUser=document.getElementById('deliNameInput').value;
    var ul = document.createElement('ul');
    ul.setAttribute('id','itemList');
    for (var i=0, post; post = Delicious.posts[i]; i++) {
        var li = document.createElement('li')
        li.setAttribute('class', post.t.join(' '));
        var cb = document.createElement('input');
        cb.setAttribute('type','checkbox');
        cb.setAttribute('name','stringleTool');
        cb.setAttribute('value',post.u);
        cb.setAttribute('class','cb');
        var a = document.createElement('a')
        a.style.marginLeft = '20px'
        var img = document.createElement('img')
        img.style.position = 'absolute'
        img.style.display = 'none'
        img.height = img.width = 16
        img.src = post.u.split('/').splice(0,3).join('/')+'/favicon.ico'
        img.onload = showImage(img);
        a.setAttribute('href', post.u)
        a.appendChild(document.createTextNode(post.d))
        var s=document.createElement('a');
        s.setAttribute('href','javascript:getBookmarkURL("'+encodeURI(post.u)+'","'+escape(post.d)+'")');
        s.appendChild(document.createTextNode('save this...'));
        //li.appendChild(cb)
        var u=document.createElement('a');
        u.setAttribute('href',post.u);
        u.appendChild(document.createTextNode('Show me'));
        li.appendChild(img)
        li.appendChild(a)
        if (post.n){
          var t = document.createTextNode(': '+post.n);
          li.appendChild(t)
        }
        li.appendChild(document.createTextNode(' '));
        li.appendChild(u);
        li.appendChild(document.createTextNode(', '));
        li.appendChild(s);
        ul.appendChild(li)
    }
    var c=document.getElementById('container');
    cleanNode('container');
    c.appendChild(ul);
    }
    

    function updateTools(toolType){
      //alert(toolType+'\n');
      var i=document.getElementById('itemList').getElementsByTagName('li');
      for (j=0;j<i.length;j++)
       if ((toolType=='all')||(i[j].getAttribute('class').indexOf(toolType) != -1)) i[j].style.display='block';
       else i[j].style.display='none';
      //getSelector class
      //if all, display all
      //if particular selection, hide all not selected
    }
    //getTools();
</script>
	</div>

	</div>
   <div id="ft">Want to know more? <a href="http://ouseful.open.ac.uk/stringle"><em>StringLE Info</em></a></div>
</div>
</body>
</html>