Printer Form Modal

by jorgeluis

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  New Printer Setting
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">

        <h4 class="modal-title" id="exampleModalLabel">New Printer Setting</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>



<form action="#" class="container" method="get">

  <div class="modal-body">

    <div class="form-group">
      <label for="payload_name" class="sr-only">Payload name</label>
      <input name="name" class="form-control form-control-lg" id="payload_name" placeholder="Name for this setting" required>
    </div>

    <div class="row justify-content-center">

      <div class="col-11">

        <h4>
        Available Printers
        </h4>
        <div class="card bg-light">
          <div class="card-body">
            <div><b>Printer One</b></div>
            <div><b>Printer Two</b></div>
          </div>
        </div>
        
        <button id="add-printer" class="btn btn-default btn-primary btn-sm">Add Printer</button>
      </div>
    </div>


    <div id="new-printer-fields" class="row justify-content-center">

      <div class="col-10">

          <div class="card bg-light">

            <div class="card-body">

              <h5>Add Printer</h5>

              <div class="form-group">
                <label for="new_printer_name"...

CSS

body {
  font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
  color: #30373e;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* bootstrap overrides 
  (this should really be done by overriding scss variables)
*/

[placeholder]::-webkit-input-placeholder {
  color: rgb(195,201,204);
  font-style: italic;
}
[placeholder]::-moz-placeholder {  /* Firefox 19+ */
  color: rgb(195,201,204);
  font-style: italic;
}
[placeholder]:-ms-input-placeholder {
  color: rgb(195,201,204);
  font-style: italic;
}


[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.3s 0.1s ease; 
  opacity: 0;
}

[placeholder]:focus::-ms-input-placeholder {
  transition: opacity 0.3s 0.1s ease; 
  opacity: 0;
}
[placeholder]:focus::-moz-placeholder {
  transition: opacity 0.3s 0.1s ease; 
  opacity: 0;
}



.form-control {
  border-color: #bec3c6;
  border-radius: 4px;
}
.form-control:focus {
  border-color: rgba(36, 157, 127, 0.2);
  box-shadow: 0 0 8px rgba(36, 100, 80, 0.2);
}

JavaScript

var webComponentsSupported = (
  'registerElement' in document
  && 'import' in document.createElement('link')
  && 'content' in document.createElement('template')
);
// Load webcomponents.js polyfill if browser doesn't support native Web Components.
if (!webComponentsSupported) {
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://cdn.rawgit.com/download/polymer-cdn/1.7.0/lib/webcomponentsjs/webcomponents-lite.min.js';
  document.head.appendChild(script);
}


$(document).ready(function(){

	$('#new-printer-fields').slideUp();
  
	$('#add-printer').on('click', function() {
    $('#new-printer-fields').slideDown();
  })

	$('#close-new-printer').on('click', function() {
    $('#new-printer-fields').slideUp();
  })

});