HelpSource/Browse.html

   1 <html>
   2 <head>
   3     <title>Document Browser</title>
   4     <link rel='stylesheet' href='./scdoc.css' type='text/css' />
   5     <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
   6     <script src="docmap.js" type="text/javascript"></script>
   7     <script src="scdoc.js" type="text/javascript"></script>
   8 <style>
   9
  10 .browser {
  11     margin: 0em;
  12     border-collapse: collapse;
  13     margin-top: 1em;
  14 }
  15 .result {
  16     padding: 2px;
  17 }
  18 .browser td {
  19     vertical-align: top;
  20     border: none;
  21 }
  22 .result_doc {
  23     border-bottom: 1px solid #ddd;
  24 /*    margin-top: 0.75em;*/
  25 }
  26 .result_summary {
  27     color: #444;
  28     font-size: 9pt;
  29     max-width: 18em;
  30     margin-bottom: 0.6em;
  31 }
  32 .category, .cat_selected {
  33     margin-bottom: 0.25em;
  34     border-bottom: 1px solid transparent;
  35 }
  36 .cat_selected {
  37     border-bottom: 1px solid #777;
  38 }
  39 .cat_header {
  40     border-bottom: 2px solid #999;
  41     color: #777;
  42 /*    background: #aaa;
  43     color: white;*/
  44     margin-bottom: 0.25em;
  45     padding: 2px;
  46 /*    font-weight: bold;*/
  47 }
  48 .category a {
  49     color: #555;
  50     font-weight: bold;
  51 }
  52 .cat_selected a {
  53     color: #000;
  54     font-weight: bold;
  55 }
  56 .cat_arrow {
  57     float: right;
  58     padding-left: 1ex;
  59     color: #555;
  60 }
  61
  62 #search_checks {
  63     font-size: 9pt;
  64     color: #555;
  65     border-bottom: 1px solid #ddd;
  66     margin-top: 1em;
  67     padding-bottom: 1em;
  68 }
  69 .cat_count {
  70     color: #777;
  71     font-size: 9pt;
  72 }
  73 #total_count {
  74     font-size: 9pt;
  75     color: #777;
  76 }
  77 </style>
  78
  79 <noscript>
  80 <!--<meta http-equiv="refresh" content="3; URL=Overviews/Categories.html">
  81 <p>JavaScript is not available, redirecting to <a href="Overviews/Categories.html">static category overview</a>...-->
  82 <p>The document browser needs JavaScript.
  83 </noscript>
  84
  85 <script type="text/javascript">
  86 var categorytree = null;
  87 var path = [];
  88
  89 function GotoPath(p) {
  90     path = p.split(">");
  91     var x = escape(p);
  92     if(window.location.hash != x)
  93         window.location.hash = x;
  94     updateTree();
  95 }
  96
  97 function updateTree() {
  98     var el = document.getElementById("browser");
  99     var res = "<tr><td>";
 100     var lev = 0;
 101     var tree = {entries:[],subcats:categorytree};
 102     var p;
 103     var done = 0;
 104     var sel;
 105     link = "";
 106
 107     while(1) {
 108         res += "<div class='result'>";
 109         p=path[lev++];
 110
 111         var l = [];
 112         for(var k in tree.subcats)
 113             l.push(k);
 114         l = l.sort();
 115
 116         sel = "";
 117         for(var i=0;i<l.length;i++) {
 118             var k = l[i];
 119             if(k==p) {
 120                 res += "<div class='cat_selected'>";
 121                 sel = k;
 122             } else
 123                 res += "<div class='category'>";
 124             res += "<a href='javascript:GotoPath(\""+link+k+"\")'>"+k+"</a>";
 125             res += " <span class='cat_count'>("+tree.subcats[k].count+")</span>";
 126             if(k==p)
 127                 res += "<span class='cat_arrow'> &#9658;</span>";
 128             res += "</div>";
 129         }
 130
 131         for(var i=0;i<tree.entries.length;i++) {
 132             var v = tree.entries[i];
 133             var x = v.path.split("/");
 134
 135             res += "<div class='result_doc'><a href='"+v.path+".html'>"+v.title+"</a> <span class='soft'>["+x[0];
 136             if(v.installed=="extension")
 137                 res += " +";
 138             else if(v.installed=="missing")
 139                 res += " - missing!";
 140             res += "]</span></div><div class='result_summary'>"+v.summary+"</div>";
 141         }
 142
 143         res += "</div>";
 144
 145         if(!p)
 146             break;
 147         tree = tree.subcats[p];
 148         link += p+">";
 149         res += "<td>";
 150         res += "<div class='cat_header'>"+sel+"</div>";
 151         if(!tree) {
 152             res += "<div class='result_summary'>&#9658; Category not found: "+p+"</div>";
 153             break;
 154         }
 155     }
 156     el.innerHTML = res;
 157 }
 158
 159 function countTree(t) {
 160     var x = 0;
 161     for(var k in t.subcats)
 162         x += countTree(t.subcats[k]);
 163     x += t.entries.length;
 164     return t.count = x;
 165 }
 166
 167 function buildCategoryTree() {
 168     var cats = {};
 169     for(var k in docmap) {
 170         var v = docmap[k];
 171
 172         if(v.installed=="extension" && !check_extensions.checked)
 173             continue;
 174
 175         if(filter.value != "all" && v.path.split("/")[0].toLowerCase() != filter.value)
 176             continue;
 177
 178         var c2 = v.categories.match(/[^, ]+[^,]*[^, ]+/g) || ["Uncategorized"];
 179         for(var i=0;i<c2.length;i++) {
 180             var c = c2[i];
 181             if(!cats[c])
 182                 cats[c]=[];
 183             cats[c].push(v);
 184         }
 185     }
 186
 187     var tree = {};
 188     var p,l,e,a;
 189     for(var cat in cats) {
 190         var files = cats[cat];
 191
 192         p=tree;
 193         l=cat.split(">");
 194
 195         for(var i=0;i<l.length;i++) {
 196             var c = l[i];
 197
 198             if(!p[c]) {
 199                 p[c]={};
 200                 p[c].subcats = {};
 201                 p[c].entries = [];
 202                 p[c].count = 0;
 203             }
 204             e=p[c];
 205             p=p[c].subcats;
 206         }
 207
 208         for(var i=0;i<files.length;i++)
 209             e.entries.push(files[i]);
 210
 211         e.entries = e.entries.sort(function(a,b) {
 212             a=a.title; b=b.title;
 213             if(a<b) return -1;
 214             else
 215             if(a>b) return +1;
 216             else
 217             return 0;
 218         });
 219     }
 220
 221     categorytree = tree;
 222
 223     document.getElementById("total_count").innerHTML = countTree({subcats:tree,entries:[],count:0}) + " documents";
 224 }
 225
 226 var check_extensions;
 227 var filter;
 228
 229 window.onload = function() {
 230 //    restoreMenu();
 231     helpRoot="."; fixTOC();
 232     var onChange = function() {
 233         buildCategoryTree();
 234         updateTree();
 235     };
 236
 237     check_extensions = document.getElementById("check_extensions");
 238     check_extensions.onchange = onChange;
 239     filter = document.getElementById("menu_filter");
 240     filter.onchange = onChange;
 241
 242     buildCategoryTree();
 243     GotoPath(unescape(window.location.hash.slice(1)));
 244 }
 245
 246 window.onhashchange = function() {
 247     GotoPath(unescape(window.location.hash.slice(1)));
 248 }
 249
 250 </script>
 251
 252 </head>
 253 <ul id="menubar"></ul>
 254
 255 <body>
 256 <div class='contents'>
 257 <div class='header'>
 258     <div id='label'>SuperCollider</div>
 259     <h1>Document Browser</h1>
 260     <div id='summary'>Browse categories</div>
 261 </div>
 262 <div id="search_checks">
 263 Filter:
 264 <select id="menu_filter">
 265 <option SELECTED value="all">All documents</option>
 266 <option value="classes">Classes only</option>
 267 <option value="reference">Reference only</option>
 268 <option value="guides">Guides only</option>
 269 <option value="tutorials">Tutorials only</option>
 270 <option value="overviews">Overviews only</option>
 271 <option value="other">Other only</option>
 272 </select>
 273 <input type="checkbox" id="check_extensions" checked="true">Include extensions</input>
 274 </div>
 275
 276 <div id="total_count"></div>
 277 <table class="browser" id="browser"></table>
 278 </div>
 279 </body>
 280 </html>
 281