jscroll icon indicating copy to clipboard operation
jscroll copied to clipboard

added getNextHref, getInsertionPoint, dataFilter

Open sfinktah opened this issue 8 years ago • 1 comments

Hi, I needed to do deep insertion, that is to say: I had a nested DOM heirachy and jScroll wasn't up to it.

So I added 3 new options (delegate functions) that allowed me to accomplish what I needed, and thought I would offer them.

They are:

  1. options.getNextHref() - optionally replaces internal $next.find(nextSelector) code
  2. options.getInsertPoint() - optional filter for existing $inner.find(...) code
  3. options.dataFilter(html) - called from $.ajax's dataFilter method to allow alteration of inbound HTML

I had to replace the $.load() method you used in order to use the additional features of jQuery's raw ajax(), but no functionality has been lost.

Here are the github/markdown friendly examples from the source, and there is a live test site here.

Your callback function was not changed.


options = {
    callback: function() {
        var $child, $internalRefsToTagName, $jscrollInner, $newSection, tagName;
        $marker.remove();
        $jscrollInner = $('.jscroll-inner');
        $newSection = $(this);
        $newSection.before($newSection.children('section'));
        while (($child = $newSection.children().first()).length) {
            tagName = $child[0].tagName;
            $internalRefsToTagName = $newSection.find(tagName);
            $jscrollInner
            .find(tagName)
            .not($internalRefsToTagName)
            .last()
            .after($child);
        }
        $('.jscroll-added').not($newSection).remove();
    },
    getNextHref: function() {
        var $next, $nextHref;
        $next = $('#page-nav a[href]').first();
        $nextHref = $next.attr('href');
        $next.attr('href', null);
        return $nextHref;
    },
    dataFilter: function(data, dataType) {
        var $data;
        data += '<div id="m4rk3r">';
        $data = processDocxAttributes($('<div>').html(data));
        return $data.html();
    }
};
    // getInsertPoint: fn($inner) returns $(element) 

    Allow user defined function to determine insert
    point of new parts, part will be inserted
    **before** returned point.  This allows for
    inserts to take place within complex HTML
    structures, eg:
    <section id="initial part">
      <div>
        <p>
          <ol>
            <li>
              <!-- new parts insert here -->
              <div id="insert-point" />
     jscroll({
       getInsertPoint: function($inner) {
           return $marker = $inner.find('#m4rk3r');
       }
     });

sfinktah avatar Sep 10 '15 16:09 sfinktah

Like it - exactly what I needed. Dealing with complex html is a pain with this lib. These changes certainly help!

Jetski5822 avatar Jan 24 '18 12:01 Jetski5822