2023-06-15 01:41:54 +07:00
|
|
|
|
|
|
|
|
(function(l, r) { if (!l || l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (self.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(self.document);
|
2023-06-24 20:44:16 +07:00
|
|
|
import { S as SvelteElement, i as init, a as attribute_to_object, b as insert_dev, s as safe_not_equal, d as dispatch_dev, c as validate_slots, y as getContext, o as onMount, z as setContext, e as element, f as space, n as noop, j as attr_dev, g as add_location, k as append_dev, l as detach_dev, r as binding_callbacks } from './index-3e97afc8.js';
|
2023-06-15 01:41:54 +07:00
|
|
|
import { debounce } from '../../../../../../../../../js/libraries/miscTools.js';
|
|
|
|
|
|
|
|
|
|
/* src\components\pane-aligner.svelte generated by Svelte v3.52.0 */
|
|
|
|
|
const file = "src\\components\\pane-aligner.svelte";
|
|
|
|
|
|
|
|
|
|
function create_fragment(ctx) {
|
|
|
|
|
let div6;
|
|
|
|
|
let div5;
|
|
|
|
|
let div2;
|
|
|
|
|
let div0;
|
|
|
|
|
let slot0;
|
|
|
|
|
let t0;
|
|
|
|
|
let div1;
|
|
|
|
|
let slot1;
|
|
|
|
|
let t1;
|
|
|
|
|
let div3;
|
|
|
|
|
let slot2;
|
|
|
|
|
let t2;
|
|
|
|
|
let div4;
|
|
|
|
|
let slot3;
|
|
|
|
|
|
|
|
|
|
const block = {
|
|
|
|
|
c: function create() {
|
|
|
|
|
div6 = element("div");
|
|
|
|
|
div5 = element("div");
|
|
|
|
|
div2 = element("div");
|
|
|
|
|
div0 = element("div");
|
|
|
|
|
slot0 = element("slot");
|
|
|
|
|
t0 = space();
|
|
|
|
|
div1 = element("div");
|
|
|
|
|
slot1 = element("slot");
|
|
|
|
|
t1 = space();
|
|
|
|
|
div3 = element("div");
|
|
|
|
|
slot2 = element("slot");
|
|
|
|
|
t2 = space();
|
|
|
|
|
div4 = element("div");
|
|
|
|
|
slot3 = element("slot");
|
|
|
|
|
this.c = noop;
|
|
|
|
|
attr_dev(slot0, "name", "sidebar-left");
|
|
|
|
|
add_location(slot0, file, 74, 16, 2567);
|
|
|
|
|
attr_dev(div0, "id", "sidebar-left");
|
|
|
|
|
attr_dev(div0, "class", "pane");
|
|
|
|
|
add_location(div0, file, 73, 12, 2489);
|
|
|
|
|
attr_dev(slot1, "name", "sidebar-left2");
|
|
|
|
|
add_location(slot1, file, 77, 16, 2714);
|
|
|
|
|
attr_dev(div1, "id", "sidebar-left2");
|
|
|
|
|
attr_dev(div1, "class", "pane");
|
|
|
|
|
add_location(div1, file, 76, 12, 2634);
|
|
|
|
|
attr_dev(div2, "id", "sidebars-left");
|
|
|
|
|
attr_dev(div2, "class", "sidebar");
|
|
|
|
|
add_location(div2, file, 72, 8, 2435);
|
|
|
|
|
attr_dev(slot2, "name", "sidebar-right");
|
|
|
|
|
add_location(slot2, file, 81, 12, 2879);
|
|
|
|
|
attr_dev(div3, "id", "sidebar-right");
|
|
|
|
|
attr_dev(div3, "class", "pane sidebar");
|
|
|
|
|
add_location(div3, file, 80, 8, 2794);
|
|
|
|
|
attr_dev(slot3, "name", "main");
|
|
|
|
|
attr_dev(slot3, "id", "main-slot");
|
|
|
|
|
add_location(slot3, file, 84, 12, 3007);
|
|
|
|
|
attr_dev(div4, "id", "main-pane");
|
|
|
|
|
attr_dev(div4, "class", "pane");
|
|
|
|
|
add_location(div4, file, 83, 8, 2939);
|
|
|
|
|
attr_dev(div5, "class", "pane-container");
|
|
|
|
|
add_location(div5, file, 71, 4, 2397);
|
|
|
|
|
attr_dev(div6, "id", "root");
|
|
|
|
|
attr_dev(div6, "class", "pane-centering");
|
|
|
|
|
add_location(div6, file, 70, 0, 2336);
|
|
|
|
|
},
|
|
|
|
|
l: function claim(nodes) {
|
|
|
|
|
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
|
|
|
|
|
},
|
|
|
|
|
m: function mount(target, anchor) {
|
|
|
|
|
insert_dev(target, div6, anchor);
|
|
|
|
|
append_dev(div6, div5);
|
|
|
|
|
append_dev(div5, div2);
|
|
|
|
|
append_dev(div2, div0);
|
|
|
|
|
append_dev(div0, slot0);
|
|
|
|
|
/*div0_binding*/ ctx[5](div0);
|
|
|
|
|
append_dev(div2, t0);
|
|
|
|
|
append_dev(div2, div1);
|
|
|
|
|
append_dev(div1, slot1);
|
|
|
|
|
/*div1_binding*/ ctx[6](div1);
|
|
|
|
|
append_dev(div5, t1);
|
|
|
|
|
append_dev(div5, div3);
|
|
|
|
|
append_dev(div3, slot2);
|
|
|
|
|
/*div3_binding*/ ctx[7](div3);
|
|
|
|
|
append_dev(div5, t2);
|
|
|
|
|
append_dev(div5, div4);
|
|
|
|
|
append_dev(div4, slot3);
|
|
|
|
|
/*div4_binding*/ ctx[8](div4);
|
|
|
|
|
/*div6_binding*/ ctx[9](div6);
|
|
|
|
|
},
|
|
|
|
|
p: noop,
|
|
|
|
|
i: noop,
|
|
|
|
|
o: noop,
|
|
|
|
|
d: function destroy(detaching) {
|
|
|
|
|
if (detaching) detach_dev(div6);
|
|
|
|
|
/*div0_binding*/ ctx[5](null);
|
|
|
|
|
/*div1_binding*/ ctx[6](null);
|
|
|
|
|
/*div3_binding*/ ctx[7](null);
|
|
|
|
|
/*div4_binding*/ ctx[8](null);
|
|
|
|
|
/*div6_binding*/ ctx[9](null);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
dispatch_dev("SvelteRegisterBlock", {
|
|
|
|
|
block,
|
|
|
|
|
id: create_fragment.name,
|
|
|
|
|
type: "component",
|
|
|
|
|
source: "",
|
|
|
|
|
ctx
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function instance($$self, $$props, $$invalidate) {
|
|
|
|
|
let { $$slots: slots = {}, $$scope } = $$props;
|
|
|
|
|
validate_slots('pane-aligner', slots, []);
|
|
|
|
|
let root;
|
|
|
|
|
let mainPane;
|
|
|
|
|
let sidebarLeft;
|
|
|
|
|
let sidebarLeft2;
|
|
|
|
|
let sidebarRight;
|
|
|
|
|
let parentProps = getContext("alignerParent");
|
|
|
|
|
|
|
|
|
|
let switchView = parentProps != undefined
|
|
|
|
|
? getContext("alignerParent").switchView
|
|
|
|
|
: undefined;
|
|
|
|
|
|
|
|
|
|
let leftReplaced = false;
|
|
|
|
|
let left2Replaced = false;
|
|
|
|
|
let rightReplaced = false;
|
|
|
|
|
let switchViewReplaced = false;
|
|
|
|
|
|
|
|
|
|
function adjustSlotted() {
|
|
|
|
|
if (root.parentNode != null) {
|
|
|
|
|
let slotted = root.parentNode.host.childNodes;
|
|
|
|
|
|
|
|
|
|
if (slotted.length == 0) {
|
|
|
|
|
setTimeout(adjustSlotted, 50);
|
|
|
|
|
} else {
|
|
|
|
|
let changed = false;
|
|
|
|
|
let html = root.parentNode.innerHTML;
|
|
|
|
|
|
|
|
|
|
for (let item of slotted) {
|
|
|
|
|
if (item.slot == "sidebar-left" && !leftReplaced) {
|
|
|
|
|
html = html.replace("#sidebar-left{display:none}", "");
|
|
|
|
|
leftReplaced = true;
|
|
|
|
|
changed = true;
|
|
|
|
|
} else if (item.slot == "sidebar-left2" && !left2Replaced) {
|
|
|
|
|
html = html.replace("#sidebar-left2{display:none}", "");
|
|
|
|
|
left2Replaced = true;
|
|
|
|
|
changed = true;
|
|
|
|
|
} else if (item.slot == "sidebar-right" && !rightReplaced) {
|
|
|
|
|
html = html.replace("#sidebar-right{display:none;", "#sidebar-right{");
|
|
|
|
|
rightReplaced = true;
|
|
|
|
|
changed = true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (switchView != undefined && !switchViewReplaced) {
|
|
|
|
|
html = html.replace("1880px", switchView);
|
|
|
|
|
changed = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (changed) {
|
|
|
|
|
$$invalidate(0, root.parentNode.innerHTML = html, root);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.addEventListener("resize", debounce(adjustSlotted, 100));
|
|
|
|
|
|
|
|
|
|
onMount(() => {
|
|
|
|
|
adjustSlotted();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const writable_props = [];
|
|
|
|
|
|
|
|
|
|
Object.keys($$props).forEach(key => {
|
|
|
|
|
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<pane-aligner> was created with unknown prop '${key}'`);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function div0_binding($$value) {
|
|
|
|
|
binding_callbacks[$$value ? 'unshift' : 'push'](() => {
|
|
|
|
|
sidebarLeft = $$value;
|
|
|
|
|
$$invalidate(2, sidebarLeft);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function div1_binding($$value) {
|
|
|
|
|
binding_callbacks[$$value ? 'unshift' : 'push'](() => {
|
|
|
|
|
sidebarLeft2 = $$value;
|
|
|
|
|
$$invalidate(3, sidebarLeft2);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function div3_binding($$value) {
|
|
|
|
|
binding_callbacks[$$value ? 'unshift' : 'push'](() => {
|
|
|
|
|
sidebarRight = $$value;
|
|
|
|
|
$$invalidate(4, sidebarRight);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function div4_binding($$value) {
|
|
|
|
|
binding_callbacks[$$value ? 'unshift' : 'push'](() => {
|
|
|
|
|
mainPane = $$value;
|
|
|
|
|
$$invalidate(1, mainPane);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function div6_binding($$value) {
|
|
|
|
|
binding_callbacks[$$value ? 'unshift' : 'push'](() => {
|
|
|
|
|
root = $$value;
|
|
|
|
|
$$invalidate(0, root);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$$self.$capture_state = () => ({
|
|
|
|
|
getContext,
|
|
|
|
|
setContext,
|
|
|
|
|
onMount,
|
|
|
|
|
debounce,
|
|
|
|
|
root,
|
|
|
|
|
mainPane,
|
|
|
|
|
sidebarLeft,
|
|
|
|
|
sidebarLeft2,
|
|
|
|
|
sidebarRight,
|
|
|
|
|
parentProps,
|
|
|
|
|
switchView,
|
|
|
|
|
leftReplaced,
|
|
|
|
|
left2Replaced,
|
|
|
|
|
rightReplaced,
|
|
|
|
|
switchViewReplaced,
|
|
|
|
|
adjustSlotted
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
$$self.$inject_state = $$props => {
|
|
|
|
|
if ('root' in $$props) $$invalidate(0, root = $$props.root);
|
|
|
|
|
if ('mainPane' in $$props) $$invalidate(1, mainPane = $$props.mainPane);
|
|
|
|
|
if ('sidebarLeft' in $$props) $$invalidate(2, sidebarLeft = $$props.sidebarLeft);
|
|
|
|
|
if ('sidebarLeft2' in $$props) $$invalidate(3, sidebarLeft2 = $$props.sidebarLeft2);
|
|
|
|
|
if ('sidebarRight' in $$props) $$invalidate(4, sidebarRight = $$props.sidebarRight);
|
|
|
|
|
if ('parentProps' in $$props) parentProps = $$props.parentProps;
|
|
|
|
|
if ('switchView' in $$props) switchView = $$props.switchView;
|
|
|
|
|
if ('leftReplaced' in $$props) leftReplaced = $$props.leftReplaced;
|
|
|
|
|
if ('left2Replaced' in $$props) left2Replaced = $$props.left2Replaced;
|
|
|
|
|
if ('rightReplaced' in $$props) rightReplaced = $$props.rightReplaced;
|
|
|
|
|
if ('switchViewReplaced' in $$props) switchViewReplaced = $$props.switchViewReplaced;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if ($$props && "$$inject" in $$props) {
|
|
|
|
|
$$self.$inject_state($$props.$$inject);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return [
|
|
|
|
|
root,
|
|
|
|
|
mainPane,
|
|
|
|
|
sidebarLeft,
|
|
|
|
|
sidebarLeft2,
|
|
|
|
|
sidebarRight,
|
|
|
|
|
div0_binding,
|
|
|
|
|
div1_binding,
|
|
|
|
|
div3_binding,
|
|
|
|
|
div4_binding,
|
|
|
|
|
div6_binding
|
|
|
|
|
];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
class Pane_aligner extends SvelteElement {
|
|
|
|
|
constructor(options) {
|
|
|
|
|
super();
|
|
|
|
|
this.shadowRoot.innerHTML = `<style>@import '/css/common.css';.pane-container{display:block;margin-left:var(--total-margin-left,0rem)}#root{min-height:var(--min-height,auto)}#main-pane{position:relative;padding-left:var(--padding-left,0rem);padding-right:var(--padding-right,0rem);padding-top:var(--padding-top,0rem);padding-bottom:var(--padding-bottom,0rem);text-align:justify;background:var(--background,white);box-shadow:var(--box-shadow,0 0 0.314rem rgb(187, 187, 187));margin:auto;height:min-content;max-width:var(--width-main,66rem);width:var(--width-main,66rem);z-index:1;overflow-x:var(--overflow-x,hidden)}.sidebar{position:absolute}#sidebars-left{display:flex;flex-direction:column;gap:1rem;margin-left:calc(-1*var(--width-left,22.5rem) - 1rem - 4rem);width:calc(var(--width-left,22.5rem) + 4rem)}#sidebar-left,#sidebar-left2{position:relative;background-color:white;padding:2rem 2rem}#sidebar-left{display:none}#sidebar-left2{display:none}#sidebar-right{display:none;margin-left:calc(var(--width-main,66rem) + 1rem);width:var(--width-right,auto);background-color:white;padding:2rem 2rem}@media only screen and (max-width: 1880px){#main-pane{max-width:initial;width:100%;max-width:var(--width-main,66rem);padding-left:var(--padding-left-mobile,1.8rem);padding-right:var(--padding-right-mobile,1.8rem);padding-top:var(--padding-top-mobile,1.8rem);padding-bottom:var(--padding-bottom-mobile,1.8rem)}#sidebars-left,#sidebar-right{position:relative;margin:auto;margin-top:1rem;margin-bottom:1rem;max-width:var(--width-main,66rem);width:100%}.pane-container{width:95%;justify-items:center;grid-auto-flow:row;margin-left:0}}</style>`;
|
|
|
|
|
|
|
|
|
|
init(
|
|
|
|
|
this,
|
|
|
|
|
{
|
|
|
|
|
target: this.shadowRoot,
|
|
|
|
|
props: attribute_to_object(this.attributes),
|
|
|
|
|
customElement: true
|
|
|
|
|
},
|
|
|
|
|
instance,
|
|
|
|
|
create_fragment,
|
|
|
|
|
safe_not_equal,
|
|
|
|
|
{},
|
|
|
|
|
null
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
if (options) {
|
|
|
|
|
if (options.target) {
|
|
|
|
|
insert_dev(options.target, this, options.anchor);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
customElements.define("pane-aligner", Pane_aligner);
|
|
|
|
|
|
|
|
|
|
export { Pane_aligner as default };
|
