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..1567f2a5 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,19 @@ 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 +* Material Design Icons font loading test: EOT, SVG, TTF, WOFF +* Bootstrap plugin loading tests +* Visual check , inclding 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/package-noglyph.js b/meteor/package-noglyph.js new file mode 100644 index 00000000..2f0ebcde --- /dev/null +++ b/meteor/package-noglyph.js @@ -0,0 +1,38 @@ +// 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' + ], 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..62956470 --- /dev/null +++ b/meteor/package-noicons.js @@ -0,0 +1,33 @@ +// 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' + ], 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/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(/