withLoginOverlay.js

From disqus.com, 7 Months ago, written in JavaScript, viewed 3 times. This paste is a reply to Re: withReactSubviews.js from disqus.com - view diff
URL https://pastebin.freepbx.org/view/a31514f1 Embed
Download Paste or View Raw
  1. define('home/mixins/withLoginOverlay',[
  2.     'jquery',
  3.     'underscore',
  4.     'backbone-marionette',
  5.  
  6.     'home/models/Session',
  7.     'home/views/LoginOverlayView',
  8.     'home/templates/signUpAsideModule',
  9.     'home/utils/layoutUtils',
  10. ], function (
  11.     $,
  12.     _,
  13.     Marionette,
  14.  
  15.     Session,
  16.     LoginOverlayView,
  17.     signUpAsideModuleTemplate,
  18.     layoutUtils
  19. ) {
  20.     'use strict';
  21.  
  22.     /**
  23.      * Adds login overlay support to the view to which the mixin is applied.
  24.      *
  25.      * If View's template has defined a region for it, renders the log in module
  26.      * in the region which has the ability to expand the login overlay.
  27.      *
  28.      * Adds a login footer which shows if the signUpAsideModule is not in
  29.      * the viewport.
  30.      *
  31.      * Handles all the click events for the footer and signUpAsideModule
  32.      * to show the overlay when appropriate.
  33.      *
  34.      * Overlay itself is a view which handles authentication.
  35.      *
  36.      *
  37.      * Expects to be applied to a Marionette View using the withSubviews mixin,
  38.      * or a Marionette Layout.
  39.      * Can be passed a prompt, which is the message shown to the user above the
  40.      * log in options. If not given, will use a default message.
  41.      */
  42.     var LoginOverlayMixin = {
  43.         regions: {
  44.             loginModuleRegion: '[data-role=sign-up-module]',
  45.         },
  46.  
  47.         events: {
  48.             'click [data-action~=show-login-overlay]': 'showLoginOverlay',
  49.         },
  50.  
  51.         initialize: function (_initialize, options) {
  52.             _initialize.call(this, options);
  53.             this.boundEnsureLoginPromptInViewport = _.bind(this.ensureLoginPromptInViewport, this);
  54.             $(window).scroll(this.boundEnsureLoginPromptInViewport);
  55.         },
  56.  
  57.         onClose: function () {
  58.             this.unbindScrollHandler();
  59.             if (this.loginOverlayView)
  60.                 this.loginOverlayView.close();
  61.         },
  62.  
  63.         onRender: function (_onRender) {
  64.             if (_.isFunction(_onRender))
  65.                 _onRender.call(this);
  66.  
  67.             var createLoginModuleView = function () {
  68.                 return new Marionette.ItemView({
  69.                     template: signUpAsideModuleTemplate,
  70.                 });
  71.             };
  72.  
  73.             // Allow mixin to work with either Marionette Layouts or with a View
  74.             // with the withSubviews mixin.
  75.             if (this.activateRegion)
  76.                 this.activateRegion(this.loginModuleRegion, createLoginModuleView);
  77.             else
  78.                 this.loginModuleRegion.show(createLoginModuleView());
  79.         },
  80.  
  81.         /**
  82.          * Ensures there is a login prompt in the viewport. Shows the footer
  83.          * prompt iff the module is not in the viewport.
  84.          */
  85.         ensureLoginPromptInViewport: _.debounce(function () {
  86.             var loginPromptModule = this.$('[data-role=login-prompt-module]');
  87.             var showFooter = !loginPromptModule.length || !layoutUtils.isElementInViewport(loginPromptModule);
  88.             this.showLoginFooter(showFooter);
  89.         }, 200),
  90.  
  91.         unbindScrollHandler: function () {
  92.             $(window).off('scroll', this.boundEnsureLoginPromptInViewport);
  93.         },
  94.  
  95.         showLoginOverlay: function () {
  96.             this.loginOverlayView.showAsOverlay();
  97.         },
  98.  
  99.         showLoginFooter: function (shouldShow) {
  100.             this.loginOverlayView.showAsFooter(shouldShow);
  101.         },
  102.  
  103.         onDomRefresh: function (overlayViewOptions, _onDomRefresh) {
  104.             if (_.isFunction(_onDomRefresh))
  105.                 _onDomRefresh.call(this);
  106.  
  107.             // Since the LoginOverlayView is inserted after this view's element,
  108.             // don't need to readd/rerender it when this view is rerendered, as
  109.             // it won't be removed. One initialization is enough.
  110.             if (this.loginOverlayView)
  111.                 return;
  112.  
  113.             // Add the overlay view to the DOM. It'll be hidden by default
  114.             // and shown later by scroll or click events.
  115.             this.loginOverlayView = new LoginOverlayView(overlayViewOptions);
  116.             this.listenTo(this.loginOverlayView, 'shown:overlay', this.unbindScrollHandler);
  117.             this.$el.after(this.loginOverlayView.render().$el);
  118.         },
  119.     };
  120.  
  121.     /**
  122.      * @param  {string} prompt - (optional) The message shown to the user above the log in prompt.
  123.      */
  124.     return function (prompt) {
  125.         // Mixin only applies on logged out pages
  126.         if (!Session.isKnownToBeLoggedOut())
  127.             return;
  128.  
  129.         this.regions = _.extend({}, LoginOverlayMixin.regions, this.regions);
  130.  
  131.         this.events = _.extend({}, LoginOverlayMixin.events, this.events);
  132.  
  133.         this.initialize = _.wrap(this.initialize, LoginOverlayMixin.initialize);
  134.  
  135.         this.onRender = _.wrap(this.onRender, LoginOverlayMixin.onRender);
  136.  
  137.         this.onDomRefresh = _.wrap(this.onDomRefresh, _.partial(LoginOverlayMixin.onDomRefresh, { prompt: prompt }));
  138.  
  139.         _.extend(this, _.pick(LoginOverlayMixin, [
  140.             'showLoginFooter',
  141.             'showLoginOverlay',
  142.             'ensureLoginPromptInViewport',
  143.             'unbindScrollHandler',
  144.         ]));
  145.     };
  146. });
  147.  
  148.  
  149.  
  150.  
  151.  
  152.  
  153.  
  154.  
  155.  
  156.  
  157.  
  158.  
  159.  
  160.  
  161.  
  162.  
  163.  
  164.  
  165. // https://c.disquscdn.com/next/82c6de3/home/js/mixins/withLoginOverlay.js

Replies to withLoginOverlay.js rss

Title Name Language When
BaseSettings.js disqus.com javascript 7 Months ago.

Reply to "withLoginOverlay.js"

Here you can reply to the paste above