main.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. (function($){
  2. var jmpressOpts = {
  3. fullscreen : false,
  4. hash : { use : false },
  5. mouse : { clickSelects : false },
  6. keyboard : { use : true },
  7. animation : { transitionDuration : '1s' },
  8. presentationMode : false,
  9. stepSelector : '.step',
  10. duration : {
  11. defaultValue: 0
  12. }
  13. };
  14. /**
  15. * Presentation constructor
  16. */
  17. function Presentation (wrapper) {
  18. var _self, duration, new_css, ie_regex, matches;
  19. _self = this;
  20. _self.wrapper = $(wrapper); // The wrapper for toggling fullscreen
  21. _self.slideshow = $('.presentation', wrapper); // Holds the slides for jmpress
  22. _self.navLeft = $('.nav-arrow-left', wrapper);
  23. _self.navRight = $('.nav-arrow-right', wrapper);
  24. _self.expandButton = $('.nav-fullscreen-button', wrapper);
  25. _self.overlay = $('.autoplay-overlay', wrapper);
  26. _self.fullscreen = false;
  27. _self.autoPlaying = false;
  28. _self.autoplayTime = parseFloat(_self.slideshow.attr('data-autoplay'), 10) || 0;
  29. // The wrapper is scaled to the contents' size so that its border wraps tightly
  30. _self.wrapper.css({
  31. width: _self.slideshow.width(),
  32. height: _self.slideshow.height()
  33. });
  34. duration = _self.slideshow.attr('duration') || '1s';
  35. jmpressOpts.animation.transitionDuration = duration;
  36. // Compensate for transition times
  37. if( _self.autoplayTime ) {
  38. _self.autoplayTime += parseFloat(duration, 10) * 1000;
  39. }
  40. // Set the opacity transition duration
  41. // as it is delegated by css and not jmpress
  42. duration = 'opacity ' + duration;
  43. new_css = {
  44. 'width' : _self.slideshow.width(),
  45. 'height' : _self.slideshow.height(),
  46. '-webkit-transition': duration,
  47. '-moz-transition' : duration,
  48. '-ms-transition' : duration,
  49. '-o-transition' : duration,
  50. 'transition' : duration
  51. };
  52. $('.step', _self.slideshow).each(function(i, step) {
  53. $(step).css(new_css);
  54. });
  55. // Apply attribute to allow fading individual bullets here,
  56. // otherwise wp_kses will strip the attribute out
  57. $('.step.fadebullets li', _self.slideshow).each(function(i, step) {
  58. $(step).attr('data-jmpress', 'fade');
  59. });
  60. // Register resizing to window when fullscreen
  61. $(window).resize(function() {
  62. if ( _self.fullscreen ) {
  63. _self.resizePresentation();
  64. }
  65. });
  66. // Register the nav bars to move the slides
  67. _self.navLeft.on('click', function(){
  68. _self.slideshow.jmpress('prev');
  69. _self.overlay.css('opacity', 0);
  70. return false;
  71. });
  72. _self.navRight.on('click', function(){
  73. _self.slideshow.jmpress('next');
  74. _self.overlay.css('opacity', 0);
  75. return false;
  76. });
  77. _self.slideshow.on('click', function() {
  78. _self.setAutoplay(true);
  79. return false;
  80. });
  81. _self.slideshow.on('focusout', function() {
  82. _self.setAutoplay(false);
  83. });
  84. // Register toggling fullscreen except for IE 9 or lower
  85. ie_regex = /MSIE\s(\d+)\.\d+/;
  86. matches = ie_regex.exec(navigator.userAgent);
  87. if ( matches && parseInt(matches[1], 10) < 10 ) {
  88. _self.expandButton.remove();
  89. _self.expandButton = null;
  90. } else {
  91. _self.expandButton.on('click', function() {
  92. _self.setFullscreen( !_self.fullscreen );
  93. return false;
  94. });
  95. }
  96. // Register ESC key to exit fullscreen
  97. $(window).on('keydown', function( event ) {
  98. if ( event.which === 27 ) {
  99. _self.setFullscreen( false );
  100. }
  101. });
  102. // Start the presentation
  103. _self.slideshow.jmpress(jmpressOpts);
  104. // Make content visible and remove error message on jmpress success
  105. if ( _self.slideshow.jmpress('initialized') ) {
  106. _self.slideshow.css('display', '');
  107. _self.overlay.css('display', '');
  108. $('.not-supported-msg', _self.wrapper).remove();
  109. }
  110. // A bug in Firefox causes issues with the nav arrows appearing
  111. // on hover in presentation mode. Explicitly disabling fullscreen
  112. // on init seems to fix the issue
  113. _self.setFullscreen( false );
  114. }
  115. $.extend( Presentation.prototype, {
  116. resizePresentation: function () {
  117. var scale, duration, settings, new_css, widthScale, heightScale;
  118. // Set the animation duration to 0 during resizing
  119. // so that there isn't an animation delay when scaling
  120. // up the slide contents
  121. settings = this.slideshow.jmpress('settings');
  122. duration = settings.animation.transitionDuration;
  123. settings.animation.transitionDuration = '0s';
  124. this.slideshow.jmpress('reselect');
  125. scale = 1;
  126. new_css = {
  127. top : 0,
  128. left : 0,
  129. zoom : 1
  130. };
  131. // Expand the presentation to fill the lesser of the max width or height
  132. // This avoids content moving past the window for certain window sizes
  133. if ( this.fullscreen ) {
  134. widthScale = $(window).width() / this.slideshow.width();
  135. heightScale = $(window).height() / this.slideshow.height();
  136. scale = Math.min(widthScale, heightScale);
  137. new_css.top = ( $(window).height() - (scale * this.slideshow.height()) ) / 2;
  138. new_css.left = ( $(window).width() - (scale * this.slideshow.width() ) ) / 2;
  139. }
  140. // Firefox does not support the zoom property; IE does, but it does not work
  141. // well like in webkit, so we manually transform and position the slideshow
  142. if ( this.slideshow.css('-moz-transform') || this.slideshow.css('-ms-transform') ) {
  143. // Firefox keeps the center of the element in place and expands outward
  144. // so we must shift everything to compensate
  145. new_css.top += (scale - 1) * this.slideshow.height() / 2;
  146. new_css.left += (scale - 1) * this.slideshow.width() / 2;
  147. scale = 'scale(' + scale + ')';
  148. $.extend(new_css, {
  149. '-moz-transform' : scale,
  150. '-ms-transform' : scale,
  151. 'transform' : scale
  152. });
  153. } else {
  154. // webkit scales everything with zoom so we need to offset the right amount
  155. // so that the content is vertically centered after scaling effects
  156. new_css.top /= scale;
  157. new_css.left /= scale;
  158. new_css.zoom = scale;
  159. }
  160. this.slideshow.css(new_css);
  161. settings.animation.transitionDuration = duration;
  162. this.slideshow.jmpress('reselect');
  163. },
  164. setFullscreen: function ( on ) {
  165. this.fullscreen = on;
  166. this.setAutoplay(false);
  167. // Save the scroll positions before going into fullscreen mode
  168. if ( on ) {
  169. this.scrollVert = $(window).scrollTop();
  170. this.scrollHoriz = $(window).scrollLeft();
  171. // Chrome Bug: Force scroll to be at top
  172. // otherwise the presentation can end up offscreen
  173. $(window).scrollTop(0);
  174. $(window).scrollLeft(0);
  175. }
  176. $('html').toggleClass('presentation-global-fullscreen', on);
  177. $('body').toggleClass('presentation-global-fullscreen', on);
  178. this.wrapper.toggleClass('presentation-wrapper-fullscreen', on);
  179. this.wrapper.parents().each(function(i, e){
  180. $(e).toggleClass('presentation-wrapper-fullscreen-parent', on);
  181. });
  182. this.resizePresentation();
  183. // Reset the scroll positions after exiting fullscreen mode
  184. if ( !on ) {
  185. $(window).scrollTop(this.scrollVert);
  186. $(window).scrollLeft(this.scrollHoriz);
  187. }
  188. },
  189. setAutoplay: function ( on ) {
  190. var _self = this, newAutoplayTime;
  191. if ( _self.autoPlaying === on ) {
  192. return;
  193. }
  194. newAutoplayTime = (on && _self.autoplayTime > 0) ? _self.autoplayTime : 0;
  195. _self.slideshow.jmpress('settings').duration.defaultValue = newAutoplayTime;
  196. // Move to the next slide when activating autoplay
  197. if( newAutoplayTime ) {
  198. _self.slideshow.jmpress('next');
  199. _self.overlay.css('opacity', 0);
  200. } else {
  201. _self.slideshow.jmpress('reselect');
  202. }
  203. _self.autoPlaying = on;
  204. }
  205. });
  206. $( document ).ready( function(){
  207. $('.presentation-wrapper').map(function() {
  208. new Presentation(this);
  209. });
  210. });
  211. })(jQuery);