Giter Club home page Giter Club logo

inotify's Introduction

iNotify demo preview

JS achieve the browser title flashing, scrolling, voice prompts, Chrome/Safari/FireFox/IE notice. has no dependencies. It not interfere with any JavaScript libraries or frameworks. has a reasonable footprint 5.05kb (gzipped: 1.75kb),Official document demo preview

Installation

You will need Node.js installed on your system.

# v2.x
$ npm install @wcjiang/notify --save
# v1.x
$ npm install title-notify --save

⚠️: open in server. You can use ssr to quickly create a service..

Using

import Notify from "@wcjiang/notify";

const notify = new Notify({
  message: "There is message.", // page title.
  effect: "flash", // flash | scroll, Flashing or scrolling
  openurl: "https://github.com/jaywcjlove/iNotify", // Click on the pop-up window to open the connection address
  onclick: () => {
    // Click on the pop-up window trip event
    // Programmatically closes a notification.
    notify.close();
    console.log("---");
  },
  // Optional playback sound
  audio: {
    // You can use arrays to pass sound files in multiple formats.
    file: ["msg.mp4", "msg.mp3", "msg.wav"],
    // The following is also work.
    // file: 'msg.mp4'
  },
  // Title flashing, or scrolling speed
  interval: 1000,
  disableFavicon: false, // Optional, default false, if true, No longer overwrites the original favicon
  // Optional, default green background white text. Favicon
  updateFavicon: {
    // favicon font color
    textColor: "#fff",
    // Background color, set the background color to be transparent, set the value to "transparent"
    backgroundColor: "#2F9A00",
  },
  // Optional chrome browser notifications,
  // The default is not to fill in the following content
  notification: {
    title: "Notification!", // Set notification title
    icon: "", // Set notification icon, The default is Favicon
    body: "You have a new message!", // Set message content
  },
});

notify.player();

Or manually download and link notify.js in your HTML, It can also be downloaded via UNPKG

<script src="https://unpkg.com/@wcjiang/notify/dist/notify.min.js"></script>
<script type="text/javascript">
  var notify = new Notify({
    effect: "flash",
    interval: 500,
  });
  notify.setFavicon("1");
</script>

option

  • message: String, page title
  • effect: String, flash | scroll | favicon, Flashing or scrolling
  • audio: Optional playback sound
    • file: String/Array, You can use arrays to pass sound files in multiple formats.
  • interval: Number, Title flashing, or scrolling speed.
  • openurl: String, Click on the pop-up window to open the connection address
  • onclick: Function, Click on the pop-up window trip event
  • updateFavicon: Optional, default green background white text. Favicon
    • textColor: String, favicon font color.
    • backgroundColor: Background color, set the background color to be transparent, set the value to "transparent"
  • notification: Optional chrome browser notifications, The default is not to fill in the following content
    • title: Set notification title iNotify
    • icon: Set notification icon, The default is Favicon
    • body: Set message content

isPermission

Determine if the browser bulletin notification is blocked.

notify.isPermission();

Sound Settings

player

Play sound.

notify.player();

loopPlay

Loop the sound.

notify.loopPlay();

stopPlay

Stop playing sound.

notify.stopPlay();

setURL

Set the playback sound URL.

notify.setURL("msg.mp3"); // Set one
notify.setURL(["msg.mp3", "msg.ogg", "msg.mp4"]); // Set multiple

title

The latest version does not play the title blinking animation by default. After initialization, you need to call the setTitle(true) method to play the title animation.

setTitle

Set the title.

notify.setTitle(true); // Play animation
notify.setTitle("New title"); // Flashing new title
notify.setTitle(); // Clear Blinking Show original title

setInterval

Set time interval.

notify.setInterval(2000);

close

Programmatically closes a notification.

notify.close();

addTimer

Add counter

notify.addTimer();

clearTimer

Clear counter.

notify.clearTimer();

Favicon Notice

setFavicon

Set icon to display numbers or text

notify.setFavicon(10);

setFaviconColor

Set icon display text color

notify.setFaviconColor("#0043ff");

setFaviconBackgroundColor

Set icon to display text color

notify.setFaviconBackgroundColor("#0043ff");
// Set font and background color
notify.setFaviconColor("#f5ff00").setFaviconBackgroundColor("red");

faviconClear

Clear digital display original icon.

notify.faviconClear();

Chrome Notice

notify

The chrome notification pops up, and the parameters are not passed as default values...

notify.notify();
notify.notify({
  title: "New notice",
  body: "Thunder, it’s raining...",
  openurl: "https://jaywcjlove.github.io",
  onclick: function () {
    console.log("on click");
  },
  onshow: function () {
    console.log("on show");
  },
});
  • title The notification title that will be displayed.
  • dir The direction of the text; its value can be auto (auto), ltr (left to right), or rtl (right to left).
  • icon The URL of a picture that will be used to display the icon for the notification.
  • body A string that is additionally displayed in the notification.
  • openurl Click to open the specified URL.
  • onclick Triggered whenever the user clicks on the notification.
  • onshow Triggered when the notification is displayed.
  • onerror Triggered whenever a notification encounters an error.
  • onclose Triggered when the user closes the notification.

Other

notify.init().title; Get the title.

Example

Example 1

function iconNotify(num) {
  if (!notify) {
    var notify = new Notify({
      effect: "flash",
      interval: 500,
    });
  }
  if (num === 0) {
    notify.faviconClear();
    notify.setTitle();
  } else if (num < 100) {
    notify.setFavicon(num);
    notify.setTitle("There is new message!");
  } else if (num > 99) {
    notify.setFavicon("..");
    notify.setTitle("There is new message!");
  }
}

Example 2

var notify = new Notify({
  effect: "flash",
  interval: 500,
});
notify.setFavicon("1");

Example 3

var iN = new Notify({
  effect: "flash",
  interval: 500,
  message: "There is new message!",
  updateFavicon: {
    // Optional, default green background white
    textColor: "#fff", // favicon font color
    backgroundColor: "#2F9A00", // favicon background color
  },
}).setFavicon(10);

Example 4

var iN = new Notify().setFavicon(5);

Example 5

var iN = new Notify({
  effect: "flash",
  interval: 500,
  message: "There is new message!",
  audio: {
    file: "msg.mp4",
  },
})
  .setFavicon(10)
  .player();

Example 6

var iN = new Notify({
  effect: "flash",
  interval: 500,
  message: "There is new message!",
  audio: {
    file: "msg.mp4", // You can use arrays to pass sound files in multiple formats.
  },
  notification: {
    title: "Notification!", // Set notification title
    icon: "", // Set notification icon, The default is Favicon
    body: "You have a new message!", // Set message content
  },
})
  .setFavicon(10)
  .player();

// The chrome notification pops up, and the parameters are not passed as default values...
iN.notify();

iN.notify({
  title: "Notification!", // Set notification title
  body: "You have a new message!", // Set message content
});

Example 7

var iN = new Notify({
  effect: "flash",
  interval: 500,
  message: "There is new message!",
  audio: {
    file: ["msg.mp4", "msg.mp3", "msg.wav"],
  },
  notification: {
    title: "Notification!", // Set notification title
    body: "You have a new message!", // Set message content
  },
});

iN.setFavicon(10).player();

var n = new Notify();
n.init({
  effect: "flash",
  interval: 500,
  message: "There is new message!",
  audio: {
    file: ["openSub.mp4", "openSub.mp3", "openSub.wav"],
  },
  notification: {
    title: "Notification!",
    icon: "",
    body: "You have a new message!",
  },
});

n.setFavicon(10).player();

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

MIT © Kenny Wong

inotify's People

Contributors

bin20060407 avatar dependabot[bot] avatar jaywcjlove avatar jobbym avatar reaink avatar renovate[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

inotify's Issues

引用

请问在react的项目中怎么引用这个插件呢?

文档有误

iNotice 其实是 Notify

Chrome Notice 的用例 根本就跑不通。

iNotify.notify(); 
iNotify.notify({
  title: 'New notice',
  body: 'Thunder, it’s raining...',
  openurl: 'https://jaywcjlove.github.io',
  onclick: function() {
    console.log('on click')
  },
  onshow: function() {
    console.log('on show')
  },
});

npm 包未定义入口文件

通过 npm install title-notify 安装后("version": "1.0.9"),require("title-notify") 时报错,提示找不到文件。
后来排查了下,发现 package.json 文件中并没有定义 main 入口,而且根目录下也没有定义 index.js

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/ci.yml
  • actions/checkout v4
  • actions/setup-node v4
  • peaceiris/actions-gh-pages v4
  • ncipollo/release-action v1
npm
package.json
  • @kkt/less-modules ^7.4.9
  • @kkt/raw-modules ^7.4.9
  • @kkt/scope-plugin-options ^7.4.9
  • @rollup/plugin-commonjs ^25.0.0
  • @rollup/plugin-json ^6.0.0
  • @rollup/plugin-node-resolve ^15.0.2
  • @rollup/plugin-terser ^0.4.0
  • @uiw/react-github-corners ^1.5.15
  • @uiw/react-markdown-preview ^5.0.0
  • @wcj/dark-mode ~1.0.15
  • bannerjs ^3.0.1
  • classnames ~2.3.2
  • kkt ^7.4.9
  • react ~18.2.0
  • react-dom ~18.2.0
  • rollup ^4.0.0
  • rollup-plugin-sizes ~1.0.5

  • Check this box to trigger a request for Renovate to run again on this repository

Build Error

I'm getting a build error after npm install title-notify --save

Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.


gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 69
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:270:23)
gyp ERR! stack     at emitTwo (events.js:87:13)
gyp ERR! stack     at ChildProcess.emit (events.js:172:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Darwin 14.5.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/Quang/dev/consulting/jason_maclulich/virtwebclient/node_modules/contextify
gyp ERR! node -v v4.2.2
gyp ERR! node-gyp -v v3.0.3
gyp ERR! not ok 
[email protected] /Users/Quang/dev/consulting/jason_maclulich/virtwebclient
└── [email protected] 

npm WARN EPACKAGEJSON [email protected] No license field.
npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "title-notify" "--save"
npm ERR! node v4.2.2
npm ERR! npm  v3.3.12
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script 'node-gyp rebuild'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the contextify package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-gyp rebuild
npm ERR! You can get their info via:
npm ERR!     npm owner ls contextify
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/Quang/dev/consulting/jason_maclulich/virtwebclient/npm-debug.log

wonder if it's because I recently upgraded to node 4.x ?

无法设置ICON 啊

const notify = new INotify({

          // 标题

          message: '有消息了',

          // flash | scroll 闪烁还是滚动

          effect: 'flash',

          // 标题闪烁,或者滚动速度

          interval: 1000,

          notification: {

            title: `${revMsg.content.user.name}给你发送了新消息`,

            icon: revMsg.content.extra.avatar,

            body: revMsg.content.content,

          },

        });

我确定内容是有的。 这个revMsg.content.extra.avatar 中的值是正确的。 是一个图片地址。http://static-avatar-user-cdn.kdjz.com/test/avatar/400408/2016/08/31/7f9f5dff37cf5f1cd3f4e7a581437b7f.jpg

但是弹出的通知窗口却是默认的favicon.ico 是不是只能用.ico 的图片啊?

无法设置data吗

notify.notify({
      title,
      icon: defaultIcon,
      body,
      data: { p: 1 },
      onclick (e) {
        console.log(e)
      }
    })

e 里面data === null

环境支持

是否应该明确指出操作系统、浏览器对此特性的支持

点击桌面通知,切换到浏览器相应的选项卡

请点击我测试一下! 弹出桌面通知,在firefox浏览器中,点击通知会切换到浏览器对应的选项卡中,在chrome中点击通知没有反应,怎么实现点击chrome的通知切换到对应的选项卡中。

No sound alert

我已经创建了声音提醒以及log, 一直有播放声音。但是今天我接受到了四个case, 只有三次声音提醒了··· 有一次没有提醒,但是log里面记录到audio标签是创建了出来的~~ audio标签创建出来但没有播放的原因是?
chrome的setting里面是允许播放的~~~

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.