Create notes mode.

src/remark.less

@@ -121,3 +121,17 @@
   position: absolute;
   right: 20px;
 }
+
+.remark-notes {
+  background: #e7e8e2;
+  overflow: hidden;
+  position: absolute;
+  display: none;
+  -webkit-transform-origin: top left;
+  -moz-transform-origin: top left;
+  transform-origin: top-left;
+}
+.remark-notes-content {
+  display: table-cell;
+  padding: 1em 4em 1em 4em;
+}

src/remark/controller.js

@@ -62,6 +62,9 @@ function addKeyboardEventListeners (events) {
       case 'k':
         events.emit('gotoPreviousSlide');
         break;
+      case 'n':
+        events.emit('toggleNotes');
+        break;
       case '?':
         events.emit('toggleHelp');
         break;

src/remark/models/slide.js

@@ -4,7 +4,8 @@ function Slide (slideNo, slide, template) {
   var self = this;
 
   self.properties = slide.properties || {};
-  self.source = slide.source;
+  self.source = slide.source || '';
+  self.notes = slide.notes || '';
 
   self.getSlideNo = function () { return slideNo; };
 

src/remark/views/slideView.js

@@ -12,6 +12,7 @@ function SlideView (events, slideshow, slide) {
 
   this.element = createSlideElement();
   this.contentElement = createContentElement(events, slideshow, slide.source, slide.properties);
+  this.notesMarkup = createNotesMarkup(slideshow, slide.notes);
 
   this.element.appendChild(this.contentElement);
 }
@@ -91,6 +92,18 @@ function styleContentElement (slideshow, element, properties) {
   setBackgroundFromProperties(element, properties);
 }
 
+function createNotesMarkup (slideshow, notes) {
+  var element = document.createElement('div');
+  element.className = 'remark-notes-content';
+
+  element.innerHTML = converter.convertMarkdown(notes);
+  element.innerHTML = element.innerHTML.replace(/<p>\s*<\/p>/g, '');
+
+  highlightCodeBlocks(element, slideshow);
+
+  return element.outerHTML;
+}
+
 function setBackgroundFromProperties (element, properties) {
   var backgroundImage = properties['background-image'];
 

src/remark/views/slideshowView.js

@@ -17,6 +17,7 @@ function SlideshowView (events, containerElement, slideshow) {
   self.dimensions = {};
 
   self.configureContainerElement(containerElement);
+  self.configureNotesElement();
   self.configureSlideshowElement();
   self.configurePositionElement();
   self.configureOverlayView();
@@ -34,6 +35,17 @@ function SlideshowView (events, containerElement, slideshow) {
   events.on('showSlide', function (slideIndex) {
     self.showSlide(slideIndex);
   });
+
+  events.on('toggleNotes', function () {
+    self.notesVisible = !!!self.notesVisible;
+    if (self.notesVisible) {
+      self.notesElement.style.display = 'table';
+    }
+    else {
+      self.notesElement.style.display = 'none';
+    }
+    self.updateDimensions();
+  });
 }
 
 SlideshowView.prototype.isEmbedded = function () {
@@ -128,6 +140,14 @@ SlideshowView.prototype.configureOverlayView = function () {
   self.element.appendChild(self.overlayView.element);
 };
 
+SlideshowView.prototype.configureNotesElement = function () {
+  var self = this;
+
+  self.notesElement = document.createElement('div');
+  self.notesElement.className = 'remark-notes';
+  self.containerElement.appendChild(self.notesElement);
+};
+
 SlideshowView.prototype.updateSlideViews = function () {
   var self = this;
 
@@ -170,6 +190,7 @@ SlideshowView.prototype.showSlide =  function (slideIndex) {
   slideView.show();
   self.positionElement.innerHTML =
     slideIndex + 1 + ' / ' + self.slideViews.length;
+  self.notesElement.innerHTML = slideView.notesMarkup;
 };
 
 SlideshowView.prototype.hideSlide = function (slideIndex) {
@@ -193,6 +214,11 @@ SlideshowView.prototype.updateDimensions = function () {
   this.element.style.width = this.dimensions.width + 'px';
   this.element.style.height = this.dimensions.height + 'px';
 
+  if (this.notesVisible) {
+    this.notesElement.style.width = this.element.style.width;
+    this.notesElement.style.height = this.element.style.height;
+  }
+
   this.scaleSlideBackgroundImages();
   this.scaleToFitContainer();
 };
@@ -206,8 +232,22 @@ SlideshowView.prototype.scaleToFitContainer = function () {
     , scaledHeight
     , ratio = this.ratio
     , dimensions = this.dimensions
+    , direction
+    , left
+    , top
     ;
 
+  if (self.notesVisible) {
+    if (containerWidth / ratio.width > containerHeight / ratio.height) {
+      containerWidth /= 2;
+      direction = 'horizontal';
+    }
+    else {
+      containerHeight /= 2;
+      direction = 'vertical';
+    }
+  }
+
   if (containerWidth / ratio.width > containerHeight / ratio.height) {
     scale = containerHeight / dimensions.height;
   }
@@ -218,10 +258,27 @@ SlideshowView.prototype.scaleToFitContainer = function () {
   scaledWidth = dimensions.width * scale;
   scaledHeight = dimensions.height * scale;
 
+  left = (containerWidth - scaledWidth) / 2;
+  top = (containerHeight - scaledHeight) / 2;
+
   this.element.style['-webkit-transform'] = 'scale(' + scale + ')';
   this.element.style.MozTransform = 'scale(' + scale + ')';
-  this.element.style.left = (containerWidth - scaledWidth) / 2 + 'px';
-  this.element.style.top = (containerHeight - scaledHeight) / 2 + 'px';
+  this.element.style.left = left + 'px';
+  this.element.style.top = top + 'px';
+
+  if (self.notesVisible) {
+    this.notesElement.style['-webkit-transform'] = 'scale(' + scale + ')';
+    this.notesElement.style.MozTransform = 'scale(' + scale + ')';
+
+    if (direction === 'horizontal') {
+      this.notesElement.style.left = left * 3 + scaledWidth + 'px';
+      this.notesElement.style.top = top + 'px';
+    }
+    else {
+      this.notesElement.style.left = left + 'px';
+      this.notesElement.style.top = top * 3 + scaledHeight + 'px';
+    }
+  }
 };
 
 SlideshowView.prototype.getContainerHeight = function () {