Make slide number format configurable (gnab#130).

bizmedia · Jun 29, 2014 · c4661aa · c4661aa
1 parent 778d49f
commit c4661aa
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/src/remark/models/slideshow.js b/src/remark/models/slideshow.js
@@ -37,6 +37,7 @@ function Slideshow (events, options) {
   self.getRatio = getOrDefault('ratio', '4:3');
   self.getHighlightStyle = getOrDefault('highlightStyle', 'default');
   self.getHighlightLanguage = getOrDefault('highlightLanguage', '');
+  self.getSlideNumberFormat = getOrDefault('slideNumberFormat', '%current% / %total%');
 
   loadFromString(options.source);
 

diff --git a/src/remark/views/slideView.js b/src/remark/views/slideView.js
@@ -72,7 +72,7 @@ SlideView.prototype.configureElements = function () {
 
   self.numberElement = document.createElement('div');
   self.numberElement.className = 'remark-slide-number';
-  self.numberElement.innerHTML = self.slide.number + ' / ' + self.slideshow.getSlides().length;
+  self.numberElement.innerHTML = formatSlideNumber(self.slide, self.slideshow);
 
   self.contentElement.appendChild(self.numberElement);
   self.element.appendChild(self.contentElement);
@@ -81,6 +81,21 @@ SlideView.prototype.configureElements = function () {
   self.containerElement.appendChild(self.scalingElement);
 };
 
+function formatSlideNumber (slide, slideshow) {
+  var format = slideshow.getSlideNumberFormat()
+    , current = slide.number
+    , total = slideshow.getSlides().length
+    ;
+
+  if (typeof format === 'function') {
+    return format(current, total);
+  }
+
+  return format
+      .replace('%current%', current)
+      .replace('%total%', total);
+}
+
 SlideView.prototype.scaleBackgroundImage = function (dimensions) {
   var self = this
     , styles = window.getComputedStyle(this.contentElement)

diff --git a/test/remark/views/slideView_test.js b/test/remark/views/slideView_test.js
@@ -10,6 +10,7 @@ describe('SlideView', function () {
       , getSlides: function () { return []; }
       , getLinks: function () { return {}; }
       , getHighlightLanguage: function () { }
+      , getSlideNumberFormat: function () { return '%current% / %total%'; }
       }
     , scaler = {
         dimensions: {width: 10, height: 10}
@@ -117,4 +118,15 @@ describe('SlideView', function () {
       lines[0].innerHTML.should.equal('  line 2');
     });
   });
+
+  describe('slide numbering', function () {
+    it('should display according to format', function () {
+      var slide = new Slide(1, { content: [] })
+        , slideView = new SlideView(new EventEmitter(), slideshow, scaler, slide)
+      ;
+
+      slideshow.getSlideNumberFormat = function () { return '%current% / %total%'; };
+      slideView.numberElement.innerHTML.should.equal('1 / 0');
+    });
+  });
 });