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             var link = v.hasOwnProperty("oldhelp")?v.oldhelp:(v.path+".html");
 161             res += x[0].toUpperCase()+"</span><a href='"+link+"'>"+v.title+"</a></div><div class='result_summary'>"+v.summary+"</div>";
 162         }
 163
 164         res += "</div>";
 165
 166         if(!p)
 167             break;
 168         tree = tree.subcats[p];
 169         link += p+">";
 170         res += "<td>";
 171         res += "<div class='cat_header'>"+sel+"</div>";
 172         if(!tree) {
 173             res += "<div class='result_summary'>&#9658; Category not found: "+p+"</div>";
 174             break;
 175         }
 176     }
 177     el.innerHTML = res;
 178 }
 179
 180 function countTree(t) {
 181     var x = 0;
 182     for(var k in t.subcats)
 183         x += countTree(t.subcats[k]);
 184     x += t.entries.length;
 185     return t.count = x;
 186 }
 187
 188 function buildCategoryTree() {
 189     var cats = {};
 190     for(var k in docmap) {
 191         var v = docmap[k];
 192
 193         if(v.installed=="extension" && !check_extensions.checked)
 194             continue;
 195
 196         if(filter.value != "all" && v.path.split("/")[0].toLowerCase() != filter.value)
 197             continue;
 198
 199         var c2 = v.categories.match(/[^, ]+[^,]*[^, ]+/g) || ["Uncategorized"];
 200         for(var i=0;i<c2.length;i++) {
 201             var c = c2[i];
 202             if(!cats[c])
 203                 cats[c]=[];
 204             cats[c].push(v);
 205         }
 206     }
 207
 208     var tree = {};
 209     var p,l,e,a;
 210     for(var cat in cats) {
 211         var files = cats[cat];
 212
 213         p=tree;
 214         l=cat.split(">");
 215
 216         for(var i=0;i<l.length;i++) {
 217             var c = l[i];
 218
 219             if(!p[c]) {
 220                 p[c]={};
 221                 p[c].subcats = {};
 222                 p[c].entries = [];
 223                 p[c].count = 0;
 224             }
 225             e=p[c];
 226             p=p[c].subcats;
 227         }
 228
 229         for(var i=0;i<files.length;i++)
 230             e.entries.push(files[i]);
 231
 232         e.entries = e.entries.sort(function(a,b) {
 233             a=a.title; b=b.title;
 234             if(a<b) return -1;
 235             else
 236             if(a>b) return +1;
 237             else
 238             return 0;
 239         });
 240     }
 241
 242     categorytree = tree;
 243
 244     document.getElementById("total_count").innerHTML = countTree({subcats:tree,entries:[],count:0}) + " documents";
 245 }
 246
 247 var check_extensions;
 248 var filter;
 249
 250 window.onload = function() {
 251 //    restoreMenu();
 252     helpRoot="."; fixTOC();
 253     var onChange = function() {
 254         buildCategoryTree();
 255         updateTree();
 256     };
 257
 258     check_extensions = document.getElementById("check_extensions");
 259     check_extensions.onchange = onChange;
 260     filter = document.getElementById("menu_filter");
 261     filter.onchange = onChange;
 262
 263     buildCategoryTree();
 264     GotoPath(unescape(window.location.hash.slice(1)));
 265 }
 266
 267 window.onhashchange = function() {
 268     GotoPath(unescape(window.location.hash.slice(1)));
 269 }
 270
 271 </script>
 272
 273 </head>
 274 <ul id="menubar"></ul>
 275
 276 <body>
 277 <div class='contents'>
 278 <div class='header'>
 279     <div id='label'>SuperCollider</div>
 280     <h1>Document Browser</h1>
 281     <div id='summary'>Browse categories</div>
 282 </div>
 283 <div id="search_checks">
 284 Filter:
 285 <select id="menu_filter">
 286 <option SELECTED value="all">All documents</option>
 287 <option value="classes">Classes only</option>
 288 <option value="reference">Reference only</option>
 289 <option value="guides">Guides only</option>
 290 <option value="tutorials">Tutorials only</option>
 291 <option value="overviews">Overviews only</option>
 292 <option value="other">Other only</option>
 293 </select>
 294 <input type="checkbox" id="check_extensions" checked="true">Include extensions</input>
 295 </div>
 296
 297 <div id="total_count"></div>
 298 <table class="browser" id="browser"></table>
 299 </div>
 300 </body>
 301 </html>
 302