HTML5 Hacks

_HTML5_hacks.md

HTML5 Hacks

scroller.js

Simple class to make smooth scroll to make fully visible givien item inside a container.

Example:

var container = $("#myContainer");
var scroll = new scroller(container);
$(".item", container).on("click", function() {
    scroll.set($(this));
    // Obviously this is so stupid example because you can't click non visible
    // elements (even partly visiblel yes) but it is the easier one that comes
    // to my mind ;-)).
});

NOTE: There are push() and pop() methods too. They are intended to be used when we want to focus (and typically highlight) some items temporarily (for instance because it matches some search pattern) and later go back to previous position.

fieldInsertReplace.js

Insert text at cursor position on textarea or input (jquery) objects deleting selected text (replacing function) if any.

fieldInsertReplace.js

// Insert text (replacing selection if any) at cursor position on jQuery textarea or input objects.
// See https://gist.github.com/bitifet/f2ecfeb97eb42318bcc0#file-_html5_hacks-md
// for details...

function fieldInsert(field, newText, shims) {/*{{{*/
    var fullText = field.val();
    var startPos = field.prop("selectionStart");
    var endPos = field.prop("selectionEnd");
    var txt0 = fullText.substring(0, startPos);
    var txt1 = fullText.substring(endPos);

    if (shims !== undefined) shims.filter(function applyShims(shim){
        if (
            // Undefined matches always.
            txt0.match(shim[0][0])
            && txt1.match(shim[0][1])
        ) {
            // Both needs to be defined (use "" to (ap/pre)pend nothing).
            newText = shim[1][0] + newText;
            newText += shim[1][1];
        };
    });

    field.val(
        txt0
        + newText
        + txt1
    );

    var newEndPos = startPos + newText.length;
    if (endPos - startPos) { // Started with selection.
        field.prop("selectionStart", startPos);
    } else {
        field.prop("selectionStart", newEndPos);
    };
    field.prop("selectionEnd", newEndPos);
    field.focus();
};/*}}}*/

scroller.js

// Simple class to make smooth scroll to make fully visible givien item inside a container.
// See https://gist.github.com/bitifet/f2ecfeb97eb42318bcc0#file-_html5_hacks-md
// for details...

class scroller {//{{{
    constructor(target) {//{{{
        var me = this;
        me.target = target;
        me.stack = [];
        me.operating = false;
        function saveScroll() {
            // Cache postion to not trust in this property consistency:
            if (me.operating) return;
            me.position = me.target[0].scrollTop;
            me.stack = []; // Reset stack.
        };
        me.target.on("scroll", saveScroll);
        saveScroll();
    };//}}}
    resolvePosition(pos) {//{{{
        var me = this;
        if (isNaN(pos)) {
            var element = pos;
            var targetHeight = me.target[0].offsetHeight;
            var elemTop = element.position().top;
            var elemHeight = element[0].offsetHeight;
            var elemDelta = elemTop < 0
                ? elemTop - 10 // Top Delta
                : targetHeight >= elemTop + elemHeight
                    ? 0 // Fit in visible area
                    :  elemTop + elemHeight - targetHeight + 10 // Bottom Delta
            ;
            pos = me.position + elemDelta;
        };
        return pos;
    };//}}}
    doScroll(pos) {//{{{
        var me = this;
        me.position = pos;
        me.target.stop(false, false); // Cancel prevous animation if any.
        me.operating = true;
        me.target.animate(
            {scrollTop: me.position}
            , () => me.operating = false
        );
        return me.position;
    };//}}}
    set(pos) {//{{{
        var me = this;
        pos = me.resolvePosition(pos);
        me.stack = [];
        return me.doScroll(pos);
    };//}}}
    push(pos) { // Accept new position or element to make visible.//{{{
        var me = this;
        pos = me.resolvePosition(pos);
        if (pos == me.position) return me.position;
        me.stack.push(me.position);
        return me.doScroll(pos);
    };//}}}
    pop() {//{{{
        var me = this;
        if (! me.stack.length) return;
        return me.doScroll(me.stack.pop());
    };//}}}
};//}}}