Skip to content

Instantly share code, notes, and snippets.

@rdonnelly

rdonnelly/shadows.js

Created January 2, 2017 23:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rdonnelly/72a237443113f35b5a435f7ccb85a224 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rdonnelly/72a237443113f35b5a435f7ccb85a224 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rdonnelly created this gist Jan 2, 2017.
    60 changes: 60 additions & 0 deletions shadows.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    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));
    });