Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
@floelhoeffel floelhoeffel fixup! ec940df Oct 24, 2018
1 contributor

Users who have contributed to this file

94 lines (80 sloc) 2.8 KB
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/contentful-ui-extensions-sdk@3/dist/cf-extension.css" />
<style>
body {
overflow: auto;
}
.logo {
background-image: url("https://www.bynder.com/static/3.0/dist/img/svg/glyph-blue.svg");
background-repeat: no-repeat;
width: 25px;
height: 25px;
margin-right: 10px;
float: left;
}
#selection {
display: none;
}
</style>
<body>
<div class="logo"></div>
<div
id="bynder-compactview"
data-fullScreen="true"
data-assetTypes="image,video"
data-autoload="false"
data-button="Load media from bynder.com"
data-collections="true"
data-folder="bynder-compactview"
data-fullScreen="false"
data-header="true"
data-language="en_US"
data-mode="multi"
data-zindex="300"
data-defaultEnvironment="https://contentful.getbynder.com">
</div>
<div id="selection">
<p>Selected media:</p>
<div id="importedAssets"></div>
</div>
<script src="https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.1.0.min.js"></script>
<script src="https://unpkg.com/contentful-ui-extensions-sdk@3"></script>
<script>
window.contentfulExtension.init(function (api) {
var assetsListsContainer = document.getElementById('selection')
var assetsList = document.getElementById('importedAssets')
renderIds(api.field.getValue())
var isOpen = false
document.addEventListener('BynderAddMedia', function (e) {
isOpen = false
var assetIds = e.detail.map(function (asset) {
return asset.id
})
renderIds(assetIds)
api.field.setValue(assetIds)
api.window.updateHeight()
})
document.getElementById('bynder-compactview').addEventListener('click', function () {
if (!isOpen) {
isOpen = true
api.window.updateHeight(500)
}
})
function renderIds(ids) {
if (!Array.isArray(ids) || ids.length < 1) {
assetsListsContainer.style.display = 'none'
api.window.updateHeight()
return
}
assetsList.innerHTML = '<ul style="clear:both">'
ids.map(function (item) {
assetsList.innerHTML += ('<li>' + item + '</li>')
})
assetsList.innerHTML += '</ul>'
assetsListsContainer.style.display = 'block'
api.window.updateHeight()
}
})
</script>
</body>
You can’t perform that action at this time.