smoke.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517
  1. /*
  2. SMOKE.JS - 0.1.3
  3. (c) 2011-2013 Jonathan Youngblood
  4. demos / documentation: http://smoke-js.com/
  5. */
  6. ;(function(window, document) {
  7. /*jslint browser: true, onevar: true, undef: true, nomen: false, eqeqeq: true, bitwise: true, regexp: true, newcap: true, immed: true */
  8. var smoke = {
  9. smoketimeout: [],
  10. init: false,
  11. zindex: 40000,
  12. i: 0,
  13. bodyload: function(id) {
  14. var ff = document.createElement('div');
  15. ff.setAttribute('id','smoke-out-'+id);
  16. ff.className = 'smoke-base';
  17. ff.style.zIndex = smoke.zindex;
  18. smoke.zindex++;
  19. document.body.appendChild(ff);
  20. },
  21. newdialog: function() {
  22. var newid = new Date().getTime();
  23. newid = Math.random(1,99) + newid;
  24. if (!smoke.init) {
  25. smoke.listen(window,"load", function() {
  26. smoke.bodyload(newid);
  27. });
  28. } else {
  29. smoke.bodyload(newid);
  30. }
  31. return newid;
  32. },
  33. forceload: function() {},
  34. build: function (e, f) {
  35. smoke.i++;
  36. f.stack = smoke.i;
  37. e = e.replace(/\n/g,'<br />');
  38. e = e.replace(/\r/g,'<br />');
  39. var prompt = '',
  40. ok = 'OK',
  41. cancel = 'Cancel',
  42. classname = '',
  43. buttons = '',
  44. box;
  45. if (f.type === 'prompt') {
  46. prompt =
  47. '<div class="smoke-dialog-prompt">'+
  48. '<input class="input" id="smoke-dialog-input-'+f.newid+'" type="text" ' + (f.params.value ? 'value="' + f.params.value + '"' : '') + ' />'+
  49. '</div>';
  50. }
  51. if (f.params.ok) {
  52. ok = f.params.ok;
  53. }
  54. if (f.params.cancel) {
  55. cancel = f.params.cancel;
  56. }
  57. if (f.params.classname) {
  58. classname = f.params.classname;
  59. }
  60. if (f.type !== 'signal') {
  61. buttons = '<div class="smoke-dialog-buttons">';
  62. if (f.type === 'alert') {
  63. buttons +=
  64. '<button class="btn btn-md btn-round" id="alert-ok-'+f.newid+'">'+ok+'</button>';
  65. }
  66. else if (f.type === 'quiz') {
  67. if (f.params.button_1) {
  68. buttons +=
  69. '<button class="btn btn-md btn-round quiz-button" id="'+f.type+'-ok1-'+f.newid+'">'+f.params.button_1+'</button>';
  70. }
  71. if (f.params.button_2) {
  72. buttons +=
  73. '<button class="btn btn-md btn-round quiz-button" id="'+f.type+'-ok2-'+f.newid+'">'+f.params.button_2+'</button>';
  74. }
  75. if (f.params.button_3) {
  76. buttons +=
  77. '<button class="btn btn-md btn-round quiz-button" id="'+f.type+'-ok3-'+f.newid+'">'+f.params.button_3+'</button>';
  78. }
  79. if (f.params.button_cancel) {
  80. buttons +=
  81. '<button id="'+f.type+'-cancel-'+f.newid+'" class="btn btn-md btn-round cancel">'+f.params.button_cancel+'</button>';
  82. }
  83. }
  84. else if (f.type === 'prompt' || f.type === 'confirm') {
  85. if (f.params.reverseButtons) {
  86. buttons +=
  87. '<button class="btn btn-md btn-round btn-primary" id="'+f.type+'-ok-'+f.newid+'">'+ok+'</button>' +
  88. '<button class="btn btn-md btn-round cancel" id="'+f.type+'-cancel-'+f.newid+'">'+cancel+'</button>';
  89. } else {
  90. buttons +=
  91. '<button class="btn btn-md btn-round cancel" id="'+f.type+'-cancel-'+f.newid+'">'+cancel+'</button>'+
  92. '<button class="btn btn-md btn-round btn-primary" id="'+f.type+'-ok-'+f.newid+'">'+ok+'</button>';
  93. }
  94. }
  95. buttons += '</div>';
  96. }
  97. box =
  98. '<div class="smoke-dialog smoke '+classname+'">'+
  99. '<div class="smoke-dialog-inner">'+
  100. e+
  101. prompt+
  102. buttons+
  103. '</div>'+
  104. '</div>';
  105. if (!smoke.init) {
  106. smoke.listen(window,"load", function() {
  107. smoke.finishbuild(e,f,box);
  108. });
  109. } else{
  110. smoke.finishbuild(e,f,box);
  111. }
  112. },
  113. finishbuild: function(e, f, box) {
  114. var ff = document.getElementById('smoke-out-'+f.newid);
  115. ff.className = 'smoke-base smoke-visible smoke-' + f.type;
  116. ff.innerHTML = box;
  117. while (ff.innerHTML === "") {
  118. ff.innerHTML = box;
  119. }
  120. if (smoke.smoketimeout[f.newid]) {
  121. clearTimeout(smoke.smoketimeout[f.newid]);
  122. }
  123. // smoke.listen(
  124. // document.getElementById('smoke-bg-'+f.newid),
  125. // "click",
  126. // function () {
  127. // smoke.destroy(f.type, f.newid);
  128. // if (f.type === 'prompt' || f.type === 'confirm' || f.type === 'quiz') {
  129. // f.callback(false);
  130. // } else if (f.type === 'alert' && typeof f.callback !== 'undefined') {
  131. // f.callback();
  132. // }
  133. // }
  134. // );
  135. switch (f.type) {
  136. case 'alert':
  137. smoke.finishbuildAlert(e, f, box);
  138. break;
  139. case 'confirm':
  140. smoke.finishbuildConfirm(e, f, box);
  141. break;
  142. case 'quiz':
  143. smoke.finishbuildQuiz(e, f, box);
  144. break;
  145. case 'prompt':
  146. smoke.finishbuildPrompt(e, f, box);
  147. break;
  148. case 'signal':
  149. smoke.finishbuildSignal(e, f, box);
  150. break;
  151. default:
  152. throw "Unknown type: " + f.type;
  153. }
  154. },
  155. finishbuildAlert: function (e, f, box) {
  156. smoke.listen(
  157. document.getElementById('alert-ok-'+f.newid),
  158. "click",
  159. function () {
  160. smoke.destroy(f.type, f.newid);
  161. if (typeof f.callback !== 'undefined') {
  162. f.callback();
  163. }
  164. }
  165. );
  166. document.onkeyup = function (e) {
  167. if (!e) {
  168. e = window.event;
  169. }
  170. if (e.keyCode === 13 || e.keyCode === 32 || e.keyCode === 27) {
  171. smoke.destroy(f.type, f.newid);
  172. if (typeof f.callback !== 'undefined') {
  173. f.callback();
  174. }
  175. }
  176. };
  177. },
  178. finishbuildConfirm: function (e, f, box) {
  179. smoke.listen(
  180. document.getElementById('confirm-cancel-' + f.newid),
  181. "click",
  182. function ()
  183. {
  184. smoke.destroy(f.type, f.newid);
  185. f.callback(false);
  186. }
  187. );
  188. smoke.listen(
  189. document.getElementById('confirm-ok-' + f.newid),
  190. "click",
  191. function ()
  192. {
  193. smoke.destroy(f.type, f.newid);
  194. f.callback(true);
  195. }
  196. );
  197. document.onkeyup = function (e) {
  198. if (!e) {
  199. e = window.event;
  200. }
  201. if (e.keyCode === 13 || e.keyCode === 32) {
  202. smoke.destroy(f.type, f.newid);
  203. f.callback(true);
  204. } else if (e.keyCode === 27) {
  205. smoke.destroy(f.type, f.newid);
  206. f.callback(false);
  207. }
  208. };
  209. },
  210. finishbuildQuiz: function (e, f, box) {
  211. var a, b, c;
  212. smoke.listen(
  213. document.getElementById('quiz-cancel-' + f.newid),
  214. "click",
  215. function ()
  216. {
  217. smoke.destroy(f.type, f.newid);
  218. f.callback(false);
  219. }
  220. );
  221. if (a = document.getElementById('quiz-ok1-'+f.newid))
  222. smoke.listen(
  223. a,
  224. "click",
  225. function () {
  226. smoke.destroy(f.type, f.newid);
  227. f.callback(a.innerHTML);
  228. }
  229. );
  230. if (b = document.getElementById('quiz-ok2-'+f.newid))
  231. smoke.listen(
  232. b,
  233. "click",
  234. function () {
  235. smoke.destroy(f.type, f.newid);
  236. f.callback(b.innerHTML);
  237. }
  238. );
  239. if (c = document.getElementById('quiz-ok3-'+f.newid))
  240. smoke.listen(
  241. c,
  242. "click",
  243. function () {
  244. smoke.destroy(f.type, f.newid);
  245. f.callback(c.innerHTML);
  246. }
  247. );
  248. document.onkeyup = function (e) {
  249. if (!e) {
  250. e = window.event;
  251. }
  252. if (e.keyCode === 27) {
  253. smoke.destroy(f.type, f.newid);
  254. f.callback(false);
  255. }
  256. };
  257. },
  258. finishbuildPrompt: function (e, f, box) {
  259. var pi = document.getElementById('smoke-dialog-input-'+f.newid);
  260. setTimeout(function () {
  261. pi.focus();
  262. pi.select();
  263. }, 100);
  264. smoke.listen(
  265. document.getElementById('prompt-cancel-'+f.newid),
  266. "click",
  267. function () {
  268. smoke.destroy(f.type, f.newid);
  269. f.callback(false);
  270. }
  271. );
  272. smoke.listen(
  273. document.getElementById('prompt-ok-'+f.newid),
  274. "click",
  275. function () {
  276. smoke.destroy(f.type, f.newid);
  277. f.callback(pi.value);
  278. }
  279. );
  280. document.onkeyup = function (e) {
  281. if (!e) {
  282. e = window.event;
  283. }
  284. if (e.keyCode === 13) {
  285. smoke.destroy(f.type, f.newid);
  286. f.callback(pi.value);
  287. } else if (e.keyCode === 27) {
  288. smoke.destroy(f.type, f.newid);
  289. f.callback(false);
  290. }
  291. };
  292. },
  293. finishbuildSignal: function (e, f, box) {
  294. document.onkeyup = function (e) {
  295. if (!e) {
  296. e = window.event;
  297. }
  298. if (e.keyCode === 27) {
  299. smoke.destroy(f.type, f.newid);
  300. if (typeof f.callback !== 'undefined') {
  301. f.callback();
  302. }
  303. }
  304. };
  305. smoke.smoketimeout[f.newid] = setTimeout(function () {
  306. smoke.destroy(f.type, f.newid);
  307. if (typeof f.callback !== 'undefined') {
  308. f.callback();
  309. }
  310. }, f.timeout);
  311. },
  312. destroy: function (type,id) {
  313. var box = document.getElementById('smoke-out-'+id);
  314. if (type !== 'quiz') {
  315. var okButton = document.getElementById(type+'-ok-'+id);
  316. }
  317. var cancelButton = document.getElementById(type+'-cancel-'+id);
  318. box.className = 'smoke-base';
  319. if (okButton) {
  320. smoke.stoplistening(okButton, "click", function() {});
  321. document.onkeyup = null;
  322. }
  323. if (type === 'quiz') {
  324. var quiz_buttons = document.getElementsByClassName("quiz-button");
  325. for (var i = 0; i < quiz_buttons.length; i++) {
  326. smoke.stoplistening(quiz_buttons[i], "click", function() {});
  327. document.onkeyup = null;
  328. }
  329. }
  330. if (cancelButton) {
  331. smoke.stoplistening(cancelButton, "click", function() {});
  332. }
  333. smoke.i = 0;
  334. box.innerHTML = '';
  335. },
  336. alert: function (e, f, g) {
  337. if (typeof g !== 'object') {
  338. g = false;
  339. }
  340. var id = smoke.newdialog();
  341. smoke.build(e, {
  342. type: 'alert',
  343. callback: f,
  344. params: g,
  345. newid: id
  346. });
  347. },
  348. signal: function (e, f, g) {
  349. if (typeof g !== 'object') {
  350. g = false;
  351. }
  352. var duration = 5000;
  353. if (g.duration !== 'undefined'){
  354. duration = g.duration;
  355. }
  356. var id = smoke.newdialog();
  357. smoke.build(e, {
  358. type: 'signal',
  359. callback: f,
  360. timeout: duration,
  361. params: g,
  362. newid: id
  363. });
  364. },
  365. confirm: function (e, f, g) {
  366. if (typeof g !== 'object') {
  367. g = false;
  368. }
  369. var id = smoke.newdialog();
  370. smoke.build(e, {
  371. type: 'confirm',
  372. callback: f,
  373. params: g,
  374. newid: id
  375. });
  376. },
  377. quiz: function (e, f, g) {
  378. if (typeof g !== 'object') {
  379. g = false;
  380. }
  381. var id = smoke.newdialog();
  382. smoke.build(e, {
  383. type: 'quiz',
  384. callback: f,
  385. params: g,
  386. newid: id
  387. });
  388. },
  389. prompt: function (e, f, g) {
  390. if (typeof g !== 'object') {
  391. g = false;
  392. }
  393. var id = smoke.newdialog();
  394. return smoke.build(e,{type:'prompt',callback:f,params:g,newid:id});
  395. },
  396. listen: function (e, f, g) {
  397. if (e.addEventListener) {
  398. return e.addEventListener(f, g, false);
  399. }
  400. if (e.attachEvent) {
  401. return e.attachEvent('on'+f, g);
  402. }
  403. return false;
  404. },
  405. stoplistening: function (e, f, g) {
  406. if (e.removeEventListener) {
  407. return e.removeEventListener(f, g, false);
  408. }
  409. if (e.detachEvent) {
  410. return e.detachEvent('on'+f, g);
  411. }
  412. return false;
  413. }
  414. };
  415. smoke.init = true;
  416. if (typeof module != 'undefined' && module.exports) {
  417. module.exports = smoke;
  418. }
  419. else if (typeof define === 'function' && define.amd) {
  420. define('smoke', [], function() {
  421. return smoke;
  422. });
  423. }
  424. else {
  425. this.smoke = smoke;
  426. }
  427. })(window, document);