Communication screen - without club tool

core/static/com/js/poster_create.js

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

core/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");
+        }
+    });
+
+});

core/static/com/js/slideshow.js

@@ -0,0 +1,115 @@
+$(document).ready(function(){
+
+    wait_time = 40 * 1000;
+    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").removeClass("progress");
+        $("#slideshow #progress_bar").addClass("init");
+
+    }
+
+    function start_progress_bar()
+    {
+
+        $("#slideshow #progress_bar").removeClass("init");
+        $("#slideshow #progress_bar").addClass("progress");
+
+    }
+
+    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");
+
+        $("#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();
+            next_trigger = setTimeout(next, wait_time);
+
+        }, transition_time);
+
+    }
+
+
+    init_progress_bar();
+    setTimeout(function(){
+        if(max > 1){
+            start_progress_bar();
+            setTimeout(next, wait_time);
+        }
+    }, 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();
+        }
+    });
+
+});

core/static/com/slideshow.scss

@@ -0,0 +1,209 @@
+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%;
+
+            }
+
+        }
+
+        .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 40s linear;
+
+        }
+
+    }
+
+}
+