Merge branch 'master' of https://gitlab.eecs.umich.edu/jjlustig/EECS498-uBoard

public/client.html

@@ -80,7 +80,12 @@
         <button type="button" class="close" data-dismiss="modal">&times;</button>
         <button class="settings-button" id="new-keyboard"> New Keyboard </button>
         <button class="settings-button" id="add-key"> Add Key </button>
-        <button class="settings-button" id="edit-key"> Edit Keys </button>
+        <div id="edit-wrapper">
+          <label>
+          <input id="edit-toggle" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
+          Edit Toggle
+          </label>
+        </div>
       </div>
 
     </div>
@@ -114,8 +119,9 @@
     <script defer src="/public/vendor/hammerjs/hammer.min.js"></script>
     <script defer src="/public/vendor/swiper/dist/js/swiper.min.js"></script>
     <script defer src="/public/vendor/favicon/favicon.js"></script>
+    <link href="/public/vendor/bootstrap-toggle/css/bootstrap-toggle.min.css" rel="stylesheet">
+    <script defer src="/public/vendor/bootstrap-toggle/js/bootstrap-toggle.min.js"></script>
     <script defer src="/public/js/client.js"></script>
-    
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet">
   </body>

public/js/client.js

@@ -14,7 +14,23 @@ var keyboardWidth = document.getElementById('keyboard').offsetWidth;// Width pix
 var keyboardHeight = document.getElementById('keyboard').offsetHeight;// Height pixel of
 //$("#touchpad").hide();
 
-//Purpose: Uses interact.js library to enable keys to move around
+function onendListener (event) { 
+        var updateKey = event.target;
+        var newX = parseInt(updateKey.style.left) + updateKey.getAttribute('data-x')/keyboardWidth*100
+        var newY = parseInt(updateKey.style.top) + updateKey.getAttribute('data-y')/keyboardHeight*100
+        newX = parseInt(newX)
+        newY = parseInt(newY)
+        newX = Math.min(Math.max(0, newX),100).toString()
+        newY = Math.min(Math.max(0, newY),100).toString()
+        $("#"+updateKey.id).css({'width': 'auto'})
+        socket.emit('saveKey', {
+          index: swiperInner.activeIndex,
+          id: updateKey.id,
+          val: updateKey.innerText, 
+          x: newX,
+          y: newY });
+  }
+
 var draggableSettings = {
     snap: {
       targets: [
@@ -30,10 +46,14 @@ var draggableSettings = {
     },
       autoScroll: true, // enable autoScroll
       onmove: dragMoveListener, // call this function on every dragmove event
-      onend: function (event) {   // call this function on every dragend event
-      }
+      onend: onendListener
     };
 
+function isUrl(s) {
+   var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
+   return regexp.test(s);
+}
+
 /*
 -----------SETTINGS MODAL---------------
 */
@@ -43,8 +63,12 @@ var customCount = 0;
 var move = false;
 
 $('#new-keyboard').click(function() {
+  $('#edit-wrapper').show();
+  $('#add-key').show();
   var newSlide ='<div class = "custom swiper-slide swiper-slide-inner" id="custom-' + customCount.toString() + '">  </div>';
   customCount++;
+  $('#s'+swiper.activeIndex.toString()).css("background-color", "turquoise")
+  $('#s4').css("background-color", "green")
   swiperInner.appendSlide(newSlide)
   swiper.slideTo(4, 200, false);
   swiperInner.slideTo(customCount-1, 200, false);
@@ -68,13 +92,15 @@ $('#add-key').click(function() {
 });
 
 
-$('#edit-key').click(function() {
+$('#edit-toggle').change(function() {
   if(move){
+    $('.custom').css({'background-color': 'white'});
     $('.custom-key').addClass('activestyle');
     swiper.allowTouchMove = true;
     swiperInner.allowTouchMove = true;
     move = false;
   } else{
+    $('.custom').css({'background-color': 'rgba(250,50,50,.5)'});
     $('.custom-key').removeClass('activestyle');
     swiper.allowTouchMove = false;
     swiperInner.allowTouchMove = false;
@@ -123,24 +149,59 @@ $('.icon-selection').click(function() {
 
   if (this.id == 'settings-select') {
     // Bring up setting menu
-    settingsModal.style.display = "block"; 
+    settingsModal.style.display = "block";
+    if (swiper.activeIndex != 4){
+      $('#edit-wrapper').hide();
+      $('#add-key').hide();
+    } else{
+      $('#edit-wrapper').show();
+      $('#add-key').show();
+    }
     return;
   }
+  if(!move){
 
-  var newId = parseInt(this.id[1])
-  if (newId == swipeIndex) {
-    return;
+    var newId = parseInt(this.id[1])
+    if (newId == swipeIndex) {
+      return;
+    }
+    console.log(newId)
+    console.log(swipeIndex)
+    $('#s'+swipeIndex.toString()).css("background-color", "turquoise")
+    $(this).css("background-color", "green")
+    swipeIndex = newId;
+    swiper.slideTo(newId, 200, false);
   }
-  console.log(newId)
-  console.log(swipeIndex)
-  $('#s'+swipeIndex.toString()).css("background-color", "turquoise")
-  $(this).css("background-color", "green")
-  swipeIndex = newId;
-  swiper.slideTo(newId, 200, false);
 });
 
 //-----LOADING KEYBOARDS-----//
 
+function hotkeyStylize(ele, page, id, url){
+  ele.css({'max-width': '20%', 'min-width': '20%', 'text-indent': '-9999px', 'text-align': 'left', 'overflow': 'hidden'});
+  ele.append('<button class="url-icon" id="url-icon-' + id +'"> </button>')
+  var urlIcon = $('#url-icon-' + id)
+  try { 
+    var favicon_url = getFavicon(url);
+  }
+  catch(err) {
+    var favicon_url = ''
+  }
+  urlIcon.css({position: 'absolute', left: '35%', bottom: '20%', width: '30%', height: '60%', background: 'url(' + favicon_url + ')', 'background-size': 'contain', 'border-radius': '0px', border:'0px', 'background-repeat': 'no-repeat'});
+}
+
+function hotkeyDestylize(ele, page, id, url){
+  $('#url-icon-' + id).remove();
+  ele.css({'max-width': '100%', 'min-width': '1%', width: 'auto', 'text-indent': '0px'});
+}
+
+function addHotkey(xpos, ypos, url, page, id){
+  $('#'+page).append('<button class = "draggable activestyle url-button" id='+ id +'>' + url + '</button>');
+  var ele = $('#' + id)
+  ele.text(url)
+  ele.css({position:'absolute', left:xpos + '%', top:ypos + '%', minHeight: (keyboardWidth*.02).toString() + "px", width: '20%'});
+  hotkeyStylize(ele, page, id, url)
+}
+
 //Purpose: Receives information from the server to update the presentation of the keys on the client
 socket.on('updateKeys', function(newVals) {
   console.log(newVals);
@@ -158,19 +219,7 @@ socket.on('updateKeys', function(newVals) {
 socket.on('updateUrls', function(newVals) {
   console.log(newVals);
     for (var i = 0; i < newVals.x.length; i++){
-      $('#hotkeys').append('<button class = "draggable activestyle url-button" id="url' + (i+1).toString() + '">' + newVals.k[i] + '</button>');
-      var ele = $('#url' + (i+1).toString())
-      ele.text(newVals.k[i])
-      ele.css({position:'absolute', left:newVals.x[i] + '%', top:(newVals.y[i]) + '%', minHeight: (keyboardWidth*.02).toString() + "px", width: '20%', 'text-indent': '-9999px'});
-      ele.append('<button class="url-icon" id="url-icon' +(i+1).toString() +'"> </button>')
-      var urlIcon = $('#url-icon' + (i+1).toString())
-      try { 
-        var favicon_url = getFavicon(newVals.k[i]);
-      }
-      catch(err) {
-        var favicon_url = ''
-      }
-      urlIcon.css({position: 'absolute', left: '35%', bottom: '20%', width: '30%', height: '60%', background: 'url(' + favicon_url + ')', 'background-size': 'contain', 'border-radius': '0px', border:'0px', 'background-repeat': 'no-repeat'});
+      addHotkey(newVals.x[i], newVals.y[i], newVals.k[i], 'hotkeys', 'hotkeys-button' + (i+1).toString())
     }
     $('#loading').html('');
   });
@@ -183,6 +232,7 @@ socket.on('updateNumPad', function(newVals) {
       var ele = $('#pad' + (i+1).toString())
       ele.text(newVals.k[i])
       ele.css({position:'absolute', left:newVals.x[i] + '%', top:(newVals.y[i]) + '%', minHeight: (keyboardWidth*.02).toString() + "px"});
+
     }
     $('#loading').html('');
   });
@@ -190,15 +240,23 @@ socket.on('updateNumPad', function(newVals) {
 //Purpose: Receives information from the server to update the presentation of the keys on the client
 socket.on('updateCustom', function(newVals) {
   console.log(newVals);
-  var newSlide ='<div class = "custom swiper-slide swiper-slide-inner" id="custom-' + customCount + '">  </div>';
+  var newSlide ='<div class = "custom swiper-slide swiper-slide-inner" id="custom-' + customCount.toString() + '">  </div>';
   swiperInner.appendSlide(newSlide)
     for (var i = 0; i < newVals.x.length; i++){
-      $('#custom-' + customCount).append('<button class = "custom-key draggable activestyle key-button" id="custom-key-' + customCount + "-" + (i+1).toString() + '"></button>');
+      $('#custom-' + customCount.toString()).append('<button class = "custom-key draggable activestyle" id="custom-key-' + customCount.toString() + "-" + (i+1).toString() + '"></button>');
       var ele = $('#custom-key-' + customCount.toString() + "-" + (i+1).toString())
       ele.text(newVals.k[i])
       ele.css({width:'auto', left:newVals.x[i] + '%', top:(newVals.y[i]) + '%', minHeight: (keyboardWidth*.02).toString() + "px"});
+      
+      if(!isUrl(newVals.k[i])){
+        ele.addClass('key-button')
+      } else{
+        ele.addClass('url-button')
+        hotkeyDestylize(ele, 'custom-' + customCount.toString(), 'custom-key-' + customCount.toString() + "-" + (i+1).toString(), newVals.k[i])
+        hotkeyStylize(ele, 'custom-' + customCount.toString(), 'custom-key-' + customCount.toString() + "-" + (i+1).toString(), newVals.k[i])
+      }
     }
-    customButtonCounts['custom-' + customCount] = newVals.x.length;
+    customButtonCounts['custom-' + customCount.toString()] = newVals.x.length;
     customCount++;
     $('#loading').html('');
   });
@@ -256,7 +314,7 @@ $( "#textfield" ).keydown(function(event) {
 });
 
 //Purpose: Uses interact.js library to enable keys to move around
-interact('.draggable').draggable({
+interact('.custom-key').draggable({
     snap: {
       targets: [
           interact.createSnapGrid({ x: .05*keyboardWidth, y: .1*keyboardHeight })
@@ -271,8 +329,7 @@ interact('.draggable').draggable({
     },
       autoScroll: true, // enable autoScroll
       onmove: dragMoveListener, // call this function on every dragmove event
-      onend: function (event) {   // call this function on every dragend event
-      }
+      onend: onendListener
     });
 
 function dragMoveListener (event) {
@@ -300,6 +357,9 @@ interact('.custom-key').on('hold', function (event) {
     if (move == true){
       editModal.style.display = "block"; //Allows the modal to be displayed to User
       updateKey = event.target
+      if(event.target.id.indexOf("url-icon") != -1){
+        updateKey = updateKey.parentNode; 
+      }
       inputModal.value = updateKey.innerText
     }
 });
@@ -327,6 +387,17 @@ $('#modal-save').click(function() {
   newY = Math.min(Math.max(0, newY),100).toString()
   console.log(newX, newY)
   updateKey.innerText = inputModal.value;
+  var ele = $("#"+updateKey.id);
+  if(!isUrl(updateKey.innerText)) {
+    ele.addClass('key-button')
+    ele.removeClass('url-button')
+    hotkeyDestylize(ele, 'custom-' + swiperInner.activeIndex.toString(), updateKey.id, updateKey.innerText)
+  } else{
+    ele.addClass('url-button')
+    ele.removeClass('key-button')
+    hotkeyDestylize(ele, 'custom-' + swiperInner.activeIndex.toString(), updateKey.id, updateKey.innerText)
+    hotkeyStylize(ele, 'custom-' + swiperInner.activeIndex.toString(), updateKey.id, updateKey.innerText)
+  }
   $("#"+updateKey.id).css({'width': 'auto'})
   socket.emit('saveKey', {
     index: swiperInner.activeIndex,

public/style/main.css

@@ -169,7 +169,7 @@ mark {
     overflow: auto;
     height: 40%;
     width: 100%;
-    background-color: grey;
+    background-color: rgb(200, 250, 250);
     position: relative;
 }
 
@@ -187,28 +187,27 @@ mark {
 #leftClick{
   width: 40%;
   height: 35%;
-  background-color: blue;
+  background-color: rgb(150, 180, 200);
   float: left;
 }
 
 #scrollWheel{
   width: 20%;
   height: 35%;
-  background-color: red;
+  background-color: rgb(100, 150, 150);
   float: left;
 }
 
 #rightClick{
   width: 40%;
   height: 35%;
-  background-color: blue;
+  background-color: rgb(150, 180, 200);
   float: left;
 }
 
 #mousepad{
   width: 100%;
   height: 60%;
-  background-color: grey;
   float: left;
 }
 #textfield{
@@ -275,6 +274,7 @@ mark {
     width: 80%;
     height: 40%;
     position: relative;
+    color: black;
 }
 
 .settings-button{