[examples] Update UI for browser example page.

derickwarshaw · Jul 9, 2015 · a3c4bc9 · a3c4bc9
1 parent 4c1b454
commit a3c4bc9
Show file tree

Hide file tree

Showing 3 changed files with 1,184 additions and 1,047 deletions.
diff --git a/examples/browser/css/bootstrap.css b/examples/browser/css/bootstrap.css
@@ -174,6 +174,8 @@ legend {
 }
 textarea {
   overflow: auto;
+  height: 200px;
+  width: 500px;
 }
 optgroup {
   font-weight: bold;
@@ -6533,4 +6535,13 @@ label {
 .buttonsTable {
   width: 450px;
 
+}
+
+.big {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+table li {
+  font-size: 24px;
 }
diff --git a/examples/browser/index.html b/examples/browser/index.html
@@ -15,29 +15,68 @@
 
           $(document).ready(function(e){
 
-            // draw buttons
+            // draws buttons / inputs for all faker methods
             function drawButtons () {
               $('#buttons').html('');
-              for (var module in faker) {
+
+              var str = '';
+
+              var moduleList = '<tr><td colspan="2"><ul>';
+
+              var modules = Object.keys(faker);
+              modules = modules.sort();
+              modules.forEach(function(module){
+                var ignore = ['locale', 'locales', 'localeFallback', 'definitions', 'fake'];
+                if (ignore.indexOf(module) !== -1) {
+                  return;
+                }
+                var moduleRow = '<tr><td colspan="2"" class="big"><a name="' + module + '"/>' + module + '</td></tr>';
+
+                moduleList += '<li><a href="#' + module + '">' + module + '</a></li>';
+
+                str += moduleRow;
+
                 for (var method in faker[module]) {
                   if (typeof faker[module][method] === "function") {
+                    // a function was found, create a button and input for it,
+                    // execute the value, and set it
                     var inputID = "button_" + module + "_" + method;
-                     var str = '\
+                    var strInput = '';
+                    // form inputs string concat
+                     var strButton = '\
                       <tr>\
-                        <td align="right"><input class="fakerButton" type="button" value="' + module + "." + method +'" id="' + inputID + '"/></td>\
-                        <td><input size="100" id="' + inputID + "_value" + '" type="input" value="' + faker[module][method]() + '"></td>\
-                      </tr>';
-                      $('#buttons').append(str);
+                        <td align="right"><input class="fakerButton" type="button" value="' + module + "." + method +'" id="' + inputID + '"/></td>';
+
+                      // get the default value
+                      var val = faker[module][method]();
+
+                      // switch input type based on default string / object value being returned
+                      if (typeof val === "object") {
+                          strInput += '<td><textarea id="' + inputID + "_value" + '">' + JSON.stringify(val, true, 2) + '</textarea></td>\
+                        </tr>';
+                      } else {
+                          strInput += '<td><input size="100" id="' + inputID + "_value" + '" type="input" value="' + val + '"/></td>\
+                        </tr>';
+
+                      }
+                      str += (strButton + strInput)
                   }
                 }
-              }
+              });
+              moduleList += '</ul></td></tr>';
+              str = moduleList + str;
+              $('#buttons').append(str);
 
              $('.fakerButton').click(function(e){
                 var inputID = $(this).attr('id') + "_value";
                 var arr = inputID.split('_');
                 var module = arr[1];
                 var method = arr[2];
-                $('#' + inputID).attr('value', faker[module][method]())
+                var val = faker[module][method]();
+                if (typeof val === "object") {
+                  val = JSON.stringify(val, true, 2);
+                }
+                $('#' + inputID).attr('value', val)
               });
             }
 
@@ -133,7 +172,7 @@
         <br/>
         <br/>
 
-        <h2>Generate Person</h2>
+        <h2>Generate Person Example</h2>
         <br/>
 
         <div class="form-group">
@@ -228,20 +267,16 @@ <h2>Generate Person</h2>
     <div class="container">
       <h2>API Reference</h2>
       <p>Click button to generate new value</p>
-      Locality: <select class="form-control locale"></select>
+      <select class="form-control locale"></select>
       <table class="table table-striped table-hover buttonsTable">
-        <thead>
-          <tr>
-            <th>API Call</th>
-            <th>Result</th>
-          </tr>
-        </thead>
         <tbody id="buttons">
         </tbody>
       </table>
     </div>
     <div id="footer">
       <div class="container">
+        <br/>
+
         <strong>protip</strong>: open your console on this page and run: <code>console.log(faker); var randomName = faker.name.findName(); console.log(randomName);</code><hr/>
       </div>
     </div>