<div style="width: 418px; margin: 0 25px 50px">
<h3>Multi Select</h3>
<div style="display:flex">
<div onclick="multiImageSelection.updateResults(updatedResults)" style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px; cursor: pointer;">
DEMO
Update Results
</div>
<div onclick="multiImageSelection.clearSelection()" style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px; cursor: pointer;">
DEMO
Clear Selection
</div>
</div>
<div class="acl-image-selection demo-multi-image-selection">
</div>
</div>
<div style="width: 418px; margin: 0 25px 50px">
<h3>Single Select</h3>
<div style="display:flex">
<div onclick="imageSelection.updateResults(updatedResults)" style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px; cursor: pointer;">
DEMO
Update Results
</div>
<div onclick="imageSelection.clearSelection()" style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px; cursor: pointer;">
DEMO
Clear Selection
</div>
</div>
<div class="acl-image-selection demo-image-selection">
</div>
</div>
<div style="width: 418px; margin: 0 25px 50px">
<h3>Static Multi Select</h3>
<div style="display:flex">
<div onclick="staticMultiImageSelection.updateResults(updatedResults)" style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px; cursor: pointer;">
DEMO
Update Results
</div>
<div onclick="staticMultiImageSelection.clearSelection()" style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px; cursor: pointer;">
DEMO
Clear Selection
</div>
</div>
<div class="acl-image-selection demo-static-multi-image-selection">
<div class="acl-image-selection__item" id="demo-xsd-beer" data-selected="true">
<div class="acl-image-selection__item-selectbox">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
<polygon points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 " style="fill: #707893;"></polygon>
</svg>
</div>
<img class="acl-image-selection__item-image" src="/assets/img/unbranded/1.png" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">Duke's Beer</div>
</div>
<div class="acl-image-selection__item" id="demo-xsd-lager">
<div class="acl-image-selection__item-selectbox"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
<polygon points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 " style="fill: #707893;"></polygon>
</svg></div>
<img class="acl-image-selection__item-image" src="/assets/img/unbranded/2.png" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">Duke's Beer</div>
</div>
<div class="acl-image-selection__item" data-selected="false" id="demo-xsd-ipa">
<div class="acl-image-selection__item-selectbox"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
<polygon points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 " style="fill: #707893;"></polygon>
</svg></div>
<img class="acl-image-selection__item-image" src="/assets/img/unbranded/3.png" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">Duke's Beer</div>
</div>
<div class="acl-image-selection__item" data-selected="false" id="demo-xsd-cider">
<div class="acl-image-selection__item-selectbox"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
<polygon points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 " style="fill: #707893;"></polygon>
</svg></div>
<img class="acl-image-selection__item-image" src="/assets/img/unbranded/4.png" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">Duke's Beer</div>
</div>
</div>
</div>
<div style="width: 418px; margin: 0 25px 50px">
<h3>Static Single Select</h3>
<div style="display:flex">
<div onclick="staticImageSelection.updateResults(updatedResults)" style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px; cursor: pointer;">
DEMO
Update Results
</div>
<div onclick="staticImageSelection.clearSelection()" style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px; cursor: pointer;">
DEMO
Clear Selection
</div>
</div>
<div class="acl-image-selection demo-static-image-selection">
<div class="acl-image-selection__item" id="demo-xsd-beer" data-selected="true">
<div class="acl-image-selection__item-selectbox">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
<polygon points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 " style="fill: #707893;"></polygon>
</svg>
</div>
<img class="acl-image-selection__item-image" src="/assets/img/unbranded/1.png" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">Duke's Beer</div>
</div>
<div class="acl-image-selection__item" id="demo-xsd-lager">
<div class="acl-image-selection__item-selectbox"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
<polygon points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 " style="fill: #707893;"></polygon>
</svg></div>
<img class="acl-image-selection__item-image" src="/assets/img/unbranded/2.png" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">Duke's Beer</div>
</div>
<div class="acl-image-selection__item" data-selected="false" id="demo-xsd-ipa">
<div class="acl-image-selection__item-selectbox"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
<polygon points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 " style="fill: #707893;"></polygon>
</svg></div>
<img class="acl-image-selection__item-image" src="/assets/img/unbranded/3.png" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">Duke's Beer</div>
</div>
<div class="acl-image-selection__item" data-selected="false" id="demo-xsd-cider">
<div class="acl-image-selection__item-selectbox"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
<polygon points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 " style="fill: #707893;"></polygon>
</svg></div>
<img class="acl-image-selection__item-image" src="/assets/img/unbranded/4.png" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">Duke's Beer</div>
</div>
</div>
</div>
<script>
const results = [{
id: 'demo-xsd-beer',
title: 'Beer',
imageUrl: '/assets/img/unbranded/1.png',
imageText: 'Beer',
selected: true
},
{
id: 'demo-xsd-lager',
title: 'Lager',
imageUrl: '/assets/img/unbranded/6.png',
imageText: 'Lager',
selected: false
},
{
id: 'demo-xsd-ipa',
title: 'Duke’s Smooth Blend Traditional Awesome Drink',
imageUrl: '/assets/img/unbranded/7.png',
imageText: 'Beer',
selected: false
},
{
id: 'demo-xsd-cider',
title: 'Cider',
imageUrl: '/assets/img/unbranded/5.png',
imageText: 'Cider',
selected: false
},
{
id: 'demo-xsd-whiskey',
title: 'Whiskey',
imageUrl: '/assets/img/unbranded/3.png',
imageText: 'Whiskey',
selected: false
},
{
id: 'demo-xsd-rum',
title: 'Rum',
imageUrl: '/assets/img/unbranded/4.png',
imageText: 'Rum',
selected: true
},
{
id: 'demo-xsd-petron',
title: 'Petron',
imageUrl: '/assets/img/unbranded/2.png',
imageText: 'Petron',
selected: true
},
];
//Result set for updated demo.
const updatedResults = [{
id: 'demo-xsd-beer',
title: 'Beer',
imageUrl: '/assets/img/unbranded/1.png',
imageText: 'Beer',
selected: true
},
{
id: 'demo-xsd-lager',
title: 'Lager',
imageUrl: '/assets/img/unbranded/6.png',
imageText: 'Lager',
selected: false
},
{
id: 'demo-xsd-ipa',
title: 'Duke’s Smooth Blend Traditional Awesome Drink',
imageUrl: '/assets/img/unbranded/7.png',
imageText: 'Beer',
selected: false
},
{
id: 'demo-xsd-cider',
title: 'Cider',
imageUrl: '/assets/img/unbranded/5.png',
imageText: 'Cider',
selected: false
},
{
id: 'demo-xsd-whiskey',
title: 'Whiskey',
imageUrl: '/assets/img/unbranded/3.png',
imageText: 'Whiskey',
selected: false
},
{
id: 'demo-xsd-rum',
title: 'Rum',
imageUrl: '/assets/img/unbranded/4.png',
imageText: 'Rum',
selected: true
},
{
id: 'demo-xsd-petron',
title: 'Petron',
imageUrl: '/assets/img/unbranded/2.png',
imageText: 'Petron',
selected: true
},
{
id: 'demo-xsd-rum',
title: 'Brandy',
imageUrl: '/assets/img/unbranded/2.png',
imageText: 'Rum',
selected: true
},
{
id: 'demo-xsd-petron',
title: 'Cognac',
imageUrl: '/assets/img/unbranded/4.png',
imageText: 'Petron',
selected: true
},
];
const multiImageSelectionElement = document.querySelector('.demo-multi-image-selection');
const multiImageSelection = new acl.ACLImageSelection(multiImageSelectionElement, {
results,
multiSelect: true
});
const imageSelectionElement = document.querySelector('.demo-image-selection');
const imageSelection = new acl.ACLImageSelection(imageSelectionElement, {
results,
multiSelect: false
});
const staticMultiImageSelectionElement = document.querySelector('.demo-static-multi-image-selection');
const staticMultiImageSelection = new acl.ACLImageSelection(staticMultiImageSelectionElement, {
multiSelect: true
});
const staticImageSelectionElement = document.querySelector('.demo-static-image-selection');
const staticImageSelection = new acl.ACLImageSelection(staticImageSelectionElement, {
multiSelect: false
});
// Change events
multiImageSelectionElement.addEventListener('imageselectionchange',
function(e) {
console.log('Multi Image Selection - imageselectionchange');
console.log(e.detail.selectedItems);
}, false);
imageSelectionElement.addEventListener('imageselectionchange',
function(e) {
console.log('Multi Image Selection - imageselectionchange');
console.log(e.detail.selectedItems);
}, false);
staticMultiImageSelectionElement.addEventListener('imageselectionchange',
function(e) {
console.log('Multi Image Selection - imageselectionchange');
console.log(e.detail.selectedItems);
}, false);
staticImageSelectionElement.addEventListener('imageselectionchange',
function(e) {
console.log('Multi Image Selection - imageselectionchange');
console.log(e.detail.selectedItems);
}, false);
// Clear events
multiImageSelectionElement.addEventListener('imageselectioncleared',
function(e) {
console.log('Multi Image Selection CLEARED - imageselectioncleared');
}, false);
imageSelectionElement.addEventListener('imageselectioncleared',
function(e) {
console.log('Image Selection CLEARED - imageselectioncleared');
}, false);
staticMultiImageSelectionElement.addEventListener('imageselectioncleared',
function(e) {
console.log('Static Multi Image Selection CLEARED - imageselectioncleared');
}, false);
staticImageSelectionElement.addEventListener('imageselectioncleared',
function(e) {
console.log('Static Image Selection CLEARED - imageselectioncleared');
}, false);
</script>
<div style="width: 418px; margin: 0 25px 50px">
<h3>Multi Select</h3>
<div style="display:flex">
<div onclick="multiImageSelection.updateResults(updatedResults)"
style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px; cursor: pointer;">
DEMO
Update Results
</div>
<div onclick="multiImageSelection.clearSelection()"
style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px; cursor: pointer;">
DEMO
Clear Selection
</div>
</div>
<div class="acl-image-selection demo-multi-image-selection">
</div>
</div>
<div style="width: 418px; margin: 0 25px 50px">
<h3>Single Select</h3>
<div style="display:flex">
<div onclick="imageSelection.updateResults(updatedResults)"
style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px; cursor: pointer;">
DEMO
Update Results
</div>
<div onclick="imageSelection.clearSelection()"
style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px; cursor: pointer;">
DEMO
Clear Selection
</div>
</div>
<div class="acl-image-selection demo-image-selection">
</div>
</div>
<div style="width: 418px; margin: 0 25px 50px">
<h3>Static Multi Select</h3>
<div style="display:flex">
<div onclick="staticMultiImageSelection.updateResults(updatedResults)"
style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px; cursor: pointer;">
DEMO
Update Results
</div>
<div onclick="staticMultiImageSelection.clearSelection()"
style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px; cursor: pointer;">
DEMO
Clear Selection
</div>
</div>
<div class="acl-image-selection demo-static-multi-image-selection">
<div class="acl-image-selection__item" id="demo-xsd-beer" data-selected="true">
<div class="acl-image-selection__item-selectbox">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490"
style="enable-background:new 0 0 490 490;" xml:space="preserve">
<polygon
points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 "
style="fill: #707893;"></polygon>
</svg>
</div>
<img class="acl-image-selection__item-image" src="/assets/img/unbranded/1.png" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">Duke's Beer</div>
</div>
<div class="acl-image-selection__item" id="demo-xsd-lager">
<div class="acl-image-selection__item-selectbox"><svg version="1.1" id="Capa_1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
<polygon
points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 "
style="fill: #707893;"></polygon>
</svg></div>
<img class="acl-image-selection__item-image" src="/assets/img/unbranded/2.png" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">Duke's Beer</div>
</div>
<div class="acl-image-selection__item" data-selected="false" id="demo-xsd-ipa">
<div class="acl-image-selection__item-selectbox"><svg version="1.1" id="Capa_1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
<polygon
points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 "
style="fill: #707893;"></polygon>
</svg></div>
<img class="acl-image-selection__item-image" src="/assets/img/unbranded/3.png" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">Duke's Beer</div>
</div>
<div class="acl-image-selection__item" data-selected="false" id="demo-xsd-cider">
<div class="acl-image-selection__item-selectbox"><svg version="1.1" id="Capa_1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
<polygon
points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 "
style="fill: #707893;"></polygon>
</svg></div>
<img class="acl-image-selection__item-image" src="/assets/img/unbranded/4.png" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">Duke's Beer</div>
</div>
</div>
</div>
<div style="width: 418px; margin: 0 25px 50px">
<h3>Static Single Select</h3>
<div style="display:flex">
<div onclick="staticImageSelection.updateResults(updatedResults)"
style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px; cursor: pointer;">
DEMO
Update Results
</div>
<div onclick="staticImageSelection.clearSelection()"
style="background-color: rgb(241, 241, 241); font-size: 12px; font-weight:bold; width: 250px; padding: 10px; width: 135px; margin-bottom: 50px; margin-right: 10px; border-radius: 6px; cursor: pointer;">
DEMO
Clear Selection
</div>
</div>
<div class="acl-image-selection demo-static-image-selection">
<div class="acl-image-selection__item" id="demo-xsd-beer" data-selected="true">
<div class="acl-image-selection__item-selectbox">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490"
style="enable-background:new 0 0 490 490;" xml:space="preserve">
<polygon
points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 "
style="fill: #707893;"></polygon>
</svg>
</div>
<img class="acl-image-selection__item-image" src="/assets/img/unbranded/1.png" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">Duke's Beer</div>
</div>
<div class="acl-image-selection__item" id="demo-xsd-lager">
<div class="acl-image-selection__item-selectbox"><svg version="1.1" id="Capa_1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
<polygon
points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 "
style="fill: #707893;"></polygon>
</svg></div>
<img class="acl-image-selection__item-image" src="/assets/img/unbranded/2.png" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">Duke's Beer</div>
</div>
<div class="acl-image-selection__item" data-selected="false" id="demo-xsd-ipa">
<div class="acl-image-selection__item-selectbox"><svg version="1.1" id="Capa_1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
<polygon
points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 "
style="fill: #707893;"></polygon>
</svg></div>
<img class="acl-image-selection__item-image" src="/assets/img/unbranded/3.png" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">Duke's Beer</div>
</div>
<div class="acl-image-selection__item" data-selected="false" id="demo-xsd-cider">
<div class="acl-image-selection__item-selectbox"><svg version="1.1" id="Capa_1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve">
<polygon
points="452.253,28.326 197.831,394.674 29.044,256.875 0,292.469 207.253,461.674 490,54.528 "
style="fill: #707893;"></polygon>
</svg></div>
<img class="acl-image-selection__item-image" src="/assets/img/unbranded/4.png" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">Duke's Beer</div>
</div>
</div>
</div>
<script>
const results = [{
id: 'demo-xsd-beer',
title: 'Beer',
imageUrl: '/assets/img/unbranded/1.png',
imageText: 'Beer',
selected: true
},
{
id: 'demo-xsd-lager',
title: 'Lager',
imageUrl: '/assets/img/unbranded/6.png',
imageText: 'Lager',
selected: false
},
{
id: 'demo-xsd-ipa',
title: 'Duke’s Smooth Blend Traditional Awesome Drink',
imageUrl: '/assets/img/unbranded/7.png',
imageText: 'Beer',
selected: false
},
{
id: 'demo-xsd-cider',
title: 'Cider',
imageUrl: '/assets/img/unbranded/5.png',
imageText: 'Cider',
selected: false
},
{
id: 'demo-xsd-whiskey',
title: 'Whiskey',
imageUrl: '/assets/img/unbranded/3.png',
imageText: 'Whiskey',
selected: false
},
{
id: 'demo-xsd-rum',
title: 'Rum',
imageUrl: '/assets/img/unbranded/4.png',
imageText: 'Rum',
selected: true
},
{
id: 'demo-xsd-petron',
title: 'Petron',
imageUrl: '/assets/img/unbranded/2.png',
imageText: 'Petron',
selected: true
},
];
//Result set for updated demo.
const updatedResults = [{
id: 'demo-xsd-beer',
title: 'Beer',
imageUrl: '/assets/img/unbranded/1.png',
imageText: 'Beer',
selected: true
},
{
id: 'demo-xsd-lager',
title: 'Lager',
imageUrl: '/assets/img/unbranded/6.png',
imageText: 'Lager',
selected: false
},
{
id: 'demo-xsd-ipa',
title: 'Duke’s Smooth Blend Traditional Awesome Drink',
imageUrl: '/assets/img/unbranded/7.png',
imageText: 'Beer',
selected: false
},
{
id: 'demo-xsd-cider',
title: 'Cider',
imageUrl: '/assets/img/unbranded/5.png',
imageText: 'Cider',
selected: false
},
{
id: 'demo-xsd-whiskey',
title: 'Whiskey',
imageUrl: '/assets/img/unbranded/3.png',
imageText: 'Whiskey',
selected: false
},
{
id: 'demo-xsd-rum',
title: 'Rum',
imageUrl: '/assets/img/unbranded/4.png',
imageText: 'Rum',
selected: true
},
{
id: 'demo-xsd-petron',
title: 'Petron',
imageUrl: '/assets/img/unbranded/2.png',
imageText: 'Petron',
selected: true
},
{
id: 'demo-xsd-rum',
title: 'Brandy',
imageUrl: '/assets/img/unbranded/2.png',
imageText: 'Rum',
selected: true
},
{
id: 'demo-xsd-petron',
title: 'Cognac',
imageUrl: '/assets/img/unbranded/4.png',
imageText: 'Petron',
selected: true
},
];
const multiImageSelectionElement = document.querySelector('.demo-multi-image-selection');
const multiImageSelection = new acl.ACLImageSelection(multiImageSelectionElement, { results, multiSelect: true });
const imageSelectionElement = document.querySelector('.demo-image-selection');
const imageSelection = new acl.ACLImageSelection(imageSelectionElement, { results, multiSelect: false });
const staticMultiImageSelectionElement = document.querySelector('.demo-static-multi-image-selection');
const staticMultiImageSelection = new acl.ACLImageSelection(staticMultiImageSelectionElement, { multiSelect: true });
const staticImageSelectionElement = document.querySelector('.demo-static-image-selection');
const staticImageSelection = new acl.ACLImageSelection(staticImageSelectionElement, { multiSelect: false });
// Change events
multiImageSelectionElement.addEventListener('imageselectionchange',
function (e) {
console.log('Multi Image Selection - imageselectionchange');
console.log(e.detail.selectedItems);
}, false);
imageSelectionElement.addEventListener('imageselectionchange',
function (e) {
console.log('Multi Image Selection - imageselectionchange');
console.log(e.detail.selectedItems);
}, false);
staticMultiImageSelectionElement.addEventListener('imageselectionchange',
function (e) {
console.log('Multi Image Selection - imageselectionchange');
console.log(e.detail.selectedItems);
}, false);
staticImageSelectionElement.addEventListener('imageselectionchange',
function (e) {
console.log('Multi Image Selection - imageselectionchange');
console.log(e.detail.selectedItems);
}, false);
// Clear events
multiImageSelectionElement.addEventListener('imageselectioncleared',
function (e) {
console.log('Multi Image Selection CLEARED - imageselectioncleared');
}, false);
imageSelectionElement.addEventListener('imageselectioncleared',
function (e) {
console.log('Image Selection CLEARED - imageselectioncleared');
}, false);
staticMultiImageSelectionElement.addEventListener('imageselectioncleared',
function (e) {
console.log('Static Multi Image Selection CLEARED - imageselectioncleared');
}, false);
staticImageSelectionElement.addEventListener('imageselectioncleared',
function (e) {
console.log('Static Image Selection CLEARED - imageselectioncleared');
}, false);
</script>
/* No context defined. */
.acl-image-selection {
background-color: #f8f8fb;
padding: 12.5px;
display: flex;
flex-wrap: wrap;
&__item {
width: 108px;
height: 128px;
border: 1px solid #e8ebf8;
border-radius: 6px;
background-color: #ffffff;
margin: 7.5px;
text-align: center;
cursor: pointer;
position: relative;
svg {
display: none;
}
&:hover {
cursor: pointer;
box-shadow: 0px 1px 14px 1px rgba(0, 0, 0, 0.11);
svg {
display: block;
opacity: 0.35;
}
}
}
.selected-image {
box-shadow: 0 0 0pt 0.5pt #46ccc2;
svg {
display: block;
}
&:hover {
svg {
opacity: 1 !important;
}
}
}
&__item-image {
height: 74px;
margin: 8px 0;
}
&__divider {
border-top: 1px solid #f7f6fb;
}
&__item-title {
margin: 5px 10px;
font-size: 9px;
letter-spacing: 0;
text-align: left;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 25px;
}
&__item-selectbox {
height: 15px;
width: 15px;
background-color: #f8f8fb;
position: absolute;
margin: 5px;
svg {
width: 10px;
position: absolute;
left: 2px;
bottom: 3px;
}
}
}
class ACLImageSelection {
constructor(imageSelectionEl, options = { results, singleSelect: true, multiSelect: false }) {
this.cssClass = Object.freeze({
SELECTED_IMAGE: 'selected-image',
});
this.imageSelectionEl = imageSelectionEl;
(this.results = options.results), (this.selectedItems = []);
this.isMultiSelect = options.multiSelect;
this.staticResults = [];
if (this.results) {
this.populateResults(this.results);
} else {
this.configureStaticResults();
}
}
populateResults(results) {
results.forEach(item => {
const element = this.createItem(item);
this.imageSelectionEl.appendChild(element);
});
}
configureStaticResults() {
this.staticResults = this.imageSelectionEl.querySelectorAll('.acl-image-selection__item');
this.staticResults.forEach(item => {
if (item.dataset.selected === 'true') {
this.selectItem(item);
}
this.addStaticClickEvent(item);
});
}
addStaticClickEvent(item) {
item.addEventListener('click', () => {
this.itemClickHandler(item);
});
}
updateResults(results) {
this.clearResults();
this.populateResults(results);
}
clearResults() {
this.imageSelectionEl.innerHTML = '';
}
createItem(resultItem) {
const template = `
<div class="acl-image-selection__item-selectbox">
<svg height="8" viewBox="0 0 8 8" width="8" xmlns="http://www.w3.org/2000/svg"><path d="m578.700499 295.615385-2.700499-3.140133.691879-.837828 2.00862 2.302378 4.607683-5.324417.691818.838041z" fill="#707893" transform="translate(-576 -288)"/></svg>
</div>
<img class="acl-image-selection__item-image" alt="${resultItem.imageText}" src="${resultItem.imageUrl}" />
<div class="acl-image-selection__divider"></div>
<div class="acl-image-selection__item-title">${resultItem.title}</div>`;
const item = document.createElement('div');
item.classList.add('acl-image-selection__item');
item.id = resultItem.id;
item.setAttribute('data-selected', resultItem.selected);
item.innerHTML = template;
if (resultItem.selected) {
this.selectItem(item);
}
item.addEventListener('click', () => {
this.itemClickHandler(item);
});
return item;
}
itemClickHandler(item) {
item.classList.contains(this.cssClass.SELECTED_IMAGE) ? this.deSelectItem(item) : this.selectItem(item);
this.dispatchCustomEvent(this.imageSelectionEl, 'imageselectionchange', {
selectedItems: this.selectedItems,
});
}
selectItemById(id) {
const items = this.imageSelectionEl.querySelectorAll('.acl-image-selection__item');
if (!items || items.length <= 0) return;
const itemToSelect = Array.from(items).find(currentItem => id === currentItem.id);
if (itemToSelect) {
this.selectItem(itemToSelect);
}
}
selectItem(item) {
if (!this.isMultiSelect) {
this.clearSelection();
}
item.classList.add(this.cssClass.SELECTED_IMAGE);
this.selectedItems.push(item.id);
}
deSelectItem(item) {
const itemIndex = this.selectedItems.findIndex(selectedItem => selectedItem.id === item.id);
this.selectedItems.splice(itemIndex, 1);
item.classList.remove(this.cssClass.SELECTED_IMAGE);
}
clearSelection() {
this.selectedElements = this.imageSelectionEl.querySelectorAll('.acl-image-selection__item');
this.selectedElements.forEach(item => {
item.classList.remove(this.cssClass.SELECTED_IMAGE);
});
this.selectedItems = [];
this.dispatchCustomEvent(this.imageSelectionEl, 'imageselectioncleared', {
id: this.imageSelectionEl.id,
});
}
dispatchCustomEvent(element, eventName, detailObj) {
element.dispatchEvent(
new CustomEvent(eventName, {
detail: detailObj,
})
);
}
}
export { ACLImageSelection };
No notes defined.