UNPKG

svelte-burger-menu

Version:

Simple burger menu for Svelte with CSS transformations and transitions.

878 lines (806 loc) 25.7 kB
function noop() { } function assign(tar, src) { // @ts-ignore for (const k in src) tar[k] = src[k]; return tar; } function run(fn) { return fn(); } function blank_object() { return Object.create(null); } function run_all(fns) { fns.forEach(run); } function is_function(thing) { return typeof thing === 'function'; } function safe_not_equal(a, b) { return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function'); } function is_empty(obj) { return Object.keys(obj).length === 0; } function create_slot(definition, ctx, $$scope, fn) { if (definition) { const slot_ctx = get_slot_context(definition, ctx, $$scope, fn); return definition[0](slot_ctx); } } function get_slot_context(definition, ctx, $$scope, fn) { return definition[1] && fn ? assign($$scope.ctx.slice(), definition[1](fn(ctx))) : $$scope.ctx; } function get_slot_changes(definition, $$scope, dirty, fn) { if (definition[2] && fn) { const lets = definition[2](fn(dirty)); if ($$scope.dirty === undefined) { return lets; } if (typeof lets === 'object') { const merged = []; const len = Math.max($$scope.dirty.length, lets.length); for (let i = 0; i < len; i += 1) { merged[i] = $$scope.dirty[i] | lets[i]; } return merged; } return $$scope.dirty | lets; } return $$scope.dirty; } function update_slot(slot, slot_definition, ctx, $$scope, dirty, get_slot_changes_fn, get_slot_context_fn) { const slot_changes = get_slot_changes(slot_definition, $$scope, dirty, get_slot_changes_fn); if (slot_changes) { const slot_context = get_slot_context(slot_definition, ctx, $$scope, get_slot_context_fn); slot.p(slot_context, slot_changes); } } function append(target, node) { target.appendChild(node); } function insert(target, node, anchor) { target.insertBefore(node, anchor || null); } function detach(node) { node.parentNode.removeChild(node); } function element(name) { return document.createElement(name); } function svg_element(name) { return document.createElementNS('http://www.w3.org/2000/svg', name); } function text(data) { return document.createTextNode(data); } function space() { return text(' '); } function listen(node, event, handler, options) { node.addEventListener(event, handler, options); return () => node.removeEventListener(event, handler, options); } function attr(node, attribute, value) { if (value == null) node.removeAttribute(attribute); else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value); } function children(element) { return Array.from(element.childNodes); } function set_style(node, key, value, important) { node.style.setProperty(key, value, important ? 'important' : ''); } function toggle_class(element, name, toggle) { element.classList[toggle ? 'add' : 'remove'](name); } let current_component; function set_current_component(component) { current_component = component; } const dirty_components = []; const binding_callbacks = []; const render_callbacks = []; const flush_callbacks = []; const resolved_promise = Promise.resolve(); let update_scheduled = false; function schedule_update() { if (!update_scheduled) { update_scheduled = true; resolved_promise.then(flush); } } function add_render_callback(fn) { render_callbacks.push(fn); } function add_flush_callback(fn) { flush_callbacks.push(fn); } let flushing = false; const seen_callbacks = new Set(); function flush() { if (flushing) return; flushing = true; do { // first, call beforeUpdate functions // and update components for (let i = 0; i < dirty_components.length; i += 1) { const component = dirty_components[i]; set_current_component(component); update(component.$$); } set_current_component(null); dirty_components.length = 0; while (binding_callbacks.length) binding_callbacks.pop()(); // then, once components are updated, call // afterUpdate functions. This may cause // subsequent updates... for (let i = 0; i < render_callbacks.length; i += 1) { const callback = render_callbacks[i]; if (!seen_callbacks.has(callback)) { // ...so guard against infinite loops seen_callbacks.add(callback); callback(); } } render_callbacks.length = 0; } while (dirty_components.length); while (flush_callbacks.length) { flush_callbacks.pop()(); } update_scheduled = false; flushing = false; seen_callbacks.clear(); } function update($$) { if ($$.fragment !== null) { $$.update(); run_all($$.before_update); const dirty = $$.dirty; $$.dirty = [-1]; $$.fragment && $$.fragment.p($$.ctx, dirty); $$.after_update.forEach(add_render_callback); } } const outroing = new Set(); let outros; function transition_in(block, local) { if (block && block.i) { outroing.delete(block); block.i(local); } } function transition_out(block, local, detach, callback) { if (block && block.o) { if (outroing.has(block)) return; outroing.add(block); outros.c.push(() => { outroing.delete(block); if (callback) { if (detach) block.d(1); callback(); } }); block.o(local); } } function get_spread_update(levels, updates) { const update = {}; const to_null_out = {}; const accounted_for = { $$scope: 1 }; let i = levels.length; while (i--) { const o = levels[i]; const n = updates[i]; if (n) { for (const key in o) { if (!(key in n)) to_null_out[key] = 1; } for (const key in n) { if (!accounted_for[key]) { update[key] = n[key]; accounted_for[key] = 1; } } levels[i] = n; } else { for (const key in o) { accounted_for[key] = 1; } } } for (const key in to_null_out) { if (!(key in update)) update[key] = undefined; } return update; } function get_spread_object(spread_props) { return typeof spread_props === 'object' && spread_props !== null ? spread_props : {}; } function bind(component, name, callback) { const index = component.$$.props[name]; if (index !== undefined) { component.$$.bound[index] = callback; callback(component.$$.ctx[index]); } } function create_component(block) { block && block.c(); } function mount_component(component, target, anchor) { const { fragment, on_mount, on_destroy, after_update } = component.$$; fragment && fragment.m(target, anchor); // onMount happens before the initial afterUpdate add_render_callback(() => { const new_on_destroy = on_mount.map(run).filter(is_function); if (on_destroy) { on_destroy.push(...new_on_destroy); } else { // Edge case - component was destroyed immediately, // most likely as a result of a binding initialising run_all(new_on_destroy); } component.$$.on_mount = []; }); after_update.forEach(add_render_callback); } function destroy_component(component, detaching) { const $$ = component.$$; if ($$.fragment !== null) { run_all($$.on_destroy); $$.fragment && $$.fragment.d(detaching); // TODO null out other refs, including component.$$ (but need to // preserve final state?) $$.on_destroy = $$.fragment = null; $$.ctx = []; } } function make_dirty(component, i) { if (component.$$.dirty[0] === -1) { dirty_components.push(component); schedule_update(); component.$$.dirty.fill(0); } component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31)); } function init(component, options, instance, create_fragment, not_equal, props, dirty = [-1]) { const parent_component = current_component; set_current_component(component); const prop_values = options.props || {}; const $$ = component.$$ = { fragment: null, ctx: null, // state props, update: noop, not_equal, bound: blank_object(), // lifecycle on_mount: [], on_destroy: [], before_update: [], after_update: [], context: new Map(parent_component ? parent_component.$$.context : []), // everything else callbacks: blank_object(), dirty, skip_bound: false }; let ready = false; $$.ctx = instance ? instance(component, prop_values, (i, ret, ...rest) => { const value = rest.length ? rest[0] : ret; if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) { if (!$$.skip_bound && $$.bound[i]) $$.bound[i](value); if (ready) make_dirty(component, i); } return ret; }) : []; $$.update(); ready = true; run_all($$.before_update); // `false` as a special case of no DOM component $$.fragment = create_fragment ? create_fragment($$.ctx) : false; if (options.target) { if (options.hydrate) { const nodes = children(options.target); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion $$.fragment && $$.fragment.l(nodes); nodes.forEach(detach); } else { // eslint-disable-next-line @typescript-eslint/no-non-null-assertion $$.fragment && $$.fragment.c(); } if (options.intro) transition_in(component.$$.fragment); mount_component(component, options.target, options.anchor); flush(); } set_current_component(parent_component); } /** * Base class for Svelte components. Used when dev=false. */ class SvelteComponent { $destroy() { destroy_component(this, 1); this.$destroy = noop; } $on(type, callback) { const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = [])); callbacks.push(callback); return () => { const index = callbacks.indexOf(callback); if (index !== -1) callbacks.splice(index, 1); }; } $set($$props) { if (this.$$set && !is_empty($$props)) { this.$$.skip_bound = true; this.$$set($$props); this.$$.skip_bound = false; } } } /* src\BurgerButton.svelte generated by Svelte v3.31.2 */ function add_css$1() { var style = element("style"); style.id = "svelte-hbdsxb-style"; style.textContent = "button.svelte-hbdsxb.svelte-hbdsxb{position:absolute;left:0px;top:0px;margin:5px;z-index:10;background-color:Transparent;background-repeat:no-repeat;border:none;cursor:pointer;overflow:hidden;outline:none}svg.svelte-hbdsxb line.svelte-hbdsxb{stroke:currentColor;stroke-width:3}.open.svelte-hbdsxb #top.svelte-hbdsxb{transform:translate(10px, 0px) rotate(45deg)\r\n }.open.svelte-hbdsxb #mid.svelte-hbdsxb{opacity:0\r\n }.open.svelte-hbdsxb #bot.svelte-hbdsxb{transform:translate(-15px, 8px) rotate(-45deg)\r\n }"; append(document.head, style); } function create_fragment$2(ctx) { let button; let svg; let line0; let line1; let line2; let mounted; let dispose; return { c() { button = element("button"); svg = svg_element("svg"); line0 = svg_element("line"); line1 = svg_element("line"); line2 = svg_element("line"); attr(line0, "id", "top"); attr(line0, "x1", "0"); attr(line0, "y1", "9"); attr(line0, "x2", "32"); attr(line0, "y2", "9"); set_style(line0, "transition", "transform " + /*duration*/ ctx[1] + "s ease-in-out, opacity " + /*duration*/ ctx[1] + "s ease-in-out"); attr(line0, "class", "svelte-hbdsxb"); attr(line1, "id", "mid"); attr(line1, "x1", "0"); attr(line1, "y1", "18.5"); attr(line1, "x2", "32"); attr(line1, "y2", "18.5"); set_style(line1, "transition", "transform " + /*duration*/ ctx[1] + "s ease-in-out, opacity " + /*duration*/ ctx[1] + "s ease-in-out"); attr(line1, "class", "svelte-hbdsxb"); attr(line2, "id", "bot"); attr(line2, "x1", "0"); attr(line2, "y1", "28"); attr(line2, "x2", "32"); attr(line2, "y2", "28"); set_style(line2, "transition", "transform " + /*duration*/ ctx[1] + "s ease-in-out, opacity " + /*duration*/ ctx[1] + "s ease-in-out"); attr(line2, "class", "svelte-hbdsxb"); attr(svg, "width", "32"); attr(svg, "height", "32"); attr(svg, "class", "svelte-hbdsxb"); set_style(button, "transition", "color " + /*duration*/ ctx[1] + "s ease-in-out"); set_style(button, "color", /*open*/ ctx[0] ? /*menuColor*/ ctx[3] : /*burgerColor*/ ctx[2]); attr(button, "class", "svelte-hbdsxb"); toggle_class(button, "open", /*open*/ ctx[0]); }, m(target, anchor) { insert(target, button, anchor); append(button, svg); append(svg, line0); append(svg, line1); append(svg, line2); if (!mounted) { dispose = listen(button, "click", /*click_handler*/ ctx[4]); mounted = true; } }, p(ctx, [dirty]) { if (dirty & /*duration*/ 2) { set_style(line0, "transition", "transform " + /*duration*/ ctx[1] + "s ease-in-out, opacity " + /*duration*/ ctx[1] + "s ease-in-out"); } if (dirty & /*duration*/ 2) { set_style(line1, "transition", "transform " + /*duration*/ ctx[1] + "s ease-in-out, opacity " + /*duration*/ ctx[1] + "s ease-in-out"); } if (dirty & /*duration*/ 2) { set_style(line2, "transition", "transform " + /*duration*/ ctx[1] + "s ease-in-out, opacity " + /*duration*/ ctx[1] + "s ease-in-out"); } if (dirty & /*duration*/ 2) { set_style(button, "transition", "color " + /*duration*/ ctx[1] + "s ease-in-out"); } if (dirty & /*open, menuColor, burgerColor*/ 13) { set_style(button, "color", /*open*/ ctx[0] ? /*menuColor*/ ctx[3] : /*burgerColor*/ ctx[2]); } if (dirty & /*open*/ 1) { toggle_class(button, "open", /*open*/ ctx[0]); } }, i: noop, o: noop, d(detaching) { if (detaching) detach(button); mounted = false; dispose(); } }; } function instance$2($$self, $$props, $$invalidate) { let { open } = $$props; let { duration } = $$props; let { burgerColor } = $$props; let { menuColor } = $$props; const click_handler = () => $$invalidate(0, open = !open); $$self.$$set = $$props => { if ("open" in $$props) $$invalidate(0, open = $$props.open); if ("duration" in $$props) $$invalidate(1, duration = $$props.duration); if ("burgerColor" in $$props) $$invalidate(2, burgerColor = $$props.burgerColor); if ("menuColor" in $$props) $$invalidate(3, menuColor = $$props.menuColor); }; return [open, duration, burgerColor, menuColor, click_handler]; } class BurgerButton extends SvelteComponent { constructor(options) { super(); if (!document.getElementById("svelte-hbdsxb-style")) add_css$1(); init(this, options, instance$2, create_fragment$2, safe_not_equal, { open: 0, duration: 1, burgerColor: 2, menuColor: 3 }); } } /* src\SideMenu.svelte generated by Svelte v3.31.2 */ function add_css() { var style = element("style"); style.id = "svelte-1q8nmai-style"; style.textContent = "#container.svelte-1q8nmai{position:absolute;height:100vh;top:0px;overflow-y:auto}#menu.svelte-1q8nmai{text-align:left}"; append(document.head, style); } function create_fragment$1(ctx) { let div1; let div0; let current; const default_slot_template = /*#slots*/ ctx[8].default; const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[7], null); return { c() { div1 = element("div"); div0 = element("div"); if (default_slot) default_slot.c(); attr(div0, "id", "menu"); set_style(div0, "padding", /*padding*/ ctx[3]); set_style(div0, "padding-top", /*paddingTop*/ ctx[4]); attr(div0, "class", "svelte-1q8nmai"); attr(div1, "id", "container"); set_style(div1, "background-color", /*backgroundColor*/ ctx[5]); set_style(div1, "color", /*menuColor*/ ctx[6]); set_style(div1, "width", /*width*/ ctx[2]); set_style(div1, "left", /*open*/ ctx[0] ? "0px" : "-" + /*width*/ ctx[2]); set_style(div1, "transition", "left " + /*duration*/ ctx[1] + "s ease-in-out"); attr(div1, "class", "svelte-1q8nmai"); }, m(target, anchor) { insert(target, div1, anchor); append(div1, div0); if (default_slot) { default_slot.m(div0, null); } current = true; }, p(ctx, [dirty]) { if (default_slot) { if (default_slot.p && dirty & /*$$scope*/ 128) { update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[7], dirty, null, null); } } if (!current || dirty & /*padding*/ 8) { set_style(div0, "padding", /*padding*/ ctx[3]); } if (!current || dirty & /*paddingTop*/ 16) { set_style(div0, "padding-top", /*paddingTop*/ ctx[4]); } if (!current || dirty & /*backgroundColor*/ 32) { set_style(div1, "background-color", /*backgroundColor*/ ctx[5]); } if (!current || dirty & /*menuColor*/ 64) { set_style(div1, "color", /*menuColor*/ ctx[6]); } if (!current || dirty & /*width*/ 4) { set_style(div1, "width", /*width*/ ctx[2]); } if (!current || dirty & /*open, width*/ 5) { set_style(div1, "left", /*open*/ ctx[0] ? "0px" : "-" + /*width*/ ctx[2]); } if (!current || dirty & /*duration*/ 2) { set_style(div1, "transition", "left " + /*duration*/ ctx[1] + "s ease-in-out"); } }, i(local) { if (current) return; transition_in(default_slot, local); current = true; }, o(local) { transition_out(default_slot, local); current = false; }, d(detaching) { if (detaching) detach(div1); if (default_slot) default_slot.d(detaching); } }; } function instance$1($$self, $$props, $$invalidate) { let { $$slots: slots = {}, $$scope } = $$props; let { open } = $$props; let { duration } = $$props; let { width } = $$props; let { padding } = $$props; let { paddingTop } = $$props; let { backgroundColor } = $$props; let { menuColor } = $$props; $$self.$$set = $$props => { if ("open" in $$props) $$invalidate(0, open = $$props.open); if ("duration" in $$props) $$invalidate(1, duration = $$props.duration); if ("width" in $$props) $$invalidate(2, width = $$props.width); if ("padding" in $$props) $$invalidate(3, padding = $$props.padding); if ("paddingTop" in $$props) $$invalidate(4, paddingTop = $$props.paddingTop); if ("backgroundColor" in $$props) $$invalidate(5, backgroundColor = $$props.backgroundColor); if ("menuColor" in $$props) $$invalidate(6, menuColor = $$props.menuColor); if ("$$scope" in $$props) $$invalidate(7, $$scope = $$props.$$scope); }; return [ open, duration, width, padding, paddingTop, backgroundColor, menuColor, $$scope, slots ]; } class SideMenu extends SvelteComponent { constructor(options) { super(); if (!document.getElementById("svelte-1q8nmai-style")) add_css(); init(this, options, instance$1, create_fragment$1, safe_not_equal, { open: 0, duration: 1, width: 2, padding: 3, paddingTop: 4, backgroundColor: 5, menuColor: 6 }); } } /* src\BurgerMenu.svelte generated by Svelte v3.31.2 */ function create_default_slot(ctx) { let current; const default_slot_template = /*#slots*/ ctx[10].default; const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[13], null); return { c() { if (default_slot) default_slot.c(); }, m(target, anchor) { if (default_slot) { default_slot.m(target, anchor); } current = true; }, p(ctx, dirty) { if (default_slot) { if (default_slot.p && dirty & /*$$scope*/ 8192) { update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[13], dirty, null, null); } } }, i(local) { if (current) return; transition_in(default_slot, local); current = true; }, o(local) { transition_out(default_slot, local); current = false; }, d(detaching) { if (default_slot) default_slot.d(detaching); } }; } function create_fragment(ctx) { let burgerbutton; let updating_open; let t; let sidemenu; let updating_open_1; let current; const burgerbutton_spread_levels = [/*burgerProps*/ ctx[1]]; function burgerbutton_open_binding(value) { /*burgerbutton_open_binding*/ ctx[11].call(null, value); } let burgerbutton_props = {}; for (let i = 0; i < burgerbutton_spread_levels.length; i += 1) { burgerbutton_props = assign(burgerbutton_props, burgerbutton_spread_levels[i]); } if (/*open*/ ctx[0] !== void 0) { burgerbutton_props.open = /*open*/ ctx[0]; } burgerbutton = new BurgerButton({ props: burgerbutton_props }); binding_callbacks.push(() => bind(burgerbutton, "open", burgerbutton_open_binding)); const sidemenu_spread_levels = [/*menuProps*/ ctx[2]]; function sidemenu_open_binding(value) { /*sidemenu_open_binding*/ ctx[12].call(null, value); } let sidemenu_props = { $$slots: { default: [create_default_slot] }, $$scope: { ctx } }; for (let i = 0; i < sidemenu_spread_levels.length; i += 1) { sidemenu_props = assign(sidemenu_props, sidemenu_spread_levels[i]); } if (/*open*/ ctx[0] !== void 0) { sidemenu_props.open = /*open*/ ctx[0]; } sidemenu = new SideMenu({ props: sidemenu_props }); binding_callbacks.push(() => bind(sidemenu, "open", sidemenu_open_binding)); return { c() { create_component(burgerbutton.$$.fragment); t = space(); create_component(sidemenu.$$.fragment); }, m(target, anchor) { mount_component(burgerbutton, target, anchor); insert(target, t, anchor); mount_component(sidemenu, target, anchor); current = true; }, p(ctx, [dirty]) { const burgerbutton_changes = (dirty & /*burgerProps*/ 2) ? get_spread_update(burgerbutton_spread_levels, [get_spread_object(/*burgerProps*/ ctx[1])]) : {}; if (!updating_open && dirty & /*open*/ 1) { updating_open = true; burgerbutton_changes.open = /*open*/ ctx[0]; add_flush_callback(() => updating_open = false); } burgerbutton.$set(burgerbutton_changes); const sidemenu_changes = (dirty & /*menuProps*/ 4) ? get_spread_update(sidemenu_spread_levels, [get_spread_object(/*menuProps*/ ctx[2])]) : {}; if (dirty & /*$$scope*/ 8192) { sidemenu_changes.$$scope = { dirty, ctx }; } if (!updating_open_1 && dirty & /*open*/ 1) { updating_open_1 = true; sidemenu_changes.open = /*open*/ ctx[0]; add_flush_callback(() => updating_open_1 = false); } sidemenu.$set(sidemenu_changes); }, i(local) { if (current) return; transition_in(burgerbutton.$$.fragment, local); transition_in(sidemenu.$$.fragment, local); current = true; }, o(local) { transition_out(burgerbutton.$$.fragment, local); transition_out(sidemenu.$$.fragment, local); current = false; }, d(detaching) { destroy_component(burgerbutton, detaching); if (detaching) detach(t); destroy_component(sidemenu, detaching); } }; } function instance($$self, $$props, $$invalidate) { let { $$slots: slots = {}, $$scope } = $$props; let { open = false } = $$props; let { duration = 0.4 } = $$props; let { width = "300px" } = $$props; let { padding = "25px" } = $$props; let { paddingTop = "50px" } = $$props; let { backgroundColor = "rgb(1, 0, 74)" } = $$props; let { burgerColor = "rgb(18.4, 18.4, 18.4)" } = $$props; let { menuColor = "rgb(180, 180, 180)" } = $$props; let burgerProps = { duration, burgerColor, menuColor }; let menuProps = { duration, width, padding, paddingTop, backgroundColor, menuColor }; function burgerbutton_open_binding(value) { open = value; $$invalidate(0, open); } function sidemenu_open_binding(value) { open = value; $$invalidate(0, open); } $$self.$$set = $$props => { if ("open" in $$props) $$invalidate(0, open = $$props.open); if ("duration" in $$props) $$invalidate(3, duration = $$props.duration); if ("width" in $$props) $$invalidate(4, width = $$props.width); if ("padding" in $$props) $$invalidate(5, padding = $$props.padding); if ("paddingTop" in $$props) $$invalidate(6, paddingTop = $$props.paddingTop); if ("backgroundColor" in $$props) $$invalidate(7, backgroundColor = $$props.backgroundColor); if ("burgerColor" in $$props) $$invalidate(8, burgerColor = $$props.burgerColor); if ("menuColor" in $$props) $$invalidate(9, menuColor = $$props.menuColor); if ("$$scope" in $$props) $$invalidate(13, $$scope = $$props.$$scope); }; return [ open, burgerProps, menuProps, duration, width, padding, paddingTop, backgroundColor, burgerColor, menuColor, slots, burgerbutton_open_binding, sidemenu_open_binding, $$scope ]; } class BurgerMenu extends SvelteComponent { constructor(options) { super(); init(this, options, instance, create_fragment, safe_not_equal, { open: 0, duration: 3, width: 4, padding: 5, paddingTop: 6, backgroundColor: 7, burgerColor: 8, menuColor: 9 }); } } export { BurgerMenu as default };