Created
January 2, 2017 23:02
-
-
Save rdonnelly/72a237443113f35b5a435f7ccb85a224 to your computer and use it in GitHub Desktop.
Toggle shadow class on given image container
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var | |
| $ = require('jquery'), | |
| _ = require('lodash'), | |
| // for a given image container, toggle shadow class on left or right | |
| // to indicate to the user that there is more the scroll to | |
| toggleShadows = _.throttle(function() { | |
| var | |
| $this = $(this), | |
| scrollPosition = $this.scrollLeft(), | |
| min = 0, | |
| max = this.scrollWidth - $this.width(); | |
| // toggle the shadow class based on scroll position | |
| // the plus/minus one are for a little tolerance | |
| $this.siblings('.content-viewer-component-content-shadow') | |
| .toggleClass('shadow-left', scrollPosition > min + 1) | |
| .toggleClass('shadow-right', scrollPosition < max - 1); | |
| }, 100), | |
| $(function() { | |
| $('.content-viewer-component-content-container') | |
| // watch for scrolling on the content container | |
| .on('scroll', toggleShadows) | |
| // check initial comic scroll position after image loads | |
| .each(function() { | |
| var | |
| that = this, | |
| $image = $(this).find('img'), | |
| image = $image[0]; | |
| // toggle shadows if image is already loaded | |
| if (image && | |
| image.complete && | |
| typeof image.naturalWidth !== 'undefined' && | |
| image.naturalWidth !== 0) { | |
| toggleShadows.call(this); | |
| } | |
| // toggle shadows after image loads | |
| if (image && | |
| (!image.complete || | |
| typeof image.naturalWidth !== 'undefined' || | |
| image.naturalWidth !== 0)) { | |
| $image.one('load', function() { | |
| toggleShadows.call(that); | |
| }); | |
| } | |
| }); | |
| // watch the window for a resize to toggle shadow class | |
| $(window).on('resize', _.throttle(function() { | |
| $('.content-viewer-component-content-container') | |
| .each(toggleShadows); | |
| }, 1000)); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment