405567f6347de3e84419855784ff7be8957c3374
kate
  Thu Apr 19 11:52:07 2012 -0700
1. Add cookie to retain user preferences for help screen (also cleanup search cookie handling while the hood is up.  2. Markup help panel to ENCODE portal style (still needs some CSS adjusting)
diff --git src/hg/js/encodeMatrix.js src/hg/js/encodeMatrix.js
index 2031623..75a8747 100644
--- src/hg/js/encodeMatrix.js
+++ src/hg/js/encodeMatrix.js
@@ -1,54 +1,62 @@
 /* encodeMatrix.js - shared code for ENCODE data matrix apps
 
  Formatted: jsbeautify.py -j
  Syntax checked: jslint indent:4, plusplus: true, continue: true, unparam: true, sloppy: true, browser: true
 */
 /*global $, encodeProject */
 
 var encodeMatrix = (function () {
 
     // spinning image displayed during AJAX activity
     var spinnerLoc = 'spinner';  // id of location on HTML page
     var spinner;        // id generated by spinner function
 
+    var COOKIE_SEARCH = 'encodeMatrix.search';
+    var COOKIE_SEARCH_FILES = 'file';
+    var COOKIE_SEARCH_TRACKS = 'track';
+
+    var COOKIE_HELP = 'encodeMatrix.help';      // existence implies help has been read
+                                                // and hasn't been re-enabled
+
     function addSearchPanel($div, isFile) {
         // Create panel of radio buttons for user to change search type
         // isFileSearch determines initial setting
         // Add to passed in div ID; e.g. #searchTypePanel
         $div.append('<span id="searchPanelInstructions">search for:&nbsp;</span><input type="radio" name="searchType" id="searchTracks" value="tracks" onclick="encodeMatrix.setFileSearch(false);">tracks<input type="radio" name="searchType" id="searchFiles" value="files" onclick="encodeMatrix.setFileSearch(true);" >files');
         if (isFile) {
             $('#searchFiles').attr('checked', true);
         } else {
             $('#searchTracks').attr('checked', true);
         }
         encodeMatrix.setFileSearch(isFile);
     }
 
     return {
 
         // UI panel for search: select tracks or files
 
         setFileSearch: function (isFile) {
             // Set search type cookie to retain user choice
-            document.cookie = "encodeMatrix.search=" + (isFile ? "file" : "track");
+            $.cookie(COOKIE_SEARCH, 
+                        (isFile ? COOKIE_SEARCH_FILES : COOKIE_SEARCH_TRACKS), {expires: 7});
         },
 
         isFileSearch: function () {
             // Check search type cookie to retain user choice
             // Defaults to track search if no cookie set
-            return document.cookie.match(/encodeMatrix.search=file/);
+            return $.cookie(COOKIE_SEARCH, COOKIE_SEARCH_FILES);
         },
 
         getSearchUrl: function () {
             // Format a URL for search of type requested in search panel
             // Args are objects having mdbVar/mdbVal properties
             // Set each arg mdbValN to mdbVarN, empty out remaining vals to a total of 6
             // (cheaper than querying for actual number)
 
             var prog, cartVar, url, i, j;
             var argsLen = arguments.length;
             var mdbVals = [];
 
             if ($('input:radio[name=searchType]:checked').val() === "tracks") {
                 prog = 'hgTracks';
                 cartVar = 'hgt_tSearch';
@@ -64,80 +72,97 @@
                 // can pass an array or a single string -- so force to array for uniform handling
                 // Search sees multiple mdbValN= variables for the same mdbVarN as a list of vals
                 mdbVals = [].concat(arguments[i].mdbVal);
                 for (j = 0; j < mdbVals.length; j++) {
                     url += '&hgt_mdbVal' + (i + 1) + '=' + mdbVals[j];
                 }
             }
             url += '&hgt_mdbVar' + (argsLen + 1) + '=view' +
                     '&hgt_mdbVal' + (argsLen + 1) + '=Any';
             for (i = argsLen + 1; i < 6; i += 1) {
                 url += '&hgt_mdbVar' + (i + 1) + '=[]';
             }
             return (url);
         },
 
+        // User preferences for Help panel
+
+        disableHelp: function (isOff) {
+            // Set help cookie to retain user choice
+            // Removes cookie when user requests help
+            if (isOff) {
+                $.cookie(COOKIE_HELP, 'off', {expires: 90});
+                $('.helpText').hide();
+                $('.helpLauncher').show();
+            } else {
+                $.cookie(COOKIE_HELP, null);
+                $('.helpText').show();
+                $('.helpLauncher').hide();
+            }
+        },
+
+       isHelpWanted: function () {
+            // True if no cookie set
+            return (!$.cookie(COOKIE_HELP));
+        },
+
+
         // General purpose functions
 
         start: function ($el) {
             // Initialize application. Caller passes in jQuery selector object to hide/show
 
             // get server from calling web page (e.g. can sub in genome-preview)
             if ('encodeMatrix_server' in window) {
                 server = encodeMatrix_server;
             } else {
                 server = document.location.hostname;
                 // or document.domain ?
             }
             // variables from calling page
             organism = encodeMatrix_organism;
             assembly = encodeMatrix_assembly;
             $('#assemblyLabel').text(assembly);
             header = encodeMatrix_pageHeader;
             $('#pageHeader').text(header);
             document.title = 'ENCODE ' + header;
 
             encodeProject.setup({
                 server: server,
                 assembly: assembly
             });
 
-            // show only spinner until data is retrieved
+            // show only spinner and (optionally help) until data is retrieved
             $el.hide();
-            $('.helpLauncher').hide();
-            $('.xIcon').hide();
+            encodeMatrix.disableHelp(!encodeMatrix.isHelpWanted());
+            spinner = showLoadingImage(spinnerLoc, true);
 
             // setup click handlers for help controls
             $('.xIcon').click(function() {
-                $('.helpText').toggle();
-                $('.helpLauncher').toggle();
+                encodeMatrix.disableHelp(true);
             });
             $('.helpLauncher').click(function() {
-                $('.helpText').toggle();
-                $('.helpLauncher').toggle();
+                encodeMatrix.disableHelp(false);
             });
-            spinner = showLoadingImage(spinnerLoc, true);
 
             // add radio buttons for search type to specified div on page
             addSearchPanel($('#searchTypePanel'), encodeMatrix.isFileSearch());
-
         },
 
     show: function ($el) {
         // Call after data loads to show display
         hideLoadingImage(spinner);
-        $('.xIcon').show();
         $el.show();
         },
 
     // Table rendering special effects
 
     addTableFloatingHeader: function ($table) {
         // add callback for floating table header feature
 
        // NOTE: it may be possible to revive floating header functionality in IE 
        // using this plug-in, but I've timed out 
        // (not able to make it work in simple HTML either).
 
           $table.floatHeader({
             cbFadeIn: function (header) {
                 // hide axis labels -- a bit tricky to do so