Permalink
Browse files

initial commit

  • Loading branch information...
0 parents commit 6743767f1e48b25ed0ae7febd68836da06371098 @richorama committed Nov 5, 2013
Showing with 245 additions and 0 deletions.
  1. +50 −0 demo.html
  2. +117 −0 gluon.js
  3. +20 −0 license.txt
  4. +58 −0 readme.md
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Gluon Examples</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
+
+ <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+ <!--[if lt IE 9]>
+ <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+ <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
+ <![endif]-->
+
+ <script src="https://code.jquery.com/jquery.js"></script>
+ <script src="gluon.js"></script>
+ <script>
+
+$(document).ready(function(){
+ var test = { foo: "bar", firstName : "Richard", last_name : "Astbury", checkBoxTrue : true, check_box_False : false, age:36};
+ $("#edit").html(Gluon.edit(test, {ignoreList:["foo"], sessionId : "123"}));
+ $("#view").html(Gluon.view(test, {ignoreList:["foo"]}));
+ $("#table").html(Gluon.table([test,test,test], {ignoreList:["foo"]}));
+});
+
+ </script>
+ </head>
+ <body>
+ <div class="row container">
+ <div class="col-md-4">
+ <h2>Edit</h2>
+ <div id="edit"></div>
+ </div>
+ <div class="col-md-4">
+ <h2>View</h2>
+ <div id="view"></div>
+ </div>
+ </div>
+
+ <div class="row container">
+ <div class="col-md-12">
+ <h2>Table</h2>
+ <div id="table"></div>
+ </div>
+ </div>
+
+
+
+ </body>
+</html>
@@ -0,0 +1,117 @@
+var Gluon = {
+ parseOptions: function(options){
+ if (!options){
+ options = {};
+ }
+ if (!options.ignoreList){
+ options.ignoreList = [];
+ }
+ if (options.sessionId === undefined){
+ options.sessionId = "";
+ }
+ return options;
+ },
+
+ formatName : function(name){
+ name = name[0].toUpperCase() + name.slice(1);
+ return name.replace(/[a-z][A-Z]/g, function(x){ return x[0] + " " + x[1].toUpperCase()})
+ .replace(/[_][a-z]/, function(x){ return " " + x[1].toUpperCase()})
+ .replace(/[_][A-Z]/, function(x){ return " " + x[1]});
+ },
+
+ edit : function(obj, options){
+ if (!obj){
+ return "";
+ }
+ options = Gluon.parseOptions(options);
+
+ var html = '';
+ for(var prop in obj){
+ if (!options.ignoreList.indexOf(prop)){
+ continue;
+ }
+ switch (typeof obj[prop]){
+ case 'string':
+ html += '<div class="form-group"><label for="' + prop + '">' + Gluon.formatName(prop) + '</label><input type="text" class="form-control ' + options.sessionId + '" id="' + prop + '" value="' + obj[prop] + '"></div>';
+ break;
+ case 'boolean':
+ html += '<div class="form-group"><label><input class="' + options.sessionId + '"" type="checkbox" ' + (obj[prop] ? 'checked' : '') + '> ' + Gluon.formatName(prop) + '</label></div>';
+ break;
+ case 'number':
+ html += '<div class="form-group"><label for="' + prop + '">' + Gluon.formatName(prop) + '</label><input type="number" class="form-control ' + options.sessionId + '" id="' + prop + '" value="' + obj[prop] + '"></div>';
+ break;
+ }
+ }
+ html += "";
+ return html;
+ },
+ view : function(obj, options){
+ if (!obj){
+ return "";
+ }
+ options = Gluon.parseOptions(options);
+
+ var html = '<div class="form-horizontal">';
+ for(var prop in obj){
+ if (!options.ignoreList.indexOf(prop)){
+ continue;
+ }
+ switch (typeof obj[prop]){
+ case 'string':
+ case 'number':
+ case 'boolean':
+ html += '<div class="form-group"><div class="col-md-6"><strong>' + Gluon.formatName(prop) + '</strong></div><div class="col-md-6">' + obj[prop] + '</div></div>';
+ break;
+ }
+ }
+ html += "</div>";
+ return html;
+
+ },
+ table : function(objs, options){
+ if (!objs || !objs.length){
+ return "";
+ }
+ options = Gluon.parseOptions(options);
+
+ var html = '<table class="table table-bordered"><tr>';
+
+ var obj = objs[0];
+ for(var prop in obj){
+ if (!options.ignoreList.indexOf(prop)){
+ continue;
+ }
+ switch (typeof obj[prop]){
+ case 'string':
+ case 'number':
+ case 'boolean':
+ html += '<th>' + Gluon.formatName(prop) + '</th>';
+ break;
+ }
+ }
+ html += "</tr>";
+
+ objs.forEach(function(obj){
+ html += "<tr>";
+ for(var prop in obj){
+ if (!options.ignoreList.indexOf(prop)){
+ continue;
+ }
+ switch (typeof obj[prop]){
+ case 'string':
+ case 'number':
+ case 'boolean':
+ html += '<td>' + obj[prop] + '</td>';
+ break;
+ }
+ }
+
+ html += "</tr>";
+ });
+
+ html += "</table>";
+ return html;
+
+
+ }
+}
@@ -0,0 +1,20 @@
+Copyright 2013 Richard Astbury
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,58 @@
+# gluon.js
+
+### Work in progress. Please feel free to contirbute.
+
+Dynamic templating for bootstrap.
+
+## Examples
+
+If you have a JavaScript object in the browser like this:
+
+```js
+var demo = {
+ firstName : "Richard",
+ last_name : "Astbury",
+ checkBoxTrue : true,
+ false, age:36};
+```
+
+You can create an HTML form with the `edit` function:
+
+```js
+$("#edit").html(Gluon.edit(demo));
+```
+
+Which looks like this:
+
+![Edit](https://dl.dropboxusercontent.com/u/624582/github/gluon/edit.png)
+
+You can create an HTML form to just display the values with the `view` function:
+
+```js
+$("#view").html(Gluon.view(demo));
+```
+
+Which looks like this:
+
+![View](https://dl.dropboxusercontent.com/u/624582/github/gluon/view.png)
+
+You can create a table of objects like this:
+
+```js
+$("#view").html(Gluon.table([demo,demo,demo]));
+```
+
+![Table](https://dl.dropboxusercontent.com/u/624582/github/gluon/table.png)
+
+
+## Options
+
+An options object can be passed in as a second argument, with the following fields:
+
+* `ignoreList` an array of strings, containing the field names to ignore.
+* `sessionId` a value to append to the class of the input elements, allowing you to use jQuery (or simliar) to
+
+## License
+
+MIT
+

0 comments on commit 6743767

Please sign in to comment.