<div class="demo-container">
<div class="acl-asset-card acl-asset-card-demo">
<div class="acl-asset-card__preview-container">
<div class="acl-asset-card__preview-image" style="background-image: url('/assets/img/asset-example-img.png');"></div>
<div class="acl-asset-card__overlay">
<div class="acl-asset-card__overlay-header">
<label class="container acl-asset-card__select">
<input type="checkbox" class="acl-asset-card__select-input">
<span class="acl-asset-card__select-box"></span>
</label>
<div class="acl-asset-card__menu">
<div class="acl-dropdown acl-button-dropdown acl-dropdown-demo" id="single-select-dropdown-example-id" data-dropdown-type="button-single-select">
<div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right" data-prevent-dropdown-collapse>
<div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
<div class="acl-button__icon-button acl-button__icon-button--white-icon acl-button__icon-button--icon-colour-black">
<i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
</div>
</div>
<div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
<div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;">
</div>
</div>
</div>
</div>
</div>
<div class="acl-asset-card__overlay-button">Preview</div>
</div>
</div>
<div class="acl-asset-card__footer">
<div class="acl-asset-card__footer-label">
<input class="acl-asset-card__footer-label-input" spellcheck="false" value="asset-demo-image.png" />
</div>
<a href="" class="acl-asset-card__footer-button" download> <i class="aforza-icons">acl_download</i></a>
</div>
</div>
<div style="margin: 25px 0">
<h3>Example</h3>
<div style="width: 500px;display:flex;">
<button onclick="assetCard.uploading()">Uploading</button>
<button onclick="assetCard.uploaded()">Uploaded</button>
<button onclick="assetCard.stopUploading()">Stop Uploading</button>
</div>
</div>
</div>
<hr style="margin: 25px; border: 2px solid #f0f0f0">
<h3>Examples of various image sizes and file types</h3>
<div class="demo-container">
<div class="acl-asset-card acl-asset-card-demo-2">
<div class="acl-asset-card__preview-container">
<div class="acl-asset-card__file-info">
<div class="acl-asset-card__file-type">
<img src="/assets/img/file-type-icons/word-icon.svg" />
</div>
</div>
<div class="acl-asset-card__overlay">
<div class="acl-asset-card__overlay-header">
<label class="container acl-asset-card__select">
<input type="checkbox" class="acl-asset-card__select-input">
<span class="acl-asset-card__select-box"></span>
</label>
<div class="acl-asset-card__menu">
<div class="acl-dropdown acl-button-dropdown acl-dropdown-demo" id="single-select-dropdown-example-id" data-dropdown-type="button-single-select">
<div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right" data-prevent-dropdown-collapse>
<div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
<div class="acl-button__icon-button acl-button__icon-button--white-icon acl-button__icon-button--icon-colour-black">
<i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
</div>
</div>
<div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
<div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;">
</div>
</div>
</div>
</div>
</div>
<div class="acl-asset-card__overlay-button">Preview</div>
</div>
</div>
<div class="acl-asset-card__footer">
<div class="acl-asset-card__footer-label">
<input class="acl-asset-card__footer-label-input" spellcheck="false" value="asset-demo-image.png" />
</div>
<a href="" download class="acl-asset-card__footer-button"> <i class="aforza-icons">acl_download</i></a>
</div>
</div>
<div class="acl-asset-card acl-asset-card-demo-3" data-prevent-dropdown-collapse="true">
<div class="acl-asset-card__preview-container">
<div class="acl-asset-card__preview-image" style="background-image: url('/assets/img/asset-example-portrait-img.png');"></div>
<div class="acl-asset-card__overlay">
<div class="acl-asset-card__overlay-header">
<label class="container acl-asset-card__select">
<input type="checkbox" class="acl-asset-card__select-input">
<span class="acl-asset-card__select-box"></span>
</label>
<div class="acl-asset-card__menu">
<div class="acl-dropdown acl-button-dropdown acl-dropdown-demo" id="single-select-dropdown-example-id" data-dropdown-type="button-single-select">
<div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right" data-prevent-dropdown-collapse>
<div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
<div class="acl-button__icon-button acl-button__icon-button--white-icon acl-button__icon-button--icon-colour-black">
<i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
</div>
</div>
<div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
<div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;">
</div>
</div>
</div>
</div>
</div>
<div class="acl-asset-card__overlay-button">Preview</div>
</div>
</div>
<div class="acl-asset-card__footer">
<div class="acl-asset-card__footer-label">
<input class="acl-asset-card__footer-label-input" spellcheck="false" value="asset-demo-image.png" />
</div>
<a class="acl-asset-card__footer-button" href="" download> <i class="aforza-icons">acl_download</i></a>
</div>
</div>
<div class="acl-asset-card acl-asset-card-demo-4" data-prevent-dropdown-collapse="true">
<div class="acl-asset-card__preview-container">
<div class="acl-asset-card__preview-image" style="background-image: url('/assets/img/asset-example-portrait-img-2.png');"></div>
<div class="acl-asset-card__overlay">
<div class="acl-asset-card__overlay-header">
<label class="container acl-asset-card__select">
<input type="checkbox" class="acl-asset-card__select-input">
<span class="acl-asset-card__select-box"></span>
</label>
<div class="acl-asset-card__menu">
<div class="acl-dropdown acl-button-dropdown acl-dropdown-demo" id="single-select-dropdown-example-id" data-dropdown-type="button-single-select">
<div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right" data-prevent-dropdown-collapse>
<div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
<div class="acl-button__icon-button acl-button__icon-button--white-icon acl-button__icon-button--icon-colour-black">
<i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
</div>
</div>
<div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
<div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;">
</div>
</div>
</div>
</div>
</div>
<div class="acl-asset-card__overlay-button">Preview</div>
</div>
</div>
<div class="acl-asset-card__footer">
<div class="acl-asset-card__footer-label">
<input class="acl-asset-card__footer-label-input" spellcheck="false" value="asset-demo-image.png" />
</div>
<a class="acl-asset-card__footer-button" href="" download> <i class="aforza-icons">acl_download</i></a>
</div>
</div>
</div>
<hr style="margin: 25px; border: 2px solid #f0f0f0">
<h3>Read-only Asset Card </h3>
<div class="demo-container">
<div class="acl-asset-card acl-asset-card-demo-5" data-prevent-dropdown-collapse="true">
<div class="acl-asset-card__preview-container">
<div class="acl-asset-card__preview-image" style="background-image: url('/assets/img/asset-example-portrait-img.png');"></div>
<div class="acl-asset-card__overlay">
<div class="acl-asset-card__overlay-header">
<label class="container acl-asset-card__select">
<input type="checkbox" class="acl-asset-card__select-input">
<span class="acl-asset-card__select-box"></span>
</label>
<div class="acl-asset-card__menu">
<div class="acl-dropdown acl-button-dropdown acl-dropdown-demo" id="single-select-dropdown-example-id" data-dropdown-type="button-single-select">
<div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right" data-prevent-dropdown-collapse>
<div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
<div class="acl-button__icon-button acl-button__icon-button--white-icon acl-button__icon-button--icon-colour-black">
<i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
</div>
</div>
<div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
<div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;">
</div>
</div>
</div>
</div>
</div>
<div class="acl-asset-card__overlay-button">Preview</div>
</div>
</div>
<div class="acl-asset-card__footer">
<div class="acl-asset-card__footer-label--read-only">
<!-- For read only state, render div instead of input -->
<div class="acl-tooltip acl-asset-card__tooltip acl-tooltip--left-aligned" data-acl-tooltip="Screenshot 2021-10-21 at 14.48.07.png">
<div class="acl-asset-card__footer-filename">Screenshot 2021-10-21 at 14.48.07.png</div>
</div>
</div>
<a href="" download class="acl-asset-card__footer-button"> <i class="aforza-icons">acl_download</i></a>
</div>
</div>
</div>
<style>
.demo-container {
display: flex;
justify-content: space-between;
}
</style>
<script>
const results = [{
id: 'prev',
value: 'Preview',
},
{
id: 'copy',
value: 'Copy Link'
},
{
id: 'download',
value: 'Download'
},
{
id: 'rename',
value: 'Rename'
},
{
id: 'delete',
value: 'Delete'
}
];
const readOnlyResults = [{
id: 'prev',
value: 'Preview',
},
{
id: 'copy',
value: 'Copy Link'
},
{
id: 'download',
value: 'Download'
},
];
// Primary Example //
const assetCardEl = document.querySelector(".acl-asset-card-demo");
const assetCardDropdownEl = assetCardEl.querySelector('.acl-dropdown-demo');
const assetCard = new acl.ACLAssetCard(assetCardEl, results, 'ASSETDEMO1', 5000);
assetCardEl.addEventListener('filenamechange',
function(e) {
console.log('asset ID:', e.detail.assetId, 'filenamechange:', e.detail.value, );
}, false);
assetCardEl.addEventListener('assetselected',
function(e) {
console.log('Asset selected - asset ID:', e.detail.assetId);
}, false);
assetCardEl.addEventListener('assetdeselected',
function(e) {
console.log('Asset deselected - asset ID:', e.detail.assetId);
}, false);
assetCardDropdownEl.addEventListener('dropdownitemclicked',
function(e) {
console.log('dropdownitemclicked', e.detail);
}, false);
// Primary Example - END//
// Secondary Examples //
// Example 2 //
const assetCardEl2 = document.querySelector(".acl-asset-card-demo-2");
const assetCardDropdownEl2 = assetCardEl2.querySelector('.acl-dropdown-demo');
const assetCard2 = new acl.ACLAssetCard(assetCardEl2, results, 'ASSETDEMO2');
assetCardEl2.addEventListener('filenamechange',
function(e) {
console.log('asset ID:', e.detail.assetId, 'filenamechange:', e.detail.value, );
}, false);
assetCardEl2.addEventListener('assetselected',
function(e) {
console.log('Asset selected - asset ID:', e.detail.assetId);
}, false);
assetCardEl2.addEventListener('assetdeselected',
function(e) {
console.log('Asset deselected - asset ID:', e.detail.assetId);
}, false);
assetCardDropdownEl2.addEventListener('dropdownitemclicked',
function(e) {
console.log('dropdownitemclicked', e.detail);
}, false);
// Example 2 - END //
// Example 3 //
const assetCardEl3 = document.querySelector(".acl-asset-card-demo-3");
const assetCardDropdownEl3 = assetCardEl3.querySelector('.acl-dropdown-demo');
const assetCard3 = new acl.ACLAssetCard(assetCardEl3, results, 'ASSETDEMO3');
assetCardEl3.addEventListener('filenamechange',
function(e) {
console.log('asset ID:', e.detail.assetId, 'filenamechange:', e.detail.value, );
}, false);
assetCardEl3.addEventListener('assetselected',
function(e) {
console.log('Asset selected - asset ID:', e.detail.assetId);
}, false);
assetCardEl3.addEventListener('assetdeselected',
function(e) {
console.log('Asset deselected - asset ID:', e.detail.assetId);
}, false);
assetCardDropdownEl3.addEventListener('dropdownitemclicked',
function(e) {
console.log('dropdownitemclicked', e.detail);
}, false);
// Example 3 - END //
// Example 4 //
const assetCardEl4 = document.querySelector(".acl-asset-card-demo-4");
const assetCardDropdownEl4 = assetCardEl4.querySelector('.acl-dropdown-demo');
const assetCard4 = new acl.ACLAssetCard(assetCardEl4, results, 'ASSETDEMO4');
assetCardEl4.addEventListener('filenamechange',
function(e) {
console.log('asset ID:', e.detail.assetId, 'filenamechange:', e.detail.value, );
}, false);
assetCardEl4.addEventListener('assetselected',
function(e) {
console.log('Asset selected - asset ID:', e.detail.assetId);
}, false);
assetCardEl4.addEventListener('assetdeselected',
function(e) {
console.log('Asset deselected - asset ID:', e.detail.assetId);
}, false);
assetCardDropdownEl4.addEventListener('dropdownitemclicked',
function(e) {
console.log('dropdownitemclicked', e.detail);
}, false);
// Example 4 - END //
// Example 5 //
const assetCardEl5 = document.querySelector(".acl-asset-card-demo-5");
const assetCardDropdownEl5 = assetCardEl5.querySelector('.acl-dropdown-demo');
const assetCard5 = new acl.ACLAssetCard(assetCardEl5, readOnlyResults, 'ASSETDEMO5');
assetCardEl5.addEventListener('filenamechange',
function(e) {
console.log('asset ID:', e.detail.assetId, 'filenamechange:', e.detail.value);
}, false);
assetCardEl5.addEventListener('assetselected',
function(e) {
console.log('Asset selected - asset ID:', e.detail.assetId);
}, false);
assetCardEl5.addEventListener('assetdeselected',
function(e) {
console.log('Asset deselected - asset ID:', e.detail.assetId);
}, false);
assetCardDropdownEl5.addEventListener('dropdownitemclicked',
function(e) {
console.log('dropdownitemclicked', e.detail);
}, false);
// Example 4 - END //
// Secondary Examples - END //
</script>
<div class="demo-container">
<div class="acl-asset-card acl-asset-card-demo">
<div class="acl-asset-card__preview-container">
<div class="acl-asset-card__preview-image" style="background-image: url('/assets/img/asset-example-img.png');"></div>
<div class="acl-asset-card__overlay">
<div class="acl-asset-card__overlay-header">
<label class="container acl-asset-card__select">
<input type="checkbox" class="acl-asset-card__select-input">
<span class="acl-asset-card__select-box"></span>
</label>
<div class="acl-asset-card__menu"><div class="acl-dropdown acl-button-dropdown acl-dropdown-demo" id="single-select-dropdown-example-id" data-dropdown-type="button-single-select">
<div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right" data-prevent-dropdown-collapse>
<div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
<div class="acl-button__icon-button acl-button__icon-button--white-icon acl-button__icon-button--icon-colour-black">
<i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
</div>
</div>
<div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
<div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;">
</div>
</div>
</div></div>
</div>
<div class="acl-asset-card__overlay-button">Preview</div>
</div>
</div>
<div class="acl-asset-card__footer">
<div class="acl-asset-card__footer-label">
<input class="acl-asset-card__footer-label-input" spellcheck="false" value="asset-demo-image.png"/>
</div>
<a href="" class="acl-asset-card__footer-button" download> <i class="aforza-icons">acl_download</i></a>
</div>
</div>
<div style="margin: 25px 0">
<h3>Example</h3>
<div style="width: 500px;display:flex;">
<button onclick="assetCard.uploading()">Uploading</button>
<button onclick="assetCard.uploaded()">Uploaded</button>
<button onclick="assetCard.stopUploading()">Stop Uploading</button>
</div>
</div>
</div>
<hr style="margin: 25px; border: 2px solid #f0f0f0">
<h3>Examples of various image sizes and file types</h3>
<div class="demo-container">
<div class="acl-asset-card acl-asset-card-demo-2">
<div class="acl-asset-card__preview-container">
<div class="acl-asset-card__file-info">
<div class="acl-asset-card__file-type">
<img src="/assets/img/file-type-icons/word-icon.svg"/>
</div>
</div>
<div class="acl-asset-card__overlay">
<div class="acl-asset-card__overlay-header">
<label class="container acl-asset-card__select">
<input type="checkbox" class="acl-asset-card__select-input">
<span class="acl-asset-card__select-box"></span>
</label>
<div class="acl-asset-card__menu"><div class="acl-dropdown acl-button-dropdown acl-dropdown-demo" id="single-select-dropdown-example-id" data-dropdown-type="button-single-select">
<div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right" data-prevent-dropdown-collapse>
<div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
<div class="acl-button__icon-button acl-button__icon-button--white-icon acl-button__icon-button--icon-colour-black">
<i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
</div>
</div>
<div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
<div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;">
</div>
</div>
</div></div>
</div>
<div class="acl-asset-card__overlay-button">Preview</div>
</div>
</div>
<div class="acl-asset-card__footer">
<div class="acl-asset-card__footer-label">
<input class="acl-asset-card__footer-label-input" spellcheck="false" value="asset-demo-image.png"/>
</div>
<a href="" download class="acl-asset-card__footer-button"> <i class="aforza-icons">acl_download</i></a>
</div>
</div>
<div class="acl-asset-card acl-asset-card-demo-3" data-prevent-dropdown-collapse="true">
<div class="acl-asset-card__preview-container">
<div class="acl-asset-card__preview-image" style="background-image: url('/assets/img/asset-example-portrait-img.png');"></div>
<div class="acl-asset-card__overlay">
<div class="acl-asset-card__overlay-header">
<label class="container acl-asset-card__select">
<input type="checkbox" class="acl-asset-card__select-input">
<span class="acl-asset-card__select-box"></span>
</label>
<div class="acl-asset-card__menu"><div class="acl-dropdown acl-button-dropdown acl-dropdown-demo" id="single-select-dropdown-example-id" data-dropdown-type="button-single-select">
<div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right" data-prevent-dropdown-collapse>
<div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
<div class="acl-button__icon-button acl-button__icon-button--white-icon acl-button__icon-button--icon-colour-black">
<i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
</div>
</div>
<div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
<div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;">
</div>
</div>
</div></div>
</div>
<div class="acl-asset-card__overlay-button">Preview</div>
</div>
</div>
<div class="acl-asset-card__footer">
<div class="acl-asset-card__footer-label">
<input class="acl-asset-card__footer-label-input" spellcheck="false" value="asset-demo-image.png"/>
</div>
<a class="acl-asset-card__footer-button" href="" download > <i class="aforza-icons">acl_download</i></a>
</div>
</div>
<div class="acl-asset-card acl-asset-card-demo-4" data-prevent-dropdown-collapse="true">
<div class="acl-asset-card__preview-container">
<div class="acl-asset-card__preview-image" style="background-image: url('/assets/img/asset-example-portrait-img-2.png');"></div>
<div class="acl-asset-card__overlay">
<div class="acl-asset-card__overlay-header">
<label class="container acl-asset-card__select">
<input type="checkbox" class="acl-asset-card__select-input">
<span class="acl-asset-card__select-box"></span>
</label>
<div class="acl-asset-card__menu"><div class="acl-dropdown acl-button-dropdown acl-dropdown-demo" id="single-select-dropdown-example-id" data-dropdown-type="button-single-select">
<div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right" data-prevent-dropdown-collapse>
<div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
<div class="acl-button__icon-button acl-button__icon-button--white-icon acl-button__icon-button--icon-colour-black">
<i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
</div>
</div>
<div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
<div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;">
</div>
</div>
</div></div>
</div>
<div class="acl-asset-card__overlay-button">Preview</div>
</div>
</div>
<div class="acl-asset-card__footer">
<div class="acl-asset-card__footer-label">
<input class="acl-asset-card__footer-label-input" spellcheck="false" value="asset-demo-image.png"/>
</div>
<a class="acl-asset-card__footer-button" href="" download > <i class="aforza-icons">acl_download</i></a>
</div>
</div>
</div>
<hr style="margin: 25px; border: 2px solid #f0f0f0">
<h3>Read-only Asset Card </h3>
<div class="demo-container">
<div class="acl-asset-card acl-asset-card-demo-5" data-prevent-dropdown-collapse="true">
<div class="acl-asset-card__preview-container">
<div class="acl-asset-card__preview-image" style="background-image: url('/assets/img/asset-example-portrait-img.png');"></div>
<div class="acl-asset-card__overlay">
<div class="acl-asset-card__overlay-header">
<label class="container acl-asset-card__select">
<input type="checkbox" class="acl-asset-card__select-input">
<span class="acl-asset-card__select-box"></span>
</label>
<div class="acl-asset-card__menu"><div class="acl-dropdown acl-button-dropdown acl-dropdown-demo" id="single-select-dropdown-example-id" data-dropdown-type="button-single-select">
<div class="acl-dropdown__cta acl-button-dropdown__field acl-button-dropdown__field--right" data-prevent-dropdown-collapse>
<div class="acl-dropdown__cta-link acl-button-dropdown__cta-link"></div>
<div class="acl-button__icon-button acl-button__icon-button--white-icon acl-button__icon-button--icon-colour-black">
<i class="aforza-icons acl-button__icon-label acl-helper--rotate-half ">acl_more_options</i>
</div>
</div>
<div class="acl-dropdown__results acl-button-dropdown__results acl-button-dropdown__results--small-top-margin" data-dropdown-select="true">
<div class="acl-dropdown__items acl-button-dropdown__items" style="max-height: 250px;">
</div>
</div>
</div></div>
</div>
<div class="acl-asset-card__overlay-button">Preview</div>
</div>
</div>
<div class="acl-asset-card__footer">
<div class="acl-asset-card__footer-label--read-only">
{{!-- <input class="acl-asset-card__footer-label-input" spellcheck="false" value="asset-demo-image.png"/> --}}
<!-- For read only state, render div instead of input -->
<div class="acl-tooltip acl-asset-card__tooltip acl-tooltip--left-aligned" data-acl-tooltip="Screenshot 2021-10-21 at 14.48.07.png">
<div class="acl-asset-card__footer-filename">Screenshot 2021-10-21 at 14.48.07.png</div>
</div>
</div>
<a href="" download class="acl-asset-card__footer-button"> <i class="aforza-icons">acl_download</i></a>
</div>
</div>
</div>
<style>
.demo-container {
display: flex;
justify-content: space-between;
}
</style>
<script>
const results = [{
id: 'prev',
value: 'Preview',
},
{
id: 'copy',
value: 'Copy Link'
},
{
id: 'download',
value: 'Download'
},
{
id: 'rename',
value: 'Rename'
},
{
id: 'delete',
value: 'Delete'
}
];
const readOnlyResults = [{
id: 'prev',
value: 'Preview',
},
{
id: 'copy',
value: 'Copy Link'
},
{
id: 'download',
value: 'Download'
},
];
// Primary Example //
const assetCardEl = document.querySelector(".acl-asset-card-demo");
const assetCardDropdownEl = assetCardEl.querySelector('.acl-dropdown-demo');
const assetCard = new acl.ACLAssetCard(assetCardEl, results, 'ASSETDEMO1', 5000);
assetCardEl.addEventListener('filenamechange',
function(e) {
console.log('asset ID:', e.detail.assetId, 'filenamechange:', e.detail.value, );
}, false);
assetCardEl.addEventListener('assetselected',
function(e) {
console.log('Asset selected - asset ID:', e.detail.assetId);
}, false);
assetCardEl.addEventListener('assetdeselected',
function(e) {
console.log('Asset deselected - asset ID:', e.detail.assetId );
}, false);
assetCardDropdownEl.addEventListener('dropdownitemclicked',
function(e) {
console.log('dropdownitemclicked', e.detail);
}, false);
// Primary Example - END//
// Secondary Examples //
// Example 2 //
const assetCardEl2 = document.querySelector(".acl-asset-card-demo-2");
const assetCardDropdownEl2 = assetCardEl2.querySelector('.acl-dropdown-demo');
const assetCard2 = new acl.ACLAssetCard(assetCardEl2, results, 'ASSETDEMO2');
assetCardEl2.addEventListener('filenamechange',
function(e) {
console.log('asset ID:', e.detail.assetId, 'filenamechange:', e.detail.value, );
}, false);
assetCardEl2.addEventListener('assetselected',
function(e) {
console.log('Asset selected - asset ID:', e.detail.assetId);
}, false);
assetCardEl2.addEventListener('assetdeselected',
function(e) {
console.log('Asset deselected - asset ID:', e.detail.assetId );
}, false);
assetCardDropdownEl2.addEventListener('dropdownitemclicked',
function(e) {
console.log('dropdownitemclicked', e.detail);
}, false);
// Example 2 - END //
// Example 3 //
const assetCardEl3 = document.querySelector(".acl-asset-card-demo-3");
const assetCardDropdownEl3 = assetCardEl3.querySelector('.acl-dropdown-demo');
const assetCard3 = new acl.ACLAssetCard(assetCardEl3, results, 'ASSETDEMO3');
assetCardEl3.addEventListener('filenamechange',
function(e) {
console.log('asset ID:', e.detail.assetId, 'filenamechange:', e.detail.value, );
}, false);
assetCardEl3.addEventListener('assetselected',
function(e) {
console.log('Asset selected - asset ID:', e.detail.assetId);
}, false);
assetCardEl3.addEventListener('assetdeselected',
function(e) {
console.log('Asset deselected - asset ID:', e.detail.assetId );
}, false);
assetCardDropdownEl3.addEventListener('dropdownitemclicked',
function(e) {
console.log('dropdownitemclicked', e.detail);
}, false);
// Example 3 - END //
// Example 4 //
const assetCardEl4 = document.querySelector(".acl-asset-card-demo-4");
const assetCardDropdownEl4 = assetCardEl4.querySelector('.acl-dropdown-demo');
const assetCard4 = new acl.ACLAssetCard(assetCardEl4, results, 'ASSETDEMO4');
assetCardEl4.addEventListener('filenamechange',
function(e) {
console.log('asset ID:', e.detail.assetId, 'filenamechange:', e.detail.value, );
}, false);
assetCardEl4.addEventListener('assetselected',
function(e) {
console.log('Asset selected - asset ID:', e.detail.assetId);
}, false);
assetCardEl4.addEventListener('assetdeselected',
function(e) {
console.log('Asset deselected - asset ID:', e.detail.assetId );
}, false);
assetCardDropdownEl4.addEventListener('dropdownitemclicked',
function(e) {
console.log('dropdownitemclicked', e.detail);
}, false);
// Example 4 - END //
// Example 5 //
const assetCardEl5 = document.querySelector(".acl-asset-card-demo-5");
const assetCardDropdownEl5 = assetCardEl5.querySelector('.acl-dropdown-demo');
const assetCard5 = new acl.ACLAssetCard(assetCardEl5, readOnlyResults, 'ASSETDEMO5');
assetCardEl5.addEventListener('filenamechange',
function(e) {
console.log('asset ID:', e.detail.assetId, 'filenamechange:', e.detail.value );
}, false);
assetCardEl5.addEventListener('assetselected',
function(e) {
console.log('Asset selected - asset ID:', e.detail.assetId);
}, false);
assetCardEl5.addEventListener('assetdeselected',
function(e) {
console.log('Asset deselected - asset ID:', e.detail.assetId );
}, false);
assetCardDropdownEl5.addEventListener('dropdownitemclicked',
function(e) {
console.log('dropdownitemclicked', e.detail);
}, false);
// Example 4 - END //
// Secondary Examples - END //
</script>
/* No context defined. */
.acl-asset-card {
border: 1px solid #f0f0f0;
width: 228px;
height: 180px;
border-radius: 6px;
&--uploading {
opacity: 0.45;
pointer-events: none;
transition: all 0.5s;
.acl-asset-card__footer-button {
display: none;
}
}
&--uploaded {
border: 1px solid #46ccc2;
position: relative;
transition: all 0.5s;
&:before {
content: '';
position: absolute;
top: -6.5px;
left: -7px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #46ccc2;
border: 2px solid #ffffff;
z-index: 1;
}
}
&__preview-container {
display: flex;
justify-content: center;
position: relative;
&:hover {
.acl-asset-card__overlay {
opacity: 1;
}
}
&--active {
.acl-asset-card__overlay {
opacity: 1;
}
}
}
&__overlay {
display: flex;
opacity: 0;
background-color: rgba(0, 0, 0, 0.75);
position: absolute;
width: 100%;
height: 100%;
border-radius: 6px 6px 0 0;
justify-content: center;
align-items: center;
transition: all 0.5s;
&-header {
position: absolute;
top: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
&-button {
border: 1px solid $white;
border-radius: 4px;
color: $white;
padding: 8px 23px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
user-select: none;
cursor: pointer;
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
&--show {
opacity: 1;
.acl-asset-card__overlay-button,
.acl-asset-card__menu {
display: none;
}
}
}
&__preview-image {
width: 212px;
height: 120px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border-radius: 4px;
margin: 8.5px;
}
&__file-info {
display: flex;
justify-content: center;
align-items: center;
width: 212px;
height: 120px;
margin: 8.5px;
}
&__file-type {
height: 70px;
width: 55px;
border-radius: 4px;
background-color: #f8f8fb;
box-shadow: 0 1px 2px 0 rgba(112, 120, 147, 0.2);
display: flex;
justify-content: center;
align-items: center;
* {
height: 35px;
}
}
&__footer {
border-top: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
&-label {
font-size: 12px;
width: 200px;
height: 17px;
resize: none;
border: none;
margin: 12px 10px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
input {
border: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: 12px;
}
&:hover {
&::after {
font-family: 'Aforza-icon-font';
content: '\e907';
font-size: 20px;
text-align: center;
transition: all 0.35s;
color: #cacfe2;
position: absolute;
top: 10px;
right: 45px;
}
}
&--read-only {
&:hover::after {
content: none;
}
&.acl-asset-card--editable::after {
content: none;
}
}
}
&-filename {
font-size: 12px;
height: 17px;
width: 140px;
resize: none;
border: none;
margin: 12px 10px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
&-button {
border-radius: 6px;
min-width: 30px;
max-width: 30px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin: 0 10px;
text-decoration: none;
i {
color: #b1b7cd;
font-size: 16px;
user-select: none;
}
&:hover {
i {
color: #707893;
}
}
}
}
&__select {
height: 18px;
width: 18px;
margin: 10px 10px 0;
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
border: 50%;
font-size: 22px;
user-select: none;
input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
input:checked ~ .acl-asset-card__select-box {
background-color: $blue;
border: 1px solid $blue;
.acl-asset-card__overlay {
opacity: 1;
}
}
input:checked ~ .acl-asset-card__select-box:after {
display: block;
}
&:hover {
input ~ .acl-asset-card__select-box {
border: 1px solid $white;
}
input:checked ~ .acl-asset-card__select-box {
border: 1px solid $blue;
}
}
&--hide {
display: none;
}
}
&__select-box {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
border-radius: 50%;
border: 1px solid #ffffffb6;
cursor: pointer;
&:after {
display: none;
content: '';
position: absolute;
left: 6.45px;
top: 1px;
width: 4px;
height: 11px;
border: solid $white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
}
&__menu {
margin: 10px;
}
&--editable {
text-overflow: unset;
overflow: scroll;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
&::after {
content: '';
width: 165px;
height: 1px;
position: absolute;
bottom: 8px;
left: 8px;
background-image: url("data:image/svg+xml,%3Csvg enable-background='new 0 0 164 2' viewBox='0 0 164 2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23979797FF' d='m164 1.5h-2v-1h2zm-5 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3zm-6 0h-3v-1h3z'/%3E%3C/svg%3E");
background-size: cover;
}
&::selection {
background: #e5f7ff;
}
&::-webkit-scrollbar {
display: none;
}
&:hover {
&:after {
content: '';
bottom: 8px;
top: unset;
}
}
}
&__tooltip {
&:before {
margin-left: 5px;
max-width: 140px;
top: auto;
bottom: 35px;
transform: translateX(-50%) scale(0);
transform-origin: bottom center;
}
}
}
import { ACLDropdownSingleSelect } from '../../dropdown/single-select-dropdown';
class ACLAssetCard {
constructor(assetCardEl, dropdownResults, assetId, uploadedStateTimeout = null) {
this.assetCardEl = assetCardEl;
this.dropdownResults = dropdownResults;
this.assetId = assetId;
this.uploadedStateTimeout = uploadedStateTimeout;
this.originalFilename;
this.filenameEditable;
this.shouldCloseDropdown = true;
this.shouldRemoveHoverStyles = true;
this.selectors = Object.freeze({
ASSET_CARD: 'acl-asset-card',
ASSET_CARD_PREVIEW_CONTAINER_ACTIVE: 'acl-asset-card__preview-container--active',
SELECT_BOX: 'acl-asset-card__select-input',
FILENAME_CONTAINER: 'acl-asset-card__footer-label',
FILENAME_INPUT: 'acl-asset-card__footer-label-input',
DROPDOWN: 'acl-dropdown',
OVERLAY: 'acl-asset-card__overlay',
PREVENT_DROPDOWN_COLLAPSE: '[data-prevent-dropdown-collapse]',
});
this.modifiers = Object.freeze({
SHOW: '--show',
UPLOADING: '--uploading',
UPLOADED: '--uploaded',
EDITABLE: '--editable',
});
this.events = Object.freeze({
ASSET_SELECTED: 'assetselected',
ASSET_DESELECTED: 'assetdeselected',
CLICK: 'click',
CHANGE: 'change',
ENTER_KEY_RENAME: 'enterkeyrename',
FILE_NAME_CHANGE: 'filenamechange',
KEY_DOWN: 'keydown',
MOUSE_ENTER: 'mouseenter',
MOUSE_LEAVE: 'mouseleave',
});
this.filenameEl = this.assetCardEl.querySelector(`.${this.selectors.FILENAME_CONTAINER}`);
this.filenameInput = this.assetCardEl.querySelector(`.${this.selectors.FILENAME_INPUT}`);
this.selectBoxEl = this.assetCardEl.querySelector(`.${this.selectors.SELECT_BOX}`);
this.overlayEl = this.assetCardEl.querySelector(`.${this.selectors.OVERLAY}`);
this.preventDropdownCollapseElements = this.assetCardEl.querySelectorAll(
this.selectors.PREVENT_DROPDOWN_COLLAPSE
);
this.constructDropdown();
this.setEventListeners();
}
setEventListeners() {
if (this.filenameEl) this.filenameEl.addEventListener(this.events.CLICK, this.enableFilenameEditing.bind(this));
if (this.filenameInput)
this.filenameInput.addEventListener(this.events.KEY_DOWN, this.disableMultilineFilename.bind(this));
this.selectBoxEl.addEventListener(this.events.CHANGE, this.handleSelectBoxInteraction.bind(this));
this.overlayEl.addEventListener(this.events.MOUSE_ENTER, this.handleAssetCardMouseEnter.bind(this));
this.overlayEl.addEventListener(this.events.MOUSE_LEAVE, this.handleAssetCardMouseLeave.bind(this));
this.overlayEl.addEventListener(this.events.CLICK, this.handleAssetCardOverlayClick.bind(this));
document.addEventListener(this.events.CLICK, event => {
this.handleDocumentClick(event);
});
this.preventDropdownCollapseElements.forEach(item => {
item.addEventListener(this.events.CLICK, () => {
this.shouldCloseDropdown = false;
});
});
}
handleAssetCardMouseEnter() {
this.assetCardEl.classList.add(this.selectors.ASSET_CARD_PREVIEW_CONTAINER_ACTIVE);
}
handleAssetCardMouseLeave() {
if (!this.dropdown || !this.dropdown.isDropdownOpen)
this.assetCardEl.classList.remove(this.selectors.ASSET_CARD_PREVIEW_CONTAINER_ACTIVE);
}
handleAssetCardOverlayClick() {
this.shouldRemoveHoverStyles = false;
}
handleDocumentClick(event) {
if (this.dropdown && this.shouldCloseDropdown) {
this.dropdown.closeDropdown();
}
if (this.shouldRemoveHoverStyles) {
this.assetCardEl.classList.remove(this.selectors.ASSET_CARD_PREVIEW_CONTAINER_ACTIVE);
}
this.shouldCloseDropdown = true;
this.shouldRemoveHoverStyles = true;
}
handleSelectBoxInteraction(event) {
const action = event.currentTarget.checked ? this.events.ASSET_SELECTED : this.events.ASSET_DESELECTED;
event.currentTarget.checked
? this.overlayEl.classList.add(`${this.selectors.OVERLAY}${this.modifiers.SHOW}`)
: this.overlayEl.classList.remove(`${this.selectors.OVERLAY}${this.modifiers.SHOW}`);
this.dispatchSelectedEvent(action);
}
enableFilenameEditing(event) {
this.originalFilename = this.filenameInput.value;
this.filenameEditable = true;
this.filenameEl.classList.add(`${this.selectors.ASSET_CARD}${this.modifiers.EDITABLE}`);
}
disableFilenameEditing() {
this.filenameEl.classList.remove(`${this.selectors.ASSET_CARD}${this.modifiers.EDITABLE}`);
this.filenameEditable = false;
this.filenameInput.blur();
if (this.originalFilename !== this.filenameInput.value) {
this.dispatchFilenameChangeEvent(this.filenameInput.value);
}
}
disableMultilineFilename(event) {
if (event.keyCode === 13) {
event.preventDefault();
this.assetCardEl.dispatchEvent(
new CustomEvent(this.events.ENTER_KEY_RENAME, {
bubbles: true,
composed: true,
})
);
this.disableFilenameEditing();
}
}
constructDropdown() {
const dropdownEl = this.assetCardEl.querySelector(`.${this.selectors.DROPDOWN}`);
if (dropdownEl) {
this.dropdown = new ACLDropdownSingleSelect(dropdownEl, this.dropdownResults);
}
}
uploading() {
this.stopUploading();
this.assetCardEl.classList.add(`${this.selectors.ASSET_CARD}${this.modifiers.UPLOADING}`);
}
stopUploading() {
this.removeUploadedStyling();
this.assetCardEl.classList.remove(`${this.selectors.ASSET_CARD}${this.modifiers.UPLOADING}`);
}
uploaded() {
this.stopUploading();
this.assetCardEl.classList.add(`${this.selectors.ASSET_CARD}${this.modifiers.UPLOADED}`);
if (this.uploadedStateTimeout) {
setTimeout(() => {
this.removeUploadedStyling();
}, this.uploadedStateTimeout);
}
}
removeUploadedStyling() {
this.assetCardEl.classList.remove(`${this.selectors.ASSET_CARD}${this.modifiers.UPLOADED}`);
}
dispatchFilenameChangeEvent(value) {
this.assetCardEl.dispatchEvent(
new CustomEvent(this.events.FILE_NAME_CHANGE, {
detail: {
value: value,
assetId: this.assetId,
},
})
);
}
dispatchSelectedEvent(action) {
this.assetCardEl.dispatchEvent(
new CustomEvent(action, {
detail: {
assetId: this.assetId,
},
})
);
}
updateAssetId(assetId) {
this.assetId = assetId;
}
}
export { ACLAssetCard };
No notes defined.