af.actionsheet.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. /**
  2. * af.actionsheet - an actionsheet for html5 mobile apps
  3. * Copyright 2012 - Intel
  4. */
  5. (function($) {
  6. $.fn["actionsheet"] = function(opts) {
  7. var tmp;
  8. for (var i = 0; i < this.length; i++) {
  9. tmp = new actionsheet(this[i], opts);
  10. }
  11. return this.length == 1 ? tmp : this;
  12. };
  13. var actionsheet = (function() {
  14. var actionsheet = function(elID, opts) {
  15. if (typeof elID == "string" || elID instanceof String) {
  16. this.el = document.getElementById(elID);
  17. } else {
  18. this.el = elID;
  19. }
  20. if (!this.el) {
  21. alert("Could not find element for actionsheet " + elID);
  22. return;
  23. }
  24. if (this instanceof actionsheet) {
  25. if (typeof(opts) == "object") {
  26. for (var j in opts) {
  27. this[j] = opts[j];
  28. }
  29. }
  30. } else {
  31. return new actionsheet(elID, opts);
  32. }
  33. // try {
  34. var that = this;
  35. var markStart = '<div id="af_actionsheet"><div style="width:100%">';
  36. var markEnd = '</div></div>';
  37. var markup;
  38. if (typeof opts == "string") {
  39. markup = $(markStart + opts + "<a href='javascript:;' class='cancel'>Cancel</a>" + markEnd);
  40. } else if (typeof opts == "object") {
  41. markup = $(markStart + markEnd);
  42. var container = $(markup.children().get(0));
  43. opts.push({
  44. text: "Cancel",
  45. cssClasses: "cancel"
  46. });
  47. for (var i = 0; i < opts.length; i++) {
  48. var item = $('<a href="javascript:;" >' + (opts[i].text || "TEXT NOT ENTERED") + '</a>');
  49. item[0].onclick = (opts[i].handler || function() {});
  50. if (opts[i].cssClasses && opts[i].cssClasses.length > 0)
  51. item.addClass(opts[i].cssClasses);
  52. container.append(item);
  53. }
  54. }
  55. $(elID).find("#af_actionsheet").remove();
  56. $(elID).find("#af_action_mask").remove();
  57. actionsheetEl = $(elID).append(markup);
  58. markup.vendorCss("Transition", "all 0ms");
  59. markup.cssTranslate("0,0");
  60. markup.css("top", window.innerHeight + "px");
  61. this.el.style.overflow = "hidden";
  62. markup.on("click", "a", function() {
  63. that.hideSheet();
  64. return false;
  65. });
  66. this.activeSheet = markup;
  67. $(elID).append('<div id="af_action_mask" style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;z-index:9998;background:rgba(0,0,0,.4)"/>');
  68. setTimeout(function() {
  69. markup.vendorCss("Transition", "all 300ms");
  70. markup.cssTranslate("0," + (-(markup.height())) + "px");
  71. }, 10);
  72. };
  73. actionsheet.prototype = {
  74. activeSheet: null,
  75. hideSheet: function() {
  76. var that = this;
  77. this.activeSheet.off("click", "a", function() {
  78. that.hideSheet();
  79. });
  80. $(this.el).find("#af_action_mask").remove();
  81. this.activeSheet.vendorCss("Transition", "all 0ms");
  82. var markup = this.activeSheet;
  83. var theEl = this.el;
  84. setTimeout(function() {
  85. markup.vendorCss("Transition", "all 300ms");
  86. markup.cssTranslate("0,0px");
  87. setTimeout(function() {
  88. markup.remove();
  89. markup = null;
  90. theEl.style.overflow = "none";
  91. }, 500);
  92. }, 10);
  93. }
  94. };
  95. return actionsheet;
  96. })();
  97. })(af);