projects / profile / ivi / cowhide.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 4cacb57)
Adds radio-input widget and initial Widget Gallery example.
authorSalvatore Iovene <salvatore.iovene@intel.com>
Wed, 17 Oct 2012 09:55:50 +0000 (12:55 +0300)
committerSalvatore Iovene <salvatore.iovene@intel.com>
Wed, 17 Oct 2012 09:55:50 +0000 (12:55 +0300)
examples/widget-gallery/index.html [new file with mode: 0644] patch | blob
examples/widget-gallery/javascripts/widget-gallery.js [new file with mode: 0644] patch | blob
grunt.js patch | blob | history
src/javascripts/cowhide-radio-input.js [new file with mode: 0644] patch | blob

diff --git a/examples/widget-gallery/index.html b/examples/widget-gallery/index.html
new file mode 100644 (file)
index 0000000..f05fb82
--- /dev/null
+++ b/examples/widget-gallery/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+    <title>Cowhide Widget Gallery</title>
+    <meta name="description" content="A widget gallery showcasing Cowhide's capabilities.">
+    <meta name="viewport" content="width=device-width">
+
+    <link id="cowhide-theme" rel="stylesheet" href="../../cowhide-default.css">
+  </head>
+
+  <body>
+    <div class="container">
+      <h1>
+        Cowhide
+        <small>An HTML5 framework built on top of Twitter Bootstrap.</small>
+      </h1>
+
+      <div class="well">
+        <button id="night-mode-toggle" class="btn btn-primary" data-toggle="button">Night mode</button>
+        <button id="driving-mode-toggle" class="btn btn-primary" data-toggle="button" data-ignore-driving-mode="true">Driving mode</button>
+
+        <div class="pull-right">
+          <form class="form-inline" id="font-size-test">
+            <div class="control-group">
+              <div class="input-append">
+                <input type="text"
+                       id="button-font-size" placeholder="Button font size"/>
+                <span class="add-on">px</span>
+                <button class="btn" type="button">Apply</button>
+              </div>
+            </div>
+        </div>
+      </div>
+
+      <h2>Cowhide Widget Gallery <small>A partial list.</small></h2>
+      <div id="application">
+        <h3>Radio buttons</h3>
+        <form>
+          <label class="radio">
+            <input type="radio" name="a" value="1">Radio option 1
+          </label>
+          <label class="radio">
+            <input type="radio" name="a" value="2">Radio option 2
+          </label>
+            <label class="radio">
+            <input type="radio" name="a" value="3">Radio option 3
+          </label>
+        </form>
+      </div>
+    </div> <!-- container -->
+
+    <!-- The glorious cowhide framework. -->
+    <script src="../../cowhide.js"></script>
+    <script src="javascripts/widget-gallery.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/examples/widget-gallery/javascripts/widget-gallery.js b/examples/widget-gallery/javascripts/widget-gallery.js
new file mode 100644 (file)
index 0000000..594c9e6
--- /dev/null
+++ b/examples/widget-gallery/javascripts/widget-gallery.js
@@ -0,0 +1,17 @@
+$(function() {
+    $('#night-mode-toggle').click(function() {
+        $.cowhide.toggleNightMode();
+    });
+
+    $('#driving-mode-toggle').click(function() {
+        $.cowhide.toggleDrivingMode();
+    });
+
+    $('form#font-size-test button').click(function() {
+        var $form = $(this).closest('form');
+        var $input = $form.find('input');
+        var val = $input.val();
+
+        $('.btn').css('font-size', val + 'px');
+    })
+});
diff --git a/grunt.js b/grunt.js
index 558a58f..fb82b9d 100644 (file)
--- a/grunt.js
+++ b/grunt.js
@@ -12,9 +12,7 @@ module.exports = function(grunt) {
         'src/themes/*.less',
         'src/cowhide-less/*.less',
 
-        'examples/calf/javascripts/*.js',
-        'examples/calf/javascripts/app/*.js',
-        'examples/calf/javascripts/app/**/*.js',
+        'examples/**/*.*',
 
         'tests/**/*.js'
       ],
@@ -34,6 +32,8 @@ module.exports = function(grunt) {
         'examples/calf/javascripts/app/*.js',
         'examples/calf/javascripts/app/**/*.js',
 
+        'examples/widget-gallery/javascripts/*.js',
+
         'test/**/*.js'
       ]
     },
@@ -94,7 +94,8 @@ module.exports = function(grunt) {
           'src/javascripts/cowhide-button.js',
           'src/javascripts/cowhide-seat-selector.js',
           'src/javascripts/cowhide-slider.js',
-          'src/javascripts/cowhide-text-input.js'
+          'src/javascripts/cowhide-text-input.js',
+          'src/javascripts/cowhide-radio-input.js'
         ], dest: 'dist/cowhide.js'
       },
       css_default: {
@@ -136,6 +137,7 @@ module.exports = function(grunt) {
           'dist/images/': 'images/**',
           'dist/README.md': 'README.md',
           'dist/examples/calf/': 'examples/calf/**',
+          'dist/examples/widget-gallery/': 'examples/widget-gallery/**',
           'dist/docs/': 'docs/**'
         }
       }
diff --git a/src/javascripts/cowhide-radio-input.js b/src/javascripts/cowhide-radio-input.js
new file mode 100644 (file)
index 0000000..d9297d8
--- /dev/null
+++ b/src/javascripts/cowhide-radio-input.js
@@ -0,0 +1,43 @@
+(function($, undefined) {
+    'use strict';
+
+    var ChRadioInput = function(element, options) {
+        $.fn.ch_widget.Constructor(element, options);
+        this.$element = $(element);
+        this.options = $.extend(
+            {},
+            $.fn.ch_widget.defaults,
+            {
+                disableWhenDriving: true
+            });
+    };
+
+    ChRadioInput.prototype = $.extend(
+        {},
+        $.fn.ch_widget.Constructor.prototype,
+        {
+            constructor: ChRadioInput
+        }
+    );
+
+    $.fn.ch_radio_input = function(option) {
+        return this.each(function() {
+            var $this = $(this),
+                data = $this.data('ch_radio_input'),
+                options = typeof option == 'object' && option;
+
+            if (!data) {
+                $this.data('ch_radio_input', (data = new ChRadioInput(this, options)));
+                data.register();
+            }
+        });
+    };
+
+    $.fn.ch_text_input.Constructor = ChRadioInput;
+
+    /* CHRADIOINPUT DATA-API
+     * ================= */
+    $(function() {
+        $('input[type=radio]').ch_radio_input();
+    })
+})(window.jQuery);
\ No newline at end of file
Domain: Web Framework / Uncategorized;