notice.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
  1. (function webpackUniversalModuleDefinition(root, factory) {
  2. if(typeof exports === 'object' && typeof module === 'object')
  3. module.exports = factory();
  4. else if(typeof define === 'function' && define.amd)
  5. define("NoticeJs", [], factory);
  6. else if(typeof exports === 'object')
  7. exports["NoticeJs"] = factory();
  8. else
  9. root["NoticeJs"] = factory();
  10. })(typeof self !== 'undefined' ? self : this, function() {
  11. return /******/ (function(modules) { // webpackBootstrap
  12. /******/ // The module cache
  13. /******/ var installedModules = {};
  14. /******/
  15. /******/ // The require function
  16. /******/ function __webpack_require__(moduleId) {
  17. /******/
  18. /******/ // Check if module is in cache
  19. /******/ if(installedModules[moduleId]) {
  20. /******/ return installedModules[moduleId].exports;
  21. /******/ }
  22. /******/ // Create a new module (and put it into the cache)
  23. /******/ var module = installedModules[moduleId] = {
  24. /******/ i: moduleId,
  25. /******/ l: false,
  26. /******/ exports: {}
  27. /******/ };
  28. /******/
  29. /******/ // Execute the module function
  30. /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  31. /******/
  32. /******/ // Flag the module as loaded
  33. /******/ module.l = true;
  34. /******/
  35. /******/ // Return the exports of the module
  36. /******/ return module.exports;
  37. /******/ }
  38. /******/
  39. /******/
  40. /******/ // expose the modules object (__webpack_modules__)
  41. /******/ __webpack_require__.m = modules;
  42. /******/
  43. /******/ // expose the module cache
  44. /******/ __webpack_require__.c = installedModules;
  45. /******/
  46. /******/ // define getter function for harmony exports
  47. /******/ __webpack_require__.d = function(exports, name, getter) {
  48. /******/ if(!__webpack_require__.o(exports, name)) {
  49. /******/ Object.defineProperty(exports, name, {
  50. /******/ configurable: false,
  51. /******/ enumerable: true,
  52. /******/ get: getter
  53. /******/ });
  54. /******/ }
  55. /******/ };
  56. /******/
  57. /******/ // getDefaultExport function for compatibility with non-harmony modules
  58. /******/ __webpack_require__.n = function(module) {
  59. /******/ var getter = module && module.__esModule ?
  60. /******/ function getDefault() { return module['default']; } :
  61. /******/ function getModuleExports() { return module; };
  62. /******/ __webpack_require__.d(getter, 'a', getter);
  63. /******/ return getter;
  64. /******/ };
  65. /******/
  66. /******/ // Object.prototype.hasOwnProperty.call
  67. /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
  68. /******/
  69. /******/ // __webpack_public_path__
  70. /******/ __webpack_require__.p = "dist/";
  71. /******/
  72. /******/ // Load entry module and return exports
  73. /******/ return __webpack_require__(__webpack_require__.s = 2);
  74. /******/ })
  75. /************************************************************************/
  76. /******/ ([
  77. /* 0 */
  78. /***/ (function(module, exports, __webpack_require__) {
  79. "use strict";
  80. Object.defineProperty(exports, "__esModule", {
  81. value: true
  82. });
  83. var noticeJsModalClassName = exports.noticeJsModalClassName = 'noticejs-modal';
  84. var closeAnimation = exports.closeAnimation = 'noticejs-fadeOut';
  85. var Defaults = exports.Defaults = {
  86. title: '',
  87. text: '',
  88. type: 'success',
  89. position: 'topRight',
  90. timeout: 30,
  91. progressBar: true,
  92. closeWith: ['button'],
  93. animation: null,
  94. modal: false,
  95. scroll: null,
  96. callbacks: {
  97. beforeShow: [],
  98. onShow: [],
  99. afterShow: [],
  100. onClose: [],
  101. afterClose: [],
  102. onClick: [],
  103. onHover: [],
  104. onTemplate: []
  105. }
  106. };
  107. /***/ }),
  108. /* 1 */
  109. /***/ (function(module, exports, __webpack_require__) {
  110. "use strict";
  111. Object.defineProperty(exports, "__esModule", {
  112. value: true
  113. });
  114. exports.appendNoticeJs = exports.addListener = exports.CloseItem = exports.AddModal = undefined;
  115. exports.getCallback = getCallback;
  116. var _api = __webpack_require__(0);
  117. var API = _interopRequireWildcard(_api);
  118. function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
  119. var options = API.Defaults;
  120. /**
  121. * @param {NoticeJs} ref
  122. * @param {string} eventName
  123. * @return {void}
  124. */
  125. function getCallback(ref, eventName) {
  126. if (ref.callbacks.hasOwnProperty(eventName)) {
  127. ref.callbacks[eventName].forEach(function (cb) {
  128. if (typeof cb === 'function') {
  129. cb.apply(ref);
  130. }
  131. });
  132. }
  133. }
  134. var AddModal = exports.AddModal = function AddModal() {
  135. if (document.getElementsByClassName(API.noticeJsModalClassName).length <= 0) {
  136. var element = document.createElement('div');
  137. element.classList.add(API.noticeJsModalClassName);
  138. element.classList.add('noticejs-modal-open');
  139. document.body.appendChild(element);
  140. // Remove class noticejs-modal-open
  141. setTimeout(function () {
  142. element.className = API.noticeJsModalClassName;
  143. }, 200);
  144. }
  145. };
  146. var CloseItem = exports.CloseItem = function CloseItem(item) {
  147. getCallback(options, 'onClose');
  148. // Set animation to close notification item
  149. if (options.animation !== null && options.animation.close !== null) {
  150. item.className += ' ' + options.animation.close;
  151. }
  152. setTimeout(function () {
  153. item.remove();
  154. }, 200);
  155. // Close modal
  156. if (options.modal === true && document.querySelectorAll("[noticejs-modal='true']").length >= 1) {
  157. document.querySelector('.noticejs-modal').className += ' noticejs-modal-close';
  158. setTimeout(function () {
  159. document.querySelector('.noticejs-modal').remove();
  160. }, 500);
  161. }
  162. // Remove container
  163. var position = '.' + item.closest('.noticejs').className.replace('noticejs', '').trim();
  164. setTimeout(function () {
  165. if (document.querySelectorAll(position + ' .item').length <= 0) {
  166. document.querySelector(position).remove();
  167. }
  168. }, 500);
  169. };
  170. var addListener = exports.addListener = function addListener(item) {
  171. // Add close button Event
  172. if (options.closeWith.includes('button')) {
  173. item.querySelector('.close').addEventListener('click', function () {
  174. CloseItem(item);
  175. });
  176. }
  177. // Add close by click Event
  178. if (options.closeWith.includes('click')) {
  179. item.style.cursor = 'pointer';
  180. item.addEventListener('click', function (e) {
  181. if (e.target.className !== 'close') {
  182. getCallback(options, 'onClick');
  183. CloseItem(item);
  184. }
  185. });
  186. } else {
  187. item.addEventListener('click', function (e) {
  188. if (e.target.className !== 'close') {
  189. getCallback(options, 'onClick');
  190. }
  191. });
  192. }
  193. item.addEventListener('mouseover', function () {
  194. getCallback(options, 'onHover');
  195. });
  196. };
  197. var appendNoticeJs = exports.appendNoticeJs = function appendNoticeJs(noticeJsHeader, noticeJsBody, noticeJsProgressBar) {
  198. var target_class = '.noticejs-' + options.position;
  199. // Create NoticeJs item
  200. var noticeJsItem = document.createElement('div');
  201. noticeJsItem.classList.add('item');
  202. noticeJsItem.classList.add(options.type);
  203. // Add Header
  204. if (noticeJsHeader && noticeJsHeader !== '') {
  205. noticeJsItem.appendChild(noticeJsHeader);
  206. }
  207. // Add body
  208. noticeJsItem.appendChild(noticeJsBody);
  209. // Add progress bar
  210. if (noticeJsProgressBar && noticeJsProgressBar !== '') {
  211. noticeJsItem.appendChild(noticeJsProgressBar);
  212. }
  213. // Empty top and bottom container
  214. if (['top', 'bottom'].includes(options.position)) {
  215. document.querySelector(target_class).innerHTML = '';
  216. }
  217. // Add open animation
  218. if (options.animation !== null && options.animation.open !== null) {
  219. noticeJsItem.className += ' ' + options.animation.open;
  220. }
  221. // Add Modal
  222. if (options.modal === true) {
  223. noticeJsItem.setAttribute('noticejs-modal', 'true');
  224. AddModal();
  225. }
  226. // Add Listener
  227. addListener(noticeJsItem, options.closeWith);
  228. getCallback(options, 'beforeShow');
  229. getCallback(options, 'onShow');
  230. document.querySelector(target_class).appendChild(noticeJsItem);
  231. getCallback(options, 'afterShow');
  232. return noticeJsItem;
  233. };
  234. /***/ }),
  235. /* 2 */
  236. /***/ (function(module, exports, __webpack_require__) {
  237. "use strict";
  238. Object.defineProperty(exports, "__esModule", {
  239. value: true
  240. });
  241. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  242. var _noticejs = __webpack_require__(3);
  243. var _noticejs2 = _interopRequireDefault(_noticejs);
  244. var _api = __webpack_require__(0);
  245. var API = _interopRequireWildcard(_api);
  246. var _components = __webpack_require__(4);
  247. var _helpers = __webpack_require__(1);
  248. var helper = _interopRequireWildcard(_helpers);
  249. function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
  250. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  251. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  252. var NoticeJs = function () {
  253. /**
  254. * @param {object} options
  255. * @returns {Noty}
  256. */
  257. function NoticeJs() {
  258. var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  259. _classCallCheck(this, NoticeJs);
  260. this.options = Object.assign(API.Defaults, options);
  261. this.component = new _components.Components();
  262. this.on('beforeShow', this.options.callbacks.beforeShow);
  263. this.on('onShow', this.options.callbacks.onShow);
  264. this.on('afterShow', this.options.callbacks.afterShow);
  265. this.on('onClose', this.options.callbacks.onClose);
  266. this.on('afterClose', this.options.callbacks.afterClose);
  267. this.on('onClick', this.options.callbacks.onClick);
  268. this.on('onHover', this.options.callbacks.onHover);
  269. return this;
  270. }
  271. /**
  272. * @returns {NoticeJs}
  273. */
  274. _createClass(NoticeJs, [{
  275. key: 'show',
  276. value: function show() {
  277. var container = this.component.createContainer();
  278. if (document.querySelector('.noticejs-' + this.options.position) === null) {
  279. document.body.appendChild(container);
  280. }
  281. var noticeJsHeader = void 0;
  282. var noticeJsBody = void 0;
  283. var noticeJsProgressBar = void 0;
  284. // Create NoticeJs header
  285. noticeJsHeader = this.component.createHeader(this.options.title, this.options.closeWith);
  286. // Create NoticeJs body
  287. noticeJsBody = this.component.createBody(this.options.text);
  288. // Create NoticeJs progressBar
  289. if (this.options.progressBar === true) {
  290. noticeJsProgressBar = this.component.createProgressBar();
  291. }
  292. //Append NoticeJs
  293. var noticeJs = helper.appendNoticeJs(noticeJsHeader, noticeJsBody, noticeJsProgressBar);
  294. return noticeJs;
  295. }
  296. /**
  297. * @param {string} eventName
  298. * @param {function} cb
  299. * @return {NoticeJs}
  300. */
  301. }, {
  302. key: 'on',
  303. value: function on(eventName) {
  304. var cb = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
  305. if (typeof cb === 'function' && this.options.callbacks.hasOwnProperty(eventName)) {
  306. this.options.callbacks[eventName].push(cb);
  307. }
  308. return this;
  309. }
  310. }]);
  311. return NoticeJs;
  312. }();
  313. exports.default = NoticeJs;
  314. module.exports = exports['default'];
  315. /***/ }),
  316. /* 3 */
  317. /***/ (function(module, exports) {
  318. // removed by extract-text-webpack-plugin
  319. /***/ }),
  320. /* 4 */
  321. /***/ (function(module, exports, __webpack_require__) {
  322. "use strict";
  323. Object.defineProperty(exports, "__esModule", {
  324. value: true
  325. });
  326. exports.Components = undefined;
  327. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  328. var _api = __webpack_require__(0);
  329. var API = _interopRequireWildcard(_api);
  330. var _helpers = __webpack_require__(1);
  331. var helper = _interopRequireWildcard(_helpers);
  332. function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
  333. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  334. var options = API.Defaults;
  335. var Components = exports.Components = function () {
  336. function Components() {
  337. _classCallCheck(this, Components);
  338. }
  339. _createClass(Components, [{
  340. key: 'createContainer',
  341. value: function createContainer() {
  342. var element_class = 'noticejs-' + options.position;
  343. // Create element
  344. var element = document.createElement('div');
  345. element.classList.add('noticejs');
  346. element.classList.add(element_class);
  347. return element;
  348. }
  349. }, {
  350. key: 'createHeader',
  351. value: function createHeader() {
  352. var element = void 0;
  353. if (options.title && options.title !== '') {
  354. element = document.createElement('div');
  355. element.setAttribute('class', 'noticejs-heading');
  356. element.textContent = options.title;
  357. }
  358. // Add close button
  359. if (options.closeWith.includes('button')) {
  360. var close = document.createElement('div');
  361. close.setAttribute('class', 'close');
  362. close.innerHTML = '&times;';
  363. if (element) {
  364. element.appendChild(close);
  365. } else {
  366. element = close;
  367. }
  368. }
  369. return element;
  370. }
  371. }, {
  372. key: 'createBody',
  373. value: function createBody() {
  374. var element = document.createElement('div');
  375. element.setAttribute('class', 'noticejs-body');
  376. var content = document.createElement('div');
  377. content.setAttribute('class', 'noticejs-content');
  378. content.innerHTML = options.text;
  379. element.appendChild(content);
  380. if (options.scroll !== null && options.scroll.maxHeight !== '') {
  381. element.style.overflowY = 'auto';
  382. element.style.maxHeight = options.scroll.maxHeight + 'px';
  383. if (options.scroll.showOnHover === true) {
  384. element.style.visibility = 'hidden';
  385. }
  386. }
  387. return element;
  388. }
  389. }, {
  390. key: 'createProgressBar',
  391. value: function createProgressBar() {
  392. var element = document.createElement('div');
  393. element.setAttribute('class', 'noticejs-progressbar');
  394. var bar = document.createElement('div');
  395. bar.setAttribute('class', 'noticejs-bar');
  396. element.appendChild(bar);
  397. // Progress bar animation
  398. if (options.progressBar === true && typeof options.timeout !== 'boolean' && options.timeout !== false) {
  399. var frame = function frame() {
  400. if (width <= 0) {
  401. clearInterval(id);
  402. var item = element.closest('div.item');
  403. // Add close animation
  404. if (options.animation !== null && options.animation.close !== null) {
  405. // Remove open animation class
  406. item.className = item.className.replace(new RegExp('(?:^|\\s)' + options.animation.open + '(?:\\s|$)'), ' ');
  407. // Add close animation class
  408. item.className += ' ' + options.animation.close;
  409. // Close notification after 0.5s + timeout
  410. var close_time = parseInt(options.timeout) + 500;
  411. setTimeout(function () {
  412. helper.CloseItem(item);
  413. }, close_time);
  414. } else {
  415. // Close notification when progress bar completed
  416. helper.CloseItem(item);
  417. }
  418. } else {
  419. width--;
  420. bar.style.width = width + '%';
  421. }
  422. };
  423. var width = 100;
  424. var id = setInterval(frame, options.timeout);
  425. }
  426. return element;
  427. }
  428. }]);
  429. return Components;
  430. }();
  431. /***/ })
  432. /******/ ]);
  433. });