Skip to content

Commit

Permalink
Merge pull request #17 from andreszs/master
Browse files Browse the repository at this point in the history
Added browser platform
  • Loading branch information
greybax committed May 20, 2022
2 parents 7d74405 + 5bc7045 commit 47e5e8f
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 6 deletions.
26 changes: 22 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ NPM Package: [cordova-plugin-native-spinner](https://www.npmjs.com/package/cordo
:fire: **This Plugin** is officially using in [ionic-native](https://ionicframework.com/docs/native/spinner-dialog/) :fire:

## Platforms
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Android_robot.svg/511px-Android_robot.svg.png" width="48px" height="48px" alt="Android logo"> | <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/2000px-Apple_logo_black.svg.png" width="48px" height="48px" alt="iOS logo"> | <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Windows_logo_-_2012.svg/2000px-Windows_logo_-_2012.svg.png" width="48px" height="48px" alt="Windows logo"> | <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Windows_logo_-_2012.svg/2000px-Windows_logo_-_2012.svg.png" width="48px" height="48px" alt="Windows logo">
|:---:|:---:|:---:|:---:|
| 4.1+ ✔ | 10+ ✔ | Windows Phone 8.1+ ✔ | 10+ ✔ |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Android_robot_head.svg/121px-Android_robot_head.svg.png" width="48px" height="27px" alt="Android logo"> | <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/80px-Apple_logo_black.svg.png" width="39px" height="48px" alt="iOS logo"> | <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Windows_logo_-_2012.svg/2000px-Windows_logo_-_2012.svg.png" width="48px" height="48px" alt="Windows logo"> | <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Windows_logo_-_2012.svg/2000px-Windows_logo_-_2012.svg.png" width="48px" height="48px" alt="Windows logo"> | <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Internet_Explorer_10%2B11_logo.svg/65px-Internet_Explorer_10%2B11_logo.svg.png" width="48px" height="48px" alt="iOS logo">
|:---:|:---:|:---:|:---:|:---:|
| 4.1+ ✔ | 10+ ✔ | WP 8.1+ ✔ | 10+| Browser|

## Installation

Expand All @@ -39,24 +39,27 @@ cordova prepare
* and **tons fixes** from here https://github.com/Paldom/SpinnerDialog/issues ...

## Methods

- `SpinnerDialog.show`
- `SpinnerDialog.hide`

#### SpinnerDialog.show

SpinnerDialog.show([title], [message], [cancelCallback])

- __title__: Spinner title (Android only). Optional. _(String)_
- __message__: Spinner message. Optional. _(String)_
- __cancelCallback__: Callback to invoke when spinner cancel event fired (tap or Android hardware back button event). If set, spinner dialog will be fixed, you should explicitly call `SpinnerDialog.hide`. Due to legacy reasons you can provide boolean value (true/false) to set spinner not cancelable. Optional, defaults to `false`. _(Function/Boolean)_

#### SpinnerDialog.hide

SpinnerDialog.hide([wpStatusbar]);

- __wpStatusbar__: Indicates whether to keep the status bar visible. (Windows 10 Mobile only). If set to `true`, only the spinner will be hidden, the status bar will remain visible if it was already visible. Optional, defaults to `false`. _(Boolean)_

## Usage

```
```javascript
// Show spinner dialog
SpinnerDialog.show();

Expand Down Expand Up @@ -91,9 +94,24 @@ SpinnerDialog.hide();
```

## Quirks

* Cordova 5.0 or higher is required for Windows 10 support.
* Windows 10 Mobile or Windows Phone 8.1 is required as desktop doesn't support StatusBar.

## Screenshots

### Android

<img src="https://github.com/andreszs/cordova-plugin-demos/blob/main/com.andreszs.spinner.demo/screenshots/android/spinner-2.png?raw=true" width="240" />

### Browser

<img src="https://github.com/andreszs/cordova-plugin-demos/blob/main/com.andreszs.spinner.demo/screenshots/browser/spinner-2.png?raw=true" width="240" />

## Plugin demo app

Demo app source code to test the plugin is available at the [cordova-plugin-demos repository](https://github.com/andreszs/cordova-plugin-demos/tree/main/com.andreszs.spinner.demo "cordova-plugin-demos repository") by Andrés Zsögön.

## License
See "LICENSE".
Based on https://github.com/Paldom/SpinnerDialog with lots of awesome improvements! :star: :tada: :rocket: :star:
Expand Down
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "cordova-plugin-native-spinner",
"version": "1.1.3",
"version": "1.1.4",
"description": "A Cordova plugin for showing a progress indicator based on Paldom/SpinnerDialog",
"author": "Aleksandr Filatov",
"license": "MIT",
Expand All @@ -12,6 +12,7 @@
"id": "cordova-plugin-native-spinner",
"platforms": [
"android",
"browser",
"ios",
"wp8",
"windows"
Expand All @@ -30,6 +31,7 @@
"notification",
"ecosystem:cordova",
"cordova-android",
"cordova-browser",
"cordova-ios",
"cordova-wp8",
"cordova-windows",
Expand Down
15 changes: 14 additions & 1 deletion plugin.xml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<?xml version='1.0' encoding='utf-8'?>
<plugin xmlns="https://cordova.apache.org/ns/plugins/1.0"
id="cordova-plugin-native-spinner"
version="1.1.3">
version="1.1.4">
<name>Native Spinner</name>
<description>
Cordova plugin for showing a progress indicator based on Paldom/SpinnerDialog. for Android, iOS, Windows 10 and Windows Phone 8.
Expand Down Expand Up @@ -30,6 +30,19 @@
<source-file src="src/android/SpinnerDialog.java" target-dir="src/com/greybax/spinnerdialog" />
<source-file src="src/android/CallbackProgressDialog.java" target-dir="src/com/greybax/spinnerdialog" />
</platform>

<!-- browser -->
<platform name="browser">
<config-file target="config.xml" parent="/*">
<feature name="SpinnerDialog">
<param name="browser-package" value="SpinnerDialog"/>
</feature>
</config-file>
<js-module src="src/browser/SpinnerDialogProxy.js" name="SpinnerDialogProxy">
<runs/>
</js-module>
<asset src="src/browser/spinner.gif" target="spinner.gif"/>
</platform>

<!-- ios -->
<platform name="ios">
Expand Down
88 changes: 88 additions & 0 deletions src/browser/SpinnerDialogProxy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@

var HIGHEST_POSSIBLE_Z_INDEX = 2147483647;
var SPINNER_BG_DIV_ID = 'cordova_spinner_plugin_bg';
var SPINNER_FG_DIV_ID = 'cordova_spinner_plugin_fg';
var SPINNER_ICON_SRC = 'spinner.gif';

function showSpinner(onSuccess, onFailure, opts) {
/* translucid background div */
var spinnerBg = document.createElement('div');
spinnerBg.id = SPINNER_BG_DIV_ID;
spinnerBg.style.backgroundColor = '#00000088';
spinnerBg.style.position = 'fixed';
spinnerBg.style.top = '0';
spinnerBg.style.bottom = '0';
spinnerBg.style.left = '0';
spinnerBg.style.right = '0';
spinnerBg.style.zIndex = (HIGHEST_POSSIBLE_Z_INDEX - 1);
document.body.appendChild(spinnerBg);

/* foreground text div */
var spinnerFg = document.createElement('div');
spinnerFg.id = SPINNER_FG_DIV_ID;
spinnerFg.setAttribute('style', 'transform: translateY(-50%);');
spinnerFg.style.backgroundColor = '#424242';
spinnerFg.style.boxShadow = 'rgba(0,0,0,0.5) 0px 4px 24px';
spinnerFg.style.borderRadius = '3px';
spinnerFg.style.marginLeft = 'auto';
spinnerFg.style.marginRight = 'auto';
spinnerFg.style.padding = '1.5em';
spinnerFg.style.position = 'relative';
spinnerFg.style.top = '50%';
spinnerFg.style.textAlign = 'center';
spinnerFg.style.width = '70%';
spinnerFg.style.zIndex = HIGHEST_POSSIBLE_Z_INDEX;

/* optional title */
if (opts && typeof (opts[0]) === 'string' && opts[0].length > 0) {
var divTitle = document.createElement('div');
divTitle.appendChild(document.createTextNode(opts[0]));
divTitle.style.color = '#FFFFFF';
divTitle.style.fontSize = '20px';
divTitle.style.fontWeight = '600';
divTitle.style.lineHeight = '1.5em';
divTitle.style.textAlign = 'center';
spinnerFg.appendChild(divTitle);
}

/* icon */
var imgIcon = document.createElement('img');
imgIcon.src = SPINNER_ICON_SRC;
imgIcon.style.margin = '8px';
spinnerFg.appendChild(imgIcon);

/* optional message */
if (opts && typeof (opts[1]) === 'string' && opts[1].length > 0) {
var divMessage = document.createElement('div');
divMessage.appendChild(document.createTextNode(opts[1]));
divMessage.style.color = '#E0E0E0';
divMessage.style.fontSize = '14px';
divMessage.style.lineHeight = '1.5em';
divMessage.style.textAlign = 'center';
spinnerFg.appendChild(divMessage);
}

/* optional dismiss on click */
if (opts && typeof (opts[2]) === 'boolean' && opts[2] === false) {
spinnerFg.addEventListener('click', function(){
hideSpinner();
});
}

document.getElementById(SPINNER_BG_DIV_ID).appendChild(spinnerFg);
onSuccess('SUCCESS');
}

function hideSpinner(/*onSuccess, onFailure*/) {
if(document.getElementById(SPINNER_BG_DIV_ID)){
document.getElementById(SPINNER_BG_DIV_ID).remove();
}
/*onSuccess('SUCCESS');*/
}

module.exports = {
show: showSpinner,
hide: hideSpinner
};

require('cordova/exec/proxy').add('SpinnerDialog', module.exports);
Binary file added src/browser/spinner.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 47e5e8f

Please sign in to comment.