davidjmerritt/submenu.html

## submenu.html
<html>
<head>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<style>

* {
	padding: 0;
	margin: 0;
	font-family: Helvetica, Sans-Serif;
}

</style>
<script>

var menu_json = {
	"parent_element_id": "body",
	"menu_id": "menu",
	"menu_name": "Choose Folder",
	"items": [
		{
			"name": "Folder 1",
			"_id": "f1",
			"subfolders" : [
				{
					"name": "Subfolder 1A",
					"_id": "f1s1"
				},
				{
					"name": "Subfolder 1B",
					"_id": "f1s2"
				},
				{
					"name": "Subfolder 1C",
					"_id": "f1s3"
				}
			]
		},
		{
			"name": "Folder 2",
			"_id": "f2",
			"subfolders" : [
				{
					"name": "Subfolder 2A",
					"_id": "f2s1",
				}
			]
		},
		{
			"name": "Folder 3",
			"_id": "f3"
		}
	]
};

$(function() {
	dm = DropMenu;
	dm.menu_data = menu_json;
	dm.DropMenuCreate();
});

var DropMenu = {
    menu_data: {
    	"parent_element_id": "body",
		"menu_id": "menu",
		"menu_name": "Choose Folder",
		"items": []
    },
    DropMenuCreate: function () { // THIS SHOULD BE REPLACED WITH PURE JAVASCRIPT
        $(this.menu_data['parent_element_id']).append(
        	'<select id="'+this.menu_data['menu_id']+'"><option>'+
        	this.menu_data['menu_name']+'</option></select>'
        );
        this.menu_data['items'].forEach(this.DropMenuRecurse);
    },
    DropMenuRecurse: function (value, index, items) {
    	// console.log(value);
		this.DropMenuFormat(value);
			if ('subfolders' in value) {
				// console.log(value['subfolders']);
				// value['subfolders'].forEach(this.DropMenuRecurse);
			}
    },
    DropMenuFormat: function (item) {
		$('#'+this.menu_data['menu_id']).append('<option value="'+item['_item']+'">'+item['name']+'</option>');
	}
}

// METHOD #1
// $(function() {
// 	DropMenu();
// });

// function DropMenu() {
// 	DropMenuLoad();
// }

// function DropMenuLoad() {
// 	var menu_data = menu_json; // REPLACE THIS WITH AJAX CALL
// 	DropMenuCreate(menu_data);
// }

// function DropMenuCreate(menu_data) {
// 	$(menu_data['parent_element_id']).append('<select id="'+menu_data['menu_id']+'"><option>'+menu_data['menu_name']+'</option></select>');
// 	menu_data['items'].forEach(DropMenuRecurse);
// }

// function DropMenuRecurse(value, index, menu_items) {
// 	DropMenuFormat(value);
// 	if ('subfolders' in value) {
// 		value['subfolders'].forEach(DropMenuRecurse);
// 	}
// }

// function DropMenuFormat(item) {
// 	$('#menu'). // <= THIS IS NOT DYNAMIC
// 	append('<option value="'+item['_item']+'">'+item['name']+'</option>');
// }

</script>
<body>
<html>
	<html>
	<head>
	</head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
	</head>
	<style>

	* {
	padding: 0;
	margin: 0;
	font-family: Helvetica, Sans-Serif;
	}

	</style>
	<script>

	var menu_json = {
	"parent_element_id": "body",
	"menu_id": "menu",
	"menu_name": "Choose Folder",
	"items": [
	{
	"name": "Folder 1",
	"_id": "f1",
	"subfolders" : [
	{
	"name": "Subfolder 1A",
	"_id": "f1s1"
	},
	{
	"name": "Subfolder 1B",
	"_id": "f1s2"
	},
	{
	"name": "Subfolder 1C",
	"_id": "f1s3"
	}
	]
	},
	{
	"name": "Folder 2",
	"_id": "f2",
	"subfolders" : [
	{
	"name": "Subfolder 2A",
	"_id": "f2s1",
	}
	]
	},
	{
	"name": "Folder 3",
	"_id": "f3"
	}
	]
	};

	$(function() {
	dm = DropMenu;
	dm.menu_data = menu_json;
	dm.DropMenuCreate();
	});

	var DropMenu = {
	menu_data: {
	"parent_element_id": "body",
	"menu_id": "menu",
	"menu_name": "Choose Folder",
	"items": []
	},
	DropMenuCreate: function () { // THIS SHOULD BE REPLACED WITH PURE JAVASCRIPT
	$(this.menu_data['parent_element_id']).append(
	'<select id="'+this.menu_data['menu_id']+'"><option>'+
	this.menu_data['menu_name']+'</option></select>'
	);
	this.menu_data['items'].forEach(this.DropMenuRecurse);
	},
	DropMenuRecurse: function (value, index, items) {
	// console.log(value);
	this.DropMenuFormat(value);
	if ('subfolders' in value) {
	// console.log(value['subfolders']);
	// value['subfolders'].forEach(this.DropMenuRecurse);
	}
	},
	DropMenuFormat: function (item) {
	$('#'+this.menu_data['menu_id']).append('<option value="'+item['_item']+'">'+item['name']+'</option>');
	}
	}

	// METHOD #1
	// $(function() {
	// DropMenu();
	// });

	// function DropMenu() {
	// DropMenuLoad();
	// }

	// function DropMenuLoad() {
	// var menu_data = menu_json; // REPLACE THIS WITH AJAX CALL
	// DropMenuCreate(menu_data);
	// }

	// function DropMenuCreate(menu_data) {
	// $(menu_data['parent_element_id']).append('<select id="'+menu_data['menu_id']+'"><option>'+menu_data['menu_name']+'</option></select>');
	// menu_data['items'].forEach(DropMenuRecurse);
	// }

	// function DropMenuRecurse(value, index, menu_items) {
	// DropMenuFormat(value);
	// if ('subfolders' in value) {
	// value['subfolders'].forEach(DropMenuRecurse);
	// }
	// }

	// function DropMenuFormat(item) {
	// $('#menu'). // <= THIS IS NOT DYNAMIC
	// append('<option value="'+item['_item']+'">'+item['name']+'</option>');
	// }

	</script>
	<body>
	<html>