diff --git a/.travis.yml b/.travis.yml
index efaa0e0f..34c8f5b3 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,6 +1,6 @@
language: node_js
-node_js: "0.10"
+node_js: 0.10
before_script:
- npm install -g grunt-cli
diff --git a/Gruntfile.js b/Gruntfile.js
index 4fab0994..8935462a 100644
--- a/Gruntfile.js
+++ b/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(";")
}
}
diff --git a/meteor/README.md b/meteor/README.md
index 1f729d5f..27ca1e4f 100644
--- a/meteor/README.md
+++ b/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
-* Ripples test
+* Automatically initialize the JS on client startup: `$.material.init()`
+* 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
diff --git a/meteor/example/.meteor/.gitignore b/meteor/example/.meteor/.gitignore
new file mode 100644
index 00000000..40830374
--- /dev/null
+++ b/meteor/example/.meteor/.gitignore
@@ -0,0 +1 @@
+local
diff --git a/meteor/example/.meteor/packages b/meteor/example/.meteor/packages
new file mode 100644
index 00000000..6b6e741e
--- /dev/null
+++ b/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
diff --git a/meteor/example/.meteor/release b/meteor/example/.meteor/release
new file mode 100644
index 00000000..f1b62559
--- /dev/null
+++ b/meteor/example/.meteor/release
@@ -0,0 +1 @@
+METEOR@1.0.1
diff --git a/meteor/example/client/bmd.css b/meteor/example/client/bmd.css
new file mode 100644
index 00000000..c79f2707
--- /dev/null
+++ b/meteor/example/client/bmd.css
@@ -0,0 +1,3 @@
+body {
+ background: #8BC34A;
+}
diff --git a/meteor/example/client/bmd.html b/meteor/example/client/bmd.html
new file mode 100644
index 00000000..eace9872
--- /dev/null
+++ b/meteor/example/client/bmd.html
@@ -0,0 +1,14 @@
+
+
Watch the ripple effect on newly created buttons!
+
+ {{> hello}}
+
+
+
+
+
+ {{#each buttons}}
+
+
+ {{/each}}
+
diff --git a/meteor/example/client/bmd.js b/meteor/example/client/bmd.js
new file mode 100644
index 00000000..5914f5b3
--- /dev/null
+++ b/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!'])});
+ }
+});
diff --git a/meteor/example/packages/bootstrap-material-design b/meteor/example/packages/bootstrap-material-design
new file mode 120000
index 00000000..1b20c9fb
--- /dev/null
+++ b/meteor/example/packages/bootstrap-material-design
@@ -0,0 +1 @@
+../../../
\ No newline at end of file
diff --git a/meteor/example/run.bat b/meteor/example/run.bat
new file mode 100755
index 00000000..c13b17ee
--- /dev/null
+++ b/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
diff --git a/meteor/example/run.sh b/meteor/example/run.sh
new file mode 100755
index 00000000..3cfe6c87
--- /dev/null
+++ b/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
diff --git a/meteor/init.js b/meteor/init.js
new file mode 100644
index 00000000..2fee761d
--- /dev/null
+++ b/meteor/init.js
@@ -0,0 +1,3 @@
+Meteor.startup(function () {
+ $.material.init();
+});
diff --git a/meteor/package-noglyph.js b/meteor/package-noglyph.js
new file mode 100644
index 00000000..dbf76347
--- /dev/null
+++ b/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)
+});
diff --git a/meteor/package-noicons.js b/meteor/package-noicons.js
new file mode 100644
index 00000000..fa25f126
--- /dev/null
+++ b/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);
+});
diff --git a/meteor/package.js b/meteor/package.js
index 633c9fbb..84aec64e 100644
--- a/meteor/package.js
+++ b/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);
});
diff --git a/meteor/test-noicons.js b/meteor/test-noicons.js
new file mode 100644
index 00000000..476b0e11
--- /dev/null
+++ b/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(/
/);
+ 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(/