vicowa-web-components
Version:
117 lines (106 loc) • 4.67 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ViCoWa Web Components - vicowa-button</title>
<script type="module" src="../../src/vicowa-uploader/vicowa-uploader.js"></script>
<style>
body {
font-family: sans-serif;
}
body[lang="en_US"] #english,
body[lang="nl_NL"] #dutch {
background-color: blue;
color: white;
}
vicowa-uploader {
width: 200px;
margin: 1em;
box-shadow: 3px 3px 8px grey;
}
vicowa-uploader[drop-area] {
height: 200px;
}
.columns {
display: flex;
flex-direction: row;
}
</style>
</head>
<body lang="en_US">
<div id="translations">
<button id="english">English</button>
<button id="dutch">Nederlands</button>
</div>
<div class="columns">
<div>
<p>Failing uploads</p>
<p>Single select upload</p>
<vicowa-uploader target="/upload"></vicowa-uploader>
<p>Multi select upload</p>
<vicowa-uploader target="/upload" multiple progress></vicowa-uploader>
<p>Multi select upload + drop area for image files</p>
<vicowa-uploader target="/upload" multiple progress drop-area accept="image/*"></vicowa-uploader>
<p>Multi select upload + custom drop area 1</p>
<vicowa-uploader target="/upload" multiple progress><div slot="drop-area"><button>My file select button</button></div></vicowa-uploader>
<p>Multi select upload + custom drop area 2</p>
<vicowa-uploader target="/upload" multiple progress drop-area><div slot="drop-area">My own drop text here do the drop</div></vicowa-uploader>
<p>Multi select upload + drop area with manual upload start</p>
<vicowa-uploader target="/upload" multiple progress drop-area manual-upload></vicowa-uploader>
<p>Multi select upload + drop area with image preview</p>
<vicowa-uploader target="/upload" multiple drop-area image-preview accept="image/*"></vicowa-uploader>
</div>
<div>
<p>Succeeding uploads</p>
<p>Single select upload</p>
<vicowa-uploader id="upload-success-1" target="/upload"></vicowa-uploader>
<p>Multi select upload</p>
<vicowa-uploader id="upload-success-2" target="/upload" progress multiple></vicowa-uploader>
<p>Multi select upload + drop area for image files</p>
<vicowa-uploader id="upload-success-3" target="/upload" progress multiple drop-area accept="image/*"></vicowa-uploader>
<p>Multi select upload + custom drop area 1</p>
<vicowa-uploader id="upload-success-4" target="/upload" progress multiple><div slot="drop-area"><button>My file select button</button></div></vicowa-uploader>
<p>Multi select upload + custom drop area 2</p>
<vicowa-uploader id="upload-success-5" target="/upload" progress multiple drop-area><div slot="drop-area">My own drop text here do the drop</div></vicowa-uploader>
<p>Multi select upload + drop area with manual upload start</p>
<vicowa-uploader id="upload-success-6" target="/upload" progress multiple drop-area manual-upload></vicowa-uploader>
<p>Multi select upload + drop area with image preview</p>
<vicowa-uploader id="upload-success-7" target="/upload" multiple drop-area image-preview accept="image/*"></vicowa-uploader>
</div>
</div>
<script type="module">
import translator from '../../src/utilities/translate.js';
import { createQuickAccess } from '/third_party/web-component-base-class/src/tools.js';
const controls = createQuickAccess(document, "id");
controls.uploadSuccess1.uploadHandler = (p_File, resolve) => {
setTimeout(resolve, Math.random() * 1500);
};
controls.uploadSuccess2.uploadHandler = (p_File, resolve) => {
setTimeout(resolve, Math.random() * 1500);
};
controls.uploadSuccess3.uploadHandler = (p_File, resolve) => {
setTimeout(resolve, Math.random() * 1500);
};
controls.uploadSuccess4.uploadHandler = (p_File, resolve) => {
setTimeout(resolve, Math.random() * 1500);
};
controls.uploadSuccess5.uploadHandler = (p_File, resolve) => {
setTimeout(resolve, Math.random() * 1500);
};
controls.uploadSuccess6.uploadHandler = (p_File, resolve) => {
setTimeout(resolve, Math.random() * 1500);
};
controls.uploadSuccess7.uploadHandler = (p_File, resolve) => {
setTimeout(resolve, Math.random() * 1500);
};
// setup the translator
translator.addTranslationLocation('../resources/translations');
translator.addTranslationUpdatedObserver((p_Translator) => {
document.body.setAttribute('lang', p_Translator.language);
}, null);
translator.language = document.body.getAttribute('lang');
controls.english.addEventListener('click', () => { translator.language = 'en_US'; });
controls.dutch.addEventListener('click', () => { translator.language = 'nl_NL'; });
</script>
</body>
</html>