Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import * as Rx from "rxjs";
- import * as Snabbdom from "snabbdom-pragma";
- import { CycleDOMEvent, div, h1, hr, input, label, p, VNode } from "@cycle/dom";
- import { DOMSource, makeDOMDriver } from "@cycle/dom/lib/cjs/rxjs";
- import { run } from "@cycle/rxjs-run";
- import { Observable, from } from "rxjs";
- import { map, startWith } from "rxjs/operators";
- //想定 40個のボタン
- // 正直かなりリアクトで書いた感に欠いてる
- type Sources = {
- DOM: DOMSource;
- };
- type Sinks = {
- DOM: Observable<VNode>;
- };
- /**
- * アプリケーション
- * @param sources
- * @returns {{DOM: Observable<VNode>}}
- */
- export function cardMain(card: CardName) {
- return function main(sources: Sources): Sinks {
- // スライダー入力イベントを取得 ( Intent )
- const input$: Observable<Event> = sources.DOM.select("#" + card).events(
- "mousedown"
- );
- // 入力イベントから現在の状態ないし値を取得 ( Model )
- const value$: Observable<number> = from(input$).pipe(
- map((ev: Event) => {
- const entity = ev.target as HTMLInputElement;
- console.log(entity.value);
- return parseInt((ev.target as HTMLInputElement).value);
- })
- );
- const DEFAULT_VALUE = 50;
- const d = new Date();
- const hun = d.getSeconds();
- const state$ = value$.pipe(startWith(hun));
- // 現在の状態を画面に描画 ( View )
- const vdom$: Observable<VNode> = state$.pipe(
- map((value) => {
- console.log(card);
- return div("hoge")
- })
- );
- // 結果をドライバに出力する ( Sinks )
- return {
- DOM: vdom$
- };
- };
- }
- export function drackAndDrop(card: CardName) {
- const cardElement = document.getElementById(card);
- const x = cardElement.offsetLeft;
- const y = cardElement.offsetTop;
- const mousedown$ = Rx.fromEvent(cardElement, "mousedown");
- mousedown$.subscribe(mdown);
- //マウスが押された際の関数
- function mdown(e) {
- //drag中はdragってクラスがついてることにしておく
- cardElement.classList.add("drag");
- document.body.addEventListener("mousemove", mmove, false);
- }
- //マウスカーソルが動いたときに発火
- function mmove(e) {
- cardElement.style.top = e.pageY - y + "px";
- cardElement.style.left = e.pageX - x + "px";
- cardElement.addEventListener("mouseup", mup, false);
- document.body.addEventListener("mouseleave", mup, false);
- }
- function mup(e) {
- console.log("mup");
- //ムーブベントハンドラの消去
- document.body.removeEventListener("mousemove", mmove, false);
- cardElement.removeEventListener("mouseup", mup, false);
- cardElement.classList.remove("drag");
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement