https://github.com/clinical-meteor/auto-resizing

Hooks for resizing UI elements.
https://github.com/clinical-meteor/auto-resizing

Last synced: about 2 months ago
JSON representation

Hooks for resizing UI elements.

• Host: GitHub
• URL: https://github.com/clinical-meteor/auto-resizing
• Owner: clinical-meteor
• Created: 2014-11-28T07:16:49.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2019-05-30T04:20:11.000Z (over 5 years ago)
• Last Synced: 2024-10-29T16:26:56.964Z (3 months ago)
• Language: JavaScript
• Size: 5.86 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## clinical-auto-resizing

Adds resizing hooks to your application to trigger UI element resizes.  

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

#### Installation

````

meteor add clinical:auto-resizing

````

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

#### API  

````js

Session.get('resize');

Session.get('appHeight');

Session.get('appWidth');

````

````html

{{#if isPortrait}}{{/if}}

{{#if isLandscape}}{{/if}}

````

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

#### Auto Refresh Templates on Browser Resize

Simply put ``
{{resize}}
`` in any template, and your template will get rerendered when the browser window is resized.


````html

  
{{resize}}

  


    

  


````

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

#### Manually Refresh Templates  

Alternatively, you can trigger it by manually setting the resize session variable.

````js

Session.set('resize', new Date());

````

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

#### Custom Layout Logic  

You can also specify locations of div by using ``Session.get('appWidth')`` and ``Session.get('appHeight')``.

````js

Template.appLayout.layout = function(){

  Session.set('customDivHeight', $('#innerPanel').height() + 80);

  if(Session.get('appWidth') > 1636){

    Session.set('customDivLeft', (Session.get('appWidth') - 1536) * 0.5);

  }else if(Session.get('appWidth') > 768){

    Session.set('customDivLeft', (Session.get('appWidth') - 768) * 0.5);

  }else{

    Session.set('customDivLeft', 0);

  }

}

````

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

#### Detecting Portrait and Landscape  

````html

  


    {{#if isPortrait}}

      

    {{/if}}

    {{#if isLandscape}}

      

    {{/if}}

    

  


````

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

#### Dynamic Styling

````html

````

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

#### Licensing  

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