Material with Meteor Apps


#1

In my opinion, this is one of the best material design implementations fourth only to Polymer, Material-UI and Angular material. The simplicity and straight-forwardness required to add to a project would however raise it one or two places higher. Good work guys.

Unfortunately, I have been trying to integrate it to a Meteor app but I’m having trouble with the JavaScript effects that realize the full material experience and interaction.

I have set up a project on Github >> https://github.com/athmangude/daemon-labs-material attempting to have it look and behave like on the demo page >>http://daemonite.github.io/material/. I will highly appreciate if you had a look and helped me sort it out.

It would also be awesome to have your project as a Meteor package


Material: HTML5 UI design based on Google Material
#2

I had a look at the Github page you set up. You are referencing /js/base.min.js in HTML pages, however I can only find base.js (not the minified version). Will that be the issue?


#3

I managed to get it working. Referencing the files wasn’t the issue since Meteor picks stylesheet and JavaScript files automatically. Even though I still get the error message on the console, I removed base.js and added the individual files in src folder to client/lib/material on my app and everything worked fine.


#4

You just spoke my mind man.


#5

I managed to get most of the javascript errors and functions working in Meteor.
As meteor wraps all JavaScript files in a function, so from:

function bla(){
}

it becomes:

   (function bla(){
    })()

One has to go through all the functions and make them into variables, so for example get-target.js goes from:

// get target from trigger
	function getTargetFromTrigger(trigger) {
		var href;
		var target = trigger.attr('data-target')
		    || (href = trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '');

		return target;
	}

to:

// get target from trigger
	getTargetFromTrigger = function(trigger) {
		var href;
		var target = trigger.attr('data-target')
		    || (href = trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '');

		return target;
	}

Notice the global variable getTargetFromTrigger now?

Doing that makes the javascript work with how meteor wraps functions. I am not sure if it still works OUTSIDE of meteor, but I shall test it and give a pull request.


#6

Thanks, Mark! Pull request merged.