Skip to content

Commit

Permalink
docs: add demo for cookie
Browse files Browse the repository at this point in the history
  • Loading branch information
@phucbm
phucbm committed Oct 16, 2023
1 parent 8da269a commit 49b6a83
Show file tree
Hide file tree
Showing 7 changed files with 97 additions and 19 deletions.
27 changes: 27 additions & 0 deletions dev/js/test-cookie.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import md from "../md/cookie.md";
import mdView from "../md/view-cookie-popup.md";

export function testCookie(root){
root.insertAdjacentHTML('beforeend', md);

const isViewingPopup = new URL(window.location.href).search === '?view-cookie-popup';

if(isViewingPopup){
root.insertAdjacentHTML('beforeend', mdView);
}
const popup = EasyPopup.get('popup-cookie');


const isClearCookie = new URL(window.location.href).search === '?clear-all-cookie';
if(isClearCookie){
console.log('clear cookie')
Pia.remove(popup.cookie.key) // todo: finish clear cookie
}


EasyPopup.init();

popup.on('open', () => {
console.log(Pia.test(popup.cookie.key))
});
}
2 changes: 1 addition & 1 deletion dev/md/auto-show.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@
- Show popup after page loaded: `autoShow: true`
- Show popup 3000ms after page loaded: `autoShow: 3000`

[Click here to reload and view auto-show popups](?view-auto-show-popup)
> [Click here to reload and view auto-show popups](?view-auto-show-popup)
41 changes: 41 additions & 0 deletions dev/md/cookie.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
## `cookie`

Requires [PiaJs](https://github.com/phucbm/pia) v0.0.4 or later.

Show popup **once** and not showing again after a period of time.

- Popup re-appears after 7 days: `{autoShow:true, cookie: 7}`
- Popup re-appears after 30 days: `{autoShow:true, cookie: "30 days"}`
- Popup re-appears after 8 hours: `{autoShow:true, cookie: "8 hours"}`

Show popup for **a number of times** and reset after a period of time.

- Shows 3 times, then re-appears after 7 days: `{autoShow:true, cookie: 7, showingTimes: 3}`

### Clear cookie

To clear cookie for all client devices.

- `{autoShow:false}`: prevent the popup reappears, however, the cookie still exists in the client
devices.
- `{cookie:undefined}`: clear cookie if any.

### Update cookie

Set a new cookie name to disconnect with the current cookie. Otherwise, the popup will always look for the cookie with
the
default name.

- `{cookie:"new_expiration_value", cookieName:"new_name"}`

### Test cookie

Using [`Pia.test()`](https://github.com/phucbm/pia#test-record).

```js
const popup = EasyPopup.get('popup-cookie');

console.log(Pia.test(popup.cookie.key));
```

> [Click here to reload and view demo cookie popups](?view-cookie-popup)
34 changes: 17 additions & 17 deletions dev/md/options.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@

### Options

| Attribute | Type | Default | Description |
|------------------------|------------------------|-------------------|---------------------------------------------------------------------------------------------------------|
| `id` | string | Auto-generated ID | Set an ID for this popup |
| `theme` | string | `default` | Other layouts: `right-side` |
| `hasMobileLayout` | boolean | `false` | Enable mobile layout (`theme` options will not work when mobile layout is active) |
| `mobileBreakpoint` | number | `768` | Activate mobile layout when the screen size is <=768px |
| `closeButtonInnerText` | string | `svg/icon` | Custom `innerText` of the close button |
| `triggerSelector` | CSS selector | `""` | Click on this trigger will also toggle the popup |
| `outerClass` | string | `""` | Extra class to popup outer `.easy-popup` |
| `activeHtmlClass` | string | `""` | Extra class to `<html>` when a popup opens |
| `keyboard` | boolean | `true` | Close popup by pressing ESC key |
| `clickOutsideToClose` | boolean | `true` | Click on empty outside an opening open will close the popup |
| `preventScroll` | boolean | `true` | Prevent page scroll when popup is open |
| `autoShow` | boolean or number (ms) | `false` | `true` to show the popup right after page loaded, set number for delay, e.g. 1000 for 1000ms after init |
| `cookie` | string or number | `undefined` | Use PiaJs `expires`, see https://github.com/phucbm/pia#set-expires |
| `showingTimes` | number | `1` | Show n times before expiration day, only works with cookie |
| `cookieName` | string | `""` | Name of the cookie, change name will also lose access to the previous cookie => treat as a new cookie |
| Attribute | Type | Default | Description |
|------------------------|------------------------|-------------------|--------------------------------------------------------------------------------------------------------------------------|
| `id` | string | Auto-generated ID | Set an ID for this popup |
| `theme` | string | `default` | Other layouts: `right-side` |
| `hasMobileLayout` | boolean | `false` | Enable mobile layout (`theme` options will not work when mobile layout is active) |
| `mobileBreakpoint` | number | `768` | Activate mobile layout when the screen size is <=768px |
| `closeButtonInnerText` | string | `svg/icon` | Custom `innerText` of the close button |
| `triggerSelector` | CSS selector | `""` | Click on this trigger will also toggle the popup |
| `outerClass` | string | `""` | Extra class to popup outer `.easy-popup` |
| `activeHtmlClass` | string | `""` | Extra class to `<html>` when a popup opens |
| `keyboard` | boolean | `true` | Close popup by pressing ESC key |
| `clickOutsideToClose` | boolean | `true` | Click on empty outside an opening open will close the popup |
| `preventScroll` | boolean | `true` | Prevent page scroll when popup is open |
| `autoShow` | boolean or number (ms) | `false` | `true` to show the popup right after page loaded, set number for delay, e.g. 1000 for 1000ms after init |
| `cookie` | string or number | `undefined` | Requires `autoShow:true`. Set expiration for a popup. Use [PiaJs `expires`](https://github.com/phucbm/pia#set-expires). |
| `showingTimes` | number | `1` | Requires `cookie`. Show n times before expiration day, only works with cookie |
| `cookieName` | string | `""` | Requires `cookie`. Name of the cookie, change name will also lose access to the previous cookie => treat as a new cookie |

#### Deprecated options

Expand Down
8 changes: 8 additions & 0 deletions dev/md/view-cookie-popup.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
> You're viewing page with cookie popups. Click [❌ clear all demo cookies](?clear-all-cookie) to remove cookie and test
> again.
<div data-easy-popup='{"id": "popup-cookie","autoShow": "true", "cookie": "1 day"}'>
<!-- Popup content -->
<h2>1 day popup</h2>
<h3>This popup auto open once, and off for 1 day.</h3>
</div>
2 changes: 1 addition & 1 deletion dev/pia.module.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions dev/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {testAutoShow} from "./js/test-auto-show";
import mdOptions from "./md/options.md";
import mdEnd from "./md/end.md";
import mdBegin from "./md/begin.md";
import {testCookie} from "./js/test-cookie";

// import package info
const packageInfo = require('../package.json');
Expand All @@ -32,6 +33,7 @@ root.insertAdjacentHTML('beforeend', mdBegin);
testInit(root);
testLayout(root);
testAutoShow(root);
testCookie(root);

root.insertAdjacentHTML('beforeend', mdOptions);
root.insertAdjacentHTML('beforeend', mdEnd);
Expand Down

0 comments on commit 49b6a83

Please sign in to comment.