Issue75 (#270)

* issue#75 added necessary accessiblity styling for the input file type elements * added input file type element * fixed a bug in firefox * updates from David's comments * updates for adding new script to the kitchensink.js * removed unnecessary svg code * made updates to match style guide and removed unnecessary code * updated background styling to match theme's vendor scss * updates styling to include scss variables * added another file upload component to match current style guide's * moved css from index to forms.scss * just clarified some commments * updated indentation to follow specs * fixed some syntax issues * made syntax updates to match lint standards * made updates to reference existing variables where able
US-CBP · Apr 25, 2019 · 61b974a · 61b974a
1 parent 1a3d310
commit 61b974a
Show file tree

Hide file tree

Showing 4 changed files with 283 additions and 464 deletions.
diff --git a/kitchensink/index.html b/kitchensink/index.html
@@ -1800,9 +1800,44 @@ <h3>Required Fields</h3>
                     <div class="mdl-textfield mdl-js-textfield mdl-textfield--full-width is-required is-readonly">
                       <input class="mdl-textfield__input" type="text" pattern="[A-Z,a-z]*" id="sample4999" aria-required="true" readonly/>
                       <label class="mdl-textfield__label static-label" for="sample4999">static-label readonly<span class="required-field"></span></label>
-                      <span class="mdl-textfield__error"><i class="fa fa-exclamation-triangle fa-fw"></i>&nbsp;Only alphabet and no spaces</span>
+              <span class="mdl-textfield__error"><i class="fa fa-exclamation-triangle fa-fw"></i>&nbsp;Only alphabet and no spaces</span>
                     </div>
                   </form>
+
+          <!-- Form Input Type File element -->
+          <h3>Form Input File Type #1</h3>  
+          <h5>( Mobile-First Approach )</h5>  
+          <form role="upload" class="form mdl-textfield">
+          <div class="form-group">
+          <div class="input-group">
+          <input type="file" name="file" id="file" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple="" readonly>
+          <label class="btn btn-default fa fa-upload" aria-hidden="true" for="file" role="button">
+          <span class="file-title">Choose a file…</span>
+          </label>
+          </div>
+          </div>
+          </form>   
+
+              <!-- Form Input Type File element -->
+            <h3>Form Input File Type #2</h3>
+            <h5>( Matches current Style Guide )</h5> 
+          <form role="upload" class="fileupload" action="#" enctype="multipart/form-data">
+          <div class="form-group">
+          <div class="input-group">
+          <input type="file" id="fileupload">
+          <label for="filename" class="hide">Select File</label>   
+          <input type="text" id="filename" autocomplete="off" readonly placeholder="Name of File"> 
+          <label for="fileupload" id="buttonlabel" class="input-group-btn">
+          <span id="fileupload-label" class="btn btn-default" role="button" aria-controls="filename" tabindex="0">
+          Select File
+          </span>
+          </label>
+          </div>
+          </div>
+          </form>
+
+
+
                   <h3>Form Validation</h3>
                   <form class="form" style="max-width: 450px;" role="form">
                     <h4>Alphabet Validation (no space)</h4>
@@ -3254,9 +3289,8 @@ <h4 class="modal-title" id="myModalTitle">Rename file</h4>
     <script src="./dist/cbp-theme.browser.bundle.umd.js"></script>
     <!-- optional dependencies from cf-ui-theme repo -->
     <script src="./dist/cbp-theme-inputmask.umd.js"></script>
-
       <!-- and finally kitchen sink js that init all components when DOM ready! -->
     <script src="./kitchensink.js"></script>
 
-  </body>
+</body>
 </html>
diff --git a/kitchensink/kitchensink.js b/kitchensink/kitchensink.js
@@ -131,3 +131,49 @@ $(document).ready(function () {
     hulkIt('top-secret')
   })
 })
+
+// Form Input File Type #1
+// Enable the <input type="file"> functionality
+/* By Osvaldas Valutis, www.osvaldas.info / Available for use under the MIT License
+*/
+
+;(function ($, _window, _document) {
+       $('.inputfile').each(function () {
+         var $input = $(this)
+         var $label = $input.next('label')
+         var labelVal = $label.html()
+
+     // changes the label text to show the name of the selected file
+         $input.on('change', function (e) {
+           var fileName = ''
+
+           if (this.files && this.files.length > 1) { fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length) } else if (e.target.value) { fileName = e.target.value.split('\\').pop() }
+
+           if (fileName) { $label.find('span').html(fileName) } else { $label.html(labelVal) }
+         })
+
+      // Firefox bug fix
+      // Applies and removes necessary accessiblity styling for focus events
+         $input
+         .on('focus', function () { $input.addClass('has-focus') })
+         .on('blur', function () { $input.removeClass('has-focus') })
+       })
+     })($, window, document)
+
+     // Form Input File Type #2
+     // trigger upload on space & enter
+     // = standard button functionality
+$('#buttonlabel span[role=button]').bind('keypress keyup', function (e) {
+  if (e.which === 32 || e.which === 13) {
+    e.preventDefault()
+    $('#fileupload').click()
+  }
+})
+
+     // return chosen filename to additional input
+$('#fileupload').change(function (e) {
+  var filename = $('#fileupload').val().split('\\').pop()
+  $('#filename').val(filename)
+  $('#filename').attr('placeholder', filename)
+  $('#filename').focus()
+})