bjui-contextmenu.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. /*!
  2. * B-JUI v1.2 (http://b-jui.com)
  3. * Git@OSC (http://git.oschina.net/xknaan/B-JUI)
  4. * Copyright 2014 K'naan (xknaan@163.com).
  5. * Licensed under Apache (http://www.apache.org/licenses/LICENSE-2.0)
  6. */
  7. /* ========================================================================
  8. * B-JUI: bjui-contextmenu.js v1.2
  9. * @author K'naan (xknaan@163.com)
  10. * -- Modified from dwz.contextmenu.js (author:ZhangHuihua@msn.com)
  11. * http://git.oschina.net/xknaan/B-JUI/blob/master/BJUI/js/bjui-contextmenu.js
  12. * ========================================================================
  13. * Copyright 2014 K'naan.
  14. * Licensed under Apache (http://www.apache.org/licenses/LICENSE-2.0)
  15. * ======================================================================== */
  16. +function ($) {
  17. 'use strict';
  18. // CONTEXTMENU GLOBAL ELEMENTS
  19. // ======================
  20. var $menu, $shadow, hash
  21. $(function() {
  22. var INIT_CONTEXTMENU = function() {
  23. $menu = $('<div id="bjui-contextmenu"></div>').hide()
  24. $shadow = $('<div id="bjui-contextmenuShadow"></div>').hide()
  25. hash = []
  26. $('body').append('<!-- contextmenu -->').append($menu).append($shadow)
  27. }
  28. INIT_CONTEXTMENU()
  29. })
  30. // CONTEXTMENU CLASS DEFINITION
  31. // ======================
  32. var Contextmenu = function(element, options) {
  33. this.$element = $(element)
  34. this.options = options
  35. }
  36. Contextmenu.DEFAULTS = {
  37. id : undefined,
  38. shadow : true,
  39. bindings : {},
  40. ctrSub : null
  41. }
  42. Contextmenu.prototype.init = function() {
  43. var that = this
  44. var op = this.options
  45. if (!op.id) return
  46. hash.push({
  47. id : op.id,
  48. shadow : op.shadow,
  49. bindings : op.bindings || {},
  50. ctrSub : op.ctrSub
  51. })
  52. var index = hash.length - 1
  53. this.$element.on('contextmenu', function(e) {
  54. that.display(index, this, e, op)
  55. return false
  56. })
  57. }
  58. Contextmenu.prototype.display = function(index, trigger, e, options) {
  59. var that = this
  60. var cur = hash[index]
  61. var cp = BJUI.regional[cur.id]
  62. var content = FRAG[cur.id]
  63. $.each(cp, function(i, n) {
  64. content = content.replace('#'+ i +'#', cp[i])
  65. })
  66. // Send the content to the menu
  67. $menu.html(content)
  68. $.each(cur.bindings, function(id, func) {
  69. $('[rel="'+ id +'"]', $menu).on('click', function(e) {
  70. that.hide()
  71. func($(trigger), $('#bjui-'+ cur.id))
  72. })
  73. })
  74. var posX = e.pageX
  75. var posY = e.pageY
  76. if ($(window).width() < posX + $menu.width()) posX -= $menu.width()
  77. if ($(window).height() < posY + $menu.height()) posY -= $menu.height()
  78. $menu.css({'left':posX, 'top':posY}).show()
  79. if (cur.shadow)
  80. $shadow.css({width:$menu.width(), height:$menu.height(), left:posX + 3, top:posY + 3}).show()
  81. $(document).one('click', that.hide)
  82. if ($.isFunction(cur.ctrSub))
  83. cur.ctrSub($(trigger), $('#bjui-'+ cur.id))
  84. }
  85. Contextmenu.prototype.hide = function() {
  86. $menu.hide()
  87. $shadow.hide()
  88. }
  89. /* Custom contextmenu */
  90. Contextmenu.prototype.show = function(options) {
  91. var that = this
  92. if (options.items && options.items.length) {
  93. that.$element.on('contextmenu', function(e) {
  94. var isShow = true
  95. /*exclude*/
  96. if (options.exclude) {
  97. that.$element.find(options.exclude).each(function() {
  98. if (this == e.target || $(this).find(e.target).length) {
  99. isShow = false
  100. return
  101. }
  102. })
  103. }
  104. if (!isShow) {
  105. e.stopPropagation()
  106. return !isShow
  107. } else {
  108. that.custom(options.items, e)
  109. }
  110. return false
  111. })
  112. }
  113. }
  114. Contextmenu.prototype.custom = function(items, e) {
  115. $menu.empty().html('<ul></ul>')
  116. var that = this
  117. var options = that.options
  118. var $ul = $menu.find('> ul'), $li
  119. $.each(items, function(i, n) {
  120. var icon = ''
  121. if (n.icon) icon = '<i class="fa fa-'+ n.icon +'"></i>'
  122. if (n.title == 'diver') {
  123. $li = $('<li class="diver"></li>')
  124. } else {
  125. $li = $('<li><span class="icon">'+ icon +'</span><span class="title">'+ n.title +'</span></li>')
  126. if (n.func && typeof n.func == 'string') n.func = n.func.toFunc()
  127. if (n.func) {
  128. $li.on('click', function(evt) {
  129. that.hide()
  130. n.func(that.$element, $li)
  131. })
  132. }
  133. }
  134. $li.appendTo($ul)
  135. })
  136. var posX = e.pageX
  137. var posY = e.pageY
  138. if ($(window).width() < posX + $menu.width()) posX -= $menu.width()
  139. if ($(window).height() < posY + $menu.height()) posY -= $menu.height()
  140. $menu.css({'left':posX, 'top':posY}).show()
  141. if (options.shadow)
  142. $shadow.css({width:$menu.width(), height:$menu.height(), left:posX + 3, top:posY + 3}).show()
  143. $(document).one('click', that.hide)
  144. }
  145. // CONTEXTMENU PLUGIN DEFINITION
  146. // =======================
  147. function Plugin(option) {
  148. var args = arguments
  149. var property = option
  150. return this.each(function () {
  151. var $this = $(this)
  152. var options = $.extend({}, Contextmenu.DEFAULTS, $this.data(), typeof option == 'object' && option)
  153. var data = $this.data('bjui.contextmenu')
  154. if (!data) $this.data('bjui.contextmenu', (data = new Contextmenu(this, options)))
  155. if (typeof property == 'string' && $.isFunction(data[property])) {
  156. [].shift.apply(args)
  157. if (!args) data[property]()
  158. else data[property].apply(data, args)
  159. } else {
  160. data.init()
  161. }
  162. })
  163. }
  164. var old = $.fn.contextmenu
  165. $.fn.contextmenu = Plugin
  166. $.fn.contextmenu.Constructor = Contextmenu
  167. // CONTEXTMENU NO CONFLICT
  168. // =================
  169. $.fn.contextmenu.noConflict = function () {
  170. $.fn.contextmenu = old
  171. return this
  172. }
  173. }(jQuery);