From: Kim Nguyễn Date: Fri, 25 Sep 2015 23:07:36 +0000 (+0200) Subject: WIP X-Git-Url: http://git.nguyen.vg/gitweb/?p=hacks%2FsimpleWebSlides.git;a=commitdiff_plain;h=c416ce52822fd7c6dfc616b16449cec6eba41062 WIP --- diff --git a/simpleWebSlides.css b/simpleWebSlides.css index 51ae087..32fdc55 100644 --- 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 --- 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 --- 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");