Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
116 lines (101 sloc) 3.37 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color Picker</title>
<!-- libs -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="color-picker.min.js"></script>
<link rel="stylesheet" href="color-picker.min.css">
<!-- Kentico Custom elements API-->
<script src="https://app.kenticocloud.com/js-api/custom-element.js"></script>
<!-- Custom elements styles -->
<style>
body {
margin: 0;
}
div.color-picker-box {
width: 100%;
padding: 30px 0 30px 0;
text-align: center;
z-index: 1;
}
.color-picker.static {
display: inline-block !important;
position: static !important;
top: 0 !important;
left: 0 !important;
}
.disabled_overlay {
position: fixed;
z-index: 10;
cursor: not-allowed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
</style>
</head>
<body>
<!-- Custom element HTML -->
<div class="disabled_overlay"></div>
<div class="color-picker-box">
<section id="color-picker"></section>
</div>
<!-- Custom element code -->
<script>
var isDisabled = false;
function updateDisabled(disabled) {
isDisabled = disabled;
if (disabled) {
$('.disabled_overlay').show();
}
else {
$('.disabled_overlay').hide();
}
}
function setupColorPicker(hexColorValue) {
const container = document.querySelector('#color-picker');
const picker = new CP(container, false, container);
picker.self.classList.add('static');
if (!!hexColorValue) {
picker.set(hexColorValue);
container.parentNode.style.backgroundColor = hexColorValue;
}
picker.on("change", function (color) {
container.parentNode.style.backgroundColor = '#' + color;
if (!isDisabled) {
// Send updated color to Kentico
CustomElement.setValue('#' + color);
}
});
picker.enter();
}
function updateSize() {
// Update the custom element height in the Kentico UI.
const height = Math.ceil($("html").height());
CustomElement.setHeight(height);
}
function initCustomElement() {
try {
CustomElement.init((element, _context) => {
// Setup with initial value and disabled state
updateDisabled(element.disabled);
setupColorPicker(element.value);
updateSize();
});
// React on disabled changed (e.g. when publishing the item)
CustomElement.onDisabledChanged(updateDisabled);
} catch (err) {
// Initialization with Kentico Custom element API failed (page displayed outside of the Kentico UI)
console.error(err);
setupColorPicker();
updateDisabled(true);
}
}
initCustomElement();
</script>
</body>
</html>
You can’t perform that action at this time.