fixing merge conflict

bower.json

@@ -18,6 +18,7 @@
     "bootstrap": "~3.3.5",
     "swiper": "^4.1.6",
     "favicon": "^0.0.3",
-    "jquery-qrcode": "*"
+    "jquery-qrcode": "*",
+    "vanilla-modal": "^1.6.2"
   }
 }

public/client.html

@@ -27,7 +27,19 @@
           <div class = "keyboard swiper-slide" id="keyboard"> </div>
           <div class = "numpad swiper-slide" id="numpad"> </div>
           <div class = "hotkeys swiper-slide" id="hotkeys"> </div>
-          <div class = "custom swiper-slide" id="custom"> </div>
+          <div class="swiper-slide">
+            <div class="swiper-container-inner">
+              <div class="swiper-wrapper" id="custom-container">
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class = "static-bar">
+          <div class = "shift-toggle static-key"> shift </div> 
+          <div class = "ctrl-toggle static-key"> ctrl </div> 
+          <div class = "alt-toggle static-key"> alt </div> 
+          <div class = "spacebar static-key"> space </div> 
+          <div class = "backspace static-key"> del </div> 
         </div>
       </div>
 
@@ -56,7 +68,13 @@
 
      <!-- The Modal -->
     <div id="myModal" class="modal">
-      <!-- Modal content -->
+
+      <div id="modal-content" class="modal-content">
+        <button type="button" class="close" data-dismiss="modal">&times;</button>
+        <button class="settings-button" id="new-keyboard"> New Keyboard </button>
+      </div>
+
+      <!-- Modal content
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal">&times;</button>
         <h4 class="modal-title">Change Input</h4>
@@ -70,6 +88,7 @@
       <div id="modal-close">
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
       </div>
+       -->
     </div>
 
     <script defer src="/public/vendor/jquery/dist/jquery.min.js"></script>

public/js/client.js

@@ -13,14 +13,6 @@ var keyboardWidth = document.getElementById('keyboard').offsetWidth;// Width pix
 var keyboardHeight = document.getElementById('keyboard').offsetHeight;// Height pixel of
 //$("#touchpad").hide();
 
-/*
------------SWIPING FUNCTIONALITY---------------
-*/
-var swiper = new Swiper('.swiper-container', {
-  onlyExternal:true
-  });
-
-var swipeIndex = 0;
 
 /*
 -----------KEYBOARD CONTROLS---------------
@@ -181,11 +173,6 @@ $('#modal-save').click(function() {
       y: newY });
 });
 
-//Purpose: Closes modal when the user clicks on <span> (x)
-$('#modal-close').click(function() {
-    modal.style.display = "none";
-});
-
 //Purpose: Used for resizing and gestures
 window.dragMoveListener = dragMoveListener;
 
@@ -311,6 +298,10 @@ mcLc.on('doubleclick', function(e) {
 var swiper = new Swiper('.swiper-container', {
   });
 
+var swiperInner = new Swiper('.swiper-container-inner', {
+  direction: 'vertical',
+  });
+
 var swipeIndex = 0;
 $('#s0').css("background-color", "green")
 
@@ -331,6 +322,7 @@ $('.icon-selection').click(function() {
 
   if (this.id == 'settings-select') {
     // Bring up setting menu
+    modal.style.display = "block"; 
     return;
   }
 
@@ -343,7 +335,25 @@ $('.icon-selection').click(function() {
   $('#s'+swipeIndex.toString()).css("background-color", "turquoise")
   $(this).css("background-color", "green")
   swipeIndex = newId;
-  swiper.slideTo(newId, 1000, false);
+  swiper.slideTo(newId, 200, false);
+});
+
+/*
+-----------SETTINGS MODAL---------------
+*/
+
+var customCount = 1;
+
+$('#new-keyboard').click(function() {
+  var newSlide ='<div class = "custom swiper-slide" id="custom' + customCount.toString() + '"> ' + customCount + ' </div>';
+  customCount++;
+  swiperInner.appendSlide(newSlide)
+  swiper.slideTo(3, 200, false);
+  swiperInner.slideTo(customCount-1, 200, false);
+});
+
+$('.close').click(function() {
+    modal.style.display = "none";
 });
 
 /*

public/style/main.css

@@ -73,12 +73,57 @@ mark {
    overflow: hidden;
 }
 
-.swiper-wrapper{
+.swiper-container-inner{
    height: 100%;
+   width: 100%;
+   position: relative;
+   overflow: hidden;
+}
+
+.swiper-wrapper{
+   height: 85%;
    width: 400%;
    position: relative;
 }
 
+.swiper-wrapper-inner{
+   height: 400%;
+   width: 100%;
+   position: relative;
+}
+
+.static-bar{
+  min-height: 15%
+}
+
+.static-key{
+  float: left;
+  position: relative;
+  height: 100%;
+  text-align: center;
+  border: 1px solid #888;
+}
+
+.shift-toggle{
+  min-width: 10%
+}
+
+.ctrl-toggle{
+  min-width: 10%
+}
+
+.alt-toggle{
+  min-width: 10%
+}
+
+.spacebar{
+  min-width: 40%
+}
+
+.backspace{
+  min-width: 30%
+}
+
 .swiper-slide{
     float: left;
     height: 100%;
@@ -87,6 +132,15 @@ mark {
     position: relative;
 }
 
+.custom{
+    float: bottom;
+    height: 100%;
+    width: 100%;
+    background-color: white;
+    position: relative;
+    font-size: 50px;
+}
+
 #touchpad{
     resize: vertical;
     overflow: auto;
@@ -193,6 +247,11 @@ mark {
     padding: 20px;
     border: 1px solid #888;
     width: 80%;
+    height: 40%;
+}
+
+.settings-button{
+  background-color: orange;
 }
 
 #inputText {

server.js

@@ -86,7 +86,6 @@ io.on('connection', function(socket) {
   var xpos = []
   var ypos = []
 
-
   for (var key in content) {
     keys.push(content[key][0]);
     xpos.push(content[key][1]);