/* This code is to convert
s in a web page into a slide show by writing the code for a popup automatically To use it, set up divs in the parent page with the id of 'slide_' and the id of each slide title e.g.
gives a slide called 'Guidelines' e.g.
gives a slide called 'Guidelines' with incremental display of bullet points template:
*/ function printme(text,name){ // opens a new window to start the slideshow winID = window.open('',name); with(winID.document){ write(text); close(); } // end with winID.focus(); } // end fn printme function startSlideShow(){ slideHTML = ''; // set up the variable to hold the HTML slideHTML += ''; slideHTML += ''; slideHTML += ''; slideHTML += '' + document.title + '<\/title>'; slideHTML += '<meta name="version" content="S5 1.1" />'; slideHTML += '<meta name="defaultView" content="slideshow" />' slideHTML += '<link rel="stylesheet" href="http://elc.polyu.edu.hk/cill/staff/ui51/default/slides2.css" type="text/css" media="projection" id="slideProj" />'; slideHTML += '<link rel="stylesheet" href="http://elc.polyu.edu.hk/cill/staff/ui51/default/outline.css" type="text/css" media="screen" id="outlineStyle" />' slideHTML += '<link rel="stylesheet" href="http://elc.polyu.edu.hk/cill/staff/ui51/default/opera.css" type="text/css" media="projection" id="operaFix" />'; slideHTML += '<link rel="stylesheet" href="http://elc.polyu.edu.hk/cill/staff/ui51/default/print.css" type="text/css" media="print" id="slidePrint" />'; slideHTML += '<script src="http://elc.polyu.edu.hk/cill/staff/ui51/default/slides.js" type="text/javascript"><\/script>'; slideHTML += '<script src="http://elc.polyu.edu.hk/cill/staff/ui51/default/deselect.js" type="text/javascript"><\/script>'; // style to hide things in slides slideHTML += '<style TYPE="text/css">'; slideHTML += ' .hideInSlideshow {'; slideHTML += ' display: none;'; slideHTML += ' } </style>'; slideHTML += '<\/head>'; slideHTML += '<body>'; slideHTML += '<div class="layout">'; slideHTML += '<div id="currentSlide"><\/div>'; slideHTML += '<div id="header">'; slideHTML += '<div><img style="width: 100%; height: 100%;" src="http://elc.polyu.edu.hk/cill/staff/ui51/default/ppt_top3.jpg" alt="Top Image"></div>'; slideHTML += '<table id="headerTable" border="0" width="100%" style="position: absolute; top: 0; left 0; height: 2.5em;">'; slideHTML += '<tr>'; slideHTML += '<td valign="top">'; slideHTML += '<img src="http://elc.polyu.edu.hk/cill/logo/polyUlogo6.gif" style="position: absolute; top: 0px; left: 0px; margin-bottom: 0.3em;" alt="PolyU Logo">'; slideHTML += '</td>'; slideHTML += '<td style="height: 2.5em; border-right: 1.5em;" align="right">'; slideHTML += '<img src="http://elc.polyu.edu.hk/cill/logo/elclogo42.gif" alt="ELC Logo" valign="middle" style="margin-bottom: 0.5em;">'; slideHTML += '</td><td style="width: 2em;">'; slideHTML += '</td>'; slideHTML += '</tr>'; slideHTML += '</table>'; slideHTML += '<\/div>'; slideHTML += '<div id="footer">'; slideHTML += '<img style="position: relative; top: -1em; width: 100%; height: 100%;" src="http://elc.polyu.edu.hk/cill/staff/ui51/default/ppt_footer_yellow_triangle.jpg" alt="Footer Image">'; slideHTML += '<h2>' + document.title + '<\/h2>'; slideHTML += '<div id="controls">'; slideHTML += '<\/div>'; slideHTML += '<\/div>'; slideHTML += '<\/div>'; slideHTML += '<div class="presentation">'; // Title slide (not included in the slide show page numbering) slideHTML += ' <div class="slide">'; slideHTML += '<h1 style="visibility: hidden;">'; slideHTML += 'Title'; // slide title slideHTML += '<\/h1>'; slideHTML += '<h1 align = "center">'; slideHTML += document.title; slideHTML += '<\/h1>'; slideHTML += '<div class="handout">'; slideHTML += '<\/div>'; slideHTML += '<\/div>'; // get a list of the divs on the page var divList = document.getElementsByTagName('div'); //alert(divList[0]['class']); // make a list of slideDivs for(sd=0;sd<=divList.length;sd++){ if((divList[sd] && divList[sd]['id'])){ //alert(divList[sd]['id']); thisDivId = divList[sd]['id']; //alert('thisDivId =' + thisDivId ); if(thisDivId.substring(0,6) == "slide_"){ // it's a slide //alert('Making slide' + thisDivId); slideHTML += createSlide(thisDivId.substring(6), document.getElementById(thisDivId).innerHTML); } // end if it's a slide if(thisDivId.substring(0,7) == "slidei_"){ // it's a slide with bullets to show incrementally //alert('Making incremental slide' + thisDivId); slideHTML += createIncrementalSlide(thisDivId.substring(7), document.getElementById(thisDivId).innerHTML); } // end if it's a slide } // end if } // end for // End slide slideHTML += '<div class="slide">'; slideHTML += '<h1 style="visibility: hidden;">'; slideHTML += 'End'; // slide title slideHTML += '<\/h1>'; slideHTML += '<h3 align = "center">'; slideHTML += ' <br / > <br / >The End'; slideHTML += '<\/h3>'; slideHTML += '<div class="handout">'; slideHTML += '<\/div>'; slideHTML += '<\/div>'; printme(slideHTML,'slidewin'); } // end fn startSlideShow var newLineMakersRegExp = /\<(br|\n|li|\/li|ul|\/ul|p)\>/gi; function calcNumChars(txt){ // work outhow much to zoom the text size // arg is the text of s1, s2 and s3 // each slide takes about 1000 characters charCount = txt.length; var newLines = new Array(); newLines = txt.match(newLineMakersRegExp); equivalentChars = 0; if(newLines && newLines.length) equivalentChars = newLines.length * 70; totalCharCount = charCount + equivalentChars; percentageIncrease = 15; // percentage increase for each step below charCountDecrease = 120; charCountThreshold = 800; if(totalCharCount >= charCountThreshold ) zoomPercentage = 100; if(totalCharCount < charCountThreshold ) zoomPercentage = 100 + (percentageIncrease * 1); if(totalCharCount < (charCountThreshold - (charCountDecrease * 1))) zoomPercentage = 100 + (percentageIncrease * 2); if(totalCharCount < (charCountThreshold - (charCountDecrease * 2))) zoomPercentage = 100 + (percentageIncrease * 3); if(totalCharCount < (charCountThreshold - (charCountDecrease * 3))) zoomPercentage = 100 + (percentageIncrease * 4); if(totalCharCount < (charCountThreshold - (charCountDecrease * 4))) zoomPercentage = 100 + (percentageIncrease * 5); if(totalCharCount < (charCountThreshold - (charCountDecrease * 5))) zoomPercentage = 100 + (percentageIncrease * 6); //alert('txt = ' + txt + '\n charCount = ' + charCount + '\n newLines = ' + newLines + '\n Num lines = ' + newLines.length + '\n totalCharCount = ' + totalCharCount + '\n zoomPercentage = ' + zoomPercentage ); return zoomPercentage; } // end fn calcNumChars var tableStartCode = '<table align="center" border="0"><tr><td>'; var tableEndCode = '<\/td><\/tr><\/table>'; function createSlide(stitle,s1,s2,s3){ if(stitle || s1 || s2 || s3){ cSlideHTML = ''; s1 = removeBlockQuote(s1); cSlideHTML += '<div class="slide">'; if(stitle) cSlideHTML += '<h1>' + stitle +'<\/h1>'; // slide title cSlideHTML += '<div style="font-size: ' + calcNumChars(s1 + s2 + s3) + '%;">'; if(s1) cSlideHTML += tableStartCode + s1 + tableEndCode + '<br>'; // point one if(s2) cSlideHTML += tableStartCode + s2 + tableEndCode + '<br>'; // point 2 if(s3) cSlideHTML += tableStartCode + s2 + tableEndCode + '<br>'; // point 3 cSlideHTML += '<\/div>'; //cSlideHTML += '<\/ul>'; cSlideHTML += '<div class="handout">'; cSlideHTML += '<\/div>'; cSlideHTML += '<\/div>'; } // end if stitle,s1,s2,s3 return cSlideHTML; } // end fn createSlide // reg exps var ulrx = /\<ul\>/gi; var eulrx = /\<\/ul\>/gi; var prx = /\<p\>/gi; var eprx = /\<\/p\>/gi; function createIncrementalSlide(stitle,s1){ if(stitle || s1){ cSlideHTML = ''; s1 = removeBlockQuote(s1); var bulletContents = new Array(); bulletContents = s1.split('<li>'); cSlideHTML += '<div class="slide">'; if(stitle) cSlideHTML += '<h1>' + stitle +'<\/h1>'; // slide title //cSlideHTML += '<ul class="incremental" style="display: table; margin-left: auto; margin-right: auto;">'; if(s1.match(ulrx)){ // there's a <ul> tag if(document.all) s1 = s1.replace(ulrx,'<ul class="incremental">'); else s1 = s1.replace(ulrx,'<ul class="incremental" onmouseover="deselect()" style="display: table; margin-left: auto; margin-right: auto;">') //alert(s1); s1 = s1.replace(ulrx,''); s1 = s1.replace(eulrx,''); } // end if else{ // no <ul> tags // so add <ul> and replace <p> with <li> if(document.all) s1 = '<ul class="incremental">' + s1; else s1 = '<ul class="incremental" onmouseover="deselect()" style="display: table; margin-left: auto; margin-right: auto;">' + s1; s1 = s1.replace(prx,'<li>'); s1 = s1.replace(eprx,'</li>'); } // end else if(s1) cSlideHTML += s1 + '<br>'; // point one cSlideHTML += '<\/ul>'; cSlideHTML += '<div class="handout">'; cSlideHTML += '<\/div>'; cSlideHTML += '<\/div>'; } // end if stitle,s1,s2,s3,s4,s5 return cSlideHTML; } // end fn createSlide var buttonCode = '<form name="slideshowButtonForm">'; buttonCode += '<p><b>View</b><br>This page can be viewed as a slideshow: '; buttonCode += '<input type="button" value="Start Slideshow" onClick="startSlideShow()">'; buttonCode += '</p></form>'; document.write(buttonCode); var bqrx = /\<(\/)?blockquote\>/gi; function removeBlockQuote(txt){ // because it messes things up txt = txt.replace(bqrx,''); return txt; } // end fn removeBlockQuote document.write(' <style type="text/css">.hideInEx {display: none;}</style>');