Ready for review

core/static/com/js/slideshow.js

@@ -1,6 +1,5 @@
 $(document).ready(function(){
 
-    wait_time = 40 * 1000;
     transition_time = 1000;
 
     i = 0;
@@ -39,16 +38,18 @@ $(document).ready(function(){
     function init_progress_bar()
     {
 
+        $("#slideshow #progress_bar").css("transition", "none");
         $("#slideshow #progress_bar").removeClass("progress");
         $("#slideshow #progress_bar").addClass("init");
 
     }
 
-    function start_progress_bar()
+    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")
 
     }
 
@@ -63,6 +64,7 @@ $(document).ready(function(){
         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];
@@ -76,19 +78,20 @@ $(document).ready(function(){
             others_left.removeClass("left");
             others_left.addClass("right");
 
-            start_progress_bar();
-            next_trigger = setTimeout(next, wait_time);
+            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();
-            setTimeout(next, wait_time);
+            start_progress_bar(display_time);
+            setTimeout(next, display_time * 1000);
         }
     }, 10);
 

core/static/com/slideshow.scss

@@ -1,36 +1,28 @@
 body{
-
     position: absolute;
     width: 100vw;
     height: 100vh;
 
     padding: 0;
     margin: 0;
-
 }
 
-#slideshow
-{
-
+#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
-        {
+        &::before{
 
             position: absolute;
             width: 100%;
@@ -51,9 +43,7 @@ body{
 
     }
 
-
-    &.fullscreen
-    {
+    &.fullscreen{
         position: fixed;
         width: 100%;
         height: 100%;
@@ -61,36 +51,23 @@ body{
         left: 0;
         background: none;
 
-        &:before
-        {
-
+        &:before{
             display:none;
-
         }
 
-        #slides
-        {
-
+        #slides{
             height: 100vh;
-
         }
 
     }
 
-    #slides
-    {
-
+    #slides{
         position: relative;
-
         height: 100%;
-
         overflow: hidden;
 
-        .slide
-        {
-
+        .slide{
             position: absolute;
-
             width: 100%;
             height: 100%;
 
@@ -100,52 +77,32 @@ body{
             top: 0px;
 
             background-color: grey;
-
             transition: left 1s ease-out;
 
-            img
-            {
-
+            img{
                 max-width: 100%;
                 max-height: 100%;
-
             }
-
         }
 
-        .slide.left
-        {
-
+        .slide.left{
             left: -100%;
-
         }
 
-        .slide.center
-        {
-
+        .slide.center{
             left: 0px;
-
         }
 
-        .slide.right
-        {
-
+        .slide.right{
             left: 100%;
-
             transition: none;
-
         }
-
     }
 
 
-    #progress_bullets
-    {
-
+    #progress_bullets{
         position: absolute;
-
         bottom: 10px;
-
         width: 100%;
         height: 10px;
 
@@ -154,9 +111,7 @@ body{
 
         margin-bottom: 10px;
 
-        .bullet
-        {
-
+        .bullet{
             height: 10px;
             width: 10px;
 
@@ -167,43 +122,27 @@ body{
 
             background-color: grey;
 
-            &.active
-            {
-
+            &.active{
                 background-color: #c99836;
-
             }
-
         }
-
-
     }
 
-    #progress_bar
-    {
-
+    #progress_bar{
         position: absolute;
         bottom: 0px;
         height: 10px;
         background-color: #304c83;
 
-        &.init
-        {
-
+        &.init{
             width: 0px;
             transition: none;
-
         }
 
-        &.progress
-        {
-
+        &.progress{
             width: 100%;
-            transition: width 40s linear;
-
+            transition: width 10s linear;
         }
-
     }
-
 }