Created
July 20, 2020 10:46
-
-
Save barna2019/127ecf97fc9039fa3a0bf19e16dabfc7 to your computer and use it in GitHub Desktop.
amp-web-push-permission-dialog.html
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> | |
| <!-- AMP Web Push Permission Dialog --> | |
| <head> | |
| <meta charset="utf-8"> | |
| <!-- Do not edit styles in this section --> | |
| <style builtin> | |
| /* Do not edit styles in this section. Add custom styles in the next | |
| style section */ | |
| html, body { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /* Default loading spinner */ | |
| .spinner, | |
| .spinner:after { | |
| border-radius: 50%; | |
| width: 10em; | |
| height: 10em; | |
| } | |
| .spinner { | |
| margin: 60px auto; | |
| font-size: 10px; | |
| position: relative; | |
| text-indent: -9999em; | |
| border-top: 1.1em solid rgba(140, 140, 140, 0.2); | |
| border-right: 1.1em solid rgba(140, 140, 140, 0.2); | |
| border-bottom: 1.1em solid rgba(140, 140, 140, 0.2); | |
| border-left: 1.1em solid rgb(140, 140, 140); | |
| -webkit-transform: translateZ(0); | |
| -ms-transform: translateZ(0); | |
| transform: translateZ(0); | |
| -webkit-animation: spinner 1.1s infinite linear; | |
| animation: spinner 1.1s infinite linear; | |
| } | |
| @-webkit-keyframes spinner { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes spinner { | |
| 0% { | |
| -webkit-transform: rotate(0deg); | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| } | |
| } | |
| /* Horizontally and vertically center items */ | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 15px; | |
| } | |
| /* Page message text styles */ | |
| .message { | |
| font-size: 22px; | |
| font-family: sans-serif; | |
| text-align: center; | |
| } | |
| /* Close icon styles */ | |
| #close { | |
| position: fixed; | |
| right: 32px; | |
| top: 32px; | |
| width: 32px; | |
| height: 32px; | |
| opacity: 0.5; | |
| cursor: pointer; | |
| } | |
| #close:before, #close:after { | |
| position: fixed; | |
| right: 48px; | |
| content: ' '; | |
| height: 33px; | |
| width: 3px; | |
| background-color: #333; | |
| } | |
| #close:before { | |
| transform: rotate(45deg); | |
| } | |
| #close:after { | |
| transform: rotate(-45deg); | |
| } | |
| /* Used to hide the preload and postload sections */ | |
| .invisible { | |
| display: none; | |
| } | |
| </style> | |
| <!-- Optional: Add custom styles here --> | |
| <style custom> | |
| /* Add custom styles here */ | |
| </style> | |
| </head> | |
| <body> | |
| <div id="preload"> | |
| <!-- Anything in this section will be shown before the main script | |
| runs, and will be hidden after --> | |
| <div class="spinner"></div> | |
| </div> | |
| <div id="postload" class="invisible"> | |
| <span id="close"></span> | |
| <div permission="default"> | |
| <p class="message"> | |
| <!-- | |
| Customize the subscribing message here | |
| (e.g. "Click Allow to receive notifications") | |
| --> | |
| Click Allow to receive notifications. | |
| </p> | |
| </div> | |
| <div permission="denied"> | |
| <!-- | |
| Customize the unblocking message here | |
| (e.g. "Please unblock notifications in your browser settings | |
| to receive notifications from this website.") | |
| --> | |
| <p class="message"> | |
| Please unblock notifications in your browser settings to receive notifications from this website. | |
| </p> | |
| </div> | |
| </div> | |
| <script>(function(){var f;function g(a){for(var b=["object"==typeof globalThis&&globalThis,a,"object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global],c=0;c<b.length;++c){var d=b[c];if(d&&d.Math==Math)return d}return function(){throw Error("Cannot find global object");}()}var h=g(this);function k(a,b){b=void 0===b?"":b;try{return decodeURIComponent(a)}catch(c){return b}};var m=/(?:^[#?]?|&)([^=&]+)(?:=([^&]*))?/g;var n=self.AMP_CONFIG||{},q=("string"==typeof n.cdnProxyRegex?new RegExp(n.cdnProxyRegex):n.cdnProxyRegex)||/^https:\/\/([a-zA-Z0-9_-]+\.)?cdn\.ampproject\.org$/;function r(a){if(self.document&&self.document.head&&(!self.location||!q.test(self.location.origin))){var b=self.document.head.querySelector('meta[name="'+a+'"]');b&&b.getAttribute("content")}}n.cdnUrl||r("runtime-host");n.geoApiUrl||r("amp-geo-api");self.__AMP_LOG=self.__AMP_LOG||{user:null,dev:null,userForEmbed:null};var t=self.__AMP_LOG;function v(){if(t.dev)return t.dev;throw Error("failed to call initLogConstructor");};/* | |
| https://mths.be/cssescape v1.5.1 by @mathias | MIT license */ | |
| var w=/(\0)|^(-)$|([\x01-\x1f\x7f]|^-?[0-9])|([\x80-\uffff0-9a-zA-Z_-]+)|[^]/g;function x(a,b,c,d,e){return e?e:b?"\ufffd":d?a.slice(0,-1)+"\\"+a.slice(-1).charCodeAt(0).toString(16)+" ":"\\"+a};function y(){this.L=100;this.C=this.H=0;this.w=Object.create(null)}y.prototype.has=function(a){return!!this.w[a]};y.prototype.get=function(a){var b=this.w[a];if(b)return b.access=++this.C,b.payload};y.prototype.put=function(a,b){this.has(a)||this.H++;this.w[a]={payload:b,access:this.C};if(!(this.H<=this.L)){v().warn("lru-cache","Trimming LRU cache");a=this.w;var c=this.C+1,d;for(d in a){var e=a[d].access;if(e<c){c=e;var l=d}}void 0!==l&&(delete a[l],this.H--)}};(function(a){return a||{}})({c:!0,v:!0,a:!0,ad:!0,action:!0});var z,A; | |
| function B(a){z||(z=self.document.createElement("a"),A=self.__AMP_URL_CACHE||(self.__AMP_URL_CACHE=new y));var b=A,c=z;if(b&&b.has(a))a=b.get(a);else{c.href=a;c.protocol||(c.href=c.href);var d={href:c.href,protocol:c.protocol,host:c.host,hostname:c.hostname,port:"0"==c.port?"":c.port,pathname:c.pathname,search:c.search,hash:c.hash,origin:null};"/"!==d.pathname[0]&&(d.pathname="/"+d.pathname);if("http:"==d.protocol&&80==d.port||"https:"==d.protocol&&443==d.port)d.port="",d.host=d.hostname;d.origin= | |
| c.origin&&"null"!=c.origin?c.origin:"data:"!=d.protocol&&d.host?d.protocol+"//"+d.host:d.href;b&&b.put(a,d);a=d}return a};function C(a){a||(a={debug:!1,windowContext:window});this.o={};this.m={};this.l=a.debug;this.A=this.M=this.N=!1;this.B=this.F=this.G=this.j=this.D=null;this.h=a.windowContext||window}f=C.prototype; | |
| f.listen=function(a){var b=this;return(new Promise(function(c,d){b.A?d(Error("Already connected.")):b.N?d(Error("Already listening for connections.")):Array.isArray(a)?(b.G=b.P.bind(b,a,c,d),b.h.addEventListener("message",b.G),b.l&&v().fine("amp-web-push","Listening for a connection message...")):d(Error("allowedOrigins should be a string array of allowed origins to accept messages from. Got:",a))})).then(function(){b.send(C.Topics.CONNECT_HANDSHAKE,null);b.A=!0})}; | |
| f.P=function(a,b,c,d){var e=d.data,l=d.origin,H=d.ports;this.l&&v().fine("amp-web-push","Window message for listen() connection received:",e);a:{var p=B(l).origin;for(var u=0;u<a.length;u++)if(B(a[u]).origin===p){p=!0;break a}p=!1}p?e&&e.topic===C.Topics.CONNECT_HANDSHAKE?(v().fine("amp-web-push","Received expected connection handshake message:",e),this.h.removeEventListener("message",this.G),this.j=H[0],this.B=this.J.bind(this),this.j.addEventListener("message",this.B,!1),this.j.start(),b()):v().fine("amp-web-push", | |
| "Discarding connection message because it did not contain our expected handshake:",e):v().fine("amp-web-push","Discarding connection message from "+l+" because it isn't an allowed origin:",e," (allowed origins are)",a)}; | |
| f.connect=function(a,b){var c=this;return new Promise(function(d,e){a||e(Error("Provide a valid Window context to connect to."));b||e(Error("Provide an expected origin for the remote Window or provide the wildcard *."));c.A?e(Error("Already connected.")):c.M?e(Error("Already connecting.")):(c.D=new MessageChannel,c.j=c.D.port1,c.F=c.O.bind(c,c.j,b,d),c.j.addEventListener("message",c.F),c.j.start(),a.postMessage({topic:C.Topics.CONNECT_HANDSHAKE},"*"===b?"*":B(b).origin,[c.D.port2]),v().fine("amp-web-push", | |
| "Opening channel to "+b+"..."))})};f.O=function(a,b,c){this.A=!0;this.l&&v().fine("amp-web-push","Messenger channel to "+b+" established.");a.removeEventListener("message",this.F);this.B=this.J.bind(this);a.addEventListener("message",this.B,!1);c()}; | |
| f.J=function(a){a=a.data;if(this.o[a.id]&&a.isReply){var b=this.o[a.id];delete this.o[a.id];var c=b.promiseResolver;b.message=a.data;this.l&&v().fine("amp-web-push","Received reply for topic '%s': %s",a.topic,a.data);c([a.data,this.K.bind(this,a.id,b.topic)])}else{var d=this.m[a.topic];if(d){this.l&&v().fine("amp-web-push","Received new message for topic '"+(a.topic+"': "+a.data));for(var e=0;e<d.length;e++)(0,d[e])(a.data,this.K.bind(this,a.id,a.topic))}}}; | |
| f.on=function(a,b){this.m[a]?this.m[a].push(b):this.m[a]=[b]};f.off=function(a,b){if(b){var c=this.m[a].indexOf(b);-1!==c&&this.m[a].splice(c,1)}else this.m[a]&&delete this.m[a]};f.K=function(a,b,c){var d=this,e={id:a,topic:b,data:c,isReply:!0};this.j.postMessage(e);return new Promise(function(a){d.o[e.id]={message:c,topic:b,promiseResolver:a}})}; | |
| f.send=function(a,b){var c=this,d={id:crypto.getRandomValues(new Uint8Array(10)).join(""),topic:a,data:b};this.l&&v().fine("amp-web-push","Sending %s: %s",a,b);this.j.postMessage(d);return new Promise(function(e){c.o[d.id]={message:b,topic:a,promiseResolver:e}})}; | |
| h.Object.defineProperties(C,{Topics:{configurable:!0,enumerable:!0,get:function(){return{CONNECT_HANDSHAKE:"topic-connect-handshake",NOTIFICATION_PERMISSION_STATE:"topic-notification-permission-state",SERVICE_WORKER_STATE:"topic-service-worker-state",SERVICE_WORKER_REGISTRATION:"topic-service-worker-registration",SERVICE_WORKER_QUERY:"topic-service-worker-query",STORAGE_GET:"topic-storage-get"}}}});function D(){var a={debug:!1};this.l=a&&a.debug;this.h=a.windowContext||window;this.I=new C({debug:this.l,windowContext:this.h})}f=D.prototype;f.isCurrentDialogPopup=function(){return!!this.h.opener&&this.h.opener!==this.h};f.requestNotificationPermission=function(){var a=this;return new Promise(function(b,c){try{a.h.Notification.requestPermission(function(a){return b(a)})}catch(d){c(d)}})}; | |
| f.run=function(){E(this);F(this);for(var a=this.h.document.querySelectorAll("[permission]"),b=0;b<a.length;b++)G(a[b],!1);(a=this.h.document.querySelector("[permission="+String(this.h.Notification.permission).replace(w,x)+"]"))&&G(a,!0);a=this.h.document.querySelector("#preload");b=this.h.document.querySelector("#postload");a&&b&&(G(a,!1),G(b,!0));"denied"!==this.h.Notification.permission?I(this):J(this)}; | |
| function E(a){var b=a.h.document.querySelector("#close");b&&b.addEventListener("click",function(){a.closeDialog()})}f.closeDialog=function(){if(this.isCurrentDialogPopup())this.h.close();else{var a=(this.h.fakeLocation||this.h.location).search,b=Object.create(null);if(a)for(var c;c=m.exec(a);){var d=k(c[1],c[1]);c=c[2]?k(c[2].replace(/\+/g," "),c[2]):"";b[d]=c}if(!b["return"])throw Error("Missing required parameter.");a=k(b["return"],void 0);this.redirectToUrl(a)}}; | |
| function J(a){navigator.permissions.query({name:"notifications"}).then(function(b){b.onchange=function(){F(a);switch(a.h.Notification.permission){case "default":case "granted":I(a)}}})}function F(a){a.h.localStorage.setItem("amp-web-push-notification-permission",a.h.Notification.permission)}function G(a,b){a&&(b?a.classList.remove("invisible"):a.classList.add("invisible"))} | |
| function I(a){a.requestNotificationPermission().then(function(b){F(a);if(a.isCurrentDialogPopup())return a.I.connect(opener,"*"),a.I.send(C.Topics.NOTIFICATION_PERMISSION_STATE,b).then(function(b){(b=b[0])&&b.closeFrame&&a.closeDialog()});a.closeDialog()})}f.redirectToUrl=function(a){var b=B(a);!b||"http:"!==b.protocol&&"https:"!==b.protocol||(this.h.location.href=a)};window._ampWebPushPermissionDialog=new D;window._ampWebPushPermissionDialog.run();})(); | |
| //# sourceMappingURL=amp-web-push-permission-dialog.js.map | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment