diff --git a/app.js b/app.js index ff6d65c..c7e8908 100644 --- a/app.js +++ b/app.js @@ -8,6 +8,12 @@ simulateFout.addEventListener('change', fout); downloadFont.addEventListener('change', download); useColours.addEventListener('change', colour); + uploadFont.addEventListener('change', upload); + uploadFontBtn.addEventListener('click', uploadBtn); + document.addEventListener('dragover', function(event) { event.preventDefault(); }); + document.addEventListener('dragenter', dragEnter); + document.addEventListener('dragleave', dragLeave); + document.addEventListener('drop', drop); download(); fallback.style.fontFamily = fallbackOutput.style.fontFamily = fallbackName.value; @@ -190,11 +196,72 @@ var names = data.items; var options = ''; for (var i = 0; i < names.length; i++) { - options += ''; ; + options += ''; } document.getElementById('families').innerHTML = options; } }; request.send(); } + + var currentObjectURL = ''; + + function upload() { + var file = uploadFont.files[0]; + if (!file) return; + processFile(file); + } + + function processFile(file) { + if (currentObjectURL) { + URL.revokeObjectURL(currentObjectURL); + } + + var cssName = JSON.stringify(file.name); + var style = document.createElement('style'); + + webfontName.value = file.name; + currentObjectURL = URL.createObjectURL(file); + style.textContent = ` + @font-face { + font-family: ${cssName}; + src: url(${JSON.stringify(currentObjectURL)}); + } + `; + + document.head.appendChild(style); + updateStyle('font-family', 'webfont', cssName); + updateStyle('font-family', 'webfont' + 'Output', cssName); + } + + function uploadBtn(event) { + event.preventDefault(); + uploadFont.click(); + } + + // lol drag & drop is still horrible + var enterCount = 0; + + function dragEnter() { + enterCount++; + dropAlert.style.opacity = 1; + } + + function dragLeave() { + enterCount--; + + if (!enterCount) { + dropAlert.style.opacity = 0; + } + } + + function drop(event) { + event.preventDefault(); + enterCount = 0; + dropAlert.style.opacity = 0; + + var file = event.dataTransfer.files[0]; + if (!file) return; + processFile(file); + } })(); diff --git a/index.html b/index.html index dba17ba..9c2ae03 100644 --- a/index.html +++ b/index.html @@ -102,8 +102,8 @@