Better zoom & some gestures

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+log/
+tmp/

index.html

@@ -34,6 +34,10 @@
  /* custom animation "visible state" (css context by custom classname "only-this-gallery" to apply these animation just on a specific gallery) */
  .only-this-gallery.show .spl-pane > *{
  clip-path: circle(100% at center);
+ }
+ .only-this-gallery.show .spl-pane, .only-this-gallery.show .spl-pane > *{
+ /* setting custom transition duration might mess up zoom animations */
+ /* one should set an identical transition duration for ".spl-pane" and ".spl-pane > *" */
  transition: transform 0.35s ease,
  opacity 0.65s ease,
  clip-path 0.8s ease;
@@ -104,6 +108,7 @@ <h1>
  <img src="demo/gallery/montana-1829251-thumb.jpg">
  </a>
  <div class="spotlight" data-src="demo/gallery/brooklyn-bridge-1791001.jpg"></div>
+ <div class="spotlight" data-media="node" data-src="#long"></div>
  </div>
  <!-- Hidden Backstore -->
  <div style="display: none">
@@ -113,6 +118,10 @@ <h1>
  <img class="image" src="demo/gallery/california-1751455-thumb.jpg" width="500" height="333">
  <img class="image" src="demo/gallery/montana-1829251-thumb.jpg" width="500" height="331">
  </div>
+ <div id="long" style="width: 5em; height: 5em; overflow: scroll; background-color: pink; color: black">
+ L<br>O<br>N<br>G<br><br>C<br>O<br>N<br>T<br>E<br>N<br>T<br>
+ <pre style="word-wrap: no-wrap">-----W-----I-----D-----E-----</div>
+ </div>
  </div>
  <br>
  <hr>
@@ -320,4 +329,4 @@ <h1>
 
  </script>
 </body>
-</html>
+</html>

src/js/helper.js

@@ -1,44 +1,65 @@
 /**
- * @param node
- * @param class_name
+ * @param {HTMLElement} node
+ * @param {string} class_name
  */
 
 export function addClass(node, class_name){
 
- toggleClass(node, class_name, true);
+ node.classList.add(class_name);
 }
 
 /**
- * @param node
- * @param class_name
+ * @param {HTMLElement} node
+ * @param {string} class_name
  */
 
 export function removeClass(node, class_name){
 
- toggleClass(node, class_name);
+ node.classList.remove(class_name);
 }
 
 /**
- * @param node
- * @param class_name
- * @param {?=} state
+ * @param {HTMLElement} node
+ * @param {string} class_name
+ * @param state
  */
 
 export function toggleClass(node, class_name, state){
 
- node.classList[state ? "add" : "remove"](class_name);
+ if(state){
+
+ addClass(node, class_name);
+ }
+ else{
+
+ removeClass(node, class_name);
+ }
 }
 
 /**
- * @param node
- * @param class_name
+ * @param {HTMLElement} node
+ * @param {string} class_name
  */
 
 export function hasClass(node, class_name){
 
  return node.classList.contains(class_name);
 }
 
+/**
+ * @param {HTMLElement} node
+ */
+
+export function restoreStyle(node){
+ for(var key in node){
+
+ if(key.startsWith("_s_")){
+
+ node.style.setProperty(key.substring(3), node[key]);
+ }
+ }
+}
+
 /**
  * @param {HTMLElement} node
  * @param {string} style
@@ -59,7 +80,7 @@ export function setStyle(node, style, value){
 let tmp = 0;
 
 /**
- * @param node
+ * @param {HTMLElement} node
  * @param {Function=} fn
  */
 
@@ -77,6 +98,11 @@ export function prepareStyle(node, fn){
  fn && setStyle(node, "transition", "");
 }
 
+/**
+ * @param {HTMLElement} node
+ * @param {string} text
+ */
+
 export function setText(node, text){
 
  node.firstChild.nodeValue = text;
@@ -142,7 +168,7 @@ export function toggleListener(state, node, event, fn, mode){
 }
 
 /**
- * @param event
+ * @param {Event} event
  * @param {boolean=} prevent
  */
 
@@ -153,6 +179,11 @@ export function cancelEvent(event, prevent){
  prevent && event.preventDefault();
 }
 
+/**
+ * @param {HTMLBodyElement} body
+ * @param {HTMLElement} image
+ */
+
 export function downloadImage(body, image){
 
  const link = /** @type {HTMLAnchorElement} */ (createElement("a"));
@@ -166,16 +197,16 @@ export function downloadImage(body, image){
 
 /**
  * @param {!string} element
- * @return {Element}
+ * @return {HTMLElement}
  */
 
 export function createElement(element){
 
- return document.createElement(element);
+ return /** @type {HTMLElement} */ (document.createElement(element));
 }
 
 /**
- * @param node
+ * @param {HTMLElement} node
  * @param {boolean=} state
  */
 
@@ -185,7 +216,7 @@ export function toggleDisplay(node, state){
 }
 
 /**
- * @param node
+ * @param {HTMLElement} node
  * @param {boolean=} state
  */
 
@@ -195,7 +226,7 @@ export function toggleVisibility(node, state){
 }
 
 /**
- * @param node
+ * @param {HTMLElement} node
  * @param {boolean=} state
  */
 

src/js/parser.js

@@ -3,6 +3,15 @@ import { createElement } from "./helper.js";
 const video_support = {};
 const tpl_video = /** @type {HTMLVideoElement} */ (createElement("video"));
 
+/**
+ *
+ * @param {HTMLAnchorElement} anchor
+ * @param {number} size
+ * @param options
+ * @param {string} media
+ * @returns {string}
+ */
+
 export default function(anchor, size, options, media){
 
  let src, diff;