From 1d319058fde660cd1e6cd70a510c150f2cffc15c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20=C3=85kre=20Solberg?= <andreas.solberg@uninett.no> Date: Tue, 24 Feb 2009 06:40:09 +0000 Subject: [PATCH] Statistics module switching to jquery tabs git-svn-id: https://simplesamlphp.googlecode.com/svn/trunk@1307 44740490-163a-0410-bde0-09ae8108e29a --- .../statistics/templates/statistics-tpl.php | 78 +++++----------- www/resources/js/tabs/AddCSS.js | 59 ------------ www/resources/js/tabs/addclasskillclass.js | 14 --- www/resources/js/tabs/attachevent.js | 34 ------- www/resources/js/tabs/tabtastic.js | 92 ------------------- 5 files changed, 25 insertions(+), 252 deletions(-) delete mode 100644 www/resources/js/tabs/AddCSS.js delete mode 100644 www/resources/js/tabs/addclasskillclass.js delete mode 100644 www/resources/js/tabs/attachevent.js delete mode 100644 www/resources/js/tabs/tabtastic.js diff --git a/modules/statistics/templates/statistics-tpl.php b/modules/statistics/templates/statistics-tpl.php index 34f968948..aad0fdc5a 100644 --- a/modules/statistics/templates/statistics-tpl.php +++ b/modules/statistics/templates/statistics-tpl.php @@ -1,55 +1,33 @@ <?php -$this->data['header'] = 'Statistics'; -$this->includeAtTemplateBase('includes/header.php'); +$this->data['header'] = 'SimpleSAMLphp Statistics'; + +/* echo '<script type="text/javascript" src="/' . $this->data['baseurlpath'] . 'resources/js/tabs/addclasskillclass.js"></script>'; echo '<script type="text/javascript" src="/' . $this->data['baseurlpath'] . 'resources/js/tabs/attachevent.js"></script>'; echo '<script type="text/javascript" src="/' . $this->data['baseurlpath'] . 'resources/js/tabs/addcss.js"></script>'; echo '<script type="text/javascript" src="/' . $this->data['baseurlpath'] . 'resources/js/tabs/tabtastic.js"></script>'; +*/ -?> +$this->data['head'] = '<script type="text/javascript" src="/' . $this->data['baseurlpath'] . 'resources/jquery.js"></script>'; +$this->data['head'] .= '<script type="text/javascript" src="/' . $this->data['baseurlpath'] . 'resources/jquery-ui.js"></script>'; +$this->data['head'] .= '<link rel="stylesheet" media="screen" type="text/css" href="/' . $this->data['baseurlpath'] . 'resources/uitheme/jquery-ui-themeroller.css" />'; - <style type="text/css" media="all"> -#content .tabset_tabs { - margin:0; padding:0; - list-style-type:none; position:relative; z-index:2; white-space:nowrap -} -#content .tabset_tabs li { - margin:0; - padding: 0px; - display:inline; - font-family: sans-serif; - font-size: medium; - font-weight: normal; -} -#content .tabset_tabs a { - color:#bbb ! important; - background-color:#e8e8e8 ! important; - border:1px solid #aaa; text-decoration:none; - padding:0 2em; - -/* border-left-width:1px; */ - border-bottom:none -} -#content .tabset_tabs a:hover { - color:#666; - background-color:#eee; -} -#content .tabset_tabs a.active { - color:black ! important; background-color:white ! important; border-color:black; border-left-width:1px; cursor:default; border-bottom:white; padding-top:1px; padding-bottom:1px; -} +$this->data['head'] .= '<script type="text/javascript"> -#content .tabset_tabs li.firstchild a { border-left-width:1px } +$(document).ready(function() { + $("#tabdiv > ul").tabs(); +}); +</script>'; -#content .tabset_content { - border:1px solid black; background-color:white; position:relative; z-index:1; padding:0.5em 1em; display:none; - top: -3px; -} -#content .tabset_label { display:none } -#content .tabset_content_active { display:block } +$this->includeAtTemplateBase('includes/header.php'); +?> + + <style type="text/css" media="all"> +.ui-tabs-panel { padding: .5em } .tableview { border-collapse: collapse; @@ -81,7 +59,7 @@ echo '<script type="text/javascript" src="/' . $this->data['baseurlpath'] . 'res echo('<h1>'. $this->data['available.rules'][$this->data['selected.rule']]['name'] . '</h1>'); echo('<p>' . $this->data['available.rules'][$this->data['selected.rule']]['descr'] . '</p>'); -echo '<div class="selecttime" style="border: 1px solid #999; background: #ccc; margin: .5em; padding: .5em">'; +echo '<div class="selecttime" style="border: 1px solid #ccc; background: #eee; margin: 5px 0px; padding: .5em">'; echo '<div style="display: inline">'; echo '<form style="display: inline"><select onChange="submit();" name="rule">'; foreach ($this->data['available.rules'] AS $key => $rule) { @@ -131,27 +109,22 @@ echo '</select></form>'; echo '</div>'; -echo '<br style="clear: both; height: 0px">'; +echo '<div style="clear: both; height: 0px"></div>'; echo '</div>'; -echo '<ul class="tabset_tabs"> - <li><a href="#graph" class="active">Graph</a></li> +echo '<div id="tabdiv"><ul class="tabset_tabs"> + <li><a href="#graph">Graph</a></li> <li><a href="#table">Table</a></li> <li><a href="#debug">Debug</a></li> </ul>'; echo ' -<div id="graph" class="tabset_content"> - <h2 class="tabset_label">Graph</h2> -'; +<div id="graph" class="tabset_content">'; echo '<img src="' . htmlspecialchars($this->data['imgurl']) . '" />'; - - - echo '</div>'; # end graph content. @@ -161,7 +134,7 @@ echo '</div>'; # end graph content. */ $classint = array('odd', 'even'); $i = 0; echo '<div id="table" class="tabset_content"> - <h2 class="tabset_label">Table</h2> + <table class="tableview"><tr><th class="value">Value</th><th class="category">Data range</th>'; foreach ( $this->data['summaryDataset'] as $key => $value ) { $clint = $classint[$i++ % 2]; @@ -180,9 +153,7 @@ echo '</table></div>'; -echo '<div id="debug" class="tabset_content" style="max-height: 400px; overflow-y: scroll"> - <h2 class="tabset_label">Debug</h2> -'; +echo '<div id="debug" >'; @@ -201,6 +172,7 @@ echo '</table>'; echo '</div>'; # End debug tab content +echo('</div>'); # End tab div diff --git a/www/resources/js/tabs/AddCSS.js b/www/resources/js/tabs/AddCSS.js deleted file mode 100644 index a6c9f421b..000000000 --- a/www/resources/js/tabs/AddCSS.js +++ /dev/null @@ -1,59 +0,0 @@ -//*** This code is copyright 2002-2003 by Gavin Kistner, gavin@refinery.com -//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt -//*** Reuse or modification is free provided you abide by the terms of that license. -//*** (Including the first two lines above in your source code satisfies the conditions.) - -// Add a new stylesheet to the document; -// url [optional] A url to an external stylesheet to use -// idx [optional] The index in document.styleSheets to insert the new sheet before -function AddStyleSheet(url,idx){ - var css,before=null,head=document.getElementsByTagName("head")[0]; - - if (document.createElement){ - if (url){ - css = document.createElement('link'); - css.rel = 'stylesheet'; - css.href = url; - } else css = document.createElement('style'); - css.media = 'all'; - css.type = 'text/css'; - - if (idx>=0){ - for (var i=0,ct=0,len=head.childNodes.length;i<len;i++){ - var el = head.childNodes[i]; - if (!el.tagName) continue; - var tagName = el.tagName.toLowerCase(); - if (ct==idx){ - before = el; - break; - } - if (tagName=='style' || tagName=='link' && (el.rel && el.rel.toLowerCase()=='stylesheet' || el.type && el.type.toLowerCase()=='text/css') ) ct++; - } - } - head.insertBefore(css,before); - - return document.styleSheets[before?idx:document.styleSheets.length-1]; - } else return alert("I can't create a new stylesheet for you. Sorry."); -} -// e.g. var newBlankSheetAfterAllOthers = AddStyleSheet(); -// e.g. var newBlankSheetBeforeAllOthers = AddStyleSheet(null,0); -// e.g. var externalSheetAfterOthers = AddStyleSheet('http://phrogz.net/JS/Classes/docs.css'); -// e.g. var externalSheetBeforeOthers = AddStyleSheet('http://phrogz.net/JS/Classes/docs.css',0); - - -// Cross-browser method for inserting a new rule into an existing stylesheet. -// ss - The stylesheet to stick the new rule in -// selector - The string value to use for the rule selector -// styles - The string styles to use with the rule -function AddRule(ss,selector,styles){ - if (!ss) return false; - if (ss.insertRule) return ss.insertRule(selector+' {'+styles+'}',ss.cssRules.length); - if (ss.addRule){ - ss.addRule(selector,styles); - return true; - } - return false; -} - -// e.g. AddRule( document.styleSheets[0] , 'a:link' , 'color:blue; text-decoration:underline' ); -// e.g. AddRule( AddStyleSheet() , 'hr' , 'display:none' ); diff --git a/www/resources/js/tabs/addclasskillclass.js b/www/resources/js/tabs/addclasskillclass.js deleted file mode 100644 index f199fc8a3..000000000 --- a/www/resources/js/tabs/addclasskillclass.js +++ /dev/null @@ -1,14 +0,0 @@ -//*** This code is copyright 2002-2003 by Gavin Kistner and Refinery; www.refinery.com -//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt -//*** Reuse or modification is free provided you abide by the terms of that license. -//*** (Including the first two lines above in your source code satisfies the conditions.) - -//***Adds a new class to an object, preserving existing classes -function AddClass(obj,cName){ KillClass(obj,cName); return obj && (obj.className+=(obj.className.length>0?' ':'')+cName); } - -//***Removes a particular class from an object, preserving other existing classes. -function KillClass(obj,cName){ return obj && (obj.className=obj.className.replace(new RegExp("^"+cName+"\\b\\s*|\\s*\\b"+cName+"\\b",'g'),'')); } - -//***Returns true if the object has the class assigned, false otherwise. -function HasClass(obj,cName){ return (!obj || !obj.className)?false:(new RegExp("\\b"+cName+"\\b")).test(obj.className) } - diff --git a/www/resources/js/tabs/attachevent.js b/www/resources/js/tabs/attachevent.js deleted file mode 100644 index eaad7b856..000000000 --- a/www/resources/js/tabs/attachevent.js +++ /dev/null @@ -1,34 +0,0 @@ -//*** This code is copyright 2003 by Gavin Kistner, gavin@refinery.com -//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt -//*** Reuse or modification is free provided you abide by the terms of that license. -//*** (Including the first two lines above in your source code satisfies the conditions.) - - -//***Cross browser attach event function. For 'evt' pass a string value with the leading "on" omitted -//***e.g. AttachEvent(window,'load',MyFunctionNameWithoutParenthesis,false); - -function AttachEvent(obj,evt,fnc,useCapture){ - if (!useCapture) useCapture=false; - if (obj.addEventListener){ - obj.addEventListener(evt,fnc,useCapture); - return true; - } else if (obj.attachEvent) return obj.attachEvent("on"+evt,fnc); - else{ - MyAttachEvent(obj,evt,fnc); - obj['on'+evt]=function(){ MyFireEvent(obj,evt) }; - } -} - -//The following are for browsers like NS4 or IE5Mac which don't support either -//attachEvent or addEventListener -function MyAttachEvent(obj,evt,fnc){ - if (!obj.myEvents) obj.myEvents={}; - if (!obj.myEvents[evt]) obj.myEvents[evt]=[]; - var evts = obj.myEvents[evt]; - evts[evts.length]=fnc; -} -function MyFireEvent(obj,evt){ - if (!obj || !obj.myEvents || !obj.myEvents[evt]) return; - var evts = obj.myEvents[evt]; - for (var i=0,len=evts.length;i<len;i++) evts[i](); -} diff --git a/www/resources/js/tabs/tabtastic.js b/www/resources/js/tabs/tabtastic.js deleted file mode 100644 index 4dbf2ef78..000000000 --- a/www/resources/js/tabs/tabtastic.js +++ /dev/null @@ -1,92 +0,0 @@ -//*** This library is copyright 2004 by Gavin Kistner, gavin@refinery.com -//*** It is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt -//*** Reuse or modification is free provided you abide by the terms of that license. -//*** (Including the first two lines above in your source code mostly satisfies the conditions.) - -//*** Tabtastic -- see http://phrogz.net/JS/Tabstatic/index.html -//*** Version 1.0 20040430 Initial release. -//*** 1.0.2 20040501 IE5Mac, IE6Win compat. -//*** 1.0.3 20040501 Removed IE5Mac/Opera7 compat. (see http://phrogz.net/JS/Tabstatic/index.html#notes) -//*** 1.0.4 20040521 Added scroll-back hack to prevent scrolling down to page anchor. Then commented out :) - -AttachEvent(window,'load',function(){ - var tocTag='ul',tocClass='tabset_tabs',tabTag='a',contentClass='tabset_content'; - - - function FindEl(tagName,evt){ - if (!evt && window.event) evt=event; - if (!evt) return DebugOut("Can't find an event to handle in DLTabSet::SetTab",0); - var el=evt.currentTarget || evt.srcElement; - while (el && (!el.tagName || el.tagName.toLowerCase()!=tagName)) el=el.parentNode; - return el; - } - - function SetTabActive(tab){ - if (tab.tabTOC.activeTab){ - if (tab.tabTOC.activeTab==tab) return; - KillClass(tab.tabTOC.activeTab,'active'); - if (tab.tabTOC.activeTab.tabContent) KillClass(tab.tabTOC.activeTab.tabContent,'tabset_content_active'); - //if (tab.tabTOC.activeTab.tabContent) tab.tabTOC.activeTab.tabContent.style.display=''; - if (tab.tabTOC.activeTab.prevTab) KillClass(tab.tabTOC.activeTab.previousTab,'preActive'); - if (tab.tabTOC.activeTab.nextTab) KillClass(tab.tabTOC.activeTab.nextTab,'postActive'); - } - AddClass(tab.tabTOC.activeTab=tab,'active'); - if (tab.tabContent) AddClass(tab.tabContent,'tabset_content_active'); - //if (tab.tabContent) tab.tabContent.style.display='block'; - if (tab.prevTab) AddClass(tab.prevTab,'preActive'); - if (tab.nextTab) AddClass(tab.nextTab,'postActive'); - } - function SetTabFromAnchor(evt){ - //setTimeout('document.body.scrollTop='+document.body.scrollTop,1); - SetTabActive(FindEl('a',evt).semanticTab); - } - - - function Init(){ - window.everyTabThereIsById = {}; - - var anchorMatch = /#([a-z][\w.:-]*)$/i,match; - var activeTabs = []; - - var tocs = document.getElementsByTagName(tocTag); - for (var i=0,len=tocs.length;i<len;i++){ - var toc = tocs[i]; - if (!HasClass(toc,tocClass)) continue; - - var lastTab; - var tabs = toc.getElementsByTagName(tabTag); - for (var j=0,len2=tabs.length;j<len2;j++){ - var tab = tabs[j]; - if (!tab.href || !(match=anchorMatch.exec(tab.href))) continue; - if (lastTab){ - tab.prevTab=lastTab; - lastTab.nextTab=tab; - } - tab.tabTOC=toc; - everyTabThereIsById[tab.tabID=match[1]]=tab; - tab.tabContent = document.getElementById(tab.tabID); - - if (HasClass(tab,'active')) activeTabs[activeTabs.length]=tab; - - lastTab=tab; - } - AddClass(toc.getElementsByTagName('li')[0],'firstchild'); - } - - for (var i=0,len=activeTabs.length;i<len;i++){ - SetTabActive(activeTabs[i]); - } - - for (var i=0,len=document.links.length;i<len;i++){ - var a = document.links[i]; - if (!(match=anchorMatch.exec(a.href))) continue; - if (a.semanticTab = everyTabThereIsById[match[1]]) AttachEvent(a,'click',SetTabFromAnchor,false); - } - - if ((match=anchorMatch.exec(location.href)) && (a=everyTabThereIsById[match[1]])) SetTabActive(a); - - //Comment out the next line and include the file directly if you need IE5Mac or Opera7 support. - AddStyleSheet('tabtastic.css',0); - } - Init(); -},false); \ No newline at end of file -- GitLab