clinical-auto-resizing
Adds resizing hooks to your application to trigger UI element resizes.
======================================
Installation
meteor add clinical:auto-resizing
======================================
API
1Session.get('resize'); 2Session.get('appHeight'); 3Session.get('appWidth');
1{{#if isPortrait}}{{/if}} 2{{#if isLandscape}}{{/if}}
======================================
Auto Refresh Templates on Browser Resize
Simply put <div class="hidden">{{resize}}</div>
in any template, and your template will get rerendered when the browser window is resized.
1<template name="examplePage"> 2 <div class="hidden">{{resize}}</div> 3 <div id="examplePage"> 4 <!-- stuff --> 5 </div> 6</template>
======================================
Manually Refresh Templates
Alternatively, you can trigger it by manually setting the resize session variable.
1Session.set('resize', new Date());
======================================
Custom Layout Logic
You can also specify locations of div by using Session.get('appWidth')
and Session.get('appHeight')
.
1Template.appLayout.layout = function(){ 2 Session.set('customDivHeight', $('#innerPanel').height() + 80); 3 if(Session.get('appWidth') > 1636){ 4 Session.set('customDivLeft', (Session.get('appWidth') - 1536) * 0.5); 5 }else if(Session.get('appWidth') > 768){ 6 Session.set('customDivLeft', (Session.get('appWidth') - 768) * 0.5); 7 }else{ 8 Session.set('customDivLeft', 0); 9 } 10}
======================================
Detecting Portrait and Landscape
1<template name="examplePage"> 2 <div id="examplePage"> 3 {{#if isPortrait}} 4 <!-- show an image of portrait --> 5 {{/if}} 6 {{#if isLandscape}} 7 <!-- show an image of landscape --> 8 {{/if}} 9 <!-- show stuff on both --> 10 </div> 11</template>
======================================
Dynamic Styling
======================================
Licensing
MIT. Use as you will. Disrupt the current system. It needs all the help it can get.