mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-22 17:58:05 +00:00
101 lines
3.7 KiB
HTML
101 lines
3.7 KiB
HTML
<!-- Basic Uppy styles -->
|
||
<link rel="stylesheet" href="/uppy/uppy.min.css">
|
||
|
||
<div class="DashboardOptions">
|
||
<ul>
|
||
<li><label for="opts-DashboardInline"><input type="checkbox" id="opts-DashboardInline" checked/> Display inline</label></li>
|
||
<li><label for="opts-autoProceed"><input type="checkbox" id="opts-autoProceed" checked/> Autoproceed</label></li>
|
||
<li><label for="opts-restrictions"><input type="checkbox" id="opts-restrictions" checked/> Restrictions</label></li>
|
||
<li><label for="opts-browserBackButtonClose"><input type="checkbox" id="opts-browserBackButtonClose" checked/> Close on browser back button</label></li>
|
||
</ul>
|
||
<ul>
|
||
<li><label for="opts-Webcam"><input type="checkbox" id="opts-Webcam" checked/> Webcam</label></li>
|
||
<li><label for="opts-GoogleDrive"><input type="checkbox" id="opts-GoogleDrive" checked/> Google Drive</label></li>
|
||
<li><label for="opts-Dropbox"><input type="checkbox" id="opts-Dropbox" checked/> Dropbox</label></li>
|
||
<li><label for="opts-Instagram"><input type="checkbox" id="opts-Instagram" checked/> Instagram</label></li>
|
||
<li><label for="opts-Facebook"><input type="checkbox" id="opts-Facebook" checked/> Facebook</label></li>
|
||
<li><label for="opts-Url"><input type="checkbox" id="opts-Url" checked/> Url</label></li>
|
||
</ul>
|
||
|
||
<label for="localeList">Change locale:</label>
|
||
<select id="localeList" name="locale list">
|
||
<option value="en_US" selected>English (US) — en_US</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Modal trigger -->
|
||
<button class="UppyModalOpenerBtn">Open Uppy Dashboard Modal</button>
|
||
|
||
<div class="DashboardContainer"></div>
|
||
|
||
<script>
|
||
function isObjEmpty (obj) {
|
||
return Object.keys(obj).length === 0 && obj.constructor === Object
|
||
}
|
||
|
||
var optionInputs = {
|
||
DashboardInline: document.querySelector('#opts-DashboardInline'),
|
||
Webcam: document.querySelector('#opts-Webcam'),
|
||
GoogleDrive: document.querySelector('#opts-GoogleDrive'),
|
||
Dropbox: document.querySelector('#opts-Dropbox'),
|
||
Instagram: document.querySelector('#opts-Instagram'),
|
||
Facebook: document.querySelector('#opts-Facebook'),
|
||
Url: document.querySelector('#opts-Url'),
|
||
autoProceed: document.querySelector('#opts-autoProceed'),
|
||
restrictions: document.querySelector('#opts-restrictions'),
|
||
browserBackButtonClose: document.querySelector('#opts-browserBackButtonClose')
|
||
}
|
||
|
||
var defaultOpts = {
|
||
DashboardInline: true,
|
||
Webcam: true,
|
||
GoogleDrive: true,
|
||
Instagram: true,
|
||
Dropbox: true,
|
||
Facebook: false,
|
||
Url: true,
|
||
autoProceed: false,
|
||
restrictions: false,
|
||
browserBackButtonClose: false
|
||
}
|
||
|
||
// try to get options from localStorage, if its empty, set to defaultOpts
|
||
try {
|
||
window.uppyOptions = JSON.parse(localStorage.getItem('uppyOptions')) || {}
|
||
} catch (err) {
|
||
window.uppyOptions = {}
|
||
}
|
||
|
||
if (isObjEmpty(window.uppyOptions)) {
|
||
window.uppyOptions = defaultOpts
|
||
localStorage.setItem('uppyOptions', JSON.stringify(window.uppyOptions))
|
||
}
|
||
|
||
function toggleModalBtn () {
|
||
var btn = document.querySelector('.UppyModalOpenerBtn')
|
||
window.uppyOptions.DashboardInline
|
||
? btn.style.display = 'none'
|
||
: btn.style.display = 'block'
|
||
}
|
||
|
||
// Map input state to options
|
||
Object.keys(optionInputs).forEach(function (item) {
|
||
optionInputs[item].checked = window.uppyOptions[item]
|
||
})
|
||
|
||
// When input value changes, update options
|
||
Object.keys(optionInputs).forEach(function (item) {
|
||
optionInputs[item].addEventListener('change', function () {
|
||
window.uppyOptions[item] = optionInputs[item].checked
|
||
localStorage.setItem('uppyOptions', JSON.stringify(window.uppyOptions))
|
||
|
||
toggleModalBtn()
|
||
if (item === 'DashboardInline') {
|
||
window.uppyInit()
|
||
}
|
||
window.uppySetOptions()
|
||
})
|
||
})
|
||
|
||
toggleModalBtn()
|
||
</script>
|