offcanvas.js 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. /* ========================================================================
  2. * Bootstrap: offcanvas.js v3.1.3
  3. * http://jasny.github.io/bootstrap/javascript/#offcanvas
  4. * ========================================================================
  5. * Copyright 2013-2014 Arnold Daniels
  6. *
  7. * Licensed under the Apache License, Version 2.0 (the "License")
  8. * you may not use this file except in compliance with the License.
  9. * You may obtain a copy of the License at
  10. *
  11. * http://www.apache.org/licenses/LICENSE-2.0
  12. *
  13. * Unless required by applicable law or agreed to in writing, software
  14. * distributed under the License is distributed on an "AS IS" BASIS,
  15. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16. * See the License for the specific language governing permissions and
  17. * limitations under the License.
  18. * ======================================================================== */
  19. +function ($) { "use strict";
  20. // OFFCANVAS PUBLIC CLASS DEFINITION
  21. // =================================
  22. var OffCanvas = function (element, options) {
  23. this.$element = $(element)
  24. this.options = $.extend({}, OffCanvas.DEFAULTS, options)
  25. this.state = null
  26. this.placement = null
  27. if (this.options.recalc) {
  28. this.calcClone()
  29. $(window).on('resize', $.proxy(this.recalc, this))
  30. }
  31. if (this.options.autohide)
  32. $(document).on('click', $.proxy(this.autohide, this))
  33. if (this.options.toggle) this.toggle()
  34. if (this.options.disablescrolling) {
  35. this.options.disableScrolling = this.options.disablescrolling
  36. delete this.options.disablescrolling
  37. }
  38. }
  39. OffCanvas.DEFAULTS = {
  40. toggle: true,
  41. placement: 'auto',
  42. autohide: true,
  43. recalc: true,
  44. disableScrolling: true
  45. }
  46. OffCanvas.prototype.offset = function () {
  47. switch (this.placement) {
  48. case 'left':
  49. case 'right': return this.$element.outerWidth()
  50. case 'top':
  51. case 'bottom': return this.$element.outerHeight()
  52. }
  53. }
  54. OffCanvas.prototype.calcPlacement = function () {
  55. if (this.options.placement !== 'auto') {
  56. this.placement = this.options.placement
  57. return
  58. }
  59. if (!this.$element.hasClass('in')) {
  60. this.$element.css('visiblity', 'hidden !important').addClass('in')
  61. }
  62. var horizontal = $(window).width() / this.$element.width()
  63. var vertical = $(window).height() / this.$element.height()
  64. var element = this.$element
  65. function ab(a, b) {
  66. if (element.css(b) === 'auto') return a
  67. if (element.css(a) === 'auto') return b
  68. var size_a = parseInt(element.css(a), 10)
  69. var size_b = parseInt(element.css(b), 10)
  70. return size_a > size_b ? b : a
  71. }
  72. this.placement = horizontal >= vertical ? ab('left', 'right') : ab('top', 'bottom')
  73. if (this.$element.css('visibility') === 'hidden !important') {
  74. this.$element.removeClass('in').css('visiblity', '')
  75. }
  76. }
  77. OffCanvas.prototype.opposite = function (placement) {
  78. switch (placement) {
  79. case 'top': return 'bottom'
  80. case 'left': return 'right'
  81. case 'bottom': return 'top'
  82. case 'right': return 'left'
  83. }
  84. }
  85. OffCanvas.prototype.getCanvasElements = function() {
  86. // Return a set containing the canvas plus all fixed elements
  87. var canvas = this.options.canvas ? $(this.options.canvas) : this.$element
  88. var fixed_elements = canvas.find('*').filter(function() {
  89. return $(this).css('position') === 'fixed'
  90. }).not(this.options.exclude)
  91. return canvas.add(fixed_elements)
  92. }
  93. OffCanvas.prototype.slide = function (elements, offset, callback) {
  94. // Use jQuery animation if CSS transitions aren't supported
  95. if (!$.support.transition) {
  96. var anim = {}
  97. anim[this.placement] = "+=" + offset
  98. return elements.animate(anim, 350, callback)
  99. }
  100. var placement = this.placement
  101. var opposite = this.opposite(placement)
  102. elements.each(function() {
  103. if ($(this).css(placement) !== 'auto')
  104. $(this).css(placement, (parseInt($(this).css(placement), 10) || 0) + offset)
  105. if ($(this).css(opposite) !== 'auto')
  106. $(this).css(opposite, (parseInt($(this).css(opposite), 10) || 0) - offset)
  107. })
  108. this.$element
  109. .one($.support.transition.end, callback)
  110. .emulateTransitionEnd(350)
  111. }
  112. OffCanvas.prototype.disableScrolling = function() {
  113. var bodyWidth = $('body').width()
  114. var prop = 'padding-' + this.opposite(this.placement)
  115. if ($('body').data('offcanvas-style') === undefined) {
  116. $('body').data('offcanvas-style', $('body').attr('style') || '')
  117. }
  118. $('body').css('overflow', 'hidden')
  119. if ($('body').width() > bodyWidth) {
  120. var padding = parseInt($('body').css(prop), 10) + $('body').width() - bodyWidth
  121. setTimeout(function() {
  122. $('body').css(prop, padding)
  123. }, 1)
  124. }
  125. }
  126. OffCanvas.prototype.show = function () {
  127. if (this.state) return
  128. var startEvent = $.Event('show.bs.offcanvas')
  129. this.$element.trigger(startEvent)
  130. if (startEvent.isDefaultPrevented()) return
  131. this.state = 'slide-in'
  132. this.calcPlacement();
  133. var elements = this.getCanvasElements()
  134. var placement = this.placement
  135. var opposite = this.opposite(placement)
  136. var offset = this.offset()
  137. if (elements.index(this.$element) !== -1) {
  138. $(this.$element).data('offcanvas-style', $(this.$element).attr('style') || '')
  139. this.$element.css(placement, -1 * offset)
  140. this.$element.css(placement); // Workaround: Need to get the CSS property for it to be applied before the next line of code
  141. }
  142. elements.addClass('canvas-sliding').each(function() {
  143. if ($(this).data('offcanvas-style') === undefined) $(this).data('offcanvas-style', $(this).attr('style') || '')
  144. if ($(this).css('position') === 'static') $(this).css('position', 'relative')
  145. if (($(this).css(placement) === 'auto' || $(this).css(placement) === '0px') &&
  146. ($(this).css(opposite) === 'auto' || $(this).css(opposite) === '0px')) {
  147. $(this).css(placement, 0)
  148. }
  149. })
  150. if (this.options.disableScrolling) this.disableScrolling()
  151. var complete = function () {
  152. if (this.state != 'slide-in') return
  153. this.state = 'slid'
  154. elements.removeClass('canvas-sliding').addClass('canvas-slid')
  155. this.$element.trigger('shown.bs.offcanvas')
  156. }
  157. setTimeout($.proxy(function() {
  158. this.$element.addClass('in')
  159. this.slide(elements, offset, $.proxy(complete, this))
  160. }, this), 1)
  161. }
  162. OffCanvas.prototype.hide = function (fast) {
  163. if (this.state !== 'slid') return
  164. var startEvent = $.Event('hide.bs.offcanvas')
  165. this.$element.trigger(startEvent)
  166. if (startEvent.isDefaultPrevented()) return
  167. this.state = 'slide-out'
  168. var elements = $('.canvas-slid')
  169. var placement = this.placement
  170. var offset = -1 * this.offset()
  171. var complete = function () {
  172. if (this.state != 'slide-out') return
  173. this.state = null
  174. this.placement = null
  175. this.$element.removeClass('in')
  176. elements.removeClass('canvas-sliding')
  177. elements.add(this.$element).add('body').each(function() {
  178. $(this).attr('style', $(this).data('offcanvas-style')).removeData('offcanvas-style')
  179. })
  180. this.$element.trigger('hidden.bs.offcanvas')
  181. }
  182. elements.removeClass('canvas-slid').addClass('canvas-sliding')
  183. setTimeout($.proxy(function() {
  184. this.slide(elements, offset, $.proxy(complete, this))
  185. }, this), 1)
  186. }
  187. OffCanvas.prototype.toggle = function () {
  188. if (this.state === 'slide-in' || this.state === 'slide-out') return
  189. this[this.state === 'slid' ? 'hide' : 'show']()
  190. }
  191. OffCanvas.prototype.calcClone = function() {
  192. this.$calcClone = this.$element.clone()
  193. .html('')
  194. .addClass('offcanvas-clone').removeClass('in')
  195. .appendTo($('body'))
  196. }
  197. OffCanvas.prototype.recalc = function () {
  198. if (this.$calcClone.css('display') === 'none' || (this.state !== 'slid' && this.state !== 'slide-in')) return
  199. this.state = null
  200. this.placement = null
  201. var elements = this.getCanvasElements()
  202. this.$element.removeClass('in')
  203. elements.removeClass('canvas-slid')
  204. elements.add(this.$element).add('body').each(function() {
  205. $(this).attr('style', $(this).data('offcanvas-style')).removeData('offcanvas-style')
  206. })
  207. }
  208. OffCanvas.prototype.autohide = function (e) {
  209. if ($(e.target).closest(this.$element).length === 0) this.hide()
  210. }
  211. // OFFCANVAS PLUGIN DEFINITION
  212. // ==========================
  213. var old = $.fn.offcanvas
  214. $.fn.offcanvas = function (option) {
  215. return this.each(function () {
  216. var $this = $(this)
  217. var data = $this.data('bs.offcanvas')
  218. var options = $.extend({}, OffCanvas.DEFAULTS, $this.data(), typeof option === 'object' && option)
  219. if (!data) $this.data('bs.offcanvas', (data = new OffCanvas(this, options)))
  220. if (typeof option === 'string') data[option]()
  221. })
  222. }
  223. $.fn.offcanvas.Constructor = OffCanvas
  224. // OFFCANVAS NO CONFLICT
  225. // ====================
  226. $.fn.offcanvas.noConflict = function () {
  227. $.fn.offcanvas = old
  228. return this
  229. }
  230. // OFFCANVAS DATA-API
  231. // =================
  232. $(document).on('click.bs.offcanvas.data-api', '[data-toggle=offcanvas]', function (e) {
  233. var $this = $(this), href
  234. var target = $this.attr('data-target')
  235. || e.preventDefault()
  236. || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
  237. var $canvas = $(target)
  238. var data = $canvas.data('bs.offcanvas')
  239. var option = data ? 'toggle' : $this.data()
  240. e.stopPropagation()
  241. if (data) data.toggle()
  242. else $canvas.offcanvas(option)
  243. })
  244. }(window.jQuery);