[Overlay.Info]: (xs: Observable<[LogNames, any]>, inputs: Inputs) => {
return xs.pipe(
withLatestFrom(
inputs.option$,
inputs.notifyElement$,
inputs.document$
),
/**
* Reject all notifications if notify: false
*/
filter(([, options]) => Boolean(options.notify)),
/**
* Set the HTML of the notify element
*/
tap(([event, options, element, document]) => {
element.innerHTML = event[0];
element.style.display = "block";
document.body.appendChild(element);
}),
/**
* Now remove the element after the given timeout
*/
switchMap(([event, options, element, document]) => {
return timer(event[1] || 2000).pipe(
tap(() => {
element.style.display = "none";
if (element.parentNode) {
document.body.removeChild(element);
}
})
);
})
);
}
export function getFormInputStream(
document: Document,
socket$: Inputs["socket$"],
option$: Inputs["option$"]
): Observable<OutgoingSocketEvent> {
const canSync$ = createTimedBooleanSwitch(
socket$.pipe(filter(([name]) => name === IncomingSocketNames.Keyup))
);
return option$.pipe(
skip(1), // initial option set before the connection event
pluck("ghostMode", "forms", "inputs"),
distinctUntilChanged(),
switchMap(formInputs => {
if (!formInputs) {
return empty();
}
return fromEvent(document.body, "keyup", true).pipe(
map((e: Event) => e.target || e.srcElement),
filter(
(target: Element) =>
target.tagName === "INPUT" ||
target.tagName === "TEXTAREA"
),
withLatestFrom(canSync$),
filter(([, canSync]) => canSync),
map(([eventTarget]) => {
const target = getElementData(eventTarget);
const value = eventTarget.value;
return KeyupEvent.outgoing(target, value);
})
);
})
);
}
export function createTimedBooleanSwitch(source$, timeout = 1000) {
return source$.pipe(
switchMap(() => {
return concat(of(false), timer(timeout).pipe(mapTo(true)));
}),
startWith(true)
);
}
export function getScrollStream(
window: Window,
document: Document,
socket$: Inputs["socket$"],
option$: Inputs["option$"]
): Observable<OutgoingSocketEvent> {
const canSync$ = createTimedBooleanSwitch(
socket$.pipe(filter(([name]) => name === IncomingSocketNames.Scroll))
);
/**
* If the option 'scrollElementMapping' is provided
* we cache thw
* @type {Observable<(Element | null)[]>}
*/
const elemMap$ = option$.pipe(
pluck("scrollElementMapping"),
map((selectors: string[]) =>
selectors.map(selector => document.querySelector(selector))
)
);
return option$.pipe(
skip(1), // initial option set before the connection event
pluck("ghostMode", "scroll"),
distinctUntilChanged(),
switchMap(scroll => {
if (!scroll) return empty();
return fromEvent(document, "scroll", true).pipe(
map((e: Event) => e.target),
withLatestFrom(canSync$, elemMap$),
filter(([, canSync]) => Boolean(canSync)),
map(([target, canSync, elemMap]: [any, boolean, any[]]) => {
if (target === document) {
return ScrollEvent.outgoing(
getScrollPosition(window, document),
"document",
0
);
}
const elems = document.getElementsByTagName(target.tagName);
const index = Array.prototype.indexOf.call(
elems || [],
target
);
return ScrollEvent.outgoing(
getScrollPositionForElement(target),
target.tagName,
index,
elemMap.indexOf(target)
);
})
);
})
);
}
handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
return fromPromise(this.platform.ready()).pipe(
switchMap(() => {
/**
* Native HTTP Cordova plugin doesn't like local requests
*/
const isExternalRequest = checkExternalRequest(req);
if (
isExternalRequest &&
checkAvailability('cordova.plugin.http') === true
) {
return this.cordovaHttpBackend.handle(req);
} else {
return this.fallbackBackend.handle(req);
}
}),
);
}
@Effect()
retrieveStock(): Observable<Action> {
return this.actions$.ofType(StockMarketActionTypes.RETRIEVE).pipe(
tap((action: ActionStockMarketRetrieve) =>
this.localStorageService.setItem(STOCK_MARKET_KEY, {
symbol: action.payload.symbol
})
),
distinctUntilChanged(),
debounceTime(500),
switchMap((action: ActionStockMarketRetrieve) =>
this.service
.retrieveStock(action.payload.symbol)
.pipe(
map(stock => new ActionStockMarketRetrieveSuccess({ stock })),
catchError(error =>
of(new ActionStockMarketRetrieveError({ error }))
)
)
)
);
}
@Effect()
retrieveStock(): Observable<Action> {
return this.actions$.ofType(STOCK_MARKET_RETRIEVE).pipe(
tap(action =>
this.localStorageService.setItem(STOCK_MARKET_KEY, {
symbol: action.payload
})
),
distinctUntilChanged(),
debounceTime(500),
switchMap(action =>
this.service.retrieveStock(action.payload).pipe(
map(stock => ({
type: STOCK_MARKET_RETRIEVE_SUCCESS,
payload: stock
})),
catchError(err =>
of({ type: STOCK_MARKET_RETRIEVE_ERROR, payload: err })
)
)
)
);
}
export function getClickStream(
document: Document,
socket$: Inputs["socket$"],
option$: Inputs["option$"]
): Observable<OutgoingSocketEvent> {
const canSync$ = createTimedBooleanSwitch(
socket$.pipe(filter(([name]) => name === IncomingSocketNames.Click))
);
return option$.pipe(
skip(1), // initial option set before the connection event
pluck("ghostMode", "clicks"),
distinctUntilChanged(),
switchMap(canClick => {
if (!canClick) {
return empty();
}
return fromEvent(document, "click", true).pipe(
map((e: Event) => e.target),
filter((target: any) => {
if (target.tagName === "LABEL") {
const id = target.getAttribute("for");
if (id && document.getElementById(id)) {
return false;
}
}
return true;
}),
withLatestFrom(canSync$),
filter(([, canSync]) => canSync),
map(([target]): OutgoingSocketEvent => {
return ClickEvent.outgoing(getElementData(target));
})
);
})
);
}
export function getFormTogglesStream(
document: Document,
socket$: Inputs["socket$"],
option$: Inputs["option$"]
): Observable<OutgoingSocketEvent> {
const canSync$ = createTimedBooleanSwitch(
socket$.pipe(
filter(([name]) => name === IncomingSocketNames.InputToggle)
)
);
return option$.pipe(
skip(1),
pluck("ghostMode", "forms", "toggles"),
distinctUntilChanged(),
switchMap(canToggle => {
if (!canToggle) {
return empty();
}
return fromEvent(document, "change", true).pipe(
map((e: Event) => e.target || e.srcElement),
filter((elem: HTMLInputElement) => elem.tagName === "SELECT"),
withLatestFrom(canSync$),
filter(([, canSync]) => canSync),
map(([elem, canSync]: [HTMLInputElement, boolean]) => {
const data = getElementData(elem);
return FormToggleEvent.outgoing(data, {
type: elem.type,
checked: elem.checked,
value: elem.value
});
})
);
})
);
}