Update
This commit is contained in:
a-ill
209
Server/public/js/components/switch-component.js
Normal file
209
Server/public/js/components/switch-component.js
Normal file
@@ -0,0 +1,209 @@
|
||||
|
||||
(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);
|
||||
import { S as SvelteElement, i as init, a as attribute_to_object, b as insert_dev, j as flush, s as safe_not_equal, d as dispatch_dev, v as validate_slots, o as onMount, e as element, q as space, n as noop, f as attr_dev, c as add_location, g as append_dev, u as listen_dev, h as detach_dev, A as run_all } from './index-bc9d3868.js';
|
||||
import { px2rem, getTextWidth, getCanvasFont } from '../../../../../../../../../js/libraries/miscTools.js';
|
||||
|
||||
/* src\components\switch-component.svelte generated by Svelte v3.52.0 */
|
||||
const file = "src\\components\\switch-component.svelte";
|
||||
|
||||
function create_fragment(ctx) {
|
||||
let label;
|
||||
let input;
|
||||
let t;
|
||||
let span;
|
||||
let mounted;
|
||||
let dispose;
|
||||
|
||||
const block = {
|
||||
c: function create() {
|
||||
label = element("label");
|
||||
input = element("input");
|
||||
t = space();
|
||||
span = element("span");
|
||||
this.c = noop;
|
||||
attr_dev(input, "type", "checkbox");
|
||||
add_location(input, file, 39, 4, 804);
|
||||
attr_dev(span, "class", "switch-span");
|
||||
add_location(span, file, 40, 4, 880);
|
||||
attr_dev(label, "class", "switch");
|
||||
add_location(label, file, 38, 0, 776);
|
||||
},
|
||||
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, label, anchor);
|
||||
append_dev(label, input);
|
||||
input.checked = /*checked*/ ctx[0];
|
||||
append_dev(label, t);
|
||||
append_dev(label, span);
|
||||
|
||||
if (!mounted) {
|
||||
dispose = [
|
||||
listen_dev(input, "change", /*input_change_handler*/ ctx[4]),
|
||||
listen_dev(input, "click", /*toggleClick*/ ctx[1], false, false, false)
|
||||
];
|
||||
|
||||
mounted = true;
|
||||
}
|
||||
},
|
||||
p: function update(ctx, [dirty]) {
|
||||
if (dirty & /*checked*/ 1) {
|
||||
input.checked = /*checked*/ ctx[0];
|
||||
}
|
||||
},
|
||||
i: noop,
|
||||
o: noop,
|
||||
d: function destroy(detaching) {
|
||||
if (detaching) detach_dev(label);
|
||||
mounted = false;
|
||||
run_all(dispose);
|
||||
}
|
||||
};
|
||||
|
||||
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('switch-component', slots, []);
|
||||
let { callback = null } = $$props;
|
||||
let { checked = false } = $$props;
|
||||
|
||||
const toggle = () => {
|
||||
let f = () => {
|
||||
if (callback != null) {
|
||||
$$invalidate(0, checked = !checked);
|
||||
callback();
|
||||
} else {
|
||||
toggle();
|
||||
}
|
||||
};
|
||||
|
||||
setTimeout(f, 100);
|
||||
};
|
||||
|
||||
function toggleClick() {
|
||||
if (callback != null) {
|
||||
$$invalidate(0, checked = !checked);
|
||||
callback();
|
||||
}
|
||||
}
|
||||
|
||||
// Main code
|
||||
onMount(() => {
|
||||
|
||||
});
|
||||
|
||||
const writable_props = ['callback', 'checked'];
|
||||
|
||||
Object.keys($$props).forEach(key => {
|
||||
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<switch-component> was created with unknown prop '${key}'`);
|
||||
});
|
||||
|
||||
function input_change_handler() {
|
||||
checked = this.checked;
|
||||
$$invalidate(0, checked);
|
||||
}
|
||||
|
||||
$$self.$$set = $$props => {
|
||||
if ('callback' in $$props) $$invalidate(2, callback = $$props.callback);
|
||||
if ('checked' in $$props) $$invalidate(0, checked = $$props.checked);
|
||||
};
|
||||
|
||||
$$self.$capture_state = () => ({
|
||||
onMount,
|
||||
px2rem,
|
||||
getTextWidth,
|
||||
getCanvasFont,
|
||||
callback,
|
||||
checked,
|
||||
toggle,
|
||||
toggleClick
|
||||
});
|
||||
|
||||
$$self.$inject_state = $$props => {
|
||||
if ('callback' in $$props) $$invalidate(2, callback = $$props.callback);
|
||||
if ('checked' in $$props) $$invalidate(0, checked = $$props.checked);
|
||||
};
|
||||
|
||||
if ($$props && "$$inject" in $$props) {
|
||||
$$self.$inject_state($$props.$$inject);
|
||||
}
|
||||
|
||||
return [checked, toggleClick, callback, toggle, input_change_handler];
|
||||
}
|
||||
|
||||
class Switch_component extends SvelteElement {
|
||||
constructor(options) {
|
||||
super();
|
||||
this.shadowRoot.innerHTML = `<style>@import '/css/common.css';.switch span{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;border-radius:calc(2* 1.2rem)}.switch span:before{position:absolute;content:"";height:calc(var(--height) - 0.5rem);width:calc(var(--height) - 0.5rem);left:calc(0.3rem);bottom:0.25rem;background-color:white;-webkit-transition:.4s;transition:.4s;border-radius:50%}.switch input:checked+.switch-span{background-color:var(--pink)}.switch input:hover+.switch-span{box-shadow:0 0 0 var(--pink)}.switch input:checked+.switch-span:before{-webkit-transform:translateX(calc(var(--width) - var(--height)/2 - 2*0.6rem));-ms-transform:translateX(calc(var(--width) - var(--height)/2 - 2*0.6rem));transform:translateX(calc(var(--width) - var(--height)/2 - 2*0.6rem))}.switch{position:relative;display:inline-block;width:var(--width);height:var(--height)}.switch input{position:absolute;width:var(--width);height:var(--height);opacity:0}</style>`;
|
||||
|
||||
init(
|
||||
this,
|
||||
{
|
||||
target: this.shadowRoot,
|
||||
props: attribute_to_object(this.attributes),
|
||||
customElement: true
|
||||
},
|
||||
instance,
|
||||
create_fragment,
|
||||
safe_not_equal,
|
||||
{ callback: 2, checked: 0, toggle: 3 },
|
||||
null
|
||||
);
|
||||
|
||||
if (options) {
|
||||
if (options.target) {
|
||||
insert_dev(options.target, this, options.anchor);
|
||||
}
|
||||
|
||||
if (options.props) {
|
||||
this.$set(options.props);
|
||||
flush();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
return ["callback", "checked", "toggle"];
|
||||
}
|
||||
|
||||
get callback() {
|
||||
return this.$$.ctx[2];
|
||||
}
|
||||
|
||||
set callback(callback) {
|
||||
this.$$set({ callback });
|
||||
flush();
|
||||
}
|
||||
|
||||
get checked() {
|
||||
return this.$$.ctx[0];
|
||||
}
|
||||
|
||||
set checked(checked) {
|
||||
this.$$set({ checked });
|
||||
flush();
|
||||
}
|
||||
|
||||
get toggle() {
|
||||
return this.$$.ctx[3];
|
||||
}
|
||||
|
||||
set toggle(value) {
|
||||
throw new Error("<switch-component>: Cannot set read-only property 'toggle'");
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("switch-component", Switch_component);
|
||||
|
||||
export { Switch_component as default };
|
||||
Reference in New Issue
Block a user