Update
This commit is contained in:
a-ill
@@ -1,209 +1 @@
|
||||
|
||||
(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, B as flush, s as safe_not_equal, d as dispatch_dev, v as validate_slots, o as onMount, k as element, l as space, n as noop, p as attr_dev, m as add_location, u as append_dev, y as listen_dev, j as detach_dev, z as run_all } from './index-42a25c61.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 };
|
||||
import{S as t,i as e,a as s,b as c,u as i,s as a,f as r,g as o,n as h,h as n,l,q as d,d as u,r as p,o as b}from"./index-4348483d.js";import"../../../../../../../../../js/libraries/miscTools.js";function k(t){let e,s,i,a,b,k;return{c(){e=r("label"),s=r("input"),i=o(),a=r("span"),this.c=h,n(s,"type","checkbox"),n(a,"class","switch-span"),n(e,"class","switch")},m(r,o){c(r,e,o),l(e,s),s.checked=t[0],l(e,i),l(e,a),b||(k=[d(s,"change",t[4]),d(s,"click",t[1])],b=!0)},p(t,[e]){1&e&&(s.checked=t[0])},i:h,o:h,d(t){t&&u(e),b=!1,p(k)}}}function g(t,e,s){let{callback:c=null}=e,{checked:i=!1}=e;const a=()=>{setTimeout((()=>{null!=c?(s(0,i=!i),c()):a()}),100)};return b((()=>{})),t.$$set=t=>{"callback"in t&&s(2,c=t.callback),"checked"in t&&s(0,i=t.checked)},[i,function(){null!=c&&(s(0,i=!i),c())},c,a,function(){i=this.checked,s(0,i)}]}class m extends t{constructor(t){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>",e(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},g,k,a,{callback:2,checked:0,toggle:3},null),t&&(t.target&&c(t.target,this,t.anchor),t.props&&(this.$set(t.props),i()))}static get observedAttributes(){return["callback","checked","toggle"]}get callback(){return this.$$.ctx[2]}set callback(t){this.$$set({callback:t}),i()}get checked(){return this.$$.ctx[0]}set checked(t){this.$$set({checked:t}),i()}get toggle(){return this.$$.ctx[3]}}customElements.define("switch-component",m);export{m as default};
|
||||
|
||||
Reference in New Issue
Block a user