Extract slide number into component.

src/remark/components/slide-number/slide-number.js

@@ -0,0 +1,27 @@
+module.exports = SlideNumberViewModel;
+
+function SlideNumberViewModel (slide, slideshow) {
+  var self = this;
+
+  self.slide = slide;
+  self.slideshow = slideshow;
+
+  self.element = document.createElement('div');
+  self.element.className = 'remark-slide-number';
+  self.element.innerHTML = formatSlideNumber(self.slide, self.slideshow);
+}
+
+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);
+}

src/remark/views/slideView.js

@@ -1,4 +1,5 @@
-var converter = require('../converter')
+var SlideNumber = require('components/slide-number')
+  , converter = require('../converter')
   , highlighter = require('../highlighter')
   , utils = require('../utils')
   ;
@@ -13,6 +14,8 @@ function SlideView (events, slideshow, scaler, slide) {
   self.scaler = scaler;
   self.slide = slide;
 
+  self.slideNumber = new SlideNumber(slide, slideshow);
+
   self.configureElements();
   self.updateDimensions();
 
@@ -70,32 +73,13 @@ SlideView.prototype.configureElements = function () {
   self.contentElement = createContentElement(self.events, self.slideshow, self.slide);
   self.notesElement = createNotesElement(self.slideshow, self.slide.notes);
 
-  self.numberElement = document.createElement('div');
-  self.numberElement.className = 'remark-slide-number';
-  self.numberElement.innerHTML = formatSlideNumber(self.slide, self.slideshow);
-
-  self.contentElement.appendChild(self.numberElement);
+  self.contentElement.appendChild(self.slideNumber.element);
   self.element.appendChild(self.contentElement);
   self.element.appendChild(self.notesElement);
   self.scalingElement.appendChild(self.element);
   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)

test/remark/components/slide-number_test.js

@@ -0,0 +1,19 @@
+var SlideNumber = require('components/slide-number');
+
+describe('Slide number', function () {
+  var slideNumber;
+
+  it('should display according to format', function () {
+    var slide = { number: 2 }
+      , slideshow = {
+          getSlideNumberFormat: function () {
+            return '%current% / %total%';
+          }
+        , getSlides: function () { return [1,2,3]; }
+      };
+
+    slideNumber = new SlideNumber(slide, slideshow);
+
+    slideNumber.element.innerHTML.should.equal('2 / 3');
+  });
+});

test/remark/views/slideView_test.js

@@ -118,15 +118,4 @@ 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');
-    });
-  });
 });