Changeset 205


Ignore:
Timestamp:
09/25/13 22:35:25 (6 years ago)
Author:
nhoyt
Message:

Refactored view-category.js to facilitate reuse: created the generalized sortTree function for sorting trees with custom tree views (non-hierarchical), which is now in new file tree-sort.js. The sortTree function takes two args (the last one optional): properties and column. The properties object contains ten properties that specify the tree, data table, sort order, sort columns, etc. The function also handles updating the state of an associated defaultSortButton, if specified, and updating other parts of the UI if an updateCallback is specified.

In ainspectorSidebar namespace:

  • Renamed function sortRulesTable to sortRuleResults
  • Renamed array rulesTable to ruleResultsTable
  • Renamed function getRulesData to getRuleResultsTable
  • Renamed function defaultSort to defaultSortRuleResults
  • Renamed id ainspector-button-default-sort to ainspector-rc-default-sort
Location:
trunk/proto-14/chrome/content
Files:
1 added
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/proto-14/chrome/content/ai-sidebar.js

    r194 r205  
    277277      break; 
    278278    default: 
    279       ainspectorSidebar.rulesTable = ainspectorSidebar.getRulesData(); 
    280       ainspectorSidebar.sortRulesTable(); 
     279      ainspectorSidebar.ruleResultsTable = ainspectorSidebar.getRuleResultsTable(); 
     280      ainspectorSidebar.sortRuleResults(); 
    281281      ainspectorSidebar.setCategoryView(); 
    282282      break; 
  • trunk/proto-14/chrome/content/tree-view.js

    r188 r205  
    11/** 
    2 * @constructor TreeView 
    3 * 
    4 * @desc Define TreeView object with minimal implementations of all shareable 
    5 *       methods required by the XPCOM interface nsITreeView. This object can 
    6 *       then be used via prototype-based inheritance by other tree-specific 
    7 *       objects, which define non-shareable methods such as getCellText and 
    8 *       getCellProperties. 
    9 * 
    10 *       Prototype-based inheritance can be implemented using this pattern: 
    11 * 
    12 *       1. var AnotherTreeView = function (args) { 
    13 *                                  // call TreeView constructor 
    14 *                                  TreeView.call(this, args); 
    15 *                                  // define non-shareable methods 
    16 *                                }; 
    17 *       2. AnotherTreeView.prototype = Object.create(TreeView.prototype); 
    18 *       3. AnotherTreeView.prototype.constructor = AnotherTreeView; 
    19 * 
    20 * @param table - Array of table row data objects 
    21 */ 
     2 * @constructor TreeView 
     3 * 
     4 * @desc Define TreeView object with minimal implementations of all shareable 
     5 *       methods required by the XPCOM interface nsITreeView. This object can 
     6 *       then be used via prototype-based inheritance by other tree-specific 
     7 *       objects, which define non-shareable methods such as getCellText and 
     8 *       getCellProperties. 
     9 * 
     10 *       Prototype-based inheritance can be implemented using this pattern: 
     11 * 
     12 *       1. var AnotherTreeView = function (args) { 
     13 *                                  // call TreeView constructor 
     14 *                                  TreeView.call(this, args); 
     15 *                                  // define non-shareable methods 
     16 *                                }; 
     17 *       2. AnotherTreeView.prototype = Object.create(TreeView.prototype); 
     18 *       3. AnotherTreeView.prototype.constructor = AnotherTreeView; 
     19 * 
     20 * @param table - Array of table row data objects 
     21 */ 
    2222 
    2323var TreeView = function (table) { 
  • trunk/proto-14/chrome/content/view-category.js

    r204 r205  
    11/** 
    2 * @file view-category.js 
    3 * 
    4 * @desc Define properties and methods for display of rule category information. 
    5 */ 
     2 * @file view-category.js 
     3 * 
     4 * @desc Define properties and methods for display of rule category information. 
     5 */ 
    66 
    77Components.utils.import("chrome://ai-sidebar/content/ai-common.js"); 
    88 
    99/** 
    10 * @namespace ainspectorSidebar 
    11 */ 
     10 * @namespace ainspectorSidebar 
     11 */ 
    1212var ainspectorSidebar = ainspectorSidebar || {}; 
    1313 
     
    1717  .loadSubScript("chrome://ai-sidebar/content/tree-view.js", ainspectorSidebar); 
    1818 
     19// Load the sortTree function 
     20Components.classes["@mozilla.org/moz/jssubscript-loader;1"] 
     21  .getService(Components.interfaces.mozIJSSubScriptLoader) 
     22  .loadSubScript("chrome://ai-sidebar/content/tree-sort.js", ainspectorSidebar); 
     23 
    1924// Load the DOM functions 
    2025Components.classes["@mozilla.org/moz/jssubscript-loader;1"] 
    2126  .getService(Components.interfaces.mozIJSSubScriptLoader) 
    2227  .loadSubScript("chrome://ai-sidebar/content/utilities/dom.js", ainspectorSidebar); 
     28 
     29/** 
     30 * @object ruleResultConst 
     31 * 
     32 * @desc Store constants for Rule Results table sorting. 
     33 */ 
    2334 
    2435ainspectorSidebar.ruleResultConst = { 
     
    3142 
    3243/** 
    33 * @function getRuleResultStrings 
    34 * 
    35 * @memberOf ainspectorSidebar 
    36 * 
    37 * @desc  
    38 */ 
     44 * @function sortRuleResults 
     45 * 
     46 * @memberOf ainspectorSidebar 
     47 * 
     48 * @desc Sort the Rule Results table based on specified properties. 
     49 */ 
     50 
     51ainspectorSidebar.sortRuleResults = function (column) { 
     52  var props = { 
     53    tree: document.getElementById("ainspector-rule-category-tree"), 
     54    table: ainspectorSidebar.ruleResultsTable, 
     55    defaultOrder:  ainspectorSidebar.ruleResultConst.DEFAULT_ORDER, 
     56    defaultColumn: ainspectorSidebar.ruleResultConst.DEFAULT_COLUMN, 
     57    sortColumn2:   ainspectorSidebar.ruleResultConst.SORT_COL_2, 
     58    sortColumn3:   ainspectorSidebar.ruleResultConst.SORT_COL_3, 
     59    sortColumn4:   ainspectorSidebar.ruleResultConst.SORT_COL_4, 
     60    defaultSortButton: document.getElementById("ainspector-rc-default-sort"), 
     61    viewConstructor: ainspectorSidebar.TreeViewCategory, // called with table arg 
     62    updateCallback: ainspectorSidebar.updateSelectedRuleInfo // called with tree arg 
     63  }; 
     64 
     65  ainspectorSidebar.sortTree(props, column); 
     66}; 
     67 
     68/** 
     69 * @function defaultSortRuleResults 
     70 * 
     71 * @memberOf ainspectorSidebar 
     72 * 
     73 * @desc Set default sort values for Rule Results tree and call its sort function. 
     74 */ 
     75 
     76ainspectorSidebar.defaultSortRuleResults = function () { 
     77  var tree = document.getElementById("ainspector-rule-category-tree"); 
     78  tree.setAttribute("sortDirection", ainspectorSidebar.ruleResultConst.DEFAULT_ORDER); 
     79  tree.setAttribute("sortResource", ainspectorSidebar.ruleResultConst.DEFAULT_COLUMN); 
     80  ainspectorSidebar.sortRuleResults(); 
     81}; 
     82 
     83/** 
     84 * @function getRuleResultStrings 
     85 * 
     86 * @memberOf ainspectorSidebar 
     87 * 
     88 * @desc  
     89 */ 
    3990 
    4091ainspectorSidebar.getRuleResultStrings = function () { 
     
    55106 
    56107/** 
    57 * @function getRulesData 
    58 * 
    59 * @memberOf ainspectorSidebar 
    60 * 
    61 * @desc  
    62 */ 
    63  
    64 ainspectorSidebar.getRulesData = function () { 
     108 * @function getRuleResultsTable 
     109 * 
     110 * @memberOf ainspectorSidebar 
     111 * 
     112 * @desc  
     113 */ 
     114 
     115ainspectorSidebar.getRuleResultsTable = function () { 
    65116  var filteredRuleResults = ainspectorSidebar.ruleGroupResults[parent.AINSPECTOR.currentView].filtered_rule_results; 
    66117  var resultsCount = filteredRuleResults.length; 
     
    83134 
    84135/** 
    85 * @constructor TreeViewCategory 
    86 * 
    87 * @memberOf ainspectorSidebar 
    88 * 
    89 * @augments TreeView (using prototype-based inheritance via the inherits fn.) 
    90 * 
    91 * @desc Define methods getCellText and getCellProperties. Inherit all other 
    92 *       methods and properties from the TreeView object. 
    93 * 
    94 * @param table - Array of table row data objects 
    95 */ 
     136 * @constructor TreeViewCategory 
     137 * 
     138 * @memberOf ainspectorSidebar 
     139 * 
     140 * @augments TreeView (using prototype-based inheritance via the inherits fn.) 
     141 * 
     142 * @desc Define methods getCellText and getCellProperties. Inherit all other 
     143 *       methods and properties from the TreeView object. 
     144 * 
     145 * @param table - Array of table row data objects 
     146 */ 
    96147 
    97148ainspectorSidebar.TreeViewCategory = function (table) { 
     
    158209      case "ainspector-required-col": 
    159210      case "ainspector-wcag-sc-col": 
    160         props.AppendElement(atomService.getAtom("inner")); 
     211        if (props) 
     212          props.AppendElement(atomService.getAtom("inner")); 
     213        else 
     214          return "inner"; 
    161215        break; 
    162216    } 
     217    return ''; 
    163218  }; 
    164219}; 
     
    168223 
    169224/** 
    170 * @function sortRulesTable 
    171 * 
    172 * @memberOf ainspectorSidebar 
    173 * 
    174 * @desc  
    175 */ 
    176  
    177 ainspectorSidebar.sortRulesTable = function (column) { 
    178   var columnName; 
    179   var tree = document.getElementById("ainspector-rule-category-tree"); 
    180   var order = tree.getAttribute("sortDirection") == "ascending" ? 1 : -1; 
    181  
    182   // If the column is passed and it's already sorted by that column, reverse sort. 
    183   if (column) { 
    184     columnName = column.id; 
    185     if (tree.getAttribute("sortResource") == columnName) { 
    186       order *= -1; 
    187     } 
    188   } 
    189   else { 
    190     columnName = tree.getAttribute("sortResource"); 
    191   } 
    192  
    193   function normalize(o) { 
    194     if (typeof o == "string") { 
    195       return o.toLowerCase(); 
    196     } 
    197     return o; 
    198   } 
    199  
    200   function columnSort(a, b) { 
    201     if (normalize(a[columnName]) > normalize(b[columnName])) return 1 * order; 
    202     if (normalize(a[columnName]) < normalize(b[columnName])) return -1 * order; 
    203  
    204     //tie breakers: specify columns for second, third and fourth level sort 
    205     var nextLevel = ainspectorSidebar.ruleResultConst.SORT_COL_2; 
    206     if (columnName != nextLevel) { 
    207       if (normalize(a[nextLevel]) > normalize(b[nextLevel])) return 1 * order; 
    208       if (normalize(a[nextLevel]) < normalize(b[nextLevel])) return -1 * order; 
    209     } 
    210  
    211     nextLevel = ainspectorSidebar.ruleResultConst.SORT_COL_3; 
    212     if (columnName != nextLevel) { 
    213       if (normalize(a[nextLevel]) > normalize(b[nextLevel])) return 1 * order; 
    214       if (normalize(a[nextLevel]) < normalize(b[nextLevel])) return -1 * order; 
    215     } 
    216  
    217     nextLevel = ainspectorSidebar.ruleResultConst.SORT_COL_4; 
    218     if (columnName != nextLevel) { 
    219       if (normalize(a[nextLevel]) > normalize(b[nextLevel])) return 1 * order; 
    220       if (normalize(a[nextLevel]) < normalize(b[nextLevel])) return -1 * order; 
    221     } 
    222  
    223     return 0; 
    224   } 
    225   ainspectorSidebar.rulesTable.sort(columnSort); 
    226  
    227   // Setting these will make the sort option persist. 
    228   tree.setAttribute("sortDirection", order == 1 ? "ascending" : "descending"); 
    229   tree.setAttribute("sortResource", columnName); 
    230   tree.view = new ainspectorSidebar.TreeViewCategory(ainspectorSidebar.rulesTable); 
    231  
    232   // Set the appropriate attributes to show indicator. 
    233   var cols = tree.getElementsByTagName("treecol"); 
    234   for (var i = 0; i < cols.length; i++) { 
    235     cols[i].removeAttribute("sortDirection"); 
    236   } 
    237   document.getElementById(columnName).setAttribute("sortDirection", order == 1 ? "ascending" : "descending"); 
    238  
    239   // Set the state of Default Sort button. 
    240   var sortDirection = tree.getAttribute("sortDirection"); 
    241   var sortResource = tree.getAttribute("sortResource"); 
    242   var defaultSortButton = document.getElementById("ainspector-button-default-sort"); 
    243  
    244   defaultSortButton.disabled = 
    245     (sortDirection === ainspectorSidebar.ruleResultConst.DEFAULT_ORDER) && 
    246     (sortResource === ainspectorSidebar.ruleResultConst.DEFAULT_COLUMN); 
    247  
    248   // Update tree selection state. 
    249   ainspectorSidebar.updateSelectedRuleInfo(tree); 
    250 }; 
    251  
    252 /** 
    253 * @function defaultSort 
    254 * 
    255 * @memberOf ainspectorSidebar 
    256 * 
    257 * @desc  
    258 */ 
    259  
    260 ainspectorSidebar.defaultSort = function () { 
    261   var tree = document.getElementById("ainspector-rule-category-tree"); 
    262   tree.setAttribute("sortDirection", ainspectorSidebar.ruleResultConst.DEFAULT_ORDER); 
    263   tree.setAttribute("sortResource", ainspectorSidebar.ruleResultConst.DEFAULT_COLUMN); 
    264   ainspectorSidebar.sortRulesTable(); 
    265 }; 
    266  
    267 /** 
    268 * @function setCategoryView 
    269 * 
    270 * @memberOf ainspectorSidebar 
    271 * 
    272 * @desc  
    273 */ 
     225 * @function setCategoryView 
     226 * 
     227 * @memberOf ainspectorSidebar 
     228 * 
     229 * @desc Update the category view summary grid and rule results 
     230 *       and then call the updateSelectedRuleInfo function. 
     231 */ 
    274232 
    275233ainspectorSidebar.setCategoryView = function () { 
     
    284242 
    285243  // update rule results tree 
    286   tree.view = new ainspectorSidebar.TreeViewCategory(ainspectorSidebar.rulesTable); 
     244  tree.view = new ainspectorSidebar.TreeViewCategory(ainspectorSidebar.ruleResultsTable); 
    287245 
    288246  // update selected rule textbox 
     
    291249 
    292250/** 
    293 * @function clearCategoryView 
    294 * 
    295 * @memberOf ainspectorSidebar 
    296 * 
    297 * @desc  
    298 */ 
     251 * @function clearCategoryView 
     252 * 
     253 * @memberOf ainspectorSidebar 
     254 * 
     255 * @desc Clear all rows of the Rule Results table and then 
     256 *       call the updateSelectedRuleInfo function. 
     257 */ 
    299258 
    300259ainspectorSidebar.clearCategoryView = function () { 
     
    313272 
    314273/** 
    315 * @function updateSelectedRuleInfo 
    316 * 
    317 * @memberOf ainspectorSidebar 
    318 * 
    319 * @desc  
    320 */ 
     274 * @function updateSelectedRuleInfo 
     275 * 
     276 * @memberOf ainspectorSidebar 
     277 * 
     278 * @desc Populate the Selected Rule vbox based on the 
     279 *       selected row in the Rule Results table. 
     280 */ 
    321281 
    322282ainspectorSidebar.updateSelectedRuleInfo = function (tree) { 
     
    344304    addHTML(vbox, h2); 
    345305 
    346     p = getHTML("p", ainspectorSidebar.rulesTable[index].filteredResult.getRuleDefinition(), pStyle); 
     306    p = getHTML("p", ainspectorSidebar.ruleResultsTable[index].filteredResult.getRuleDefinition(), pStyle); 
    347307    addHTML(vbox, p, 2); 
    348308 
     
    351311    addHTML(vbox, h2); 
    352312 
    353     p = getHTML("p", ainspectorSidebar.rulesTable[index].filteredResult.getResultMessage() + "\n", pStyle); 
     313    p = getHTML("p", ainspectorSidebar.ruleResultsTable[index].filteredResult.getResultMessage() + "\n", pStyle); 
    354314    addHTML(vbox, p); 
    355315  } 
     
    361321 
    362322/** 
    363 * @function handleRCTreeEvent 
    364 * 
    365 * @memberOf ainspectorSidebar 
    366 * 
    367 * @desc Handle dblclick and keypress events when row is selected. If user 
    368 *       double-clicks a row, or presses return, enter or spacebar when a 
    369 *       row is selected, go to Rule Details view. 
    370 */ 
     323 * @function handleRCTreeEvent 
     324 * 
     325 * @memberOf ainspectorSidebar 
     326 * 
     327 * @desc Handle dblclick and keypress events when row is selected. If user 
     328 *       double-clicks a row, or presses return, enter or spacebar when a 
     329 *       row is selected, go to Rule Details view. 
     330 */ 
    371331 
    372332ainspectorSidebar.handleRCTreeEvent = function (event) { 
  • trunk/proto-14/chrome/content/view-category.xul

    r203 r205  
    3030        <label class="header-label" value="&ai-label.ruleResults;"/> 
    3131        <spacer flex="2"/> 
    32         <button id="ainspector-button-default-sort" 
     32        <button id="ainspector-rc-default-sort" 
    3333          label="&ai-button.label.sort;" 
    3434          tooltiptext="&ai-button.tooltip.sort;" 
    35           oncommand="ainspectorSidebar.defaultSort()"/> 
     35          oncommand="ainspectorSidebar.defaultSortRuleResults()"/> 
    3636      </hbox> 
    3737    </vbox> 
     
    5252          tooltiptext="&ai-treecol.ruleTooltip;" 
    5353          persist="width" 
    54           onclick="ainspectorSidebar.sortRulesTable(this)" 
     54          onclick="ainspectorSidebar.sortRuleResults(this)" 
    5555          class="sortDirectionIndicator"/> 
    5656        <splitter class="tree-splitter"/> 
     
    6262          tooltiptext="&ai-treecol.resultTooltip;" 
    6363          persist="width" 
    64           onclick="ainspectorSidebar.sortRulesTable(this)" 
     64          onclick="ainspectorSidebar.sortRuleResults(this)" 
    6565          class="sortDirectionIndicator"/> 
    6666        <splitter class="tree-splitter"/> 
     
    7171          tooltiptext="&ai-treecol.levelTooltip;" 
    7272          persist="hidden width" 
    73           onclick="ainspectorSidebar.sortRulesTable(this)" 
     73          onclick="ainspectorSidebar.sortRuleResults(this)" 
    7474          sortDirection="descending" 
    7575          class="sortDirectionIndicator"/> 
     
    8282          tooltiptext="&ai-treecol.requiredTooltip;" 
    8383          persist="hidden width" 
    84           onclick="ainspectorSidebar.sortRulesTable(this)" 
     84          onclick="ainspectorSidebar.sortRuleResults(this)" 
    8585          class="sortDirectionIndicator"/> 
    8686        <splitter class="tree-splitter"/> 
     
    9292          tooltiptext="&ai-treecol.wcagSCTooltip;" 
    9393          persist="hidden width" 
    94           onclick="ainspectorSidebar.sortRulesTable(this)" 
     94          onclick="ainspectorSidebar.sortRuleResults(this)" 
    9595          class="sortDirectionIndicator"/> 
    9696      </treecols> 
  • trunk/proto-14/chrome/content/view-details.js

    r200 r205  
    3939 
    4040  // get selected RuleResult object 
    41   var ruleResult = ainspectorSidebar.rulesTable[index].filteredResult; 
     41  var ruleResult = ainspectorSidebar.ruleResultsTable[index].filteredResult; 
    4242 
    4343  // update summary grid 
Note: See TracChangeset for help on using the changeset viewer.