From b2c3eb7ba876c84d6bad1ba7804716a1fece6955 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 4 Mar 2019 19:28:15 -0500
Subject: [PATCH] document class directive

---
 .../app-a/App.svelte                          | 71 ++++++++++++++++++-
 .../app-b/App.svelte                          | 71 ++++++++++++++++++-
 .../02-adding-parameters-to-actions/text.md   |  2 +-
 .../13-classes/01-classes/app-a/App.svelte    | 29 ++++++++
 .../13-classes/01-classes/app-b/App.svelte    | 29 ++++++++
 .../tutorial/13-classes/01-classes/text.md    | 23 ++++++
 .../02-class-shorthand/app-a/App.svelte       | 18 +++++
 .../02-class-shorthand/app-b/App.svelte       | 18 +++++
 .../13-classes/02-class-shorthand/text.md     | 19 +++++
 site/content/tutorial/13-classes/meta.json    |  3 +
 site/content/tutorial/99-todo/99-todo/text.md |  4 +-
 site/package-lock.json                        |  2 +-
 12 files changed, 283 insertions(+), 6 deletions(-)
 create mode 100644 site/content/tutorial/13-classes/01-classes/app-a/App.svelte
 create mode 100644 site/content/tutorial/13-classes/01-classes/app-b/App.svelte
 create mode 100644 site/content/tutorial/13-classes/01-classes/text.md
 create mode 100644 site/content/tutorial/13-classes/02-class-shorthand/app-a/App.svelte
 create mode 100644 site/content/tutorial/13-classes/02-class-shorthand/app-b/App.svelte
 create mode 100644 site/content/tutorial/13-classes/02-class-shorthand/text.md
 create mode 100644 site/content/tutorial/13-classes/meta.json

diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
index 30404ce4c5..0bd9d56113 100644
--- a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
+++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-a/App.svelte
@@ -1 +1,70 @@
-TODO
\ No newline at end of file
+<script>
+	let language = "english";
+
+	const translations = {
+		english: {
+			tooltip: "Switch Languages",
+		},
+		latin: {
+			tooltip: "Itchsway Anguageslay",
+		}
+	};
+
+	function tooltip(node, text) {
+		const tooltip = document.createElement('div');
+		tooltip.textContent = text;
+
+		Object.assign(tooltip.style, {
+			position: 'absolute',
+			background: 'black',
+			color: 'white',
+			padding: '0.5em 1em',
+			fontSize: '12px',
+			pointerEvents: 'none',
+			transform: 'translate(5px, -50%)',
+			borderRadius: '2px',
+			transition: 'opacity 0.4s'
+		});
+
+		function position() {
+			const { top, right, bottom } = node.getBoundingClientRect();
+			tooltip.style.top = `${(top + bottom) / 2}px`;
+			tooltip.style.left = `${right}px`;
+		}
+
+		function append() {
+			document.body.appendChild(tooltip);
+			tooltip.style.opacity = 0;
+			setTimeout(() => tooltip.style.opacity = 1);
+			position();
+		}
+
+		function remove() {
+			tooltip.remove();
+		}
+
+		node.addEventListener('mouseenter', append);
+		node.addEventListener('mouseleave', remove);
+
+		return {
+			update(text) {
+				tooltip.textContent = text;
+				position();
+			},
+
+			destroy() {
+				tooltip.remove();
+				node.removeEventListener('mouseenter', append);
+				node.removeEventListener('mouseleave', remove);
+			}
+		};
+	}
+
+	function toggleLanguage() {
+		language = language === 'english' ? 'latin' : 'english'
+	}
+</script>
+
+<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
+	{language}
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
index 30404ce4c5..0bd9d56113 100644
--- a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
+++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/app-b/App.svelte
@@ -1 +1,70 @@
-TODO
\ No newline at end of file
+<script>
+	let language = "english";
+
+	const translations = {
+		english: {
+			tooltip: "Switch Languages",
+		},
+		latin: {
+			tooltip: "Itchsway Anguageslay",
+		}
+	};
+
+	function tooltip(node, text) {
+		const tooltip = document.createElement('div');
+		tooltip.textContent = text;
+
+		Object.assign(tooltip.style, {
+			position: 'absolute',
+			background: 'black',
+			color: 'white',
+			padding: '0.5em 1em',
+			fontSize: '12px',
+			pointerEvents: 'none',
+			transform: 'translate(5px, -50%)',
+			borderRadius: '2px',
+			transition: 'opacity 0.4s'
+		});
+
+		function position() {
+			const { top, right, bottom } = node.getBoundingClientRect();
+			tooltip.style.top = `${(top + bottom) / 2}px`;
+			tooltip.style.left = `${right}px`;
+		}
+
+		function append() {
+			document.body.appendChild(tooltip);
+			tooltip.style.opacity = 0;
+			setTimeout(() => tooltip.style.opacity = 1);
+			position();
+		}
+
+		function remove() {
+			tooltip.remove();
+		}
+
+		node.addEventListener('mouseenter', append);
+		node.addEventListener('mouseleave', remove);
+
+		return {
+			update(text) {
+				tooltip.textContent = text;
+				position();
+			},
+
+			destroy() {
+				tooltip.remove();
+				node.removeEventListener('mouseenter', append);
+				node.removeEventListener('mouseleave', remove);
+			}
+		};
+	}
+
+	function toggleLanguage() {
+		language = language === 'english' ? 'latin' : 'english'
+	}
+</script>
+
+<button on:click={toggleLanguage} use:tooltip={translations[language].tooltip}>
+	{language}
+</button>
\ No newline at end of file
diff --git a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md
index 5631bebbc5..e6262b2f6c 100644
--- a/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md
+++ b/site/content/tutorial/12-actions/02-adding-parameters-to-actions/text.md
@@ -2,4 +2,4 @@
 title: Adding parameters
 ---
 
-TODO example with Prism highlighting
\ No newline at end of file
+TODO come up with a better example
\ No newline at end of file
diff --git a/site/content/tutorial/13-classes/01-classes/app-a/App.svelte b/site/content/tutorial/13-classes/01-classes/app-a/App.svelte
new file mode 100644
index 0000000000..68cb642463
--- /dev/null
+++ b/site/content/tutorial/13-classes/01-classes/app-a/App.svelte
@@ -0,0 +1,29 @@
+<script>
+	let current = 'foo';
+</script>
+
+<style>
+	button {
+		display: block;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
+
+<button
+	class="{current === 'foo' ? 'active' : ''}"
+	on:click="{() => current = 'foo'}"
+>foo</button>
+
+<button
+	class="{current === 'bar' ? 'active' : ''}"
+	on:click="{() => current = 'bar'}"
+>bar</button>
+
+<button
+	class="{current === 'baz' ? 'active' : ''}"
+	on:click="{() => current = 'baz'}"
+>baz</button>
\ No newline at end of file
diff --git a/site/content/tutorial/13-classes/01-classes/app-b/App.svelte b/site/content/tutorial/13-classes/01-classes/app-b/App.svelte
new file mode 100644
index 0000000000..4da386991d
--- /dev/null
+++ b/site/content/tutorial/13-classes/01-classes/app-b/App.svelte
@@ -0,0 +1,29 @@
+<script>
+	let current = 'foo';
+</script>
+
+<style>
+	button {
+		display: block;
+	}
+
+	.active {
+		background-color: #ff3e00;
+		color: white;
+	}
+</style>
+
+<button
+	class:active="{current === 'foo'}"
+	on:click="{() => current = 'foo'}"
+>foo</button>
+
+<button
+	class:active="{current === 'bar'}"
+	on:click="{() => current = 'bar'}"
+>bar</button>
+
+<button
+	class:active="{current === 'baz'}"
+	on:click="{() => current = 'baz'}"
+>baz</button>
\ No newline at end of file
diff --git a/site/content/tutorial/13-classes/01-classes/text.md b/site/content/tutorial/13-classes/01-classes/text.md
new file mode 100644
index 0000000000..7ad3045399
--- /dev/null
+++ b/site/content/tutorial/13-classes/01-classes/text.md
@@ -0,0 +1,23 @@
+---
+title: The class directive
+---
+
+Like any other attribute, you can specify classes with a JavaScript attribute, seen here:
+
+```html
+<button
+	class="{current === 'foo' ? 'active' : ''}"
+	on:click="{() => current = 'foo'}"
+>foo</button>
+```
+
+This is such a common pattern in UI development that Svelte includes a special directive to simplify it:
+
+```html
+<button
+	class:active="{current === 'foo'}"
+	on:click="{() => current = 'foo'}"
+>foo</button>
+```
+
+The `active` class is added to the element whenever the value of the expression is truthy, and removed when it's falsy.
\ No newline at end of file
diff --git a/site/content/tutorial/13-classes/02-class-shorthand/app-a/App.svelte b/site/content/tutorial/13-classes/02-class-shorthand/app-a/App.svelte
new file mode 100644
index 0000000000..5ff6497230
--- /dev/null
+++ b/site/content/tutorial/13-classes/02-class-shorthand/app-a/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	let big = false;
+</script>
+
+<style>
+	.big {
+		font-size: 4em;
+	}
+</style>
+
+<label>
+	<input type=checkbox bind:checked={big}>
+	big
+</label>
+
+<div class:big={big}>
+	some {big ? 'big' : 'small'} text
+</div>
\ No newline at end of file
diff --git a/site/content/tutorial/13-classes/02-class-shorthand/app-b/App.svelte b/site/content/tutorial/13-classes/02-class-shorthand/app-b/App.svelte
new file mode 100644
index 0000000000..0f4e0d9f24
--- /dev/null
+++ b/site/content/tutorial/13-classes/02-class-shorthand/app-b/App.svelte
@@ -0,0 +1,18 @@
+<script>
+	let big = false;
+</script>
+
+<style>
+	.big {
+		font-size: 4em;
+	}
+</style>
+
+<label>
+	<input type=checkbox bind:checked={big}>
+	big
+</label>
+
+<div class:big>
+	some {big ? 'big' : 'small'} text
+</div>
\ No newline at end of file
diff --git a/site/content/tutorial/13-classes/02-class-shorthand/text.md b/site/content/tutorial/13-classes/02-class-shorthand/text.md
new file mode 100644
index 0000000000..e0bfd4baef
--- /dev/null
+++ b/site/content/tutorial/13-classes/02-class-shorthand/text.md
@@ -0,0 +1,19 @@
+---
+title: Shorthand class directive
+---
+
+Often, the name of the class will be the same as the name of the value it depends on:
+
+```html
+<div class:big={big}>
+	<!-- ... -->
+</div>
+```
+
+In those cases we can use a shorthand form:
+
+```html
+<div class:big>
+	<!-- ... -->
+</div>
+```
\ No newline at end of file
diff --git a/site/content/tutorial/13-classes/meta.json b/site/content/tutorial/13-classes/meta.json
new file mode 100644
index 0000000000..9c2b8a41f6
--- /dev/null
+++ b/site/content/tutorial/13-classes/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Classes"
+}
\ No newline at end of file
diff --git a/site/content/tutorial/99-todo/99-todo/text.md b/site/content/tutorial/99-todo/99-todo/text.md
index 17c4cbb5e2..8c4b140565 100644
--- a/site/content/tutorial/99-todo/99-todo/text.md
+++ b/site/content/tutorial/99-todo/99-todo/text.md
@@ -125,8 +125,8 @@ Maybe lifecycle should go first, since we're using `onMount` in the `this` demo?
 
 ## class: directive
 
-* [ ] `class:foo={bar}`
-* [ ] `class:foo`
+* [x] `class:foo={bar}`
+* [x] `class:foo`
 
 
 ## Composition
diff --git a/site/package-lock.json b/site/package-lock.json
index 1b4050c6f2..149733cc0c 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -1579,7 +1579,7 @@
       "dev": true
     },
     "eslint-plugin-svelte3": {
-      "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#5fc4861d4b191649b0badf4f9a4c2470f08b237e",
+      "version": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#651d7e3695b1731251ab3a501d1067b561ede09f",
       "from": "git+https://github.com/sveltejs/eslint-plugin-svelte3.git#semver:*",
       "dev": true
     },