Refactor overlay into help mode.

helenaxwang · Jul 4, 2013 · 2dfe32a · 2dfe32a
1 parent 588e4cd
commit 2dfe32a
Show file tree

Hide file tree

Showing 9 changed files with 262 additions and 293 deletions.
diff --git a/make.js b/make.js
@@ -47,8 +47,8 @@ function bundleResources (target) {
   var resources = {
         DOCUMENT_STYLES: JSON.stringify(
           less('src/remark.less'))
-      , OVERLAY: JSON.stringify(
-          cat('src/overlay.html'))
+      , HELP: JSON.stringify(
+          cat('src/help.html'))
       };
 
   cat('src/resources.js.template')
@@ -63,7 +63,7 @@ function bundleHighlighter (target) {
     , resources = {
         HIGHLIGHTER_STYLES: JSON.stringify(
           ls(highlightjs + 'styles/*.css').reduce(mapStyle, {}))
-      , HIGHLIGHTER_ENGINE: 
+      , HIGHLIGHTER_ENGINE:
           cat(highlightjs + 'highlight.js')
       , HIGHLIGHTER_LANGUAGES:
           config.highlighter.languages.map(function (language) {

diff --git a/remark.js b/remark.js
diff --git a/remark.min.js b/remark.min.js
diff --git a/src/overlay.html → src/help.html b/src/overlay.html → src/help.html
@@ -1,4 +1,4 @@
-<div class="remark-overlay-content">
+<div class="remark-help-content">
   <h1>Help</h1>
   <p><b>Keyboard shortcuts</b></p>
   <table class="light-keys">
@@ -49,7 +49,7 @@ <h1>Help</h1>
       <td>
         <span class="key">?</span>
       </td>
-      <td>Show help</td>
+      <td>Toggle this help</td>
     </tr>
   </table>
 </div>

diff --git a/src/remark.less b/src/remark.less
@@ -100,7 +100,7 @@ html.remark-container, body.remark-container {
 /* Overlay */
 /***********/
 
-.remark-overlay {
+.remark-help {
   bottom: 0;
   top: 0;
   right: 0;
@@ -110,8 +110,11 @@ html.remark-container, body.remark-container {
   display: none;
   position: absolute;
   z-index: 1000;
+  -webkit-transform-origin: top left;
+  -moz-transform-origin: top left;
+  transform-origin: top-left;
 
-  .remark-overlay-content {
+  .remark-help-content {
     color: white;
     font-family: Helvetica, arial, freesans, clean, sans-serif;
     font-size: 12pt;
@@ -145,6 +148,12 @@ html.remark-container, body.remark-container {
   }
 }
 
+.remark-container.remark-help-mode {
+  .remark-help {
+    display: block;
+  }
+}
+
 /************/
 /* Position */
 /************/

diff --git a/src/remark/resources.js b/src/remark/resources.js
diff --git a/src/remark/views/overlayView.js b/src/remark/views/overlayView.js
diff --git a/src/remark/views/slideshowView.js b/src/remark/views/slideshowView.js
@@ -1,5 +1,5 @@
 var SlideView = require('./slideView')
-  , OverlayView = require('./overlayView')
+  , resources = require('../resources')
   , addClass = require('../utils').addClass
   , toggleClass = require('../utils').toggleClass
 
@@ -22,7 +22,7 @@ function SlideshowView (events, containerElement, slideshow) {
   self.configureSlideshowElement();
   self.configurePreviewElement();
   self.configurePositionElement();
-  self.configureOverlayView();
+  self.configureHelpView();
 
   self.updateDimensions();
   self.updateSlideViews();
@@ -45,6 +45,10 @@ function SlideshowView (events, containerElement, slideshow) {
     self.presenterMode = !!!self.presenterMode;
     self.updateDimensions();
   });
+
+  events.on('toggleHelp', function () {
+    toggleClass(self.containerElement, 'remark-help-mode');
+  });
 }
 
 SlideshowView.prototype.isEmbedded = function () {
@@ -124,6 +128,7 @@ SlideshowView.prototype.configureSlideshowElement = function () {
   function onResize () {
     self.scaleToFit(self.element, self.elementArea);
     self.scaleToFit(self.previewElement, self.previewArea);
+    self.scaleToFit(self.helpElement, self.containerElement);
   }
 };
 
@@ -135,11 +140,13 @@ SlideshowView.prototype.configurePositionElement = function () {
   self.element.appendChild(self.positionElement);
 };
 
-SlideshowView.prototype.configureOverlayView = function () {
+SlideshowView.prototype.configureHelpView = function () {
   var self = this;
 
-  self.overlayView = new OverlayView(self.events);
-  self.element.appendChild(self.overlayView.element);
+  self.helpElement = document.createElement('div');
+  self.helpElement.className = 'remark-help';
+  self.helpElement.innerHTML = resources.help;
+  self.containerElement.appendChild(self.helpElement);
 };
 
 SlideshowView.prototype.configureNotesElement = function () {
@@ -237,13 +244,15 @@ SlideshowView.prototype.updateDimensions = function () {
 
   this.element.style.width = this.dimensions.width + 'px';
   this.element.style.height = this.dimensions.height + 'px';
-
   this.previewElement.style.width = this.dimensions.width + 'px';
   this.previewElement.style.height = this.dimensions.height + 'px';
+  this.helpElement.style.width = this.dimensions.width + 'px';
+  this.helpElement.style.height = this.dimensions.height + 'px';
 
   this.scaleSlideBackgroundImages();
   this.scaleToFit(this.element, this.elementArea);
   this.scaleToFit(this.previewElement, this.previewArea);
+  this.scaleToFit(this.helpElement, this.containerElement);
 };
 
 SlideshowView.prototype.scaleToFit = function (element, container) {

diff --git a/src/resources.js.template b/src/resources.js.template
@@ -2,5 +2,5 @@
 
 module.exports = {
   documentStyles: %DOCUMENT_STYLES%,
-  overlay: %OVERLAY%
+  help: %HELP%
 };