jmpressjs / jmpress.js

A jQuery plugin to build a website on the infinite canvas
http://jmpressjs.github.com/jmpress.js
1.5k stars 237 forks source link

Issue with template applied CSS transforms not being applied #127

Closed parliament718 closed 10 years ago

parliament718 commented 10 years ago

I'm having an issue with jmpress.js templates. I have a test template like so:

 $.jmpress('template', 'researchViewPosition', {
            x: -300   
 });

Althought the offset is applied and I see in the DOM:

translate(-50%, -50%) translate3d(-300px, 0px, 0px)

The translate3d actually has no effect, with the content still centered. Changing -300px to 0 in the DOM however does have the effect of reversing the offset fit in the opposite direction than I wanted.

I load the content dynamically but reapplying the template doesn't seem to do anything either.

 $("#jmpress").jmpress("canvas").append(newResearchView);
 $("#jmpress").jmpress('init', newResearchView);
 $.jmpress('apply', '.researchView', 'researchViewPosition');

As a side question, is there no callback for applying a template on a single property like there is for children?

 $.jmpress('template', 'researchViewPosition', {
            x: function(idx, el) { return -300; }  //Not applied   
 });
parliament718 commented 10 years ago

Ok actually this was a misunderstanding of how jmpress works. The translations dictate where an element is in space BEFORE it becomes active. Then when it becomes active the camera automatically centers the view on that element. It makes sense then that when the element is active, like I was viewing it, then the translations are overriden by transform(-50%, -%50)