-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (135 loc) · 5.43 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>
<head>
<title>Custom Asset Full Screen/Full Size UI Extension</title>
<meta charset="utf-8">
<script src="https://unpkg.com/contentful-ui-extensions-sdk@3"></script>
<script src="https://cdn.jsdelivr.net/npm/contentful-management@latest/dist/contentful-management.browser.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<style>
nav#navbar {
background-color: rgb(0, 0, 0, 0.25);
height: 45px;
position: absolute;
vertical-align: middle;
width: 100%;
}
img#preview {
height: 100%;
min-width: 800px;
width: 100%;
}
a#openNew i {
font-size: 20px;
}
a.fs-btn,
a.fs-btn i {
height: 45px;
line-height: 48px;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="imageContainer">
<nav id="navbar">
<div class="nav-wrapper">
<ul class="right">
<li>
<a id="openNew" class="fs-btn" target="_blank">
<i class="material-icons">open_in_new</i>
</a>
</li>
<li>
<a id="goFS" class="fs-btn">
<i class="material-icons">fullscreen</i>
</a>
</li>
<li>
<a id="exitFS" class="fs-btn hide">
<i class="material-icons">fullscreen_exit</i>
</a>
</li>
</ul>
</div>
</nav>
<img id="preview" />
</div>
<script>
'use strict';
const imageContainer = document.querySelector(".imageContainer");
const goFS = document.querySelector("#goFS");
const exitFS = document.querySelector("#exitFS");
const imgPreview = document.querySelector("#preview");
const client = contentfulManagement.createClient({
accessToken: '<INSERT_CMA_TOKEN_HERE>'
});
// This is the main entry point for extensions.
// The extension API reference explains in detail what you can do with
// the 'api' object.
window.contentfulExtension.init(function(api) {
// Automatically adjust UI Extension size in the Web App.
api.window.startAutoResizer();
const assetField = api.entry.fields.asset;
const openBtn = document.querySelector("#openNew");
function valueChangeHandler (value) {
updateAssetPreview();
}
function updateAssetPreview() {
const assetId = assetField.getValue() ? assetField.getValue().sys.id : null;
if (assetId !== null && assetId !== undefined) {
getAsset(assetId);
}
else {
imageContainer.classList.add("hide");
}
}
// Callback for changes of the field value.
var detachValueChangeHandler = assetField.onValueChanged(valueChangeHandler);
function getAsset(assetId) {
client.getSpace('<SPACE_ID>')
.then((space) => space.getEnvironment('master'))
.then((environment) => environment.getAsset(assetId))
.then((asset) => {
// For this simple example, we're assuming all asset types are of image
// if you expect this extension to be used with other asset types
// such as a PDF or PPT, then you must check asset.fields.file[].contentType
// in order to determine which HTML element type to use.
const imageURL = asset.fields.file['en-US'].url;
imgPreview.addEventListener('load', function() {
api.window.updateHeight();
}, false);
imgPreview.src = imageURL;
imageContainer.classList.remove("hide");
openBtn.href = imageURL;
})
.catch(console.error);
}
});
goFS.addEventListener("click", function() {
imageContainer.requestFullscreen().then({}).catch(err => {
alert("Error attempting to enable full-screen mode: ${err.message} (${err.name})");
});
}, false);
exitFS.addEventListener("click", function() {
document.exitFullscreen();
}, false);
document.onfullscreenchange = function(event) {
toggleFSButtons();
};
function toggleFSButtons() {
if (document.fullscreenElement) {
goFS.classList.add("hide");
exitFS.classList.remove("hide");
} else {
goFS.classList.remove("hide");
exitFS.classList.add("hide");
}
}
</script>
</body>
</html>