Merge pull request #2 from FezVrasta/master

asd

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 
-node_js: "0.10"
+node_js: 0.10
 
 before_script:
   - npm install -g grunt-cli

CONTRIBUTING.md

@@ -9,3 +9,7 @@ It already includes every needed dependency and is based on the latest version o
 ## Grunt
 
 **Grunt!** Ok... when you edit something please run `grunt` to compile CSS and copy stuff in the correct folders. Thanks!
+
+## License
+
+Please be sure to read the [license](LICENSE.md) before contributing to this project. This software is share source, this means that the author keep every rights on every edit on this source.

Gruntfile.js

@@ -224,7 +224,12 @@ module.exports = function(grunt) {
         command: "node_modules/.bin/spacejam --mongo-url mongodb:// test-packages ./"
       },
       "meteor-publish": {
-        command: "meteor publish"
+        command: [
+          "ALL_EXIT_CODE=0; for PACKAGE_FILE in meteor/package*.js",
+            "do cp $PACKAGE_FILE ./package.js && meteor publish $@",
+            "ALL_EXIT_CODE=$(echo $ALL_EXIT_CODE + $? | bc); done",
+          "exit $ALL_EXIT_CODE"
+        ].join(";")
       }
     }
 

LICENSE.md

@@ -4,6 +4,9 @@ Copyright (C) 2014+  Federico Zivolo
 This program is free software: you can redistribute it and/or modify
 it under the terms you can find below.
 
+You may edit, improve and redistribute this software always under the
+terms of this license.
+
 You can use this software for free only for no-profit projects.
 If you'd like to use this software in a commercial project you may
 contact the author (Federico Zivolo) of the software and ask for his
@@ -17,11 +20,10 @@ published under the same license of the original software.
 
 This software may be sold if used inside a software which uses it as
 dependency, in any case, this license must be included in the
-software.
+software. This always after have fulfilled author's conditions.
 
 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
-GNU General Public License for more details.
 
-This license could be edited in any moment without alert.
+This license could be edited in any moment without alert.

README.md

@@ -130,17 +130,15 @@ The syntax to add a Material icon is:
 
 ## Material.js
 
-`Material.js` is a jQuery plugin that add some magic to your markup and allows Material Design for Bootstrap to style some elements like inputs, checkboxes, radios etc.
+`Material.js` is a jQuery plugin that adds some magic to your markup and allows Material Design for Bootstrap to style some elements like inputs, checkboxes, radios etc.
 
 ### Functions
 
-This plugin exposes some functions, them are:
+* `$.material.init()` - shortcut to run all the following commands:
-
+* `$.material.ripples()` will apply ripples.js to the default elements.
-`$.material.init()` is a shortcut to run all the following commands.
+* `$.material.input()` will enable the MD style to the text inputs, and other kind of inputs (number, email, file etc).
-`$.material.ripples()` will apply ripples.js to the default elements.
+* `$.material.checkbox():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the [Inputs section](#inputs).
-`$.material.input()` will enable the MD style to the text inputs, and other kind of inputs (number, email, file etc).
+* `$.material.radio():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs section.
-`$.material.checkbox():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs chapter.
-`$.material.radio():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs chapter.
 
 ### Apply Material.js only to specific elements
 
@@ -174,6 +172,10 @@ Create snackbars and toasts with the [SnackbarJS plugin](https://github.com/FezV
 This is part of the Material Design for Bootstrap project and is a plain JavaScript script which creates the ripple effect when clicking on the specified elements.
 At the moment RipplesJS does not have its own repository but it will probably have one in the future.
 
+You may want to set a custom color to the ripples of a specific element, to do so write:
+
+    <button class="btn btn-default" data-ripple-color="#F0F0F0">Custom ripple</button>
+
 ### noUiSlider
 
 Make cross-browser sliders and get them styled with Material Design thanks to the support provided by this theme.

dist/js/ripples.js

@@ -102,7 +102,7 @@
       ripple.css({"left": relX, "top": relY});
 
       // Set the background color of the ripple
-      ripple.css({"background-color": window.getComputedStyle($(this)[0]).color});
+      ripple.css({"background-color": ($(this).data("ripple-color")) ? $(this).data("ripple-color") : window.getComputedStyle($(this)[0]).color});
 
       // Spawn it
       wrapper.append(ripple);
@@ -148,7 +148,7 @@
       }, 500);
 
       // On mouseup or on mouseleave, set the mousedown flag to "off" and try to destroy the ripple
-      element.on("mouseup mouseleave", function() {
+      element.on("mouseup mouseleave touchend", function() {
         ripple.data("mousedown", "off");
         // If the transition "on" is finished then we can destroy the ripple with transition "out"
         if (ripple.data("animating") == "off") {

dist/js/ripples.min.js

@@ -1,2 +1,2 @@
-!function(a){a.support.transition=function(){var a=document.body||document.documentElement,b=a.style,c=void 0!==b.transition||void 0!==b.WebkitTransition||void 0!==b.MozTransition||void 0!==b.MsTransition||void 0!==b.OTransition;return c}(),a.ripples=function(b){function c(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)}function d(b){b.off(),a.support.transition?b.addClass("ripple-out"):b.animate({opacity:0},100,function(){b.trigger("transitionend")}),b.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){b.remove()})}var e={target:".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"};b=a.extend(e,b),a(document).on("mousedown touchstart",b.target,function(b){if(c()&&"mousedown"==b.type)return!1;var e=a(this);a(this).find(".ripple-wrapper").length||a(this).append("<div class=ripple-wrapper></div>");var f,g,h=a(this).find(".ripple-wrapper"),i=h.offset();if(c()){if(b=b.originalEvent,1!==b.touches.length)return;f=b.touches[0].pageX-i.left,g=b.touches[0].pageY-i.top}else f=b.pageX-i.left,g=b.pageY-i.top;var j=a("<div></div>");j.addClass("ripple"),j.css({left:f,top:g}),j.css({"background-color":window.getComputedStyle(a(this)[0]).color}),h.append(j),function(){return window.getComputedStyle(j[0]).opacity}();var k=Math.max(a(this).outerWidth(),a(this).outerHeight())/j.outerWidth()*2.5;a.support.transition?(j.css({"-ms-transform":"scale("+k+")","-moz-transform":"scale("+k+")","-webkit-transform":"scale("+k+")",transform:"scale("+k+")"}),j.addClass("ripple-on"),j.data("animating","on"),j.data("mousedown","on")):j.animate({width:2*Math.max(a(this).outerWidth(),a(this).outerHeight()),height:2*Math.max(a(this).outerWidth(),a(this).outerHeight()),"margin-left":-1*Math.max(a(this).outerWidth(),a(this).outerHeight()),"margin-top":-1*Math.max(a(this).outerWidth(),a(this).outerHeight()),opacity:.2},500,function(){j.trigger("transitionend")}),setTimeout(function(){j.data("animating","off"),"off"==j.data("mousedown")&&d(j)},500),e.on("mouseup mouseleave",function(){j.data("mousedown","off"),"off"==j.data("animating")&&d(j)})})},a.fn.ripples=function(){a.ripples({target:a(this)})}}(jQuery);
+!function(a){a.support.transition=function(){var a=document.body||document.documentElement,b=a.style,c=void 0!==b.transition||void 0!==b.WebkitTransition||void 0!==b.MozTransition||void 0!==b.MsTransition||void 0!==b.OTransition;return c}(),a.ripples=function(b){function c(){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)}function d(b){b.off(),a.support.transition?b.addClass("ripple-out"):b.animate({opacity:0},100,function(){b.trigger("transitionend")}),b.on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){b.remove()})}var e={target:".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"};b=a.extend(e,b),a(document).on("mousedown touchstart",b.target,function(b){if(c()&&"mousedown"==b.type)return!1;var e=a(this);a(this).find(".ripple-wrapper").length||a(this).append("<div class=ripple-wrapper></div>");var f,g,h=a(this).find(".ripple-wrapper"),i=h.offset();if(c()){if(b=b.originalEvent,1!==b.touches.length)return;f=b.touches[0].pageX-i.left,g=b.touches[0].pageY-i.top}else f=b.pageX-i.left,g=b.pageY-i.top;var j=a("<div></div>");j.addClass("ripple"),j.css({left:f,top:g}),j.css({"background-color":a(this).data("ripple-color")?a(this).data("ripple-color"):window.getComputedStyle(a(this)[0]).color}),h.append(j),function(){return window.getComputedStyle(j[0]).opacity}();var k=Math.max(a(this).outerWidth(),a(this).outerHeight())/j.outerWidth()*2.5;a.support.transition?(j.css({"-ms-transform":"scale("+k+")","-moz-transform":"scale("+k+")","-webkit-transform":"scale("+k+")",transform:"scale("+k+")"}),j.addClass("ripple-on"),j.data("animating","on"),j.data("mousedown","on")):j.animate({width:2*Math.max(a(this).outerWidth(),a(this).outerHeight()),height:2*Math.max(a(this).outerWidth(),a(this).outerHeight()),"margin-left":-1*Math.max(a(this).outerWidth(),a(this).outerHeight()),"margin-top":-1*Math.max(a(this).outerWidth(),a(this).outerHeight()),opacity:.2},500,function(){j.trigger("transitionend")}),setTimeout(function(){j.data("animating","off"),"off"==j.data("mousedown")&&d(j)},500),e.on("mouseup mouseleave touchend",function(){j.data("mousedown","off"),"off"==j.data("animating")&&d(j)})})},a.fn.ripples=function(){a.ripples({target:a(this)})}}(jQuery);
 //# sourceMappingURL=ripples.min.js.map

dist/js/ripples.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripples.min.js","sources":["ripples.js"],"names":["$","support","transition","thisBody","document","body","documentElement","thisStyle","style","undefined","WebkitTransition","MozTransition","MsTransition","OTransition","ripples","options","isTouch","test","navigator","userAgent","rippleOut","ripple","off","addClass","animate","opacity","trigger","on","remove","defaultOptions","target","extend","e","type","element","this","find","length","append","relX","relY","wrapper","wrapperOffset","offset","originalEvent","touches","pageX","left","pageY","top","css","background-color","window","getComputedStyle","color","size","Math","max","outerWidth","outerHeight","-ms-transform","-moz-transform","-webkit-transform","transform","data","width","height","margin-left","margin-top","setTimeout","fn","jQuery"],"mappings":"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"}
+{"version":3,"file":"ripples.min.js","sources":["ripples.js"],"names":["$","support","transition","thisBody","document","body","documentElement","thisStyle","style","undefined","WebkitTransition","MozTransition","MsTransition","OTransition","ripples","options","isTouch","test","navigator","userAgent","rippleOut","ripple","off","addClass","animate","opacity","trigger","on","remove","defaultOptions","target","extend","e","type","element","this","find","length","append","relX","relY","wrapper","wrapperOffset","offset","originalEvent","touches","pageX","left","pageY","top","css","background-color","data","window","getComputedStyle","color","size","Math","max","outerWidth","outerHeight","-ms-transform","-moz-transform","-webkit-transform","transform","width","height","margin-left","margin-top","setTimeout","fn","jQuery"],"mappings":"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"}

less/_buttons.less

@@ -1,109 +1,109 @@
 .btn {
-    position: relative;
+  position: relative;
-    padding: 8px 30px;
+  padding: 8px 30px;
-    border: 0;
+  border: 0;
-    margin: 10px 1px;
+  margin: 10px 1px;
-    cursor: pointer;
+  cursor: pointer;
-    border-radius: 2px;
+  border-radius: 2px;
-    text-transform: uppercase;
+  text-transform: uppercase;
-    text-decoration: none;
+  text-decoration: none;
-    color: @darkbg-text;
+  color: @darkbg-text;
 
-    &:hover:not(.btn-link):not(.btn-flat) {
+  &:hover:not(.btn-link):not(.btn-flat) {
-        .shadow-z-2-hover();
+    .shadow-z-2-hover();
+  }
+  &:active:not(.btn-link):not(.btn-flat) {
+    .shadow-z-3();
+  }
+  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  outline: none !important;
+
+  .variations(~".btn-flat:not(.btn-link)", color, @lightbg-text);
+
+  .background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default);
+
+  &.btn-flat {
+    background: none;
+    box-shadow: none;
+    font-weight: 500;
+    &:disabled {
+      color: @text-disabled !important;
     }
-    &:active:not(.btn-link):not(.btn-flat) {
+  }
-        .shadow-z-3();
+
+  &.btn-raised {
+    .btn-shadow();
+  }
+
+  &.btn-fab {
+    margin: 0;
+    padding: 15px;
+    font-size: 26px;
+    width: 56px;
+    height: 56px;
+    &, &:hover {
+      .shadow-z-1();
+      .variations(~"", background-color, transparent);
     }
-    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    &, .ripple-wrapper {
-    outline: none !important;
+      border-radius: 100%;
-
-    .variations(~".btn-flat:not(.btn-link)", color, @lightbg-text);
-
-	.background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default);
-
-    &.btn-flat {
-        background: none;
-        box-shadow: none;
-        font-weight: 500;
-        &:disabled {
-            color: @text-disabled !important;
-        }
     }
-
+    &.btn-fab-mini {
-    &.btn-raised {
+      width: 40px;
-        .btn-shadow();
+      height: 40px;
+      padding: 13px;
+      font-size: 15px;
     }
-
+    i {
-    &.btn-fab {
+      position: relative;
-        margin: 0;
+      top: -5px;
-        padding: 15px;
-        font-size: 26px;
-        width: 56px;
-        height: 56px;
-        &, &:hover {
-            .shadow-z-1();
-            .variations(~"", background-color, transparent);
-        }
-        &, .ripple-wrapper {
-            border-radius: 100%;
-        }
-        &.btn-fab-mini {
-            width: 40px;
-            height: 40px;
-            padding: 13px;
-            font-size: 15px;
-        }
-        i {
-            position: relative;
-            top: -5px;
-        }
     }
+  }
 }
 
 // This is needed to style buttons which has not a variation suffix (they must be stiled as btn-default)
 .btn-link, .btn:not([class^="btn btn-"]), .btn-default {
+  color: @lightbg-text;
+  &:hover {
     color: @lightbg-text;
-    &:hover {
+  }
-        color: @lightbg-text;
-    }
 }
 .btn:not([class^="btn btn-"]), .btn-default, .btn-flat:not(.btn-link) {
-    &:hover, &.active {
+  &:hover, &.active {
-        background-color: rgba(255,255,255,0.5);
+    background-color: rgba(255,255,255,0.5);
-    }
+  }
 }
 .open > .dropdown-toggle.btn {
-    .variations(~"", background-color, @btn-default);
+  .variations(~"", background-color, @btn-default);
 }
 .btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group {
   margin-left: 0;
 }
 .btn-group, .btn-group-vertical {
-    position: relative;
+  position: relative;
-    border-radius: 2px;
+  border-radius: 2px;
-    margin: 10px 1px;
+  margin: 10px 1px;
 
+  .btn-shadow();
+  &.open .dropdown-toggle {
+    box-shadow: none;
+  }
+  &.btn-group-raised {
     .btn-shadow();
-    &.open .dropdown-toggle {
+  }
-        box-shadow: none;
+  .btn, .btn:active, .btn-group {
-    }
+    box-shadow: none !important;
-    &.btn-group-raised {
+    margin: 0;
-        .btn-shadow();
+  }
-    }
-    .btn, .btn:active, .btn-group {
-        box-shadow: none !important;
-        margin: 0;
-    }
 }
 .btn-group-flat {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 .btn-shadow() {
-    .shadow-z-2();
+  .shadow-z-1();
-    transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    &:active:not(.btn-link) {
+  &:active:not(.btn-link) {
-        .shadow-z-3();
+    .shadow-z-3();
-    }
+  }
 }

less/_mixins.less

@@ -1,25 +1,25 @@
 // usage: .variations(~" .check", color, transparent);
 .variations(@extra, @property, @default) {
 
-    // Bootstrap shades
+  // Bootstrap shades
-    &@{extra}, &-default@{extra} {
+  &@{extra}, &-default@{extra} {
-        @{property}: @default;
+    @{property}: @default;
-    }
+  }
-    &-primary@{extra} {
+  &-primary@{extra} {
-        @{property}: @primary;
+    @{property}: @primary;
-    }
+  }
-    &-success@{extra} {
+  &-success@{extra} {
-        @{property}: @success;
+    @{property}: @success;
-    }
+  }
-    &-info@{extra} {
+  &-info@{extra} {
-        @{property}: @info;
+    @{property}: @info;
-    }
+  }
-    &-warning@{extra} {
+  &-warning@{extra} {
-        @{property}: @warning;
+    @{property}: @warning;
-    }
+  }
-    &-danger@{extra} {
+  &-danger@{extra} {
-        @{property}: @danger;
+    @{property}: @danger;
-    }
+  }
 
 
   .variations-factory(@material-color) {
@@ -27,7 +27,7 @@
 
       &-material-@{material-color}@{material-color-number}@{extra} {
         @final-color: "@{material-color}@{material-color-number}";
-        		@{property}: @@final-color;
+        @{property}: @@final-color;
       }
 
     }
@@ -67,63 +67,6 @@
   .variations-factory(~"grey");
   .variations-factory(~"blue-grey");
 
-  /*
-    // Material shades
-    &-material-red@{extra} {
-        @{property}: @red;
-    }
-    &-material-pink@{extra} {
-        @{property}: @pink;
-    }
-    &-material-purple@{extra} {
-        @{property}: @purple;
-    }
-    &-material-deeppurple@{extra} {
-        @{property}: @deeppurple;
-    }
-    &-material-indigo@{extra} {
-        @{property}: @indigo;
-    }
-    &-material-blue@{extra} {
-        @{property}: @blue;
-    }
-    &-material-lightblue@{extra} {
-        @{property}: @lightblue;
-    }
-    &-material-cyan@{extra} {
-        @{property}: @cyan;
-    }
-    &-material-teal@{extra} {
-        @{property}: @teal;
-    }
-    &-material-lightgreen@{extra} {
-        @{property}: @lightgreen;
-    }
-    &-material-lime@{extra} {
-        @{property}: @lime;
-    }
-    &-material-lightyellow@{extra} {
-        @{property}: @lightyellow;
-    }
-    &-material-orange@{extra} {
-        @{property}: @orange;
-    }
-    &-material-deeporange@{extra} {
-        @{property}: @deeporange;
-    }
-    &-material-grey@{extra} {
-        @{property}: @grey;
-    }
-    &-material-bluegrey@{extra} {
-        @{property}: @bluegrey;
-    }
-    &-material-brown@{extra} {
-        @{property}: @brown;
-    }
-    &-material-lightgrey@{extra} {
-        @{property}: @lightgrey;
-    }
-  */
 }
 
 .background-variations(@extra, @default) {
@@ -132,28 +75,32 @@
 
   .set-background-and-font-color(@bg-color) {
     background-color: @bg-color;
+
     color: contrast(@bg-color, @lightbg-text, @darkbg-text, @contrast-factor);
+    & when (@bg-color = @btn-default) {
+      color: @lightbg-text;
+    }
   }
 
   // bootstrap styles
-    &@{extra}, &-default@{extra} {
+  &@{extra}, &-default@{extra} {
     .set-background-and-font-color(@default);
-    }
+  }
-    &-primary@{extra} {
+  &-primary@{extra} {
     .set-background-and-font-color(@primary);
-    }
+  }
-    &-success@{extra} {
+  &-success@{extra} {
     .set-background-and-font-color(@success);
-    }
+  }
-    &-info@{extra} {
+  &-info@{extra} {
     .set-background-and-font-color(@info);
-    }
+  }
-    &-warning@{extra} {
+  &-warning@{extra} {
     .set-background-and-font-color(@warning);
-    }
+  }
-    &-danger@{extra} {
+  &-danger@{extra} {
     .set-background-and-font-color(@danger);
-    }
+  }
 
   // given a color build multiples dephs
   .background-variations-factory(@material-color) {
@@ -217,24 +164,24 @@
   }
 
   // bootstrap styles
-    &@{extra}, &-default@{extra} {
+  &@{extra}, &-default@{extra} {
     .set-font-color(@default);
-    }
+  }
-    &-primary@{extra} {
+  &-primary@{extra} {
     .set-font-color(@primary);
-    }
+  }
-    &-success@{extra} {
+  &-success@{extra} {
     .set-font-color(@success);
-    }
+  }
-    &-info@{extra} {
+  &-info@{extra} {
     .set-font-color(@info);
-    }
+  }
-    &-warning@{extra} {
+  &-warning@{extra} {
     .set-font-color(@warning);
-    }
+  }
-    &-danger@{extra} {
+  &-danger@{extra} {
     .set-font-color(@danger);
-    }
+  }
 
   // given a color build multiples dephs
   .background-variations-factory(@material-color) {

less/_panels.less

@@ -1,20 +1,21 @@
 .panel {
-    border-radius: 2px;
+  border-radius: 2px;
-    border: 0;
+  border: 0;
 
-    .variations(~" > .panel-heading", background-color, @lightgrey);
+  .variations(~" > .panel-heading", background-color, @lightgrey);
-    .shadow-z-1;
+  .shadow-z-1;
 }
 
 
 [class*="panel-"] > .panel-heading {
-    color: @darkbg-text;
+  color: @darkbg-text;
+  border: 0;
 }
 .panel-default, .panel:not([class*="panel-"]) {
-    > .panel-heading {
+  > .panel-heading {
-        color: @lightbg-text;
+    color: @lightbg-text;
-    }
+  }
 }
 .panel-footer {
-    background-color: @lightgrey;
+  background-color: @lightgrey;
 }

meteor/README.md

@@ -3,16 +3,26 @@
 Packaging [FezVrasta's Bootstrap Material Design](https://github.com/FezVrasta/bootstrap-material-design)
 for [Meteor.js](http://meteor.com).
 
+
+# Versions
+
+All versions include the Material Design theme CSS, JS, and `ripple.js` for the ripple click effect.
+
+* [fezvrasta:bootstrap-material-design](https://atmospherejs.com/fezvrasta/bootstrap-material-design) - Includes Bootstrap's glyphicons along with some Material Design icons.
+* [fezvrasta:bootstrap-material-design-noglyph](https://atmospherejs.com/fezvrasta/bootstrap-material-design-noglyph) - No Bootstrap glyphicons, but includes the Material Design icons.
+* [fezvrasta:bootstrap-material-design-noicons](https://atmospherejs.com/fezvrasta/bootstrap-material-design-noicons) - No icons at all. Useful if you want to use another icon set instead, such as [Font Awesome](https://atmospherejs.com/fortawesome/fontawesome).
+
+
 # Usage
 
 Just run
 
 
 ```sh
-meteor add meteorpackaging:bootstrap-material-design
+meteor add fezvrasta:bootstrap-material-design
 ```
 
-and your Bootstrap CSS will look like Google's Material Design (Polymer Paper).
+and your Bootstrap CSS will look like Google's Material Design (Polymer Paper Elements).
 
 
 # Dependencies
@@ -37,13 +47,20 @@ If you encounter an issue while using this package, please CC @dandv when you fi
 
 # DONE
 
-* Icons font loading test: EOT, SVG, TTF, WOFF
+* Automatically initialize the JS on client startup: `$.material.init()`
-* Ripples test
+* Material Design Icons font loading test: EOT, SVG, TTF, WOFF
+* Bootstrap plugin loading tests
+* Visual check, including for the ripple effect
 
 
 # TODO
 
-* Depend on a version of twbs:bootstrap without the Glyphicons font, to avoid loading those obsoleted icons
+* LESS version / fine-grained control? See [nemo64's package](https://github.com/Nemo64/meteor-bootstrap).
+
+
+# Testing
+
+To test the theme in a browser, run `cp meteor/package.js ./ && meteor test-packages ./`
 
 
 # Acknowledgements

meteor/example/.meteor/.gitignore

@@ -0,0 +1 @@
+local

meteor/example/.meteor/packages

@@ -0,0 +1,7 @@
+# Meteor packages used by this project, one per line.
+#
+# 'meteor add' and 'meteor remove' will edit this file for you,
+# but you can also edit it by hand.
+
+meteor-platform
+fezvrasta:bootstrap-material-design-noglyph

meteor/example/.meteor/release

@@ -0,0 +1 @@
+METEOR@1.0.1

meteor/example/client/bmd.css

@@ -0,0 +1,3 @@
+body {
+  background: #8BC34A;
+}

meteor/example/client/bmd.html

@@ -0,0 +1,14 @@
+<body>
+  <h1>Watch the ripple effect on newly created buttons!</h1>
+
+  {{> hello}}
+</body>
+
+<template name="hello">
+  <button type="button" class="btn btn-info">Click Me</button>
+  <hr/>
+  {{#each buttons}}
+    <button type="button" class="btn btn-primary">{{name}}</button>
+    <br/>
+  {{/each}}
+</template>

meteor/example/client/bmd.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var Buttons = new Mongo.Collection(null);
+
+Template.hello.helpers({
+  buttons: function () {
+    return Buttons.find();
+  }
+});
+
+Template.hello.events({
+  'click button': function (event, template) {
+    Buttons.insert({name: _.sample(['No, click ME!', 'Click me too!', 'Click here!', 'Hey!', 'Psst!'])});
+  }
+});

meteor/example/packages/bootstrap-material-design

@@ -0,0 +1 @@
+../../../

meteor/example/run.bat

@@ -0,0 +1,5 @@
+mklink ..\..\package.js "meteor/package-noglyph.js"
+mklink package.json "../../package.json"
+set MONGO_URL=mongodb://
+meteor run
+del ..\..\package.js package.json

meteor/example/run.sh

@@ -0,0 +1,15 @@
+# sanity check: make sure we're in the root directory of the example
+cd "$( dirname "$0" )"
+
+# delete temp files even if Ctrl+C is pressed
+int_trap() {
+  echo "Cleaning up..."
+}
+trap int_trap INT
+
+ln -s "meteor/package-noglyph.js" ../../package.js
+ln -s "../../package.json" package.json
+
+MONGO_URL=mongodb:// meteor run
+
+rm ../../package.js package.json

meteor/init.js

@@ -0,0 +1,3 @@
+Meteor.startup(function () {
+  $.material.init();
+});

meteor/package-noglyph.js

@@ -0,0 +1,39 @@
+// package metadata file for Meteor.js
+'use strict';
+
+var packageName = 'fezvrasta:bootstrap-material-design-noglyph';  // https://atmospherejs.com/fezvrasta/bootstrap-material-design-noglyph
+var where = 'client';  // where to install: 'client' or 'server'. For both, pass nothing.
+
+var packageJson = JSON.parse(Npm.require("fs").readFileSync('package.json'));
+
+Package.describe({
+  name: packageName,
+  summary: 'FezVrasta\'s Bootstrap Google Material Design theme. Material icons instead of Bootstrap glyphicons.',
+  version: packageJson.version,
+  git: 'https://github.com/fezvrasta/bootstrap-material-design.git'
+});
+
+Package.onUse(function (api) {
+  api.versionsFrom(['METEOR@0.9.0', 'METEOR@1.0']);
+  api.use('twbs:bootstrap-noglyph@3.3.1');
+  api.use('jquery');
+  api.addFiles([
+    // we bundle all font files, but the client will request only one of them via the CSS @font-face rule
+    'dist/fonts/Material-Design-Icons.eot',  // IE8 or older
+    'dist/fonts/Material-Design-Icons.svg',  // SVG fallback for iOS < 5 - http://caniuse.com/#feat=svg-fonts, http://stackoverflow.com/a/11002874/126903
+    'dist/fonts/Material-Design-Icons.ttf',  // Android Browers 4.1, 4.3 - http://caniuse.com/#feat=ttf
+    'dist/fonts/Material-Design-Icons.woff', // Supported by all modern browsers
+    'dist/css/material-wfont.css',           // includes @font-face rules to load the Roboto font
+    'dist/css/ripples.css',
+    'dist/js/material.js',
+    'dist/js/ripples.js',
+    'meteor/init.js'
+  ], where);
+});
+
+Package.onTest(function (api) {
+  api.use(packageName, where);
+  api.use(['tinytest', 'http'], where);
+
+  api.addFiles('meteor/test.js', where);  // same test because we don't test the glyphicons in particular (that's the job of twbs:bootstrap)
+});

meteor/package-noicons.js

@@ -0,0 +1,34 @@
+// package metadata file for Meteor.js
+'use strict';
+
+var packageName = 'fezvrasta:bootstrap-material-design-noicons';  // https://atmospherejs.com/fezvrasta/bootstrap-material-design-noicons
+var where = 'client';  // where to install: 'client' or 'server'. For both, pass nothing.
+
+var packageJson = JSON.parse(Npm.require("fs").readFileSync('package.json'));
+
+Package.describe({
+  name: packageName,
+  summary: 'FezVrasta\'s Bootstrap theme implementing Google\'s Material Design (Paper Elements). No icons.',
+  version: packageJson.version,
+  git: 'https://github.com/fezvrasta/bootstrap-material-design.git'
+});
+
+Package.onUse(function (api) {
+  api.versionsFrom(['METEOR@0.9.0', 'METEOR@1.0']);
+  api.use('twbs:bootstrap-noglyph@3.3.1');
+  api.use('jquery');
+  api.addFiles([
+    'dist/css/material-wfont.css',           // includes @font-face rules to load the Roboto font
+    'dist/css/ripples.css',
+    'dist/js/material.js',
+    'dist/js/ripples.js',
+    'meteor/init.js'
+  ], where);
+});
+
+Package.onTest(function (api) {
+  api.use(packageName, where);
+  api.use(['tinytest', 'http'], where);
+
+  api.addFiles('meteor/test-noicons.js', where);
+});

meteor/package.js

@@ -26,7 +26,8 @@ Package.onUse(function (api) {
     'dist/css/material-wfont.css',           // includes @font-face rules to load the Roboto font
     'dist/css/ripples.css',
     'dist/js/material.js',
-    'dist/js/ripples.js'
+    'dist/js/ripples.js',
+    'meteor/init.js'
   ], where);
 });
 

meteor/test-noicons.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var packageName;  // there seems to be no official way of finding out the name of the very package we're testing - http://stackoverflow.com/questions/27180709/in-a-tinytest-test-file-how-do-i-get-the-name-of-the-package
+
+var plugins = ['affix', 'alert', 'button', 'carousel', 'collapse', 'dropdown', 'modal', 'popover', 'scrollspy', 'tab', 'tooltip'];
+
+// test plugins
+plugins.forEach(function (plugin) {
+  Tinytest.add('Plugin - ' + plugin, function (test) {
+    test.instanceOf($(document.body)[plugin], Function, 'instantiated correctly');
+  });
+});
+
+// visual check
+plugins.forEach(function (plugin) {
+
+  Tinytest.addAsync('Visual check - ' + plugin, function (test, done) {
+    var bootstrapDropZone = document.createElement('div');
+    document.body.appendChild(bootstrapDropZone);
+
+
+    HTTP.get('http://rawgit.com/twbs/bootstrap/master/js/tests/visual/' + plugin + '.html', function callback(error, result) {
+      if (error) {
+        test.fail('Error getting the test file. Do we have an Internet connection to rawgit.com?');
+      } else {
+        // [^] matches across newlines. Stay within the container div, or else the fragment will attempt to load resources on its own.
+        bootstrapDropZone.innerHTML = result.content.match(/<div[^]+<\/div>/);
+        test.ok({message: 'Test passed if the display looks OK *and* clicking dropdowns/popovers/tooltips works.'});
+      }
+
+      done();
+    });
+
+  });
+
+});
+
+
+Tinytest.addAsync('Visual check - Material Design', function (test, done) {
+  var bootstrapDropZone = document.createElement('div');
+  document.body.appendChild(bootstrapDropZone);
+
+  HTTP.get('http://rawgit.com/FezVrasta/bootstrap-material-design/master/bootstrap-elements.html', function callback(error, result) {
+    if (error) {
+      test.fail('Error getting the FezVrasta test file. Do we have an Internet connection to rawgit.com?');
+    } else {
+      // [^] matches across newlines. Stay within the container div, or else the fragment will attempt to load resources on its own.
+      bootstrapDropZone.innerHTML = result.content.match(/<meta name="viewport"[^]+<script src=/);
+      test.ok({message: 'Test passed if the display looks OK *and* clicking dropdowns/popovers/tooltips works.'});
+      // only does anything after loading the 'dropdown' plugin test
+      $('[data-toggle="dropdown"]').dropdown();
+      // only does anything after loading the 'popover' plugin test
+      $('[data-toggle="popover"]').popover();
+      // only does anything after loading the 'tooltip' plugin test
+      $('[data-toggle="tooltip"]').tooltip();
+      // don't initialize the modals because that messes up the Tinytest runner HTML
+      $.material.init();
+    }
+
+    done();
+  });
+
+});

scripts/ripples.js

@@ -102,7 +102,7 @@
       ripple.css({"left": relX, "top": relY});
 
       // Set the background color of the ripple
-      ripple.css({"background-color": window.getComputedStyle($(this)[0]).color});
+      ripple.css({"background-color": ($(this).data("ripple-color")) ? $(this).data("ripple-color") : window.getComputedStyle($(this)[0]).color});
 
       // Spawn it
       wrapper.append(ripple);