https://github.com/clinical-meteor/active-layout

Layout templates with keybindings and animations.
https://github.com/clinical-meteor/active-layout

Last synced: about 2 months ago
JSON representation

Layout templates with keybindings and animations.

• Host: GitHub
• URL: https://github.com/clinical-meteor/active-layout
• Owner: clinical-meteor
• Created: 2015-11-30T08:05:47.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-05-06T14:36:11.000Z (over 7 years ago)
• Last Synced: 2024-10-29T21:06:23.154Z (3 months ago)
• Language: JavaScript
• Size: 2.5 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.Overlay.md

Awesome Lists containing this project

README

        
Meteorite package to add image and tutorial overlays, using reactive spark templates.

So, after trying probably five or six libraries for creating overlays, I said to heck with it, I'm just going to write a native overlay template for Meteor.  Dead simple, super easy to use, and works like charm.  Enjoy!

------------------------

### Installation

First, install the reactive-overlays package from the command line, like so:

````

meteor add clinical:overlays

````

------------------------

### Document Model

Second, add the reactiveOverlaysTemplate to your application, which adds the nececssary overlay templates.  In theory, you should be able to add the template just about anywhere in the application, but the recommend location is at the footer of your application container.  So, something like so:  

````

    


        ... my application code ...

    

    {{> reactiveOverlaysTemplate }}


````

------------------------

### Controllers

The beauty of using a native spark template for creating an overlay, instead of a third party library, is the only thing you need to do is set the following Session variable, and Bam! You got an overlay!

````js

    Session.set('showReactiveOverlay', true);

````

However, people usually want more than just an overlay mask.  They want to display images and templates **on top** of that overlay mask.  Fair enough.  We expose three simple functions to manage the overlay:

````js

showImageOverlay(elementId)

showTutorialOverlay(elementId)

hideOverlay()

````

So, for instance, if you want to use a thumbnail as a trigger, and display a nice big photograph, you would want to use something like the following:

````js

Template.samplePageTemplate.events({

    'click .thumbnail-image-a': function(){

        showImageOverlay('#fullsizeImageA');

    }

});

````

**Note:  the following is untested.**

The reactive overlays should also work with a block of HTML code for creating tutorial pages.  You should be able to do something like this:

````js

Template.samplePageTemplate.events({

    'click .tutorial-icon': function(){

        showImageOverlay('#currentPageTutorial');

    }

});

````

------------------------

### License

MIT License. Use as you wish, including for commercial purposes.