slideoff 0.2 → 0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (20) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +34 -25
  3. data/bin/slideoff +19 -4
  4. data/lib/slideoff.rb +1 -1
  5. data/lib/slideoff/config_builder.rb +10 -8
  6. data/lib/slideoff/presentation.rb +6 -6
  7. data/lib/slideoff/server.rb +2 -2
  8. data/lib/slideoff/utils.rb +50 -21
  9. data/themes/modern/css/print.css +6 -0
  10. data/themes/modern/css/screen.css +100 -103
  11. data/themes/modern/index.erb +2 -0
  12. data/themes/modern/js/script.coffee +16 -35
  13. data/themes/modern/js/script.js +20 -40
  14. data/themes/modern/styles/_full.scss +3 -8
  15. data/themes/modern/styles/_increment.scss +3 -0
  16. data/themes/modern/styles/_list.scss +0 -6
  17. data/themes/modern/styles/_progress.scss +0 -1
  18. data/themes/modern/styles/print.scss +13 -0
  19. data/themes/modern/styles/screen.scss +45 -38
  20. metadata +5 -3
data/themes/modern/index.erb CHANGED
@@ -7,12 +7,14 @@
7
7
  <meta name="viewport" content="width=680, user-scalable=no">
8
8
  <meta http-equiv="x-ua-compatible" content="ie=edge">
9
9
  <link rel="stylesheet" href="css/screen.css">
10
+ <link rel="stylesheet" href="css/print.css">
10
11
  <link rel="stylesheet" href="css/pygments/<%= meta.pygments_style %>.css">
11
12
  <% meta.css.each do |css| %>
12
13
  <link rel="stylesheet" href="<%= css %>">
13
14
  <% end %>
14
15
  <script src="js/jquery-2.1.0.min.js"></script>
15
16
  <script src="js/highcharts.js"></script>
17
+ <%= File.read("head.html") if File.exist?("head.html") %>
16
18
  </head>
17
19
  <body class="list">
18
20
  <header class="caption">
data/themes/modern/js/script.coffee CHANGED
@@ -96,7 +96,6 @@ $.fn.extend
96
96
  if words.length > maxWords
97
97
  while words.length > 0
98
98
  newText = words.splice(0, maxWords).join(" ")
99
- console.log
100
99
  calcSize newText
101
100
  self.append "<br>"
102
101
  else
@@ -119,13 +118,15 @@ class Transform
119
118
  @body.style.transform = transform
120
119
 
121
120
  @scale: ->
122
- Transform.apply("scale(/#{@getScaleFactor()})")
121
+ Transform.apply("scale(#{@getScaleFactor()})")
123
122
 
124
123
  @reset: ->
125
124
  Transform.apply('none')
126
125
 
127
126
  class Mode
128
127
  @body = document.body
128
+ @slideModeIndicator = "full"
129
+ @listModeIndicator = "list"
129
130
 
130
131
  @dispatchSingleSlideMode: (e) ->
131
132
  slideId = Mode.findSlideId(e.target)
@@ -137,18 +138,18 @@ class Mode
137
138
  slide.replaceHistory()
138
139
 
139
140
  @enterSlideMode: ->
140
- @body.className = "full"
141
+ @body.className = @slideModeIndicator
141
142
  Transform.scale()
142
143
 
143
144
  @enterListMode: ->
144
- @body.className = "list"
145
+ @body.className = @listModeIndicator
145
146
  Transform.reset()
146
147
 
147
148
  @isListMode: ->
148
- !@body.classList.contains("full")
149
+ !Mode.isSlideMode()
149
150
 
150
151
  @isSlideMode: ->
151
- !Mode.isListMode()
152
+ @body.classList.contains(@slideModeIndicator)
152
153
 
153
154
  @switchToListMode: ->
154
155
  Mode.enterListMode()
@@ -162,15 +163,6 @@ class Mode
162
163
  slide.pushHistory()
163
164
  slide.updateProgress()
164
165
 
165
- @reload: ->
166
- Slide.current() || Slide.first().goto()
167
- if window.location.search.substr(1) is 'full'
168
- Mode.enterSlideMode()
169
- #Slide.current().updateProgress()
170
- else
171
- Mode.enterListMode()
172
- Slide.current()?.scrollTo()
173
-
174
166
  # private
175
167
 
176
168
  # go up to element with class "slide" and return its id
@@ -234,15 +226,6 @@ class SlideInitializer
234
226
  if $(slide).hasClass('typewriter')
235
227
  $(slide).find('pre[data-lang=sh] code').addClass('inactive')
236
228
 
237
- #TODO: Remove useless code
238
- @initBodyClasses: ->
239
- $.each @bodyClasses, (klass) ->
240
- $('body').addClass(klass.split('=')[0])
241
-
242
- #TODO: Remove useless code
243
- @bodyClasses: ->
244
- window.location.search.replace(/^\?/, '').split('&')
245
-
246
229
  class Slide
247
230
  constructor: (slideNumber) ->
248
231
  @$element = $(@slideList()[@slideNumber])
@@ -258,7 +241,10 @@ class Slide
258
241
 
259
242
  @current: ->
260
243
  id = window.location.hash.substr(1)
261
- Slide.fromSlideId(id)
244
+ if id? && id.length > 0
245
+ Slide.fromSlideId(id)
246
+ else
247
+ Slide.first()
262
248
 
263
249
  nextSection: ->
264
250
  next = @nextSectionId()
@@ -389,11 +375,10 @@ class UserInterface
389
375
  Transform.scale() if Mode.isSlideMode()
390
376
 
391
377
  @init: ->
392
- if Mode.isSlideMode()
393
- Mode.enterSlideMode()
394
- slide = Slide.current() || Slide.first()
395
- slide.replaceHistory()
396
- slide.updateProgress()
378
+ if window.location.search.substr(1) is 'full'
379
+ Mode.switchToSlideMode()
380
+ else
381
+ Mode.switchToListMode()
397
382
 
398
383
  @switchToListMode: (e) ->
399
384
  if Mode.isSlideMode()
@@ -424,10 +409,6 @@ $ ->
424
409
  UserInterface.init()
425
410
  , false
426
411
 
427
- window.addEventListener "popstate", (e) ->
428
- Mode.reload()
429
- , false
430
-
431
412
  window.addEventListener "resize", (e) ->
432
413
  UserInterface.resize()
433
414
  , false
@@ -436,7 +417,7 @@ $ ->
436
417
  # Shortcut for alt, ctrl and meta keys
437
418
  return if e.altKey or e.ctrlKey or e.metaKey
438
419
  switch e.which
439
- when 116, 13 # F5, Enter
420
+ when 13 # Enter
440
421
  UserInterface.switchToSlideMode(e) if Slide.current()?
441
422
  when 27 # Esc
442
423
  UserInterface.switchToListMode(e)
data/themes/modern/js/script.js CHANGED
@@ -96,7 +96,6 @@ $.fn.extend({
96
96
  if (words.length > maxWords) {
97
97
  while (words.length > 0) {
98
98
  newText = words.splice(0, maxWords).join(" ");
99
- console.log;
100
99
  calcSize(newText);
101
100
  self.append("<br>");
102
101
  }
@@ -112,10 +111,10 @@ Transform = (function() {
112
111
 
113
112
  Transform.body = document.body;
114
113
 
115
- Transform.get = function() {
114
+ Transform.getScaleFactor = function() {
116
115
  var denominator;
117
116
  denominator = Math.max(this.body.clientWidth / window.innerWidth, this.body.clientHeight / window.innerHeight);
118
- return "scale(" + (1 / denominator) + ")";
117
+ return 1 / denominator;
119
118
  };
120
119
 
121
120
  Transform.apply = function(transform) {
@@ -127,7 +126,7 @@ Transform = (function() {
127
126
  };
128
127
 
129
128
  Transform.scale = function() {
130
- return Transform.apply(Transform.get());
129
+ return Transform.apply("scale(" + (this.getScaleFactor()) + ")");
131
130
  };
132
131
 
133
132
  Transform.reset = function() {
@@ -143,6 +142,10 @@ Mode = (function() {
143
142
 
144
143
  Mode.body = document.body;
145
144
 
145
+ Mode.slideModeIndicator = "full";
146
+
147
+ Mode.listModeIndicator = "list";
148
+
146
149
  Mode.dispatchSingleSlideMode = function(e) {
147
150
  var presentSlideId, slide, slideId;
148
151
  slideId = Mode.findSlideId(e.target);
@@ -156,21 +159,21 @@ Mode = (function() {
156
159
  };
157
160
 
158
161
  Mode.enterSlideMode = function() {
159
- this.body.className = "full";
162
+ this.body.className = this.slideModeIndicator;
160
163
  return Transform.scale();
161
164
  };
162
165
 
163
166
  Mode.enterListMode = function() {
164
- this.body.className = "list";
167
+ this.body.className = this.listModeIndicator;
165
168
  return Transform.reset();
166
169
  };
167
170
 
168
171
  Mode.isListMode = function() {
169
- return !this.body.classList.contains("full");
172
+ return !Mode.isSlideMode();
170
173
  };
171
174
 
172
175
  Mode.isSlideMode = function() {
173
- return !Mode.isListMode();
176
+ return this.body.classList.contains(this.slideModeIndicator);
174
177
  };
175
178
 
176
179
  Mode.switchToListMode = function() {
@@ -189,17 +192,6 @@ Mode = (function() {
189
192
  return slide.updateProgress();
190
193
  };
191
194
 
192
- Mode.reload = function() {
193
- var _ref;
194
- Slide.current() || Slide.first().goto();
195
- if (window.location.search.substr(1) === 'full') {
196
- return Mode.enterSlideMode();
197
- } else {
198
- Mode.enterListMode();
199
- return (_ref = Slide.current()) != null ? _ref.scrollTo() : void 0;
200
- }
201
- };
202
-
203
195
  Mode.findSlideId = function(node) {
204
196
  while ("BODY" !== node.nodeName && "HTML" !== node.nodeName) {
205
197
  if (node.classList.contains("slide")) {
@@ -293,16 +285,6 @@ SlideInitializer = (function() {
293
285
  }
294
286
  };
295
287
 
296
- SlideInitializer.initBodyClasses = function() {
297
- return $.each(this.bodyClasses, function(klass) {
298
- return $('body').addClass(klass.split('=')[0]);
299
- });
300
- };
301
-
302
- SlideInitializer.bodyClasses = function() {
303
- return window.location.search.replace(/^\?/, '').split('&');
304
- };
305
-
306
288
  return SlideInitializer;
307
289
 
308
290
  })();
@@ -331,7 +313,11 @@ Slide = (function() {
331
313
  Slide.current = function() {
332
314
  var id;
333
315
  id = window.location.hash.substr(1);
334
- return Slide.fromSlideId(id);
316
+ if ((id != null) && id.length > 0) {
317
+ return Slide.fromSlideId(id);
318
+ } else {
319
+ return Slide.first();
320
+ }
335
321
  };
336
322
 
337
323
  Slide.prototype.nextSection = function() {
@@ -549,12 +535,10 @@ UserInterface = (function() {
549
535
  };
550
536
 
551
537
  UserInterface.init = function() {
552
- var slide;
553
- if (Mode.isSlideMode()) {
554
- Mode.enterSlideMode();
555
- slide = Slide.current() || Slide.first();
556
- slide.replaceHistory();
557
- return slide.updateProgress();
538
+ if (window.location.search.substr(1) === 'full') {
539
+ return Mode.switchToSlideMode();
540
+ } else {
541
+ return Mode.switchToListMode();
558
542
  }
559
543
  };
560
544
 
@@ -603,9 +587,6 @@ $(function() {
603
587
  window.addEventListener("DOMContentLoaded", function() {
604
588
  return UserInterface.init();
605
589
  }, false);
606
- window.addEventListener("popstate", function(e) {
607
- return Mode.reload();
608
- }, false);
609
590
  window.addEventListener("resize", function(e) {
610
591
  return UserInterface.resize();
611
592
  }, false);
@@ -614,7 +595,6 @@ $(function() {
614
595
  return;
615
596
  }
616
597
  switch (e.which) {
617
- case 116:
618
598
  case 13:
619
599
  if (Slide.current() != null) {
620
600
  return UserInterface.switchToSlideMode(e);
data/themes/modern/styles/_full.scss CHANGED
@@ -17,7 +17,7 @@
17
17
  position:absolute;
18
18
  top:0;
19
19
  left:0;
20
- margin-left:150%;
20
+ display: none;
21
21
  // Next
22
22
  .next {
23
23
  visibility:hidden;
@@ -27,35 +27,30 @@
27
27
  }
28
28
  // Current
29
29
  &:target {
30
- margin:0;
30
+ display: block;
31
31
  }
32
32
  // Shout
33
33
  &.shout {
34
34
  &.right, &.up, &.left, &.down {
35
35
  h1, h2 {
36
36
  opacity:0;
37
- transition:all 0.7s ease-out;
37
+ transition:all 0.5s ease-out;
38
38
  }
39
39
  &:target h2 {
40
40
  opacity:1;
41
- -webkit-transform:translateX(0) translateY(-50%);
42
41
  transform:translateX(0) translateY(-50%);
43
42
  }
44
43
  }
45
44
  &.right h2 {
46
- -webkit-transform:translateX(-100%) translateY(-50%);
47
45
  transform:translateX(-100%) translateY(-50%);
48
46
  }
49
47
  &.left h2 {
50
- -webkit-transform:translateX(100%) translateY(-50%);
51
48
  transform:translateX(100%) translateY(-50%);
52
49
  }
53
50
  &.up h2 {
54
- -webkit-transform:translateX(0) translateY(100%);
55
51
  transform:translateX(0) translateY(100%);
56
52
  }
57
53
  &.down h2 {
58
- -webkit-transform:translateX(0) translateY(-100%);
59
54
  transform:translateX(0) translateY(-100%);
60
55
  }
61
56
  }
data/themes/modern/styles/_increment.scss CHANGED
@@ -1,11 +1,13 @@
1
1
  .inactive, .current {
2
2
  -webkit-transition: opacity 0.5s ease-in-out 0.0s;
3
+ -moz-transition: opacity 0.5s ease-in-out 0.0s;
3
4
  }
4
5
  .inactive {
5
6
  opacity: 0;
6
7
  }
7
8
  .visited {
8
9
  -webkit-transition: opacity 0.5s ease-in-out 0.3s;
10
+ -moz-transition: opacity 0.5s ease-in-out 0.3s;
9
11
  .hide-visited {
10
12
  display: none;
11
13
  }
@@ -28,6 +30,7 @@ li.current {
28
30
  .border-separated {
29
31
  li {
30
32
  -webkit-transition: all 0.5s;
33
+ -moz-transition: all 0.5s;
31
34
  }
32
35
  li.inactive {
33
36
  margin-left: -400px;
data/themes/modern/styles/_list.scss CHANGED
@@ -24,12 +24,10 @@
24
24
  text-align:left;
25
25
  -webkit-transform-origin:0 0;
26
26
  transform-origin:0 0;
27
- -webkit-transform:scale(0.5);
28
27
  transform:scale(0.5);
29
28
  @media (max-width:$break) {
30
29
  top:$height/2 + $height/4 - $gap;
31
30
  margin:($gap - ($height/2 + $height/4)) ($gap - ($width/2 + $width/4)) 0 0;
32
- -webkit-transform:scale(0.25);
33
31
  transform:scale(0.25);
34
32
  }
35
33
  // Frame
@@ -44,12 +42,10 @@
44
42
  content:'';
45
43
  -webkit-transform-origin:0 0;
46
44
  transform-origin:0 0;
47
- -webkit-transform:scale(2);
48
45
  transform:scale(2);
49
46
  @media (max-width:$break) {
50
47
  width:$width/4;
51
48
  height:$height/4;
52
- -webkit-transform:scale(4);
53
49
  transform:scale(4);
54
50
  }
55
51
  }
@@ -62,7 +58,6 @@
62
58
  width:$width/2;
63
59
  -webkit-transform-origin:0 0;
64
60
  transform-origin:0 0;
65
- -webkit-transform:scale(2);
66
61
  transform:scale(2);
67
62
  }
68
63
  }
@@ -120,7 +115,6 @@
120
115
  color: #F5F5F5;
121
116
  background: rgba(#FFF, 0.4);
122
117
  z-index: 1;
123
- /* -webkit-transform: rotate(45deg); */
124
118
  text-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
125
119
  text-transform: uppercase;
126
120
  }
data/themes/modern/styles/_progress.scss CHANGED
@@ -12,7 +12,6 @@
12
12
  height:8px;
13
13
  padding-left: -10px;
14
14
  background:url(../images/progress-grayDark.svg) 100% 0 no-repeat;
15
- -webkit-background-clip: content-box;
16
15
  background-clip: content-box;
17
16
  transition:width 0.3s linear;
18
17
  }
data/themes/modern/styles/print.scss ADDED
@@ -0,0 +1,13 @@
1
+ @import 'defaults';
2
+
3
+ // Print
4
+ @page {
5
+ margin: 0;
6
+ size: $width $height;
7
+ }
8
+
9
+ @media print {
10
+ .slide {
11
+ page-break-after: always;
12
+ }
13
+ }
data/themes/modern/styles/screen.scss CHANGED
@@ -31,6 +31,12 @@
31
31
  50% {opacity: 0;}
32
32
  100% {opacity: 0;}
33
33
  }
34
+ @keyframes blink {
35
+ 0% {opacity: 1;}
36
+ 49% {opacity: 1;}
37
+ 50% {opacity: 0;}
38
+ 100% {opacity: 0;}
39
+ }
34
40
 
35
41
  body {
36
42
  font:30px/2 'Open Sans', sans-serif;
@@ -83,8 +89,8 @@ a {
83
89
  color:#FFF;
84
90
  text-align:center;
85
91
  -webkit-transform-origin:50% 100%;
92
+ -moz-transform-origin:50% 100%;
86
93
  transform-origin:50% 100%;
87
- -webkit-transform:rotate(45deg) translateY(-1em);
88
94
  transform:rotate(45deg) translateY(-1em);
89
95
  }
90
96
 
@@ -199,6 +205,7 @@ a {
199
205
  }
200
206
  blink {
201
207
  -webkit-animation: blink 1.0s infinite;
208
+ animation: blink 1.0s infinite;
202
209
  }
203
210
  mark {
204
211
  padding-left: 5px;
@@ -382,7 +389,7 @@ a {
382
389
  table {
383
390
  left: 50%;
384
391
  position: relative;
385
- -webkit-transform: translateX(-50%);
392
+ transform: translateX(-50%);
386
393
  margin:0 0 28px;
387
394
  width:100%;
388
395
  border-collapse:collapse;
@@ -405,14 +412,14 @@ a {
405
412
  img, iframe {
406
413
  position: absolute;
407
414
  left: 50%;
408
- -webkit-transform: translateX(-50%);
415
+ transform: translateX(-50%);
409
416
  // max-height: 440px;
410
417
  max-height: 580px;
411
418
  max-width: 850px;
412
419
 
413
420
  &.inline {
414
421
  position: initial;
415
- -webkit-transform: none;
422
+ transform: none;
416
423
  }
417
424
  }
418
425
  iframe {
@@ -469,7 +476,7 @@ a {
469
476
  width:$width;
470
477
  height:$height;
471
478
  }
472
- .left-33 {
479
+ .border-info {
473
480
  padding: 60px 0px;
474
481
  font:38px/1 'Open Sans', sans-serif;
475
482
  font-weight: lighter;
@@ -511,6 +518,24 @@ a {
511
518
  }
512
519
  }
513
520
  }
521
+ .left-33 {
522
+ @extend .border-info;
523
+ width: 36%;
524
+ }
525
+ .right-33 {
526
+ @extend .border-info;
527
+ width: 36%;
528
+ left: 64%;
529
+ }
530
+ .left-50 {
531
+ @extend .border-info;
532
+ width: 50%;
533
+ }
534
+ .right-50 {
535
+ @extend .border-info;
536
+ width: 50%;
537
+ left: 50%;
538
+ }
514
539
  @mixin cover {
515
540
  img, svg, video,
516
541
  object, canvas, iframe {
@@ -534,7 +559,6 @@ a {
534
559
  @include cover {
535
560
  top:50%;
536
561
  width:100%;
537
- -webkit-transform:translateY(-50%);
538
562
  transform:translateY(-50%);
539
563
  }
540
564
  }
@@ -542,7 +566,6 @@ a {
542
566
  @include cover {
543
567
  left:50%;
544
568
  height:100%;
545
- -webkit-transform:translateX(-50%);
546
569
  transform:translateX(-50%);
547
570
  }
548
571
  }
@@ -550,7 +573,6 @@ a {
550
573
  @include cover {
551
574
  top:0;
552
575
  left:0;
553
- -webkit-transform:none;
554
576
  transform:none;
555
577
  }
556
578
  }
@@ -579,7 +601,6 @@ a {
579
601
  left: 128px;
580
602
  color:#FFF;
581
603
  font-size:100px;
582
- -webkit-transform:translateY(-50%);
583
604
  transform:translateY(-50%);
584
605
  border-bottom: none;
585
606
  z-index: 1;
@@ -594,7 +615,6 @@ a {
594
615
  right: 0;
595
616
  top: 50%;
596
617
  color: #FFF;
597
- -webkit-transform:translateY(-50%);
598
618
  transform:translateY(-50%);
599
619
  font-size: 100px;
600
620
  line-height: 1em;
@@ -608,8 +628,6 @@ a {
608
628
  }
609
629
  &.chapter {
610
630
  @extend .shout;
611
- @extend .left;
612
- @extend .cover;
613
631
  @extend .w;
614
632
  h2 {
615
633
  padding: 20px;
@@ -693,51 +711,45 @@ a {
693
711
  margin-top: 50px;
694
712
  }
695
713
  }
696
- .col2 {
714
+ .col {
697
715
  position: relative;
698
- -webkit-columns: 2;
699
716
  li {
700
717
  margin-left: 2em;
701
718
  text-indent: -2em;
702
719
  }
720
+ img {
721
+ position: initial;
722
+ transform: none;
723
+ }
724
+ }
725
+ .col2 {
726
+ @extend .col;
727
+ -webkit-columns: 2;
728
+ -moz-columns: 2;
703
729
  }
704
730
  .col3 {
705
- position: relative;
731
+ @extend .col;
706
732
  -webkit-columns: 3;
707
- li {
708
- margin-left: 2em;
709
- text-indent: -2em;
710
- }
733
+ -moz-columns: 3;
711
734
  }
712
735
  .col4 {
713
- position: relative;
736
+ @extend .col;
714
737
  -webkit-columns: 4;
715
- li {
716
- margin-left: 2em;
717
- text-indent: -2em;
718
- }
719
- img {
720
- position: initial;
721
- -webkit-transform: none;
722
- }
738
+ -moz-columns: 4;
723
739
  }
724
740
  // Place
725
741
  .place {
726
742
  position:absolute;
727
743
  top:50%;
728
744
  left:50%;
729
- -webkit-transform:translate(-50%, -50%);
730
745
  transform:translate(-50%, -50%);
731
746
  &.t.l, &.t.r, &.b.r, &.b.l {
732
- -webkit-transform:none;
733
747
  transform:none;
734
748
  }
735
749
  &.t, &.b {
736
- -webkit-transform:translate(-50%, 0);
737
750
  transform:translate(-50%, 0);
738
751
  }
739
752
  &.l, &.r {
740
- -webkit-transform:translate(0, -50%);
741
753
  transform:translate(0, -50%);
742
754
  }
743
755
  &.t, &.t.l, &.t.r {
@@ -773,7 +785,7 @@ a {
773
785
  }
774
786
  }
775
787
 
776
- #slide-0-0 {
788
+ .slide.title {
777
789
  color: $grayDark;
778
790
  font-size: 70px;
779
791
  font-weight: 700;
@@ -834,8 +846,3 @@ a {
834
846
  @import 'list';
835
847
  @import 'full';
836
848
  }
837
- // Print
838
- @page {
839
- margin:0;
840
- size:$width $height;
841
- }