This repository was archived by the owner on Jun 2, 2021. It is now read-only.
forked from cachrisman/nested-category-browser
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnested-category-browser.html
109 lines (96 loc) · 4.37 KB
/
nested-category-browser.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jsontree</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.level-2 > li {padding-left: 25px;}
.level-3 > li {padding-left: 35px;}
.level-4 > li {padding-left: 45px;}
.level-5 > li {padding-left: 55px;}
span > i {padding-right: 10px;}
.list-group {margin-bottom: 0;}
</style>
</head>
<body>
</body>
</html>
<div id="nested-categories"></div>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script type='text/javascript' src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/contentful-ui-extensions-sdk@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/contentful@latest/dist/contentful.min.js"></script>
<script type='text/javascript'>
// CHANGE ME!!!
const space_id = 'space_id'
const access_token = 'delivery_token'
// STOP
window.contentfulExtension.init(function (extension) {
window.category_browser = extension
extension.window.startAutoResizer()
var id = 0
function buildTreeWithJSONArray(json, root, linkId, level) {
var ulContainer = '';
//Create ul container to hold the current level of categories
if (linkId === '') {
ulContainer = $('<ul class="list-group list-group-root in well"></ul>')
root.append(ulContainer);
} else {
ulContainer = $(`<ul class="list-group collapse level-${level}" id="list-${linkId}"></ul>`);
root.parent().append(ulContainer);
}
// for each category defined, add a li element with the appropriate details and add to the ul container
for (var i = 0; i < json.length; i++) {
var has_subcategories = typeof json[i].fields.subcategory !== 'undefined'
id++
var $li = $(`<li href='#list-${id}' data-toggle='collapse' class='list-group-item' data-id='${json[i].sys.id}'>
<input type="checkbox" class="badge checkbox" style="display:inherit">
<span class='list-group-content'>${ has_subcategories ? '<i class="glyphicon glyphicon-plus"></i>' : '' }
${json[i].fields.name}
</span>
</li>`)
ulContainer.append($li);
if (has_subcategories) {
buildTreeWithJSONArray(json[i].fields.subcategory, $li, id, level + 1);
}
}
}
// get field value and, for each category, check the box, highlight the category,
// and expand the parents of selected subcategories
function getFieldValue() {
let value = extension.field.getValue()
if (value) value.forEach(item => {
let $category = $('.list-group-item').filter(`[data-id=${item.sys.id}]`)
$category.children('input').prop('checked', true)
$category.toggleClass('list-group-item-info')
$category.parents('.list-group').addClass('in')
$('.glyphicon', $category.parents('.list-group').prevAll('.list-group-item')).removeClass('glyphicon-plus').addClass('glyphicon-minus')
})
}
// when a checkbox is clicked, set css class to highlight the entry,
// make array of contentful links for all the checked items
// and set field value to new array
function setupEventListeners() {
$('.checkbox').on('click', function() {
$(this).parent().toggleClass('list-group-item-info')
var links = $(':checked').parent().children('.list-group-content').map(function() {
return {sys: {type: 'Link', linkType: 'Entry', id: $(this).parent().data('id')}}
}).get()
extension.field.setValue(links)
event.stopPropagation()
})
$('.list-group-item').on('click', function() {
$('.glyphicon', this).toggleClass('glyphicon-plus').toggleClass('glyphicon-minus');
})
}
// get category tree using the CDA, create the tree, set up event listeners, and show the current field value
const cda = contentful.createClient({space: space_id, accessToken: access_token})
cda.getEntries({content_type:'category', include: 10, 'fields.name': 'Root'}).then(response => {
buildTreeWithJSONArray(response.items[0].fields.subcategory, $('#nested-categories'), '', 1)
setupEventListeners()
getFieldValue()
}).catch(console.error)
});
</script>