af.popup.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. //onShow = open
  2. //cancelCallback = cancel
  3. //doneCallback = done
  4. //removed id property
  5. // added this.popup = $el;
  6. (function($){
  7. "use strict";
  8. var queue=[];
  9. $.widget("afui.popup",{
  10. options:{
  11. addCssClass: "",
  12. title: "Alert",
  13. message: "",
  14. cancelText: "Cancel",
  15. cancel: null,
  16. cancelClass: "",
  17. doneText: "",
  18. done:null,
  19. doneClass: "",
  20. cancelOnly: false,
  21. open:null,
  22. autoCloseDone: true,
  23. suppressTitle: false
  24. },
  25. _create:function(){
  26. },
  27. _init:function(){
  28. queue.push(this);
  29. if (queue.length === 1)
  30. this.show();
  31. },
  32. widget:function(){
  33. return this.popup;
  34. },
  35. show: function () {
  36. var markup = "<div class='afPopup hidden "+ this.options.addCssClass + "'>"+
  37. "<header>" + this.options.title + "</header>"+
  38. "<div>" + this.options.message + "</div>"+
  39. "<footer>"+
  40. "<a href='javascript:;' class='" + this.options.cancelClass + "' id='cancel'>" + this.options.cancelText + "</a>"+
  41. "<a href='javascript:;' class='" + this.options.doneClass + "' id='action'>" + this.options.doneText + "</a>"+
  42. "<div style='clear:both'></div>"+
  43. "</footer>"+
  44. "</div>";
  45. var $el=$(markup);
  46. this.element.append($el);
  47. this.popup=$el;
  48. this._on($el,{close:"hide"});
  49. if (this.options.cancelOnly) {
  50. $el.find("A#action").hide();
  51. $el.find("A#cancel").addClass("center");
  52. }
  53. //@TODO Change to event
  54. this._on($el,{"click a":function(event){
  55. var button = $(event.target);
  56. console.log(button);
  57. if (button.attr("id") === "cancel") {
  58. this._trigger("cancel",event);
  59. //this.options.cancelCallback.call(this.options.cancelCallback, this);
  60. this.hide();
  61. } else {
  62. this._trigger("done",event);
  63. //this.options.doneCallback.call(this.options.doneCallback, this);
  64. if (this.options.autoCloseDone)
  65. this.hide();
  66. }
  67. event.preventDefault();
  68. }});
  69. this.positionPopup();
  70. $.blockUI(0.5);
  71. this._on({orientationchange:"positionPopup"});
  72. //force header/footer showing to fix CSS style bugs
  73. this.popup.find("header,footer").show();
  74. this._delay(function(){
  75. this.popup.removeClass("hidden").addClass("show");
  76. //this.options.onShow(this);
  77. this._trigger("open");
  78. },50);
  79. },
  80. hide: function () {
  81. this.popup.addClass("hidden");
  82. $.unblockUI();
  83. if(1==1){//!$.os.ie&&!$.os.android){
  84. this._delay("remove",250);
  85. }
  86. else
  87. this.remove();
  88. },
  89. remove: function () {
  90. this._off(this.element,"orientationchange");
  91. this.popup.remove();
  92. queue.splice(0, 1);
  93. if (queue.length > 0)
  94. queue[0].show();
  95. },
  96. positionPopup: function () {
  97. this.popup.css({
  98. "top":((window.innerHeight / 2.5) + window.pageYOffset) - (this.popup[0].clientHeight / 2),
  99. "left":(window.innerWidth / 2) - (this.popup[0].clientWidth / 2)
  100. });
  101. }
  102. });
  103. var uiBlocked = false;
  104. $.blockUI = function (opacity) {
  105. if (uiBlocked)
  106. return;
  107. opacity = opacity ? " style='opacity:" + opacity + ";'" : "";
  108. $("BODY").prepend($("<div id='mask'" + opacity + "></div>"));
  109. $("BODY DIV#mask").bind("touchstart", function (e) {
  110. e.preventDefault();
  111. });
  112. $("BODY DIV#mask").bind("touchmove", function (e) {
  113. e.preventDefault();
  114. });
  115. uiBlocked = true;
  116. };
  117. $.unblockUI = function () {
  118. uiBlocked = false;
  119. $("BODY DIV#mask").unbind("touchstart");
  120. $("BODY DIV#mask").unbind("touchmove");
  121. $("BODY DIV#mask").remove();
  122. };
  123. $.afui.registerDataDirective("[data-alert]",function(item){
  124. var $item=$(item);
  125. var message=$item.attr("data-message");
  126. if(message.length===0) return;
  127. $(document.body).popup({message:message,cancelOnly:true});
  128. });
  129. $.afui.popup=function(opts){
  130. return $(document.body).popup(opts);
  131. };
  132. })(jQuery);