Css per page (impress.js and meteor 1.4 blaze)


#1

Hi,

I try to implement impress.js (Very cool prezi like). But I have css conflicts and other stuff

  1. Can I load CSS per page? and as such that when the template is destroyed, I go to another page and import fresh css for that page only? How can it be that the page is fine first, then I switch routes, come back and you get the picture above…* Meteor puts all css in 1 file, or does it do something different with import statements?
  2. Something “strange is happening”. If I go to the impress page directly, it works fine.

But if I go to another route, at first I could not click on anything because impress.js added a class to my body element.

<body class="impress-supported impress-enabled impress-on-one-more-thing" style="height: 100%; overflow: hidden;">

Removing this class made my page clickable again. But when I go back, impress does not recognize it is loaded or something… It triggers the “unsupported browser error”.

If I just refresh the page everything works fine. so It has something to do with the css or js…

import { Template } from 'meteor/templating';
import { Session } from 'meteor/session';
import { senseConfig as config } from '/imports/api/config';
import '/imports/ui/UIHelpers';

import 'impress';
import './impress.html';
import './impress.css';

var api ={};

Template.impress.onRendered(function() {
    console.log('impress onRendered');
    // $('body').addClass('impress-supported impress-enabled impress-on-questions');
    // location.reload();
     api = impress();
    console.log('impress API: ', api);
    api.init();
})

Template.impress.onDestroyed(function() {
    console.log('impress onDestroyed');
    $('body').removeClass('impress-supported impress-enabled impress-on-questions');
    api = null;
})

thank you!


#2

I suspect a timining issue

  • IfI add the class to the body,
  • and the next line of JS tries to read the class but it is not yet there. Can we wait for that? (setTimeOut, 0)?

So I tried to add the class in the onCreated.

  • I don;t get the unsupported browser error. (impress js checks this when it inits)
  • But the page does not do much, positioning is wrong etc.
Template.impress.onCreated(function() {
    $('body').addClass('impress-supported impress-enabled impress-on-questions');
})


#3

ok,

The issue that things are not clickable can be solved by disabling some css

 .impress-enabled          { pointer-events: none }
.impress-enabled #impress { pointer-events: auto }

But how can it be that the page is fine first, then I switch routes, come back and you get the picture above…

  • Meteor puts all css in 1 file, or does it do something different with import statements?

#4

If I just force a reload on page created, I have a workaround…

Template.impress.onCreated(function() {
        location.reload();

but does not look nice off course…