PageRenderTime 60ms CodeModel.GetById 26ms RepoModel.GetById 0ms app.codeStats 0ms

/HRTECH/Event/event/sites/all/modules/jcarousel/js/jcarousel.js

https://bitbucket.org/toannm_54/hrtechwebsite
JavaScript | 297 lines | 186 code | 48 blank | 63 comment | 45 complexity | 578995193835d8a0727b38934388b4df MD5 | raw file
  1. /**
  2. * @file
  3. * Add jCarousel behaviors to the page and provide Views-support.
  4. */
  5. (function($) {
  6. Drupal.behaviors.jcarousel = {};
  7. Drupal.behaviors.jcarousel.attach = function(context, settings) {
  8. settings = settings || Drupal.settings;
  9. // If no carousels exist on this part of the page, work no further.
  10. if (!settings.jcarousel || !settings.jcarousel.carousels) {
  11. return;
  12. }
  13. $.each(settings.jcarousel.carousels, function(key, options) {
  14. var $carousel = $(options.selector + ':not(.jcarousel-processed)', context);
  15. // If this carousel has already been processed or doesn't exist, move on.
  16. if (!$carousel.length) {
  17. return;
  18. }
  19. // Callbacks need to be converted from a string to an actual function.
  20. $.each(options, function(optionKey) {
  21. if (optionKey.match(/Callback$/) && typeof options[optionKey] == 'string') {
  22. var callbackFunction = window;
  23. var callbackParents = options[optionKey].split('.');
  24. $.each(callbackParents, function(objectParent) {
  25. callbackFunction = callbackFunction[callbackParents[objectParent]];
  26. });
  27. options[optionKey] = callbackFunction;
  28. }
  29. });
  30. // Add standard options required for AJAX functionality.
  31. if (options.ajax && !options.itemLoadCallback) {
  32. options.itemLoadCallback = Drupal.jcarousel.ajaxLoadCallback;
  33. }
  34. // If auto-scrolling, pause animation when hoving over the carousel.
  35. if (options.auto && options.autoPause && !options.initCallback) {
  36. options.initCallback = function(carousel, state) {
  37. Drupal.jcarousel.autoPauseCallback(carousel, state);
  38. };
  39. }
  40. // Add navigation to the carousel if enabled.
  41. if (!options.setupCallback) {
  42. options.setupCallback = function(carousel) {
  43. Drupal.jcarousel.setupCarousel(carousel);
  44. if (options.navigation) {
  45. Drupal.jcarousel.addNavigation(carousel, options.navigation);
  46. }
  47. };
  48. if (options.navigation && !options.itemVisibleInCallback) {
  49. options.itemLastInCallback = {
  50. onAfterAnimation: Drupal.jcarousel.updateNavigationActive
  51. };
  52. }
  53. }
  54. if (!options.hasOwnProperty('buttonNextHTML') && !options.hasOwnProperty('buttonPrevHTML')) {
  55. options.buttonNextHTML = Drupal.theme('jCarouselButton', 'next');
  56. options.buttonPrevHTML = Drupal.theme('jCarouselButton', 'previous');
  57. }
  58. // Initialize the jcarousel.
  59. $carousel.addClass('jcarousel-processed').jcarousel(options);
  60. });
  61. };
  62. Drupal.jcarousel = {};
  63. Drupal.jcarousel.ajaxLoadCallback = function(jcarousel, state) {
  64. // Check if the requested items already exist.
  65. if (state == 'init' || jcarousel.has(jcarousel.first, jcarousel.last)) {
  66. return;
  67. }
  68. var $list = jcarousel.list;
  69. var $view = $list.parents('.view:first');
  70. var ajaxPath = Drupal.settings.jcarousel.ajaxPath;
  71. var target = $view.get(0);
  72. // Find this view's settings in the Views AJAX settings.
  73. var settings;
  74. $.each(Drupal.settings.jcarousel.carousels, function(domID, carouselSettings) {
  75. if ($list.is('.' + domID)) {
  76. settings = carouselSettings['view_options'];
  77. }
  78. });
  79. // Copied from ajax_view.js:
  80. var viewData = { 'js': 1, 'first': jcarousel.first - 1, 'last': jcarousel.last };
  81. // Construct an object using the settings defaults and then overriding
  82. // with data specific to the link.
  83. $.extend(
  84. viewData,
  85. settings
  86. );
  87. $.ajax({
  88. url: ajaxPath,
  89. type: 'GET',
  90. data: viewData,
  91. success: function(response) {
  92. Drupal.jcarousel.ajaxResponseCallback(jcarousel, target, response);
  93. },
  94. error: function(xhr) {
  95. Drupal.jcarousel.ajaxErrorCallback(xhr, ajaxPath);
  96. },
  97. dataType: 'json'
  98. });
  99. };
  100. /**
  101. * Init callback for jCarousel. Pauses the carousel when hovering over.
  102. */
  103. Drupal.jcarousel.autoPauseCallback = function(carousel, state) {
  104. function pauseAuto() {
  105. carousel.stopAuto();
  106. }
  107. function resumeAuto() {
  108. carousel.startAuto();
  109. }
  110. carousel.clip.hover(pauseAuto, resumeAuto);
  111. carousel.buttonNext.hover(pauseAuto, resumeAuto);
  112. carousel.buttonPrev.hover(pauseAuto, resumeAuto);
  113. };
  114. /**
  115. * Setup callback for jCarousel. Calculates number of pages.
  116. */
  117. Drupal.jcarousel.setupCarousel = function(carousel) {
  118. // Determine the number of pages this carousel includes.
  119. // This only works for a positive starting point. Also, .first is 1-based
  120. // while .last is a count, so we need to reset the .first number to be
  121. // 0-based to make the math work.
  122. carousel.pageSize = carousel.last - (carousel.first - 1);
  123. // jCarousel's Views integration sets "size" in the carousel options. Use that
  124. // if available, otherwise count the number of items in the carousel.
  125. var itemCount = carousel.options.size ? carousel.options.size : $(carousel.list).children('li').length;
  126. carousel.pageCount = Math.ceil(itemCount / carousel.pageSize);
  127. carousel.pageNumber = 1;
  128. // Disable the previous/next arrows if there is only one page.
  129. if (carousel.pageCount == 1) {
  130. carousel.buttonNext.addClass('jcarousel-next-disabled').attr('disabled', true);
  131. carousel.buttonPrev.addClass('jcarousel-prev-disabled').attr('disabled', true);
  132. }
  133. // Always remove the hard-coded display: block from the navigation.
  134. carousel.buttonNext.css('display', '');
  135. carousel.buttonPrev.css('display', '');
  136. }
  137. /**
  138. * Setup callback for jCarousel. Adds the navigation to the carousel if enabled.
  139. */
  140. Drupal.jcarousel.addNavigation = function(carousel, position) {
  141. // Don't add a pager if there's only one page of results.
  142. if (carousel.pageCount <= 1) {
  143. return;
  144. }
  145. // Add a class to the wrapper so it can adjust CSS.
  146. $(carousel.list).parents('.jcarousel-container:first').addClass('jcarousel-navigation-' + position);
  147. var navigation = $('<ul class="jcarousel-navigation"></ul>');
  148. for (var i = 1; i <= carousel.pageCount; i++) {
  149. var pagerItem = $(Drupal.theme('jCarouselPageLink', i));
  150. var listItem = $('<li></li>').attr('jcarousel-page', i).append(pagerItem);
  151. navigation.append(listItem);
  152. // Make the first page active by default.
  153. if (i === 1) {
  154. listItem.addClass('active');
  155. }
  156. // Scroll to the correct page when a pager is clicked.
  157. pagerItem.bind('click', function() {
  158. // We scroll to the new page based on item offsets. This works with
  159. // circular carousels that do not divide items evenly, making it so that
  160. // going back or forward in pages will not skip or repeat any items.
  161. var newPageNumber = $(this).parent().attr('jcarousel-page');
  162. var itemOffset = (newPageNumber - carousel.pageNumber) * carousel.pageSize;
  163. if (itemOffset) {
  164. carousel.scroll(carousel.first + itemOffset);
  165. }
  166. return false;
  167. });
  168. }
  169. $(carousel.list).parents('.jcarousel-clip:first')[position](navigation);
  170. }
  171. /**
  172. * itemVisibleInCallback for jCarousel. Update the navigation after page change.
  173. */
  174. Drupal.jcarousel.updateNavigationActive = function(carousel, item, idx, state) {
  175. // The navigation doesn't even exist yet when this is called on init.
  176. var $listItems = $(carousel.list).parents('.jcarousel-container:first').find('.jcarousel-navigation li');
  177. if ($listItems.length == 0) {
  178. return;
  179. }
  180. // jCarousel does some very odd things with circular wraps. Items before the
  181. // first item are given negative numbers and items after the last are given
  182. // numbers beyond the total number of items. This complicated logic calculates
  183. // which page number is active based off this numbering scheme.
  184. var pageNumber = Math.ceil(idx / carousel.pageSize);
  185. if (pageNumber <= 0 || pageNumber > carousel.pageCount) {
  186. pageNumber = pageNumber % carousel.pageCount;
  187. pageNumber = pageNumber == 0 ? carousel.pageCount : pageNumber;
  188. pageNumber = pageNumber < 0 ? pageNumber + carousel.pageCount : pageNumber;
  189. }
  190. carousel.pageNumber = pageNumber;
  191. var currentPage = $listItems.get(carousel.pageNumber - 1);
  192. // Set the current page to be active.
  193. $listItems.not(currentPage).removeClass('active');
  194. $(currentPage).addClass('active');
  195. }
  196. /**
  197. * AJAX callback for all jCarousel-style views.
  198. */
  199. Drupal.jcarousel.ajaxResponseCallback = function(jcarousel, target, response) {
  200. if (response.debug) {
  201. alert(response.debug);
  202. }
  203. var $view = $(target);
  204. var jcarousel = $view.find('ul.jcarousel').data('jcarousel');
  205. // Add items to the jCarousel.
  206. $('ul.jcarousel > li', response.display).each(function(i) {
  207. var itemNumber = this.className.replace(/.*?jcarousel-item-(\d+).*/, '$1');
  208. jcarousel.add(itemNumber, this.innerHTML);
  209. });
  210. // Add Drupal behaviors to the content of the carousel to affect new items.
  211. Drupal.attachBehaviors(jcarousel.list.get(0));
  212. // Treat messages the same way that Views typically handles messages.
  213. if (response.messages) {
  214. // Show any messages (but first remove old ones, if there are any).
  215. $view.find('.views-messages').remove().end().prepend(response.messages);
  216. }
  217. };
  218. /**
  219. * Display error messages using the same mechanism as Views module.
  220. */
  221. Drupal.jcarousel.ajaxErrorCallback = function (xhr, path) {
  222. var error_text = '';
  223. if ((xhr.status == 500 && xhr.responseText) || xhr.status == 200) {
  224. error_text = xhr.responseText;
  225. // Replace all &lt; and &gt; by < and >
  226. error_text = error_text.replace("/&(lt|gt);/g", function (m, p) {
  227. return (p == "lt")? "<" : ">";
  228. });
  229. // Now, replace all html tags by empty spaces
  230. error_text = error_text.replace(/<("[^"]*"|'[^']*'|[^'">])*>/gi,"");
  231. // Fix end lines
  232. error_text = error_text.replace(/[\n]+\s+/g,"\n");
  233. }
  234. else if (xhr.status == 500) {
  235. error_text = xhr.status + ': ' + Drupal.t("Internal server error. Please see server or PHP logs for error information.");
  236. }
  237. else {
  238. error_text = xhr.status + ': ' + xhr.statusText;
  239. }
  240. alert(Drupal.t("An error occurred at @path.\n\nError Description: @error", {'@path': path, '@error': error_text}));
  241. };
  242. Drupal.theme.prototype.jCarouselButton = function(type) {
  243. // Use links for buttons for accessibility.
  244. return '<a href="javascript:void(0)"></a>';
  245. };
  246. Drupal.theme.prototype.jCarouselPageLink = function(pageNumber) {
  247. return '<a href="javascript:void(0)"><span>' + (pageNumber) + '</span></a>';
  248. };
  249. })(jQuery);