From 8b21b98994f849a446641b6b0ba503b110a4db8d Mon Sep 17 00:00:00 2001 From: Dan Dascalescu Date: Mon, 15 Dec 2014 18:09:20 -0800 Subject: [PATCH 1/2] Package versions without (Bootstrap) icons --- .travis.yml | 2 +- Gruntfile.js | 7 ++++- meteor/README.md | 26 ++++++++++++---- meteor/package-noglyph.js | 38 +++++++++++++++++++++++ meteor/package-noicons.js | 33 ++++++++++++++++++++ meteor/test-noicons.js | 63 +++++++++++++++++++++++++++++++++++++++ 6 files changed, 162 insertions(+), 7 deletions(-) create mode 100644 meteor/package-noglyph.js create mode 100644 meteor/package-noicons.js create mode 100644 meteor/test-noicons.js 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(/ Date: Tue, 16 Dec 2014 03:11:05 -0800 Subject: [PATCH 2/2] Add automatic $.material.init() + example --- meteor/README.md | 3 ++- meteor/example/.meteor/.gitignore | 1 + meteor/example/.meteor/packages | 7 +++++++ meteor/example/.meteor/release | 1 + meteor/example/client/bmd.css | 3 +++ meteor/example/client/bmd.html | 14 ++++++++++++++ meteor/example/client/bmd.js | 15 +++++++++++++++ meteor/example/packages/bootstrap-material-design | 1 + meteor/example/run.bat | 5 +++++ meteor/example/run.sh | 15 +++++++++++++++ meteor/init.js | 3 +++ meteor/package-noglyph.js | 3 ++- meteor/package-noicons.js | 3 ++- meteor/package.js | 3 ++- 14 files changed, 73 insertions(+), 4 deletions(-) create mode 100644 meteor/example/.meteor/.gitignore create mode 100644 meteor/example/.meteor/packages create mode 100644 meteor/example/.meteor/release create mode 100644 meteor/example/client/bmd.css create mode 100644 meteor/example/client/bmd.html create mode 100644 meteor/example/client/bmd.js create mode 120000 meteor/example/packages/bootstrap-material-design create mode 100755 meteor/example/run.bat create mode 100755 meteor/example/run.sh create mode 100644 meteor/init.js diff --git a/meteor/README.md b/meteor/README.md index 1567f2a5..27ca1e4f 100644 --- a/meteor/README.md +++ b/meteor/README.md @@ -47,9 +47,10 @@ If you encounter an issue while using this package, please CC @dandv when you fi # DONE +* 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 , inclding for the ripple effect +* Visual check, including for the ripple effect # TODO 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}} + + + 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 index 2f0ebcde..dbf76347 100644 --- a/meteor/package-noglyph.js +++ b/meteor/package-noglyph.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/package-noicons.js b/meteor/package-noicons.js index 62956470..fa25f126 100644 --- a/meteor/package-noicons.js +++ b/meteor/package-noicons.js @@ -21,7 +21,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/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); });