Browse Source

* PushJS import & demo by Silvio Clecio

michael 6 years ago
parent
commit
0c9deb045e

+ 46 - 0
demo/pushjs/helloworld.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>PushJS - Hello world!</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.9/push.min.js" integrity="sha256-7knTDMqjR962XOHsW7AEJpNDYQpsXXnCItzuekBvHqc=" crossorigin="anonymous"></script>
+  <script src="helloworld.js"></script>
+  <style>
+    body {
+      background-color: #e1e1e1;
+    }
+    .center {
+      margin: 0;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .button {
+      background-color: #4CAF50;
+      border: none;
+      color: white;
+      padding: 15px 32px;
+      text-align: center;
+      text-decoration: none;
+      display: inline-block;
+      font-size: 16px;
+      margin: 4px 2px;
+      cursor: pointer;
+      -webkit-transition-duration: 0.4s;
+      transition-duration: 0.4s;
+      border-radius: 8px;
+    }
+    .button:hover {
+      box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
+    }
+  </style>
+</head>
+<body>
+<button class="button center">View a Push demo ...</button>
+<script>
+  rtl.run();
+</script>
+</body>
+</html>

+ 100 - 0
demo/pushjs/helloworld.lpi

@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CONFIG>
+  <ProjectOptions>
+    <Version Value="12"/>
+    <General>
+      <Flags>
+        <SaveOnlyProjectUnits Value="True"/>
+        <MainUnitHasCreateFormStatements Value="False"/>
+        <MainUnitHasTitleStatement Value="False"/>
+        <MainUnitHasScaledStatement Value="False"/>
+        <Runnable Value="False"/>
+      </Flags>
+      <Title Value="helloworld"/>
+      <UseAppBundle Value="False"/>
+      <ResourceType Value="res"/>
+    </General>
+    <CustomData Count="2">
+      <Item0 Name="MaintainHTML" Value="1"/>
+      <Item1 Name="PasJSWebBrowserProject" Value="1"/>
+    </CustomData>
+    <BuildModes Active="Default">
+      <Item Name="Default" Default="True"/>
+    </BuildModes>
+    <PublishOptions>
+      <Version Value="2"/>
+      <UseFileFilters Value="True"/>
+    </PublishOptions>
+    <RunParams>
+      <FormatVersion Value="2"/>
+      <Modes Count="0"/>
+    </RunParams>
+    <Units>
+      <Unit>
+        <Filename Value="helloworld.lpr"/>
+        <IsPartOfProject Value="True"/>
+        <IsVisibleTab Value="True"/>
+        <UsageCount Value="20"/>
+        <Loaded Value="True"/>
+      </Unit>
+      <Unit>
+        <Filename Value="helloworld.html"/>
+        <IsPartOfProject Value="True"/>
+        <CustomData Count="1">
+          <Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
+        </CustomData>
+        <UsageCount Value="20"/>
+        <DefaultSyntaxHighlighter Value="HTML"/>
+      </Unit>
+      <Unit>
+        <Filename Value="../src/PushJS.pas"/>
+        <IsPartOfProject Value="True"/>
+        <UsageCount Value="20"/>
+      </Unit>
+    </Units>
+  </ProjectOptions>
+  <CompilerOptions>
+    <Version Value="11"/>
+    <Target FileExt=".js">
+      <Filename Value="helloworld"/>
+    </Target>
+    <SearchPaths>
+      <IncludeFiles Value="$(ProjOutDir)"/>
+      <OtherUnitFiles Value="../src"/>
+      <UnitOutputDirectory Value="js"/>
+    </SearchPaths>
+    <Parsing>
+      <SyntaxOptions>
+        <AllowLabel Value="False"/>
+        <CPPInline Value="False"/>
+        <UseAnsiStrings Value="False"/>
+      </SyntaxOptions>
+    </Parsing>
+    <CodeGeneration>
+      <TargetOS Value="browser"/>
+    </CodeGeneration>
+    <Linking>
+      <Debugging>
+        <GenerateDebugInfo Value="False"/>
+        <UseLineInfoUnit Value="False"/>
+      </Debugging>
+    </Linking>
+    <Other>
+      <CustomOptions Value="-Jeutf-8 -Jirtl.js -Jc -Jminclude"/>
+      <CompilerPath Value="$(pas2js)"/>
+    </Other>
+  </CompilerOptions>
+  <Debugging>
+    <Exceptions Count="3">
+      <Item1>
+        <Name Value="EAbort"/>
+      </Item1>
+      <Item2>
+        <Name Value="ECodetoolError"/>
+      </Item2>
+      <Item3>
+        <Name Value="EFOpenError"/>
+      </Item3>
+    </Exceptions>
+  </Debugging>
+</CONFIG>

+ 30 - 0
demo/pushjs/helloworld.lpr

@@ -0,0 +1,30 @@
+program helloworld;
+
+{$MODE OBJFPC}
+
+uses
+  JS,
+  Web,
+  PushJS;
+
+procedure optionClick;
+begin
+  window.focus;
+  TJSWindow(JSThis).close;
+end;
+
+procedure buttonClick;
+var
+  option: TPushOptions;
+begin
+  option := TPushOptions.new;
+  option.body := 'How''s it hangin';
+  option.icon := '/icon.png';
+  option.timeout := 4000;
+  option.onClick := @optionClick;
+  TPush.create('Hello world!', option);
+end;
+
+begin
+  document.querySelector('.button').addEventListener('click', @buttonClick);
+end.

+ 6 - 0
packages/pushjs/pushjs.js

@@ -0,0 +1,6 @@
+rtl.module("PushJS",["System","JS"],function () {
+  "use strict";
+  var $mod = this;
+  $mod.$rtti.$RefToProcVar("TPushFunction",{procsig: rtl.newTIProcSig(null)});
+  $mod.$rtti.$RefToProcVar("TPushParamsFallback",{procsig: rtl.newTIProcSig([["payload",$mod.$rtti["TPushFallbackPayload"]]])});
+});

+ 164 - 0
packages/pushjs/pushjs.pas

@@ -0,0 +1,164 @@
+{
+    This file is part of the Pas2JS run time library.
+    Copyright (C) 2019 Silvio Clecio (silvioprog) and
+    Fernando Baroni (frbaroni).
+
+    Pascal mapping for PushJS: https://pushjs.org
+
+    See the file COPYING.FPC, included in this distribution,
+    for details about the copyright.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+
+ **********************************************************************}
+
+{ Compact and cross-browser solution for Notifications API. }
+
+unit PushJS;
+
+{$MODE OBJFPC}
+{$MODESWITCH EXTERNALCLASS}
+
+interface
+
+uses
+  JS;
+
+{ TODO:
+   - Plugins: https://pushjs.org/docs/plugins }
+
+type
+
+  { TPushFunction }
+
+  TPushFunction = reference to procedure;
+
+  { TPushOptions }
+
+  TPushOptions = class external name 'Object'
+    // The body text of the notification
+    body: string;
+    // Data to pass to ServiceWorker notifications
+    data: JSValue;
+    // Can be either the URL to an icon image or an array containing 16x16 and 32x32 pixel icon images (see above).
+    icon: string;
+    // A relative URL path to navigate to when the user clicks on the notification on mobile (e.g. if you want users
+    // to navigate to your page http://example.com/page, then the relative URL is just page). If the page is already
+    // open in the background, then the browser window will automatically become focused. Requires the serviceWorker.js
+    // file to be present on your server to work.
+    link: string;
+    // When set to true, the notification will not close unless the user manually closes or clicks on it
+    requireInteraction: Boolean;
+    // Unique tag used to identify the notification. Can be used to later close the notification manually.
+    tag: string;
+    // Time in milliseconds until the notification closes automatically
+    timeout: Integer;
+    // An array of durations for a mobile device receiving the notification to vibrate. For example, [200, 100] would
+    // vibrate first for 200 milliseconds, pause, then continue for 100 milliseconds. For more information, see below.
+    // Available in Mobile Chrome only.
+    vibrate: Boolean;
+    // Specifies whether the notification should be silent, i.e. no sounds or vibrations should be issued, regardless
+    // of the device settings.
+    // Supported only in Chrome 43.0 or higher.
+    silent: Boolean;
+    // Callback to execute when the notification is clicked
+    onClick: TPushFunction;
+    // Callback to execute when if the notification throws an error
+    onError: TPushFunction;
+    // Creates new push options
+    constructor new;
+  end;
+
+  { TPushFallbackPayload }
+
+  TPushFallbackPayload = class external name 'Object'
+    // Notification title
+    title: string;
+    // Notification body
+    body: string;
+    // Notification tag
+    tag: string;
+    // Notification icon
+    icon: string;
+  end;
+
+  { TPushParamsFallback }
+
+  TPushParamsFallback = reference to procedure(payload: TPushFallbackPayload);
+
+  { TPushParams }
+
+  TPushParams = class external name 'Object'
+    // Sets a custom service worker script
+    serviceWorker: string;
+    // Code that executes on browsers with no notification support
+    // "payload" is an object containing the
+    // title, body, tag, and icon of the notification
+    fallback: TPushParamsFallback;
+  end;
+
+  { TPushPermission }
+
+  TPushPermission = class external name 'Object'
+  private
+    FDEFAULT: string; external name 'DEFAULT';
+    FGRANTED: string; external name 'GRANTED';
+    FDENIED: string; external name 'DENIED';
+  public
+    // Requests permission for desktop notifications
+    procedure request(
+      // Function to execute once permission is granted
+      onGranted: TPushFunction;
+      // Function to execute once permission is denied
+      onDenied: TPushFunction);
+    // Returns whether Push has been granted permission to run
+    function has: Boolean;
+    // Gets the permission level
+    function get: string;
+    // 'default'
+    property DEFAULT: string read FDEFAULT;
+    // 'granted'
+    property GRANTED: string read FGRANTED;
+    // 'denied'
+    property DENIED: string read FDENIED;
+  end;
+
+  { TPush }
+
+  TPush = class external name 'Push' (TJSPromise)
+  private class var
+    FPermission: TPushPermission; external name 'Permission';
+  public
+    // Creates and displays a new notification
+    class function create(
+      // Notification title
+      const title: string): TPush; overload; external name 'create';
+    // Creates and displays a new notification
+    class function create(
+      // Notification title
+      const title: string;
+      // Notification options
+      params: TPushOptions): TPush; overload; external name 'create';
+    // Returns the notification count
+    class function count: Integer;
+    // Closes a notification with the given tag
+    // Return boolean denoting success
+    class function close(
+      // Tag of the notification to close
+      const tag: string): Boolean;
+    // Clears all notifications
+    // Return boolean denoting whether the clear was successful in closing all notifications
+    class function clear: Boolean;
+    // Denotes whether Push is supported in the current browser
+    class function supported: Boolean;
+    // Modifies settings or returns all settings if no parameter passed
+    class procedure config(params: TPushParams);
+    // Permission object
+    class property Permission: TPushPermission read FPermission;
+  end;
+
+implementation
+
+end.