Add new demo photo-gallery

servo · Sep 7, 2023 · 873a582 · 873a582
2 parents 54c2f93 + 5162e67
commit 873a582
Show file tree

Hide file tree

Showing 25 changed files with 262 additions and 0 deletions.
diff --git a/experiments.json b/experiments.json
@@ -23,6 +23,12 @@
             "desc": "<p>Animated wave effect using DIVs.</p>",
             "href": "experiments/divWaves/",
             "long_description": "This experiment specifically focuses on testing the rendering and animation capabilities of Servo by creating a visually dynamic and colorful wave effect. The wave animation is achieved by manipulating the position, size, and color of the HTML <div> elements. </p><p> This experiment helps evaluating and showcasing its ability to handle and render complex visual effects in a performant manner."
+        },
+        {
+            "name": "Photo Gallery",
+            "desc": "<p>Photo gallery with zoom option</p>",
+            "href": "experiments/photo-gallery/",
+            "long_description": ""
         }
     ],
     "tests": [

diff --git a/experiments/photo-gallery/glyphicons-4-user.png b/experiments/photo-gallery/glyphicons-4-user.png
diff --git a/experiments/photo-gallery/index.html b/experiments/photo-gallery/index.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link rel=stylesheet type=text/css href=photos.css></link>
+<style id=photo-styles></style>
+<meta name="viewport" content="width=device-width">
+</head>
+<body>
+<footer>
+    <div class=footer-box id=zoom-container>
+        <div class="zoom-icon before"></div>
+        <div id=zoom-slider data-value=240><div id=zoom-knob style="left: 80px;"></div></div>
+        <div class="zoom-icon after"></div>
+    </div>
+</footer>
+<main></main>
+<script>
+// xorshift
+function Rand() {
+    this.x = 3141;
+    this.y = 5926;
+    this.z = 5358;
+    this.w = 9793;
+    return this;
+}
+
+Rand.prototype.rand = function() {
+    var t = this.x ^ (this.x << 11);
+    this.x = this.y; this.y = this.z; this.z = this.w;
+    this.w = this.w ^ (this.w >> 19) ^ t ^ (t >> 8);
+    return this.w;
+}
+
+var MAX_PHOTO = 20;
+var PHOTO_COUNT = 300;
+var MAX_ZOOM = 500;
+
+function zoom() {
+    var width = +document.getElementById('zoom-slider').getAttribute('data-value');
+    var height = width * 3 / 4;
+    var main = document.getElementsByTagName('main')[0];
+    for (var element = main.firstChild; element != null; element = element.nextSibling) {
+        element.setAttribute('class', "photo photo-size-" + width);
+    }
+}
+
+function reload() {
+    var rng = new Rand();
+    var string = "";
+    var photoCount = PHOTO_COUNT;
+    for (var i = 0; i < photoCount; i += 1000) {
+        for (var j = i; j < Math.min(photoCount, j + 1000); j++) {
+            var photoId = rng.rand() % MAX_PHOTO;
+            var photo = "photo" + (photoId + 1) + ".jpg";
+            string += "<div class=photo data-photo=\"" + photo + "\" " +
+                "style='background-image: url(" + photo + ")'></div>";
+        }
+    }
+    console.log(string);
+    document.getElementsByTagName("main")[0].innerHTML = string;
+    zoom();
+}
+
+function onKeyDown(event) {
+    var zoomSlider = document.getElementById('zoom-slider');
+    switch (event.keyCode) {
+    case 83:
+        // 's'
+        zoomSlider.setAttribute('data-value', +zoomSlider.getAttribute('data-value') + 40);
+        zoom();
+        break;
+    case 65:
+        // 'a'
+        zoomSlider.setAttribute('data-value', +zoomSlider.getAttribute('data-value') - 40);
+        zoom();
+        break;
+    }
+}
+
+function initPhotoStyles() {
+    var css = "";
+    for (var i = 0; i <= MAX_ZOOM; i++) {
+        var height = i * 3 / 4;
+        css += ".photo-size-" + i + " { width: " + i + "px; height: " + height +
+            "px; }";
+    }
+    document.getElementById('photo-styles').innerHTML = css;
+}
+
+var sliding = null;
+function startSliding(event) {
+    console.log("mousedown");
+    sliding = event.screenX;
+}
+
+function stopSliding(event) {
+    sliding = null;
+}
+
+function slide(event) {
+    var zoomSlider = document.getElementById('zoom-slider');
+    var clientX = event.clientX;
+    var element = zoomSlider;
+    var width = zoomSlider.clientWidth;
+    while (element != null) {
+        if (element.offsetLeft)
+            clientX -= element.offsetLeft;
+        element = element.parentNode;
+    }
+    console.log("mousemove " + clientX);
+    var newValue = (clientX / width * MAX_ZOOM) | 0;
+    document.getElementById('zoom-knob').setAttribute('style', "left: " + clientX + "px");
+    zoomSlider.setAttribute('data-value', newValue);
+    zoom();
+}
+
+var zoomSlider = document.getElementById('zoom-slider');
+/*zoomKnob.addEventListener('mousedown', startSliding, false);
+zoomKnob.addEventListener('mouseup', stopSliding, false);
+zoomSlider.addEventListener('click', startSliding, false);*/
+zoomSlider.addEventListener('mousemove', slide, false);
+
+zoomSlider.addEventListener('touchstart', function(ev) {
+  startSliding(ev.changedTouches[0]);
+  ev.preventDefault();
+}, false);
+
+zoomSlider.addEventListener('touchmove', function(ev) {
+  slide(ev.changedTouches[0]);
+}, false);
+
+zoomSlider.addEventListener('touchend', function(ev) {
+  stopSliding(ev.changedTouches[0]);
+  ev.preventDefault();
+}, false);
+
+
+/*
+var lastFrameTime = Date.now();
+function makeALittleBigger() {
+    var zoomSlider = document.getElementById('zoom-slider');
+    if (+zoomSlider.value >= 500)
+        return;
+    var thisFrameTime = Date.now();
+    var valueIncrement = ((thisFrameTime - lastFrameTime) / 100) | 0;
+    if (valueIncrement > 0) {
+    var valueIncrement = 1;
+        zoomSlider.value = +zoomSlider.value + valueIncrement;
+        zoom();
+        //lastFrameTime = thisFrameTime;
+        console.log(zoomSlider.value);
+    //}
+    setTimeout(makeALittleBigger, 16);
+}
+*/
+
+document.addEventListener('keydown', onKeyDown, true);
+
+document.getElementById('zoom-slider').setAttribute('data-value', 240);
+
+initPhotoStyles();
+reload();
+
+//setTimeout(makeALittleBigger, 16);
+
+</script>
+</body>
+</html>
+
diff --git a/experiments/photo-gallery/photo1.jpg b/experiments/photo-gallery/photo1.jpg
diff --git a/experiments/photo-gallery/photo10.jpg b/experiments/photo-gallery/photo10.jpg
diff --git a/experiments/photo-gallery/photo11.jpg b/experiments/photo-gallery/photo11.jpg
diff --git a/experiments/photo-gallery/photo12.jpg b/experiments/photo-gallery/photo12.jpg
diff --git a/experiments/photo-gallery/photo13.jpg b/experiments/photo-gallery/photo13.jpg
diff --git a/experiments/photo-gallery/photo14.jpg b/experiments/photo-gallery/photo14.jpg
diff --git a/experiments/photo-gallery/photo15.jpg b/experiments/photo-gallery/photo15.jpg
diff --git a/experiments/photo-gallery/photo16.jpg b/experiments/photo-gallery/photo16.jpg
diff --git a/experiments/photo-gallery/photo17.jpg b/experiments/photo-gallery/photo17.jpg
diff --git a/experiments/photo-gallery/photo18.jpg b/experiments/photo-gallery/photo18.jpg
diff --git a/experiments/photo-gallery/photo19.jpg b/experiments/photo-gallery/photo19.jpg
diff --git a/experiments/photo-gallery/photo2.jpg b/experiments/photo-gallery/photo2.jpg
diff --git a/experiments/photo-gallery/photo20.jpg b/experiments/photo-gallery/photo20.jpg
diff --git a/experiments/photo-gallery/photo3.jpg b/experiments/photo-gallery/photo3.jpg
diff --git a/experiments/photo-gallery/photo4.jpg b/experiments/photo-gallery/photo4.jpg
diff --git a/experiments/photo-gallery/photo5.jpg b/experiments/photo-gallery/photo5.jpg
diff --git a/experiments/photo-gallery/photo6.jpg b/experiments/photo-gallery/photo6.jpg
diff --git a/experiments/photo-gallery/photo7.jpg b/experiments/photo-gallery/photo7.jpg
diff --git a/experiments/photo-gallery/photo8.jpg b/experiments/photo-gallery/photo8.jpg
diff --git a/experiments/photo-gallery/photo9.jpg b/experiments/photo-gallery/photo9.jpg
diff --git a/experiments/photo-gallery/photos.css b/experiments/photo-gallery/photos.css
@@ -0,0 +1,87 @@
+body {
+    background: #676767;
+    overflow: hidden;
+    font: 12px Helvetica;
+}
+main {
+    /* position: fixed;    /* comment this out to make it work in Servo :( */
+    overflow: scroll;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 25px;
+    text-align: center;
+}
+footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 40px;
+    border-top: solid 1px #515151;
+    /*background: linear-gradient(top, #ececec, #d2d2d2);
+    background: -moz-linear-gradient(top, #ececec, #d2d2d2);
+    background: -webkit-linear-gradient(top, #ececec, #d2d2d2);*/
+    background: #ececec;
+    color: #6b6b6b;
+    z-index: 1;
+}
+.footer-box {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+#zoom-container {
+    padding: 1px 23px;
+    right: 16px;
+}
+#count-container {
+    left: 3px;
+    padding-top: 2px;
+}
+.zoom-icon {
+    content: "Hello";
+    position: absolute;
+    display: block;
+    background: url(glyphicons-4-user.png) center center no-repeat;
+    top: 8px;
+    width: 23px;
+    height: 22px;
+    opacity: 0.5;
+}
+.zoom-icon.before {
+    background-size: 8px 8px;
+    left: 0;
+}
+.zoom-icon.after {
+    background-size: 14px 14px;
+    right: 0;
+}
+.photo {
+    background: url(mimi.jpg) center center / contain no-repeat;
+    display: inline-block;
+    margin: 6px;
+    /*filter: drop-shadow(0 3px 3px #444);
+    -webkit-filter: drop-shadow(0 3px 3px #444);*/
+}
+#zoom-slider {
+    position: absolute;
+    top: 12px;
+    height: 16px;
+    left: 32px;
+    right: 32px;
+    border-radius: 8px;
+    border: solid 1px black;
+}
+#zoom-knob {
+    position: absolute;
+    top: -8px;
+    bottom: 0;
+    width: 32px;
+    height: 32px;
+    border-radius: 32px;
+    background: black;
+}
+
diff --git a/experiments/photo-gallery/thumb.png b/experiments/photo-gallery/thumb.png