Skip to content
Snippets Groups Projects
Commit 31ba8323 authored by Zayd Radha's avatar Zayd Radha
Browse files

Merged altText changes with some additional fixed

parent 625789b9
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/client.html
+ 5
− 2
View file @ 31ba8323
......@@ -79,6 +79,8 @@
<div id="modal-content" class="modal-content">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<button class="password-button" id="passcode"><i class="mdi-notification-vpn-lock"></i> PassCode</a>
<br>
<button class="settings-button" id="new-keyboard"> New Keyboard </button>
<button class="settings-button" id="delete-keyboard"> Delete Keyboard </button>
<button class="settings-button" id="add-key"> Add Key </button>
......@@ -96,11 +98,12 @@
<div id="edit-modal" class="modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Change Input</h4>
<h4 class="modal-alt">Alt Text (Optional)</h4>
</div>
<div id="modal-body">
<p><input type="text" class="inputText" id="inputText" value=""></p>
<p class='modal-title'><input type="text" class="inputText" id="inputText" value=""></p>
<p class='modal-alt'><input type="text" class="inputText" id="altText" value=""></p>
</div>
<div class = "save" id="modal-save">
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
......
public/js/client.js
+ 74
− 17
View file @ 31ba8323
......@@ -10,6 +10,7 @@ var updateKey; // Modal overlay
var settingsModal = document.getElementById('myModal');// Modal textbox
var editModal = document.getElementById('edit-modal');// Modal textbox
var inputModal = document.getElementById('inputText');
var altText = document.getElementById('altText');
var newBoardModal = document.getElementById('newBoard-modal');// New Board Naming Modal
var newBoardModalInput = document.getElementById('inputBoardName');// New Board Naming Modal
var keyboardWidth = document.getElementById('keyboard').offsetWidth;// Width pixel of display
......@@ -28,7 +29,8 @@ function onendListener (event) {
socket.emit('saveKey', {
index: $('#customSelect option:selected').attr('id').slice(7),
id: updateKey.id,
val: updateKey.innerText,
val: updateKey.innerText,
altText: altText,
x: newX,
y: newY });
}
......@@ -136,11 +138,12 @@ $('#add-key').click(function() {
});
$('#delete-keyboard').click(function() {
socket.emit('deleteBoard', {
id: $('#customSelect option:selected').attr('id').slice(7)});
if(swiperInner.slides.length != 0){
socket.emit('deleteBoard', {
id: $('#customSelect option:selected').attr('id').slice(7)});
swiperInner.removeSlide(swiperInner.activeIndex)
$('#' + $('#customSelect option:selected').attr('id')).remove()
}
})
$('#edit-toggle').change(function() {
......@@ -265,6 +268,11 @@ function hotkeyDestylize(ele, page, id, url){
ele.css({'max-width': '100%', 'min-width': '1%', width: 'auto', 'text-indent': '0px'});
}
function altTextStylize(ele,text,id){
ele.css({'width':'auto','text-indent': '-9999px', 'text-align': 'left', 'overflow': 'hidden','display': 'flex'});
ele.append('<button class="alt-button" id="url-icon-' + id +'"> ' + text + '</button>')
}
function addHotkey(xpos, ypos, url, page, id){
$('#'+page).append('<button class = "draggable activestyle url-button" id='+ id +'>' + url + '</button>');
var ele = $('#' + id)
......@@ -328,6 +336,10 @@ socket.on('updateCustom', function(newVals) {
hotkeyDestylize(ele, 'custom-' + newVals.fname, 'custom-key-' + newVals.fname + "-" + (i).toString(), newVals.k[i])
hotkeyStylize(ele, 'custom-' + newVals.fname, 'custom-key-' + newVals.fname + "-" + (i).toString(), newVals.k[i])
}
if (newVals.altText[i]){
hotkeyDestylize(ele, 'custom-' + newVals.fname, 'custom-key-' + newVals.fname + "-" + (i).toString(), newVals.k[i]);
altTextStylize(ele,newVals.altText[i],'custom-key-' + newVals.fname + "-" + (i).toString());
}
}
customButtonCounts['custom-' + newVals.fname] = newVals.x.length;
$('#loading').html('');
......@@ -344,25 +356,29 @@ var moddifier = "None"
//Purpose: Emits the key of keyboard upon click
var emitKey = function(str) {
pos = {'str':str,'pw':passcode}
if (move === false){
socket.emit('string', str);
console.log(str);
socket.emit('string',pos);
console.log(pos);
}
};
var emitUrl = function(str) {
pos = {'str':str,'pw':passcode}
if (move === false){
console.log(str);
socket.emit('url', str);
socket.emit('url', pos);
}
};
interact('.custom-key').draggable(draggableSettings);
var emitText = function(text) {
pos = {'text':text,'pw':passcode}
if (move === false){
console.log(text);
socket.emit('text', text);
socket.emit('text', pos);
}
};
......@@ -471,19 +487,37 @@ interact('.custom-key').on('doubletap', function (event) {
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 = $("#" + event.target.id).parent().clone().children().remove().end().text().trim()
altText.value = updateKey.innerText;//updateKey.innerText
updateKey = updateKey.parentNode
}
else if(event.target.hasChildNodes()){
inputModal.value = $("#" + event.target.id).clone().children().remove().end().text().trim()
//console.log($("#" + event.target.id));
altText.value = $("#" + event.target.id).children()[0].innerText;//updateKey.innerText
}
else{
inputModal.value = updateKey.innerText
}
inputModal.value = updateKey.innerText
}
});
interact('.key-button').on('tap', function (event) {
emitKey({text: event.target.innerText, moddifier: moddifier});
if (event.target.id.indexOf("url-icon") != -1){
emitKey({text: $("#" + event.target.id).parent().clone().children().remove().end().text().trim(), moddifier: moddifier})
}
else if(event.target.hasChildNodes()){
emitKey({text: $("#" + event.target.id).clone().children().remove().end().text().trim(), moddifier: moddifier})
}
else{
emitKey({text: event.target.innerText, moddifier: moddifier});
}
});
interact('.url-button').on('tap', function (event) {
if(event.target.id.indexOf("url-icon") != -1){
emitUrl($("#" + event.target.id).parent().text().trim())
emitUrl($("#" + event.target.id).parent().clone().children().remove().end().text().trim())
}
else{
emitUrl(event.target.innerText);
......@@ -501,23 +535,46 @@ $('#modal-save').click(function() {
console.log(newX, newY)
updateKey.innerText = inputModal.value;
var ele = $("#"+updateKey.id);
if(!isUrl(updateKey.innerText)) {
console.log(updateKey)
console.log(updateKey.innerText)
console.log(inputModal.value)
console.log($("#"+updateKey.id).clone().children().remove().end().text())
if(!isUrl(inputModal.value)) {
ele.addClass('key-button')
ele.removeClass('url-button')
hotkeyDestylize(ele, 'custom-' + $('#customSelect option:selected').attr('id').slice(7), updateKey.id, updateKey.innerText)
hotkeyDestylize(ele, 'custom-' + $('#customSelect option:selected').attr('id').slice(7), updateKey.id, inputModal.value)
if (altText.value){
console.log("Alt text dectected");
altTextStylize(ele,altText.value,updateKey.id);
}
} else{
ele.addClass('url-button')
ele.removeClass('key-button')
hotkeyDestylize(ele, 'custom-' + $('#customSelect option:selected').attr('id').slice(7), updateKey.id, updateKey.innerText)
hotkeyStylize(ele, 'custom-' + $('#customSelect option:selected').attr('id').slice(7), updateKey.id, updateKey.innerText)
if (altText.value){
console.log("Alt text dectected");
altTextStylize(ele,altText.value,updateKey.id);
}
else{
hotkeyStylize(ele, 'custom-' + swiperInner.activeIndex.toString(), updateKey.id, updateKey.innerText)
}
}
var inner_text = $("#"+updateKey.id).clone().children().remove().end().text();
var alt_text = "";
if (altText.value){
alt_text = altText.value;
}
$("#"+updateKey.id).css({'width': 'auto'})
socket.emit('saveKey', {
index: $('#customSelect option:selected').attr('id').slice(7),
id: updateKey.id,
val: updateKey.innerText,
val: inner_text,
altText: alt_text,
x: newX,
y: newY });
y: newY,
pw:passcode});
console.log(updateKey)
});
//Purpose: Used for resizing and gestures
......
public/style/main.css
+ 42
− 2
View file @ 31ba8323
mark {
icon {
background-color: #ff9;
color: #000;
font-style: normal;
......@@ -264,6 +264,20 @@ mark {
left: 35%;
}
.modal-header{
clear: both;
}
.modal-title{
float:left;
width:50%;
}
.modal-alt{
float:right;
width:50%;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
......@@ -286,13 +300,14 @@ mark {
padding: 20px;
border: 1px solid #888;
width: 80%;
height: 40%;
height: 80%;
position: relative;
color: black;
}
.settings-button{
padding: 20px;
margin-bottom: 15px;
background-color: orange;
}
......@@ -300,10 +315,35 @@ mark {
background-color: red;
}
.password-button{
padding: 20px;
margin-bottom: 30px;
background-color: orange;
}
.password-button:active:hover{
background-color: red;
}
.inputText {
color: black;
}
.alt-button{
color: #fff;
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
width: auto;
}
#modal-body{
padding-bottom:30px;
margin-bottom: 30px;
}
.save {
display: inline-block;
background-color: green;
......
server.js
+ 40
− 13
View file @ 31ba8323
......@@ -120,24 +120,33 @@ io.on('connection', function(socket) {
var keys = []
var xpos = []
var ypos = []
var altText = []
for (var key in content) {
keys.push(content[key][0]);
xpos.push(content[key][1]);
ypos.push(content[key][2]);
altText.push(content[key][3]);
}
socket.emit('updateCustom', {fname: line.slice(6,-5), k: keys, x: xpos, y: ypos});
socket.emit('updateCustom', {fname: line.slice(6,-5), k: keys, x: xpos, y: ypos, altText:altText});
});
//Keyboard Functionality
socket.on('string', function(text) {
socket.on('string', function(pos) {
if (pos.pw) {
if (config.passcode !== pos.pw) { //Password Checker
return;
}
}
console.log("Trying to type")
console.log(text);
if(text.text.length === 1 && text.moddifier != "None"){
robot.keyTap(text.text, text.moddifier)
console.log(pos.str.text);
if(pos.str.text.length === 1 && pos.str.moddifier != "None"){
robot.keyTap(pos.str.text, pos.str.moddifier)
}
else{
robot.typeString(text.text);
robot.typeString(pos.str.text);
}
});
......@@ -167,17 +176,29 @@ io.on('connection', function(socket) {
break;
}
});
socket.on('text', function(pos) {
if (pos.pw) {
if (config.passcode !== pos.pw) { //Password Checker
return;
}
}
socket.on('text', function(text) {
console.log('Typing ' + text);
robot.typeString(text);
console.log('Typing ' + pos.text);
robot.typeString(pos.text);
});
socket.on('saveKey', function(key) {
if (key.pw) {
if (config.passcode !== key.pw) { //Password Checker
return;
}
}
console.log(key.index.toString())
var file = fs.readFileSync("./custom_configs/custom" + key.index + ".json")
var configuration = JSON.parse(file)
configuration[key.id] = [key.val, key.x, key.y];
configuration[key.id] = [key.val, key.x, key.y, key.altText];
fs.writeFile("./custom_configs/custom" + key.index.toString() + ".json", JSON.stringify(configuration, null, 4), 'utf8', error=>{});
});
......@@ -202,10 +223,16 @@ io.on('connection', function(socket) {
});
});
socket.on('url', function(str) {
socket.on('url', function(pos) {
if (pos.pw) {
if (config.passcode !== pos.pw) { //Password Checker
return;
}
}
console.log("Trying to open url")
console.log(str)
url(str)
console.log(pos.str)
url(pos.str)
});
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment