Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Prototype for auto-populating the component dropdown and making it searchable.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.