move static files in their respective application

com/static/com/js/poster_list.js

@@ -0,0 +1,24 @@
+$(document).ready(function(){
+
+    $("#poster_list #view").click(function(e){
+        $("#view").removeClass("active");
+    });
+
+    $("#poster_list .poster .image").click(function(e){
+
+        el = $(e.target);
+        if(el.hasClass("image"))
+            el = el.find("img")
+        $("#poster_list #view #placeholder").html(el.clone());
+
+        $("#view").addClass("active");
+    });
+
+    $(document).keyup(function(e) {
+        if (e.keyCode == 27) { // escape key maps to keycode `27`
+            e.preventDefault();
+            $("#view").removeClass("active");
+        }
+    });
+
+});

com/static/com/js/slideshow.js

@@ -0,0 +1,118 @@
+$(document).ready(function(){
+
+    transition_time = 1000;
+
+    i = 0;
+    max = $("#slideshow .slide").length;
+
+    next_trigger = 0
+
+    function enterFullscreen() {
+        element = document.getElementById("slideshow");
+        $(element).addClass("fullscreen");
+        if(element.requestFullscreen) {
+            element.requestFullscreen();
+        } else if(element.mozRequestFullScreen) {
+            element.mozRequestFullScreen();
+        } else if(element.webkitRequestFullscreen) {
+            element.webkitRequestFullscreen();
+        } else if(element.msRequestFullscreen) {
+            element.msRequestFullscreen();
+        }
+    }
+
+    function exitFullscreen() {
+        element = document.getElementById("slideshow");
+        $(element).removeClass("fullscreen");
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        }
+    }
+
+    function init_progress_bar()
+    {
+
+        $("#slideshow #progress_bar").css("transition", "none");
+        $("#slideshow #progress_bar").removeClass("progress");
+        $("#slideshow #progress_bar").addClass("init");
+
+    }
+
+    function start_progress_bar(display_time)
+    {
+
+        $("#slideshow #progress_bar").removeClass("init");
+        $("#slideshow #progress_bar").addClass("progress");
+        $("#slideshow #progress_bar").css("transition", "width " + display_time + "s linear")
+
+    }
+
+    function next()
+    {
+
+        init_progress_bar();
+        slide = $($("#slideshow .slide").get(i % max));
+        slide.removeClass("center");
+        slide.addClass("left");
+
+        next_slide = $($("#slideshow .slide").get((i + 1) % max));
+        next_slide.removeClass("right");
+        next_slide.addClass("center");
+        display_time = next_slide.attr("display_time") || 2;
+
+        $("#slideshow .bullet").removeClass("active");
+        bullet = $("#slideshow .bullet")[(i + 1) % max];
+        $(bullet).addClass("active");
+
+        i = (i + 1) % max;
+
+        setTimeout(function(){
+
+            others_left = $("#slideshow .slide.left");
+            others_left.removeClass("left");
+            others_left.addClass("right");
+
+            start_progress_bar(display_time);
+            next_trigger = setTimeout(next, display_time * 1000);
+
+        }, transition_time);
+
+    }
+
+
+    display_time = $("#slideshow .center").attr("display_time");
+    init_progress_bar();
+    setTimeout(function(){
+        if(max > 1){
+            start_progress_bar(display_time);
+            setTimeout(next, display_time * 1000);
+        }
+    }, 10);
+
+
+    $("#slideshow").click(function(e){
+        if(!$("#slideshow").hasClass("fullscreen"))
+        {
+            console.log("Entering fullscreen ...");
+            enterFullscreen();
+        }else{
+            console.log("Exiting fullscreen ...");
+            exitFullscreen();
+        }
+    });
+
+    $(document).keyup(function(e) {
+        if (e.keyCode == 27) { // escape key maps to keycode `27`
+            e.preventDefault();
+            console.log("Exiting fullscreen ...");
+            exitFullscreen();
+        }
+    });
+
+});

com/static/css/slideshow.scss

@@ -0,0 +1,149 @@
+body{
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+
+  padding: 0;
+  margin: 0;
+}
+
+#slideshow{
+  position: relative;
+  background-color: lightgrey;
+
+  height: 100%;
+
+  *{
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  &:hover{
+
+    &::before{
+
+      position: absolute;
+      width: 100%;
+      height: 100%;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      z-index: 10;
+
+      content: "Click to expand";
+
+      color: white;
+      background-color: rgba(black, 0.5);
+
+    }
+
+  }
+
+  &.fullscreen{
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: none;
+
+    &:before{
+      display:none;
+    }
+
+    #slides{
+      height: 100vh;
+    }
+
+  }
+
+  #slides{
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+
+    .slide{
+      position: absolute;
+      width: 100%;
+      height: 100%;
+
+      display: inline-flex;
+      justify-content: center;
+
+      top: 0px;
+
+      background-color: grey;
+      transition: left 1s ease-out;
+
+      img{
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+      }
+    }
+
+    .slide.left{
+      left: -100%;
+    }
+
+    .slide.center{
+      left: 0px;
+    }
+
+    .slide.right{
+      left: 100%;
+      transition: none;
+    }
+  }
+
+
+  #progress_bullets{
+    position: absolute;
+    bottom: 10px;
+    width: 100%;
+    height: 10px;
+
+    display: flex;
+    justify-content: center;
+
+    margin-bottom: 10px;
+
+    .bullet{
+      height: 10px;
+      width: 10px;
+
+      margin-left: 5px;
+      margin-right: 5px;
+
+      border-radius: 50%;
+
+      background-color: grey;
+
+      &.active{
+        background-color: #c99836;
+      }
+    }
+  }
+
+  #progress_bar{
+    position: absolute;
+    bottom: 0px;
+    height: 10px;
+    background-color: #304c83;
+
+    &.init{
+      width: 0px;
+      transition: none;
+    }
+
+    &.progress{
+      width: 100%;
+      transition: width 10s linear;
+    }
+  }
+}
+