Adding font 'upload'

notwaldorf · Jun 12, 2018 · 65bc854 · 65bc854
1 parent 539d3c0
commit 65bc854
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 11 deletions.
diff --git 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 += '<option value="'+ names[i].family +'"/>'; ;
+          options += '<option value="'+ names[i].family +'"/>';
         }
         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
@@ -102,8 +102,8 @@ <h1>Font style matcher</h1>
           <label>Word spacing: <span id="fallbackWordSpacingDisplay">0px</span></label>
         </div>
 
-        <button class='clipboardButton' id="fallbackClipboardButton" data-clipboard-text="">
-          <svg height="24" width="24" viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></g></svg>
+        <button class='actionButton clipboardButton' id="fallbackClipboardButton" data-clipboard-text="">
+          <svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></g></svg>
           <span>Copy CSS to clipboard</span>
         </button>
         <p id="fallback">The fox jumped over the lazy dog, the scoundrel.</p>
@@ -117,8 +117,17 @@ <h1>Font style matcher</h1>
           <datalist id="families"></datalist>
           <label for="webfontName">Web font</label>
           <input id="downloadFont" type="checkbox" checked>
-          <span class="text">Download from Google Fonts</span>
+          <span class="text">Download from Google Fonts</span>, or:
+
+          <div>
+            <button class="actionButton" id="uploadFontBtn">
+              <svg viewBox="0 0 24 24"><path d="M5 4v2h14V4H5zm0 10h4v6h6v-6h4l-7-7-7 7z"></svg>
+              <span>Upload font</span>
+            </button>
+            <input type="file" accept=".ttf,.otf,.woff,.woff2,.svg" class="uploadFont" id="uploadFont">
+          </div>
         </div>
+
         <br>
 
         <div class="input-field">
@@ -159,8 +168,8 @@ <h1>Font style matcher</h1>
           <label>Word spacing: <span id="webfontWordSpacingDisplay">0px</span></label>
         </div>
 
-        <button class='clipboardButton' id="webfontClipboardButton" data-clipboard-text="">
-          <svg height="24" width="24" viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></g></svg>
+        <button class='actionButton clipboardButton' id="webfontClipboardButton" data-clipboard-text="">
+          <svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path></g></svg>
           <span>Copy CSS to clipboard</span>
         </button>
         <p id="webfont">The fox jumped over the lazy dog, the scoundrel.</p>
@@ -195,6 +204,7 @@ <h2>Overlapped</h2>
         find this on <a href="https://github.com/notwaldorf/font-style-matcher">github</a>
     </footer>
   </div>
+  <div class="dropAlert" id="dropAlert">Drop it!</div>
 </body>
 <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js"></script>
 <script src="./app.js"></script>

diff --git a/style.css b/style.css
@@ -19,14 +19,14 @@ p {
   line-height: 1.8em;
 }
 
-a:link, a:visited, button.clipboardButton {
+a:link, a:visited, button.actionButton {
   color: #3F51B5;
   text-decoration: none;
   padding-bottom: 5px;
   padding-top: 5px;
 }
 
-a:hover, button.clipboardButton:hover {
+a:hover, button.actionButton:hover {
   background-color: #fde100;
   border-radius: 3px;
   text-decoration: none;
@@ -129,7 +129,7 @@ h2 {
   border-bottom: 1px solid #9e9e9e;
   border-radius: 0;
   outline: none;
-  margin: 12px 0 24px 0;
+  margin: 12px 0 60px 0;
   padding-top: 4px;
   padding-bottom: 5px;  /* so that the 2px focused border doesn't jump */
   box-shadow: none;
@@ -210,7 +210,7 @@ hr {
   background: red;
 }
 
-.clipboardButton {
+.actionButton {
   background: transparent;
   border: none;
   cursor: pointer;
@@ -219,7 +219,30 @@ hr {
   padding: 0;
 }
 
-.clipboardButton svg {
+.actionButton svg {
   vertical-align: middle;
   fill: #3F51B5;
+  width: 24px;
+  height: 24px;
+}
+
+.uploadFont {
+  display: none;
+}
+
+.dropAlert {
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  align-items: center;
+  justify-content: center;
+  font-size: 13vmin;
+  pointer-events: none;
+  transition: opacity 0.2s ease-in-out;
+  opacity: 0;
 }