Ensure that lines are focused based on the current…

…fragment when slides are changed.

This removes code that previously incorrectly manipulated fragments when
navigating to a prior slide.

Closes #20, #21.

reveal-code-focus.js

@@ -8,7 +8,7 @@
     return;
   }
 
-  var currentSlide, currentFragmentsList, prevSlideData = null;
+  var currentSlide, currentFragmentsList;
 
   // Iterates through `array`, running `callback` for each `array` element.
   function forEach(array, callback) {
@@ -124,29 +124,17 @@
 
     clearPreviousFocus();
 
-    // If moving back to a previous slide…
-    if (
-      currentFragmentsList.length &&
-      prevSlideData &&
-      (
-        prevSlideData.indexh > e.indexh ||
-        (prevSlideData.indexh == e.indexh && prevSlideData.indexv > e.indexv)
-      )
-    ) {
-      // …return to the last fragment and highlight the code.
-      while (Reveal.nextFragment()) {}
-      var currentFragment = currentFragmentsList[currentFragmentsList.length - 1];
-      forEach(currentFragment, function(currentFragment) {
-        currentFragment.classList.add('current-fragment');
+    // When a slide changes, use `setTimeout` to detect the visible fragment and highlight
+    // lines only on the next event loop. This is due to the 'slidechanged' event being
+    // emitted before the 'current-fragment' class is applied to visible fragments.
+    // See: https://github.com/hakimel/reveal.js/issues/2439.
+    setTimeout(function() {
+      forEach(currentFragmentsList, function(fragments) {
+        if (fragments[0].classList.contains('current-fragment')) {
+          focusFragments(fragments);
+        }
       });
-      focusFragments(currentFragment);
-    }
-
-    // Update previous slide information.
-    prevSlideData = {
-      'indexh': e.indexh,
-      'indexv': e.indexv
-    };
+    }, 1);
   }
 
   // Obtain an object mapping the code block number to the lines to focus on within that code block.

tests/index.html

@@ -74,6 +74,16 @@
           <span class="fragment" data-code-focus="1-2" data-fragment-index="2">1-2</span>
           <span class="fragment" data-code-focus="2#3" data-fragment-index="2">2#3</span>
         </section>
+
+        <!-- Slide navigation tests -->
+        <section id="slide-navigation-1">
+          <pre><code>// abc</code></pre>
+          <span class="fragment" data-code-focus="1">1</span>
+        </section>
+        <section id="slide-navigation-2">
+          <pre><code>// abc</code></pre>
+          <span class="fragment" data-code-focus="1">1</span>
+        </section>
       </div>
     </div>
 

tests/tests.js

@@ -120,6 +120,67 @@ Reveal.addEventListener('ready', function() {
     );
   });
 
+  QUnit.test('Slide navigation', function(assert) {
+    var done = assert.async();
+    var currentSlide, lines;
+
+    Reveal.slide(5);
+    currentSlide = Reveal.getCurrentSlide();
+    assert.strictEqual(currentSlide.id, 'slide-navigation-1', 'Slide 1 loaded');
+
+    lines = currentSlide.querySelectorAll('pre code .line');
+
+    assert.strictEqual(lines.length, 1, 'All lines are initialised');
+    assert.strictEqual(currentSlide.querySelectorAll('pre code .line.focus').length, 0, 'No lines are focused');
+
+    Reveal.nextFragment();
+    assert.strictEqual(currentSlide.querySelectorAll('pre code .line.focus').length, 1, '1 line is focused');
+    assert.deepEqual(
+      [].slice.call(currentSlide.querySelectorAll('pre code .line.focus')),
+      [].slice.call(lines),
+      '1st line is focused'
+    );
+
+    Reveal.slide(6);
+    currentSlide = Reveal.getCurrentSlide();
+    assert.strictEqual(currentSlide.id, 'slide-navigation-2', 'Slide 2 loaded');
+
+    lines = currentSlide.querySelectorAll('pre code .line');
+
+    assert.strictEqual(lines.length, 1, 'All lines are initialised');
+    assert.strictEqual(currentSlide.querySelectorAll('pre code .line.focus').length, 0, 'No lines are focused');
+
+    Reveal.nextFragment();
+    assert.strictEqual(currentSlide.querySelectorAll('pre code .line.focus').length, 1, '1 line is focused');
+    assert.deepEqual(
+      [].slice.call(currentSlide.querySelectorAll('pre code .line.focus')),
+      [].slice.call(lines),
+      '1st line is focused'
+    );
+
+    Reveal.prev();
+    assert.strictEqual(currentSlide.querySelectorAll('.fragment.current-fragment').length, 0, 'No fragments are active');
+    assert.strictEqual(currentSlide.querySelectorAll('pre code .line.focus').length, 0, 'No lines are focused');
+
+    Reveal.prev();
+    currentSlide = Reveal.getCurrentSlide();
+    assert.strictEqual(currentSlide.id, 'slide-navigation-1', 'Slide 1 loaded');
+
+    lines = currentSlide.querySelectorAll('pre code .line');
+
+    assert.strictEqual(currentSlide.querySelectorAll('.fragment.current-fragment').length, 1, '1 fragment is active');
+    // Run asynchronously.
+    setTimeout(function() {
+      assert.strictEqual(currentSlide.querySelectorAll('pre code .line.focus').length, 1, '1 line is focused');
+      assert.deepEqual(
+        [].slice.call(currentSlide.querySelectorAll('pre code .line.focus')),
+        [].slice.call(lines),
+        'Focus is sustained even when slide has changed and returned to original slide'
+      );
+
+      done();
+    }, 1);
+  });
 });
 
 Reveal.initialize({