A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://github.com/sciactive/pnotify/tree/v4 below:

GitHub - sciactive/pnotify at v4

PNotify is a vanilla JavaScript notification and confirmation/prompt library. PNotify can provide desktop notifications based on the Web Notifications spec with fall back to an in-browser notice.

This README is for an old version of PNotify.

Upgrade to the latest version of PNotify to get new features and fixes.

You can get PNotify using NPM or Yarn. (You can also use jsDelivr or UNPKG.)

npm install --save pnotify@4

# If you plan to use Material style:
npm install --save material-design-icons

# If you plan to use the Animate module:
npm install --save animate.css

# If you plan to use the NonBlock module:
npm install --save nonblockjs

Inside the pnotify module directory:

In addition to the JS, be sure to include a PNotify style.

PNotify in Svelte. Import the Svelte files from src:

import PNotify from 'pnotify/src/PNotify.html';
import PNotifyButtons from 'pnotify/src/PNotifyButtons.html';

PNotify.alert('Notice me, senpai!');

PNotify in React. Import the ES modules from dist:

import PNotify from 'pnotify/dist/es/PNotify';
import PNotifyButtons from 'pnotify/dist/es/PNotifyButtons';

PNotify.alert('Notice me, senpai!');

PNotify in Angular. Import the ES modules from dist and initiate the modules:

import PNotify from 'pnotify/dist/es/PNotify';
import PNotifyButtons from 'pnotify/dist/es/PNotifyButtons';

//...
export class WhateverComponent {
  constructor() {
    PNotifyButtons; // Initiate the module. Important!
    PNotify.alert('Notice me, senpai!');
  }
}

For IE support, see this issue.

PNotify in Angular as an injectable service:

// pnotify.service.ts
import { Injectable } from '@angular/core';
import PNotify from 'pnotify/dist/es/PNotify';
import PNotifyButtons from 'pnotify/dist/es/PNotifyButtons';

@Injectable()
export class PNotifyService {
  getPNotify() {
    PNotifyButtons; // Initiate the module. Important!
    return PNotify;
  }
}

// whatever.module.ts
//...
import { PNotifyService } from './pnotify.service';
@NgModule({
  declarations: [...],
  imports: [...],
  providers: [PNotifyService],
  bootstrap: [...]
})
export class WhateverModule {}

// whatever.component.ts
import { PNotifyService } from './pnotify.service';
//...
export class WhateverComponent {
  pnotify = undefined;
  constructor(pnotifyService: PNotifyService) {
    this.pnotify = pnotifyService.getPNotify();
    this.pnotify.alert('Notice me, senpai!');
  }
}

PNotify in AngularJS. Import the UMD modules from dist:

var angular = require('angular');
var PNotify = require('pnotify/dist/umd/PNotify');
var PNotifyButtons = require('pnotify/dist/umd/PNotifyButtons');

angular.module('WhateverModule', [])
  .value('PNotify', PNotify)
  .controller('WhateverController', ['PNotify', function(PNotify) {
    PNotify.alert('Notice me, senpai!');
  }]);

PNotify in vanilla ECMAScript 5. Include the IIFE scripts from dist:

<script type="text/javascript" src="node_modules/pnotify/dist/iife/PNotify.js"></script>
<script type="text/javascript" src="node_modules/pnotify/dist/iife/PNotifyButtons.js"></script>
<script type="text/javascript">
  PNotify.alert('Notice me, senpai!');
</script>

PNotify in vanilla ECMAScript 6+. Include the ES modules from dist:

import PNotify from 'node_modules/pnotify/dist/es/PNotify.js';
import PNotifyButtons from 'node_modules/pnotify/dist/es/PNotifyButtons.js';

PNotify.alert('Notice me, senpai!');

The default, standalone theme, Bright Theme. Include the CSS file in your page:

<link href="node_modules/pnotify/dist/PNotifyBrightTheme.css" rel="stylesheet" type="text/css" />

The Material Style module. Requires material-design-icons. Include the module in your JS, and set it as the default:

import PNotifyStyleMaterial from 'pnotify/dist/es/PNotifyStyleMaterial.js';
// or
var PNotifyStyleMaterial = require('pnotify/dist/umd/PNotifyStyleMaterial.js');

// Set default styling.
PNotify.defaults.styling = 'material';
// This icon setting requires the Material Icons font. (See below.)
PNotify.defaults.icons = 'material';

To use the Material Style icons, include the Material Design Icons Font in your page.

# The official Google package:
npm install --save material-design-icons

# OR, An unofficial package that only includes the font:
npm install --save material-design-icon-fonts
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css" />

Alternatively, you can use the Google Fonts CDN:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

To set Bootstrap as the default style, include the appropriate line(s) from below after you import PNotify:

PNotify.defaults.styling = 'bootstrap3'; // Bootstrap version 3
PNotify.defaults.icons = 'bootstrap3'; // glyphicons
// or
PNotify.defaults.styling = 'bootstrap4'; // Bootstrap version 4

To set Font Awesome as the default icons, include the appropriate line from below after you import PNotify:

PNotify.defaults.icons = 'fontawesome4'; // Font Awesome 4
// or
PNotify.defaults.icons = 'fontawesome5'; // Font Awesome 5

To make a notice, use the factory functions:

// Manually set the type.
PNotify.alert({
  text: "I'm an alert.",
  type: 'notice'
});

// Automatically set the type.
PNotify.notice({
  text: "I'm a notice."
});
PNotify.info({
  text: "I'm an info message."
});
PNotify.success({
  text: "I'm a success message."
});
PNotify.error({
  text: "I'm an error message."
});

PNotify options and default values.

PNotify.defaults = {

}

PNotify.defaultStack = {
  dir1: 'down',
  dir2: 'left',
  firstpos1: 25,
  firstpos2: 25,
  spacing1: 36,
  spacing2: 36,
  push: 'bottom',
  context: document.body
}

Learn more about stacks.

PNotify.defaults.width = '400px';

Changing a default for modules can be done in a couple ways.

// This will change the default for every notice, and is the recommended way.
PNotify.modules.History.defaults.maxInStack = 10;

// This will change the default only for notices that don't have a `modules` option.
PNotify.defaults.modules = {
  History: {
    maxInStack: 10
  }
};

Desktop: {

}

Buttons: {

}

ℹ️ In v4, it's no longer possible to show closer/sticker buttons when the notice is nonblocking.

Requires NonBlock.js 1.0.8 or higher.

It is also deprecated and unnecessary in v4. All it does is add the 'nonblock' class to your notice. You can do the same yourself with addClass: 'nonblock'.

NonBlock: {

}

Mobile: {

}

Requires Animate.css.

Animate: {

}

The Animate module also creates a method, attention, on notices which accepts an attention grabber class and an animation completed callback.

Confirm: {

buttons: [
  {
    text: 'Ok',
    textTrusted: false,
    addClass: '',
    primary: true,
    // Whether to trigger this button when the user hits enter in a single line
    // prompt. Also, focus the button if it is a modal prompt.
    promptTrigger: true,
    click: (notice, value) => {
      notice.close();
      notice.fire('pnotify.confirm', {notice, value});
    }
  },
  {
    text: 'Cancel',
    textTrusted: false,
    addClass: '',
    click: (notice) => {
      notice.close();
      notice.fire('pnotify.cancel', {notice});
    }
  }
]

}

Because the default buttons fire notice events on confirmation and cancellation, you can listen for them like this:

const notice = PNotify.alert({
  title: 'Confirmation Needed',
  text: 'Are you sure?',
  hide: false,
  modules: {
    Confirm: {
      confirm: true
    }
  }
});
notice.on('pnotify.confirm', () => {
  // User confirmed, continue here...
});
notice.on('pnotify.cancel', () => {
  // User canceled, continue here...
});

History: {

}

The History module also has two methods:

ℹ️ In v4, the History module can no longer make a dropdown for you. But hey, it's smaller now.

The callback options all expect the value to be a callback function. If the function returns false on the beforeOpen or beforeClose callback, that event will be canceled.

Callbacks: {

}

Static Methods and Properties Instance Methods and Properties

A stack is an object used to determine where to position notices.

Stack properties:

Stack behavior:

⚠️ Calling something like PNotify.alert({text: 'notice', stack: {dir1: 'down', firstpos1: 25}}); may not do what you want. It will create a notice, but that notice will be in its own stack and will overlap other notices.

Here is an example stack with comments to explain. You can play with it here.

const stackBottomModal = {
  dir1: 'up', // With a dir1 of 'up', the stacks will start appearing at the bottom.
  // Without a `dir2`, this stack will be horizontally centered, since the `dir1` axis is vertical.
  firstpos1: 25, // The notices will appear 25 pixels from the bottom of the context.
  // Without a `spacing1`, this stack's notices will be placed 25 pixels apart.
  push: 'top', // Each new notice will appear at the bottom of the screen, which is where the 'top' of the stack is. Other notices will be pushed up.
  modal: true, // When a notice appears in this stack, a modal overlay will be created.
  overlayClose: true, // When the user clicks on the overlay, all notices in this stack will be closed.
  context: document.getElementById('page-container') // The notices will be placed in the 'page-container' element.
};

If you just want to position a single notice programmatically, and don't want to add any other notices into the stack, you can use something like this:

PNotify.alert({
  text: "Notice that's positioned in its own stack.",
  stack: {
    dir1: 'down', dir2: 'right', // Position from the top left corner.
    firstpos1: 90, firstpos2: 90 // 90px from the top, 90px from the left.
  }
});
Licensing and Additional Info

Copyright 2009-2020 Hunter Perrin Copyright 2015 Google, Inc.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

See http://sciactive.com/pnotify/ for more information, and demos.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4