Demo Modules 006

export const loader = (canvas, scrawl) => {

    const assets = scrawl.library.asset;

    const manifest = JSON.parse(canvas.domElement.dataset.manifest);

    scrawl.importDomImage(`.${manifest.class}`);

    const result = {};

    for (const [key, value] of Object.entries(manifest)) {

        if (key === 'target') {

            result[key] = document.querySelector(value);
        }

        else if (key !== 'class') {

            result[key] = assets[value];
        }
    }
    return result;
};

export const calculateTargetPosition = (target, divisor) => {


    return function () {

        const dims = target.getBoundingClientRect();

        const dot = dims.top,
            wih = window.innerHeight,
            inViewportTop = dot / wih;

        let result = (-inViewportTop * 1000) / divisor;

        if (result < 0) result = 0;
        else if (result > 1000) result = 1000;

        return result;
    }
};

export const reducedMotionFunctions = (items) => {

    let {fixed, animated, animation, commence, halt } = items;

    if (!(fixed && animated && animation && commence)) return {};

    if (!Array.isArray(fixed)) fixed = [fixed];
    if (!Array.isArray(animated)) animated = [animated];

    if (halt == null) halt = () => {};

    return {

        reduceMotionAction: () => {

            fixed.forEach(a => a.setArtefacts({ visibility: true }));
            animated.forEach(a => a.setArtefacts({ visibility: false }));
            animation.set({ commence: halt });
        },
        noPreferenceMotionAction: () => {

            fixed.forEach(a => a.setArtefacts({ visibility: false }));
            animated.forEach(a => a.setArtefacts({ visibility: true }));
            animation.set({ commence });
        },
    }
};

export const staticPlaceholderCorrection = (img) => {

    let placeholderRatio = 0,
        width = 0,
        height = 0;

    return () => {

        const [w, h] = img.get('copyDimensions');

        if (width !== w || height !== h || !placeholderRatio) {

            width = w;
            height = h;
            placeholderRatio = h / w;

            if (placeholderRatio < 1) {

                img.set({
                    width: '100%',
                    height: `${100 * placeholderRatio}%`,
                });
            }
            else {

                img.set({
                    width: `${100 * (w / h)}%`,
                    height: '100%',
                });
            }
        }
    };
};