-
Notifications
You must be signed in to change notification settings - Fork 0
/
extension.html
106 lines (91 loc) · 3.18 KB
/
extension.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/contentful-ui-extensions-sdk@3"></script>
<style>
body {
margin: 0;
}
.cf-form-input {
outline: none;
background-color: #fff;
border: 1px solid #d3dce0;
max-height: 2.5rem;
color: #536171;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
font-size: .875rem;
padding: .65625rem;
margin: 0;
width: 100%;
box-sizing: border-box;
-webkit-appearance: textfield;
}
.cf-form-hint {
margin-top: 0.642857142857143em;
color: #808080;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
font-size: 13px;
}
.default-value {
font-weight: bold;
}
</style>
</head>
<body>
<div class="cf-form-field">
<input type="text" class="cf-form-input">
<div class="cf-form-hint">
Default value:
<span class="default-value"></span>
<button class="reset-to-default-button">Reset to default value</button>
</div>
</div>
<script>
'use strict';
window.contentfulExtension.init(function (extension) {
extension.window.startAutoResizer();
var inputEl = document.querySelector('.cf-form-input');
var resetBtnEl = document.querySelector('.reset-to-default-button');
inputEl.value = extension.field.getValue() || '';
var detachValueChangeHandler = extension.field.onValueChanged(valueChangeHandler);
inputEl.addEventListener('input', keyboardInputHandler);
resetBtnEl.addEventListener('click', resetBtnHandler);
window.addEventListener('onbeforeunload', unloadHandler);
var defaultValue = extension.parameters.instance.defaultValue;
var defaultValueText = document.createTextNode(defaultValue || 'none');
document.querySelector('.default-value').appendChild(defaultValueText);
var isNewlyCreated = extension.entry.getSys().version < 2;
var hasNoValue = typeof extension.field.getValue() === 'undefined';
if (isNewlyCreated && hasNoValue) {
extension.field.setValue(defaultValue || '');
}
function valueChangeHandler(value) {
value = value || '';
if (value !== inputEl.value) {
inputEl.value = value;
}
}
function keyboardInputHandler() {
var value = inputEl.value;
if (typeof value === 'string' && value.length > 0) {
extension.field.setValue(value);
} else {
extension.field.removeValue();
inputEl.value = '';
}
}
function resetBtnHandler() {
inputEl.value = defaultValue;
extension.field.setValue(defaultValue);
}
function unloadHandler() {
window.removeEventListener('onbeforeunload', unloadHandler);
inputEl.removeEventListener('input', keyboardInputHandler);
resetBtnEl.removeEventListener('click', resetBtnHandler);
detachValueChangeHandler();
}
});
</script>
</body>
</html>