Skip to content

Commit

Permalink
Adding docs, code review clean up.
Browse files Browse the repository at this point in the history
  • Loading branch information
@MalcolmKnott
MalcolmKnott committed Oct 13, 2021
1 parent f803be0 commit 48193c4
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 119 deletions.
133 changes: 17 additions & 116 deletions index.html
View file
@@ -1,117 +1,18 @@
<!DOCTYPE html>
<html x-data="" :class="$store.darkMode.on ? 'dark' : 'light'">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Alpine Example</title>

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<style>
input:checked ~ .dot {
transform: translateX(100%);
background-color: #1ED1A8;
}
</style>

<script src="./packages/intersect/dist/cdn.js" defer></script>
<script src="./packages/morph/dist/cdn.js" defer></script>
<script src="./packages/history/dist/cdn.js"></script>
<script src="./packages/persist/dist/cdn.js"></script>
<script src="./packages/trap/dist/cdn.js"></script>
<script src="./packages/collapse/dist/cdn.js"></script>
<script src="./packages/alpinejs/dist/cdn.js" defer></script>

</head>
<body>
<div class="font-sans text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-gray-800 h-screen">
<div class="flex flex-col justify-center items-center h-screen" x-data="" x-init="console.log($store)">
<div>
<h1 x-text="$store.darkMode.on ? 'Night time' : 'Day time'" class="text-6xl mb-16 font-thin"></h1>
</div>

<label for="wifi" class="flex flex-col items-center cursor-pointer mb-16" x-data="{ toggle: $persist(true).as('wifi') }">
<div class="mb-3 font-light text-lg">
WiFi: <span x-text="toggle ? 'ON' : 'OFF'"></span>
</div>
<div class="relative">
<input type="checkbox"
id="wifi"
class="sr-only"
x-model="toggle"
>
<div class="block border border-gray-800 dark:border-gray-200 w-16 h-9 rounded-full"></div>
<div class="dot absolute left-1 top-1 bg-white w-7 h-7 rounded-full transition"></div>
</div>
</label>

<label for="bluetooth" class="flex flex-col items-center cursor-pointer mb-16" x-data="{ toggle: $persist(true).as('bt') }">
<div class="mb-3 font-light text-lg">
Bluetooth: <span x-text="toggle ? 'ON' : 'OFF'"></span>
</div>
<div class="relative">
<input type="checkbox"
id="bluetooth"
class="sr-only"
x-model="toggle"
>
<div class="block border border-gray-800 dark:border-gray-200 w-16 h-9 rounded-full"></div>
<div class="dot absolute left-1 top-1 bg-white w-7 h-7 rounded-full transition"></div>
</div>
</label>

<label for="dark-mode" class="flex flex-col items-center cursor-pointer mb-16">
<div class="mb-3 font-light text-lg">
Dark mode: <span x-text="$store.darkMode.on ? 'ON' : 'OFF'"></span>
</div>
<div class="relative">
<input type="checkbox"
id="dark-mode"
class="sr-only"
x-model="$store.darkMode.on"
>
<div class="block border border-gray-800 dark:border-gray-200 w-16 h-9 rounded-full"></div>
<div class="dot absolute left-1 top-1 bg-white w-7 h-7 rounded-full transition"></div>
</div>
</label>

<label for="location" class="flex flex-col items-center cursor-pointer mb-16">
<div class="mb-3 font-light text-lg">
Location Services. <span x-text="$store.locationServices.on ? 'ON' : 'OFF'"></span>
</div>
<div class="relative">
<input type="checkbox"
id="location"
class="sr-only"
x-model="$store.locationServices.on"
>
<div class="block border border-gray-800 dark:border-gray-200 w-16 h-9 rounded-full"></div>
<div class="dot absolute left-1 top-1 bg-white w-7 h-7 rounded-full transition"></div>
</div>
</label>

<div class="text-center">
<p>Persist counter example ...</p>
<div x-data="{ count: $persist(0) }">
<button x-on:click="count++" class="underline">Click me !!</button>
<span x-text="count"></span>
</div>
</div>
</div>
</div>

<script>
document.addEventListener('alpine:init', () => {
Alpine.store('darkMode', {
on: Alpine.$persist(true).as('darkmode')
});

Alpine.store('locationServices', {
on: Alpine.$persist(true).as('location')
});
});
</script>

</body>
<html>
<script src="./packages/intersect/dist/cdn.js" defer></script>
<script src="./packages/morph/dist/cdn.js" defer></script>
<script src="./packages/history/dist/cdn.js"></script>
<script src="./packages/persist/dist/cdn.js"></script>
<script src="./packages/trap/dist/cdn.js"></script>
<script src="./packages/alpinejs/dist/cdn.js" defer></script>
<!-- <script src="https://unpkg.com/alpinejs@3.0.0/dist/cdn.min.js" defer></script> -->

<!-- Play around. -->
<div x-data="{ open: false }">
<button @click="open = !open">Toggle</button>

<span x-show="open">
Content...
</span>
</div>
</html>
11 changes: 11 additions & 0 deletions packages/docs/src/en/plugins/persist.md
View file
Expand Up @@ -194,3 +194,14 @@ Alpine.data('dropdown', function () {
}
})
```

<a name="using-persist-with-alpine-store"></a>
## Using the Alpine.$persist global

`Alpine.$persist` is exposed golobally so it can be used outside of `x-data` contexts. This is useful to persist data from other sources such as `Alpine.store`.

```js
Alpine.store('darkMode', {
on: Alpine.$persist(true).as('darkMode_on')
});
```
4 changes: 1 addition & 3 deletions packages/persist/src/index.js
View file
@@ -1,7 +1,4 @@


export default function (Alpine) {

let persist = () => {
let alias
let storage = localStorage
Expand Down Expand Up @@ -29,6 +26,7 @@ export default function (Alpine) {
func.using = target => { storage = target; return func }
})
}

Alpine.$persist = persist()
Alpine.magic('persist', persist)
}
Expand Down

0 comments on commit 48193c4

Please sign in to comment.