withThreadSharing.Js

From disqus.com, 1 Month ago, written in JavaScript, viewed 3 times. This paste is a reply to TabbedView.JS from disqus.com - go back
URL https://pastebin.freepbx.org/view/d12efbdf/diff Embed
Viewing differences between TabbedView.JS and withThreadSharing.Js
define('home/views/common/TabbedView',[
define('home/mixins/withThreadSharing',[
    'jquery',
    'underscore',
    'backbone-marionette',\r\n\r\n    'core/utils/metatags',\r\n    'core/bus',\r\n    'home/utils/trackingUtils',\r\n    'home/utils/navigationUtils',\r\n], function (
    $,
    _,
    Marionette,

    metatags,
    bus,
    trackingUtils,
    navigationUtils
_
) {
    'use strict';

    /**
     * Not intended Default method for retrieving the thread off the model.
     * Expects the model 
to have a direct relation to the thread
     * (ex: activity, post), or 
be instantiated.
the thread itself.
     *
     * Parent class for views with multiple "tabs" of content that can be switched.
     *
     * Provides region for a content area that shows the active content.
     *
     * Provides listeners/handlers for clicks that switch the tab content,
     * and optionally update the url without causing a backbone router navigation.
     *
     * ex:
 == JavaScript ==
        var TwoTabs = TabbedView.extend({
            template: 'twotabs',

            // must provide. used by base class
            getTabView(tab) {
                switch(tab) {
                    case 'one':
                        return new View({name: 'one'});
                    case 'two':
                        return new View({name: 'two'});
                }
            }
        });

 == HTML/Handlebars ==
        {{! 'twotabs' template }}
        <nav>
            {{! including href in conjunction with switch-tab will use pushState to update the browser address bar }}
            <a href="/home/area/one" data-action="switch-tab" {{! no data-tab attr means this triggers the default tab }}>One</a>
            <a href="/home/area/two" data-action="switch-tab" data-tab="two">Two</a>
        </nav>
        {{! must have data-role=content-area for loading tab content }}
        <section data-role="content-area"></section>

 == CSS ==
        .active {
            // these rules will be applied to the tab currently selected
         }
@returns {Thread}
     */
    var TabbedView getThread Marionette.Layout.function () {
        return this.model.thread || this.model;
    };

    return function () {
        this.events = _.
extend({
        // Must override, either a             'click [data-action=share]': 'handleShareThread',
        }, this.events);

        this.handleShareThread = 
function that returns a string, or the
        // string itself, that is the name of tab that's active by default
        defaultTab: undefined,

        // Mark this view's top element as a tabbed view so that we can determine
        // when a tab belongs to a nested tabbed view
        attributes: {
            'data-view-type': 'tabbed',
        },

        /**
         * Must override.
         * Returns a view instance to show when the given tab is active.
         * @param {string} [activeTab] - The name of the active tab
         */
        getTabView: function () {
            throw new Error('Not implemented');
        },

        /**
         * Can override in order to specify the section to be passed on
         * jester event tracking.
         * @param {string} [activeTab]
         * @returns {string} The section to send with jester events, or null
         *                  to pass defaults.
         */
        getTrackingSection: function () {
            return null;
        },

        // Child view's template should define below element(s)
        regions: {
            contentRegion: '[data-role=content-area]',
        },

        events: {
            'click [data-action=switch-tab]': 'switchTab',
        },

        initialize: function (options) {
            options = options || {};
            this.activeTab = options.activeTab;
            this.isModule = options.isModule;
            this.setTrackingSection();
        },

        switchTab: function (evt) 
(event) {
            if (!evt)
                return false;

            // Don't allow tab changes in nested tabbed views propagate to parent
            // tabbed views.
            evt.preventDefault();
            evt.stopPropagation();

            var requestedTab = $(evt.currentTarget).data('tab');

            this.toggleDropdown();

            // User clicked the tab that is currently displayed: so do nothing
            if (requestedTab === this.activeTab)
(!event)
                return;

            this.activeTab = requestedTab || _.result(this, 'defaultTab');

            // Find an anchor inside the tab, whether the user clicked on an element inside
            // the anchor, or on the top level tab element that contains the anchor.
            
event.preventDefault();
            event.stopPropagation();

            
var $tab thread $(evt.target).closest('[data-action=switch-tab]');
            
getThread.call(this);
            
var $anchor network $tab.find('a[href]').addBack('a[href]');

            // If href specified, update the url to represent the new href
            // (without triggering route handler)
            // Do this before updating the content of the tab so that any events triggered
            // during the showing of the content will have the correct url
            if ($anchor.length)
                navigationUtils.navigate($anchor[0]);

            this.updateTab();
        },

        toggleDropdown: function () {
            var navItem = this.$('.nav__item');
            if (navItem.length > 0)
                navItem.toggleClass('dropdown-open');
        },

        updateTab: function () {
            if (!this.activeTab)
                this.activeTab = _.result(this, 'defaultTab');

            var activeTab = this.activeTab;
            var newView = this.getTabView(activeTab);

            if (!newView) {
                this.trigger('badTab');
                activeTab = this.activeTab = _.result(this, 'defaultTab');
                newView = this.getTabView(activeTab);
            }

            this.setTrackingSection();

            this.updateTabContent(newView);

            this.updateTabClasses();

            this.trigger('change:activeTab', activeTab);
            bus.trigger('viewTab');
        },

        /**
         * Returns the elements within this view for changing tabs. Excludes those
         * used for changing tabs in a nested TabbedView.
         * @returns {jQuery}
         */
        getTabs: function () {
            // Exclude tabs from a TabbedView nested within this TabbedView
            var $allTabs = this.$('[data-action=switch-tab]');
            var $nestedTabs = this.$('[data-view-type=tabbed] [data-action=switch-tab]');

            return $allTabs.not($nestedTabs);
        },

        updateTabClasses: function () {
            if (!this.activeTab)
                this.activeTab = _.result(this, 'defaultTab');

            // Update the tabs to show which one is currently active
            var $tabs = this.getTabs();
            $tabs.filter('.active').removeClass('active');
            $tabs.filter('[data-tab="' + this.activeTab + '"]').addClass('active');
        },

        updateTabContent: function (newView) {
            var oldView = this.contentRegion.currentView;

            if (oldView) {
                // Prevent oldView from being closed, so that there isn't a time between closing
                // the old view and adding the new view, which causes a page jump. Will manually
                // close oldView later.
                oldView.onBeforeClose = function () {
                    return false;
                };

                // If this is a full-page view, ensure that the new view is tall enough so that it
                // will fill the current viewport, otherwise the page will get shorter and the
                // scrollbar will jump up, causing a jarring ux, unless the page is already
                // scrolled to top and then the minHeigh is not necessary.
                if (!this.isModule) {
                    var scrollTop = $(window).scrollTop();

                    if (scrollTop) {
                        var minHeight = scrollTop + $(window).height() - oldView.$el.offset().top;
                        newView.$el.css('minHeight', minHeight);
                    }
                }
            }

            this.contentRegion.show(newView);

            // Set the metatags and title for the page. `getMetaAttrs` returns
            // either a promise or a truthy object. If the view does not have a
            // `getMetaAttrs` method, we default to an empty dictionary which
            // resolves the $.when.
            if (this.getMetaAttrs)
                $.when(this.getMetaAttrs()).then(metatags.set);

            if (oldView) {
                // Now that the newView is in the dom, close the oldView.
                oldView.onBeforeClose = null;
                oldView.close();
            }
        },

        onDomRefresh: function () {
            // Don't bother creating views to fill in the regions if the regions don't
            // exist. This occurs when showing the fetching icon.

            if (this.$(this.contentRegion.el).length)
                this.updateTab();
        },

        setTrackingSection: function () {
            trackingUtils.setSection(
                this.getTrackingSection(this.activeTab) || _.result(this, 'defaultTab')
            );
        },

    });

    return TabbedView;
$(event.currentTarget).attr('data-network');

            thread.shareThread(network);
        };
    };
});

// https://c.disquscdn.com/next/home/js/views/common/TabbedView.com/next/home/js/mixins/withThreadSharing.js

Replies to withThreadSharing.Js rss

Title Name Language When
Re: withThreadSharing.Js disqus.com javascript 1 Month ago.

Reply to "withThreadSharing.Js"

Here you can reply to the paste above