hyperapp-is 0.1.50 → 0.2.1

package/dist/hyperapp-is/animationView/carousel.js

@@ -1,461 +0,0 @@
-// hyperapp-is / animationView / carousel.ts
-import { getValue, setValue, createLocalKey } from "../core/state";
-import { el, deleteKeys } from "../core/component";
-import { RAFTask } from "../animation/raf";
-// ---------- ---------- ---------- ---------- ----------
-// vnodes
-// ---------- ---------- ---------- ---------- ----------
-const div = el("div");
-const ul = el("ul");
-const li = el("li");
-const button = el("button");
-// ---------- ---------- ---------- ---------- ----------
-// Carousel Component
-// ---------- ---------- ---------- ---------- ----------
-/**
- * Carousel Component
- */
-export const Carousel = function (props, children) {
-    var _a;
-    const { state, id, keyNames, controlButton, controlBar, skipSpeedRate } = props;
-    // get task
-    const task = getValue(state, keyNames, [])
-        .find(task => task.id === id);
-    // get carouselState and carouselController
-    const param = (_a = task === null || task === void 0 ? void 0 : task.extension) === null || _a === void 0 ? void 0 : _a.carouselState;
-    const controller = task === null || task === void 0 ? void 0 : task.extension.carouselController;
-    // get index
-    const index = (param === null || param === void 0 ? void 0 : param.reportPageIndex)
-        ? getValue(state, param.reportPageIndex, 0)
-        : getValue(state, [createLocalKey(id), "reportPageIndex"], 0);
-    // children
-    const items = Array.isArray(children) ? children : [children];
-    // ---------- ---------- ----------
-    // action_mouseenter
-    // ---------- ---------- ----------
-    const action_mouseenter = (state) => {
-        const task = getValue(state, keyNames, [])
-            .find(task => task.id === id);
-        if (!task)
-            return state;
-        // 一時停止
-        task.paused = true;
-        return state;
-    };
-    // ---------- ---------- ----------
-    // action_mouseleave
-    // ---------- ---------- ----------
-    const action_mouseleave = (state) => {
-        const task = getValue(state, keyNames, [])
-            .find(task => task.id === id);
-        if (!task)
-            return state;
-        // 一時停止解除
-        task.paused = false;
-        return state;
-    };
-    // ---------- ---------- ----------
-    // action_prevPage
-    // ---------- ---------- ----------
-    const action_prevPage = (state) => {
-        const task = getValue(state, keyNames, [])
-            .find(task => task.id === id);
-        if (!task)
-            return state;
-        controller.step(task, -1, skipSpeedRate !== null && skipSpeedRate !== void 0 ? skipSpeedRate : 0.3);
-        return state;
-    };
-    // ---------- ---------- ----------
-    // action_nextPage
-    // ---------- ---------- ----------
-    const action_nextPage = (state) => {
-        const task = getValue(state, keyNames, [])
-            .find(task => task.id === id);
-        if (!task)
-            return state;
-        controller.step(task, 1, skipSpeedRate !== null && skipSpeedRate !== void 0 ? skipSpeedRate : 0.3);
-        return state;
-    };
-    // ---------- ---------- ----------
-    // action_controlBarClick
-    // ---------- ---------- ----------
-    const action_ControlBarClick = (state, absoluteIndex) => {
-        var _a;
-        const task = getValue(state, keyNames, [])
-            .find(task => task.id === id);
-        if (!task)
-            return state;
-        const param = (_a = task.extension) === null || _a === void 0 ? void 0 : _a.carouselState;
-        if (!param)
-            return state;
-        controller.moveTo(task, absoluteIndex, skipSpeedRate !== null && skipSpeedRate !== void 0 ? skipSpeedRate : 0.3);
-        return state;
-    };
-    // ---------- ---------- ----------
-    // VNode
-    // ---------- ---------- ----------
-    return div({
-        ...deleteKeys(props, "state", "keyNames")
-    }, ul({
-        onmouseenter: action_mouseenter,
-        onmouseleave: action_mouseleave
-    }, items.map(item => li({}, item))), 
-    // controlButton, controlBar
-    (controlButton || controlBar) ? div({}, controlButton
-        ? button({ onclick: action_prevPage }, "<")
-        : null, controlBar
-        ? ul({}, items.map((_, i) => li({
-            class: i === index && "select",
-            onclick: [action_ControlBarClick, i]
-        }, 
-        // param が取れない場合、選択なしにする
-        param
-            ? i === index ? "◉" : "・"
-            : "・")))
-        : null, controlButton
-        ? button({ onclick: action_nextPage }, ">")
-        : null) : null);
-};
-// ---------- ---------- ---------- ---------- ----------
-// effect_InitCarousel
-// ---------- ---------- ---------- ---------- ----------
-/**
- * カルーセルを初期化し起動するエフェクト
- */
-export const effect_InitCarousel = function (keyNames, carouselState) {
-    return (dispatch) => {
-        // どうしても画像ロードを待つ必要があるため、非同期処理に閉じ込めます
-        (async () => {
-            var _a, _b;
-            // CarouselState, easing
-            const param = carouselState;
-            const easing = (_a = param.easing) !== null && _a !== void 0 ? _a : ((t) => t);
-            // check dom
-            const div = document.getElementById(param.id);
-            if (!div)
-                return;
-            const ul = div.querySelector("ul");
-            if (!ul)
-                return;
-            // cloneNode className
-            const cloneClass = `${param.id}_clone`;
-            // clear cloneNodes
-            const children = Array.from(ul.children)
-                .filter((li, i) => {
-                if (li.classList.contains(cloneClass)) {
-                    li.remove();
-                    return false;
-                }
-                li.setAttribute("absoluteIndex", `${i}`); // もう面倒だから、DOMに絶対値情報保存する
-                return true;
-            });
-            if (!children || children.length === 0)
-                return;
-            // 画像読み込み待機
-            const waitImages = async () => {
-                const images = Array.from(ul.querySelectorAll("img"));
-                return Promise.all(images.map(img => {
-                    if (img.complete)
-                        return Promise.resolve();
-                    return new Promise(resolve => {
-                        img.onload = () => resolve();
-                        img.onerror = () => resolve();
-                    });
-                }));
-            };
-            await waitImages();
-            // get widths (幅 + Margin)
-            const widths = children.map(child => {
-                const width = child.getBoundingClientRect().width;
-                const style = getComputedStyle(child);
-                const marginLeft = parseFloat(style.marginLeft);
-                const marginRight = parseFloat(style.marginRight);
-                return width + marginLeft + marginRight;
-            });
-            // get ul gap
-            const ulStyle = getComputedStyle(ul);
-            const gap = parseFloat(ulStyle.columnGap || ulStyle.gap || "0");
-            const ulGap = isNaN(gap) ? 0 : gap;
-            // reportIndex path
-            const reportPageIndex = (_b = param.reportPageIndex) !== null && _b !== void 0 ? _b : [createLocalKey(param.id), "reportPageIndex"];
-            // dispatch
-            dispatch((state) => {
-                // ---------- ---------- ----------
-                // CarouselPrivateState
-                // ---------- ---------- ----------
-                const privateParam = {
-                    ul,
-                    step: 0,
-                    index: 0,
-                    startOffset: 0,
-                    targetOffset: 0,
-                    currentOffset: 0,
-                    cloneNodes: []
-                };
-                // ---------- ---------- ----------
-                // function getCurrentState
-                // ---------- ---------- ----------
-                /**
-                 * 相対、絶対インデックスの取得
-                 * 先頭オフセット値の取得
-                 * 入れ替えが必要な DOM の数を取得
-                 */
-                const getCurrentState = () => {
-                    let relativeIndex = -1;
-                    let absoluteIndex = -1;
-                    let offset = 0;
-                    for (let i = 0, width = offset; i < privateParam.ul.children.length; i++) {
-                        const li = privateParam.ul.children[i];
-                        const index = Number(li.getAttribute("absoluteIndex"));
-                        if (Math.abs(privateParam.currentOffset) >= width) {
-                            relativeIndex = i;
-                            absoluteIndex = index;
-                            offset = privateParam.currentOffset + width;
-                        }
-                        // next
-                        width += widths[absoluteIndex];
-                        if (i !== 0)
-                            width += ulGap;
-                    }
-                    return {
-                        relativeIndex: relativeIndex,
-                        absoluteIndex: absoluteIndex,
-                        offset: offset,
-                        toggleCount: privateParam.step < 0
-                            ? Math.abs(privateParam.step) - relativeIndex
-                            : relativeIndex
-                    };
-                }; // end getCurrentState
-                // ---------- ---------- ----------
-                // controller
-                // ---------- ---------- ----------
-                const controller = {
-                    // ---------- ---------- ----------
-                    // controller.step
-                    // ---------- ---------- ----------
-                    step: (rafTask, delta, skipSpeedRate) => {
-                        // 一時停止
-                        const paused = rafTask.paused;
-                        rafTask.paused = true;
-                        // result
-                        return new Promise((resolve, reject) => {
-                            // currentState
-                            const currentState = getCurrentState();
-                            // delete cloneNodes
-                            privateParam.cloneNodes.forEach(node => node.remove());
-                            privateParam.cloneNodes = [];
-                            // DOM の入れ替え
-                            for (let i = 0; i < currentState.toggleCount; i++) {
-                                const node = privateParam.step < 0
-                                    ? privateParam.ul.lastChild
-                                    : privateParam.ul.firstChild;
-                                if (node) {
-                                    if (privateParam.step < 0) {
-                                        privateParam.ul.insertBefore(node, privateParam.ul.firstChild);
-                                    }
-                                    else {
-                                        privateParam.ul.appendChild(node);
-                                    }
-                                }
-                            }
-                            // create cloneNodes
-                            let cloneWidth = 0;
-                            for (let i = 0; i < Math.abs(delta); i++) {
-                                const index = delta < 0
-                                    ? privateParam.ul.children.length - 1 - i
-                                    : i;
-                                const cloneNode = privateParam.ul.children[index].cloneNode(true);
-                                cloneNode.classList.add(cloneClass);
-                                privateParam.cloneNodes.push(cloneNode);
-                                if (delta < 0) {
-                                    privateParam.ul.insertBefore(cloneNode, privateParam.ul.firstChild);
-                                }
-                                else {
-                                    privateParam.ul.appendChild(cloneNode);
-                                }
-                                // get width
-                                const absoluteIndex = Number(cloneNode.getAttribute("absoluteIndex"));
-                                cloneWidth += widths[absoluteIndex];
-                                // add gap
-                                if (i !== 0)
-                                    cloneWidth += ulGap;
-                            } // end create cloneNodes
-                            // privateParamの調整
-                            privateParam.step = delta;
-                            privateParam.index = ((currentState.absoluteIndex + delta) % children.length + children.length) % children.length;
-                            privateParam.startOffset = delta < 0
-                                ? currentState.offset - cloneWidth
-                                : currentState.offset;
-                            privateParam.currentOffset = privateParam.startOffset;
-                            privateParam.targetOffset = delta < 0
-                                ? 0
-                                : -cloneWidth;
-                            // スタイル適用
-                            privateParam.ul.style.transform = `translateX(${privateParam.currentOffset}px)`;
-                            // newTask
-                            const newTask = new RAFTask({
-                                id: `${param.id}_step`,
-                                duration: rafTask.duration * (skipSpeedRate !== null && skipSpeedRate !== void 0 ? skipSpeedRate : 0.1),
-                                action,
-                                finish: (state, rafTask) => {
-                                    rafTask.paused = paused;
-                                    const res = finish(state, rafTask);
-                                    const newState = Array.isArray(res)
-                                        ? res[0]
-                                        : res;
-                                    // 一時停止状況の復元
-                                    rafTask.paused = paused;
-                                    resolve(rafTask);
-                                    return newState;
-                                },
-                            }); // end newTask
-                            // dispatch
-                            requestAnimationFrame(() => dispatch((state) => {
-                                const tasks = getValue(state, keyNames, [])
-                                    .filter(task => task.id !== `${param.id}_step` && task.id !== param.id)
-                                    .concat(newTask);
-                                return setValue(state, keyNames, tasks);
-                            }));
-                        });
-                    }, // end controller.step
-                    // ---------- ---------- ----------
-                    // controller.moveTo
-                    // ---------- ---------- ----------
-                    moveTo: (rafTask, index, skipSpeedRate) => {
-                        return controller.step(rafTask, index - getCurrentState().absoluteIndex, skipSpeedRate);
-                    }
-                }; // end controller
-                // ---------- ---------- ----------
-                // task_action
-                // ---------- ---------- ----------
-                const action = (state, rafTask) => {
-                    if (!privateParam.ul.isConnected)
-                        return state;
-                    if (rafTask.paused)
-                        return state;
-                    // privateParam.currentOffset の調整
-                    privateParam.currentOffset = privateParam.startOffset
-                        + (privateParam.targetOffset - privateParam.startOffset)
-                            * easing(rafTask.progress);
-                    // style 適用
-                    privateParam.ul.style.transform = `translateX(${privateParam.currentOffset}px)`;
-                    return [state, (dispatch) => {
-                            // action 割り込み
-                            const fn = param.action;
-                            if (fn)
-                                requestAnimationFrame(() => dispatch((state) => [fn, rafTask]));
-                        }];
-                };
-                // ---------- ---------- ----------
-                // task_finish
-                // ---------- ---------- ----------
-                const finish = (state, rafTask) => {
-                    if (!privateParam.ul.isConnected)
-                        return state;
-                    // set reportPageIndex
-                    let newState = setValue(state, reportPageIndex, privateParam.index);
-                    // delete cloneNodes
-                    privateParam.cloneNodes.forEach(node => node.remove());
-                    privateParam.cloneNodes = [];
-                    // DOM の入れ替え
-                    for (let i = 0; i < Math.abs(privateParam.step); i++) {
-                        const node = privateParam.step < 0
-                            ? privateParam.ul.lastChild
-                            : privateParam.ul.firstChild;
-                        if (privateParam.step < 0) {
-                            privateParam.ul.insertBefore(node, privateParam.ul.firstChild);
-                        }
-                        else {
-                            privateParam.ul.appendChild(node);
-                        }
-                    }
-                    // set index
-                    privateParam.step = param.step;
-                    privateParam.index = ((privateParam.index + privateParam.step) % children.length + children.length) % children.length;
-                    // add cloneNodes
-                    let cloneWidth = 0;
-                    for (let i = 0; i < Math.abs(privateParam.step); i++) {
-                        const index = privateParam.step < 0
-                            ? privateParam.ul.children.length - 1 - i
-                            : i;
-                        const cloneNode = privateParam.ul.children[index].cloneNode(true);
-                        cloneNode.classList.add(cloneClass);
-                        privateParam.cloneNodes.push(cloneNode);
-                        if (privateParam.step < 0) {
-                            privateParam.ul.insertBefore(cloneNode, privateParam.ul.firstChild);
-                        }
-                        else {
-                            privateParam.ul.appendChild(cloneNode);
-                        }
-                        // get width
-                        const absoluteIndex = Number(cloneNode.getAttribute("absoluteIndex"));
-                        cloneWidth += widths[absoluteIndex];
-                        // add gap
-                        if (i !== 0)
-                            cloneWidth += ulGap;
-                    }
-                    // privateParam の調整
-                    privateParam.startOffset = privateParam.step < 0
-                        ? -cloneWidth
-                        : 0;
-                    privateParam.targetOffset = privateParam.step < 0
-                        ? 0
-                        : -cloneWidth;
-                    privateParam.currentOffset = privateParam.startOffset;
-                    // set dom
-                    privateParam.ul.style.transform = `translateX(${privateParam.currentOffset}px)`;
-                    newState = setValue(newState, keyNames, getValue(newState, keyNames, [])
-                        .filter(task => task.id !== param.id)
-                        .concat(createTask()));
-                    return [newState, (dispatch) => {
-                            // finish 割り込み
-                            const fn = param.finish;
-                            if (fn)
-                                requestAnimationFrame(() => dispatch((state) => [fn, rafTask]));
-                        }];
-                };
-                // ---------- ---------- ----------
-                // createTask
-                // ---------- ---------- ----------
-                const createTask = () => {
-                    var _a, _b, _c;
-                    return new RAFTask({
-                        id: param.id,
-                        groupID: param.groupID,
-                        duration: (_a = param.duration) !== null && _a !== void 0 ? _a : 1000,
-                        delay: (_b = param.delay) !== null && _b !== void 0 ? _b : 2000,
-                        action,
-                        finish,
-                        priority: (_c = param.priority) !== null && _c !== void 0 ? _c : 0,
-                        extension: {
-                            ...param.extension,
-                            carouselState: param,
-                            carouselController: controller
-                        }
-                    });
-                }; // end createTask
-                // ---------- ---------- ----------
-                // startTask
-                // ---------- ---------- ----------
-                const startTask = new RAFTask({
-                    id: param.id,
-                    groupID: param.groupID,
-                    duration: 0,
-                    delay: 0,
-                    action: (state, rafTask) => state,
-                    finish,
-                    extension: {
-                        carouselState: param,
-                        carouselController: controller
-                    }
-                });
-                // ---------- ---------- ----------
-                // result
-                // ---------- ---------- ----------
-                return setValue(state, keyNames, getValue(state, keyNames, [])
-                    .filter(task => task.id !== param.id)
-                    .concat(startTask));
-            }); // end dispatch
-        })(); // end sync
-    }; // end result
-}; // end effect

package/dist/hyperapp-is/core/component.d.ts

@@ -1,65 +0,0 @@
-import { VNode, Effect } from "hyperapp";
-import { Keys_String, Keys_ArrayString } from "./state";
-/**
- * h 関数のラッパー
- * hが競合する可能性があるので作成した
- */
-export declare const el: <S = any>(tag: string) => (props?: {
-    [key: string]: any;
-}, ...children: any[]) => VNode<S>;
-/**
- * アクションを結合して結果を返す
- */
-export declare const concatAction: <S, E>(action: undefined | ((state: S, e: E) => S | [S, Effect<S>]), newState: S, e: E) => S | [S, Effect<S>];
-/**
- * props から classList を取得
- */
-export declare const getClassList: (props: {
-    [key: string]: any;
-}) => string[];
-/**
- * props から不要なキーを削除する
- */
-export declare const deleteKeys: <T extends Record<string, any>>(props: T, ...keys: (keyof T)[]) => Omit<T, (typeof keys)[number]>;
-/**
- * ステート内の文字とmatchした時、VNodeを返す
- */
-export declare const Route: <S>(props: {
-    state: S;
-    keyNames: Keys_String;
-    match: string;
-}, children: any) => VNode<S> | null;
-/**
- * クリックで、クラス名 select をトグルするボタン
- */
-export declare const SelectButton: <S>(props: {
-    state: S;
-    keyNames: Keys_ArrayString;
-    id: string;
-    reverse?: boolean;
-    [key: string]: any;
-}, children: any) => VNode<S>;
-/**
- * クリックで、クラス名 select を排他的に選択するボタン
- */
-export declare const OptionButton: <S>(props: {
-    state: S;
-    keyNames: Keys_String;
-    id: string;
-    reverse?: boolean;
-    [key: string]: any;
-}, children: any) => VNode<S>;
-/**
- * 履歴付きインプット
- * localState: { histories: string[] }
- *
- * @returns {VNode<S>[]} - [HTMLInputElement, HTMLDataListElement]
- */
-export declare const HistoryInput: <S>(props: {
-    state: S;
-    id: string;
-    keyNames: Keys_String;
-    historyLimit?: number;
-    afterRender?: (state: S, localState: Record<string, any>, vnode: VNode<S>[]) => VNode<S>[];
-    [key: string]: any;
-}) => VNode<S>[];