"Timed Progress Bars": Snowman (v1.3.0)

Summary

"Timed Progress Bars" creates a global window.setup object and function, timedprogressbars(). Using jQuery within the definition, the function creates outer and inner <div> elements with CSS classes defined in the Story Stylesheet. Using a combination of setInterval() and setTimeout(), a timer is created. The length and color of an inner <div> element is adjusted based on the remaining time each loop.

When the timer runs out, the function argument is run and the length of the inner <div> element is reduced to 0.

Live Example

Download: Live Example

Twee Code

:: StoryTitle
Timed Progress Bars in Snowman

:: UserScript[script]
// Use or create window.setup
window.setup = window.setup || {};

/*

        Description: Show a dynamically-created "progress bar" 
        that changes colors as its timer runs down.

        Arguments:
            duration: time in seconds
            width: CSS width
            functionToRun: the function to execute when the timer runs out

*/

setup.timedprogressbars = function(duration, width, functionToRun) {

        // Save or generate a default duration
        var duration = (Number(duration) || 60) * 1000;

        // Save or generate a width
        var width = width || "100%";

        // Generate a unique hash
        var hash = Math.floor(Math.random() * 0x100000000).toString(16);

        //  Create an outer ID
        var outerId = "outer_" + hash;

        // Create an inner ID
        var innerId = "inner_" + hash;

        // Create an outer div, 
        // add an ID,
        // add a class,
        // change the CSS width, and
        // append to the output
        var progressbar = $("<div>")
        .attr("id", outerId)
        .addClass("progress-bar")
        .css('width', width)
        .appendTo("#passage");

        // Create an inner div, 
        // add an ID,
        // add a class,
        // change the CSS width, and
        // append to the progressbar
        var progressvalue = $("<div>")
        .attr("id", innerId)
        .addClass("progress-value")
        .css('width', "100%")
        .appendTo(progressbar);

        // Create a function to convert into hexadecimal
        var toHex = function(num) {
            var res = Math.round(Number(num)).toString(16);
            return (res.length === 1 ? "0" + res : res);
        };

        // Watch for the :passagedisplay event once
        jQuery(document).one("showpassage:after", function() {

            // Get the current time
            var timeStarted = (new Date()).getTime();

            // Save a reference to the setInterval function
            var workFunction = setInterval(function() {

                // Check if the element is still 'connected'
                if(! progressbar.prop("isConnected") ) {

                    // Navigated away from the passage
                    clearInterval(workFunction);
                    return;
                }

                // Figure out how much time has passed
                var timePassed = (new Date()).getTime() - timeStarted;

                // Check if the timer has run out
                if(timePassed >= duration) {

                    // Reduce the inner width to 0
                    progressvalue.css('width', "0");

                    // Clear interval
                    clearInterval(workFunction);

                    // Run the inner function (if set)
                    setTimeout(functionToRun, 40);
                    return;
                }

                // Update the progress percentage
                var percentage = 100 - 100 * timePassed / duration;

                // Save the new color
                var color = "#"
                    + toHex(Math.min(255, 510 -  5.1 * percentage))
                    + toHex(Math.min(255, 5.1 * percentage)) + "00";

                // Update the background color of the inner div
                progressvalue.css("backgroundColor", color);

                // Update the inner div width
                progressvalue.css("width", (100 - 100 * timePassed / duration) + "%");

            }, 40);

        });
};




:: UserStylesheet[stylesheet]
.progress-bar {
    position: relative;
    border: 1px solid #777;
    background: black;
    height: 1em;
}
.progress-value {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #00ff00;
}



:: Start
<script>

    setup.timedprogressbars(5, "20em", function(){
        // Hide the progress bar
        $(".progress-bar").css("display", "none");
        // Display the result
        $("#results").text("Too late!");
    });

</script>

<div id="results"></div>

Download: Twee Code

See Also

Adding Functionality

results matching ""

    No results matching ""