diff options
Diffstat (limited to 'examples/browser/index.html')
| -rw-r--r-- | examples/browser/index.html | 74 |
1 files changed, 54 insertions, 20 deletions
diff --git a/examples/browser/index.html b/examples/browser/index.html index 9dff22ce..c45a31ee 100644 --- a/examples/browser/index.html +++ b/examples/browser/index.html @@ -10,35 +10,73 @@ <script src = "js/jquery.js" type = "text/javascript"></script> <script src = "js/prettyPrint.js" type = "text/javascript"></script> <script src = "js/faker.js" type = "text/javascript"></script> - <link href="bootstrap.css" media="all" rel="stylesheet" type="text/css" /> + <link href="css/bootstrap.css" media="all" rel="stylesheet" type="text/css" /> <script> $(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) }); } @@ -134,7 +172,7 @@ <br/> <br/> - <h2>Generate Person</h2> + <h2>Generate Person Example</h2> <br/> <div class="form-group"> @@ -229,20 +267,16 @@ <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> |