Skip to content

Commit

Permalink
A handful of bug fixes.
Browse files Browse the repository at this point in the history 
-- Line spacing was too big on the keycaps (I think it was picking up
the spacing from Bootstrap); fixed in CSS
-- DSA keys were showing the inner-border in the incorrect spot (wasn't
really noticable on the dark colors of Retro DSA); fixed in CSS
-- Replaced custom min/max functions with the correct Math.min, Math.max
functions.
-- The valiation for x/y offsets was too aggressive; for some
oddly-shaped keys, it didn't let you set values that were big enough.
-- Swapped the order of the keylabel tops for the primary & secondary
rectangles.  This ensures that the label is in the same place whether
stepped or not, at the expense of maybe affecting old layouts.
  • Loading branch information
Ian Prest committed Oct 19, 2013
1 parent 4f6f024 commit 25cca4b
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 38 deletions.
19 changes: 10 additions & 9 deletions kb.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,15 +98,15 @@ html, body {
-moz-box-sizing:content-box;
box-sizing:content-box;
}
.keyfg .keylabel.textsize1 { font-size: 8px; }
.keyfg .keylabel.textsize2 { font-size: 10px; }
.keyfg .keylabel.textsize3 { font-size: 12px; }
.keyfg .keylabel.textsize4 { font-size: 14px; }
.keyfg .keylabel.textsize5 { font-size: 16px; }
.keyfg .keylabel.textsize6 { font-size: 18px; }
.keyfg .keylabel.textsize7 { font-size: 20px; }
.keyfg .keylabel.textsize8 { font-size: 22px; }
.keyfg .keylabel.textsize9 { font-size: 24px; }
.keyfg .keylabel.textsize1 { font-size: 8px; line-height: 1em; }
.keyfg .keylabel.textsize2 { font-size: 10px; line-height: 1em; }
.keyfg .keylabel.textsize3 { font-size: 12px; line-height: 1em; }
.keyfg .keylabel.textsize4 { font-size: 14px; line-height: 1em; }
.keyfg .keylabel.textsize5 { font-size: 16px; line-height: 1em; }
.keyfg .keylabel.textsize6 { font-size: 18px; line-height: 1em; }
.keyfg .keylabel.textsize7 { font-size: 20px; line-height: 1em; }
.keyfg .keylabel.textsize8 { font-size: 22px; line-height: 1em; }
.keyfg .keylabel.textsize9 { font-size: 24px; line-height: 1em; }
.keyfg .keylabel hr { display: inline; }
.keyfg .keylabel hr:before {
position: relative;
Expand All @@ -124,6 +124,7 @@ html, body {
background: -ms-linear-gradient(left, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.1) 100%);
background: linear-gradient(to right, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.1) 100%);
}
.DSA .keyborder.inner { margin-top: 3px; border-radius: 8px; }
.DSA .keyfg {
font-family: 'engravers_gothic_fsregular'; /* substitute for Gorton Modified */
border-radius: 8px;
Expand Down
54 changes: 25 additions & 29 deletions kb.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@
// We need this so we can test locally and still save layouts to AWS
var base_href = "http://www.keyboard-layout-editor.com";

// Helpers
function max(a, b) { return a > b ? a : b; }
function min(a, b) { return a < b ? a : b; }

// Lenient JSON reader/writer
function toJsonL(obj) {
var res = [], key;
Expand Down Expand Up @@ -359,7 +355,7 @@
$scope.calcKbHeight = function() {
var bottom = 0;
$(".keyborder").each(function(i,e) {
bottom = max(bottom, $(e).offset().top + $(e).outerHeight());
bottom = Math.max(bottom, $(e).offset().top + $(e).outerHeight());
});
$scope.kbHeight = bottom - $('#keyboard').position().top - 10;
};
Expand Down Expand Up @@ -409,12 +405,12 @@
.format( capwidth2-innerPadding, capheight2-innerPadding, capx2+sizes.margin, capy2+(sizes.margin/2), key.color, sizes.padding );
}

html += "<div class='keyfg' style='width:{0}px; height:{1}px; left:{2}px; top:{3}px; background-color:{4}; padding:{5}px;'>\n"
.format( capwidth-innerPadding, capheight-innerPadding, capx+sizes.margin+1, capy+(sizes.margin/2)+1, key.color, sizes.padding );
if(jShaped && !key.stepped) {
html += "</div><div class='keyfg' style='width:{0}px; height:{1}px; left:{2}px; top:{3}px; background-color:{4}; padding:{5}px;'>\n"
html += "<div class='keyfg' style='width:{0}px; height:{1}px; left:{2}px; top:{3}px; background-color:{4}; padding:{5}px;'>\n"
.format( capwidth2-innerPadding, capheight2-innerPadding, capx2+sizes.margin+1, capy2+(sizes.margin/2)+1, key.color, sizes.padding );
}
html += "</div><div class='keyfg' style='width:{0}px; height:{1}px; left:{2}px; top:{3}px; background-color:{4}; padding:{5}px;'>\n"
.format( capwidth-innerPadding, capheight-innerPadding, capx+sizes.margin+1, capy+(sizes.margin/2)+1, key.color, sizes.padding );

// The key labels
html += "<div class='keylabels' style='width:{0}px; height:{1}px;'>".format(capwidth-innerPadding, capheight-innerPadding);
Expand Down Expand Up @@ -543,16 +539,16 @@
function validate(key,prop,value) {
var v = {
_ : function() { return value; },
x : function() { return max(0, min(36, value)); },
y : function() { return max(0, min(36, value)); },
x2 : function() { return max(-key.width, min(key.width, value)); },
y2 : function() { return max(-key.height, min(key.height, value)); },
width : function() { return max(0.5, min(12, value)); },
height : function() { return max(0.5, min(12, value)); },
width2 : function() { return max(0.5, min(12, value)); },
height2 : function() { return max(0.5, min(12, value)); },
fontheight : function() { return max(1, min(9, value)); },
fontheight2 : function() { return max(1, min(9, value)); },
x : function() { return Math.max(0, Math.min(36, value)); },
y : function() { return Math.max(0, Math.min(36, value)); },
x2 : function() { return Math.max(-Math.abs(key.width-key.width2), Math.min(Math.abs(key.width-key.width2), value)); },
y2 : function() { return Math.max(-Math.abs(key.height-key.height2), Math.min(Math.abs(key.height-key.height2), value)); },
width : function() { return Math.max(0.5, Math.min(12, value)); },
height : function() { return Math.max(0.5, Math.min(12, value)); },
width2 : function() { return Math.max(0.5, Math.min(12, value)); },
height2 : function() { return Math.max(0.5, Math.min(12, value)); },
fontheight : function() { return Math.max(1, Math.min(9, value)); },
fontheight2 : function() { return Math.max(1, Math.min(9, value)); },
};
return (v[prop] || v._)();
}
Expand Down Expand Up @@ -650,8 +646,8 @@

transaction("move", function() {
$scope.selectedKeys.forEach(function(selectedKey) {
selectedKey.x = max(0,selectedKey.x + x);
selectedKey.y = max(0,selectedKey.y + y);
selectedKey.x = Math.max(0,selectedKey.x + x);
selectedKey.y = Math.max(0,selectedKey.y + y);
renderKey(selectedKey);
});
$scope.multi = angular.copy($scope.selectedKeys.last());
Expand All @@ -666,8 +662,8 @@
}
transaction("size", function() {
$scope.selectedKeys.forEach(function(selectedKey) {
selectedKey.width = selectedKey.width2 = max(1,selectedKey.width + x);
selectedKey.height = selectedKey.height2 = max(1,selectedKey.height + y);
selectedKey.width = selectedKey.width2 = Math.max(1,selectedKey.width + x);
selectedKey.height = selectedKey.height2 = Math.max(1,selectedKey.height + y);
renderKey(selectedKey);
});
$scope.multi = angular.copy($scope.selectedKeys.last());
Expand Down Expand Up @@ -737,7 +733,7 @@
ypos = $scope.multi.y;
if(xpos >= 23) { xpos = 0; ypos++; }
} else {
$scope.keys().forEach(function(key) { ypos = max(ypos,key.y); });
$scope.keys().forEach(function(key) { ypos = Math.max(ypos,key.y); });
ypos++;
}
return {x:xpos, y:ypos};
Expand Down Expand Up @@ -810,8 +806,8 @@
$scope.selectMove = function(event) {
if(doingMarqueeSelect) {
// Restrict the mouse position to the bounds #keyboard
var pageX = min($scope.selRect.kb.left + $scope.selRect.kb.width, max($scope.selRect.kb.left, event.pageX));
var pageY = min($scope.selRect.kb.top + $scope.selRect.kb.height, max($scope.selRect.kb.top, event.pageY));
var pageX = Math.min($scope.selRect.kb.left + $scope.selRect.kb.width, Math.max($scope.selRect.kb.left, event.pageX));
var pageY = Math.min($scope.selRect.kb.top + $scope.selRect.kb.height, Math.max($scope.selRect.kb.top, event.pageY));

// Calculate the new marquee rectangle (normalized)
if(pageX < $scope.selRect.x) {
Expand Down Expand Up @@ -914,7 +910,7 @@
$scope.prevKey = function(event) {
if($scope.keys().length>0) {
sortKeys($scope.keys());
var ndx = ($scope.selectedKeys.length>0) ? max(0,$scope.keys().indexOf($scope.selectedKeys.last())-1) : 0;
var ndx = ($scope.selectedKeys.length>0) ? Math.max(0,$scope.keys().indexOf($scope.selectedKeys.last())-1) : 0;
var selndx = $scope.selectedKeys.indexOf($scope.keys()[ndx]);
if(event.shiftKey && $scope.keys().length>1 && $scope.selectedKeys.length>0 && selndx>=0) {
$scope.selectedKeys.pop(); //deselect the existing cursor
Expand All @@ -927,7 +923,7 @@
$scope.nextKey = function(event) {
if($scope.keys().length>0) {
sortKeys($scope.keys());
var ndx = ($scope.selectedKeys.length>0) ? min($scope.keys().length-1,$scope.keys().indexOf($scope.selectedKeys.last())+1) : $scope.keys().length-1;
var ndx = ($scope.selectedKeys.length>0) ? Math.min($scope.keys().length-1,$scope.keys().indexOf($scope.selectedKeys.last())+1) : $scope.keys().length-1;
var selndx = $scope.selectedKeys.indexOf($scope.keys()[ndx]);
if(event.shiftKey && $scope.keys().length>1 && $scope.selectedKeys.length>0 && selndx>=0) {
$scope.selectedKeys.pop(); //deselect the existing cursor
Expand Down Expand Up @@ -991,8 +987,8 @@
var clipCopy = angular.copy(clipboard);
var minx = 0, miny = 0, singleRow = true;
clipCopy.forEach(function(key) {
minx = min(minx, key.x -= clipboard[0].x);
miny = min(miny, key.y -= clipboard[0].y);
minx = Math.min(minx, key.x -= clipboard[0].x);
miny = Math.min(miny, key.y -= clipboard[0].y);
});

// Adjust to make sure nothing < 0
Expand Down

0 comments on commit 25cca4b

Please sign in to comment.