Implement word wrapping and panning in multiline Braille.

chrome/browser/resources/chromeos/chromevox/cvox2/background/panel.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview The ChromeVox panel and menus.
  */
 
 goog.provide('Panel');
 
@@ skipping 464 matching lines @@
   var rows = parseInt(localStorage['virtualBrailleRows'], 10);
   var sideBySide = localStorage['brailleSideBySide'] === 'true';
 
   var addBorders = function(event) {
     var cell = event.target;
     if (cell.tagName == 'TD') {
       cell.className = 'highlighted-cell';
       var companionID = cell.getAttribute('companionID');
       var companion = $(companionID);
       companion.className = 'highlighted-cell';
+
+      // If the cell has companionID2, then highlight it
+      var companionID2 = cell.getAttribute('companionID2');

[dmazzoni, 2016/11/14 21:37:37]

Rather than two attributes, how about a single attribute companionIDs with a
list of ids, space-separated? Use split() and join() to make it easy.

[ultimatedbz, 2016/11/15 18:04:02]

That's a great idea! I also heard that attributes should have 'data-' in front
of them to make them html compliant, so that's what I'll do.

+      if (companionID2 != undefined) {
+        var companion2 = $(companionID2);
+        companion2.className = 'highlighted-cell';
+      }
     }
   };
 
   var removeBorders = function(event) {
     var cell = event.target;
     if (cell.tagName == 'TD') {
       cell.className = 'unhighlighted-cell';
       var companionID = cell.getAttribute('companionID');
       var companion = $(companionID);
       companion.className = 'unhighlighted-cell';
+
+      // If the cell has companionID2, then highlight it
+      var companionID2 = cell.getAttribute('companionID2');
+      if (companionID2 != undefined) {
+        var companion2 = $(companionID2);
+        companion2.className = 'unhighlighted-cell';
+      }
     }
   };
 
   this.brailleContainer_.addEventListener('mouseover', addBorders);
   this.brailleContainer_.addEventListener('mouseout', removeBorders);
 
   // Clear the tables.
   var rowCount = this.brailleTableElement_.rows.length;
   for (var i = 0; i < rowCount; i++) {
     this.brailleTableElement_.deleteRow(0);
   }
   rowCount = this.brailleTableElement2_.rows.length;
   for (var i = 0; i < rowCount; i++) {
     this.brailleTableElement2_.deleteRow(0);
   }
 
   var row1, row2;
   rowCount = 0;
+  var cellCount = cols;
   for (var i = 0; i < groups.length; i++) {
-    if (i % cols == 0) {
+    if (cellCount == cols) {
+      cellCount = 0;
       // Check if we reached the limit on the number of rows we can have.
       if (rowCount == rows)
         break;
       rowCount++;
       row1 = this.brailleTableElement_.insertRow(-1);
       if (sideBySide) {
         // Side by side.
         row2 = this.brailleTableElement2_.insertRow(-1);
       } else {
         // Interleaved.
         row2 = this.brailleTableElement_.insertRow(-1);
       }
     }
 
     var topCell = row1.insertCell(-1);
     topCell.innerHTML = groups[i][0];
     topCell.id = i + '-textCell';
     topCell.setAttribute('companionID', i + '-brailleCell');
     topCell.className = 'unhighlighted-cell';
 
     var bottomCell = row2.insertCell(-1);
-    bottomCell.innerHTML = groups[i][1];
     bottomCell.id = i + '-brailleCell';
     bottomCell.setAttribute('companionID', i + '-textCell');
     bottomCell.className = 'unhighlighted-cell';
+    if (cellCount + groups[i][1].length > cols) {
+      bottomCell.innerHTML = groups[i][1].substring(0, cols - cellCount);
+      if (rowCount == rows)
+        break;
+      rowCount++;
+      row1 = this.brailleTableElement_.insertRow(-1);
+      if (sideBySide) {
+        // Side by side.
+        row2 = this.brailleTableElement2_.insertRow(-1);
+      } else {
+        // Interleaved.
+        row2 = this.brailleTableElement_.insertRow(-1);
+      }
+      var bottomCell2 = row2.insertCell(-1);
+      bottomCell2.id = i + '-brailleCell2';
+      bottomCell2.setAttribute('companionID', i + '-textCell');
+      bottomCell2.setAttribute('companionID2', i + '-brailleCell');
+      bottomCell.setAttribute('companionID2', i + '-brailleCell2');
+      topCell.setAttribute('companionID2', i + '-brailleCell2');
+
+      bottomCell2.className = 'unhighlighted-cell';
+      bottomCell2.innerHTML = groups[i][1].substring(cols - cellCount);
+      cellCount = bottomCell2.innerHTML.length;
+    } else {
+      bottomCell.innerHTML = groups[i][1];
+      cellCount += groups[i][1].length;
+    }
   }
 };
 
 
 
 /**
  * Create a new node menu with the given name and add it to the menu bar.
  * @param {string} menuMsg The msg id of the new menu to add.
  * @param {!chrome.automation.AutomationNode} node
  * @param {AutomationPredicate.Unary} pred
@@ skipping 292 matching lines @@
 }, false);
 
 window.addEventListener('hashchange', function() {
   if (location.hash == '#fullscreen' || location.hash == '#focus') {
     this.originalStickyState_ = cvox.ChromeVox.isStickyPrefOn;
     cvox.ChromeVox.isStickyPrefOn = false;
   } else {
     cvox.ChromeVox.isStickyPrefOn = this.originalStickyState_;
   }
 }, false);