offset for Waypoint.inview

[rnicholls]

Is there any way to set an offset for the Waypoint.inview ?

[towfiqi]

+1

[imakewebthings]

@rnicholls Currently, no. If you had to choose, how would you like to set the offset, which possible values for the offset would be acceptable, and how would it effect each of the callbacks' trigger points?

[imakewebthings]

@towfiqi Maybe you have a suggestion or preference?

[rnicholls]

Basically I was hoping for the same funcitonality as the offset in the core version of waypoint. ie "Enter" trigger would fire 15px after in view.

[pmacom]

The sites I'm working on have sticky navs. So, I modified the offset in 'vertical' like this and it seems to work nice.

{
  down: 'exit',
  up: 'entered',
  offset: this.options.offset || 0;
}

Usage:

new Waypoint.Inview({
  element: element,
  entered: this.toggleClass.bind( element, "enter" ),
  exit: this.toggleClass.bind( element, "exit" ),
  offset: $(".header").height()
});

Has there been any progress on a pr for this feature? I can submit one if this sounds like a decent solution.

[imakewebthings]

@pmacom This effects only the top-of-viewport waypoint, yes? What effect would you imagine your example usage has on the bottom-of-viewport waypoint?

[pmacom]

I just needed a quick fix. I'm guessing that 'bottom-in-view' would need to be replaced with something more dynamic. Maybe we can call Waypoint.offsetAliases['bottom-in-view'] directly and just subtract the offset from there. I'll test it out a bit later today. How would we distinguish between the top and bottom offsets when passing them into Inview? offset: { type: 'vertical', position: 'top' } and 'bottom'?

[imakewebthings]

@pmacom Sounds like you're on the right track. I think ideally the interface for specifying offset for Inview would look like this:

{
  offset: {
    top: 15,
    bottom: 25
  }
}

// Look for left/right if horizontal
{
  horizontal: true,
  offset: {
    left: 15,
    right: 15
  }
}

// Or, to use the same for both sides
{
  offset: 15
}

I also think you're correct in your assumption that these bottom/right offsets should be taken from the basis of "bottom-in-view" and "right-in-view". One more question: Do you think a bottom offset should be calculated in the opposite direction as a normal offset? That is, given an offset of 15, would the waypoints trigger when 15 pixels above the bottom of the viewport (backwards from a normal offset) or 15 pixels below?

[pmacom]

I should have some time between today and tomorrow to test this out and see which works better. Maybe we'll want a setting to determine when to fire the inview class? Pullquotes and blockquotes are generally very tall have ample padding above and below. If the animation is set to play when the bottom of this element is in view, it might already be halfway up the page. Perhaps 'top-in-view', 'bottom-in-view' and 'middle-in-view'(?).

[marksticklingminttwist]

Would it be ok to put a 'no offset support' message on this page http://imakewebthings.com/waypoints/shortcuts/inview/? I found the answer on stack overflow and in this github issue, eventually.

[pmacom]

This seems to work. I've been way too busy to be able to do a proper PR and write a unit test. And it's only for vertical, not horizontal. If anyone has the time to pick up where I left off, please do. I'll give it another shot once things slow down.

/* Private */
Inview.prototype.createWaypoints = function() {
    var configs = {
      vertical: [{
        down: 'enter',
        up: 'exited',
        offset: function() {
          var _offset = this.options.offset && this.options.offset.bottom || 0;
          return this.options.context.innerHeight - _offset;
        }.bind( this )
      }, {
        down: 'entered',
        up: 'exit',
        offset: function() {
          var _offset = this.options.offset && this.options.offset.bottom || 0;
          return this.options.context.innerHeight - this.element.outerHeight() - _offset;
        }.bind( this )
      }, {
        down: 'exit',
        up: 'entered',
        offset: function() {
          var _offset = this.options.offset && this.options.offset.top || 0;
          return _offset;
        }.bind( this )
      }, {
        down: 'exited',
        up: 'enter',
        offset: function() {
          var _offset = this.options.offset && this.options.offset.top || 0;
          return _offset - this.element.outerHeight();
        }.bind( this )
      }],
      horizontal: [{
        right: 'enter',
        left: 'exited',
        offset: '100%'
      }, {
        right: 'entered',
        left: 'exit',
        offset: 'right-in-view'
      }, {
        right: 'exit',
        left: 'entered',
        offset: 0
      }, {
        right: 'exited',
        left: 'enter',
        offset: function() {
          return -this.adapter.outerWidth()
        }
      }]
    }

Usage:

new Waypoint.Inview({
  element: element,
  enter: someEventHandler(),
  entered: someEventHandler(),
  exit: someEventHandler(),
  exited: someEventHandler(),
  offset: {
    top: 300, // 300px
    bottom: 200 // 200px
  }
});

[jmarceli]

In my case there was a problem with this.element.outerHeight so I modified your code (with a little help from http://youmightnotneedjquery.com/#outer_height_with_margin):

// Just add this code after Waypoints import/inclusion
Waypoint.Inview.prototype.createWaypoints = function() {
  // same as jQuery.outerHeight() function, works for IE9+
  function outerHeight(el) {
    var height = el.offsetHeight;
    var style = getComputedStyle(el);

    height += parseInt(style.marginTop) + parseInt(style.marginBottom);
    return height;
  }

  var configs = {
    vertical: [{
      down: 'enter',
      up: 'exited',
      offset: function() {
        var _offset = this.options.offset && this.options.offset.bottom || 0;
        return this.options.context.innerHeight - _offset;
      }.bind( this )
    }, {
      down: 'entered',
      up: 'exit',
      offset: function() {
        var _offset = this.options.offset && this.options.offset.bottom || 0;
        return this.options.context.innerHeight - outerHeight(this.element) - _offset;
      }.bind( this )
    }, {
      down: 'exit',
      up: 'entered',
      offset: function() {
        var _offset = this.options.offset && this.options.offset.top || 0;
        return _offset;
      }.bind( this )
    }, {
      down: 'exited',
      up: 'enter',
      offset: function() {
        var _offset = this.options.offset && this.options.offset.top || 0;
        return _offset - outerHeight(this.element);
      }.bind( this )
    }],
    horizontal: [{
      right: 'enter',
      left: 'exited',
      offset: '100%'
    }, {
      right: 'entered',
      left: 'exit',
      offset: 'right-in-view'
    }, {
      right: 'exit',
      left: 'entered',
      offset: 0
    }, {
      right: 'exited',
      left: 'enter',
      offset: function() {
        return -this.adapter.outerWidth()
      }
    }]
  };

  for (var i = 0, end = configs[this.axis].length; i < end; i++) {
    var config = configs[this.axis][i]
    this.createWaypoint(config)
  }
};

My issue might be caused by the fact that I use noframework version of waypoints.