httpete-ire / revealer

Angular directive that allows two images to be layered and compared

#Revealer

Angular directive that allows two images to be layered on top of each other and compared using a slider, demo or scroll demo.

#Documentation

Include revelaer module source file in html

 <script src="path/to/revealer.js"></script>

Mark the revealer module as a dependecy of your angular app

angular.module('myApp', ['revealer']);

Then declare the revealer directive in your html.

<revealer top-image="top.png" top-label="Top Image" bottom-image="bottom.png" bottom-label="Bottom Label"></revealer>

Options

• top-image
• bottom-image
• top-label
• bottom-label
• start-position
• on-complete
• page-scroll
• page-offset

####top-image Path of image to appear on the top layer. This is the image that is revealed

top-image="top.png"

####bottom-image Path of image to appear on the bottom layer

bottom-image="bottom.png"

####top-label (optional) Label to appear on the top image

top-label="Top Image"

####bottom-label (optional) Label to appear on the bottom image

bottom-label="Bottom Label"

####start-position (optional) set the start position of the revealer in percentage (default : 50)

start-position="60"

####on-complete (optional) if set on the scope, this function will be invoked when the drag action has complete

on-complete="vm.onComplete('called from the controller')"

####scroll (optional)

Set postion of the revealer on scroll, the revealer will only happen when the element is in the windows viewport.

note when set the start-postion will be 0

scroll="true"

####scroll-offset (optional)

change the trigger location of the scroll functionality

scroll-offset="500"

Change log

1.0.0

• throttle function #8
• page-scroll functionality #10
• updated documentation

breaking changes

• removed topimage, bottomimage, toplabel, bottomlabel

0.1.4

• support UMD #7

0.1.3

• updated revealer tests
• onComplete function fature added #9
• updated documentation

0.1.2

• fix release listener issue #11

0.1.1

• fix offset issue #6
• updated gulp task to output to a single destination

0.0.1

• intital release

License

MIT

revealer's Issues

offset when window resized

when the window is resized the offset of the top image is not correct, the drag "handle" follows the mouse but the image overlay is way off.

set reveal position on window scroll

similar to https://mixpanel.com/engagement/ set the position of the reveal when the user scrolls

release listeners are not being removed

the release listeners are not be removed when the release event triggers, the release listener is also getting duplicated every time the handler is clicked.

$document.on(eventConfig.release, removeListeners.bind(null, eventConfig));

I think the reason for this is that the .bind method returns a new function which does not match the listener function.

method for when drag is complete

set a method on the scope that will execute when the drag action has finished

highlighting of images

tested on on safari 9 on 10.11, but when dragging the slider the images select. you should add a no select css property to every element under your slider.

support UMD

support UMD based on this article

touch events

at the moment the revealer will work responsively but 'touch' events are not handled so it is useless on a touch device

throttle move event

Mouse offset on drag

When you drag the 'slider', it doesn't keep the mouse offset from where it was pressed. The cursor jumps to the middle of the 'slider'. I don't know if I would call it a bug, maybe an oversight or could even be intended behavior I guess.