diff --git a/img/keystrip.png b/img/keystrip.png
deleted file mode 100644
index eaf43b4..0000000
Binary files a/img/keystrip.png and /dev/null differ
diff --git a/img/left2middle.png b/img/left2middle.png
deleted file mode 100644
index 37b8bea..0000000
Binary files a/img/left2middle.png and /dev/null differ
diff --git a/img/middle2right.png b/img/middle2right.png
deleted file mode 100644
index 68941c6..0000000
Binary files a/img/middle2right.png and /dev/null differ
diff --git a/img/right2left.png b/img/right2left.png
deleted file mode 100644
index 2433a66..0000000
Binary files a/img/right2left.png and /dev/null differ
diff --git a/img/swaptopbottom.png b/img/swaptopbottom.png
deleted file mode 100644
index 77c26c0..0000000
Binary files a/img/swaptopbottom.png and /dev/null differ
diff --git a/img/swaptopbottomnums.png b/img/swaptopbottomnums.png
deleted file mode 100644
index 7e87c1b..0000000
Binary files a/img/swaptopbottomnums.png and /dev/null differ
diff --git a/kb.css b/kb.css
index bfca0c0..d038232 100644
--- a/kb.css
+++ b/kb.css
@@ -92,7 +92,7 @@ html, body {
#keyboard .selected .keyborder, #keyboard .selected .decal .keyborder { border-color: red !important; border-style: solid; }
#keyboard .ghosted { opacity: 0.5; }
#keyboard .decal .keyborder { border-style: none !important; background: transparent !important; }
-#keyboard .hover .decal .keyborder,
+#keyboard .hover .decal .keyborder,
#keyboard .selected .decal .keyborder { border-style: dashed !important; border-width: 1px; }
/* Key labels */
@@ -294,7 +294,7 @@ for i in (1..9) {
/* Combining rectangle glyph */
.combine-rect:before {
content: '\25AD';
- font-style: normal;
+ font-style: normal;
/*margin: 0 -0.66em 0 -0.33em;*/
}
@@ -372,18 +372,73 @@ table.summarytable th, table.summarytable td {
padding: 2px 5px;
}
-table.imgtable th, table.imgtable td {
- padding: 2px;
+settings-key(size, adjust = 0) {
+ position: relative;
+ width: size px;
+ height: size px;
+ float: left;
+
+ outerPad = 6
+ innerPad = 3
+ innerSize = (size - outerPad * 2)
+ labelSize = (innerSize - innerPad * 2)
+
+ & .keyborder {
+ position: absolute;
+ width: size px;
+ height: size px;
+ border-style: solid;
+ border-width: 1px;
+ border-color: black;
+ border-radius: 5px;
+ background-color: #cccccc;
+ pointer-events: none;
+ }
+ & .keylabels {
+ position: absolute;
+ left: outerPad px;
+ top: 3px;
+ width: innerSize px;
+ height: (innerSize - adjust) px;
+ padding: innerPad px;
+ border-style: solid;
+ border-width: 1px;
+ border-color: rgba(0,0,0,0.1);
+ background-color: #fcfcfc;
+ border-radius: 3px;
+ pointer-events: none;
+ }
+ & .keylabel {
+ position: absolute;
+ width: labelSize px;
+ height: (labelSize - adjust) px;
+ pointer-events: none;
+ }
+ & .keylabel div {
+ position: absolute;
+ width: labelSize px;
+ max-width: labelSize px;
+ height: (labelSize - adjust) px;
+ pointer-events: none;
+ }
+ & .keylabel div * {
+ pointer-events: all;
+ }
}
-table.keytable {
- border: 1px solid black;
- border-collapse: collapse;
-}
-table.keytable th, table.keytable td {
- padding: 2px;
+#label-move-src, #label-move-dst {
+ settings-key(108, 8);
+ .keylabel9, .keylabel10, .keylabel11 { overflow: visible; }
+ input { z-index: 1; }
}
-table.keystable th, table.keystable td {
- padding: 5px;
+#text-align {
+ settings-key(108);
+ .keylabel button {
+ display: inline-block;
+ font-size: 16px;
+ width: 28px;
+ z-index: 1;
+ float: none;
+ }
}
diff --git a/kb.html b/kb.html
index 5416145..d45db1c 100644
--- a/kb.html
+++ b/kb.html
@@ -86,8 +86,8 @@ Nav Bar / Header
Color Swatches
@@ -106,8 +106,6 @@ Nav Bar / Header
@@ -837,7 +836,73 @@ Nav Bar / Header
-
+
+
+
+
@@ -1010,147 +1075,6 @@ Options Dialog
-
-
-
diff --git a/kb.js b/kb.js
index a56785b..722feed 100644
--- a/kb.js
+++ b/kb.js
@@ -280,11 +280,11 @@
thisk += key.width + " x " + key.height;
if(!key.decal) {
var foo = key.color; // next line refused to work with key.color.
- var colourname = reverseColors[foo];
+ var colourname = reverseColors[foo];
if(!colourname) { // not a defined name
colourname = "";
}
- thisk += " " + colourname + " (" + key.color + ")";
+ thisk += " " + colourname + " (" + key.color + ")";
}
if(kcounts[thisk]) {
kcounts[thisk]++;
@@ -327,133 +327,128 @@
};
// for printing the summary only. Modified from http://stackoverflow.com/questions/468881/print-div-id-printarea-div-only/7532581#7532581 answered Feb 27 '14 at 17:47
- $scope.printDiv = function(divName){
- var printContents = document.getElementById(divName).innerHTML;
- document.getElementById("summary_print").innerHTML = printContents;
- document.getElementById("body_all").style.display = "none";
- document.getElementById("summary_print").style.display = "";
- window.print();
- document.getElementById("summary_print").innerHTML = "";
- document.getElementById("body_all").style.display = "";
- document.getElementById("summary_print").style.display = "none";
- };
-
- $scope.removeLegends = function(param) {
- var prop = 'labels';
- switch (param) {
- case 'all' : var re = /.*/; break;
- case 'alphas' : var re = /^[A-Za-z]$/; break;
- case 'nums' : var re = /^[0-9]*$/; break;
- case 'punct' : var re = /^[\`\~\!\@\#\$\%\^\&\*\(\)\-\_\=\+\[\{\]\}\;\:\'\"\,\<\.\>\/\?\\\|]$/; break;
- case 'fn' : var re = /F\d\d?/; break;
- case 'specials' : var re = /<.*>/; break;
- case 'others' : var re = /^[^A-Za-z0-9\`\~\!\@\#\$\%\^\&\*\(\)\-\_\=\+\[\{\]\}\;\:\'\"\,\<\.\>\/\?\\\|]$|^[A-Za-z\s][A-Za-z\s]+$|\&\#.*|\&.*?;/; break;
- case 'decals' : {
- angular.forEach($scope.keys(), function(key) {
- if(key.decal) {
- for (var i=0; i<=11; i++){
- if (key.labels[i]){
- var lab = "";
- update(key,prop,lab,i); // should we wipe the textSize and textColor too?
- renderKey(key);
- }
- }
- }
- }); break;
- }
- }
- angular.forEach($scope.keys(), function(key) {
- if(!key.decal) {
- for (var i=0; i<=11; i++){
- if (key.labels[i]){
- var lab = key.labels[i];
- lab = lab.replace(re, '');
- update(key,prop,lab,i); // should we wipe the textSize and textColor too?
- renderKey(key);
- }
- }
- }
- });
+ $scope.printDiv = function(divName) {
+ var printContents = document.getElementById(divName).innerHTML;
+ document.getElementById("summary_print").innerHTML = printContents;
+ document.getElementById("body_all").style.display = "none";
+ document.getElementById("summary_print").style.display = "";
+ window.print();
+ document.getElementById("summary_print").innerHTML = "";
+ document.getElementById("body_all").style.display = "";
+ document.getElementById("summary_print").style.display = "none";
+ };
+
+ $scope.removeLegendsButtons = [
+ { label: "All", re: /.*/, tooltip: "Remove all the legends from all the keys. Does not remove decals." },
+ { label: "Alphas", re: /^[A-Za-z]$/, tooltip: "Remove the legends from all the Alphabetical keys." },
+ { label: "Numbers", re: /^[0-9]*$/, tooltip: "Remove the legends from all the Number keys." },
+ { label: "Punctuation", re: /^[\`\~\!\@\#\$\%\^\&\*\(\)\-\_\=\+\[\{\]\}\;\:\'\"\,\<\.\>\/\?\\\|]$/, tooltip: "Remove the legends from all the Punctuation keys." },
+ { label: "Function", re: /F\d\d?/, tooltip: "Remove the legends from all the Function keys." },
+ { label: "Specials", re: /<.*>/, tooltip: "Remove the special legends, like FontAwesome, WebFont, images, etc, and anything between them in the same slot." },
+ { label: "Others", re: /^[^A-Za-z0-9\`\~\!\@\#\$\%\^\&\*\(\)\-\_\=\+\[\{\]\}\;\:\'\"\,\<\.\>\/\?\\\|]$|^[A-Za-z\s][A-Za-z\s]+$|\&\#.*|\&.*?;/, tooltip: "Remove the legends from (almost) all the other keys except decals." },
+ { label: "Decals", re: /.*/, decals: true, tooltip: "Remove the legends from all the Decals." },
+ ];
+ $scope.removeLegends = function(button) {
+ var keys = $scope.selectedKeys.length > 0 ? $scope.selectedKeys : $scope.keys();
+ transaction("remove-legends", function() {
+ angular.forEach(keys, function(key) {
+ if(key.decal === (!!button.decals)) {
+ for(var i=0; i<12; i++) {
+ if(key.labels[i]) {
+ update(key,"labels",key.labels[i].replace(button.re,''),i); // should we wipe the textSize and textColor too?
+ renderKey(key);
+ }
+ }
+ }
+ });
+ });
+ };
+
+ var align = { hmask:0x0f, hcenter:0x00, left:0x01, right:0x02, vmask:0xf0, vcenter:0x00, top:0x10, bottom:0x20, center:0x00, };
+ $scope.alignLegendsButtons = [
+ { label: "↖", flags: align.left | align.top },
+ { label: "↑", flags: align.hcenter | align.top },
+ { label: "↗", flags: align.right | align.top },
+ { label: "←", flags: align.left | align.vcenter },
+ { label: "●", flags: align.hcenter | align.vcenter },
+ { label: "→", flags: align.right | align.vcenter },
+ { label: "↙", flags: align.left | align.bottom },
+ { label: "↓", flags: align.hcenter | align.bottom },
+ { label: "↘", flags: align.right | align.bottom },
+ ];
+
+ function moveLabel(key, from, to) {
+ key.labels[to] = key.labels[from];
+ key.labels[from] = '';
+ key.textColor[to] = key.textColor[from];
+ key.textColor[from] = '';
+ key.textSize[to] = key.textSize[from];
+ key.textSize[from] = 0;
+ }
+
+ function alignSingleRow(key, flags, left, middle, right) {
+ var render = false;
+ switch(flags) {
+ case align.left:
+ if(!key.labels[left]) { render = true; moveLabel(key, middle, left); moveLabel(key, right, middle); }
+ if(!key.labels[left]) { render = true; moveLabel(key, middle, left); }
+ break;
+ case align.right:
+ if(!key.labels[right]) { render = true; moveLabel(key, middle, right); moveLabel(key, left, middle); }
+ if(!key.labels[right]) { render = true; moveLabel(key, middle, right); }
+ break;
+ case align.hcenter:
+ if(key.labels[left] && !key.labels[middle] && !key.labels[right]) { render = true; moveLabel(key, left, middle); }
+ if(key.labels[right] && !key.labels[middle] && !key.labels[left]) { render = true; moveLabel(key, right, middle); }
+ break;
+ }
+ return render;
+ }
+
+ $scope.alignLegends = function(flags) {
+ var keys = $scope.selectedKeys.length > 0 ? $scope.selectedKeys : $scope.keys();
+ transaction("align-legends", function() {
+ angular.forEach(keys, function(key) {
+ if(!key.decal) {
+ var render = false;
+ for(var i = 0; i < 12; i += 3) // horizontal alignment
+ render = alignSingleRow(key, flags & align.hmask, i, i+1, i+2) || render;
+ for(var i = 0; i < 3; i += 1) // vertical alignment
+ render = alignSingleRow(key, (flags & align.vmask) >> 4, i, i+3, i+6) || render;
+ if(render) renderKey(key);
+ }
+ });
+ });
};
$scope.unhideDecals = function() {
- var prop = 'decal';
- angular.forEach($scope.keys(), function(key) {
- if(key.decal) {
- update(key,prop,false);
- renderKey(key);
- }
- });
- };
-
- $scope.moveLegends = function(moveOrSwap,a,b,c,d) {
- var move = (moveOrSwap == 'move'? true : false);
- var all = ($scope.selectedKeys.length>0 ? false : true);
-
- angular.forEach($scope.keys(), function(key) {
- var ndx =$scope.selectedKeys.indexOf(key);
- if(!key.decal && (ndx>=0 || all) && move) {
- if ((key.labels[a] && key.labels[b]) && !((key.labels[c] || key.labels[d])))
- {
- key.labels[c] = key.labels[a];
- key.labels[d] = key.labels[b];
- key.labels[a] = '';
- key.labels[b] = '';
- key.textColor[c] = key.textColor[a];
- key.textColor[d] = key.textColor[b];
- key.textColor[a] = '';
- key.textColor[b] = '';
- key.textSize[c] = key.textSize[a];
- key.textSize[d] = key.textSize[b];
- key.textSize[a] = '';
- key.textSize[b] = '';
- };
- };
- if(!key.decal && (ndx>=0 || all) && !move) {
- if (key.labels[a] && key.labels[b])
- {
- var swap = key.labels[b];
- key.labels[b] = key.labels[a];
- key.labels[a] = swap;
- var swap = key.textColor[b];
- key.textColor[b] = key.textColor[a];
- key.textColor[a] = swap;
- var swap = key.textSize[b];
- key.textSize[b] = key.textSize[a];
- key.textSize[a] = swap;
- };
- };
- renderKey(key);
-
- });
+ var keys = $scope.selectedKeys.length > 0 ? $scope.selectedKeys : $scope.keys();
+ transaction("unhide-decals", function() {
+ angular.forEach(keys, function(key) {
+ if(key.decal) {
+ update(key,'decal',false);
+ renderKey(key);
+ }
+ });
+ });
};
+ $scope.moveFromId = null;
+ $scope.moveToId = null;
$scope.moveSingleLegends = function() {
- var fromId = document.querySelector('input[name = "fromId"]:checked').value;
- // alert(fromId);
- var toId = document.querySelector('input[name = "toId"]:checked').value;
- // alert(toId);
- var all = ($scope.selectedKeys.length>0 ? false : true);
- if ((fromId >=0) && (toId >= 0))
- {angular.forEach($scope.keys(), function(key) {
- var ndx =$scope.selectedKeys.indexOf(key);
- if(!key.decal && (ndx>=0 || all)) {
- if (key.labels[fromId] && !(key.labels[toId]))
- {
- key.labels[toId] = key.labels[fromId];
- key.labels[fromId] = '';
- key.textColor[toId] = key.textColor[fromId];
- key.textColor[fromId] = '';
- key.textSize[toId] = key.textSize[fromId];
- key.textSize[fromId] = '';
- };
- };
- renderKey(key);
- })
- }
- };
-
-
+ var keys = $scope.selectedKeys.length > 0 ? $scope.selectedKeys : $scope.keys();
+ if($scope.moveFromId >= 0 && $scope.moveToId >= 0) {
+ transaction("move-legends", function() {
+ angular.forEach(keys, function(key) {
+ if(!key.decal && key.labels[$scope.moveFromId] && !key.labels[$scope.moveToId]) {
+ moveLabel(key, $scope.moveFromId, $scope.moveToId);
+ renderKey(key);
+ }
+ });
+ });
+ }
+ };
+
// Helper function to select a single key
function selectKey(key,event) {
if(key) {
@@ -550,7 +545,7 @@
$scope.palettes.forEach(function(palette) {
palette.colors.forEach(function(color) {
color.css = $color.sRGB8(color.r,color.g,color.b).hex();
- reverseColors[color.css] = palette.name + " " + color.name;
+ reverseColors[color.css] = palette.name + " " + color.name;
});
});
});
@@ -1561,21 +1556,6 @@
}
};
- $scope.showTools = function(event) {
- if(activeModal) activeModal.dismiss('cancel');
- activeModal = $modal.open({
- templateUrl:"toolsDialog.html",
- controller:"modalCtrl",
- scope:$scope,
- resolve: { params: function() { return { moveStep:$scope.moveStep, sizeStep:$scope.sizeStep, rotateStep:$scope.rotateStep }; } }
- });
- activeModal.result.then(function(params) { $.extend($scope, params); });
- if(event) {
- event.preventDefault();
- event.stopPropagation();
- }
- };
-
// Clipboard functions
var clipboard = {};
$scope.cut = function(event) {
diff --git a/switches.json b/switches.json
index e868025..8ed7a89 100644
--- a/switches.json
+++ b/switches.json
@@ -1,9 +1,8 @@
{
"cherry": { "mount": "cherry", "name": "Cherry MX Mount", "brands": {
"aula": { "brand": "aula", "name": "AULA (HiDeep Inc.)", "switches": {
- "Blue": { "part": "Blue", "name": "AULA Blue", "feel": "clicky", "weight": 50 }
+ "Blue": { "part": "Blue", "name": "AULA Blue", "feel": "clicky", "weight": 50 }
}},
-
"cherry": { "brand": "cherry", "name": "Cherry Electrical Products", "switches": {
"MX1A-A1xx": { "part": "MX1A-A1xx", "name": "MX White", "feel": "clicky", "weight": 70 },
"MX1A-11xx": { "part": "MX1A-11xx", "name": "MX Black", "feel": "linear", "weight": 60 },
@@ -80,6 +79,3 @@
}}
}}
}
-
-
-