OSCHINA-MIRROR/jaywcjlove-iNotify

JavaScript реализация мигания заголовка браузера, прокрутки, голосовых подсказок, уведомлений в Chrome/Safari/Firefox/IE. Нет зависимостей. Не конфликтует с любыми JavaScript библиотеками или фреймворками. Имеет разумный размер 5.05кБ (gzip: 1.75кБ). Официальная документация предварительный просмотр.

Установка

На вашей системе должна быть установлена Node.js.

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

⚠️: Откройте на сервере. Вы можете использовать ssr для быстрого создания сервиса.

Использование```js

import Notify from "@wcjiang/notify";


```markdown
const уведомление = new Уведомление({
  сообщение: "Сообщение есть.", // заголовок страницы.
  эффект: "flashing", // flashing | scrolling, мигание или прокрутка
  открытьURL: "https://github.com/jaywcjlove/iNotify", // Нажмите на всплывающее окно, чтобы открыть адрес соединения
  пощелкать: () => {
    // Нажмите на событие щелчка всплывающего окна
    // Программное закрытие уведомления.
    уведомление.закрыть();
    console.log("---");
  },
  // Опциональное воспроизведение звука
  аудио: {
    // Вы можете использовать массивы для передачи файлов звуковых данных в нескольких форматах.
    файл: ["msg.mp4", "msg.mp3", "msg.wav"],
    // В следующий раз также работает.
    // файл: 'msg.mp4'
  },
  // Темп мигания заголовка или скорость прокрутки
  интервал: 1000,
  отключитьИконку: false, // Опционально, значение по умолчанию - false, если true, больше не перезаписывает исходную иконку
  // Опционально, значение по умолчанию - зелёный фон белым текстом.  Иконка
  обновитьИконку: {
    // цвет шрифта иконки
    textColor: "#fff",
    // Цвет фона, установите цвет фона прозрачным, установите значение на "transparent"
    backgroundColor: "#2F9A00",
  },
  // Опционально, уведомления браузера Chrome,
  // По умолчанию не заполняется нижеследующее содержимое
  уведомление: {
    заголовок: "Уведомление!", // Установите заголовок уведомления
    иконка: "", // Установите иконку уведомления, По умолчанию используется иконка
    содержимое: "У вас новое сообщение!",
  },
});
``````markdown
", // Установите содержимое сообщения
},
});

notify.player();
```Или вручную скачайте и подключите **notify.js** в ваш HTML, его также можно скачать через [UNPKG](https://unpkg.com/@wcjiang/notify/dist/)：

```html
<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>

Опции

message: String, заголовок страницы
effect: String, flash | scroll | favicon, мигание или прокрутка
audio: Необязательный звук воспроизведения
- file: String/Array, вы можете использовать массивы для передачи аудиофайлов в нескольких форматах.
interval: Число, скорость мигания заголовка или скорости прокрутки.
openurl: String, адрес соединения при нажатии на попап окно
onclick: Function, событие при клике на попап окно
updateFavicon: Необязательный, по умолчанию зелёный фон белым текстом. Favicon
- textColor: String, цвет шрифта favicon.
- backgroundColor: Цвет фона, установите цвет фона прозрачным, установите значение "transparent".
notification: Необязательный уведомление браузера Chrome, По умолчанию не заполняется следующее содержание
- title: Установка заголовка уведомления iNotify.
- icon: Установка значка уведомления, По умолчанию favicon.
- body: Установка содержимого сообщения.

isPermission

Определение, заблокирован ли браузер от уведомлений.

notify.isPermission();

Настройки звука

player

Проигрывание звука.

notify.player();

loopPlay

Постоянное проигрывание звука.```js notify.loopPlay();


### stopPlay

Остановка проигрывания звука.

```js
notify.stopPlay();

setURL

Установка URL воспроизведения звука.

notify.setURL("msg.mp3"); // Установка одного
notify.setURL(["msg.mp3", "msg.ogg", "msg.mp4"]); // Установка нескольких

Заголовок

Последняя версия по умолчанию не играет анимацию мигания заголовка. После инициализации вам нужно вызвать метод setTitle(true), чтобы играть анимацию заголовка.

setTitle

Установка заголовка.

notify.setTitle(true); // Проигрывание анимации
notify.setTitle("Новый заголовок"); // Мигание нового заголовка
notify.setTitle(); // Очистка мигания показать оригинальный заголовок

setInterval

Установка временного интервала.

notify.setInterval(2000);

close

Программно закрывает уведомление.

notify.close();

addTimer

Добавляет счетчик.

notify.addTimer();

clearTimer

Очищает счетчик.

notify.clearTimer();

Изменение значка

setFavicon

Устанавливает icon, чтобы отображать цифры или текст.

notify.setFavicon(10);

setFaviconColor

Устанавливает цвет текста в icon.

notify.setFaviconColor("#0043ff");

setFaviconBackgroundColor

Устанавливает цвет фона текста в icon.

notify.setFaviconBackgroundColor("#0043ff");
// Установка шрифта и цвета фона
notify.setFaviconColor("#f5ff00").setFaviconBackgroundColor("red");

faviconClear

Очищает цифровое отображение оригинального icon.

notify.faviconClear();

Уведомление в Chrome

notify

Появляется уведомление в Chrome, а параметры передаются по умолчанию...```js notify.notify(); notify.notify({ title: "Новое уведомление", body: "Гром, начинается дождь...", openurl: "https://jaywcjlove.github.io", onclick: function () { console.log("на клик"); }, onshow: function () { console.log("показано"); }, });


- `title` Заголовок уведомления, который будет отображен.
- `dir` Направление текста; его значение может быть auto (автоматически), ltr (слева направо) или rtl (справа налево).
- `icon` URL-адрес картинки, которая будет использоваться для отображения значка уведомления.
- `body` Дополнительная строка, отображаемая в уведомлении.
- `openurl` Клик по ссылке открывает указанный URL.
- `onclick` Вызывается каждый раз, когда пользователь нажимает на уведомление.
- `onshow` Вызывается при появлении уведомления.
- `onerror` Вызывается всякий раз, когда уведомление сталкивается с ошибкой.
- `onclose` Вызывается при закрытии уведомления пользователем.

## Прочее

`notify.init().title;` Получает заголовок.

## Примеры

### Пример 1

```js
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("Есть новое сообщение!");
  } else if (num > 99) {
    notify.setFavicon("..");
    notify.setTitle("Есть новое сообщение!");
  }
}

Пример 2

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

Пример 3```js

var iN = new Notify({ effect: "flash", interval: 500, message: "У вас новое сообщение!", updateFavicon: { // Optional, defaults to green background with white text textColor: "#fff", // color of the text in the favicon backgroundColor: "#2F9A00", // color of the background in the favicon }, }).setFavicon(10);


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

Пример 5

var iN = new Notify({
  effect: "flash",
  interval: 500,
  message: "У вас новое сообщение!",
  audio: {
    file: "msg.mp4",
  },
})
  .setFavicon(10)
  .player();

Пример 6

var iN = new Notify({
  effect: "flash",
  interval: 500,
  message: "У вас новое сообщение!",
  audio: {
    file: "msg.mp4", // Вы можете использовать массивы для передачи файлов аудио в нескольких форматах.
  },
  notification: {
    title: "Уведомление!", // Установка заголовка уведомления
    icon: "", // Установка значка уведомления, по умолчанию используется favicon
    body: "У вас есть новое сообщение!", // Установка содержимого сообщения
  },
})
  .setFavicon(10)
  .player();

// Отображается уведомление Chrome, и параметры принимаются по умолчанию...
iN.notify();

iN.notify({
  title: "Уведомление!", // Установка заголовка уведомления
  body: "У вас есть новое сообщение!", // Установка содержимого сообщения
});

Пример 7

var iN = new Notify({
  effect: "flash",
  interval: 500,
  message: "У вас новое сообщение!",
  audio: {
    file: ["msg.mp4", "msg.mp3", "msg.wav"],
  },
  notification: {
    title: "Уведомление!", // Установка заголовка уведомления
    body: "У вас есть новое сообщение!", // Установка содержимого сообщения
  },
});

iN.setFavicon(10).player();

var n = new Notify();
n.init({
  effect: "flash",
  interval: 500,
  message: "У вас новое сообщение!",
  audio: {
    file: ["openSub.mp4", "openSub.mp3", "openSub.wav"],
  },
  notification: {
    title: "Уведомление!",
    icon: "",
    body: "У вас есть новое сообщение!",
  },
});

n.setFavicon(10).player();
```## Лицензия

[MIT © Kenny Wong](https://github.com/jaywcjlove/iNotify/blob/master/MIT-LICENSE)