Toggle mirrored mode

bizmedia · Dec 1, 2014 · 0d43ae5 · 0d43ae5
1 parent ba1a544
commit 0d43ae5
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 10 deletions.
diff --git a/boilerplate-single.html b/boilerplate-single.html
diff --git a/src/remark.html b/src/remark.html
@@ -63,15 +63,11 @@ <h1>Help</h1>
       </tr>
       <tr>
         <td>
-          <span class="key">b</span>
-        </td>
-        <td>Toggle blackout mode</td>
-      </tr>
-      <tr>
-        <td>
+          <span class="key">b</span>&nbsp;/
+          <span class="key">m</span>&nbsp;/
           <span class="key">f</span>
         </td>
-        <td>Toggle fullscreen mode</td>
+        <td>Toggle blackout / mirrored / fullscreen mode</td>
       </tr>
       <tr>
         <td>

diff --git a/src/remark.less b/src/remark.less
@@ -429,6 +429,19 @@ html.remark-container, body.remark-container {
   }
 }
 
+/************/
+/* Mirrored */
+/************/
+
+.remark-container.remark-mirrored-mode:not(.remark-presenter-mode) {
+  .remark-slides-area {
+    -webkit-transform: scaleX(-1);
+    -moz-transform: scaleX(-1);
+    -ms-transform: scaleX(-1);
+    -o-transform: scaleX(-1);
+  }
+}
+
 /************/
 /* Printing */
 /************/

diff --git a/src/remark/controllers/inputs/keyboard.js b/src/remark/controllers/inputs/keyboard.js
@@ -53,6 +53,9 @@ function addKeyboardEventListeners (events) {
       case 'b':
         events.emit('toggleBlackout');
         break;
+      case 'm':
+        events.emit('toggleMirrored');
+        break;
       case 'c':
         events.emit('createClone');
         break;

diff --git a/src/remark/models/slideshow.js b/src/remark/models/slideshow.js
@@ -30,6 +30,7 @@ function Slideshow (events, options) {
   self.togglePresenterMode = togglePresenterMode;
   self.toggleHelp = toggleHelp;
   self.toggleBlackout = toggleBlackout;
+  self.toggleMirrored = toggleMirrored;
   self.toggleFullscreen = toggleFullscreen;
   self.createClone = createClone;
 
@@ -98,6 +99,10 @@ function Slideshow (events, options) {
     events.emit('toggleBlackout');
   }
 
+  function toggleMirrored() {
+    events.emit('toggleMirrored');
+  }
+
   function toggleFullscreen () {
     events.emit('toggleFullscreen');
   }

diff --git a/src/remark/resources.js b/src/remark/resources.js
diff --git a/src/remark/views/slideshowView.js b/src/remark/views/slideshowView.js
@@ -65,6 +65,10 @@ function SlideshowView (events, dom, containerElement, slideshow) {
     utils.toggleClass(self.containerElement, 'remark-blackout-mode');
   });
 
+  events.on('toggleMirrored', function () {
+    utils.toggleClass(self.containerElement, 'remark-mirrored-mode');
+  });
+
   events.on('hideOverlay', function () {
     utils.removeClass(self.containerElement, 'remark-blackout-mode');
     utils.removeClass(self.containerElement, 'remark-help-mode');

diff --git a/test/remark/controllers/defaultController_test.js b/test/remark/controllers/defaultController_test.js
@@ -107,6 +107,11 @@ describe('Controller', function () {
       events.emit.should.be.calledWithExactly('toggleBlackout');
     });
 
+    it('should toggle mirrored mode when pressing "m"', function () {
+      events.emit('keypress', {which: 109});
+      events.emit.should.be.calledWithExactly('toggleMirrored');
+    });
+
     beforeEach(function () {
       createController();
     });

diff --git a/test/remark/views/slideshowView_test.js b/test/remark/views/slideshowView_test.js
@@ -225,6 +225,20 @@ describe('SlideshowView', function () {
 
       utils.hasClass(containerElement, 'remark-blackout-mode').should.equal(false);
     });
+
+    it('should toggle mirrored on event', function () {
+      events.emit('toggleMirrored');
+
+      utils.hasClass(containerElement, 'remark-mirrored-mode').should.equal(true);
+    });
+
+    it('should leave toggle mirrored on event', function () {
+      utils.addClass(containerElement, 'remark-mirrored-mode');
+      events.emit('toggleMirrored');
+
+      utils.hasClass(containerElement, 'remark-mirrored-mode').should.equal(false);
+    });
+
   });
 
   function triggerEvent(element, eventName) {