From 8a800fb5df5d4a966105ee13cdd48373ff12047c Mon Sep 17 00:00:00 2001 From: FezVrasta Date: Tue, 17 Mar 2015 16:36:14 +0100 Subject: [PATCH] fixed meteor and probably travis --- .versions | 27 +++++ bower.json | 2 +- meteor/README.md | 69 ++++++++++++ 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 +++ .../packages/bootstrap-material-design | 1 + meteor/example/run.bat | 5 + meteor/example/run.sh | 15 +++ meteor/init.js | 3 + meteor/package-fullpalette.js | 39 +++++++ meteor/package-noglyph.js | 39 +++++++ meteor/package-noicons.js | 34 ++++++ meteor/package.js | 2 +- meteor/test-noicons.js | 63 +++++++++++ meteor/test.js | 103 ++++++++++++++++++ package.js | 10 +- package.json | 2 +- 21 files changed, 447 insertions(+), 8 deletions(-) create mode 100644 .versions create mode 100644 meteor/README.md 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 create mode 100644 meteor/package-fullpalette.js create mode 100644 meteor/package-noglyph.js create mode 100644 meteor/package-noicons.js create mode 100644 meteor/test-noicons.js create mode 100644 meteor/test.js diff --git a/.versions b/.versions new file mode 100644 index 00000000..0b1df6fe --- /dev/null +++ b/.versions @@ -0,0 +1,27 @@ +application-configuration@1.0.4 +base64@1.0.2 +binary-heap@1.0.2 +callback-hook@1.0.2 +check@1.0.4 +ddp@1.0.14 +ejson@1.0.5 +fezvrasta:bootstrap-material-design@0.3.0-dev +follower-livedata@1.0.3 +geojson-utils@1.0.2 +http@1.0.10 +id-map@1.0.2 +jquery@1.11.3 +json@1.0.2 +local-test:fezvrasta:bootstrap-material-design@0.3.0-dev +logging@1.0.6 +meteor@1.1.4 +minimongo@1.0.6 +mongo@1.0.11 +ordered-dict@1.0.2 +random@1.0.2 +retry@1.0.2 +tinytest@1.0.4 +tracker@1.0.5 +twbs:bootstrap@3.3.1 +underscore@1.0.2 +url@1.0.3 diff --git a/bower.json b/bower.json index 573a394f..6803f35d 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "bootstrap-material-design", - "version": "0.2.0", + "version": "0.3.0-dev", "homepage": "http://fezvrasta.github.io/bootstrap-material-design", "authors": [ "Federico Zivolo " diff --git a/meteor/README.md b/meteor/README.md new file mode 100644 index 00000000..27ca1e4f --- /dev/null +++ b/meteor/README.md @@ -0,0 +1,69 @@ +[![Build Status](https://travis-ci.org/MeteorPackaging/hammer.js.svg?branch=master)](https://travis-ci.org/MeteorPackaging/hammer.js) + +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 fezvrasta:bootstrap-material-design +``` + +and your Bootstrap CSS will look like Google's Material Design (Polymer Paper Elements). + + +# Dependencies + +* [twbs:bootstrap](https://atmospherejs.com/twbs/bootstrap) (the official community integration package for Bootstrap 3) +* jquery + + +# Meteor + +If you're new to Meteor, here's what the excitement is all about - +[watch the first two minutes](https://www.youtube.com/watch?v=fsi0aJ9yr2o); you'll be hooked by 1:28. + +That screencast is from 2012. In the meantime, Meteor has become a mature JavaScript-everywhere web +development framework. Read more at [Why Meteor](http://www.meteorpedia.com/read/Why_Meteor). + + +# Issues + +If you encounter an issue while using this package, please CC @dandv when you file it in this repo. + + +# 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, including for the ripple effect + + +# TODO + +* 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 + +* [Yuri Dybskiy / html5cat](https://github.com/html5cat) for the first wrapper of this package +* [Dan Dascalescu / dandv](https://github.com/dandv) for this direct integration 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-fullpalette.js b/meteor/package-fullpalette.js new file mode 100644 index 00000000..dd3d98ce --- /dev/null +++ b/meteor/package-fullpalette.js @@ -0,0 +1,39 @@ +// package metadata file for Meteor.js +'use strict'; + +var packageName = 'fezvrasta:bootstrap-material-design-fullpalette'; // https://atmospherejs.com/fezvrasta/bootstrap-material-design-fullpalette +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 (Paper) Design', + 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@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-fullpalette.css', + '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); +}); diff --git a/meteor/package-noglyph.js b/meteor/package-noglyph.js new file mode 100644 index 00000000..b22bd47d --- /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.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..5c5c27d3 --- /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.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 1599e379..e943ba05 100644 --- a/meteor/package.js +++ b/meteor/package.js @@ -23,7 +23,7 @@ Package.onUse(function (api) { '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.css', // includes only the primary color variations + 'dist/css/material.css', 'dist/css/ripples.css', 'dist/js/material.js', 'dist/js/ripples.js', 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(//. +// Only 'woff' for now, but 'woff2' may become available - https://github.com/FortAwesome/Font-Awesome/pull/5062#discussion_r20936453 +['eot', 'svg', 'ttf', 'woff'].forEach(function (font) { + Tinytest.addAsync(font + ' fonts are shipped', function (test, done) { + + // curiously enough, the 'local-test:...' package isn't loaded into Package before calling Tinytest, so we can't do this determination outside this loop + if (!packageName) + Object.keys(Package).forEach(function(p) { + if (p.search(/local-test/) > -1) + packageName = p.replace('local-test:', ''); // we should stop the loop, but forEach can't do that + }) + + if (!packageName) { + test.exception({message: 'Package not quite loaded... go figure'}); + return + } + + var packagePath = packageName.replace(':', '_') // e.g. meteorpackaging_bootstrap-material-design + + HTTP.get( + '/packages/' + packagePath + '/dist/fonts/Material-Design-Icons.' + font, + { + headers: { + 'Cache-Control': 'no-cache' // because Meteor has cached fonts even after they were removed from package.js (!) - https://github.com/meteor/meteor/issues/3196 + } + }, + function callback(error, result) { + if (error) { + test.fail({message: 'Font failed to load'}); + } else { + // if the file is 404, Meteor will redirect to / and return the Meteor.js boilerplate + test.isTrue(result.content.length > 100000, font + ' font could not be downloaded'); + } + + done(); + } + ); + }); +}) + +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(/