Material with Meteor Apps

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

3 Likes

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?

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.

1 Like

You just spoke my mind man.

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.

2 Likes

Thanks, Mark! Pull request merged.