Flarum style progress indicator?

Tim

Hi,

I'm developing a simple forum inside Laravel and I'd love to implement a reading progress indicator like the one inside the sidebar of Flarum.

Does anyone have any advice on how to build this? Perhaps a javascript plugin exists that could make it easy?

Thanks!

Tim

All good. I wrote it using jQuery. Lots of math involved. ?

jordanjay29

Tim If you'd like to share it, I'm sure others would appreciate it. Otherwise, good luck with your project.

Tim

I'd love to share it, but the measurements are very specific to my app. I also write embarrassingly bad Javascript, haha.

Actually, what the hell. I'll post it. Love to hear how the code could be improved.

So I have a series of posts which are displayed using the following HTML (data-date is generated with PHP):

<article class="post" data-date="February 2017">

Then in my sidebar I have the following (I've written some CSS to make it stick and slide down the page in the same way it does in Flarum):

<div class="scrubber">

    <p><a href="#top"><i class="fa fa-angle-double-up fa-before"></i>Original post</a></p>

    <div class="scrubber__progress">
        <div class="scrubber__scroll">
            <div class="filled"></div>
            <p>
                <strong><span class="scrubber__index"></span> of 6 posts</strong><br />
                <span class="scrubber__date"></span>
            </p>
        </div>
    </div>

    <p><a href="#now"><i class="fa fa-angle-double-down fa-before"></i>Now</a></p>

</div>

Here's my CSS:

//======================================================================
// SCRUBBER
//======================================================================

.scrubber {
    margin-top: 48px;
    p {
        color: $grey;
        font-size: $small-font-size;
        margin-bottom: 12px;
        a {
            color: $grey;
            &:hover { color: $grey; }
        }
    }
}

.scrubber__progress {
    background: $shadow;
    border-radius: 3px;
    height: 200px;
    margin-bottom: 12px;
    width: 6px;
}

.scrubber__scroll {
    position: absolute;
    width: 200px;

    display: flex;
    align-items: center;

    p {
        color: $body-font-color;
        font-weight: normal;
        margin-bottom: 0;
    }

    .filled {
        background: $blue;
        border-radius: 3px;
        height: 40px;
        margin-right: 15px;
        width: 6px;
    }
}

And finally, my JS:

//======================================================================
// SCRUBBER
//======================================================================

$(function(){

    $(document).ready(function() {

        $('.scrubber__index').html($('.post:nth-child(1)').index() + 1);
        $('.scrubber__date').html($('.post:nth-child(1)').data('date'));

    });

    $(window).bind('scroll', function() {

        $('.post').each(function() {

            var post = $(this);
            var position = post.position().top - $(window).scrollTop();

            if (position <= 0) {
                $('.scrubber__index').html(post.index() + 1);
                $('.scrubber__date').html(post.data('date'));
            }

        });

        $('.scrubber__scroll').css('margin-top', Math.round( ($(document).scrollTop() / ( $(document).height() - $(window).height() )) * 160));

    });

});

Any thoughts?

luceos

Tim if I understand correctly you're using raw jQuery. The only and best advice anyone can give is to switch to a js framework like angular, vuejs or what Flarum uses mithril. Working with components and two way binding amongst others is a blessing.