Re:main.js

From disqus.com, 1 Month ago, written in JavaScript, viewed 3 times. This paste is a reply to Re:marionette.overrides.js from disqus.com - go back
URL https://pastebin.freepbx.org/view/c8d58e59/diff Embed
Viewing differences between Re:marionette.overrides.js and Re:main.js
define('home/overrides/marionette.overrides',[
    'backbone-marionette',
], 
/**
 * Library which triggers Backbone events based on element visibility.
 *
 * Main method wraps any element or {@link ElementContainer|view with an el property}
 * to make the library aware of it. This returns an event-aware
 * wrapper. The following events are supported:
 *
 * - enter
 * - exit
 * - visible
 * - invisible
 *
 * Enter and exit are called when an element's visibility changes, while
 * visible and invisible are called per (throttled) scroll event.
 *
 * Visibility can also be manually checked at any time using
 * {@link module:stance~isVisible|isVisible}.
 *
 * The library will cache element offsets and sizes.
 * To invalidate a measurement call {@link module:stance~invalidate|invalidate}
 * on the wrapper, or call the main {@link module:stance.invalidate|invalidate}
 * to clear all cached measurements.
 *
 * To stop tracking an element, simply remove any bound events.
 *
 * The {@link ElementContainer|view} that is wrapped can also affect visibility
 * measurements via two properties, topEdgeOffset and bottomEdgeOffset.
 *
 * Examples, use cases
 * -------------------
 *
 *  - You have a view and you want to do something once the first time
 *    it comes into the viewport:
 *
 *      view.listenToOnce(stance(view), 'visible', function () {
 *          // Do something like kick off an analytics tracking request
 *      });
 *
 *  -- NOTE: as the 'visible' event is bound to scroll, it will only fire
 *     if the user scrolls.
 *
 * @module stance
 */

define('stance/main',[
    'core/Events',
    'core/utils/function/debounce',
    'core/utils/function/throttle',
    'core/utils/object/extend',

    './tracking',
],
function (
    Marionette
Events,
    debounce,
    throttle,
    extend,

    tracking
) {
    'use strict';

    /**
           New function, not an override.
      
An object which has a .el property, such as a Backbone View.
     *
     
This will rerender the model portion @typedef ElementContainer
     * @property {HTMLElement} el - The element to measure.
     * @property {?(number|function)} topEdgeOffset - Amount to adjust the
     *   top "visible" edge 
of the template for a composite view
      * but will not rerender 
element by. Positive numbers decrease the
     *   apparent size of 
the collection portion.
      
element.
     * @property {?(number|?function)} bottomEdgeOffset - Amount to adjust the
     *   bottom "visible" edge of the element by. Positive numbers decrease the
     *   apparent size of the element.
     */

    /**
     * An html element or a container of an html element.
     *
     * @typedef Element-like
     * @type {external:HTMLElement|ElementContainer}
     */

    /**
     * Wrap element or container to track its visibility.
     * @class
     * @function
     * @implements {Events}
     * @param {Element-like} obj - The element or view to measure.
     * @property {Element-like} obj
     * @property {boolean} lastVisible - Last known visibility of element.
     * @returns {Stance}
     
*/
    Marionette.CompositeView.prototype.rerenderModel = function () Stance(obj) {
        var $itemViewContainer = this.$(this.itemViewContainer).detach();
// Create new instance if not invoked as constructor
        if (!(this instanceof Stance))
            return new Stance(obj);
        this.$el.html(this.renderModel());
obj = obj;
        this.$(this.itemViewContainer).replaceWith($itemViewContainer);

        
lastVisible = false;
    }

    // Debounce the processing of events when we attach
    // new handlers.
    var _debouncedProcessEvents = debounce(function () {
        tracking.processEvents(tracking.lastPos);
    }, 250);

    extend(Stance.prototype, Events, {
        on: function (name) {
            // We only need to update tracking if the event binding is
            // entirely new, ie. if the event is not bound yet.
            // This must be checked before _events has been updated
            var needSort = !(this._events && 
this.triggerMethod('render', this);
    };
_events[name]);

            var ret = Events.on.apply(this, arguments);

            // updateTracking must be called after _events has been updated
            if (needSort)
                tracking.updateTracking(this);

            _debouncedProcessEvents();
            return ret;
        },

        off: function (name) {
            var ret = Events.off.apply(this, arguments);

            // If the event is entirely unbound, update tracking.
            // updateTracking must be called after _events has been updated
            if (!(this._events && this._events[name]))
                tracking.updateTracking(this);

            return ret;
        },

        /**
         * Get the modified offset for this element, retrieving the cached version if possible.
         *
         * @returns {?FullOffset}
         */
        offset: function () {
            return tracking.getElementOffset(this.obj);
        },

        /**
         * Decide if the element is visible.
         * Returns null if element visibility cannot be determined.
         *
         * An element's visibility can be affected by the container's
         * topEdgeOffset and bottomEdgeOffset properties.
         *
         * An element is visible if:
         *
         * 1. The top of the element is below the top of the viewport
         *    and its modified top edge is above the bottom of the viewport.
         * 2. The bottom of the element is above the bottom of the viewport
         *    and its modified bottom edge is below the top of the viewport.
         *
         * @param {ViewportPos} [pos] - Viewport position to calculate for.
         *   If omitted it will default to the last value passed to the scroll handler
         * @returns {?boolean} Visibility, or null if indeterminate.
         */
        isVisible: function (pos) {
            pos = pos || tracking.lastPos;

            if (!pos)
                return null;

            var screenTop = pos.top;
            var screenBottom = screenTop + pos.height;
            var offset = this.offset();

            if (!offset)
                return false;

            // See main function comment for a summary of this check
            return (offset.offsetTop >= screenTop && offset.visibleTop < screenBottom) ||
                (offset.offsetTop + offset.height <= screenBottom && offset.visibleBottom > screenTop);
        },

        /**
         * Invalidate the last cached offset for this element.
         *
         * @returns {Stance} this
         */
        invalidate: function () {
            tracking.clearCache(this.obj);

            return this;
        },
    });

    extend(Stance, {
        /**
         * Clear cached measurements.
         *
         * @todo TODO: Duplicates instance functionality, should this
         *   function accept a parameter at all?
         * @function
         * @static
         * @param {Element-like} [obj] - Element or container to clear cached
         *   measurements for. If omitted, entire cache will be cleared.
         */
        invalidate: tracking.clearCache,

        /**
         * @typedef ViewportPos
         * @property {number} top - Top edge of viewport relative to document.
         * @property {number} height - Height of viewport.
         */

        /**
         * Notify the library that a scroll event has occurred.
         *
         * Immediately calls all applicable event handlers.
         *
         * @function
         * @static
         * @param {ViewportPos} pos - Scroll information.
         */
        scroll: tracking.processEvents,


        _windowScrollHandlerBound: false,
        _ignoreCache: false,

        /**
         * Window scroll event handler. Automatically bound on load.
         *
         * @private
         * @static
         * @function
         */
        _windowScrollHandler: throttle(function () {
            if (Stance._ignoreCache)
                Stance.invalidate();

            // Trigger library scroll events
            tracking.processEvents({
                top: window.pageYOffset,
                height: window.document.documentElement.clientHeight,
            });
        }, 250),

        /**
         * Listen for window scroll and resize events.
         *
         * @static
         * @param {boolean} ignoreCache - If provided, will determine if the scroll handler
         *                                invalidates the position cache on each scroll event.
         */
        bindWindowEvents: function (ignoreCache) {
            if (this._windowScrollHandlerBound)
                return;

            if (typeof ignoreCache !== 'undefined')
                Stance._ignoreCache = ignoreCache;

            window.addEventListener('scroll', this._windowScrollHandler);
            window.addEventListener('resize', this._windowScrollHandler);

            this._windowScrollHandlerBound = true;

            // Set our initial `lastPos` values and process any already bound
            // scroll events.
            this._windowScrollHandler();
        },

        /**
         * Stop listening for window scroll and resize events.
         *
         * @static
         */
        unbindWindowEvents: function () {
            Stance._ignoreCache = false;

            window.removeEventListener('scroll', this._windowScrollHandler);
            window.removeEventListener('resize', this._windowScrollHandler);

            this._windowScrollHandlerBound = false;
        },
    });

    return Stance;
});

define('stance', ['stance/main'], function (main) { return main; });

// https://c.disquscdn.com/next/1618bb4/home/js/overrides/marionette.overrides.jscom/next/next-core/core/stance/main.js

Replies to Re:main.js rss

Title Name Language When
Re:tracking.js disqus.com javascript 1 Month ago.

Reply to "Re:main.js"

Here you can reply to the paste above