{"version":3,"file":"move-element.js","names":[],"sources":["../resources/modern-javascript/move-element.js"],"sourcesContent":["import { Viewport } from '@d3r/js-tools';\n\n// Get all available breakpoint keys\nconst getBreakpointKeys = () => {\n    const keys = [];\n\n    Object.keys(Soho.breakpoints).forEach((key) => {\n        keys.push(key);\n    });\n\n    return keys.reverse();\n}\n\n// Get the breakpoints for the element\nconst getBreakpoints = (el) => {\n    const parentBreakpoints = [];\n    const breakpoints = [];\n\n    document.querySelectorAll(`[move-child=\"${el.getAttribute('move-parent')}\"]`).forEach((parent) => {\n        parentBreakpoints.push(parent.getAttribute('move-id'));\n    });\n\n    getBreakpointKeys().forEach((key) => {\n        if (parentBreakpoints.indexOf(key) > -1) {\n            breakpoints.push(key);\n        }\n    });\n\n    return breakpoints;\n}\n\n// Watch the viewport so we know when to move the element\nconst observeElement = (el) => {\n    const breakpoints = getBreakpoints(el);\n    const viewport = new Viewport(Soho.breakpoints);\n\n    checkBreakpoint(el, breakpoints, viewport.matches(breakpoints[0]));\n\n    viewport.matchMedia(breakpoints[0]).addListener((e) => {\n        checkBreakpoint(el, breakpoints, e.matches);\n    });\n}\n\n// Check if the breakpoint matches\nconst checkBreakpoint = (el, breakpoints, matches) => {\n    if (matches) {\n        checkMove(el, breakpoints, 1, 0);\n    } else {\n        checkMove(el, breakpoints, 0, 1);\n    }\n}\n\n// Check if we can move the element\nconst checkMove = (el, breakpoints, activeBreakpoint, nextBreakpoint) => {\n    if (el.parentNode.getAttribute('move-id') == breakpoints[activeBreakpoint]) {\n        move(el, breakpoints[nextBreakpoint]);\n    }\n}\n\n// Move the element\nconst move = (el, target) => {\n    document.querySelector(`[move-child=\"${el.getAttribute('move-parent')}\"][move-id=\"${target}\"]`).appendChild(el);\n}\n\n// Get all neccesary elements\nconst getElements = () => {\n    document.querySelectorAll('[move-parent]').forEach((el) => {\n        observeElement(el);\n    });\n}\n\nif (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', () => {\n        getElements();\n    });\n} else {\n    getElements();\n}\n"],"mappings":"iDAGA,IAAM,EAAA,UAA0B,CAC5B,IAAM,EAAO,CAAA,EAMb,OAJA,OAAO,KAAK,KAAK,WAAW,CAAC,CAAC,QAAA,SAAS,EAAQ,CAC3C,EAAK,KAAK,CAAG,CACjB,CAAC,EAEM,EAAK,QAAQ,CACxB,EAGM,EAAA,SAAkB,EAAO,CAC3B,IAAM,EAAoB,CAAA,EACpB,EAAc,CAAA,EAYpB,OAVA,SAAS,iBAAA,gBAAiC,EAAG,aAAa,aAAa,EAAA,IAAK,CAAC,CAAC,QAAA,SAAS,EAAW,CAC9F,EAAkB,KAAK,EAAO,aAAa,SAAS,CAAC,CACzD,CAAC,EAED,EAAkB,CAAC,CAAC,QAAA,SAAS,EAAQ,CAC7B,EAAkB,QAAQ,CAAG,EAAI,IACjC,EAAY,KAAK,CAAG,CAE5B,CAAC,EAEM,CACX,EAGM,EAAA,SAAkB,EAAO,CAC3B,IAAM,EAAc,EAAe,CAAE,EAC/B,EAAW,IAAI,EAAS,KAAK,WAAW,EAE9C,EAAgB,EAAI,EAAa,EAAS,QAAQ,EAAY,EAAE,CAAC,EAEjE,EAAS,WAAW,EAAY,EAAE,CAAC,CAAC,YAAA,SAAa,EAAM,CACnD,EAAgB,EAAI,EAAa,EAAE,OAAO,CAC9C,CAAC,CACL,EAGM,EAAA,SAAmB,EAAI,EAAa,EAAY,CAC9C,EACA,EAAU,EAAI,EAAa,EAAG,CAAC,EAE/B,EAAU,EAAI,EAAa,EAAG,CAAC,CAEvC,EAGM,EAAA,SAAa,EAAI,EAAa,EAAkB,EAAmB,CACjE,EAAG,WAAW,aAAa,SAAS,GAAK,EAAY,IACrD,EAAK,EAAI,EAAY,EAAe,CAE5C,EAGM,EAAA,SAAQ,EAAI,EAAW,CACzB,SAAS,cAAA,gBAA8B,EAAG,aAAa,aAAa,EAAA,eAAgB,EAAA,IAAU,CAAC,CAAC,YAAY,CAAE,CAClH,EAGM,EAAA,UAAoB,CACtB,SAAS,iBAAiB,eAAe,CAAC,CAAC,QAAA,SAAS,EAAO,CACvD,EAAe,CAAE,CACrB,CAAC,CACL,EAEI,SAAS,aAAe,UACxB,SAAS,iBAAiB,mBAAA,UAA0B,CAChD,EAAY,CAChB,CAAC,EAED,EAAY"}