gallery.plugin.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. (function(Gallery) {
  2. var galleryTimer, galleryMode;
  3. Gallery.step = function (items, iterations) {
  4. var length = items.length,
  5. ptr = 0,
  6. loops = 0;
  7. return function () {
  8. if (iterations > 0 && loops === iterations) {
  9. return;
  10. }
  11. items[ptr].className = "inactive";
  12. if (ptr === length - 1) {
  13. loops++;
  14. if (iterations === 0 || loops < iterations) {
  15. ptr = 0;
  16. }
  17. } else {
  18. ptr++;
  19. }
  20. items[ptr].className = "active";
  21. };
  22. };
  23. Gallery.start = function (galleryNode, contextNode) {
  24. contextNode = contextNode || document.body.firstChild;
  25. galleryMode = galleryNode.dataset.mode || 'normal';
  26. if (galleryMode === 'full-screen') {
  27. // FIXME remove depenency on Reveal, have a callback? function
  28. // that will get a root node to move full screen slides to (ie. slidesNode)
  29. // for full screen mode we need to:
  30. // - take the gallery out of the flow and insert it before "slides"
  31. // - hide slides
  32. // - make it full screen
  33. var placeholder = document.createElement("div");
  34. placeholder.id = "gallery-placeholder";
  35. galleryNode.parentNode.replaceChild(placeholder, galleryNode);
  36. if (contextNode.parentNode) {
  37. contextNode.parentNode.insertBefore(galleryNode, contextNode);
  38. }
  39. }
  40. var items = Array.prototype.slice.apply(galleryNode.querySelectorAll("li"));
  41. items.forEach(function (item, index) {
  42. if (index === 0) {
  43. item.className = "active";
  44. } else {
  45. item.className = "inactive";
  46. }
  47. var label = item.querySelector("label");
  48. var img = item.querySelector("img");
  49. if (galleryMode === 'full-screen') {
  50. img.style.display = "none";
  51. item.style.backgroundImage = "url(" + img.src + ")";
  52. } else {
  53. img.style.display = "";
  54. }
  55. if (!label && img.attributes.alt) {
  56. label = document.createElement("label");
  57. label.innerHTML = img.attributes.alt.value;
  58. item.appendChild(label);
  59. }
  60. });
  61. var iterations = galleryNode.dataset.iterations ? +galleryNode.dataset.iterations : 1;
  62. var interval = (galleryNode.dataset.interval || 1) * 1000;
  63. galleryTimer = setInterval(Gallery.step(items, iterations), interval);
  64. };
  65. // FIXME Gallery.stop should take elem and root nodes as well
  66. Gallery.stop = function (galleryNode, contextNode) {
  67. clearInterval(galleryTimer);
  68. if (galleryMode === "full-screen") {
  69. // - put the gallery back where it was
  70. var placeholder = document.getElementById("gallery-placeholder");
  71. placeholder.parentNode.replaceChild(galleryNode, placeholder);
  72. var items = Array.prototype.slice.apply(galleryNode.querySelectorAll("li"));
  73. items.forEach(function (item, index) {
  74. var img = item.querySelector("img");
  75. item.style.backgroundImage = "";
  76. img.style.display = "";
  77. });
  78. }
  79. };
  80. })(window.Gallery = window.Gallery || {});(function() {
  81. if( typeof window.addEventListener === 'function' ) {
  82. var slidesNode = document.querySelector(".slides");
  83. Reveal.addEventListener("slidechanged", function (event) {
  84. console.log(event)
  85. var galleryNode = event.previousSlide.querySelector('.gallery') || document.querySelector('.reveal > .gallery');
  86. if (galleryNode) {
  87. Gallery.stop(galleryNode, slidesNode);
  88. }
  89. galleryNode = event.currentSlide.querySelector('.gallery');
  90. if (galleryNode) {
  91. Gallery.start(galleryNode, slidesNode);
  92. }
  93. });
  94. // during initial load
  95. if (Reveal.getCurrentSlide()) {
  96. var galleryNode = Reveal.getCurrentSlide().querySelector('.gallery');
  97. if (galleryNode) {
  98. Gallery.start(galleryNode, slidesNode);
  99. }
  100. }
  101. }
  102. })();