A RetroSearch Logo

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

Search Query:

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

GitHub - sciactive/pnotify at v3

PNotify is a JavaScript notification plugin, developed by SciActive. PNotify can also provide desktop notifications based on the Web Notifications spec. If desktop notifications are not available or not allowed, PNotify will fall back to displaying the notice as a regular, 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.

jQuery (1.7 or higher)

You can include PNotify using NPM, Yarn, or Bower. NPM is the prefered method.

⚠️ PNotify 3 used to come with a custom download service. That is no longer available, but you can still make custom downloads by running this repo in a PHP server.

Here's how you'd include the files on your page:

<script type="text/javascript" src="node_modules/pnotify/dist/pnotify.js"></script>
<link href="node_modules/pnotify/dist/pnotify.css" media="all" rel="stylesheet" type="text/css" />

Now you can use PNotify like this:

<script type="text/javascript">
  $(function(){
    new PNotify({
      title: 'Regular Notice',
      text: 'Check me out! I\'m a notice.'
    });
  });
</script>

If you are not using any UI library, you can use the included styling, called Bright Theme. It is the default.

If you are using Bootstrap version 3, include this line somewhere before your first notice:

PNotify.prototype.options.styling = "bootstrap3";

If you are using Bootstrap 3 with Font Awesome, include this line somewhere before your first notice:

PNotify.prototype.options.styling = "fontawesome";

A stack is an object which PNotify uses to determine where to position notices. A stack has two mandatory properties, dir1 and dir2. dir1 is the first direction in which the notices are stacked. When the notices run out of room in the window, they will move over in the direction specified by dir2. The directions can be "up", "down", "right", or "left". Stacks are independent of each other, so a stack doesn't know and doesn't care if it overlaps (and blocks) another stack. The default stack, which can be changed like any other default, goes down, then left. Stack objects are used and manipulated by PNotify, and therefore, should be a variable when passed. So, calling something like new PNotify({stack: {"dir1": "down", "dir2": "left"}}); will NOT work. It will create a notice, but that notice will be in its own stack and may overlap other notices.

You can set a stack as modal by setting the "modal" property to true. A modal stack creates an overlay behind it when any of its notices are open. When the last notice within it is removed, the overlay is hidden. If the "overlay_close" property is set to true, then clicking the overlay will cause all of the notices in that stack to be removed.

var stack_topleft = {"dir1": "down", "dir2": "right", "push": "top"};
var stack_bottomleft = {"dir1": "right", "dir2": "up", "push": "top"};
var stack_modal = {"dir1": "down", "dir2": "right", "push": "top", "modal": true, "overlay_close": true};
var stack_bar_top = {"dir1": "down", "dir2": "right", "push": "top", "spacing1": 0, "spacing2": 0};
var stack_bar_bottom = {"dir1": "up", "dir2": "right", "spacing1": 0, "spacing2": 0};
var stack_context = {"dir1": "down", "dir2": "left", "context": $("#stack-context")};

This stack is initially positioned through code instead of CSS.

var stack_bottomright = {"dir1": "up", "dir2": "left", "firstpos1": 25, "firstpos2": 25};

This is done through two extra variables. firstpos1 and firstpos2 are pixel values, relative to a viewport edge. dir1 and dir2, respectively, determine which edge. It is calculated as follows:

To create a stack in the top left, define the stack:

var stack_topleft = {"dir1": "down", "dir2": "right"};

and then add two options to your pnotify call:

addclass: "stack-topleft", // This is one of the included default classes.
stack: stack_topleft

There are several CSS classes included which will position your notices for you:

You can create your own custom position and movement by defining a custom stack.

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 this method, where myXPos and myYPos are pixel values relative to the top left corner of the viewport.

new PNotify({
  text: "Notice that's positioned programmatically in its own stack.",
  stack: {"dir1": "down", "dir2": "right", "firstpos1": myYPos, "firstpos2": myXPos}
});
Configuration Defaults / Options

desktop: {

}

buttons: {

}

nonblock: {

}

mobile: {

}

animate: {

}

The Animate module also creates a method, attention, on notices which accepts an attention grabber class from Animate.css and callback to be called on completion of the animation.

confirm: {

}

history: {

}

The callback options all expect one argument, a function, which will be called when that event occurs. Unlike other modules, they are included in the options object passed to PNotify() just like the core options. If the function returns false on the "before_open" or "before_close" callback, that event will be canceled.

Using PNotify with RequireJS

When they detect AMD/RequireJS, PNotify core defines the named module "pnotify" and PNotify's modules each define names like "pnotify.name". The following example shows the use of the nonblock and desktop modules with RequireJS.

requirejs(['pnotify', 'pnotify.nonblock', 'pnotify.desktop'], function(PNotify){
  PNotify.desktop.permission();
  new PNotify({
    title: 'Desktop Notice',
    text: 'If you\'ve given me permission, I\'ll appear as a desktop notification. If you haven\'t, I\'ll still appear as a regular PNotify notice.',
    desktop: {
      desktop: true
    },
    nonblock: {
      nonblock: true
    }
  });
});
Licensing and Additional Info

PNotify is distributed under the Apache License, Version 2.0.

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

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