weierophinney/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Choices example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <link rel="stylesheet" href="https://joshuajohnson.co.uk/Choices/assets/styles/css/choices.min.css">
  <style>
    .dropdown_packagename {
      font-size: .8em;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-8">
        <h1>Main content</h1>

        <p>This is the main content.</p>
      </div>

      <div class="col-4">
        <h4>Sidebar</h4>

        <select id="component-selector" class="form-control">
          <option disabled="disabled">Loading...</option>
        </select>
      </div>
    </div>
  </div>

  <script>
    var siteName = "zend-servicemanager";
  </script>
  <script src="https://joshuajohnson.co.uk/Choices/assets/scripts/dist/choices.min.js"></script>
  <script>
    (function () {
        "use strict";

        function prepareComponentList(components) {
            var componentList = {
                learn: {
                    label: "Learn ZF",
                    choices: []
                },
                middleware: {
                    label: "Expressive and PSR-15 Middleware",
                    choices: []
                },
                mvc: {
                    label: "MVC Framework",
                    choices: []
                },
                components: {
                    label: "Components",
                    choices: []
                },
                projects: {
                    label: "Tooling and Composer Plugins",
                    choices: []
                },
            };
            var uncategorized = [];

            // eslint-disable-next-line no-use-before-define
            const matchActive = new RegExp('\/' + siteName + '(\/|$)');

            components.forEach(function (component) {
                const selected = matchActive.test(component.url);
                const label = component.name + '<br/><span class="dropdown_packagename">(' + component.package + ')</span>';
                const choice = {
                    value: component.url,
                    label: label,
                    selected: selected,
                    customProperties: {
                        description: component.description
                    }
                };

                componentList.hasOwnProperty(component.group)
                    ? componentList[component.group].choices.push(choice)
                    : uncategorized.push(choice);
            });

            // Initialize the Choices selector using the component selector as its element
            const choices = new Choices('#component-selector', {
                itemSelectText: 'Press to read docs',
                renderChoiceLimit: -1,
                searchChoices: true,
                searchEnabled: true,
                searchFields: ['label', 'customProperties.description'],
                searchPlaceholderValue: 'Jump to package documentation...',
                searchResultLimit: 10,
                shouldSort: false
            });

            choices.setChoices(
                Array.prototype.concat.apply(Object.values(componentList), uncategorized),
                'value',
                'label',
                true
            );

            // On selection of a choice, redirect to its URL
            choices.passedElement.addEventListener('choice', function (event) {
                window.location.href = event.detail.choice.value;
            }, false);
        }

        function parseComponentList(event) {
            var request = event.target;
            if (request.readyState === request.DONE && request.status === 200) {
                prepareComponentList(JSON.parse(request.responseText));
            }
        }

        window.addEventListener('load', function() {
            var request = new XMLHttpRequest();
            request.onreadystatechange = parseComponentList;
            request.open('GET', '//docs.zendframework.com/zf-mkdoc-theme/scripts/zf-component-list.json');
            request.send();
        });
    })();
  </script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<title>Choices example</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
	<link rel="stylesheet" href="https://joshuajohnson.co.uk/Choices/assets/styles/css/choices.min.css">
	<style>
	.dropdown_packagename {
	font-size: .8em;
	}
	</style>
	</head>
	<body>
	<div class="container-fluid">
	<div class="row">
	<div class="col-8">
	<h1>Main content</h1>

	<p>This is the main content.</p>
	</div>

	<div class="col-4">
	<h4>Sidebar</h4>

	<select id="component-selector" class="form-control">
	<option disabled="disabled">Loading...</option>
	</select>
	</div>
	</div>
	</div>

	<script>
	var siteName = "zend-servicemanager";
	</script>
	<script src="https://joshuajohnson.co.uk/Choices/assets/scripts/dist/choices.min.js"></script>
	<script>
	(function () {
	"use strict";

	function prepareComponentList(components) {
	var componentList = {
	learn: {
	label: "Learn ZF",
	choices: []
	},
	middleware: {
	label: "Expressive and PSR-15 Middleware",
	choices: []
	},
	mvc: {
	label: "MVC Framework",
	choices: []
	},
	components: {
	label: "Components",
	choices: []
	},
	projects: {
	label: "Tooling and Composer Plugins",
	choices: []
	},
	};
	var uncategorized = [];

	// eslint-disable-next-line no-use-before-define
	const matchActive = new RegExp('\/' + siteName + '(\/\|$)');

	components.forEach(function (component) {
	const selected = matchActive.test(component.url);
	const label = component.name + '<br/><span class="dropdown_packagename">(' + component.package + ')</span>';
	const choice = {
	value: component.url,
	label: label,
	selected: selected,
	customProperties: {
	description: component.description
	}
	};

	componentList.hasOwnProperty(component.group)
	? componentList[component.group].choices.push(choice)
	: uncategorized.push(choice);
	});

	// Initialize the Choices selector using the component selector as its element
	const choices = new Choices('#component-selector', {
	itemSelectText: 'Press to read docs',
	renderChoiceLimit: -1,
	searchChoices: true,
	searchEnabled: true,
	searchFields: ['label', 'customProperties.description'],
	searchPlaceholderValue: 'Jump to package documentation...',
	searchResultLimit: 10,
	shouldSort: false
	});

	choices.setChoices(
	Array.prototype.concat.apply(Object.values(componentList), uncategorized),
	'value',
	'label',
	true
	);

	// On selection of a choice, redirect to its URL
	choices.passedElement.addEventListener('choice', function (event) {
	window.location.href = event.detail.choice.value;
	}, false);
	}

	function parseComponentList(event) {
	var request = event.target;
	if (request.readyState === request.DONE && request.status === 200) {
	prepareComponentList(JSON.parse(request.responseText));
	}
	}

	window.addEventListener('load', function() {
	var request = new XMLHttpRequest();
	request.onreadystatechange = parseComponentList;
	request.open('GET', '//docs.zendframework.com/zf-mkdoc-theme/scripts/zf-component-list.json');
	request.send();
	});
	})();
	</script>
	</body>
	</html>