Highlight columns in Channel Comparizon for quick grammar checking

Author: TheoChevalier

app/controllers/channelcomparison.php

@@ -1,5 +1,8 @@
 <?php
 require_once INC . 'l10n-init.php';
 
+// Include JS lib after $javascript_include gets reset in l10n-init.php.
+$javascript_include = ['/js/select_column.js'];
+
 include MODELS . 'channelcomparison.php';
 include VIEWS . 'channelcomparison.php';

app/views/channelcomparison.php

@@ -4,7 +4,7 @@
 // Helper anonymous variable to output a formatted table cell
 $td = function ($key, $value) {
     return "<td><span class=\"celltitle\">{$key}</span>"
-           . "<div class=²\"string\">{$value}</div></td>";
+           . "<div class=\"string\">{$value}</div></td>";
 };
 
 ?>
@@ -37,15 +37,13 @@
 <p class='subtitle'>There are no string differences for this locale between the <?=$repos_nice_names[$chan1]?> and <?=$repos_nice_names[$chan2]?> channels.</p>
 
 <?php else: ?>
-<table class='collapsable'>
+<h3>Locale: <?=$locale?></h3>
+<table class='collapsable' id='modified_strings_table'>
     <thead>
-        <tr class='column_headers'>
-            <th colspan='3'>Locale: <?=$locale?></th>
-        </tr>
         <tr class='column_headers'>
             <th>Key</th>
-            <th><?=$chan1?></th>
-            <th><?=$chan2?></th>
+            <th class='select_header'><?=$chan1?><span>Select column</span></th>
+            <th class='select_header'><?=$chan2?><span>Select column</span></th>
         </tr>
     </thead>
     <tbody>
@@ -65,12 +63,12 @@
 
 <?php else : ?>
 <h3 id="new_strings">New strings added in <em><?=$locale?></em> between <?=$repos_nice_names[$chan1]?> and <?=$repos_nice_names[$chan2]?></h3>
-<table class="collapsable">
+<table class='collapsable' id='new_strings_table'>
     <thead>
         <tr class='column_headers'>
             <th>Entity</th>
-            <th>en-US</th>
-            <th><?=$locale?></th>
+            <th class='select_header'>en-US<span>Select column</span></th>
+            <th class='select_header'><?=$locale?><span>Select column</span></th>
         </tr>
     </thead>
     <tbody>

web/js/select_column.js

@@ -0,0 +1,32 @@
+function selectColumn(index, tableID) {
+    var columnSelector = '#' + tableID + ' tbody > tr > td:nth-child(' + (index + 1) + ')';
+    var cells = $(columnSelector);
+
+    // Clear existing selections
+    if (window.getSelection) { // all browsers, except IE before version 9
+        window.getSelection().removeAllRanges();
+    }
+
+    if (document.createRange) {
+        cells.each(function(i, cell) {
+            var rangeObj = document.createRange();
+            rangeObj.selectNodeContents(cell);
+            window.getSelection().addRange(rangeObj);
+        });
+
+    } else { // Internet Explorer before version 9
+        cells.each(function(i, cell) {
+            var rangeObj = document.body.createTextRange();
+            rangeObj.moveToElementText(cell);
+            rangeObj.select();
+        });
+    }
+}
+
+$(document).ready(function() {
+    $('.select_header').click(function() {
+        var columnNumber = $(this).index();
+        var tableID = $(this).closest('table').attr('id');
+        selectColumn(columnNumber, tableID);
+    });
+});

web/style/transvision.css

@@ -296,6 +296,23 @@ th {
     padding: 0.5em;
 }
 
+th.select_header {
+    position: relative;
+}
+
+th.select_header span {
+    position: absolute;
+    color: #fff;
+    background-color: #1c75bc;
+    right: 5px;
+    top: 8px;
+    font-weight: normal;
+    font-size: 11px;
+    padding: 2px 5px;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
 td {
     padding: 0.5em;
     border: 1px solid rgba(0, 0, 0, 0.05);