Website Summary Files Commits Branches @commit @diff @stats
path: root / exampleSite / static / plugin
diff options
context:
space:
mode:
Commitad823cc4d72edbab10f0dadf99b30df91c3f7c50 (patch)
Author
 Dimitar Trendafilov <trendafilov.dn@gmail.com>
2020-08-16 08:38:04 +0300
Committer
 Dimitar Trendafilov <trendafilov.dn@gmail.com>
2020-08-16 08:38:04 +0300
Files6666a19acc2316d6ad5ad00291066d6d6fd42a5b /exampleSite/static/plugin
IPL-ad823cc4d72edbab10f0dadf99b30df91c3f7c50.tar
IPL-ad823cc4d72edbab10f0dadf99b30df91c3f7c50.tar.gz
IPL-ad823cc4d72edbab10f0dadf99b30df91c3f7c50.zip
Squashed 'website/themes/reveal-hugo/' content from commit ff9f389
git-subtree-dir: website/themes/reveal-hugo git-subtree-split: ff9f389743ae2fe5c5cc6101455db0616e8548e2
2 files changed, 186 insertions, 0 deletions
-rw-r--r--exampleSite/static/plugin/gallery/gallery.css67
-rw-r--r--exampleSite/static/plugin/gallery/gallery.plugin.js119
diff --git a/exampleSite/static/plugin/gallery/gallery.css b/exampleSite/static/plugin/gallery/gallery.css
new file mode 100644
index 0000000..58d3514
--- /dev/null
+++ b/exampleSite/static/plugin/gallery/gallery.css
@@ -0,0 +1,67 @@
+.reveal ul.gallery {
+ position: relative;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ width: 960px;
+ height: 700px;
+}
+
+.reveal ul.gallery[data-mode=full-screen] {
+ width: 100%;
+ height: 100%;
+}
+
+.gallery li {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 960px;
+ height: 700px;
+ opacity: 0;
+ -webkit-transition: opacity 0.3s ease-in-out;
+ -moz-transition: opacity 0.3s ease-in-out;
+ transition: opacity 0.3s ease-in-out;
+}
+
+.gallery[data-mode=full-screen] li {
+ width: 100%;
+ height: 100%;
+ background-size: 100% 100%;
+ background-attachment:fixed;
+ background-position: center;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+}
+
+
+.gallery .active {
+ opacity: 1;
+}
+
+.gallery .inactive {
+ opacity: 0;
+}
+
+.gallery img {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ border: none !important;
+}
+
+.gallery label {
+ display: block;
+ position: absolute;
+ bottom: 20px;
+ min-width: 150px;
+ left: 0;
+ padding: 10px;
+ background-color: rgba(0, 0, 0, 0.6);
+ color: #fff;
+ font-size: 24px;
+} \ No newline at end of file
diff --git a/exampleSite/static/plugin/gallery/gallery.plugin.js b/exampleSite/static/plugin/gallery/gallery.plugin.js
new file mode 100644
index 0000000..c6ba1c9
--- /dev/null
+++ b/exampleSite/static/plugin/gallery/gallery.plugin.js
@@ -0,0 +1,119 @@
+(function(Gallery) {
+ var galleryTimer, galleryMode;
+
+ Gallery.step = function (items, iterations) {
+ var length = items.length,
+ ptr = 0,
+ loops = 0;
+
+ return function () {
+ if (iterations > 0 && loops === iterations) {
+ return;
+ }
+ items[ptr].className = "inactive";
+ if (ptr === length - 1) {
+ loops++;
+ if (iterations === 0 || loops < iterations) {
+ ptr = 0;
+ }
+ } else {
+ ptr++;
+ }
+ items[ptr].className = "active";
+ };
+ };
+
+ Gallery.start = function (galleryNode, contextNode) {
+ contextNode = contextNode || document.body.firstChild;
+ galleryMode = galleryNode.dataset.mode || 'normal';
+
+ if (galleryMode === 'full-screen') {
+ // FIXME remove depenency on Reveal, have a callback? function
+ // that will get a root node to move full screen slides to (ie. slidesNode)
+
+ // for full screen mode we need to:
+ // - take the gallery out of the flow and insert it before "slides"
+ // - hide slides
+ // - make it full screen
+
+ var placeholder = document.createElement("div");
+ placeholder.id = "gallery-placeholder";
+ galleryNode.parentNode.replaceChild(placeholder, galleryNode);
+
+ if (contextNode.parentNode) {
+ contextNode.parentNode.insertBefore(galleryNode, contextNode);
+ }
+ }
+
+ var items = Array.prototype.slice.apply(galleryNode.querySelectorAll("li"));
+ items.forEach(function (item, index) {
+ if (index === 0) {
+ item.className = "active";
+ } else {
+ item.className = "inactive";
+ }
+ var label = item.querySelector("label");
+ var img = item.querySelector("img");
+
+ if (galleryMode === 'full-screen') {
+ img.style.display = "none";
+ item.style.backgroundImage = "url(" + img.src + ")";
+ } else {
+ img.style.display = "";
+ }
+
+ if (!label && img.attributes.alt) {
+ label = document.createElement("label");
+ label.innerHTML = img.attributes.alt.value;
+ item.appendChild(label);
+ }
+ });
+
+ var iterations = galleryNode.dataset.iterations ? +galleryNode.dataset.iterations : 1;
+ var interval = (galleryNode.dataset.interval || 1) * 1000;
+ galleryTimer = setInterval(Gallery.step(items, iterations), interval);
+ };
+
+ // FIXME Gallery.stop should take elem and root nodes as well
+ Gallery.stop = function (galleryNode, contextNode) {
+ clearInterval(galleryTimer);
+
+ if (galleryMode === "full-screen") {
+ // - put the gallery back where it was
+ var placeholder = document.getElementById("gallery-placeholder");
+ placeholder.parentNode.replaceChild(galleryNode, placeholder);
+
+ var items = Array.prototype.slice.apply(galleryNode.querySelectorAll("li"));
+ items.forEach(function (item, index) {
+ var img = item.querySelector("img");
+ item.style.backgroundImage = "";
+ img.style.display = "";
+ });
+ }
+ };
+})(window.Gallery = window.Gallery || {});(function() {
+ if( typeof window.addEventListener === 'function' ) {
+ var slidesNode = document.querySelector(".slides");
+ Reveal.addEventListener("slidechanged", function (event) {
+ console.log(event)
+ var galleryNode = event.previousSlide.querySelector('.gallery') || document.querySelector('.reveal > .gallery');
+ if (galleryNode) {
+ Gallery.stop(galleryNode, slidesNode);
+ }
+
+ galleryNode = event.currentSlide.querySelector('.gallery');
+ if (galleryNode) {
+ Gallery.start(galleryNode, slidesNode);
+ }
+
+ });
+
+ // during initial load
+ if (Reveal.getCurrentSlide()) {
+ var galleryNode = Reveal.getCurrentSlide().querySelector('.gallery');
+ if (galleryNode) {
+ Gallery.start(galleryNode, slidesNode);
+ }
+ }
+ }
+})(); \ No newline at end of file