Project: stringle
Code Location: http://stringle.googlecode.com/svn/trunk/trunk
Browse
/
Download File
stringleToolSelect.php 
<html>
<head><title>Stringle Tool 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">
   	a {text-decoration:none;}
   	    h2 {font-size:150%; margin-bottom:10px;}
	hr {margin-top:10px;margin-bottom:20px;}

   	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:tool?count=100"></script>


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

<div id="doc" class="yui-t7">
   <div id="hd"><h1>StringLE Tool Selector</h1></div>
   <div id="bd">
	<div class="yui-g">
	<h2>About</h2>
	<p><em>StringLE Tools</em> are third party online web applications that can be used within the
	StringLE environment.</p>
	<p>Web applications/tools that are appropriate for use within StringLE should be saved to 
	delicious with the tag <em>stringle:tool</em>. 
	Although the intention is to feed <em>all</em> bookmarked StringLE tools into this page, only
	a limited set are listed here at the current time. If you would like any of your preferred tools to
	be considered for inclusion here, please bookmark them on delicious with an additional <em>for:psychemedia</em> tag.</p>
	<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()" /> -->
	</div>
	<p>This information is used to generate the 'save this' links. If you have already bookmarked the resource,
	make it available to a <a href="stringleProfileSelect.php">StringLE Profile</a> by making sure that you
	have tagged it with the <em>stringle:tool</em> tag.</p>
	<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 editors
	<input type='radio' name='tooltype' value="office"  onchange="updateTools(this.value)"/>Office Tools
	<input type='radio' name='tooltype' value="audio"  onchange="updateTools(this.value)"/>Audio Tools 
	<input type='radio' name='tooltype' value="image"  onchange="updateTools(this.value)"/>Photo/Image Editors
	<!-- <br />	<input type="button" value="View Recommended Tools" 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 bookmarkItem(url){
     
	}
	
	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:tool%20'+encodeURI(tags));
	}
	
    function getTools(){

    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)
        li.appendChild(img)
        li.appendChild(a)
        if (post.n){
          var t = document.createTextNode(': '+post.n);
          li.appendChild(t)
        }
        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>