Skip to content

Instantly share code, notes, and snippets.

@pH200
Last active March 29, 2017 02:46
Show Gist options
  • Save pH200/4474bf7d8d2075c56317 to your computer and use it in GitHub Desktop.
Save pH200/4474bf7d8d2075c56317 to your computer and use it in GitHub Desktop.
RxJS for full screen image resizing
var gestureObservable = Rx.Observable.createWithDisposable(function (observer) {
var gesture = new MSGesture();
gesture.target = gestureTarget;
var pointerSub = Rx.Observable.fromEvent(gestureTarget, "pointerdown")
.subscribe((ev: any) => gesture.addPointer(ev.pointerId));
var gestureSub = Rx.Observable.fromEvent(gestureTarget, "MSGestureTap")
.subscribe((ev: MSGestureEvent) => observer.onNext(ev));
return new Rx.CompositeDisposable(
pointerSub,
gestureSub,
new Rx.Disposable(() => gesture.stop()));
}).publish().refCount();
var sizeObservable = Rx.Observable.combineLatest(
Rx.Observable.fromCallback(imageSizeGetter)(),
RxEx.Observable.fromEventMixins(window, "resize")
.select(() => [window.innerWidth, window.innerHeight])
.startWith([window.innerWidth, window.innerHeight]),
(t1, t2) => [t1[0], t1[1], t2[0], t2[1]]
).publish().refCount();
sizeObservable.select(imageManipulator).subscribe(function (sizeMeta) {
image.width = sizeMeta.shrinkedWidth;
image.height = sizeMeta.shrinkedHeight;
image.style.transform =
"translate(" +
((sizeMeta.pageWidth - sizeMeta.shrinkedWidth) / 2 | 0) + "px," +
((sizeMeta.pageHeight - sizeMeta.shrinkedHeight) / 2 | 0) + "px)";
WinJS.Utilities.removeClass(image, sizeMeta.expandClass);
});
gestureObservable
.combineLatest(sizeObservable.select(imageManipulator), (v1, v2) => [v1, v2])
.distinctUntilChanged((v) => v[0])
.select((v) => v[1])
.subscribe(function (sizeMeta: SizeMeta) {
if (WinJS.Utilities.hasClass(image, sizeMeta.expandClass)) {
image.width = sizeMeta.shrinkedWidth;
image.height = sizeMeta.shrinkedHeight;
image.style.transform =
"translate(" +
((sizeMeta.pageWidth - sizeMeta.shrinkedWidth) / 2 | 0) + "px," +
((sizeMeta.pageHeight - sizeMeta.shrinkedHeight) / 2 | 0) + "px)";
} else {
image.width = sizeMeta.expandedWidth;
image.height = sizeMeta.expandedHeight;
image.style.transform = "translate(0,0)";
}
WinJS.Utilities.toggleClass(image, sizeMeta.expandClass);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment