clinical:auto-resizing

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 Breakpoints

1<template name="lightbox">
2  <div id="lightbox" style="getLocation">
3  </div>
4</template>

Template.lightbox.helpers({
  getLocation: function(){
    if(Session.get("appWidth") > 600){
      return "margin-left: " + ($("#lightbox").width() - 600) * 0.5 + "px;";
    }else{
      return "width: 100%;";
    }
  }
});

======================================

Licensing

MIT. Use as you will. Disrupt the current system. It needs all the help it can get.