Merge pull request #84 from SingingBush/master

updated for Bootstrap 3 and put version number into nod filename during build

Gruntfile.js

@@ -44,12 +44,10 @@ module.exports = function (grunt) {
             livereload: {
                 files: [
                     'dev/*.html',
+                    'dev/*.css',
                     '.tmp/*.html',
                     '.tmp/*.js',
-                    'nod.js',
-                    '{.tmp,<%= nod.app %>/lib/{,*/}*.css',
-                    '{.tmp,<%= nod.app %>/lib/{,*/}*.js',
-                    '<%= nod.app %>/lib/{,*/}*.{png,jpg,jpeg,webp}'
+                    'nod*.js'
                 ],
                 tasks: ['livereload']
             }
@@ -122,7 +120,11 @@ module.exports = function (grunt) {
         jade: {
             compile: {
                 options: {
-                    pretty: true
+                    pretty: true,
+                    client: false,
+                    data: function(dest, src) {
+                        return {nodVersion: nodConfig.version, compiledAt: new Date()};
+                    }
                 },
                 files: {
                     "./index.html": ["dev/index.jade"],
@@ -178,16 +180,16 @@ module.exports = function (grunt) {
               '.tmp/init.js',
               'dev/tail.js'
             ],
-            dest: 'nod.js'
+            dest: 'nod-<%=nod.version%>.js'
           }
         },
         uglify: {
           options: {
             banner: '<%= nod.banner %>'
           },
           dist: {
-            src: ['nod.js'],
-            dest: 'nod.min.js'
+            src: ['nod-<%=nod.version%>.js'],
+            dest: 'nod-<%=nod.version%>.min.js'
           }
         },
         useminPrepare: {

bower.json

@@ -1,11 +1,16 @@
 {
-    "name": "jquery-nod",
-    "version": "1.0.5", 
-    "main": "./nod.js",
-    "dependencies": {
-        "jquery": ">=1.8"
-    },
-    "devDependencies": {
-        "bootstrap": "~2.3.1"
-    }
+  "name": "jquery-nod",
+  "version": "1.0.5",
+  "main": "./nod.js",
+  "ignore": [
+    "lib",
+    "index.html"
+  ],
+  "dependencies": {
+    "jquery": ">=1.9.0"
+  },
+  "devDependencies": {
+    "bootstrap": "~3.1.1",
+    "google-code-prettify": "~1.0.1"
+  }
 }

dev/examples/ex1.jade

@@ -1,19 +1,21 @@
 hr#example1
 form#ex1.form-horizontal
-  .control-group
-    label.control-label Mandatory field
-    .controls
-      input(type='text')
-  .controls
-    button(type='submit').btn Submit
-  script
+  .form-group
+    label.control-label.col-sm-2 Mandatory field
+    .col-sm-10
+      input.form-control(type='text')
+  .form-group
+    .col-sm-offset-2.col-sm-10
+      button(type='submit').btn.btn-default Submit
+
+  script(type='text/javascript').
     var metrics = [
       [ 'input', 'presence', 'Cannot be empty' ]
     ];
     $("#ex1").nod( metrics );
 .code
-  pre.prettyprint.lang-html <form id="ex1" class="form-horizontal">
-    |   <div class="control-group">
+  pre.prettyprint.lang-html <form id="ex1" class="form-inline">
+    |   <div class="form-group">
     |      <label class="control-label">Mandatory field</label>
     |      <div class="controls">
     |        <input type="text">

dev/examples/ex2.jade

@@ -1,22 +1,25 @@
 hr#example2
 form#ex2.form-horizontal
-  .control-group
-    label.control-label Search for number
-    .controls
-      input(type='text',placeholder="type a number and hit enter").search_field
-  script
+  .form-group
+    label.control-label.col-sm-2 Search for number
+    .col-sm-10
+      input.form-control(type='text',placeholder="type a number and hit enter").search_field
+
+  script(type='text/javascript').
     var metrics = [
       [ '.search_field', 'integer', 'Must be a number' ]
     ];
     var options = {
       disableSubmitBtn : false
     }
     $("#ex2").nod( metrics, options );
+
 .code
-  pre.prettyprint.lang-html <form id="ex2" class="form-horizontal">
-    |   <div class="control-group">
+  pre.prettyprint.lang-html
+    |  <form id="ex2" class="form-inline">
+    |    <div class="form-group">
     |      <label class="control-label">Search for number</label>
-    |      <div class="controls">
+    |        <div class="controls">
     |        <input type="text" class="search_field" placeholder="type a number and hit enter">
     |      </div>
     |    </div>

dev/examples/ex3.jade

@@ -1,40 +1,42 @@
 hr#example3
 form#ex3.form-horizontal
-  .control-group
-    label.control-label Type "foo"
-    .controls
-      input(type='text').ex3a
-  .control-group
-    .control-label
-      label Select something
-    .controls
-      select#ex3select
-        option(value="") Select something please
-        option(value="1") Pick this
-        option(value="2") Or this
-        option(value="3") But not this
-        option(value="4") This is fine though
-  .controls
-    button(type='submit').btn Submit
-  script
+  .form-group
+    label.control-label.col-sm-2 Type "foo"
+    .col-sm-10
+      input.form-control(type='text').ex3a
+
+  .form-group
+      label.control-label.col-sm-2 Select something
+      .col-sm-10
+        select#ex3select.form-control
+          option(value="") Select something please
+          option(value="1") Pick this
+          option(value="2") Or this
+          option(value="3") But not this
+          option(value="4") This is fine though
+  .form-group
+    .col-sm-offset-2.col-sm-10
+      button(type='submit').btn.btn-default Submit
+
+  script(type='text/javascript').
     var metrics = [
       [ '.ex3a', 'exact:foo', 'I told you to type "foo"!' ],
       [ '#ex3select', 'presence', 'Pick something' ],
       [ '#ex3select', 'not:3', 'I told you not to pick this one!' ],
     ];
     var options = {
-      'groupClass' : 'warning',
+      'groupClass' : 'has-error',
     };
     $("#ex3").nod( metrics, options );
 .code
-  pre.prettyprint.lang-html <form id="ex3" class="form-horizontal">
-    | <div class="control-group">
+  pre.prettyprint.lang-html <form id="ex3" class="form-inline">
+    | <div class="form-group">
     |   <label class="control-label">Type "foo"</label>
     |   <div class="controls">
     |     <input type="text" class="ex3a">
     |   </div>
     | </div>
-    | <div class="control-group">
+    | <div class="form-group">
     |   <div class="control-label">
     |     <label>Select something</label>
     |   </div>
@@ -58,6 +60,6 @@ form#ex3.form-horizontal
     |   [ '#ex3select', 'not:3', 'I told you not to pick this one!' ],
     | ];
     | var options = {
-    |   'groupClass' : 'warning',
+    |   'groupClass' : 'has-error',
     | };
     | $("#ex3").nod( metrics, options );

dev/examples/ex4.jade

@@ -2,43 +2,45 @@
 hr#example4
 form#ex4.form-horizontal
   p Leave at least one number
-  .control-group
-    label.control-label Home
-    .controls
-      input(type='text')#ex4a_home
-  .control-group
-    label.control-label Work
-    .controls
-      input(type='text')#ex4a_work
-  .control-group
-    label.control-label Mobile
-    .controls
-      input(type='text')#ex4a_mobile
-  .controls
-    button(type='submit').btn Call me
-  script
+  .form-group
+    label.control-label.col-sm-2 Home
+    .col-sm-10
+      input.form-control(type='text')#ex4a_home
+  .form-group
+    label.control-label.col-sm-2 Work
+    .col-sm-10
+      input.form-control(type='text')#ex4a_work
+  .form-group
+    label.control-label.col-sm-2 Mobile
+    .col-sm-10
+      input.form-control(type='text')#ex4a_mobile
+  .form-group
+    .col-sm-offset-2.col-sm-10
+      button(type='submit').btn.btn-default Call me
+
+  script(type='text/javascript').
     var metrics = [
       [ '#ex4a_home, #ex4a_work, #ex4a_mobile', 'one-of', 'Add at least one number' ]
     ];
     $("#ex4").nod( metrics );
 
 // use http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx
 .code
-  pre.prettyprint.lang-html <form id="ex4" class="form-horizontal">
+  pre.prettyprint.lang-html <form id="ex4" class="form-inline">
     |   <p>Leave at least one number</p>
-    |   <div class="control-group">
+    |   <div class="form-group">
     |     <label class="control-label">Home</label>
     |     <div class="controls">
     |       <input type="text" id="ex4a_home">
     |     </div>
     |   </div>
-    |   <div class="control-group">
+    |   <div class="form-group">
     |     <label class="control-label">Work</label>
     |     <div class="controls">
     |       <input type="text" id="ex4a_work">
     |     </div>
     |   </div>
-    |   <div class="control-group">
+    |   <div class="form-group">
     |     <label class="control-label">Mobile</label>
     |     <div class="controls">
     |       <input type="text" id="ex4a_mobile">