encode sheet names to dom-compliant name

 * Sheet names can contain characters that are not allowed in DOM
   ids. Instead of replacing the invalid characters with underscores,
   instead base-64 encode the string, then trim any trailing equal
   signs from it.  Trimming is allowed because there is no need to
   convert back to the original name.

Author: felliott

mfr/extensions/tabular/templates/viewer.mako

@@ -33,11 +33,12 @@
 
         for (var sheetName in sheets){
             var sheet = sheets[sheetName];
-            sheetName = sheetName.replace( /(:|\.|\[|\]|,|@|&|\ |'|"|%|\;)/g, '_' ); //Handle characters that can't be in DOM ID's
-            $("#tabular-tabs").append('<li role="presentation" style="display:inline-block; float: none;"><a id="' + sheetName + '" aria-controls="' + sheetName + '" role="tab" data-toggle="tab">'+ sheetName + '</a></li>');
-            gridArr[sheetName] = [sheet[0], sheet[1]];
+            // Handle characters that can't be in DOM ID's
+            var sheetCoded = window.btoa(encodeURIComponent(sheetName)).replace(/=/g, '');
+            $("#tabular-tabs").append('<li role="presentation" style="display:inline-block; float: none;"><a id="' + sheetCoded + '" aria-controls="' + sheetCoded + '" role="tab" data-toggle="tab">'+ sheetName + '</a></li>');
+            gridArr[sheetCoded] = [sheet[0], sheet[1]];
 
-            $('#'+sheetName).click(function (e) {
+            $('#'+sheetCoded).click(function (e) {
                 e.preventDefault();
                 var columns = gridArr[$(this).attr('id')][0];
                 var rows = gridArr[$(this).attr('id')][1];