File List

Derived from Element -> Panel.

A "File List" displays a scrollable list of files to print. It can have companion buttons to start a print, refresh the list, and clear the list.

Example with companion buttons

{
	/*
	 * All attributes of Element and Panel apply here
	 */

	"id": "panel_files",
	"type": "file_list",
	
	/*
	 * Each item in the list is a button representing the gcode file.
	 * You can set different classes for the currently selected button
	 * and the unselected ones.
	 */  
	"element_defaults": {
		"style": {
			"height": "3em",
		},
		"selected_classes": "btn-success",
		"unselected_classes": "btn-primary"
	},
	
	/*
	 * The list itself needs to scroll rather than extending off the screen
	 * so there are some things we need to set.
	 */ 
	"style": {
		"position": "relative",
		"overflow": "scroll",
		/*
		 * We need to use some magic here to get
		 * the grid sized correctly and to scroll
		 * correctly.  There's probably a better way
		 * to do this but sometimes I like brute force.
		 *
		 * We're going to use the CSS "calc" function
		 * to set the dimensions.  Feel free to play with
		 * this and let me know what you find.
		 */
		"max-height": "calc(100% - 2.5em)"
	},

	/* The default directory is "/gcodes" */	
	"directory": "/gcodes",
	
	/*
	 * When you tap a file button you can either immediately start
	 * a "print" or you can just "select" the file.  If you specify
	 * "print" you'll probably want a confirmation popup otherwise
	 * you could accidentally start unwanted prints. "confirm_message"
	 * is ignored if "select" is specified.
	 */
	"tap_action": "select",
	"confirm_message": "Print ${value}?",
	
	/*
	 * If you used a tap action of "select", you need a way to actually
	 * start the print.  A companion "print" button is the way to do that.
	 * "print_button" sets configuration parameters but you have to
	 * create the actual button yourself.  See below for an example
	 * definition of the actual button.
	 */  	
	"print_button": {
		/* The "id" of the button used to start the print. */
		"id": "files_print",
		
		/*
		 * When a file is selected, change the text and classes of the
		 * print button to these.
		 * ${value} will be the name of the selected file.
		 */
		"selected_label": "Print ${value}?",
		"selected_classes": "btn-warning",
		
		/* When there are no files selected, change text and classes to... */
		"unselected_label": "Select file to print",
		"unselected_classes": "disabled"
	},

	/* These have the same meaning as for [[File Grid]] */
	"sort_autofill": "file",
	"strip_directory": true,
	"strip_prefix": true,
	"strip_suffix": true
}

This element can accept events from other "companion" elements. Send "refresh_event" to this element to cause the file list to refresh. Send "print_event" to this element to cause the selected file to print. Send "clear_event" to this element to deselect all files.

Here are some examples of companion buttons.

You'll probably want buttons to refresh the list and deselect all the files in the list:

{
	"id": "files_refresh",
	"type": "button",
	"value": "Refresh",
	"style": {
		"width": "20ch",
		"height": "2.5em"
	},
	"position": {
		"my": "left top",
		"at": "left top",
		"of": "#dueui_panel_files"
	},
	
	/*
	 * When you click this button, it sends the "refresh" event to
	 * the element with an id of "panel_files" (above).
	 */	  
	"actions": [
		{"type": "event", "event": "refresh", "target": "#panel_files"}
	]
},
{
	"id": "clear_files_print",
	"type": "button",
	"value": "Clear selection",
	"style": {
		"width": "20ch",
		"height": "2.5em"
	},
	"classes": "btn-primary",
	"position": {
		"my": "left top",
		"at": "right+20 top",
		"of": "#files_refresh"
	},
	/*
	 * When you clock this button, it sends the "clear_selected" event to
	 * the element with an id of "panel_files" (above).
	 */	  
	"actions": [
		{"type": "event", "event": "clear_selected", "target": "#panel_files"}
	]
},

In the File List configuration above you defined a "print_button" object that tells the list to change THIS button's text and styles based on whether a file was selected or not. Here's the actual definition of the button itself. It will send the "print_selected" event back to the list to start the print.

{
	"id": "files_print",
	"type": "button",
	"value": "Print Selected File",
	"style": {
		"height": "2.5em"
	},
	"classes": "btn-primary",
	"position": {
		"my": "left top",
		"at": "right+20 top",
		"of": "#clear_files_print"
	},
	/*
	 * When you click this button, it sends the "print_selected"
	 * event to the file list.  You can use a standard "actions" object
	 * here or you can use an "actions_chooser" even with just 1 action.
	 * In this case, a dropdown with the "label" will appear which you must
	 * click to confirm.
	 */
	"actions_chooser": {"type": "event", "event": "print_selected",
		"target": "#panel_files", "label": "Tap to confirm"	}
	]
},