patternfly-sass 2.2.0 → 2.3.0

data/assets/stylesheets/patternfly/_variables.scss

@@ -6,11 +6,12 @@ $patternfly-sass-asset-helper: false !default;
 
 // PatternFly-specific
 // -------------------
+$bootstrap-switch-handle-default-bg-color:                          #fbfbfb !default;
 $btn-default-bg-img-start:                                          #fafafa !default;
 $btn-default-bg-img-stop:                                           #ededed !default;
 $btn-xs-font-weight:                                                400 !default;
 $card-pf-accented-border-top-color:                                 #39a5dc !default;
-$card-pf-aggregate-status-title-icon-color:                         #72767b !default;
+$card-pf-aggregate-status-title-icon-color:                         #333 !default;
 $card-pf-bg-color:                                                  #fff !default;
 $card-pf-border-color:                                              #d1d1d1 !default;
 $card-pf-border-top-color:                                          transparent !default;
@@ -90,6 +91,8 @@ $table-border-hover:                                                #a7cadf !def
 $table-cell-padding-bottom:                                         3px !default;
 $table-cell-padding-top:                                            2px !default;
 // Reference variables declared in block above
+$bootstrap-switch-bg-color-start:                                   $btn-default-bg-img-start !default;
+$bootstrap-switch-bg-color-stop:                                    $btn-default-bg-img-stop !default;
 $img-path-alt:                                                      $img-path !default;
 $nav-pf-vertical-alt-border-color:                                  $sidebar-pf-border-color !default;
 $navbar-pf-alt-border-color:                                        $navbar-pf-border-color !default;
@@ -249,6 +252,7 @@ $panel-warning-text:                                                $panel-prima
 
 // PatternFly-specific variables based on Bootstrap overides
 // ---------------------------------------------------------
+$bootstrap-switch-bg-color:                                         $btn-default-bg !default;
 $btn-danger-bg-img-start:                                           $brand-danger !default;
 $btn-danger-bg-img-stop:                                            $btn-danger-bg !default;
 $btn-primary-bg-img-start:                                          $brand-primary !default;

data/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "patternfly-sass",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "license": "Apache-2.0",
   "homepage": "https://www.patternfly.org",
   "authors": [
@@ -33,6 +33,8 @@
     "bootstrap-combobox": "~1.1.6",
     "bootstrap-datepicker": "~1.4.0",
     "bootstrap-select": "~1.7.3",
+    "bootstrap-switch": "~3.3.2",
+    "bootstrap-touchspin": "~3.0.3",
     "bootstrap-treeview": "~1.2.0",
     "c3": "~0.4.10",
     "datatables": "~1.10.7",

data/lib/patternfly-sass/version.rb

@@ -1,4 +1,4 @@
 module Patternfly
-  VERSION = '2.2.0'
-  PATTERNFLY_SHA = '9e8a54f9b81397d52bad7521afc2aaee1e97630f'
+  VERSION = '2.3.0'
+  PATTERNFLY_SHA = 'c3c96f7d25d1c19922f0e9678413cc06446f8669'
 end

data/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "patternfly-sass",
+  "version": "2.3.0",
+  "description": "Red Hat's Patternfly, converted to Sass and ready to drop into Rails",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/patternfly/patternfly-sass.git"
+  },
+  "author": "Red Hat",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/patternfly/patternfly-sass/issues"
+  },
+  "devDependencies": {
+    "bootstrap-sass": "~3.3.5",
+    "bootstrap-combobox": "~1.1.6",
+    "bootstrap-datepicker": "~1.4.0",
+    "bootstrap-select": "~1.7.3",
+    "bootstrap-switch": "~3.3.2",
+    "bootstrap-touchspin": "~3.0.3",
+    "bootstrap-treeview": "~1.2.0",
+    "c3": "~0.4.10",
+    "datatables": "~1.10.7",
+    "datatables-colreorder": "~1.1.3",
+    "datatables-colvis": "~1.1.2",
+    "font-awesome": "~4.3.0",
+    "google-code-prettify": "~1.0.4",
+    "jquery": "~2.1.4",
+    "matchHeight": "~0.6.0"
+  },
+  "homepage": "https://github.com/patternfly/patternfly-sass"
+}

data/patternfly-sass.gemspec

@@ -19,6 +19,8 @@ Gem::Specification.new do |s|
   s.add_development_dependency 'rails-assets-bootstrap-combobox', '~> 1.1.6'
   s.add_development_dependency 'rails-assets-bootstrap-datepicker', '~> 1.4.0'
   s.add_development_dependency 'rails-assets-bootstrap-select', '~> 1.7.3'
+  s.add_development_dependency 'rails-assets-bootstrap-switch', '~> 3.3.2'
+  s.add_development_dependency 'rails-assets-bootstrap-touchspin', '~> 3.0.3'
   s.add_development_dependency 'rails-assets-bootstrap-treeview', '~> 1.2.0'
   s.add_development_dependency 'rails-assets-c3', '~> 0.4.10'
   s.add_development_dependency 'rails-assets-datatables', '~> 1.10.7'

data/spec/html/alerts.html

@@ -83,6 +83,12 @@
         <span class="pficon pficon-info"></span>
         <strong>This is some general information.</strong> You should <a href="#" class="alert-link">know about this</a>.
       </div>
+      <div class="alert alert-success">
+        <button class="btn btn-default pull-right" type="submit">Button</button>
+        <span class="pficon pficon-ok"></span>
+        <strong>Great job!</strong> This is really working out <a href="#" class="alert-link">great for us</a>.
+      </div>
+
     </div><!-- /container -->
   </body>
 </html>

data/spec/html/bootstrap-switch.html

@@ -0,0 +1,265 @@
+<!DOCTYPE html>
+<!--[if IE 9]><html class="ie9"><![endif]-->
+<!--[if gt IE 9]><!-->
+<html>
+<!--<![endif]-->
+  <head>
+    <title>Bootstrap Switch - PatternFly</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" href="../dist/img/favicon.ico">
+    <!-- iPad retina icon -->
+    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../dist/img/apple-touch-icon-precomposed-152.png">
+    <!-- iPad retina icon (iOS < 7) -->
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../dist/img/apple-touch-icon-precomposed-144.png">
+    <!-- iPad non-retina icon -->
+    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="../dist/img/apple-touch-icon-precomposed-76.png">
+    <!-- iPad non-retina icon (iOS < 7) -->
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../dist/img/apple-touch-icon-precomposed-72.png">
+    <!-- iPhone 6 Plus icon -->
+    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../dist/img/apple-touch-icon-precomposed-180.png">
+    <!-- iPhone retina icon (iOS < 7) -->
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../dist/img/apple-touch-icon-precomposed-114.png">
+    <!-- iPhone non-retina icon (iOS < 7) -->
+    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../dist/img/apple-touch-icon-precomposed-57.png">
+    <link href="../dist/css/patternfly.min.css" rel="stylesheet" media="screen, print">
+    <link href="../dist/css/patternfly-additions.min.css" rel="stylesheet" media="screen, print">
+    <link href="tests.css" rel="stylesheet" media="screen, print">
+    <script src="../components/jquery/dist/jquery.min.js"></script>
+    <script src="../components/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script src="../components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
+    <script src="bootstrap-switch.js"></script>
+    <script src="../dist/js/patternfly.min.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <div class="page-header">
+        <h1>Bootstrap Switch</h1>
+      </div>
+      <div class="alert alert-warning">
+        <span class="pficon pficon-warning-triangle-o"></span>
+        These examples are included for development testing purposes.  For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a>, <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://www.bootstrap-switch.org/">http://www.bootstrap-switch.org/</a>.
+      </div>
+      <hr>
+        <div class="row">
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">State</h2>
+            <p>
+              <input id="switch-state" type="checkbox" checked>
+            </p>
+            <div class="btn-group">
+              <button type="button" data-switch-toggle="state" class="btn btn-default">Toggle</button>
+              <button type="button" data-switch-set="state" data-switch-value="true" class="btn btn-default">Set true</button>
+              <button type="button" data-switch-set="state" data-switch-value="false" class="btn btn-default">Set false</button>
+              <button type="button" data-switch-get="state" class="btn btn-default">Get</button>
+            </div>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Size</h2>
+            <p>
+              <input id="switch-size" type="checkbox" checked data-size="mini">
+            </p>
+            <div class="btn-group">
+              <button type="button" data-switch-set="size" data-switch-value="mini" class="btn btn-default">Mini</button>
+              <button type="button" data-switch-set="size" data-switch-value="small" class="btn btn-default">Small</button>
+              <button type="button" data-switch-set="size" data-switch-value="normal" class="btn btn-default">Normal</button>
+              <button type="button" data-switch-set="size" data-switch-value="large" class="btn btn-default">Large</button>
+              <button type="button" data-switch-get="size" class="btn btn-default">Get</button>
+            </div>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Animate</h2>
+            <p>
+              <input id="switch-animate" type="checkbox" checked>
+            </p>
+            <p>
+              <button type="button" data-switch-toggle="animate" class="btn btn-default">Toggle</button>
+              <button type="button" data-switch-get="animate" class="btn btn-default">Get</button>
+            </p>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Disabled</h2>
+            <p>
+              <input id="switch-disabled" type="checkbox" checked disabled>
+            </p>
+            <p>
+              <button type="button" data-switch-toggle="disabled" class="btn btn-default">Toggle</button>
+              <button type="button" data-switch-get="disabled" class="btn btn-default">Get</button>
+            </p>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Readonly</h2>
+            <p>
+              <input id="switch-readonly" type="checkbox" checked readonly>
+            </p>
+            <p>
+              <button type="button" data-switch-toggle="readonly" class="btn btn-default">Toggle</button>
+              <button type="button" data-switch-get="readonly" class="btn btn-default">Get</button>
+            </p>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Indeterminate</h2>
+            <p>
+              <input id="switch-indeterminate" type="checkbox" checked data-indeterminate="true">
+            </p>
+            <p>
+              <button type="button" data-switch-toggle="indeterminate" class="btn btn-default">Toggle</button>
+              <button type="button" data-switch-get="indeterminate" class="btn btn-default">Get</button>
+            </p>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Inverse</h2>
+            <p>
+              <input id="switch-inverse" type="checkbox" checked data-inverse="true">
+            </p>
+            <p>
+              <button type="button" data-switch-toggle="inverse" class="btn btn-default">Toggle</button>
+              <button type="button" data-switch-get="inverse" class="btn btn-default">Get</button>
+            </p>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">On Color</h2>
+            <p>
+              <input id="switch-onColor" type="checkbox" checked data-on-color="info">
+            </p>
+            <p class="btn-group">
+              <div class="btn-group">
+                <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Set &nbsp;<span class="caret"></span></button>
+                <div role="menu" class="dropdown-menu">
+                  <li><a data-switch-set="onColor" data-switch-value="primary">Primary</a></li>
+                  <li><a data-switch-set="onColor" data-switch-value="info">Info</a></li>
+                  <li><a data-switch-set="onColor" data-switch-value="success">Success</a></li>
+                  <li><a data-switch-set="onColor" data-switch-value="warning">Warning</a></li>
+                  <li><a data-switch-set="onColor" data-switch-value="default">Default</a></li>
+                </div>
+              </div>
+              <button type="button" data-switch-get="onColor" class="btn btn-default">Get</button>
+            </p>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Off Color</h2>
+            <p>
+              <input id="switch-offColor" type="checkbox" data-off-color="warning">
+            </p>
+            <p class="btn-group">
+              <div class="btn-group">
+                <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Set &nbsp;<span class="caret"></span></button>
+                <div role="menu" class="dropdown-menu">
+                  <li><a data-switch-set="offColor" data-switch-value="primary">Primary</a></li>
+                  <li><a data-switch-set="offColor" data-switch-value="info">Info</a></li>
+                  <li><a data-switch-set="offColor" data-switch-value="success">Success</a></li>
+                  <li><a data-switch-set="offColor" data-switch-value="warning">Warning</a></li>
+                  <li><a data-switch-set="offColor" data-switch-value="default">Default</a></li>
+                </div>
+              </div>
+              <button type="button" data-switch-get="offColor" class="btn btn-default">Get</button>
+            </p>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">On Text</h2>
+            <p>
+              <input id="switch-onText" type="checkbox" checked data-on-text="Yes">
+            </p>
+            <div class="row">
+              <div class="col-sm-6">
+                <input type="text" data-switch-set-value="onText" value="Yes" class="form-control">
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Off Text</h2>
+            <p>
+              <input id="switch-offText" type="checkbox" data-off-text="No">
+            </p>
+            <div class="row">
+              <div class="col-sm-6">
+                <input type="text" data-switch-set-value="offText" value="No" class="form-control">
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Label Text</h2>
+            <p>
+              <input id="switch-labelText" type="checkbox" data-label-text="Label">
+            </p>
+            <div class="row">
+              <div class="col-sm-6">
+                <input type="text" data-switch-set-value="labelText" class="form-control">
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Handle Width</h2>
+            <p>
+              <input id="switch-handleWidth" type="checkbox" data-handle-width="100">
+            </p>
+            <div class="row">
+              <div class="col-sm-6">
+                <input type="number" data-switch-set-value="handleWidth" value="100" class="form-control">
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Label Width</h2>
+            <p>
+              <input id="switch-labelWidth" type="checkbox" data-label-width="100">
+            </p>
+            <div class="row">
+              <div class="col-sm-6">
+                <input type="number" data-switch-set-value="labelWidth" value="100" class="form-control">
+              </div>
+            </div>
+          </div>
+          <div class="col-sm-6 col-lg-4">
+            <h2 class="h4">Create | Destroy</h2>
+            <p>
+              <input id="switch-create-destroy" type="checkbox" checked data-switch-no-init>
+            </p>
+            <div class="row">
+              <div class="col-sm-6">
+                <button type="button" data-switch-create-destroy data-destroy-text="Destroy" class="btn btn-default">Create</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="text-center">
+          <h2 class="h4">Radio All Off</h2>
+          <div class="row">
+            <div class="col-sm-6">
+              <h3 class="h5">Disabled</h3>
+              <input type="radio" name="radio1" checked class="switch-radio1">
+              <input type="radio" name="radio1" class="switch-radio1">
+              <input type="radio" name="radio1" class="switch-radio1">
+            </div>
+            <div class="col-sm-6">
+              <h3 class="h5">Enabled</h3>
+              <input type="radio" name="radio2" checked data-radio-all-off="true" class="switch-radio2">
+              <input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
+              <input type="radio" name="radio2" data-radio-all-off="true" class="switch-radio2">
+            </div>
+          </div><br>
+          <hr>
+          <h2 class="h4">Inside Modals</h2>
+          <button data-toggle="modal" data-target="#modal-switch" class="btn btn-default">Open Modal</button>
+          <div id="modal-switch" tabindex="-1" role="dialog" aria-labelledby="modal-switch-label" class="modal fade">
+            <div class="modal-dialog">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <button type="button" data-dismiss="modal" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                  <div id="modal-switch-label" class="modal-title">Title</div>
+                </div>
+                <div class="modal-body">
+                  <input id="switch-modal" type="checkbox" checked>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        // Initialize Boostrap Switch
+
+      </script>
+
+    </div><!-- /container -->
+  </body>
+</html>

data/spec/html/bootstrap-switch.js

@@ -0,0 +1,61 @@
+(function() {
+  var $confirm;
+
+  $confirm = null;
+
+  $(function() {
+    var $createDestroy, $window, sectionTop;
+    $window = $(window);
+    sectionTop = $(".top").outerHeight() + 20;
+    $createDestroy = $("#switch-create-destroy");
+    // hljs.initHighlightingOnLoad();
+    $("a[href*=\"#\"]").on("click", function(event) {
+      var $target;
+      event.preventDefault();
+      $target = $($(this).attr("href").slice("#"));
+      if ($target.length) {
+        return $window.scrollTop($target.offset().top - sectionTop);
+      }
+    });
+    $("input[type=\"checkbox\"], input[type=\"radio\"]").not("[data-switch-no-init]").bootstrapSwitch();
+    $("[data-switch-get]").on("click", function() {
+      var type;
+      type = $(this).data("switch-get");
+      return alert($("#switch-" + type).bootstrapSwitch(type));
+    });
+    $("[data-switch-set]").on("click", function() {
+      var type;
+      type = $(this).data("switch-set");
+      return $("#switch-" + type).bootstrapSwitch(type, $(this).data("switch-value"));
+    });
+    $("[data-switch-toggle]").on("click", function() {
+      var type;
+      type = $(this).data("switch-toggle");
+      return $("#switch-" + type).bootstrapSwitch("toggle" + type.charAt(0).toUpperCase() + type.slice(1));
+    });
+    $("[data-switch-set-value]").on("input", function(event) {
+      var type, value;
+      event.preventDefault();
+      type = $(this).data("switch-set-value");
+      value = $.trim($(this).val());
+      if ($(this).data("value") === value) {
+        return;
+      }
+      return $("#switch-" + type).bootstrapSwitch(type, value);
+    });
+    $("[data-switch-create-destroy]").on("click", function() {
+      var isSwitch;
+      isSwitch = $createDestroy.data("bootstrap-switch");
+      $createDestroy.bootstrapSwitch((isSwitch ? "destroy" : null));
+      return $(this).button((isSwitch ? "reset" : "destroy"));
+    });
+    return $confirm = $("#confirm").bootstrapSwitch({
+      size: "large",
+      onSwitchChange: function(event, state) {
+        event.preventDefault();
+        return console.log(state, event.isDefaultPrevented());
+      }
+    });
+  });
+
+}).call(this);

data/spec/html/bootstrap-touchspin.html

@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<!--[if IE 9]><html class="ie9"><![endif]-->
+<!--[if gt IE 9]><!-->
+<html>
+<!--<![endif]-->
+  <head>
+    <title>Bootstrap Touchspin - PatternFly</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" href="../dist/img/favicon.ico">
+    <!-- iPad retina icon -->
+    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../dist/img/apple-touch-icon-precomposed-152.png">
+    <!-- iPad retina icon (iOS < 7) -->
+    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../dist/img/apple-touch-icon-precomposed-144.png">
+    <!-- iPad non-retina icon -->
+    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="../dist/img/apple-touch-icon-precomposed-76.png">
+    <!-- iPad non-retina icon (iOS < 7) -->
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../dist/img/apple-touch-icon-precomposed-72.png">
+    <!-- iPhone 6 Plus icon -->
+    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="../dist/img/apple-touch-icon-precomposed-180.png">
+    <!-- iPhone retina icon (iOS < 7) -->
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../dist/img/apple-touch-icon-precomposed-114.png">
+    <!-- iPhone non-retina icon (iOS < 7) -->
+    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../dist/img/apple-touch-icon-precomposed-57.png">
+    <link href="../dist/css/patternfly.min.css" rel="stylesheet" media="screen, print">
+    <link href="../dist/css/patternfly-additions.min.css" rel="stylesheet" media="screen, print">
+    <link href="tests.css" rel="stylesheet" media="screen, print">
+    <script src="../components/jquery/dist/jquery.min.js"></script>
+    <script src="../components/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script src="../components/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js"></script>
+    <script src="../dist/js/patternfly.min.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <div class="page-header">
+        <h1>Bootstrap Touchspin</h1>
+      </div>
+      <div class="alert alert-warning">
+        <span class="pficon pficon-warning-triangle-o"></span>
+        These examples are included for development testing purposes.  For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a>, <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://www.virtuosoft.eu/code/bootstrap-touchspin/">http://www.virtuosoft.eu/code/bootstrap-touchspin/</a>.
+      </div>
+      <hr>
+      <h2>Example with postfix</h2>
+      <input id="demo1" type="text" value="55" name="demo1">
+      <script>
+        $("input[name='demo1']").TouchSpin({
+          min: 0,
+          max: 100,
+          step: 0.1,
+          decimals: 2,
+          boostat: 5,
+          maxboostedstep: 10,
+          postfix: '%'
+        });
+      </script>
+      <h2>With prefix</h2>
+      <form class="form-horizontal" role="form">
+        <div class="form-group">
+          <label for="demo2" class="col-md-3 control-label">Example:</label>
+          <div class="col-md-9">
+            <input id="demo2" type="text" value="0" name="demo2" class="col-md-8 form-control">
+          </div>
+        </div>
+      </form>
+      <script>
+        $("input[name='demo2']").TouchSpin({
+          min: -1000000000,
+          max: 1000000000,
+          stepinterval: 50,
+          maxboostedstep: 10000000,
+          prefix: '$'
+        });
+      </script>
+      <h2>Vertical button alignment</h2>
+      <input id="demo_vertical" type="text" value="" name="demo_vertical">
+      <script>
+        $("input[name='demo_vertical']").TouchSpin({
+          verticalbuttons: true
+        });
+      </script>
+      <h2>Vertical buttons with custom icons</h2>
+      <input id="demo_vertical2" type="text" value="" name="demo_vertical2">
+      <script>
+        $("input[name='demo_vertical2']").TouchSpin({
+          verticalbuttons: true,
+          verticalupclass: 'glyphicon glyphicon-plus',
+          verticaldownclass: 'glyphicon glyphicon-minus'
+        });
+      </script>
+      <h2>Init with empty value</h2>
+      <input id="demo3" type="text" value="" name="demo3">
+      <script>
+        $("input[name='demo3']").TouchSpin();
+      </script>
+      <h2>Value attribute is not set <small>(applying settings.initval)</small></h2>
+      <input id="demo3_21" type="text" value="" name="demo3_21">
+      <script>
+        $("input[name='demo3_21']").TouchSpin({
+          initval: 40
+        });
+      </script>
+      <h2>Value is set explicitly to 33 <small>(skipping settings.initval)</small></h2>
+      <input id="demo3_22" type="text" value="33" name="demo3_22">
+      <script>
+        $("input[name='demo3_22']").TouchSpin({
+          initval: 40
+        });
+      </script>
+      <h2>Button postfix (small)</h2>
+      <input id="demo4" type="text" value="" name="demo4" class="input-sm">
+      <script>
+        $("input[name='demo4']").TouchSpin({
+          postfix: "a button",
+          postfix_extraclass: "btn btn-default"
+        });
+      </script>
+      <h2>Button postfix (large)</h2>
+      <div class="input-group input-group-lg">
+        <input id="demo4_2" type="text" value="" name="demo4_2" class="form-control input-lg">
+      </div>
+      <script>
+        $("input[name='demo4_2']").TouchSpin({
+          postfix: "a button",
+          postfix_extraclass: "btn btn-default"
+        });
+      </script>
+      <h2>Button group</h2>
+      <div class="input-group">
+        <input id="demo5" type="text" class="form-control" name="demo5" value="50">
+        <div class="input-group-btn">
+          <button type="button" class="btn btn-default">Action</button>
+          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+            <span class="caret"></span>
+            <span class="sr-only">Toggle Dropdown</span>
+          </button>
+          <ul class="dropdown-menu pull-right" role="menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div>
+      </div>
+      <script>
+        $("input[name='demo5']").TouchSpin({
+          prefix: "pre",
+          postfix: "post"
+        });
+      </script>
+      <h2>Change button class</h2>
+      <input id="demo6" type="text" value="50" name="demo6">
+      <script>
+        $("input[name='demo6']").TouchSpin({
+          buttondown_class: "btn btn-link",
+          buttonup_class: "btn btn-link"
+        });
+      </script>
+      <h2>Event demo</h2>
+      <div class="row">
+        <div class="col-md-3">
+          <input id="demo7" type="text" value="50" name="demo7">
+        </div>
+        <div class="col-md-9">
+          <pre id="demo7textarea" style="height:200px;overflow:auto;"></pre>
+        </div>
+        <script>
+          var i = $("input[name='demo7']"),
+            demoarea = $("#demo7textarea"),
+            text = "";
+          function writeLine(line) {
+            text += line + "\n";
+            demoarea.text(text);
+            demoarea.scrollTop(
+              demoarea[0].scrollHeight - demoarea.height()
+            );
+          }
+          i.TouchSpin({});
+          i.on("touchspin.on.startspin", function() {
+            writeLine("touchspin.on.startspin");
+          });
+          i.on("touchspin.on.startupspin", function() {
+            writeLine("touchspin.on.startupspin");
+          });
+          i.on("touchspin.on.startdownspin", function() {
+            writeLine("touchspin.on.startdownspin");
+          });
+          i.on("touchspin.on.stopspin", function() {
+            writeLine("touchspin.on.stopspin");
+          });
+          i.on("touchspin.on.stopupspin", function() {
+            writeLine("touchspin.on.stopupspin");
+          });
+          i.on("touchspin.on.stopdownspin", function() {
+            writeLine("touchspin.on.stopdownspin");
+          });
+          i.on("touchspin.on.min", function() {
+            writeLine("touchspin.on.min");
+          });
+          i.on("touchspin.on.max", function() {
+            writeLine("touchspin.on.max");
+          });
+        </script>
+      </div>
+
+    </div><!-- /container -->
+  </body>
+</html>