Update documentation

paulmasson · May 3, 2020 · 3cec73a · 3cec73a
1 parent 1bce779
commit 3cec73a
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 20 deletions.
diff --git a/docs/colormaps.html b/docs/colormaps.html
@@ -3,32 +3,71 @@
 <title>MathCell - Colormaps</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <style>
-  .right { text-align: right }
+
+button { width: 2in }
+
+.right { text-align: right }
+
 </style>
 </head>
 
 <body>
 
-<table id="maps"></table>
+<p style="text-align: center">
+<button onclick="update()">Natural Order</button>
+<button onclick="update(true)">Alphabetical</button>
+</p><br/>
+
+<table id="bars"></table>
 
 <script src="../build/mathcell.js"></script>
 
 <script>
 
-// document not fully ready if use one loop...
+update();
+
+function update( sorted=false ) {
+
+  bars.innerHTML = '';
+
+  // document not fully ready if use one loop...
+
+  if ( sorted ) {
+
+    var alpha = {};
+
+    Object.keys( colormaps ).sort().forEach( k => alpha[k] = colormaps[k] );
+
+    Object.keys( alpha ).forEach( cm => addRow(cm) );
 
-Object.keys( colormaps ).forEach ( cm => {
+    Object.keys( alpha ).forEach( cm => addCanvas(cm) );
 
-  maps.innerHTML += `
-<tr><td class="right">${cm}</td><td><canvas id="${cm}"></canvas></td></tr>
-<tr><td>&nbsp;</td></tr>
-  `;
+  } else {
 
-});
+    Object.keys( matplotlib ).forEach( cm => addRow(cm) );
 
-Object.keys( colormaps ).forEach ( cm => {
+    bars.innerHTML += `
+<tr><td>&nbsp;</td></tr>`
 
-  var canvas = document.getElementById( cm );
+    Object.keys( mathematica ).forEach( cm => addRow(cm) );
+
+    Object.keys( colormaps ).forEach( cm => addCanvas(cm) );
+
+  }
+
+}
+
+function addRow( cm ) {
+
+  bars.innerHTML += `
+<tr><td class="right">${cm}</td><td id="${cm}"></td></tr>
+<tr><td>&nbsp;</td></tr>`;
+
+}
+
+function addCanvas( cm ) {
+
+  var canvas = document.createElement( 'canvas' );
   canvas.width = 500;
   canvas.height = 20;
 
@@ -45,7 +84,9 @@
   context.fillStyle = gradient;
   context.fillRect( 0, 0, 500, 20 );
 
-} );
+  document.getElementById( cm ).appendChild( canvas );
+
+}
 
 </script>
 

diff --git a/docs/starting.html b/docs/starting.html
@@ -4,14 +4,6 @@
 <link rel="stylesheet" type="text/css" href="style.css">
 <style>
 
-button {
-
-  border: 1px solid black;
-  border-radius: 5px;
-  background-color: #eee;
-
-}
-
 textarea {
 
   position: absolute;

diff --git a/docs/style.css b/docs/style.css
@@ -32,3 +32,10 @@ pre {
 
 }
 
+button {
+
+  border: 1px solid black;
+  border-radius: 5px;
+  background-color: rgb(250,250,250);
+
+}