clinical:auto-resizing

v0.3.1Published 7 years ago

This package has not had recent updates. Please investigate it's current state before committing to using it in your project.

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.