Tiny Push (jQuery plugin)

Легкий jquery плагин для создания уведомлений на сайте в стиле macOS

Установка

Bower

bower install tinypush-js

NPM

npm install tinypush-js

Подключение

Подключите файлы tinypush.js и tinypush.css в свой проект.

PUG
link(rel='stylesheet', href='./PATH/TO/tinypush.css')
script(src='./PATH/TO/tinypush.js')

HTML
<link rel="stylesheet" href="./PATH/TO/tinypush.css">
<script src="./PATH/TO/tinypush.js"></script>

Разместите стандартный код верстки в начале или конце страницы.

<div class="tinypush__notifications js-tinypush-container">
  <div class="tinypush__message tinypush__message--example js-tinypush-example">
    <div class="tinypush__container-img"><img class="tinypush__message-img js-tinypush-img" src="./img/imessage.png"/></div>
    <div class="tinypush__container-message">
      <h5 class="tinypush__message-title js-tinypush-title">title</h5><small class="tinypush__message-text js-tinypush-text">text</small>
    </div>
    <div class="tinypush__container-buttons js-tinypush-buttons">
      <button class="tinypush__message-button js-tinypush-button">button</button>
    </div>
  </div>
</div>

или подключите pug файл include ./src/pages/tinypush

Иницилизация и данные

Для подключения плагина обратитесь к элементу

// Указываем ссылку на контейнер в верстке
let $tinupushContainer = $('.js-tinypush-container');

// Опции для сообщения
let tinypushOptions = {
    // Ссылка на иконку
    icon: "./img/imessage.png",
    // Заголовок сообщения
    title: "Bob",
    // Текст сообщения
    text: "I love you, Piter!",
    // Список кнопок для обработки событий, может быть пустым
    buttons: [{
        // Текст кнопки
        text: "Ответить",
        // Событие при нажатии
        // obj - обхект самой кнопки
        // tinypushMessage - класс сообщения с данными
        event: function (obj, tinypushMessage) {
            console.log(tinypushMessage.title);
        }
    },
    {
        text: "Удалить",
        event: function (obj, tinypushMessage) {
            tinypushMessage.destroy();
        }
    }
    ],
    // Время, через которое скрыть сообщение
    timeout: 10000
}

// Иницилизация плагина с параметрами
let $tinypushMessage = $tinupushContainer.tinypush(tinypushOptions);
// Выводим сообщение
$tinypushMessage.push();