todomvc.svelte.hydratable.js

/* App.svelte generated by Svelte v3.38.3 */
import {
	SvelteComponent,
	append,
	attr,
	children,
	claim_element,
	claim_space,
	claim_text,
	destroy_block,
	detach,
	element,
	empty,
	init,
	insert,
	listen,
	noop,
	run_all,
	safe_not_equal,
	set_data,
	space,
	text,
	update_keyed_each
} from "svelte/internal";

function get_each_context(ctx, list, i) {
	const child_ctx = ctx.slice();
	child_ctx[16] = list[i];
	child_ctx[17] = list;
	child_ctx[18] = i;
	return child_ctx;
}

// (90:0) {#if items.length > 0}
function create_if_block(ctx) {
	let section;
	let input;
	let input_checked_value;
	let t0;
	let label;
	let t1;
	let t2;
	let ul0;
	let each_blocks = [];
	let each_1_lookup = new Map();
	let t3;
	let footer;
	let span;
	let strong;
	let t4;
	let t5;
	let t6_value = (/*numActive*/ ctx[4] === 1 ? "item" : "items") + "";
	let t6;
	let t7;
	let t8;
	let ul1;
	let li0;
	let a0;
	let t9;
	let a0_class_value;
	let t10;
	let li1;
	let a1;
	let t11;
	let a1_class_value;
	let t12;
	let li2;
	let a2;
	let t13;
	let a2_class_value;
	let t14;
	let mounted;
	let dispose;
	let each_value = /*filtered*/ ctx[3];
	const get_key = ctx => /*item*/ ctx[16].id;

	for (let i = 0; i < each_value.length; i += 1) {
		let child_ctx = get_each_context(ctx, each_value, i);
		let key = get_key(child_ctx);
		each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
	}

	let if_block = /*numCompleted*/ ctx[5] && create_if_block_1(ctx);

	return {
		c() {
			section = element("section");
			input = element("input");
			t0 = space();
			label = element("label");
			t1 = text("Mark all as complete");
			t2 = space();
			ul0 = element("ul");

			for (let i = 0; i < each_blocks.length; i += 1) {
				each_blocks[i].c();
			}

			t3 = space();
			footer = element("footer");
			span = element("span");
			strong = element("strong");
			t4 = text(/*numActive*/ ctx[4]);
			t5 = space();
			t6 = text(t6_value);
			t7 = text(" left");
			t8 = space();
			ul1 = element("ul");
			li0 = element("li");
			a0 = element("a");
			t9 = text("All");
			t10 = space();
			li1 = element("li");
			a1 = element("a");
			t11 = text("Active");
			t12 = space();
			li2 = element("li");
			a2 = element("a");
			t13 = text("Completed");
			t14 = space();
			if (if_block) if_block.c();
			this.h();
		},
		l(nodes) {
			section = claim_element(nodes, "SECTION", { class: true });
			var section_nodes = children(section);
			input = claim_element(section_nodes, "INPUT", { id: true, class: true, type: true });
			t0 = claim_space(section_nodes);
			label = claim_element(section_nodes, "LABEL", { for: true });
			var label_nodes = children(label);
			t1 = claim_text(label_nodes, "Mark all as complete");
			label_nodes.forEach(detach);
			t2 = claim_space(section_nodes);
			ul0 = claim_element(section_nodes, "UL", { class: true });
			var ul0_nodes = children(ul0);

			for (let i = 0; i < each_blocks.length; i += 1) {
				each_blocks[i].l(ul0_nodes);
			}

			ul0_nodes.forEach(detach);
			t3 = claim_space(section_nodes);
			footer = claim_element(section_nodes, "FOOTER", { class: true });
			var footer_nodes = children(footer);
			span = claim_element(footer_nodes, "SPAN", { class: true });
			var span_nodes = children(span);
			strong = claim_element(span_nodes, "STRONG", {});
			var strong_nodes = children(strong);
			t4 = claim_text(strong_nodes, /*numActive*/ ctx[4]);
			strong_nodes.forEach(detach);
			t5 = claim_space(span_nodes);
			t6 = claim_text(span_nodes, t6_value);
			t7 = claim_text(span_nodes, " left");
			span_nodes.forEach(detach);
			t8 = claim_space(footer_nodes);
			ul1 = claim_element(footer_nodes, "UL", { class: true });
			var ul1_nodes = children(ul1);
			li0 = claim_element(ul1_nodes, "LI", {});
			var li0_nodes = children(li0);
			a0 = claim_element(li0_nodes, "A", { class: true, href: true });
			var a0_nodes = children(a0);
			t9 = claim_text(a0_nodes, "All");
			a0_nodes.forEach(detach);
			li0_nodes.forEach(detach);
			t10 = claim_space(ul1_nodes);
			li1 = claim_element(ul1_nodes, "LI", {});
			var li1_nodes = children(li1);
			a1 = claim_element(li1_nodes, "A", { class: true, href: true });
			var a1_nodes = children(a1);
			t11 = claim_text(a1_nodes, "Active");
			a1_nodes.forEach(detach);
			li1_nodes.forEach(detach);
			t12 = claim_space(ul1_nodes);
			li2 = claim_element(ul1_nodes, "LI", {});
			var li2_nodes = children(li2);
			a2 = claim_element(li2_nodes, "A", { class: true, href: true });
			var a2_nodes = children(a2);
			t13 = claim_text(a2_nodes, "Completed");
			a2_nodes.forEach(detach);
			li2_nodes.forEach(detach);
			ul1_nodes.forEach(detach);
			t14 = claim_space(footer_nodes);
			if (if_block) if_block.l(footer_nodes);
			footer_nodes.forEach(detach);
			section_nodes.forEach(detach);
			this.h();
		},
		h() {
			attr(input, "id", "toggle-all");
			attr(input, "class", "toggle-all");
			attr(input, "type", "checkbox");
			input.checked = input_checked_value = /*numCompleted*/ ctx[5] === /*items*/ ctx[1].length;
			attr(label, "for", "toggle-all");
			attr(ul0, "class", "todo-list");
			attr(span, "class", "todo-count");
			attr(a0, "class", a0_class_value = /*currentFilter*/ ctx[0] === "all" ? "selected" : "");
			attr(a0, "href", "#/");
			attr(a1, "class", a1_class_value = /*currentFilter*/ ctx[0] === "active" ? "selected" : "");
			attr(a1, "href", "#/active");

			attr(a2, "class", a2_class_value = /*currentFilter*/ ctx[0] === "completed"
			? "selected"
			: "");

			attr(a2, "href", "#/completed");
			attr(ul1, "class", "filters");
			attr(footer, "class", "footer");
			attr(section, "class", "main");
		},
		m(target, anchor) {
			insert(target, section, anchor);
			append(section, input);
			append(section, t0);
			append(section, label);
			append(label, t1);
			append(section, t2);
			append(section, ul0);

			for (let i = 0; i < each_blocks.length; i += 1) {
				each_blocks[i].m(ul0, null);
			}

			append(section, t3);
			append(section, footer);
			append(footer, span);
			append(span, strong);
			append(strong, t4);
			append(span, t5);
			append(span, t6);
			append(span, t7);
			append(footer, t8);
			append(footer, ul1);
			append(ul1, li0);
			append(li0, a0);
			append(a0, t9);
			append(ul1, t10);
			append(ul1, li1);
			append(li1, a1);
			append(a1, t11);
			append(ul1, t12);
			append(ul1, li2);
			append(li2, a2);
			append(a2, t13);
			append(footer, t14);
			if (if_block) if_block.m(footer, null);

			if (!mounted) {
				dispose = listen(input, "change", /*toggleAll*/ ctx[8]);
				mounted = true;
			}
		},
		p(ctx, dirty) {
			if (dirty & /*numCompleted, items*/ 34 && input_checked_value !== (input_checked_value = /*numCompleted*/ ctx[5] === /*items*/ ctx[1].length)) {
				input.checked = input_checked_value;
			}

			if (dirty & /*filtered, editing, handleEdit, submit, remove*/ 3212) {
				each_value = /*filtered*/ ctx[3];
				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, ul0, destroy_block, create_each_block, null, get_each_context);
			}

			if (dirty & /*numActive*/ 16) set_data(t4, /*numActive*/ ctx[4]);
			if (dirty & /*numActive*/ 16 && t6_value !== (t6_value = (/*numActive*/ ctx[4] === 1 ? "item" : "items") + "")) set_data(t6, t6_value);

			if (dirty & /*currentFilter*/ 1 && a0_class_value !== (a0_class_value = /*currentFilter*/ ctx[0] === "all" ? "selected" : "")) {
				attr(a0, "class", a0_class_value);
			}

			if (dirty & /*currentFilter*/ 1 && a1_class_value !== (a1_class_value = /*currentFilter*/ ctx[0] === "active" ? "selected" : "")) {
				attr(a1, "class", a1_class_value);
			}

			if (dirty & /*currentFilter*/ 1 && a2_class_value !== (a2_class_value = /*currentFilter*/ ctx[0] === "completed"
			? "selected"
			: "")) {
				attr(a2, "class", a2_class_value);
			}

			if (/*numCompleted*/ ctx[5]) {
				if (if_block) {
					if_block.p(ctx, dirty);
				} else {
					if_block = create_if_block_1(ctx);
					if_block.c();
					if_block.m(footer, null);
				}
			} else if (if_block) {
				if_block.d(1);
				if_block = null;
			}
		},
		d(detaching) {
			if (detaching) detach(section);

			for (let i = 0; i < each_blocks.length; i += 1) {
				each_blocks[i].d();
			}

			if (if_block) if_block.d();
			mounted = false;
			dispose();
		}
	};
}

// (104:5) {#if editing === index}
function create_if_block_2(ctx) {
	let input;
	let input_value_value;
	let mounted;
	let dispose;

	return {
		c() {
			input = element("input");
			this.h();
		},
		l(nodes) {
			input = claim_element(nodes, "INPUT", { id: true, class: true });
			this.h();
		},
		h() {
			input.value = input_value_value = /*item*/ ctx[16].description;
			attr(input, "id", "edit");
			attr(input, "class", "edit");
			input.autofocus = true;
		},
		m(target, anchor) {
			insert(target, input, anchor);
			input.focus();

			if (!mounted) {
				dispose = [
					listen(input, "keydown", /*handleEdit*/ ctx[10]),
					listen(input, "blur", /*submit*/ ctx[11])
				];

				mounted = true;
			}
		},
		p(ctx, dirty) {
			if (dirty & /*filtered*/ 8 && input_value_value !== (input_value_value = /*item*/ ctx[16].description) && input.value !== input_value_value) {
				input.value = input_value_value;
			}
		},
		d(detaching) {
			if (detaching) detach(input);
			mounted = false;
			run_all(dispose);
		}
	};
}

// (96:3) {#each filtered as item, index (item.id)}
function create_each_block(key_1, ctx) {
	let li;
	let div;
	let input;
	let t0;
	let label;
	let t1_value = /*item*/ ctx[16].description + "";
	let t1;
	let t2;
	let button;
	let t3;
	let t4;
	let li_class_value;
	let mounted;
	let dispose;

	function input_change_handler() {
		/*input_change_handler*/ ctx[12].call(input, /*each_value*/ ctx[17], /*index*/ ctx[18]);
	}

	function dblclick_handler() {
		return /*dblclick_handler*/ ctx[13](/*index*/ ctx[18]);
	}

	function click_handler() {
		return /*click_handler*/ ctx[14](/*index*/ ctx[18]);
	}

	let if_block = /*editing*/ ctx[2] === /*index*/ ctx[18] && create_if_block_2(ctx);

	return {
		key: key_1,
		first: null,
		c() {
			li = element("li");
			div = element("div");
			input = element("input");
			t0 = space();
			label = element("label");
			t1 = text(t1_value);
			t2 = space();
			button = element("button");
			t3 = space();
			if (if_block) if_block.c();
			t4 = space();
			this.h();
		},
		l(nodes) {
			li = claim_element(nodes, "LI", { class: true });
			var li_nodes = children(li);
			div = claim_element(li_nodes, "DIV", { class: true });
			var div_nodes = children(div);
			input = claim_element(div_nodes, "INPUT", { class: true, type: true });
			t0 = claim_space(div_nodes);
			label = claim_element(div_nodes, "LABEL", {});
			var label_nodes = children(label);
			t1 = claim_text(label_nodes, t1_value);
			label_nodes.forEach(detach);
			t2 = claim_space(div_nodes);
			button = claim_element(div_nodes, "BUTTON", { class: true });
			children(button).forEach(detach);
			div_nodes.forEach(detach);
			t3 = claim_space(li_nodes);
			if (if_block) if_block.l(li_nodes);
			t4 = claim_space(li_nodes);
			li_nodes.forEach(detach);
			this.h();
		},
		h() {
			attr(input, "class", "toggle");
			attr(input, "type", "checkbox");
			attr(button, "class", "destroy");
			attr(div, "class", "view");

			attr(li, "class", li_class_value = "" + ((/*item*/ ctx[16].completed ? "completed" : "") + " " + (/*editing*/ ctx[2] === /*index*/ ctx[18]
			? "editing"
			: "")));

			this.first = li;
		},
		m(target, anchor) {
			insert(target, li, anchor);
			append(li, div);
			append(div, input);
			input.checked = /*item*/ ctx[16].completed;
			append(div, t0);
			append(div, label);
			append(label, t1);
			append(div, t2);
			append(div, button);
			append(li, t3);
			if (if_block) if_block.m(li, null);
			append(li, t4);

			if (!mounted) {
				dispose = [
					listen(input, "change", input_change_handler),
					listen(label, "dblclick", dblclick_handler),
					listen(button, "click", click_handler)
				];

				mounted = true;
			}
		},
		p(new_ctx, dirty) {
			ctx = new_ctx;

			if (dirty & /*filtered*/ 8) {
				input.checked = /*item*/ ctx[16].completed;
			}

			if (dirty & /*filtered*/ 8 && t1_value !== (t1_value = /*item*/ ctx[16].description + "")) set_data(t1, t1_value);

			if (/*editing*/ ctx[2] === /*index*/ ctx[18]) {
				if (if_block) {
					if_block.p(ctx, dirty);
				} else {
					if_block = create_if_block_2(ctx);
					if_block.c();
					if_block.m(li, t4);
				}
			} else if (if_block) {
				if_block.d(1);
				if_block = null;
			}

			if (dirty & /*filtered, editing*/ 12 && li_class_value !== (li_class_value = "" + ((/*item*/ ctx[16].completed ? "completed" : "") + " " + (/*editing*/ ctx[2] === /*index*/ ctx[18]
			? "editing"
			: "")))) {
				attr(li, "class", li_class_value);
			}
		},
		d(detaching) {
			if (detaching) detach(li);
			if (if_block) if_block.d();
			mounted = false;
			run_all(dispose);
		}
	};
}

// (129:3) {#if numCompleted}
function create_if_block_1(ctx) {
	let button;
	let t;
	let mounted;
	let dispose;

	return {
		c() {
			button = element("button");
			t = text("Clear completed");
			this.h();
		},
		l(nodes) {
			button = claim_element(nodes, "BUTTON", { class: true });
			var button_nodes = children(button);
			t = claim_text(button_nodes, "Clear completed");
			button_nodes.forEach(detach);
			this.h();
		},
		h() {
			attr(button, "class", "clear-completed");
		},
		m(target, anchor) {
			insert(target, button, anchor);
			append(button, t);

			if (!mounted) {
				dispose = listen(button, "click", /*clearCompleted*/ ctx[6]);
				mounted = true;
			}
		},
		p: noop,
		d(detaching) {
			if (detaching) detach(button);
			mounted = false;
			dispose();
		}
	};
}

function create_fragment(ctx) {
	let header;
	let h1;
	let t0;
	let t1;
	let input;
	let t2;
	let if_block_anchor;
	let mounted;
	let dispose;
	let if_block = /*items*/ ctx[1].length > 0 && create_if_block(ctx);

	return {
		c() {
			header = element("header");
			h1 = element("h1");
			t0 = text("todos");
			t1 = space();
			input = element("input");
			t2 = space();
			if (if_block) if_block.c();
			if_block_anchor = empty();
			this.h();
		},
		l(nodes) {
			header = claim_element(nodes, "HEADER", { class: true });
			var header_nodes = children(header);
			h1 = claim_element(header_nodes, "H1", {});
			var h1_nodes = children(h1);
			t0 = claim_text(h1_nodes, "todos");
			h1_nodes.forEach(detach);
			t1 = claim_space(header_nodes);
			input = claim_element(header_nodes, "INPUT", { class: true, placeholder: true });
			header_nodes.forEach(detach);
			t2 = claim_space(nodes);
			if (if_block) if_block.l(nodes);
			if_block_anchor = empty();
			this.h();
		},
		h() {
			attr(input, "class", "new-todo");
			attr(input, "placeholder", "What needs to be done?");
			input.autofocus = true;
			attr(header, "class", "header");
		},
		m(target, anchor) {
			insert(target, header, anchor);
			append(header, h1);
			append(h1, t0);
			append(header, t1);
			append(header, input);
			insert(target, t2, anchor);
			if (if_block) if_block.m(target, anchor);
			insert(target, if_block_anchor, anchor);
			input.focus();

			if (!mounted) {
				dispose = listen(input, "keydown", /*createNew*/ ctx[9]);
				mounted = true;
			}
		},
		p(ctx, [dirty]) {
			if (/*items*/ ctx[1].length > 0) {
				if (if_block) {
					if_block.p(ctx, dirty);
				} else {
					if_block = create_if_block(ctx);
					if_block.c();
					if_block.m(if_block_anchor.parentNode, if_block_anchor);
				}
			} else if (if_block) {
				if_block.d(1);
				if_block = null;
			}
		},
		i: noop,
		o: noop,
		d(detaching) {
			if (detaching) detach(header);
			if (detaching) detach(t2);
			if (if_block) if_block.d(detaching);
			if (detaching) detach(if_block_anchor);
			mounted = false;
			dispose();
		}
	};
}

const ENTER_KEY = 13;
const ESCAPE_KEY = 27;

function instance($$self, $$props, $$invalidate) {
	let filtered;
	let numActive;
	let numCompleted;
	let currentFilter = "all";
	let items = [];
	let editing = null;

	try {
		items = JSON.parse(localStorage.getItem("todos-svelte")) || [];
	} catch(err) {
		items = [];
	}

	const updateView = () => {
		$$invalidate(0, currentFilter = "all");

		if (window.location.hash === "#/active") {
			$$invalidate(0, currentFilter = "active");
		} else if (window.location.hash === "#/completed") {
			$$invalidate(0, currentFilter = "completed");
		}
	};

	window.addEventListener("hashchange", updateView);
	updateView();

	function clearCompleted() {
		$$invalidate(1, items = items.filter(item => !item.completed));
	}

	function remove(index) {
		$$invalidate(1, items = items.slice(0, index).concat(items.slice(index + 1)));
	}

	function toggleAll(event) {
		$$invalidate(1, items = items.map(item => ({
			id: item.id,
			description: item.description,
			completed: event.target.checked
		})));
	}

	function createNew(event) {
		if (event.which === ENTER_KEY) {
			$$invalidate(1, items = items.concat({
				id: Date.now(),
				description: event.target.value,
				completed: false
			}));

			event.target.value = "";
		}
	}

	function handleEdit(event) {
		if (event.which === ENTER_KEY) event.target.blur(); else if (event.which === ESCAPE_KEY) $$invalidate(2, editing = null);
	}

	function submit(event) {
		$$invalidate(1, items[editing].description = event.target.value, items);
		$$invalidate(2, editing = null);
	}

	function input_change_handler(each_value, index) {
		each_value[index].completed = this.checked;
		(($$invalidate(3, filtered), $$invalidate(0, currentFilter)), $$invalidate(1, items));
	}

	const dblclick_handler = index => $$invalidate(2, editing = index);
	const click_handler = index => remove(index);

	$$self.$$.update = () => {
		if ($$self.$$.dirty & /*currentFilter, items*/ 3) {
			$: $$invalidate(3, filtered = currentFilter === "all"
			? items
			: currentFilter === "completed"
				? items.filter(item => item.completed)
				: items.filter(item => !item.completed));
		}

		if ($$self.$$.dirty & /*items*/ 2) {
			$: $$invalidate(4, numActive = items.filter(item => !item.completed).length);
		}

		if ($$self.$$.dirty & /*items*/ 2) {
			$: $$invalidate(5, numCompleted = items.filter(item => item.completed).length);
		}

		if ($$self.$$.dirty & /*items*/ 2) {
			$: try {
				localStorage.setItem("todos-svelte", JSON.stringify(items));
			} catch(err) {
				
			} // noop
		}
	};

	return [
		currentFilter,
		items,
		editing,
		filtered,
		numActive,
		numCompleted,
		clearCompleted,
		remove,
		toggleAll,
		createNew,
		handleEdit,
		submit,
		input_change_handler,
		dblclick_handler,
		click_handler
	];
}

class App extends SvelteComponent {
	constructor(options) {
		super();
		init(this, options, instance, create_fragment, safe_not_equal, {});
	}
}

export default App;