控制台应用,yzncms本身基于tp5.1框架,里面的队列用不了,bug,坑
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

notice.js 43KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275
  1. layui.define([], function (exports) {
  2. var $iziToast = {},
  3. PLUGIN_NAME = 'iziToast',
  4. BODY = document.querySelector('body'),
  5. ISMOBILE = (/Mobi/.test(navigator.userAgent)) ? true : false,
  6. ISCHROME = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor),
  7. ISFIREFOX = typeof InstallTrigger !== 'undefined',
  8. ACCEPTSTOUCH = 'ontouchstart' in document.documentElement,
  9. POSITIONS = ['bottomRight','bottomLeft','bottomCenter','topRight','topLeft','topCenter','center'],
  10. THEMES = {
  11. info: {
  12. color: 'blue',
  13. icon: 'ico-info'
  14. },
  15. success: {
  16. color: 'green',
  17. icon: 'ico-success'
  18. },
  19. warning: {
  20. color: 'orange',
  21. icon: 'ico-warning'
  22. },
  23. error: {
  24. color: 'red',
  25. icon: 'ico-error'
  26. },
  27. question: {
  28. color: 'yellow',
  29. icon: 'ico-question'
  30. }
  31. },
  32. MOBILEWIDTH = 568,
  33. CONFIG = {};
  34. $iziToast.children = {};
  35. // Default settings
  36. var defaults = {
  37. id: null,
  38. class: '',
  39. title: '',
  40. titleColor: '',
  41. titleSize: '',
  42. titleLineHeight: '',
  43. message: '',
  44. messageColor: '',
  45. messageSize: '',
  46. messageLineHeight: '',
  47. backgroundColor: '',
  48. theme: 'dark', // dark light
  49. color: '', // blue, red, green, yellow
  50. icon: '',
  51. iconText: '',
  52. iconColor: '',
  53. iconUrl: null,
  54. image: '',
  55. imageWidth: 50,
  56. maxWidth: null,
  57. zindex: null,
  58. layout: 1,
  59. balloon: false,
  60. close: true,
  61. closeOnEscape: false,
  62. closeOnClick: false,
  63. displayMode: 0,
  64. position: 'topRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
  65. target: '',
  66. targetFirst: true,
  67. timeout: 5000,
  68. rtl: false,
  69. animateInside: true,
  70. drag: true,
  71. pauseOnHover: true,
  72. resetOnHover: false,
  73. progressBar: true,
  74. progressBarColor: '',
  75. progressBarEasing: 'linear',
  76. overlay: false,
  77. overlayClose: false,
  78. overlayColor: 'rgba(0, 0, 0, 0.6)',
  79. transitionIn: 'fadeInUp', // bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX
  80. transitionOut: 'fadeOut', // fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX
  81. transitionInMobile: 'fadeInUp',
  82. transitionOutMobile: 'fadeOutDown',
  83. buttons: {},
  84. inputs: {},
  85. onOpening: function () {},
  86. onOpened: function () {},
  87. onClosing: function () {},
  88. onClosed: function () {}
  89. };
  90. //
  91. // Methods
  92. //
  93. /**
  94. * Polyfill for remove() method
  95. */
  96. if(!('remove' in Element.prototype)) {
  97. Element.prototype.remove = function() {
  98. if(this.parentNode) {
  99. this.parentNode.removeChild(this);
  100. }
  101. };
  102. }
  103. /*
  104. * Polyfill for CustomEvent for IE >= 9
  105. * https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
  106. */
  107. if(typeof window.CustomEvent !== 'function') {
  108. var CustomEventPolyfill = function (event, params) {
  109. params = params || { bubbles: false, cancelable: false, detail: undefined };
  110. var evt = document.createEvent('CustomEvent');
  111. evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
  112. return evt;
  113. };
  114. CustomEventPolyfill.prototype = window.Event.prototype;
  115. window.CustomEvent = CustomEventPolyfill;
  116. }
  117. /**
  118. * A simple forEach() implementation for Arrays, Objects and NodeLists
  119. * @private
  120. * @param {Array|Object|NodeList} collection Collection of items to iterate
  121. * @param {Function} callback Callback function for each iteration
  122. * @param {Array|Object|NodeList} scope Object/NodeList/Array that forEach is iterating over (aka `this`)
  123. */
  124. var forEach = function (collection, callback, scope) {
  125. if(Object.prototype.toString.call(collection) === '[object Object]') {
  126. for (var prop in collection) {
  127. if(Object.prototype.hasOwnProperty.call(collection, prop)) {
  128. callback.call(scope, collection[prop], prop, collection);
  129. }
  130. }
  131. } else {
  132. if(collection){
  133. for (var i = 0, len = collection.length; i < len; i++) {
  134. callback.call(scope, collection[i], i, collection);
  135. }
  136. }
  137. }
  138. };
  139. /**
  140. * Merge defaults with user options
  141. * @private
  142. * @param {Object} defaults Default settings
  143. * @param {Object} options User options
  144. * @returns {Object} Merged values of defaults and options
  145. */
  146. var extend = function (defaults, options) {
  147. var extended = {};
  148. forEach(defaults, function (value, prop) {
  149. extended[prop] = defaults[prop];
  150. });
  151. forEach(options, function (value, prop) {
  152. extended[prop] = options[prop];
  153. });
  154. return extended;
  155. };
  156. /**
  157. * Create a fragment DOM elements
  158. * @private
  159. */
  160. var createFragElem = function(htmlStr) {
  161. var frag = document.createDocumentFragment(),
  162. temp = document.createElement('div');
  163. temp.innerHTML = htmlStr;
  164. while (temp.firstChild) {
  165. frag.appendChild(temp.firstChild);
  166. }
  167. return frag;
  168. };
  169. /**
  170. * Generate new ID
  171. * @private
  172. */
  173. var generateId = function(params) {
  174. var newId = btoa(encodeURIComponent(params));
  175. return newId.replace(/=/g, "");
  176. };
  177. /**
  178. * Check if is a color
  179. * @private
  180. */
  181. var isColor = function(color){
  182. if( color.substring(0,1) == '#' || color.substring(0,3) == 'rgb' || color.substring(0,3) == 'hsl' ){
  183. return true;
  184. } else {
  185. return false;
  186. }
  187. };
  188. /**
  189. * Check if is a Base64 string
  190. * @private
  191. */
  192. var isBase64 = function(str) {
  193. try {
  194. return btoa(atob(str)) == str;
  195. } catch (err) {
  196. return false;
  197. }
  198. };
  199. /**
  200. * Drag method of toasts
  201. * @private
  202. */
  203. var drag = function() {
  204. return {
  205. move: function(toast, instance, settings, xpos) {
  206. var opacity,
  207. opacityRange = 0.3,
  208. distance = 180;
  209. if(xpos !== 0){
  210. toast.classList.add(PLUGIN_NAME+'-dragged');
  211. toast.style.transform = 'translateX('+xpos + 'px)';
  212. if(xpos > 0){
  213. opacity = (distance-xpos) / distance;
  214. if(opacity < opacityRange){
  215. instance.hide(extend(settings, { transitionOut: 'fadeOutRight', transitionOutMobile: 'fadeOutRight' }), toast, 'drag');
  216. }
  217. } else {
  218. opacity = (distance+xpos) / distance;
  219. if(opacity < opacityRange){
  220. instance.hide(extend(settings, { transitionOut: 'fadeOutLeft', transitionOutMobile: 'fadeOutLeft' }), toast, 'drag');
  221. }
  222. }
  223. toast.style.opacity = opacity;
  224. if(opacity < opacityRange){
  225. if(ISCHROME || ISFIREFOX)
  226. toast.style.left = xpos+'px';
  227. toast.parentNode.style.opacity = opacityRange;
  228. this.stopMoving(toast, null);
  229. }
  230. }
  231. },
  232. startMoving: function(toast, instance, settings, e) {
  233. e = e || window.event;
  234. var posX = ((ACCEPTSTOUCH) ? e.touches[0].clientX : e.clientX),
  235. toastLeft = toast.style.transform.replace('px)', '');
  236. toastLeft = toastLeft.replace('translateX(', '');
  237. var offsetX = posX - toastLeft;
  238. if(settings.transitionIn){
  239. toast.classList.remove(settings.transitionIn);
  240. }
  241. if(settings.transitionInMobile){
  242. toast.classList.remove(settings.transitionInMobile);
  243. }
  244. toast.style.transition = '';
  245. if(ACCEPTSTOUCH) {
  246. document.ontouchmove = function(e) {
  247. e.preventDefault();
  248. e = e || window.event;
  249. var posX = e.touches[0].clientX,
  250. finalX = posX - offsetX;
  251. drag.move(toast, instance, settings, finalX);
  252. };
  253. } else {
  254. document.onmousemove = function(e) {
  255. e.preventDefault();
  256. e = e || window.event;
  257. var posX = e.clientX,
  258. finalX = posX - offsetX;
  259. drag.move(toast, instance, settings, finalX);
  260. };
  261. }
  262. },
  263. stopMoving: function(toast, e) {
  264. if(ACCEPTSTOUCH) {
  265. document.ontouchmove = function() {};
  266. } else {
  267. document.onmousemove = function() {};
  268. }
  269. toast.style.opacity = '';
  270. toast.style.transform = '';
  271. if(toast.classList.contains(PLUGIN_NAME+'-dragged')){
  272. toast.classList.remove(PLUGIN_NAME+'-dragged');
  273. toast.style.transition = 'transform 0.4s ease, opacity 0.4s ease';
  274. setTimeout(function() {
  275. toast.style.transition = '';
  276. }, 400);
  277. }
  278. }
  279. };
  280. }();
  281. $iziToast.setSetting = function (ref, option, value) {
  282. $iziToast.children[ref][option] = value;
  283. };
  284. $iziToast.getSetting = function (ref, option) {
  285. return $iziToast.children[ref][option];
  286. };
  287. /**
  288. * Destroy the current initialization.
  289. * @public
  290. */
  291. $iziToast.destroy = function () {
  292. forEach(document.querySelectorAll('.'+PLUGIN_NAME+'-overlay'), function(element, index) {
  293. element.remove();
  294. });
  295. forEach(document.querySelectorAll('.'+PLUGIN_NAME+'-wrapper'), function(element, index) {
  296. element.remove();
  297. });
  298. forEach(document.querySelectorAll('.'+PLUGIN_NAME), function(element, index) {
  299. element.remove();
  300. });
  301. this.children = {};
  302. // Remove event listeners
  303. document.removeEventListener(PLUGIN_NAME+'-opened', {}, false);
  304. document.removeEventListener(PLUGIN_NAME+'-opening', {}, false);
  305. document.removeEventListener(PLUGIN_NAME+'-closing', {}, false);
  306. document.removeEventListener(PLUGIN_NAME+'-closed', {}, false);
  307. document.removeEventListener('keyup', {}, false);
  308. // Reset variables
  309. CONFIG = {};
  310. };
  311. /**
  312. * Initialize Plugin
  313. * @public
  314. * @param {Object} options User settings
  315. */
  316. $iziToast.settings = function (options) {
  317. // Destroy any existing initializations
  318. $iziToast.destroy();
  319. CONFIG = options;
  320. defaults = extend(defaults, options || {});
  321. };
  322. /**
  323. * Building themes functions.
  324. * @public
  325. * @param {Object} options User settings
  326. */
  327. forEach(THEMES, function (theme, name) {
  328. $iziToast[name] = function (options) {
  329. var settings = extend(CONFIG, options || {});
  330. settings = extend(theme, settings || {});
  331. this.show(settings);
  332. };
  333. });
  334. /**
  335. * Do the calculation to move the progress bar
  336. * @private
  337. */
  338. $iziToast.progress = function (options, $toast, callback) {
  339. var that = this,
  340. ref = $toast.getAttribute('data-iziToast-ref'),
  341. settings = extend(this.children[ref], options || {}),
  342. $elem = $toast.querySelector('.'+PLUGIN_NAME+'-progressbar div');
  343. return {
  344. start: function() {
  345. if(typeof settings.time.REMAINING == 'undefined'){
  346. $toast.classList.remove(PLUGIN_NAME+'-reseted');
  347. if($elem !== null){
  348. $elem.style.transition = 'width '+ settings.timeout +'ms '+settings.progressBarEasing;
  349. $elem.style.width = '0%';
  350. }
  351. settings.time.START = new Date().getTime();
  352. settings.time.END = settings.time.START + settings.timeout;
  353. settings.time.TIMER = setTimeout(function() {
  354. clearTimeout(settings.time.TIMER);
  355. if(!$toast.classList.contains(PLUGIN_NAME+'-closing')){
  356. that.hide(settings, $toast, 'timeout');
  357. if(typeof callback === 'function'){
  358. callback.apply(that);
  359. }
  360. }
  361. }, settings.timeout);
  362. that.setSetting(ref, 'time', settings.time);
  363. }
  364. },
  365. pause: function() {
  366. if(typeof settings.time.START !== 'undefined' && !$toast.classList.contains(PLUGIN_NAME+'-paused') && !$toast.classList.contains(PLUGIN_NAME+'-reseted')){
  367. $toast.classList.add(PLUGIN_NAME+'-paused');
  368. settings.time.REMAINING = settings.time.END - new Date().getTime();
  369. clearTimeout(settings.time.TIMER);
  370. that.setSetting(ref, 'time', settings.time);
  371. if($elem !== null){
  372. var computedStyle = window.getComputedStyle($elem),
  373. propertyWidth = computedStyle.getPropertyValue('width');
  374. $elem.style.transition = 'none';
  375. $elem.style.width = propertyWidth;
  376. }
  377. if(typeof callback === 'function'){
  378. setTimeout(function() {
  379. callback.apply(that);
  380. }, 10);
  381. }
  382. }
  383. },
  384. resume: function() {
  385. if(typeof settings.time.REMAINING !== 'undefined'){
  386. $toast.classList.remove(PLUGIN_NAME+'-paused');
  387. if($elem !== null){
  388. $elem.style.transition = 'width '+ settings.time.REMAINING +'ms '+settings.progressBarEasing;
  389. $elem.style.width = '0%';
  390. }
  391. settings.time.END = new Date().getTime() + settings.time.REMAINING;
  392. settings.time.TIMER = setTimeout(function() {
  393. clearTimeout(settings.time.TIMER);
  394. if(!$toast.classList.contains(PLUGIN_NAME+'-closing')){
  395. that.hide(settings, $toast, 'timeout');
  396. if(typeof callback === 'function'){
  397. callback.apply(that);
  398. }
  399. }
  400. }, settings.time.REMAINING);
  401. that.setSetting(ref, 'time', settings.time);
  402. } else {
  403. this.start();
  404. }
  405. },
  406. reset: function(){
  407. clearTimeout(settings.time.TIMER);
  408. delete settings.time.REMAINING;
  409. that.setSetting(ref, 'time', settings.time);
  410. $toast.classList.add(PLUGIN_NAME+'-reseted');
  411. $toast.classList.remove(PLUGIN_NAME+'-paused');
  412. if($elem !== null){
  413. $elem.style.transition = 'none';
  414. $elem.style.width = '100%';
  415. }
  416. if(typeof callback === 'function'){
  417. setTimeout(function() {
  418. callback.apply(that);
  419. }, 10);
  420. }
  421. }
  422. };
  423. };
  424. /**
  425. * Close the specific Toast
  426. * @public
  427. * @param {Object} options User settings
  428. */
  429. $iziToast.hide = function (options, $toast, closedBy) {
  430. if(typeof $toast != 'object'){
  431. $toast = document.querySelector($toast);
  432. }
  433. var that = this,
  434. settings = extend(this.children[$toast.getAttribute('data-iziToast-ref')], options || {});
  435. settings.closedBy = closedBy || null;
  436. delete settings.time.REMAINING;
  437. $toast.classList.add(PLUGIN_NAME+'-closing');
  438. // Overlay
  439. (function(){
  440. var $overlay = document.querySelector('.'+PLUGIN_NAME+'-overlay');
  441. if($overlay !== null){
  442. var refs = $overlay.getAttribute('data-iziToast-ref');
  443. refs = refs.split(',');
  444. var index = refs.indexOf(String(settings.ref));
  445. if(index !== -1){
  446. refs.splice(index, 1);
  447. }
  448. $overlay.setAttribute('data-iziToast-ref', refs.join());
  449. if(refs.length === 0){
  450. $overlay.classList.remove('fadeIn');
  451. $overlay.classList.add('fadeOut');
  452. setTimeout(function() {
  453. $overlay.remove();
  454. }, 700);
  455. }
  456. }
  457. })();
  458. if(settings.transitionIn){
  459. $toast.classList.remove(settings.transitionIn);
  460. }
  461. if(settings.transitionInMobile){
  462. $toast.classList.remove(settings.transitionInMobile);
  463. }
  464. if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){
  465. if(settings.transitionOutMobile)
  466. $toast.classList.add(settings.transitionOutMobile);
  467. } else {
  468. if(settings.transitionOut)
  469. $toast.classList.add(settings.transitionOut);
  470. }
  471. var H = $toast.parentNode.offsetHeight;
  472. $toast.parentNode.style.height = H+'px';
  473. $toast.style.pointerEvents = 'none';
  474. if(!ISMOBILE || window.innerWidth > MOBILEWIDTH){
  475. $toast.parentNode.style.transitionDelay = '0.2s';
  476. }
  477. try {
  478. var event = new CustomEvent(PLUGIN_NAME+'-closing', {detail: settings, bubbles: true, cancelable: true});
  479. document.dispatchEvent(event);
  480. } catch(ex){
  481. console.warn(ex);
  482. }
  483. setTimeout(function() {
  484. $toast.parentNode.style.height = '0px';
  485. $toast.parentNode.style.overflow = '';
  486. setTimeout(function(){
  487. delete that.children[settings.ref];
  488. $toast.parentNode.remove();
  489. try {
  490. var event = new CustomEvent(PLUGIN_NAME+'-closed', {detail: settings, bubbles: true, cancelable: true});
  491. document.dispatchEvent(event);
  492. } catch(ex){
  493. console.warn(ex);
  494. }
  495. if(typeof settings.onClosed !== 'undefined'){
  496. settings.onClosed.apply(null, [settings, $toast, closedBy]);
  497. }
  498. }, 1000);
  499. }, 200);
  500. if(typeof settings.onClosing !== 'undefined'){
  501. settings.onClosing.apply(null, [settings, $toast, closedBy]);
  502. }
  503. };
  504. /**
  505. * Create and show the Toast
  506. * @public
  507. * @param {Object} options User settings
  508. */
  509. $iziToast.show = function (options) {
  510. var that = this;
  511. // Merge user options with defaults
  512. var settings = extend(CONFIG, options || {});
  513. settings = extend(defaults, settings);
  514. settings.time = {};
  515. if(settings.id === null){
  516. settings.id = generateId(settings.title+settings.message+settings.color);
  517. }
  518. if(settings.displayMode === 1 || settings.displayMode == 'once'){
  519. try {
  520. if(document.querySelectorAll('.'+PLUGIN_NAME+'#'+settings.id).length > 0){
  521. return false;
  522. }
  523. } catch (exc) {
  524. console.warn('['+PLUGIN_NAME+'] Could not find an element with this selector: '+'#'+settings.id+'. Try to set an valid id.');
  525. }
  526. }
  527. if(settings.displayMode === 2 || settings.displayMode == 'replace'){
  528. try {
  529. forEach(document.querySelectorAll('.'+PLUGIN_NAME+'#'+settings.id), function(element, index) {
  530. that.hide(settings, element, 'replaced');
  531. });
  532. } catch (exc) {
  533. console.warn('['+PLUGIN_NAME+'] Could not find an element with this selector: '+'#'+settings.id+'. Try to set an valid id.');
  534. }
  535. }
  536. settings.ref = new Date().getTime() + Math.floor((Math.random() * 10000000) + 1);
  537. $iziToast.children[settings.ref] = settings;
  538. var $DOM = {
  539. body: document.querySelector('body'),
  540. overlay: document.createElement('div'),
  541. toast: document.createElement('div'),
  542. toastBody: document.createElement('div'),
  543. toastTexts: document.createElement('div'),
  544. toastCapsule: document.createElement('div'),
  545. cover: document.createElement('div'),
  546. buttons: document.createElement('div'),
  547. inputs: document.createElement('div'),
  548. icon: !settings.iconUrl ? document.createElement('i') : document.createElement('img'),
  549. wrapper: null
  550. };
  551. $DOM.toast.setAttribute('data-iziToast-ref', settings.ref);
  552. $DOM.toast.appendChild($DOM.toastBody);
  553. $DOM.toastCapsule.appendChild($DOM.toast);
  554. // CSS Settings
  555. (function(){
  556. $DOM.toast.classList.add(PLUGIN_NAME);
  557. $DOM.toast.classList.add(PLUGIN_NAME+'-opening');
  558. $DOM.toastCapsule.classList.add(PLUGIN_NAME+'-capsule');
  559. $DOM.toastBody.classList.add(PLUGIN_NAME + '-body');
  560. $DOM.toastTexts.classList.add(PLUGIN_NAME + '-texts');
  561. if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){
  562. if(settings.transitionInMobile)
  563. $DOM.toast.classList.add(settings.transitionInMobile);
  564. } else {
  565. if(settings.transitionIn)
  566. $DOM.toast.classList.add(settings.transitionIn);
  567. }
  568. if(settings.class){
  569. var classes = settings.class.split(' ');
  570. forEach(classes, function (value, index) {
  571. $DOM.toast.classList.add(value);
  572. });
  573. }
  574. if(settings.id){ $DOM.toast.id = settings.id; }
  575. if(settings.rtl){
  576. $DOM.toast.classList.add(PLUGIN_NAME + '-rtl');
  577. $DOM.toast.setAttribute('dir', 'rtl');
  578. }
  579. if(settings.layout > 1){ $DOM.toast.classList.add(PLUGIN_NAME+'-layout'+settings.layout); }
  580. if(settings.balloon){ $DOM.toast.classList.add(PLUGIN_NAME+'-balloon'); }
  581. if(settings.maxWidth){
  582. if( !isNaN(settings.maxWidth) ){
  583. $DOM.toast.style.maxWidth = settings.maxWidth+'px';
  584. } else {
  585. $DOM.toast.style.maxWidth = settings.maxWidth;
  586. }
  587. }
  588. if(settings.theme !== '' || settings.theme !== 'light') {
  589. $DOM.toast.classList.add(PLUGIN_NAME+'-theme-'+settings.theme);
  590. }
  591. if(settings.color) { //#, rgb, rgba, hsl
  592. if( isColor(settings.color) ){
  593. $DOM.toast.style.background = settings.color;
  594. } else {
  595. $DOM.toast.classList.add(PLUGIN_NAME+'-color-'+settings.color);
  596. }
  597. }
  598. if(settings.backgroundColor) {
  599. $DOM.toast.style.background = settings.backgroundColor;
  600. if(settings.balloon){
  601. $DOM.toast.style.borderColor = settings.backgroundColor;
  602. }
  603. }
  604. })();
  605. // Cover image
  606. (function(){
  607. if(settings.image) {
  608. $DOM.cover.classList.add(PLUGIN_NAME + '-cover');
  609. $DOM.cover.style.width = settings.imageWidth + 'px';
  610. if(isBase64(settings.image.replace(/ /g,''))){
  611. $DOM.cover.style.backgroundImage = 'url(data:image/png;base64,' + settings.image.replace(/ /g,'') + ')';
  612. } else {
  613. $DOM.cover.style.backgroundImage = 'url(' + settings.image + ')';
  614. }
  615. if(settings.rtl){
  616. $DOM.toastBody.style.marginRight = (settings.imageWidth + 10) + 'px';
  617. } else {
  618. $DOM.toastBody.style.marginLeft = (settings.imageWidth + 10) + 'px';
  619. }
  620. $DOM.toast.appendChild($DOM.cover);
  621. }
  622. })();
  623. // Button close
  624. (function(){
  625. if(settings.close){
  626. $DOM.buttonClose = document.createElement('button');
  627. $DOM.buttonClose.type = 'button';
  628. $DOM.buttonClose.classList.add(PLUGIN_NAME + '-close');
  629. $DOM.buttonClose.addEventListener('click', function (e) {
  630. var button = e.target;
  631. that.hide(settings, $DOM.toast, 'button');
  632. });
  633. $DOM.toast.appendChild($DOM.buttonClose);
  634. } else {
  635. if(settings.rtl){
  636. $DOM.toast.style.paddingLeft = '18px';
  637. } else {
  638. $DOM.toast.style.paddingRight = '18px';
  639. }
  640. }
  641. })();
  642. // Progress Bar & Timeout
  643. (function(){
  644. if(settings.progressBar){
  645. $DOM.progressBar = document.createElement('div');
  646. $DOM.progressBarDiv = document.createElement('div');
  647. $DOM.progressBar.classList.add(PLUGIN_NAME + '-progressbar');
  648. $DOM.progressBarDiv.style.background = settings.progressBarColor;
  649. $DOM.progressBar.appendChild($DOM.progressBarDiv);
  650. $DOM.toast.appendChild($DOM.progressBar);
  651. }
  652. if(settings.timeout) {
  653. if(settings.pauseOnHover && !settings.resetOnHover){
  654. $DOM.toast.addEventListener('mouseenter', function (e) {
  655. that.progress(settings, $DOM.toast).pause();
  656. });
  657. $DOM.toast.addEventListener('mouseleave', function (e) {
  658. that.progress(settings, $DOM.toast).resume();
  659. });
  660. }
  661. if(settings.resetOnHover){
  662. $DOM.toast.addEventListener('mouseenter', function (e) {
  663. that.progress(settings, $DOM.toast).reset();
  664. });
  665. $DOM.toast.addEventListener('mouseleave', function (e) {
  666. that.progress(settings, $DOM.toast).start();
  667. });
  668. }
  669. }
  670. })();
  671. // Icon
  672. (function(){
  673. if(settings.iconUrl) {
  674. $DOM.icon.setAttribute('class', PLUGIN_NAME + '-icon');
  675. $DOM.icon.setAttribute('src', settings.iconUrl);
  676. } else if(settings.icon) {
  677. $DOM.icon.setAttribute('class', PLUGIN_NAME + '-icon ' + settings.icon);
  678. if(settings.iconText){
  679. $DOM.icon.appendChild(document.createTextNode(settings.iconText));
  680. }
  681. if(settings.iconColor){
  682. $DOM.icon.style.color = settings.iconColor;
  683. }
  684. }
  685. if(settings.icon || settings.iconUrl) {
  686. if(settings.rtl){
  687. $DOM.toastBody.style.paddingRight = '33px';
  688. } else {
  689. $DOM.toastBody.style.paddingLeft = '33px';
  690. }
  691. $DOM.toastBody.appendChild($DOM.icon);
  692. }
  693. })();
  694. // Title & Message
  695. (function(){
  696. if(settings.title.length > 0) {
  697. $DOM.strong = document.createElement('strong');
  698. $DOM.strong.classList.add(PLUGIN_NAME + '-title');
  699. $DOM.strong.appendChild(createFragElem(settings.title));
  700. $DOM.toastTexts.appendChild($DOM.strong);
  701. if(settings.titleColor) {
  702. $DOM.strong.style.color = settings.titleColor;
  703. }
  704. if(settings.titleSize) {
  705. if( !isNaN(settings.titleSize) ){
  706. $DOM.strong.style.fontSize = settings.titleSize+'px';
  707. } else {
  708. $DOM.strong.style.fontSize = settings.titleSize;
  709. }
  710. }
  711. if(settings.titleLineHeight) {
  712. if( !isNaN(settings.titleSize) ){
  713. $DOM.strong.style.lineHeight = settings.titleLineHeight+'px';
  714. } else {
  715. $DOM.strong.style.lineHeight = settings.titleLineHeight;
  716. }
  717. }
  718. }
  719. if(settings.message.length > 0) {
  720. $DOM.p = document.createElement('p');
  721. $DOM.p.classList.add(PLUGIN_NAME + '-message');
  722. $DOM.p.appendChild(createFragElem(settings.message));
  723. $DOM.toastTexts.appendChild($DOM.p);
  724. if(settings.messageColor) {
  725. $DOM.p.style.color = settings.messageColor;
  726. }
  727. if(settings.messageSize) {
  728. if( !isNaN(settings.titleSize) ){
  729. $DOM.p.style.fontSize = settings.messageSize+'px';
  730. } else {
  731. $DOM.p.style.fontSize = settings.messageSize;
  732. }
  733. }
  734. if(settings.messageLineHeight) {
  735. if( !isNaN(settings.titleSize) ){
  736. $DOM.p.style.lineHeight = settings.messageLineHeight+'px';
  737. } else {
  738. $DOM.p.style.lineHeight = settings.messageLineHeight;
  739. }
  740. }
  741. }
  742. if(settings.title.length > 0 && settings.message.length > 0) {
  743. if(settings.rtl){
  744. $DOM.strong.style.marginLeft = '10px';
  745. } else if(settings.layout !== 2 && !settings.rtl) {
  746. $DOM.strong.style.marginRight = '10px';
  747. }
  748. }
  749. })();
  750. $DOM.toastBody.appendChild($DOM.toastTexts);
  751. // Inputs
  752. var $inputs;
  753. (function(){
  754. if(settings.inputs.length > 0) {
  755. $DOM.inputs.classList.add(PLUGIN_NAME + '-inputs');
  756. forEach(settings.inputs, function (value, index) {
  757. $DOM.inputs.appendChild(createFragElem(value[0]));
  758. $inputs = $DOM.inputs.childNodes;
  759. $inputs[index].classList.add(PLUGIN_NAME + '-inputs-child');
  760. if(value[3]){
  761. setTimeout(function() {
  762. $inputs[index].focus();
  763. }, 300);
  764. }
  765. $inputs[index].addEventListener(value[1], function (e) {
  766. var ts = value[2];
  767. return ts(that, $DOM.toast, this, e);
  768. });
  769. });
  770. $DOM.toastBody.appendChild($DOM.inputs);
  771. }
  772. })();
  773. // Buttons
  774. (function(){
  775. if(settings.buttons.length > 0) {
  776. $DOM.buttons.classList.add(PLUGIN_NAME + '-buttons');
  777. forEach(settings.buttons, function (value, index) {
  778. $DOM.buttons.appendChild(createFragElem(value[0]));
  779. var $btns = $DOM.buttons.childNodes;
  780. $btns[index].classList.add(PLUGIN_NAME + '-buttons-child');
  781. if(value[2]){
  782. setTimeout(function() {
  783. $btns[index].focus();
  784. }, 300);
  785. }
  786. $btns[index].addEventListener('click', function (e) {
  787. e.preventDefault();
  788. var ts = value[1];
  789. return ts(that, $DOM.toast, this, e, $inputs);
  790. });
  791. });
  792. }
  793. $DOM.toastBody.appendChild($DOM.buttons);
  794. })();
  795. if(settings.message.length > 0 && (settings.inputs.length > 0 || settings.buttons.length > 0)) {
  796. $DOM.p.style.marginBottom = '0';
  797. }
  798. if(settings.inputs.length > 0 || settings.buttons.length > 0){
  799. if(settings.rtl){
  800. $DOM.toastTexts.style.marginLeft = '10px';
  801. } else {
  802. $DOM.toastTexts.style.marginRight = '10px';
  803. }
  804. if(settings.inputs.length > 0 && settings.buttons.length > 0){
  805. if(settings.rtl){
  806. $DOM.inputs.style.marginLeft = '8px';
  807. } else {
  808. $DOM.inputs.style.marginRight = '8px';
  809. }
  810. }
  811. }
  812. // Wrap
  813. (function(){
  814. $DOM.toastCapsule.style.visibility = 'hidden';
  815. setTimeout(function() {
  816. var H = $DOM.toast.offsetHeight;
  817. var style = $DOM.toast.currentStyle || window.getComputedStyle($DOM.toast);
  818. var marginTop = style.marginTop;
  819. marginTop = marginTop.split('px');
  820. marginTop = parseInt(marginTop[0]);
  821. var marginBottom = style.marginBottom;
  822. marginBottom = marginBottom.split('px');
  823. marginBottom = parseInt(marginBottom[0]);
  824. $DOM.toastCapsule.style.visibility = '';
  825. $DOM.toastCapsule.style.height = (H+marginBottom+marginTop)+'px';
  826. setTimeout(function() {
  827. $DOM.toastCapsule.style.height = 'auto';
  828. if(settings.target){
  829. $DOM.toastCapsule.style.overflow = 'visible';
  830. }
  831. }, 500);
  832. if(settings.timeout) {
  833. that.progress(settings, $DOM.toast).start();
  834. }
  835. }, 100);
  836. })();
  837. // Target
  838. (function(){
  839. var position = settings.position;
  840. if(settings.target){
  841. $DOM.wrapper = document.querySelector(settings.target);
  842. $DOM.wrapper.classList.add(PLUGIN_NAME + '-target');
  843. if(settings.targetFirst) {
  844. $DOM.wrapper.insertBefore($DOM.toastCapsule, $DOM.wrapper.firstChild);
  845. } else {
  846. $DOM.wrapper.appendChild($DOM.toastCapsule);
  847. }
  848. } else {
  849. if( POSITIONS.indexOf(settings.position) == -1 ){
  850. console.warn('['+PLUGIN_NAME+'] Incorrect position.\nIt can be › ' + POSITIONS);
  851. return;
  852. }
  853. if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){
  854. if(settings.position == 'bottomLeft' || settings.position == 'bottomRight' || settings.position == 'bottomCenter'){
  855. position = PLUGIN_NAME+'-wrapper-bottomCenter';
  856. }
  857. else if(settings.position == 'topLeft' || settings.position == 'topRight' || settings.position == 'topCenter'){
  858. position = PLUGIN_NAME+'-wrapper-topCenter';
  859. }
  860. else {
  861. position = PLUGIN_NAME+'-wrapper-center';
  862. }
  863. } else {
  864. position = PLUGIN_NAME+'-wrapper-'+position;
  865. }
  866. $DOM.wrapper = document.querySelector('.' + PLUGIN_NAME + '-wrapper.'+position);
  867. if(!$DOM.wrapper) {
  868. $DOM.wrapper = document.createElement('div');
  869. $DOM.wrapper.classList.add(PLUGIN_NAME + '-wrapper');
  870. $DOM.wrapper.classList.add(position);
  871. document.body.appendChild($DOM.wrapper);
  872. }
  873. if(settings.position == 'topLeft' || settings.position == 'topCenter' || settings.position == 'topRight'){
  874. $DOM.wrapper.insertBefore($DOM.toastCapsule, $DOM.wrapper.firstChild);
  875. } else {
  876. $DOM.wrapper.appendChild($DOM.toastCapsule);
  877. }
  878. }
  879. if(!isNaN(settings.zindex)) {
  880. $DOM.wrapper.style.zIndex = settings.zindex;
  881. } else {
  882. console.warn('['+PLUGIN_NAME+'] Invalid zIndex.');
  883. }
  884. })();
  885. // Overlay
  886. (function(){
  887. if(settings.overlay) {
  888. if( document.querySelector('.'+PLUGIN_NAME+'-overlay.fadeIn') !== null ){
  889. $DOM.overlay = document.querySelector('.'+PLUGIN_NAME+'-overlay');
  890. $DOM.overlay.setAttribute('data-iziToast-ref', $DOM.overlay.getAttribute('data-iziToast-ref') + ',' + settings.ref);
  891. if(!isNaN(settings.zindex) && settings.zindex !== null) {
  892. $DOM.overlay.style.zIndex = settings.zindex-1;
  893. }
  894. } else {
  895. $DOM.overlay.classList.add(PLUGIN_NAME+'-overlay');
  896. $DOM.overlay.classList.add('fadeIn');
  897. $DOM.overlay.style.background = settings.overlayColor;
  898. $DOM.overlay.setAttribute('data-iziToast-ref', settings.ref);
  899. if(!isNaN(settings.zindex) && settings.zindex !== null) {
  900. $DOM.overlay.style.zIndex = settings.zindex-1;
  901. }
  902. document.querySelector('body').appendChild($DOM.overlay);
  903. }
  904. if(settings.overlayClose) {
  905. $DOM.overlay.removeEventListener('click', {});
  906. $DOM.overlay.addEventListener('click', function (e) {
  907. that.hide(settings, $DOM.toast, 'overlay');
  908. });
  909. } else {
  910. $DOM.overlay.removeEventListener('click', {});
  911. }
  912. }
  913. })();
  914. // Inside animations
  915. (function(){
  916. if(settings.animateInside){
  917. $DOM.toast.classList.add(PLUGIN_NAME+'-animateInside');
  918. var animationTimes = [200, 100, 300];
  919. if(settings.transitionIn == 'bounceInLeft' || settings.transitionIn == 'bounceInRight'){
  920. animationTimes = [400, 200, 400];
  921. }
  922. if(settings.title.length > 0) {
  923. setTimeout(function(){
  924. $DOM.strong.classList.add('slideIn');
  925. }, animationTimes[0]);
  926. }
  927. if(settings.message.length > 0) {
  928. setTimeout(function(){
  929. $DOM.p.classList.add('slideIn');
  930. }, animationTimes[1]);
  931. }
  932. if(settings.icon || settings.iconUrl) {
  933. setTimeout(function(){
  934. $DOM.icon.classList.add('revealIn');
  935. }, animationTimes[2]);
  936. }
  937. var counter = 150;
  938. if(settings.buttons.length > 0 && $DOM.buttons) {
  939. setTimeout(function(){
  940. forEach($DOM.buttons.childNodes, function(element, index) {
  941. setTimeout(function(){
  942. element.classList.add('revealIn');
  943. }, counter);
  944. counter = counter + 150;
  945. });
  946. }, settings.inputs.length > 0 ? 150 : 0);
  947. }
  948. if(settings.inputs.length > 0 && $DOM.inputs) {
  949. counter = 150;
  950. forEach($DOM.inputs.childNodes, function(element, index) {
  951. setTimeout(function(){
  952. element.classList.add('revealIn');
  953. }, counter);
  954. counter = counter + 150;
  955. });
  956. }
  957. }
  958. })();
  959. settings.onOpening.apply(null, [settings, $DOM.toast]);
  960. try {
  961. var event = new CustomEvent(PLUGIN_NAME + '-opening', {detail: settings, bubbles: true, cancelable: true});
  962. document.dispatchEvent(event);
  963. } catch(ex){
  964. console.warn(ex);
  965. }
  966. setTimeout(function() {
  967. $DOM.toast.classList.remove(PLUGIN_NAME+'-opening');
  968. $DOM.toast.classList.add(PLUGIN_NAME+'-opened');
  969. try {
  970. var event = new CustomEvent(PLUGIN_NAME + '-opened', {detail: settings, bubbles: true, cancelable: true});
  971. document.dispatchEvent(event);
  972. } catch(ex){
  973. console.warn(ex);
  974. }
  975. settings.onOpened.apply(null, [settings, $DOM.toast]);
  976. }, 1000);
  977. if(settings.drag){
  978. if(ACCEPTSTOUCH) {
  979. $DOM.toast.addEventListener('touchstart', function(e) {
  980. drag.startMoving(this, that, settings, e);
  981. }, false);
  982. $DOM.toast.addEventListener('touchend', function(e) {
  983. drag.stopMoving(this, e);
  984. }, false);
  985. } else {
  986. $DOM.toast.addEventListener('mousedown', function(e) {
  987. e.preventDefault();
  988. drag.startMoving(this, that, settings, e);
  989. }, false);
  990. $DOM.toast.addEventListener('mouseup', function(e) {
  991. e.preventDefault();
  992. drag.stopMoving(this, e);
  993. }, false);
  994. }
  995. }
  996. if(settings.closeOnEscape) {
  997. document.addEventListener('keyup', function (evt) {
  998. evt = evt || window.event;
  999. if(evt.keyCode == 27) {
  1000. that.hide(settings, $DOM.toast, 'esc');
  1001. }
  1002. });
  1003. }
  1004. if(settings.closeOnClick) {
  1005. $DOM.toast.addEventListener('click', function (evt) {
  1006. that.hide(settings, $DOM.toast, 'toast');
  1007. });
  1008. }
  1009. that.toast = $DOM.toast;
  1010. };
  1011. layui.link(layui.cache.base + 'notice/notice.css'); // 加载css
  1012. window.notice = $iziToast;
  1013. exports('notice',$iziToast);
  1014. });