PageRenderTime 27ms CodeModel.GetById 17ms RepoModel.GetById 1ms app.codeStats 0ms

/assets/js/functions.js

https://gitlab.com/afrastgeek/p2m-mc
JavaScript | 288 lines | 217 code | 64 blank | 7 comment | 49 complexity | 6312fac4349052cab8d6ff941f44468f MD5 | raw file
  1. // @codekit-prepend "/vendor/hammer-2.0.8.js";
  2. $( document ).ready(function() {
  3. // DOMMouseScroll included for firefox support
  4. var canScroll = true,
  5. scrollController = null;
  6. $(this).on('mousewheel DOMMouseScroll', function(e){
  7. if (!($('.outer-nav').hasClass('is-vis'))) {
  8. e.preventDefault();
  9. var delta = (e.originalEvent.wheelDelta) ? -e.originalEvent.wheelDelta : e.originalEvent.detail * 20;
  10. if (delta > 50 && canScroll) {
  11. canScroll = false;
  12. clearTimeout(scrollController);
  13. scrollController = setTimeout(function(){
  14. canScroll = true;
  15. }, 800);
  16. updateHelper(1);
  17. }
  18. else if (delta < -50 && canScroll) {
  19. canScroll = false;
  20. clearTimeout(scrollController);
  21. scrollController = setTimeout(function(){
  22. canScroll = true;
  23. }, 800);
  24. updateHelper(-1);
  25. }
  26. }
  27. });
  28. $('.side-nav li, .outer-nav li').click(function(){
  29. if (!($(this).hasClass('is-active'))) {
  30. var $this = $(this),
  31. curActive = $this.parent().find('.is-active'),
  32. curPos = $this.parent().children().index(curActive),
  33. nextPos = $this.parent().children().index($this),
  34. lastItem = $(this).parent().children().length - 1;
  35. updateNavs(nextPos);
  36. updateContent(curPos, nextPos, lastItem);
  37. }
  38. });
  39. $('.cta').click(function(){
  40. var curActive = $('.side-nav').find('.is-active'),
  41. curPos = $('.side-nav').children().index(curActive),
  42. lastItem = $('.side-nav').children().length - 1,
  43. nextPos = lastItem;
  44. updateNavs(lastItem);
  45. updateContent(curPos, nextPos, lastItem);
  46. });
  47. // swipe support for touch devices
  48. var targetElement = document.getElementById('viewport'),
  49. mc = new Hammer(targetElement);
  50. mc.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });
  51. mc.on('swipeup swipedown', function(e) {
  52. updateHelper(e);
  53. });
  54. $(document).keyup(function(e){
  55. if (!($('.outer-nav').hasClass('is-vis'))) {
  56. e.preventDefault();
  57. updateHelper(e);
  58. }
  59. });
  60. // determine scroll, swipe, and arrow key direction
  61. function updateHelper(param) {
  62. var curActive = $('.side-nav').find('.is-active'),
  63. curPos = $('.side-nav').children().index(curActive),
  64. lastItem = $('.side-nav').children().length - 1,
  65. nextPos = 0;
  66. if (param.type === "swipeup" || param.keyCode === 40 || param > 0) {
  67. if (curPos !== lastItem) {
  68. nextPos = curPos + 1;
  69. updateNavs(nextPos);
  70. updateContent(curPos, nextPos, lastItem);
  71. }
  72. else {
  73. updateNavs(nextPos);
  74. updateContent(curPos, nextPos, lastItem);
  75. }
  76. }
  77. else if (param.type === "swipedown" || param.keyCode === 38 || param < 0){
  78. if (curPos !== 0){
  79. nextPos = curPos - 1;
  80. updateNavs(nextPos);
  81. updateContent(curPos, nextPos, lastItem);
  82. }
  83. else {
  84. nextPos = lastItem;
  85. updateNavs(nextPos);
  86. updateContent(curPos, nextPos, lastItem);
  87. }
  88. }
  89. }
  90. // sync side and outer navigations
  91. function updateNavs(nextPos) {
  92. $('.side-nav, .outer-nav').children().removeClass('is-active');
  93. $('.side-nav').children().eq(nextPos).addClass('is-active');
  94. $('.outer-nav').children().eq(nextPos).addClass('is-active');
  95. }
  96. // update main content area
  97. function updateContent(curPos, nextPos, lastItem) {
  98. $('.main-content').children().removeClass('section--is-active');
  99. $('.main-content').children().eq(nextPos).addClass('section--is-active');
  100. $('.main-content .section').children().removeClass('section--next section--prev');
  101. if (curPos === lastItem && nextPos === 0 || curPos === 0 && nextPos === lastItem) {
  102. $('.main-content .section').children().removeClass('section--next section--prev');
  103. }
  104. else if (curPos < nextPos) {
  105. $('.main-content').children().eq(curPos).children().addClass('section--next');
  106. }
  107. else {
  108. $('.main-content').children().eq(curPos).children().addClass('section--prev');
  109. }
  110. if (nextPos !== 0 && nextPos !== lastItem) {
  111. $('.header--cta').addClass('is-active');
  112. }
  113. else {
  114. $('.header--cta').removeClass('is-active');
  115. }
  116. }
  117. function outerNav() {
  118. $('.header--nav-toggle').click(function(){
  119. $('.perspective').addClass('perspective--modalview');
  120. setTimeout(function(){
  121. $('.perspective').addClass('effect-rotate-left--animate');
  122. }, 25);
  123. $('.outer-nav, .outer-nav li, .outer-nav--return').addClass('is-vis');
  124. });
  125. $('.outer-nav--return, .outer-nav li').click(function(){
  126. $('.perspective').removeClass('effect-rotate-left--animate');
  127. setTimeout(function(){
  128. $('.perspective').removeClass('perspective--modalview');
  129. }, 400);
  130. $('.outer-nav, .outer-nav li, .outer-nav--return').removeClass('is-vis');
  131. });
  132. }
  133. function workSlider() {
  134. $('.slider--prev, .slider--next').click(function() {
  135. var $this = $(this),
  136. curLeft = $('.slider').find('.slider--item-left'),
  137. curLeftPos = $('.slider').children().index(curLeft),
  138. curCenter = $('.slider').find('.slider--item-center'),
  139. curCenterPos = $('.slider').children().index(curCenter),
  140. curRight = $('.slider').find('.slider--item-right'),
  141. curRightPos = $('.slider').children().index(curRight),
  142. totalWorks = $('.slider').children().length,
  143. $left = $('.slider--item-left'),
  144. $center = $('.slider--item-center'),
  145. $right = $('.slider--item-right'),
  146. $item = $('.slider--item');
  147. $('.slider').animate({ opacity : 0 }, 400);
  148. setTimeout(function(){
  149. if ($this.hasClass('slider--next')) {
  150. if (curLeftPos < totalWorks - 1 && curCenterPos < totalWorks - 1 && curRightPos < totalWorks - 1) {
  151. $left.removeClass('slider--item-left').next().addClass('slider--item-left');
  152. $center.removeClass('slider--item-center').next().addClass('slider--item-center');
  153. $right.removeClass('slider--item-right').next().addClass('slider--item-right');
  154. }
  155. else {
  156. if (curLeftPos === totalWorks - 1) {
  157. $item.removeClass('slider--item-left').first().addClass('slider--item-left');
  158. $center.removeClass('slider--item-center').next().addClass('slider--item-center');
  159. $right.removeClass('slider--item-right').next().addClass('slider--item-right');
  160. }
  161. else if (curCenterPos === totalWorks - 1) {
  162. $left.removeClass('slider--item-left').next().addClass('slider--item-left');
  163. $item.removeClass('slider--item-center').first().addClass('slider--item-center');
  164. $right.removeClass('slider--item-right').next().addClass('slider--item-right');
  165. }
  166. else {
  167. $left.removeClass('slider--item-left').next().addClass('slider--item-left');
  168. $center.removeClass('slider--item-center').next().addClass('slider--item-center');
  169. $item.removeClass('slider--item-right').first().addClass('slider--item-right');
  170. }
  171. }
  172. }
  173. else {
  174. if (curLeftPos !== 0 && curCenterPos !== 0 && curRightPos !== 0) {
  175. $left.removeClass('slider--item-left').prev().addClass('slider--item-left');
  176. $center.removeClass('slider--item-center').prev().addClass('slider--item-center');
  177. $right.removeClass('slider--item-right').prev().addClass('slider--item-right');
  178. }
  179. else {
  180. if (curLeftPos === 0) {
  181. $item.removeClass('slider--item-left').last().addClass('slider--item-left');
  182. $center.removeClass('slider--item-center').prev().addClass('slider--item-center');
  183. $right.removeClass('slider--item-right').prev().addClass('slider--item-right');
  184. }
  185. else if (curCenterPos === 0) {
  186. $left.removeClass('slider--item-left').prev().addClass('slider--item-left');
  187. $item.removeClass('slider--item-center').last().addClass('slider--item-center');
  188. $right.removeClass('slider--item-right').prev().addClass('slider--item-right');
  189. }
  190. else {
  191. $left.removeClass('slider--item-left').prev().addClass('slider--item-left');
  192. $center.removeClass('slider--item-center').prev().addClass('slider--item-center');
  193. $item.removeClass('slider--item-right').last().addClass('slider--item-right');
  194. }
  195. }
  196. }
  197. }, 400);
  198. $('.slider').animate({ opacity : 1 }, 400);
  199. });
  200. }
  201. function transitionLabels() {
  202. $('.work-request--information input').focusout(function(){
  203. var textVal = $(this).val();
  204. if (textVal === "") {
  205. $(this).removeClass('has-value');
  206. }
  207. else {
  208. $(this).addClass('has-value');
  209. }
  210. // correct mobile device window position
  211. window.scrollTo(0, 0);
  212. });
  213. }
  214. function seeResults() {
  215. $('form').on('submit', function(e) { //use on if jQuery 1.7+
  216. e.preventDefault(); //prevent form from submitting
  217. var data = $("form :input").serializeArray();
  218. console.log(data); //use the console for debugging, F12 in Chrome, not alerts
  219. });
  220. }
  221. outerNav();
  222. workSlider();
  223. transitionLabels();
  224. });