Created
May 31, 2018 22:31
-
-
Save weierophinney/d6d74ae1314018c7042505ce78b80000 to your computer and use it in GitHub Desktop.
Prototype for auto-populating the component dropdown and making it searchable.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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