mirror of
https://gitlab.com/freepascal.org/fpc/pas2js.git
synced 2025-09-06 12:10:15 +02:00
* PushJS import & demo by Silvio Clecio
This commit is contained in:
michael
parent
f5ec01446e
commit
0c9deb045e
46
demo/pushjs/helloworld.html
Normal file
46
demo/pushjs/helloworld.html
Normal file
@ -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
demo/pushjs/helloworld.lpi
Normal file
100
demo/pushjs/helloworld.lpi
Normal file
@ -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
demo/pushjs/helloworld.lpr
Normal file
30
demo/pushjs/helloworld.lpr
Normal file
@ -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
packages/pushjs/pushjs.js
Normal file
6
packages/pushjs/pushjs.js
Normal file
@ -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
packages/pushjs/pushjs.pas
Normal file
164
packages/pushjs/pushjs.pas
Normal file
@ -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.
|
||||
Loading…
Reference in New Issue
Block a user