ngAfterViewInit():any {
const container = this.containerElement.nativeElement;
const draggable = this.draggableElement.nativeElement;
const mouseDown$ = Observable.fromEvent(draggable, "mousedown");
const mouseMove$ = Observable.fromEvent(container, "mousemove");
const mouseUp$ = Observable.fromEvent(container, "mouseup");
const drag$ = mouseDown$
.map(() => mouseMove$
.filter(event => boundaryCheck(event))
.takeUntil(mouseUp$))
.concatAll();
drag$.subscribe( (event: MouseEvent) => {
this.renderer.setElementStyle(draggable, 'left', event.clientX - (draggableWidth / 2) + "px");
this.renderer.setElementStyle(draggable, 'top', event.clientY - (draggableHeight / 2) + "px");
},
error => console.log('error')
);
function boundaryCheck(event) {
const leftBoundary = container.offsetLeft + (draggableWidth / 2);
const rightBoundary = container.clientWidth + container.offsetLeft - (draggableWidth / 2);
const topBoundary = container.offsetTop + (draggableHeight / 2);
const bottomBoundary = container.clientWidth + container.offsetTop - (draggableHeight / 2);
return event.clientX > leftBoundary &&
event.clientX < rightBoundary &&
event.clientY > topBoundary &&
event.clientY < bottomBoundary;
}
}
ngAfterViewInit() {
const down = Observable.fromEvent(this.down.nativeElement, 'click')
const up = Observable.fromEvent(this.up.nativeElement, 'click')
this.counter = down
.mapTo(-1)
.merge(up.mapTo(1))
.startWith(0)
.scan<number>((prev, cur) => prev+cur, 0)
down
.buffer(down.debounceTime(250))
.map(clicks => clicks.length)
.filter(length => length == 2)
.subscribe(
(val) => console.log('doubleclick', val),
(err) => console.error(err),
() => console.log('complete')
)
// down
// .bufferTime(250)
// // .filter((clicks:any[]) => clicks.length > 1)
// .subscribe((val) => {
// console.log('buff', val);
// })
}
initSearchInput() {
var keyups = Observable.fromEvent($("#search"), "keyup")
.map(event => event.target.value)
.filter(term => term.length > 2)
.debounceTime(400)
.distinctUntilChanged()
.flatMap(this._spotifyService.searchArtists);
var subscription = keyups.subscribe(result => console.log(result));
// To unsubscribe from notifications:
// subscription.unsubscribe();
// var debounced = _.debounce(text => {
// var url = `https://api.spotify.com/v1/search?type=artist&q=${text}`;
// $.getJSON(url, artists => {
// console.log(artists);
// });
// }, 400);
//
// $("#search").keyup(e => {
// var text = e.target.value;
// if (text.length < 3) return;
// debounced(text);
// });
}
ngAfterViewInit() {
var keyups = Observable.fromEvent($('#search'),'keyup')
.map(e => (Object(Object(e).target)).value)
.filter(text => text.length > 3)
.debounceTime(400)
.distinctUntilChanged()
keyups.subscribe(data => console.log(data));
// $("#search").keyup(function (e) {
// var text = e.target.value;
// var debounce = _.debounce(function (text) {
// var url = 'https://api.spotify.com/v1/search?type=artist&q=' + text;
// $.getJSON(url, function (artist) {
// console.log(artist);
// })
// }, 400)
// if (text.length < 3)
// return;
// debounce(text);
// })
}
registerWatchingSubscriptionsAfterInitializeOnInit() {
let previousTime: number;
let previousKeyCode: number;
// 次回ページ遷移入時にunsubscribeするsubscription群。
this.service.SC.disposableSubscriptions = [
// キーボード入力イベントをハンドリングする。Storeにデータを送る。
Observable.fromEvent<KeyboardEvent>(document.querySelector('sg-page4 #keyinput'), 'keyup')
// .do(event => console.log(event))
.do(event => { // keyAが押されると処理開始。
if (!this.proccessing && event.keyCode === 65 /* keyA */) {
previousTime = this.startTimer();
previousKeyCode = 64;
}
})
.do(event => { // 処理中のキー入力イベントをハンドリングする。
if (this.proccessing) {
const keyCode = event.keyCode;
if (keyCode - previousKeyCode !== 1) {
toastr.error('OOPS! TRY AGAIN.'); // alert('OOPS! TRY AGAIN.');
this.stopTimer();
} else {
const now = lodash.now();
const keyInput: KeyInput = {
code: event['code'],
keyCode: keyCode,
filterId: this.filterId,
diff: keyCode === 65 /* keyA */ ? 0 : now - previousTime
};
this.service.putKeyInput(keyInput).then(x => x.log('KeyInput')); // serviceを経由してStoreに値を送り、戻り値として得たStateをコンソールに出力する。
previousTime = now;
previousKeyCode = keyCode;
}
}
})
.do(event => { // keyZが押されると処理終了。
if (this.proccessing && event.keyCode === 90 /* keyZ */) {
this.stopTimer(true);
}
})
.subscribe(() => this.cd.markForCheck()),
// Storeからデータを受け取ってグラフを更新する。キーボード入力がトリガーとなりリアルタイムに更新される。
this.state.keyInputs$
.map(objs => objs.reverse()) // 降順を昇順に反転
.do(objs => {
if (objs.filter(obj => 'diff' in obj && 'code' in obj).length > 0) {
const diffs = objs.map(obj => obj.diff / 1000); // diffの単位をミリ秒から秒に変換。
const letters = objs.map(obj => obj.code.charAt(3)); // ex)'KeyA'から'A'を取り出す。
this.chart.load({ // c3のグラフを更新する。
columns: [
['diff_time', ...diffs]
],
categories: letters,
});
}
})
.subscribe(),
];
}
constructor() {
//Using Reactive Extensions and Observables
var keyups = Observable.fromEvent($("#artistSearch"),"keyup")
.map(e => e.target.value)
.filter(text => text.length >= 3)
.debounceTime(400)
.distinctUntilChanged();
keyups.subscribe(data => console.log(data));
//Bad implementation (using jQuery:
// var debounced = _.debounce(function (text) {
// var url = "https://api.spotify.com/v1/search?type=artist&q=" + text;
// $.getJSON(url, function (artists) {
// console.log(artists);
// });
// }, 400);
// $("search").keyup(function (e) {
// var text = e.target.value;
// if (text.length < 3)
// return;
// debounced(text);
// });
}
ngOnInit() {
const uid = this.store.currentUser.uid;
/* URLからidを取得する */
this.store.disposable = this.params$.pluck<string>('id')
.do(noteid => {
if (noteid) {
/* 保存済みnoteを呼び出す */
this.store.disposable = this.service.readNote$(noteid)
.do(note => {
this.note = note;
this.oldNote = lodash.cloneDeep(this.note);
this.cd.markForCheck();
})
.subscribe();
} else {
/* noteを新規作成 */
this.note = this.service.createNote();
this.oldNote = lodash.cloneDeep(this.note);
this.cd.markForCheck();
}
})
.subscribe();
/* キー入力がある度にnoteを保存する */
this.store.disposable = Observable.fromEvent<KeyboardEvent>(this.el.nativeElement, 'keyup')
.debounceTime(1000)
.do(() => {
this.service.writeNote(this.note, this.oldNote);
})
.subscribe();
}
constructor() {
//Observables version
var keyups = Observable.fromEvent($("#search"),"keyup");
//keyups.subscribe( data => console.log(data) );
//callback hell version without observables
/*var debounced = _.debounce(function (text) {
var url = "https://api.spotify.com/v1/search?type=artist&q=" + text;
$.getJSON(url, function (artists) {
console.log(artists);
})
}, 400);
$("#search").keyup(function (e: any) {
var text = e.target.value;
//check for input length
if (text.length < 3)
return;
debounced(text);
});*/
}
jQuery.getJSON(url, ()=> {
var path = `https://${source}/Snapshots/business${businessId}/station${stationId}/${fileName}.jpg`;
jQuery(this.elRef.nativeElement).find('.newImage').fadeOut(200);
var img = this.renderer.createElement(this.elRef.nativeElement, 'img', null);
jQuery(img).addClass('snap');
var int$ = Observable.interval(500).do(()=> {
img.src = path;
})
var $err = Observable.fromEvent(img, 'error').do(()=>{
jQuery(this.elRef.nativeElement).find('.snap').remove();
})
var load$ = Observable.fromEvent(img, 'load')
var subscription = Observable.merge(int$, $err).takeUntil(load$).delay(500).subscribe((res)=> {
subscription.unsubscribe();
})
});
constructor(){
var keyups = Observable.fromEvent($("#search"), "keyup") // subscribe to keyups.
.map(e => e.target.value) // map from DOM event to string
.filter(s => s.length >= 3) // filter for only strings >= 3
.debounceTime(400) // debounce for 400ms
.distinctUntilChanged() // call only once per input.
.flatMap(s => {
var url = "https://api.spotify.com/v1/search?type=artist&q=" + s;
var promise = $.getJSON(url); // get the promise from getJSON
return Observable.fromPromise(promise); // subscribe to the promise
}); // flatMap flattens our Observable of Observables
// into an Observable which returns the data.
// In production, the code inside flatMap should be refactored into a service class.
var subscription = keyups.subscribe(data => console.log(data));
// subscription.unsubscribe(); // to stop receiving events.
// // Create a debouncer, so the max freq we call server is 400ms.
// var debounced = _.debounce(function(text){
// var url = "https://api.spotify.com/v1/search?type=artist&q=" + text;
// $.getJSON(url, function(artists) {
// console.log(artists);
// });
// }, 400);
// $("#search").keyup(function(e){
// var text = e.target.value;
// // To not flood server.
// if(text.length < 3)
// return;
// debounced(text);
// });
}
