WIP

diff --git a/simpleWebSlides.css b/simpleWebSlides.css
index 51ae087..32fdc55 100644 (file)
--- a/simpleWebSlides.css
+++ b/simpleWebSlides.css
@@ -1,10 +1,8 @@
 /*         Common           */
 body {
-    margin: 0 0 0 0;
-    padding: 0 0 0 0;
-    -webkit-box-sizing: border-box;
+    margin:0;
+    padding:0;
     box-sizing: border-box;
-    -moz-box-sizing: border-box;
 }
 
 .sws-active-object {
@@ -15,16 +13,9 @@ body {
 }
 
 .sws-canvas {
-    display: -webkit-flex;
-    display: flex;
-    flex-direction: column;
-    -webkit-flex-direction: column;
-    /* We make the box sizing border-box so that the user can freely add
-       padding and borders to canvas without changing the overall
-       layout */
     box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
+    text-align: center;
+    vertical-align:middle;
 }
 .sws-cover {
     justify-content: center;
@@ -34,41 +25,31 @@ body {
 
 /* Layout of a canvas */
 .sws-header , .sws-title,{
-    -webkit-box-align:start;
-    display:block;
+    height:5vmin;
 }
 
 .sws-inner-canvas {
-    top-margin: auto;
-    bottom-margin: auto;
-    display:flex;
-    display:-webkit-flex;
-    flex: 3;
-    -webkit-flex: 3;
-    flex-direction: column;
-    -webkit-flex-direction: column;
-    justify-content: center;
-    -webkit-justify-content:center;
+    height: 80vmin;
+    text-align: justify;
 }
 
 .sws-content {
-    margin: 0vh;
-    padding: 0vh;
-    display:block;
+    margin: 0;
+    padding: 0;
+    display: block;
     width: 100%;
 }
 
 .sws-footer{
-    position: relative;
-    display:block;
-    bottom: 0pt;
-    left: 0pt;
+    height: 10vmin;
 }
 
 .sws-header, .sws-title, .sws-inner-canvas, .sws-footer{
-    margin: 0 0 0 0;
-    padding: 0 0 0 0;
+    display:inline-block;
+    margin:0;
+    padding:0;
     width: 100%;
+    box-sizing: border-box;
 }
 
 
@@ -85,8 +66,8 @@ body > h1, body > h2, body > h3 {
 }
 
 :root.sws-display .sws-canvas {
-    width:133.3vh;
-    height:100vh;
+    width:133.3vmin;
+    height:100vmin;
     overflow:hidden;
 }
 
@@ -95,27 +76,27 @@ body > h1, body > h2, body > h3 {
 /* Aspect is 4/3, 16/9, 16/10 (default is 4/3) */
 
 :root.sws-aspect-4-3 .sws-canvas {
-    width:133.3vh;
-    height:100vh;
+    width:133.3vmin;
+    height:100vmin;
 }
 
 :root.sws-aspect-16-9 .sws-canvas {
-    width:177.7vh;
-    height:100vh;
+    width:177.7vmin;
+    height:100vmin;
 }
 
 :root.sws-aspect-16-10 .sws-canvas {
-    width:160vh;
-    height:100vh;
+    width:160vmin;
+    height:100vmin;
 }
 
 :root.sws-display .sws-canvas {
     position: relative;
     margin-left: auto;
     margin-right: auto;
-    padding: 0vh;
-    margin-top: 0vh;
-    margin-bottom: 0vh;
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 0;
 }
 
 :root.sws-display .sws-inactive-slide {
@@ -141,8 +122,8 @@ body > h1, body > h2, body > h3 {
 
     @page {
        size: 297mm 210mm;
-       margin: 0pt;
-       padding: 0pt;
+       margin: 0;
+       padding: 0;
 
 }
 
@@ -213,11 +194,11 @@ p { width: 100%; }
 
 #sws-control-panel {
 /*    visibility: hidden;*/
-    font-size:6vh;
-    width: 100vh;
+    font-size:6vmin;
+    width: 100vmin;
     bottom: 0vh;
     display:inline-block;
-    border-radius: 1vh;
+    border-radius: 1vmin;
     background-color: white;
     opacity: 0.9;
     color: black;
@@ -231,7 +212,7 @@ p { width: 100%; }
 #sws-control-panel-canvas:after{
     content:"";
     display:inline-block;
-    width: 0vh;
+    width: 0vmin;
     height: 100%;
     background:pink;
     vertical-align:bottom;
@@ -239,7 +220,7 @@ p { width: 100%; }
 
 #sws-control-panel-title-bar {
     width: 100%;
-    font-size: 3vh;
+    font-size: 3vmin;
     text-align:right;
 }
 
@@ -247,7 +228,7 @@ p { width: 100%; }
  {
      display: inline-block;
      vertical-align: middle;
-     font-size: 3vh;
+     font-size: 3vmin;
  }
 
 #sws-control-panel-navigation {
@@ -263,7 +244,7 @@ p { width: 100%; }
 }
 
 #sws-control-panel-title-bar a {
-    padding:0vh 2vh 0vh 0vh;
+    padding:0vmin 2vmin 0vmin 0vmin;
     margin: 0 0 0 0;
 }
 
@@ -272,17 +253,17 @@ p { width: 100%; }
 }
 #sws-control-panel-slide-input
 {
-    font-size: 3vh;
+    font-size: 3vmin;
     width: 3em;
     vertical-align:middle;
 }
 #sws-control-panel-total-slides {
-    font-size: 3vh;
+    font-size: 3vmin;
     vertical-align:middle;
 }
 
 #sws-control-panel-navigation-bar {
-    width: 50vh;
+    width: 50vmin;
 }
 #sws-print-container {
     top: 0;
@@ -302,7 +283,7 @@ p { width: 100%; }
     left:35%;
     top:25%;
     opacity: 0.9;
-    border-radius: 1vh;
+    border-radius: 1vmin;
     display:none;
 }
 #sws-help-panel-canvas * {

diff --git a/simpleWebSlides.js b/simpleWebSlides.js
index 23f08a2..9beae05 100644 (file)
--- a/simpleWebSlides.js
+++ b/simpleWebSlides.js
@@ -573,20 +573,25 @@ SWS.Presentation = new function () {
 
 
 
-    var _xstart = 0;
+    var _startTouch = null;
+
     self.inputHandler = function (event) {
         if (_disable_input_events || _print_mode) return;
         var code = 0;
         switch (event.type) {
         case 'touchstart':
-            _xstart = event.changedTouches[0].clientX;
+           _startTouch = event.changedTouches[0];
             return;
         case 'touchend':
-
-            var dist = event.changedTouches[0].clientX - _xstart;
-            if (dist > 20) code = 37
-            else if (dist < -20) code = 39
-            else if (!$("#sws-control-panel-canvas").is(":visible")) code = 67;
+           if (!_startTouch) return;
+           var _endTouch = event.changedTouches[0];
+           var Xdist = _endTouch.clientX - _startTouch.clientX;
+           var Ydist = _endTouch.clientY - _startTouch.clientY;
+           if (Xdist > 40) code = 39
+           else if (Xdist < -40) code = 37
+            else if (Ydist > 20 && !$("#sws-control-panel-canvas").is(":visible")) code = 67;
+           else if (Ydist < -20  && $("#sws-control-panel-canvas").is(":visible")) code = 67;
+           else code = 39;
             break;
         case 'keydown':
             code = event.which;
@@ -594,6 +599,7 @@ SWS.Presentation = new function () {
         default:
             return;
         };
+
         switch (code) {
         case 36:/* Home */
             self.setCurrentSlide(self.firstSlide());
@@ -605,6 +611,8 @@ SWS.Presentation = new function () {
         case 32: /* space */
         case 34: /* PgDown */
         case 39: /* -> */
+       case 176: /* Multimedia skip forward */
+       case 179: /* Multimedia play/pause */
             if (self.getCurrentSlide() == self.lastSlide()
                 && self.getCurrentFrame() == self.lastFrame()) return;
             self.next();
@@ -615,6 +623,7 @@ SWS.Presentation = new function () {
         case 8: /* backspace */
         case 33: /* PgUp */
         case 37: /* <-   */
+       case 177: /* Multimedia skip backward */
             self.previous();
             break;
         case 80: /* p */
@@ -911,13 +920,12 @@ SWS.Presentation = new function () {
                     self.printMode();
                 }
                 else {
-                   if (self.showHelpAtStartup()) $("#sws-help-panel-canvas").show();
+                   if (self.showHelpAtStartup()) $("#sws-help-panel-canvas").show().delay(5000).hide();
                     self.refresh();
                };
                 $(document).keydown(self.inputHandler);
                 document.body.addEventListener('touchstart',self.inputHandler, false);
                 document.body.addEventListener('touchend',self.inputHandler, false);
-               
                 _initialized = true;
             };
         setTimeout(f, 100);

diff --git a/themes/uPsud.css b/themes/uPsud.css
index a8ba435..d38c8e6 100644 (file)
--- a/themes/uPsud.css
+++ b/themes/uPsud.css
@@ -1,6 +1,15 @@
 @import url(https://fonts.googleapis.com/css?family=Armata&subset=latin,latin-ext);
 @import url(https://fonts.googleapis.com/css?family=Inconsolata:400,700&subset=latin,latin-ext);
 
+/**** structure of the slide in this theme:
+      no-header
+      title : 10%
+      text : 80% == 20 lines of text.
+      footer :10%
+
+
+
+*/
 
 
 /* No header in this theme */
@@ -10,8 +19,9 @@
 
 /* Title of the slide */
 .sws-title {
-    padding: 2vh 0 2vh 0;
-    height: 5vh;
+    padding: 2vmin 0 2vmin 0;
+    height: 10vmin;
+    background:red;
 }
 
 h1 {
@@ -22,22 +32,28 @@ h1 {
 
 .sws-canvas {
     color: #696968;
-    background: white;
-    padding: 0 0 0 0;
-    margin: 0 0 0 0;
+    background: #fff;
+    padding:0;
+    margin: 0;
     z-index:2;
 }
 .sws-inner-canvas {     /* allows the canvas to cover the logo if needed */
-    z-index:2 }
+    z-index:2;
+    height: 80vmin;
+    background:blue;
+}
 
+.sws-footer {
+    height: 10vmin;
+    background:pink;
+}
 
 .sws-footer::before {
     position:absolute;
-    bottom: 1vh;
-    left:1vh;
+    bottom: 1vmin;
+    left:1vmin;
     display:block;
-    width:10vh;
-    height:13vh;
+    height:10vmin;
     content:"";
     background-size: 100%;
     background-image: url("logo_psud_psay.png");