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
- + +
+ +
+
Remove Legends:
+
+
+ +
+
+ +
Misc:
+
+ +
+ +
+ +
+
Align Legends:
+
+
+
+
+
+ +
+
+
+
+
+ +
+
Move Legends:
+
+
+
+
+
+
+
+
+
+
  
+
+
+
+
+
+
+
+
+   + +
+ +
+ +
+ + All tools will affect the selected keys only; if no keys are selected, tools will affect all keys. + +
+ +
+ +
@@ -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 @@ }} }} } - - -