First post. ¯\_(ツ)_/¯

7 years ago · 2751ce4486
commit 2751ce4486
5 changed files with 148 additions and 0 deletions
--- a/browser-matrix-0.5.3.min.js
+++ b/browser-matrix-0.5.3.min.js
--- a/index.html
+++ b/index.html
@ -0,0 +1,15 @@
+<html xmlns:svg="http://www.w3.org/2000/svg">
+    <head>
+        <title>Nervewire Image Deck</title>
+        <link href="nervewire.css" rel="stylesheet" type="text/css">
+    </head>
+    <body id="body">
+        <div id="nervewire"
+             display="block"
+             style="width:100%;height:100%">
+        </div>
+        <script src="./browser-matrix-0.5.3.min.js"></script>
+        <script src="./token.js"></script>
+        <script src="./nervewire.js"></script>
+    </body>
+</html>
--- a/nervewire.css
+++ b/nervewire.css
@ -0,0 +1,19 @@
+.image {
+    animation-duration: 3s;
+    animation-name: image-appear;
+    position: absolute;
+    filter: grayscale(0) blur(0) opacity(1);
+    -webkit-filter: grayscale(0) blur(0) opacity(1);
+}
+
+body {
+    background-color: #2a2a2a;
+    overflow: hidden;
+}
+
+@keyframes image-appear {
+    0% {
+        -webkit-filter: grayscale(0.5) blur(10px) opacity(0);
+        filter: grayscale(0.5) blur(10px) opacity(0);
+    }
+}
--- a/nervewire.js
+++ b/nervewire.js
@ -0,0 +1,103 @@
+var elements = [];
+var maxElements = 50;
+
+var appendElement = function appendElement(element) {
+    elements.push({
+        el:element,
+        haveDrawn: false
+    });
+    while (elements.length > maxElements) {
+        delete elements.shift();
+    }
+    setTimeout(function() {
+        drawElement(elements[0]);
+    }, 0);
+}
+
+var canvas = document.getElementById('nervewire');
+var canvasW = canvas.scrollWidth;
+var canvasH = canvas.scrollHeight;
+
+var drawElement = function drawElement(element) {
+    try {
+        var dw = Math.floor(Math.random() * canvasW) - 200;
+        var dh = Math.floor(Math.random() * canvasH) - 200;
+        var e = element.el;
+        e.style = "transform: translate(" + dw + "px, " + dh + "px);"; 
+
+        element.haveDrawn = true;
+        canvas.appendChild(e);
+    }
+    catch (e) {
+        animListener()
+        console.log(e)
+    }
+}
+
+var animListener = function animListener(e) {
+    // find next undrawn element
+    for (element in elements) {
+        if (elements[element].haveDrawn == false ) {
+            setTimeout(function() {
+                drawElement(elements[element]);
+            }, 0);
+            break;
+        }
+    }
+}
+
+var mxcToUrl = function mxcToUrl(mxc) {
+    var parts = mxc.split("/");
+    var finalString = homeserverURL + "/_matrix/media/v1/download/" + parts[2] + "/" + parts[3]
+    return finalString;
+}
+
+var handleEvent = function handleEvent(event) {
+    // event is https://matrix-org.github.io/matrix-js-sdk/0.5.3/module-models_event.MatrixEvent.html
+    console.log(event.event);
+    var m_event = event.event;
+    var element = null;
+    if (m_event.type === "m.room.message") {
+        if(m_event.content.msgtype === "m.image") {
+            element = mkImageElement(m_event);
+        }
+        else if (m_event.content.msgtype === "m.text") {
+            element = mkTextElement(m_event);
+        }
+    }
+    if (element) {
+        appendElement(element);
+    }
+}
+
+var mkImageElement = function mkImageElement(event) {
+    var imageUrl = mxcToUrl(event.content.url);
+    var aTag = document.createElement('a');
+    aTag.setAttribute('href', imageUrl);
+    aTag.setAttribute('class', 'image');
+    aTag.setAttribute('target', '_blank');
+    aTag.addEventListener("animationend", animListener, false);
+    
+    var image = new Image()
+    image.src = imageUrl;
+    
+    aTag.appendChild(image);
+    
+    return aTag;
+}
+
+var mkTextElement = function mkTextElement(event) {
+    return {};
+}
+
+var client = matrixcs.createClient({
+    baseUrl: homeserverURL,
+    accessToken: accessToken,
+    userId: userId
+});
+
+client.on("event", handleEvent);
+client.startClient({
+    initialSyncLimit: 100
+});
+
--- a/token.js
+++ b/token.js
@ -0,0 +1,3 @@
+var userId = "@test:example.com"; 
+var accessToken = "fblasfkjdsofidsof";
+var homeserverURL = "https://matrix.org/"