Skip to content

chore: ✨ Refactor PermissionsAPI to extend PermissionsCore and improve permission handling #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
factman merged 1 commit into from
Nov 20, 2025
Merged

chore: ✨ Refactor PermissionsAPI to extend PermissionsCore and improve permission handling #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 74 additions & 54 deletions packages/permissions/demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Permissions</title>
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/styles/atom-one-dark.min.css">
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/highlight.min.js"></script>
<style>
html,
body {
Expand Down Expand Up @@ -35,25 +37,11 @@
cursor: pointer;
}

.code-container pre {
background-color: #3a3a3a;
border-radius: 5px;
padding: 1em;
color: cyan;
margin: 0;
display: block;
font-family: monospace;
}

.code-container p {
margin: 0 0 0.5em;
text-decoration: underline;
text-underline-offset: 4px;
}

pre span {
color: springgreen;
}
</style>
</head>

Expand Down Expand Up @@ -109,69 +97,82 @@ <h2>PermissionsAPI Usage Examples</h2>
<div class="code-container">
<p onclick="toggleCodeView(this)">PermissionsAPI.isSupported</p>
<pre id="isSupported" style="display: none;">
<span>// Checks if the Permissions API is supported in the current browser/environment.</span>
<code class="language-javascript">
// Checks if the Permissions API is supported in the current browser/environment.

const permissions = new PermissionsAPI()

const support = PermissionsAPI.isSupported()
console.log(support) <span>// True or False</span>
const support = permissions.isSupported()
console.log(support) // True or False

<hr/>
<span>// Exception example</span>
// Exception example

try {
const support = PermissionsAPI.isSupported(true)
console.log(support) <span>// True</span>
const support = permissions.isSupported(true)
console.log(support) // True
...
} catch(error) {
console.log(error.message) <span>// Permissions API is not supported in this browser/environment.</span>
console.log(error.message) // Permissions API is not supported in this browser/environment.
}
</pre>
</code>
</pre>
</div>

<div class="code-container">
<p onclick="toggleCodeView(this)">PermissionsAPI.getPermission</p>
<pre id="getPermission" style="display: none;">
<span>// Promise example</span>
<code class="language-javascript">
// Promise example

const permissions = new PermissionsAPI()

PermissionsAPI.getPermission({ name: 'geolocation' })
permissions.getPermission({ name: 'geolocation' })
.then(({ error, permission }) => {
if (error) {
console.error('Error fetching permission status:', error.message)
return
}
if (permission.state === 'denied') {
<span>// can't use geolocation service, notify the user</span>
// can't use geolocation service, notify the user
console.log('permission:', permission.state)
return
}
<span>// you can use the geolocation service here</span>
// you can use the geolocation service here
console.log('permission is granted or will prompt the user for access', permission.state)
})
</code>

<hr/>
<span>// Async await example</span>
<code class="language-javascript">
// Async await example

const permissions = new PermissionsAPI()

async function geolocation() {
const { error, permission } = await PermissionsAPI.getPermission({ name: 'geolocation' })
const { error, permission } = await permissions.getPermission({ name: 'geolocation' })

if (error) {
console.error('Error fetching permission status:', error.message)
} else if (permission.state === 'denied') {
<span>// can't use geolocation service, notify the user</span>
// can't use geolocation service, notify the user
console.log('permission:', permission.state)
} else {
<span>// you can use the geolocation service here</span>
// you can use the geolocation service here
console.log('permission is granted or will prompt the user for access', permission.state)
}
}
</code>
</pre>
</div>

<div class="code-container">
<p onclick="toggleCodeView(this)">PermissionsAPI.getPermissionHandler</p>
<pre id="getPermissionHandler" style="display: none;">
<span>// Callback example</span>
<code class="language-javascript">
// Callback example

const permissions = new PermissionsAPI()

const notificationHandler = PermissionsAPI.getPermissionHandler(
const notificationHandler = permissions.createHandler(
{ name: 'notifications' },
{
granted: (permission) => {
Expand All @@ -187,16 +188,19 @@ <h2>PermissionsAPI Usage Examples</h2>
}
)

<span>// Initiate the handler by calling the handler function</span>
// Initiate the handler by calling the handler function
notificationHandler.getPermission()
</code>

<hr/>
<span>// Event handling example</span>
<code class="language-javascript">
// Event handling example

const notificationHandler = PermissionsAPI.getPermissionHandler({ name: 'notifications' })
const permissions = new PermissionsAPI()

const notificationHandler = permissions.createHandler({ name: 'notifications' })

notificationHandler.onPermissionChange((permission) => {
console.log('User change permission:', permission.state) <span>// granted or denied</span>
console.log('User change permission:', permission.state) // granted or denied
})
notificationHandler.onPermissionGranted((permission) => {
console.log('Permission:', permission.state)
Expand All @@ -209,13 +213,16 @@ <h2>PermissionsAPI Usage Examples</h2>
console.error('Permission error:', error)
})

<span>// Initiate the handler by calling the handler function</span>
// Initiate the handler by calling the handler function
notificationHandler.getPermission()
</code>

<code class="language-javascript">
// Callback and Event example

<hr />
<span>// Callback and Event example</span>
const permissions = new PermissionsAPI()

const notificationHandler = PermissionsAPI.getPermissionHandler(
const notificationHandler = permissions.createHandler(
{ name: 'notifications' },
{
granted: (permission) => {
Expand All @@ -232,20 +239,24 @@ <h2>PermissionsAPI Usage Examples</h2>
)

notificationHandler.onPermissionChange((permission) => {
console.log('User change permission:', permission.state) <span>// granted or denied</span>
console.log('User change permission:', permission.state) // granted or denied
})

<span>// Initiate the handler by calling the handler function</span>
// Initiate the handler by calling the handler function
notificationHandler.getPermission()
</code>
</pre>
</div>

<div class="code-container">
<p onclick="toggleCodeView(this)">PermissionsAPI.getAsyncPermissionHandler</p>
<pre id="getAsyncPermissionHandler" style="display: none;">
<span>// Promise example</span>
<code class="language-javascript">
// Promise example

const asyncCameraHandler = PermissionsAPI.getAsyncPermissionHandler({ name: 'camera' })
const permissions = new PermissionsAPI()

const asyncCameraHandler = permissions.createAsyncHandler({ name: 'camera' })
asyncCameraHandler.getPermission().then(({ error, permission }) => {
if (error) {
asyncCameraHandler.close()
Expand All @@ -259,12 +270,16 @@ <h2>PermissionsAPI Usage Examples</h2>
console.log('Permission:', permission.state)
}
})
</code>

<code class="language-javascript">

<hr/>
<span>// Async await example</span>
// Async await example

const permissions = new PermissionsAPI()

async function camera() {
const asyncCameraHandler = PermissionsAPI.getAsyncPermissionHandler({ name: 'camera' })
const asyncCameraHandler = permissions.createAsyncHandler({ name: 'camera' })
const { error, permission } = await asyncCameraHandler.getPermission()

if (error) {
Expand All @@ -276,15 +291,18 @@ <h2>PermissionsAPI Usage Examples</h2>
console.log('Permission:', permission.state)
}
}
</code>

<code class="language-javascript">
// Event example

<hr />
<span>// Event example</span>
const permissions = new PermissionsAPI()

async function camera() {
const asyncCameraHandler = PermissionsAPI.getAsyncPermissionHandler({ name: 'camera' })
const asyncCameraHandler = permissions.createAsyncHandler({ name: 'camera' })

asyncCameraHandler.onPermissionChange((permission) => {
console.log('User change permission:', permission.state) <span>// granted or denied</span>
console.log('User change permission:', permission.state) // granted or denied
})

const { error, permission } = await asyncCameraHandler.getPermission()
Expand All @@ -298,9 +316,11 @@ <h2>PermissionsAPI Usage Examples</h2>
console.log('Permission:', permission.state)
}
}
</code>
</pre>
</div>

<script>hljs.highlightAll();</script>
<script type="module" src="index.js"></script>
<script>
function toggleCodeView($this) {
Expand Down
10 changes: 5 additions & 5 deletions packages/permissions/demo/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { PermissionsAPI } from '../dist/permissions.js'

const { isSupported, permissionNames, getPermissionHandler } = PermissionsAPI
const permissions = new PermissionsAPI()

function createCodeTag(text, color = '#e3e3e3') {
const code = document.createElement('code')
Expand Down Expand Up @@ -49,7 +49,7 @@ const stateColor = {
}

function handlePermission(option) {
permissionHandler = getPermissionHandler(option, {
permissionHandler = permissions.createHandler(option, {
granted: (permission) => {
console.log('Permission Granted:', permission)
state.replaceChildren(
Expand Down Expand Up @@ -84,15 +84,15 @@ function handlePermission(option) {

document
.querySelector('#support')
.appendChild(createCodeTag(isSupported().toString()))
.appendChild(createCodeTag(permissions.isSupported().toString()))
document
.querySelector('#names')
.append(...permissionNames.map((name) => createCodeTag(name)))
.append(...PermissionsAPI.permissionNames.map((name) => createCodeTag(name)))

const selectPermissions = [
'unsupported-permission',
'invalid-permission',
...permissionNames
...PermissionsAPI.permissionNames
]
const select = document.querySelector('#select')
select.append(...selectPermissions.map(createOptionTag))
Expand Down
Loading
Loading