popup.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. var popup_timeout;
  2. var dismiss_interval;
  3. var popup = {
  4. lang: {
  5. "Cancel": "Cancel",
  6. "OK": "OK",
  7. },
  8. init: function(){
  9. var ff = document.getElementById('popup-out')
  10. if (!ff){
  11. var ff = document.createElement('div');
  12. ff.setAttribute('id','popup-out');
  13. ff.setAttribute('class','popup-base');
  14. document.body.appendChild(ff);
  15. }
  16. return ff;
  17. },
  18. load: function(){
  19. popup.init();
  20. },
  21. mask: function(type) {
  22. var ff = document.getElementById('popup-out');
  23. if(type == "show"){
  24. ff.className = 'popup-base popup-visible';
  25. }else if(type == "hidden"){
  26. ff.className = ' ';
  27. }
  28. },
  29. build: function(e,f){
  30. popup.init();
  31. var prompt = '';
  32. if (f.type == 'prompt'){
  33. prompt = '<div class="dialog-prompt">'+'<input id="dialog-input" type="text" />'+'</div>';
  34. }
  35. var buttons = '';
  36. if (f.type != 'signal' && f.type != 'async' && f.type != 'loading'){
  37. buttons = '<div class="dialog-buttons">';
  38. if (f.type == 'alert'){
  39. buttons += '<button id="alert-ok">' + popup.lang["OK"]+ '</button>';
  40. }
  41. if (f.type == 'prompt' || f.type == 'confirm'){
  42. buttons += '<button id="'+f.type+'-cancel" class="cancel">' + popup.lang["Cancel"]+ '</button>';
  43. buttons += '<button id="'+f.type+'-ok">' + popup.lang["OK"]+ '</button>';
  44. }
  45. buttons += '</div>';
  46. }
  47. var box = '<div id="popup-bg"></div>';
  48. box += '<div class="dialog popup" id="dialog-popup" >';
  49. var close_btn = "";
  50. if (!f.hasOwnProperty("compact") || !f.compact) {
  51. var close_btn = '<span id="popup-close" class="popup-close"></span>';
  52. }
  53. var indicator = "";
  54. if (f.hasOwnProperty('indicator') && f.indicator) {
  55. var indicator = '<div id="dismiss-indicator" align="center" style="display: none;"></div>';
  56. }
  57. box += close_btn;
  58. box += '<div class="dialog-inner">';
  59. box += '<div id="dialog-content" class="dialog-content">' + e + prompt + indicator + '</div>';
  60. box += buttons + '</div>' + '</div>';
  61. // clear the timeout if it's already been activated
  62. if (popup_timeout){
  63. clearTimeout(popup_timeout);
  64. }
  65. var ff = document.getElementById('popup-out');
  66. ff.innerHTML = box;
  67. popup.set_pos();
  68. ff.className = 'popup-base popup-visible';
  69. // close on "popup-close" click
  70. if (document.getElementById('popup-close')) {
  71. var close = document.getElementById('popup-close');
  72. close.addEventListener("click",function(){
  73. popup.destroy(f.type);
  74. if (f.type == 'prompt' || f.type == 'confirm' || f.type == 'signal'){
  75. if (f.callback) {
  76. f.callback(false);
  77. }
  78. }
  79. }, false);
  80. }
  81. // close on background click
  82. if (!f.hasOwnProperty("insist") || !f.insist) {
  83. var g = document.getElementById('popup-bg');
  84. g.addEventListener("click",function(){
  85. popup.destroy(f.type);
  86. if (f.type == 'prompt' || f.type == 'confirm' || f.type == 'signal'){
  87. if (f.callback) {
  88. f.callback(false);
  89. }
  90. }
  91. }, false);
  92. }
  93. // listeners for button actions
  94. if (f.type == 'alert'){
  95. g.addEventListener("click", function(){
  96. f.callback();
  97. }, false);
  98. // return true
  99. var h = document.getElementById('alert-ok');
  100. h.addEventListener("click", function(){
  101. popup.destroy(f.type);
  102. f.callback();
  103. }, false);
  104. // listen for enter key or space, close it
  105. document.onkeyup = function(e){
  106. if (e.keyCode == 13 || e.keyCode == 32){
  107. popup.destroy(f.type);
  108. f.callback();
  109. }
  110. };
  111. }
  112. if (f.type == 'confirm'){
  113. // return false
  114. var h = document.getElementById('confirm-cancel');
  115. h.addEventListener("click", function(){
  116. popup.destroy(f.type);
  117. f.callback(false);
  118. }, false);
  119. // return true
  120. var i = document.getElementById('confirm-ok');
  121. i.addEventListener("click",function(){
  122. popup.destroy(f.type);
  123. f.callback(true);
  124. }, false);
  125. // listen for enter key or space, close it & return true
  126. document.onkeyup = function(e){
  127. if (e.keyCode == 13 || e.keyCode == 32){
  128. popup.destroy(f.type);
  129. f.callback(true);
  130. }
  131. };
  132. }
  133. if (f.type == 'prompt'){
  134. // focus on input
  135. var pi = document.getElementById('dialog-input');
  136. setTimeout(function(){
  137. pi.focus();
  138. pi.select();
  139. },100);
  140. // return false
  141. var h = document.getElementById('prompt-cancel');
  142. h.addEventListener("click",function(){
  143. popup.destroy(f.type);
  144. f.callback(false);
  145. }, false);
  146. // return contents of input box
  147. var j = document.getElementById('dialog-input');
  148. var i = document.getElementById('prompt-ok');
  149. i.addEventListener("click",function(){
  150. popup.destroy(f.type);
  151. f.callback(j.value);
  152. }, false);
  153. // listen for enter
  154. document.onkeyup = function(e){
  155. if (e.keyCode == 13){
  156. popup.destroy(f.type);
  157. f.callback(j.value);
  158. }
  159. };
  160. }
  161. // close after f.timeout ms
  162. if (f.type == 'signal' && f.timeout != 0){
  163. if (document.getElementById("dismiss-indicator")) {
  164. document.getElementById("dismiss-indicator").style.display = "";
  165. dismiss_interval = setInterval(function() {
  166. document.getElementById("dismiss-indicator").innerHTML += "✾&nbsp&nbsp";
  167. }, 1000);
  168. }
  169. popup_timeout = setTimeout(function(){
  170. popup.destroy(f.type);
  171. if (f.callback) {
  172. f.callback();
  173. }
  174. }, f.timeout);
  175. }
  176. if(f.type == "async"){
  177. var options = {
  178. url: f.url,
  179. data: {
  180. lxt: sid
  181. },
  182. format: "html",
  183. method: "GET",
  184. before: null,
  185. callback: function (html){
  186. document.getElementById("dialog-content").innerHTML = html;
  187. popup.set_pos();
  188. },
  189. };
  190. ajax(options);
  191. }
  192. },
  193. destroy: function(type){
  194. if (dismiss_interval) {
  195. clearInterval(dismiss_interval);
  196. }
  197. var box = document.getElementById('popup-out');
  198. box.innerHTML = "";
  199. box.setAttribute('class','popup-base');
  200. // confirm/alert/prompt remove click listener
  201. if (g = document.getElementById(type + '-ok')){
  202. g.removeEventListener("click", function(){}, false);
  203. // remove keyup listener
  204. document.onkeyup = null;
  205. }
  206. // confirm/prompt remove click listener
  207. if (h = document.getElementById(type + '-cancel')){
  208. h.removeEventListener("click", function(){}, false);
  209. }
  210. },
  211. set_pos: function(){
  212. var dialog = document.getElementById("dialog-popup");
  213. var offset_top = parseInt((window.innerHeight - dialog.clientHeight) / 2) >= 0 ? parseInt((window.innerHeight - dialog.clientHeight) / 2) : 5;
  214. var top = document.body.scrollTop + offset_top;
  215. dialog.style.top = top + "px";
  216. dialog.style.left = (parseInt(document.body.clientWidth))/2 - parseInt(dialog.scrollWidth)/2 + document.body.scrollLeft + 5 +"px";
  217. },
  218. alert: function(e,f){
  219. if (typeof(f) == 'undefined'){
  220. f = function (){};
  221. }
  222. popup.build(e,{
  223. type:'alert',
  224. callback:f
  225. });
  226. },
  227. signal: function(e, timeout, callback, insist, compact, indicator){
  228. if (typeof(timeout) == 'undefined'){
  229. var timeout = 5000;
  230. }
  231. var insist = typeof(insist) == 'undefined' ? false : insist;
  232. var compact = typeof(compact) == 'undefined' ? false : compact;
  233. var indicator = typeof(indicator) == 'undefined' ? false : indicator;
  234. popup.build(e,{
  235. type: 'signal',
  236. timeout: timeout,
  237. insist: insist,
  238. compact: compact,
  239. indicator: indicator,
  240. callback: callback
  241. });
  242. },
  243. confirm: function(e,f){
  244. popup.build(e,{
  245. type:'confirm',
  246. callback:f
  247. });
  248. },
  249. prompt: function(e,f){
  250. return popup.build(e,{
  251. type:'prompt',
  252. callback:f
  253. });
  254. },
  255. async: function(url){
  256. var dialog = document.getElementById("dialog-content");
  257. if (dialog) {
  258. var html = "<div class='popup-loading' style='width: " + (dialog.clientWidth - 20) + "px;'>";
  259. } else {
  260. var html = "<div class='popup-loading'>";
  261. }
  262. var img = "<img src='/static/img/loading.gif' />";
  263. html += img;
  264. html += "</div>";
  265. return popup.build(html, {
  266. type:'async',
  267. url:url
  268. });
  269. },
  270. loading : function(url){
  271. var e = "<div class='popup-loading'>";
  272. var img = "<img src='/static/img/loading.gif' />";
  273. e += img;
  274. e+= "</div>";
  275. return popup.build(e,{
  276. type:'loading',
  277. url:url
  278. });
  279. }
  280. };
  281. /*
  282. var pageX = 0;
  283. var pageY = 0;
  284. window.addEventListener("touchstart", function(e) {
  285. pageY = e.pageY;
  286. }, true);
  287. */