-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (102 loc) · 3.53 KB
/
index.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
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<head>
<link href="https://static.contentful.com/app/main-62e0abc7.css" media="all" rel="stylesheet" type="text/css">
<link href="https://static.contentful.com/app/vendor-976872d7.css" media="all" rel="stylesheet" type="text/css">
<link href="https://contentful.github.io/ui-extensions-sdk/cf-extension.css" media="all" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://unpkg.com/contentful-ui-extensions-sdk@3"></script>
</head>
<div class="widget-slug-editor">
<input id="slug" type="text" class="form-control" style="border: 1px solid #d3dce0;max-height: 2.5rem;color: #536171;font-size: .875rem;width: 100%;outline: none;">
<i id="error" class="fa fa-exclamation-triangle is-slug-duplicate"></i>
<i id="ok" class="fa fa-check-circle is-slug-unique"></i>
<i id="loading" class="fa fa-spinner fa-spin"></i>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.0.2/es6-promise.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/speakingurl/7.0.0/speakingurl.min.js"></script>
<script>
var cfExt = window.contentfulExtension || window.contentfulWidget
cfExt.init(function (api) {
var slugField = api.field
var titleFieldName = api.contentType.displayField
var titleField = api.entry.fields[titleFieldName]
var _ = window._
var getSlug = window.getSlug
var debouncedUpdateStatus = _.debounce(updateStatus, 500)
var input = document.getElementById('slug')
var statusElements = {
error: document.getElementById('error'),
ok: document.getElementById('ok'),
loading: document.getElementById('loading')
}
api.window.updateHeight()
titleField.onValueChanged(handleSlugChange)
input.addEventListener('input', function () {
handleSlugChange(input.value)
})
input.addEventListener('change', function () {
handleSlugChange(input.value)
})
updateStatus(slugField.getValue())
/**
* Handle change of slug value caused by either changing slug field
* or changing the title of the entry
*/
function handleSlugChange (value) {
setSlug(getSlug(value || ''))
}
/**
* Set the input value to 'slug' and update the status by checking for
* duplicates.
*/
function setSlug (slug) {
var preSlug = '/article/' + slug + '/'
input.value = preSlug
slugField.setValue(slug)
setStatus('loading')
debouncedUpdateStatus(slug)
}
/**
* Show inline status icon based on current status
*/
function updateStatus (slug) {
getDuplicates(slug).then(function (hasDuplicates) {
if (hasDuplicates) {
setStatus('error')
} else {
setStatus('ok')
}
})
}
/**
* Show icon for given status
*/
function setStatus (status) {
_.each(statusElements, function (el, name) {
if (name === status) {
el.style.display = 'inline'
} else {
el.style.display = 'none'
}
})
}
/**
* Check if slug is already in use.
* Resolves to 'true' if there are entries of the given content type that have
* the same 'slug' value.
*/
function getDuplicates (slug) {
if (!slug) {
return Promise.resolve(false)
}
var query = {}
query['content_type'] = api.entry.getSys().contentType.sys.id
query['fields.' + slugField.id] = slug
query['sys.id[ne]'] = api.entry.getSys().id
query['sys.publishedAt[exists]'] = true
return api.space.getEntries(query).then(function (result) {
return result.total > 0
})
}
})
</script>