/**
* Plugin function that registers listener against scroll event
* @param {object} analytics The Analytics client
*/
function scrolling(analytics) {
let scrollTracker = new ScrollTracker();
const onScroll = debounce(() => {
scrollTracker.onDepthReached(depth => {
analytics.send('pageDepthReached', applicationId, {depth});
});
}, 1500);
document.addEventListener('scroll', onScroll);
// Reset levels on SPA-enabled environments
const onLoad = () => {
scrollTracker.dispose();
scrollTracker = new ScrollTracker();
};
window.addEventListener('load', onLoad);
return () => {
document.removeEventListener('scroll', onScroll);
window.removeEventListener('load', onLoad);
};
}
attached() {
this._updatePreview = debounce(
this._updatePreview.bind(this),
500
);
this._updatePreviewSize = debounce(
this._updatePreviewSize.bind(this),
100,
);
window.addEventListener('resize', this._updatePreviewSize);
this.on('cssChanged', this._updatePreview);
this.on('htmlChanged', this._updatePreview);
this.on('jsChanged', this._updatePreview);
}
/**
* @inheritDoc
*/
attached() {
super.attached();
this.eventHandler_.add(dom.on(this.inputElement, 'focus', this.handleInputFocus_.bind(this)));
this.eventHandler_.add(dom.on(document, 'click', this.handleDocClick_.bind(this)));
this.eventHandler_.add(dom.on(window, 'resize', debounce(this.handleWindowResize_.bind(this), 100)));
if (this.visible) {
this.align();
}
}
/**
* @inheritDoc
*/
attached() {
super.attached();
this.setAriaAttributes_();
this.eventHandler_.add(dom.on(this.inputElement, 'focus', this.handleInputFocus_.bind(this)));
this.eventHandler_.add(dom.on(document, 'click', this.handleDocClick_.bind(this)));
this.eventHandler_.add(dom.on(window, 'resize', debounce(this.handleWindowResize_.bind(this), 100)));
this.eventHandler_.add(dom.on(this.inputElement, 'keydown', this.handleKeyDown_.bind(this)));
this.eventHandler_.add(this.getList().on('rendered', this.handleListRender_.bind(this)));
if (this.visible) {
this.align();
}
}
/**
* Sends information about Blogs scroll actions.
* @param {object} The Analytics client instance
*/
function trackBlogsScroll(analytics, blogElements) {
const scrollSessionId = new Date().toISOString();
const scrollTracker = new ScrollTracker();
const onScroll = debounce(() => {
blogElements.forEach(element => {
scrollTracker.onDepthReached(depth => {
analytics.send('blogDepthReached', applicationId, {
...getBlogPayload(element),
depth,
sessionId: scrollSessionId
});
}, element);
});
}, 1500);
document.addEventListener('scroll', onScroll);
return () => {
document.removeEventListener('scroll', onScroll);
};
}
/**
* @inheritdoc
* @review
*/
created() {
this._handleInputHrefKeyUp = debounce(
this._handleInputHrefKeyUp.bind(this),
400
);
}
/**
* @inheritDoc
*/
attached() {
this.requestImageEditorPreview_ = debounce(this.requestImageEditorPreview, 50);
this.cache_ = {};
}
/**
* App class that handle routes and screens lifecycle.
* @constructor
* @extends {EventEmitter}
*/
constructor() {
super();
/**
* Holds the active screen.
* @type {?Screen}
* @protected
*/
this.activeScreen = null;
/**
* Holds the active path containing the query parameters.
* @type {?string}
* @protected
*/
this.activePath = null;
/**
* Allows prevent navigate from dom prevented event.
* @type {boolean}
* @default true
* @protected
*/
this.allowPreventNavigate = true;
/**
* Holds link base path.
* @type {!string}
* @default ''
* @protected
*/
this.basePath = '';
/**
* Captures scroll position from scroll event.
* @type {!boolean}
* @default true
* @protected
*/
this.captureScrollPositionFromScrollEvent = true;
/**
* Holds the default page title.
* @type {string}
* @default null
* @protected
*/
this.defaultTitle = globals.document.title;
/**
* Holds the form selector to define forms that are routed.
* @type {!string}
* @default form[enctype="multipart/form-data"]:not([data-senna-off])
* @protected
*/
this.formSelector = 'form[enctype="multipart/form-data"]:not([data-senna-off])';
/**
* Holds the link selector to define links that are routed.
* @type {!string}
* @default a:not([data-senna-off])
* @protected
*/
this.linkSelector = 'a:not([data-senna-off])';
/**
* Holds the loading css class.
* @type {!string}
* @default senna-loading
* @protected
*/
this.loadingCssClass = 'senna-loading';
/**
* Using the History API to manage your URLs is awesome and, as it happens,
* a crucial feature of good web apps. One of its downsides, however, is
* that scroll positions are stored and then, more importantly, restored
* whenever you traverse the history. This often means unsightly jumps as
* the scroll position changes automatically, and especially so if your app
* does transitions, or changes the contents of the page in any way.
* Ultimately this leads to an horrible user experience. The good news is,
* however, that there’s a potential fix: history.scrollRestoration.
* https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration
* @type {boolean}
* @protected
*/
this.nativeScrollRestorationSupported = ('scrollRestoration' in globals.window.history);
/**
* When set to true there is a pendingNavigate that has not yet been
* resolved or rejected.
* @type {boolean}
* @default false
* @protected
*/
this.isNavigationPending = false;
/**
* Holds a deferred with the current navigation.
* @type {?CancellablePromise}
* @default null
* @protected
*/
this.pendingNavigate = null;
/**
* Holds the window horizontal scroll position when the navigation using
* back or forward happens to be restored after the surfaces are updated.
* @type {!Number}
* @default 0
* @protected
*/
this.popstateScrollLeft = 0;
/**
* Holds the window vertical scroll position when the navigation using
* back or forward happens to be restored after the surfaces are updated.
* @type {!Number}
* @default 0
* @protected
*/
this.popstateScrollTop = 0;
/**
* Holds the redirect path containing the query parameters.
* @type {?string}
* @protected
*/
this.redirectPath = null;
/**
* Holds the screen routes configuration.
* @type {?Array}
* @default []
* @protected
*/
this.routes = [];
/**
* Maps the screen instances by the url containing the parameters.
* @type {?Object}
* @default {}
* @protected
*/
this.screens = {};
/**
* When set to true the first erroneous popstate fired on page load will be
* ignored, only if <code>globals.window.history.state</code> is also
* <code>null</code>.
* @type {boolean}
* @default false
* @protected
*/
this.skipLoadPopstate = false;
/**
* Maps that index the surfaces instances by the surface id.
* @type {?Object}
* @default {}
* @protected
*/
this.surfaces = {};
/**
* When set to true, moves the scroll position after popstate, or to the
* top of the viewport for new navigation. If false, the browser will
* take care of scroll restoration.
* @type {!boolean}
* @default true
* @protected
*/
this.updateScrollPosition = true;
this.appEventHandlers_ = new EventHandler();
this.appEventHandlers_.add(
dom.on(globals.window, 'scroll', debounce(this.onScroll_.bind(this), 100)),
dom.on(globals.window, 'load', this.onLoad_.bind(this)),
dom.on(globals.window, 'popstate', this.onPopstate_.bind(this))
);
this.on('startNavigate', this.onStartNavigate_);
this.on('beforeNavigate', this.onBeforeNavigate_);
this.on('beforeNavigate', this.onBeforeNavigateDefault_, true);
this.setLinkSelector(this.linkSelector);
this.setFormSelector(this.formSelector);
}