d0minikk / materialize-meteor Goto Github PK

There's now an official package for materialize: see materialize:materialize.

Since the authors of Materialize accepted the Meteor Integration PR and correctly registered the package on autopublish.meteor.com we'll have same day updates at every new release of Materialize CSS.

Please kindly unmigrate this package on atmosphere running the following from your terminal:

meteor admin set-unmigrated d0minikk:materialize-meteor

Thank you,
Luca

Example:

Routing (iron:router) is set up correctly. When I do routing anywhere else than within nav tags it just works. When the link is it the nav it doesn't (sometimes on the 2nd attempt which doesn't make any sense). Also the navbar doesn't close itself despiste closeOnClick option and the overlay stay there(every time, so I set up a work around)

client/views/navbar/navbar.html

    <template name="navbar">
        <nav>
            <ul id="slide-out" class="side-nav">
                <li><a id='configuration' href="#">{{i18n 'navbar.l.configuration'}}</a></li>
            </ul>
            <a href="#" data-activates="slide-out" class="button-collapse" style="margin-left: 5vw;"><i class="mdi-navigation-menu"></i></a>
        </nav>
    </template>

client/views/navbar/navbar.js

 Template.navbar.events({
    "click a": function(evt){
        evt.preventDefault();

       switch(evt.currentTarget.id){
           case 'configuration':
               Router.go("configuration");
               break;
       }

       // workaround for navbar not closing properly on <a> clicks
       $('.button-collapse').sideNav('hide');
       if($('#sidenav-overlay').length>0){
           $('#sidenav-overlay').hide();
       }


   }
});

Template.navbar.onRendered(function(){
        // init navbar button
        $('.button-collapse').sideNav({
                menuWidth: 250,
                edge: 'left', // Choose the horizontal origin
                closeOnClick: true // Closes side-nav on <a> clicks
            }
        );
    });

shared/libs/routing.js

Router.configure({
        layoutTemplate: 'common',
        loadingTemplate: 'loading'
    });

    Router.route('/configuration', {
        name:'configuration',
        template:'configuration',
        onBeforeAction: function(){
            if (Session.get('cordovaReady')) { 
                this.layout(null);
                this.render("configuration");
            }
            else { // "loop" rending "loading" screen until cordova is not ready
                this.render('loading');
                this.next();
            }
        }
    });

I was suspecting it was about the onBeforeAction hook but I tried to remove it and I get the same issue. Strangely if I replace Router.go with Router.current().render('configuration'); , it works (but it has drawbacks on following interactions).
Similarly for navbar not closing workaround

Seems like the navbar while mobile mode, is not collapsing after click/touch. It was working before I upgraded the package today. Seems to be an issue with iron router layouts. Any ideas?

Materialize is up to alpha release 0.92 now. I was wondering how often you were looking to bump the version on this package?

I tried using the toast(message, displayLength) function e.g toast('I am a toast!', 4000) in a Meteor app as described in the docs but it just seems not to work.
Is there any initialization required that is missing in the docs? Like I just learnt that the waves effect requires some initialization function: Waves.displayEffect(); to run on $(document).ready()

@d0minikk
Thanks for maintaining this!

Got quite confused with the version of this package since it does differ from the version of the packaged content. Would it be possible to adopt the version of the official package as soon as there is a final release? thanks :)

The wave animation seems to permanently change the bg color by a certain shade!

• class="footer-copyright"
• li - list items are not formatting
• navbar links not working

Maybe 1.95.1 fixes this?

As in title, can you please update it latest version?

I am not sure if you have seen this but this can be set up as an autopublish package. See MeteorCommunity/discussions#14.

in template

ul class="collapsible">
{{#each pendingMembers}}
li
....
/li
{{/each}}
/ul

in Template.templateName.rendered , $('.collapsible').collapsible({ "accordion" : false });

Collapsible doesn't work in this case.
I had to use setTimeout like below to wait some time until dynamic markup is completed.

Template.admin.rendered = function() {
Meteor.setTimeout(function(){
$('.collapsible').collapsible();
},1000)
}

Any Intelligent solution for this?
ABOVE solution doesn't work when pendingMembers are changed from real-time update by other user.

I tried both menu (which on official Material Design web site, to Materializecss refer to, is present) and toc

 <i class="material-icons">menu</i>
 <i class="material-icons">toc</i>

as explained at: http://materializecss.com/icons.html

I understand that it may be need to add

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

but where? (since I'm not using Materializecss directory but as a Meteor module. Also I'm using iron:router which doesn't let me put tag anywhere)

This renders instead

<i class="mdi-navigation-menu"></i>

from the example at: http://materializecss.com/side-nav.html

However this is documented nowhere (as far as I know).

I think there needs to be a meteor specific adaptation to the framework. Because there are no page loads, we need to programmatically close the sidebar on click. I think this should be included by default in this package. Can you include this feature?

http://materializecss.com/side-nav.html
jQuery Plugin Methods
We have methods to show and hide your sidebar you can use to programmatically control your sidebar.

// Show sideNav
$('.button-collapse').sideNav('show');
// Hide sideNav
$('.button-collapse').sideNav('hide');

Hi, I tried to use your materialize package but the javascript doesn't initialize so the none of the functions work, for instance the labels on textboxes wont slide up. I have the following packages installed:
accounts-base 1.1.2 A user account system
accounts-facebook 1.0.2 Login service for Facebook accounts
accounts-google 1.0.2 Login service for Google accounts
accounts-password 1.0.4 Password support for accounts
chrismbeckett:fontawesome4 4.2.2 Scalable vector icons that can be c...
dsyko:jquery-ui-touch-punch 1.2.4 jquery-ui-touch-punch project, Enab...
email 1.0.4 Send email messages
http 1.0.8 Make HTTP calls to remote servers
iron:router 1.0.0* Routing specifically designed for M...
jquery 1.0.1 Manipulate the DOM using CSS selectors
linto:jquery-ui 1.11.2 jquery-ui 1.11.2 re-packaged for m...
meteor-platform 1.2.0 Include a standard set of Meteor pa...
mizzao:bootstrap-3 3.3.0* HTML, CSS, and JS framework for dev...
natestrauser:x-editable-bootstrap 1.5.2_1 Latest version of X-Editable for ...
rzymek:fullcalendar 2.2.0_2 Full-sized drag & drop event cale...
service-configuration 1.0.2 Manage the configuration for third-...

Any idea what is causing this?