Add ability to show/hide dotfiles

[ericfranz]

This should just be:

• check box to change the version & calling the panel refresh function which should reinitiate a new ajax request

[brianmcmichael]

I'm having a lot of trouble persisting this.

I have tried using cookies to store the user's choice, but attempting to access the cookie data from inside the module where the file sorting takes place breaks the Node preprocessor and Nginx responds with a 502 error.

Calling a [panel].refresh() resets the button bar and wipes the checked value from the checkbox. Adding an onload() listener that sets the checkbox only works on the initial app load, but it clears the value and doesn't fire again after a JSON load.

The app currently uses a .cloudcmd.json file for settings that's stored in the user's homedir. I will probably need to figure out how to extend that file and use whatever accessor methods are available to manipulate it.

[ericfranz]

There is an alternative approach that will shift the complexity elsewhere but may be preferable:

1. Update the template so that each "row" that is a "dotfile" gets the class "dotfile"
2. If the checkbox is checked, add another class above or on the panel that says "showdotfiles". That way .dotfile { display: none and .showdotfiles .dotfile { display: block } (or whatever the normal display value is for the row)
3. Update the client side code that handles file selection to ignore the "hidden" files
4. Default the checkbox to unchecked; save the cookie client-side using javascript if the user checks the box.

Finally, when storing cookies, there is a cookies js file I am using in OD2 that is probably appropriate to continue to use in OD3. It is code pulled from MDN and works well.

• See the file in use: https://ondemand.osc.edu/catalog/sites/ondemand.osc.edu.catalog/modules/osc_ondemand/assets/cookies.js
• MDN's page on it https://developer.mozilla.org/en-US/docs/Web/API/document/cookie

• example:

  docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
  docCookies.getItem(name)
  docCookies.removeItem(name[, path])
  docCookies.hasItem(name)
  docCookies.keys()

This approach would make it so that 100% of the modifications for this are client side. We could do the same thing with the hide/show columns.

[brianmcmichael]

I'm already doing a lot of this. I will still have difficulty resetting that check-box on JSON reload.

Using class names might work for sorting, but will probably break arrow key and select functionality since those work by reading the DOM. (i.e. Hiding files to the user won't hide them to the app)

[ericfranz]

1. Why is it necessary to "reset that check-box on JSON reload"
2. Yes on "probably break arrow key and select functionality" which is why step 3 listed above is to fix that - basically the "selected items" would need to be filtered, and the "previous/next" would be the next visible element instead of just the next element

Also I included jQuery 1.12 in my tree solution so its available to use via jQuery12 if that will make life easier.

[brianmcmichael]

1. UX. When someone clicks a checkbox to show the dot files and then navigates to a new folder, the cookie is still set but the checkbox isn't. That's a bug. Simple fix is to move the top buttons out of the panel template and into the main view.
2. I'll look into it, but posted the comment above just to point out that this is more complex than "check box to change the version & calling the panel refresh function which should reinitiate a new ajax request"

[ericfranz]

https://api.jquery.com/visible-selector/

and

.files li.dotfile {
    display: none;
}

to hide. Also, add jquery like this by copying this block:

https://github.com/OSC/cloudcmd/blob/c410dd640edde1ff8c5cade82f543867dde36334/html/index.html#L21-L32

In a separate commit we can remove the CDN reference. This way when you merge and I merge there should be no conflict.

[ericfranz]

Changes to cloudfunc.js I took: lib/cloudfunc.js

             // OSC_CUSTOM_CODE hide all dot files unless cookie is set based on checkbox
             // TODO figure out how to access the cookies here and disable this block when we want to show dotfiles
             // right now this is loading before the page is done...
-            files = files.filter(function(value) {
-                return value.name.charAt(0) !== '.';
-            });
-            

+
+
+                var isDotfile = file.name.charAt(0) == ".";
+
                 if (file.size === 'dir') {

                 fileTable += rendy(templateFile, {
                     tag         : 'li',
                     attribute   : attribute,
-                    className   : '',
+                    className   : isDotfile ? 'dotfile' : '',

[brianmcmichael]

https://github.com/OSC/cloudcmd/pull/22