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.5em;
  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 .doc_kind {
  78     color: #666;
  79     float: right;
  80     font-size: 8pt;
  81     padding: 0 2px;
  82     margin-left: 0.5ex;
  83     font-weight: bold;
  84 }
  85 </style>
  86
  87 <noscript>
  88 <!--<meta http-equiv="refresh" content="3; URL=Overviews/Categories.html">
  89 <p>JavaScript is not available, redirecting to <a href="Overviews/Categories.html">static category overview</a>...-->
  90 <p>The document browser needs JavaScript.
  91 </noscript>
  92
  93 <script type="text/javascript">
  94 var categorytree = null;
  95 var path = [];
  96
  97 function GotoPath(p) {
  98     path = p.split(">");
  99     var x = escape(p);
 100     if(window.location.hash != x)
 101         window.location.hash = x;
 102     updateTree();
 103 }
 104
 105 function updateTree() {
 106     var el = document.getElementById("browser");
 107     var res = "<tr><td>";
 108     var lev = 0;
 109     var tree = {entries:[],subcats:categorytree};
 110     var p;
 111     var done = 0;
 112     var sel;
 113     var colors = {
 114         "Classes": "#7ab",
 115         "Reference": "#7b9",
 116         "Overviews": "#ca6",
 117         "Guides": "#b87",
 118         "Tutorials": "#b77",
 119     };
 120     link = "";
 121
 122     while(1) {
 123         res += "<div class='result'>";
 124         p=path[lev++];
 125
 126         var l = [];
 127         for(var k in tree.subcats)
 128             l.push(k);
 129         l = l.sort();
 130
 131         sel = "";
 132         for(var i=0;i<l.length;i++) {
 133             var k = l[i];
 134             if(k==p) {
 135                 res += "<div class='cat_selected'>";
 136                 sel = k;
 137             } else
 138                 res += "<div class='category'>";
 139             res += "<a href='javascript:GotoPath(\""+link+k+"\")'>"+k+"</a>";
 140             res += " <span class='cat_count'>("+tree.subcats[k].count+")</span>";
 141             if(k==p)
 142                 res += "<span class='cat_arrow'> &#9658;</span>";
 143             res += "</div>";
 144         }
 145
 146         for(var i=0;i<tree.entries.length;i++) {
 147             var v = tree.entries[i];
 148             var x = v.path.split("/");
 149
 150             res += "<div class='result_doc'><span class='doc_kind' ";
 151             var clr = colors[x[0]];
 152             if(clr) {
 153                 res += "style='color:"+clr+";'";
 154             };
 155             res += ">";
 156             if(v.installed=="extension")
 157                 res += "+";
 158             else if(v.installed=="missing")
 159                 res += "(not installed) ";
 160             res += x[0].toUpperCase()+"</span><a href='"+v.path+".html'>"+v.title+"</a></div><div class='result_summary'>"+v.summary+"</div>";
 161         }
 162
 163         res += "</div>";
 164
 165         if(!p)
 166             break;
 167         tree = tree.subcats[p];
 168         link += p+">";
 169         res += "<td>";
 170         res += "<div class='cat_header'>"+sel+"</div>";
 171         if(!tree) {
 172             res += "<div class='result_summary'>&#9658; Category not found: "+p+"</div>";
 173             break;
 174         }
 175     }
 176     el.innerHTML = res;
 177 }
 178
 179 function countTree(t) {
 180     var x = 0;
 181     for(var k in t.subcats)
 182         x += countTree(t.subcats[k]);
 183     x += t.entries.length;
 184     return t.count = x;
 185 }
 186
 187 function buildCategoryTree() {
 188     var cats = {};
 189     for(var k in docmap) {
 190         var v = docmap[k];
 191
 192         if(v.installed=="extension" && !check_extensions.checked)
 193             continue;
 194
 195         if(filter.value != "all" && v.path.split("/")[0].toLowerCase() != filter.value)
 196             continue;
 197
 198         var c2 = v.categories.match(/[^, ]+[^,]*[^, ]+/g) || ["Uncategorized"];
 199         for(var i=0;i<c2.length;i++) {
 200             var c = c2[i];
 201             if(!cats[c])
 202                 cats[c]=[];
 203             cats[c].push(v);
 204         }
 205     }
 206
 207     var tree = {};
 208     var p,l,e,a;
 209     for(var cat in cats) {
 210         var files = cats[cat];
 211
 212         p=tree;
 213         l=cat.split(">");
 214
 215         for(var i=0;i<l.length;i++) {
 216             var c = l[i];
 217
 218             if(!p[c]) {
 219                 p[c]={};
 220                 p[c].subcats = {};
 221                 p[c].entries = [];
 222                 p[c].count = 0;
 223             }
 224             e=p[c];
 225             p=p[c].subcats;
 226         }
 227
 228         for(var i=0;i<files.length;i++)
 229             e.entries.push(files[i]);
 230
 231         e.entries = e.entries.sort(function(a,b) {
 232             a=a.title; b=b.title;
 233             if(a<b) return -1;
 234             else
 235             if(a>b) return +1;
 236             else
 237             return 0;
 238         });
 239     }
 240
 241     categorytree = tree;
 242
 243     document.getElementById("total_count").innerHTML = countTree({subcats:tree,entries:[],count:0}) + " documents";
 244 }
 245
 246 var check_extensions;
 247 var filter;
 248
 249 window.onload = function() {
 250 //    restoreMenu();
 251     helpRoot="."; fixTOC();
 252     var onChange = function() {
 253         buildCategoryTree();
 254         updateTree();
 255     };
 256
 257     check_extensions = document.getElementById("check_extensions");
 258     check_extensions.onchange = onChange;
 259     filter = document.getElementById("menu_filter");
 260     filter.onchange = onChange;
 261
 262     buildCategoryTree();
 263     GotoPath(unescape(window.location.hash.slice(1)));
 264 }
 265
 266 window.onhashchange = function() {
 267     GotoPath(unescape(window.location.hash.slice(1)));
 268 }
 269
 270 </script>
 271
 272 </head>
 273 <ul id="menubar"></ul>
 274
 275 <body>
 276 <div class='contents'>
 277 <div class='header'>
 278     <div id='label'>SuperCollider</div>
 279     <h1>Document Browser</h1>
 280     <div id='summary'>Browse categories</div>
 281 </div>
 282 <div id="search_checks">
 283 Filter:
 284 <select id="menu_filter">
 285 <option SELECTED value="all">All documents</option>
 286 <option value="classes">Classes only</option>
 287 <option value="reference">Reference only</option>
 288 <option value="guides">Guides only</option>
 289 <option value="tutorials">Tutorials only</option>
 290 <option value="overviews">Overviews only</option>
 291 <option value="other">Other only</option>
 292 </select>
 293 <input type="checkbox" id="check_extensions" checked="true">Include extensions</input>
 294 </div>
 295
 296 <div id="total_count"></div>
 297 <table class="browser" id="browser"></table>
 298 </div>
 299 </body>
 300 </html>
 301