/assets/js/jquery.bully.js

https://github.com/FameThemes/onepress · JavaScript · 244 lines · 190 code · 38 blank · 16 comment · 31 complexity · 0bec1739a2a431d6946fed397b281492 MD5 · raw file

  1. /*!
  2. * jQuery Bully Plugin v0.1.3
  3. * Examples and documentation at http://pixelgrade.github.io/rellax/
  4. * Copyright (c) 2016 PixelGrade http://www.pixelgrade.com
  5. * Licensed under MIT http://www.opensource.org/licenses/mit-license.php/
  6. */
  7. (function($, window, document, undefined) {
  8. var $window = $(window),
  9. windowHeight = $window.height(),
  10. elements = [],
  11. $bully,
  12. lastScrollY =
  13. (window.pageYOffset || document.documentElement.scrollTop) -
  14. (document.documentElement.clientTop || 0),
  15. current = 0,
  16. inversed = false,
  17. frameRendered = true;
  18. $bully = $('<div class="c-bully">').appendTo("body");
  19. if ( Onepress_Bully.disable_mobile ) {
  20. $bully.addClass( 'c-bully-hide-on-mobile' );
  21. }
  22. $current = $(
  23. '<div class="c-bully__bullet c-bully__bullet--active">'
  24. ).appendTo($bully);
  25. (function update() {
  26. if (frameRendered !== true) {
  27. var count = 0;
  28. var lastItemId = false;
  29. // Ty to to find item that bully over
  30. var _bt = $bully.offset().top;
  31. var _bh = $bully.height();
  32. var _bb = _bh + _bt;
  33. if ($("#masthead").hasClass("is-sticky")) {
  34. _bb -= $("#masthead").height();
  35. }
  36. if ($("#wpadminbar").length) {
  37. _bb -= $("#wpadminbar").height();
  38. }
  39. $.each(Onepress_Bully.sections, function(id, arg) {
  40. var element = $("#" + id);
  41. if (element.length) {
  42. var _et = element.offset().top;
  43. var _eh = element.height();
  44. var _eb = _eh + _et;
  45. if (_et <= _bt || _bb >= _eb || (_bb >= _et && _eb > _bb)) {
  46. lastItemId = id;
  47. if (arg.enable) {
  48. count = count + 1;
  49. }
  50. }
  51. }
  52. });
  53. // New insverse
  54. if (
  55. lastItemId &&
  56. typeof Onepress_Bully.sections[lastItemId] !== "undefined"
  57. ) {
  58. if (Onepress_Bully.sections[lastItemId].inverse) {
  59. $bully.addClass("c-bully--inversed");
  60. } else {
  61. $bully.removeClass("c-bully--inversed");
  62. }
  63. }
  64. if (count !== current) {
  65. var activeBullet = $bully.find("#bully__" + lastItemId);
  66. var bullyOffset = $bully.offset();
  67. var offset = 0;
  68. if (activeBullet.length > 0) {
  69. offset = activeBullet.offset().top - bullyOffset.top;
  70. }
  71. var offset = $bully.children( '.c-bully__bullet' ).not( '.c-bully__bullet--active' ).first().outerHeight( true ) * ( count - 1 );
  72. $current.removeClass("c-bully__bullet--squash");
  73. setTimeout(function() {
  74. $current.addClass("c-bully__bullet--squash");
  75. });
  76. $current.css("top", offset);
  77. current = count;
  78. $bully
  79. .find(".c-bully__bullet--pop")
  80. .removeClass("c-bully__current");
  81. activeBullet.addClass("c-bully__current");
  82. }
  83. }
  84. window.requestAnimationFrame(update);
  85. frameRendered = true;
  86. })();
  87. function reloadAll() {
  88. $.each(elements, function(i, element) {
  89. element._reloadElement();
  90. });
  91. }
  92. function staggerClass($elements, classname, timeout) {
  93. $.each($elements, function(i, obj) {
  94. obj.$bullet.addClass(classname);
  95. /*
  96. var stagger = i * timeout;
  97. setTimeout( function() {
  98. obj.$bullet.addClass( classname );
  99. }, stagger );
  100. */
  101. });
  102. }
  103. $window.on("load", function(e) {
  104. staggerClass(elements, "c-bully__bullet--pop", 400);
  105. frameRendered = false;
  106. });
  107. $window.on("scroll", function(e) {
  108. if (frameRendered === true) {
  109. lastScrollY =
  110. (window.pageYOffset || document.documentElement.scrollTop) -
  111. (document.documentElement.clientTop || 0);
  112. }
  113. frameRendered = false;
  114. });
  115. $window.on("load resize", function() {
  116. reloadAll();
  117. });
  118. function Bully(element, options) {
  119. this.element = element;
  120. this.options = $.extend({}, $.fn.bully.defaults, options);
  121. var label = "";
  122. var id = element.id;
  123. var self = this,
  124. $bullet = $('<div id="bully__' + id + '" class="c-bully__bullet">');
  125. if (Onepress_Bully.enable_label) {
  126. if (id && typeof Onepress_Bully.sections[id] !== "undefined") {
  127. label = Onepress_Bully.sections[id].title;
  128. }
  129. if (label) {
  130. $bullet.append(
  131. '<div class="c-bully__title">' + label + "</div>"
  132. );
  133. }
  134. }
  135. $bullet.data("bully-data", self).appendTo($bully);
  136. $bullet.on("click", function(event) {
  137. event.preventDefault();
  138. event.stopPropagation();
  139. self.onClick();
  140. });
  141. this.$bullet = $bullet;
  142. self._reloadElement();
  143. elements.push(self);
  144. current = 0;
  145. }
  146. Bully.prototype = {
  147. constructor: Bully,
  148. _reloadElement: function() {
  149. this.offset = $(this.element).offset();
  150. this.height = $(this.element).outerHeight();
  151. },
  152. _calcTop: function(top) {
  153. // check if has sticky
  154. if ($("#masthead").hasClass("is-sticky")) {
  155. top -= $("#masthead").height();
  156. }
  157. if ($("#wpadminbar").length) {
  158. top -= $("#wpadminbar").height();
  159. }
  160. return top;
  161. },
  162. onClick: function() {
  163. var self = this,
  164. $target = $("html, body");
  165. if (self.options.scrollDuration == 0) {
  166. $target.scrollTop(this._calcTop(self.offset.top));
  167. return;
  168. }
  169. if (self.options.scrollDuration === "auto") {
  170. var duration =
  171. Math.abs(lastScrollY - self.offset.top) /
  172. (self.options.scrollPerSecond / 1000);
  173. $target.animate(
  174. { scrollTop: this._calcTop(self.offset.top) },
  175. duration
  176. );
  177. return;
  178. }
  179. $target.animate(
  180. { scrollTop: this._calcTop(self.offset.top) },
  181. self.options.scrollDuration
  182. );
  183. }
  184. };
  185. $.fn.bully = function(options) {
  186. return this.each(function() {
  187. if (!$.data(this, "plugin_" + Bully)) {
  188. $.data(this, "plugin_" + Bully, new Bully(this, options));
  189. }
  190. });
  191. };
  192. $.fn.bully.defaults = {
  193. scrollDuration: "auto",
  194. scrollPerSecond: 4000,
  195. sections: {}
  196. };
  197. $window.on("rellax load", reloadAll);
  198. $.each(Onepress_Bully.sections, function(id, args) {
  199. if (args.enable) {
  200. $("#" + id).bully({
  201. scrollPerSecond: 3000
  202. });
  203. }
  204. });
  205. })(jQuery, window, document);