Last active
July 19, 2017 09:36
-
-
Save GenbuHase/9c169ae1ac43d6513e8f02ae29d2a8c4 to your computer and use it in GitHub Desktop.
Notifications Test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const AppNotification = (function () { | |
| function AppNotification () { | |
| Notification.requestPermission(function (state) { | |
| switch (state) { | |
| case "default": | |
| break; | |
| case "granted": | |
| console.info("通知の許可が確認されました"); | |
| break; | |
| case "denied": | |
| console.warn("通知の許可が確認されません"); | |
| break; | |
| } | |
| }); | |
| }; AppNotification.prototype = Object.create(null, { | |
| constructor: { value: AppNotification }, | |
| show: { | |
| value () { | |
| } | |
| } | |
| }); | |
| return AppNotification; | |
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| Box-Sizing: Border-Box; | |
| } | |
| #N_Form { | |
| Display: Flex; | |
| Flex-Direction: Column; | |
| Padding: 1pc; | |
| } | |
| #N_Form > #N_Detail { | |
| Min-Width: 100%; | |
| Max-Width: 100%; | |
| Height: 25%; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DocType HTML> | |
| <HTML> | |
| <Head> | |
| <Meta Charset = "UTF-8" /> | |
| <Title>Notifications Test</Title> | |
| <Script Src = "AppNotification.js"></Script> | |
| <Link Rel = "StyleSheet" Href = "index.css" /> | |
| <-- | |
| ━━━━━ ToDo ━━━━━ | |
| ・画像欄追加 | |
| ・サウンド変更追加 | |
| --!> | |
| <Script> | |
| Notification.requestPermission(function (state) { | |
| switch (state) { | |
| case "default": | |
| break; | |
| case "granted": | |
| console.info("通知の許可が確認されました"); | |
| break; | |
| case "denied": | |
| console.warn("通知の許可が確認されません"); | |
| break; | |
| } | |
| }); | |
| document.addEventListener("DOMContentLoaded", function () { | |
| document.querySelector("Button#N_Apply").addEventListener("click", function (event) { | |
| let title = document.querySelector("Input#N_Title").value, | |
| detail = document.querySelector("Textarea#N_Detail").value | |
| new Notification(title, { | |
| body: detail | |
| }); | |
| }); | |
| }); | |
| </Script> | |
| </Head> | |
| <Body> | |
| <Div ID = "N_Form"> | |
| <Input ID = "N_Title" Type = "Textbox" Value = "" Placeholder = "通知名" /> | |
| <Textarea ID = "N_Detail" Placeholder = "通知コンテンツ"></Textarea> | |
| <Button ID = "N_Apply">通知</Button> | |
| </Div> | |
| </Body> | |
| </HTML> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment