You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
276 lines
11 KiB
JavaScript
276 lines
11 KiB
JavaScript
var $renderKey = (typeof(exports) !== 'undefined') ? exports : {};
|
|
(function () {
|
|
"use strict";
|
|
|
|
// Some predefined sizes for our caps:
|
|
// - unit == size of 1 unit, e.g., 0.75", or 19.05mm is standard
|
|
// - keySpacing == distance from edge of unit-square to keycap, e.g., (0.75" - 0.715")/2 (for DCS)
|
|
// - bevelMargin == distance from edge of keycap (at bottom) to edge of keycap (at top), e.g., (0.715" - 0.470")/2 (for DCS)
|
|
// - padding == distance between text & edge of keycap
|
|
// - strokeWidth == thickness of the outline strokes
|
|
// - roundInner/roundOuter == corner roundness for inner/outer borders
|
|
var unitSizes = {
|
|
px : {
|
|
unit : 54,
|
|
strokeWidth: 1,
|
|
"" : { profile: "" , keySpacing: 0, bevelMargin: 6, bevelOffsetTop: 3, bevelOffsetBottom: 3, padding: 3, roundOuter: 5, roundInner: 3 },
|
|
"DCS" : { profile: "DCS", keySpacing: 0, bevelMargin: 6, bevelOffsetTop: 3, bevelOffsetBottom: 3, padding: 3, roundOuter: 5, roundInner: 3 },
|
|
"DSA" : { profile: "DSA", keySpacing: 0, bevelMargin: 6, bevelOffsetTop: 0, bevelOffsetBottom: 0, padding: 3, roundOuter: 5, roundInner: 8 },
|
|
"SA" : { profile: "SA", keySpacing: 0, bevelMargin: 6, bevelOffsetTop: 2, bevelOffsetBottom: 2, padding: 3, roundOuter: 5, roundInner: 5 },
|
|
"CHICKLET" : { profile: "CHICKLET", keySpacing: 3, bevelMargin: 1, bevelOffsetTop: 0, bevelOffsetBottom: 2, padding: 4, roundOuter: 4, roundInner: 4 },
|
|
"FLAT" : { profile: "FLAT" , keySpacing: 1, bevelMargin: 1, bevelOffsetTop: 0, bevelOffsetBottom: 0, padding: 4, roundOuter: 5, roundInner: 3 },
|
|
},
|
|
mm : {
|
|
unit: 19.05,
|
|
strokeWidth: 0.20,
|
|
"" : { profile: "" , keySpacing: 0.4445, bevelMargin: 3.1115, padding: 0, roundOuter: 1.0, roundInner: 2.0 },
|
|
"DCS" : { profile: "DCS", keySpacing: 0.4445, bevelMargin: 3.1115, padding: 0, roundOuter: 1.0, roundInner: 2.0 },
|
|
"DSA" : { profile: "DSA", keySpacing: 0.4445, bevelMargin: 3.1115, padding: 0, roundOuter: 1.0, roundInner: 2.0 },
|
|
"SA" : { profile: "SA", keySpacing: 0.4445, bevelMargin: 3.1115, padding: 0, roundOuter: 1.0, roundInner: 2.0 },
|
|
"CHICKLET" : { profile: "CHICKLET", keySpacing: 0.4445, bevelMargin: 3.1115, padding: 0, roundOuter: 1.0, roundInner: 2.0 },
|
|
"FLAT" : { profile: "FLAT" , keySpacing: 0.4445, bevelMargin: 3.1115, padding: 0, roundOuter: 1.0, roundInner: 2.0 },
|
|
}
|
|
};
|
|
["px","mm"].forEach(function(unit) {
|
|
["","DCS","DSA","SA","CHICKLET","FLAT"].forEach(function(profile) {
|
|
unitSizes[unit][profile].unit = unitSizes[unit].unit;
|
|
unitSizes[unit][profile].strokeWidth = unitSizes[unit].strokeWidth;
|
|
});
|
|
unitSizes[unit].OEM = unitSizes[unit].DCS; // same, for now
|
|
});
|
|
|
|
// Lighten a color by the specified amount
|
|
function lightenColor(color,mod) {
|
|
var c = $color.sRGB8(color.r,color.g,color.b).Lab();
|
|
c.l = Math.min(100,c.l*mod);
|
|
return c.sRGB8();
|
|
}
|
|
|
|
function getProfile(key) {
|
|
return (/\b(SA|DSA|DCS|OEM|CHICKLET|FLAT)\b/.exec(key.profile) || [""])[0];
|
|
}
|
|
|
|
function getRenderParms(key, sizes) {
|
|
var parms = {};
|
|
|
|
parms.jShaped = (key.width !== key.width2) || (key.height !== key.height2) || key.x2 || key.y2;
|
|
|
|
// Overall dimensions of the unit square(s) that the cap occupies
|
|
parms.capwidth = sizes.unit * key.width;
|
|
parms.capheight = sizes.unit * key.height;
|
|
parms.capx = sizes.unit * key.x;
|
|
parms.capy = sizes.unit * key.y;
|
|
if(parms.jShaped) {
|
|
parms.capwidth2 = sizes.unit * key.width2;
|
|
parms.capheight2 = sizes.unit * key.height2;
|
|
parms.capx2 = sizes.unit * (key.x + key.x2);
|
|
parms.capy2 = sizes.unit * (key.y + key.y2);
|
|
}
|
|
|
|
// Dimensions of the outer part of the cap
|
|
parms.outercapwidth = parms.capwidth - sizes.keySpacing*2;
|
|
parms.outercapheight = parms.capheight - sizes.keySpacing*2;
|
|
parms.outercapx = parms.capx + sizes.keySpacing;
|
|
parms.outercapy = parms.capy + sizes.keySpacing;
|
|
if(parms.jShaped) {
|
|
parms.outercapy2 = parms.capy2 + sizes.keySpacing;
|
|
parms.outercapx2 = parms.capx2 + sizes.keySpacing;
|
|
parms.outercapwidth2 = parms.capwidth2 - sizes.keySpacing*2;
|
|
parms.outercapheight2 = parms.capheight2 - sizes.keySpacing*2;
|
|
}
|
|
|
|
// Dimensions of the top of the cap
|
|
parms.innercapwidth = parms.outercapwidth - sizes.bevelMargin*2;
|
|
parms.innercapheight = parms.outercapheight - sizes.bevelMargin*2 - (sizes.bevelOffsetBottom-sizes.bevelOffsetTop);
|
|
parms.innercapx = parms.outercapx + sizes.bevelMargin;
|
|
parms.innercapy = parms.outercapy + sizes.bevelMargin - sizes.bevelOffsetTop;
|
|
if(parms.jShaped) {
|
|
parms.innercapwidth2 = parms.outercapwidth2 - sizes.bevelMargin*2;
|
|
parms.innercapheight2 = parms.outercapheight2 - sizes.bevelMargin*2;
|
|
parms.innercapx2 = parms.outercapx2 + sizes.bevelMargin;
|
|
parms.innercapy2 = parms.outercapy2 + sizes.bevelMargin - sizes.bevelOffsetTop;
|
|
}
|
|
|
|
// Dimensions of the text part of the cap
|
|
parms.textcapwidth = parms.innercapwidth - sizes.padding*2;
|
|
parms.textcapheight = parms.innercapheight - sizes.padding*2;
|
|
parms.textcapx = parms.innercapx + sizes.padding;
|
|
parms.textcapy = parms.innercapy + sizes.padding;
|
|
|
|
parms.darkColor = key.color;
|
|
parms.lightColor = lightenColor($color.hex(key.color), 1.2).hex();
|
|
|
|
// Rotation matrix about the origin
|
|
parms.origin_x = sizes.unit * key.rotation_x;
|
|
parms.origin_y = sizes.unit * key.rotation_y;
|
|
var mat = Math.transMatrix(parms.origin_x, parms.origin_y).mult(Math.rotMatrix(key.rotation_angle)).mult(Math.transMatrix(-parms.origin_x, -parms.origin_y));
|
|
|
|
// Construct the *eight* corner points, transform them, and determine the transformed bbox.
|
|
parms.rect = { x:parms.capx, y:parms.capy, w:parms.capwidth, h:parms.capheight, x2:parms.capx+parms.capwidth, y2:parms.capy+parms.capheight };
|
|
parms.rect2 = parms.jShaped ? { x:parms.capx2, y:parms.capy2, w:parms.capwidth2, h:parms.capheight2, x2:parms.capx2+parms.capwidth2, y2:parms.capy2+parms.capheight2 } : parms.rect;
|
|
parms.bbox = { x:9999999, y:9999999, x2:-9999999, y2:-9999999 };
|
|
var corners = [
|
|
{x:parms.rect.x, y:parms.rect.y},
|
|
{x:parms.rect.x, y:parms.rect.y2},
|
|
{x:parms.rect.x2, y:parms.rect.y},
|
|
{x:parms.rect.x2, y:parms.rect.y2}
|
|
];
|
|
if(parms.jShaped) corners.push(
|
|
{x:parms.rect2.x, y:parms.rect2.y},
|
|
{x:parms.rect2.x, y:parms.rect2.y2},
|
|
{x:parms.rect2.x2, y:parms.rect2.y},
|
|
{x:parms.rect2.x2, y:parms.rect2.y2}
|
|
);
|
|
for(var i = 0; i < corners.length; ++i) {
|
|
corners[i] = mat.transformPt(corners[i]);
|
|
parms.bbox.x = Math.min(parms.bbox.x, corners[i].x);
|
|
parms.bbox.y = Math.min(parms.bbox.y, corners[i].y);
|
|
parms.bbox.x2 = Math.max(parms.bbox.x2, corners[i].x);
|
|
parms.bbox.y2 = Math.max(parms.bbox.y2, corners[i].y);
|
|
}
|
|
parms.bbox.w = parms.bbox.x2 - parms.bbox.x;
|
|
parms.bbox.h = parms.bbox.y2 - parms.bbox.y;
|
|
|
|
return parms;
|
|
}
|
|
|
|
var keycap_html, keycap_svg, keyboard_svg;
|
|
$renderKey.init = function() {
|
|
keycap_html = doT.template($('#keycap_html').html(), {__proto__: doT.templateSettings, varname:"key, sizes, parms, $sanitize, lightenColor"});
|
|
keycap_svg = doT.template($('#keycap_svg').html(), {__proto__: doT.templateSettings, varname:"key, sizes, parms, $sanitize, lightenColor", strip:false});
|
|
keyboard_svg = doT.template($('#keyboard_svg').html(), {__proto__: doT.templateSettings, varname:"parms", strip:false});
|
|
};
|
|
|
|
// Given a key, generate the HTML needed to render it
|
|
$renderKey.html = function(key, $sanitize) {
|
|
var sizes = unitSizes.px[getProfile(key)]; // always in pixels
|
|
var parms = getRenderParms(key, sizes);
|
|
|
|
// Update the rects & bounding-box of the key (for click-selection purposes)
|
|
key.rect = parms.rect;
|
|
key.rect2 = parms.rect2;
|
|
key.bbox = parms.bbox;
|
|
|
|
// Keep an inverse transformation matrix so that we can transform mouse coordinates into key-space.
|
|
key.mat = Math.transMatrix(parms.origin_x, parms.origin_y).mult(Math.rotMatrix(-key.rotation_angle)).mult(Math.transMatrix(-parms.origin_x, -parms.origin_y));
|
|
|
|
// Determine the location of the rotation crosshairs for the key
|
|
key.crosshairs = "none";
|
|
if(key.rotation_x || key.rotation_y || key.rotation_angle) {
|
|
key.crosshairs_x = parms.origin_x;
|
|
key.crosshairs_y = parms.origin_y;
|
|
key.crosshairs = "block";
|
|
}
|
|
|
|
// Generate the HTML
|
|
return keycap_html(key, sizes, parms, $sanitize, lightenColor);
|
|
};
|
|
|
|
// Given a key, generate the SVG needed to render it
|
|
$renderKey.svg = function(key, index, bbox, sizes, $sanitize) {
|
|
|
|
// Update bbox
|
|
var parms = getRenderParms(key, sizes);
|
|
bbox.x = Math.min(bbox.x, parms.bbox.x);
|
|
bbox.y = Math.min(bbox.y, parms.bbox.y);
|
|
bbox.x2 = Math.max(bbox.x2, parms.bbox.x2);
|
|
bbox.y2 = Math.max(bbox.y2, parms.bbox.y2);
|
|
parms.index = index;
|
|
|
|
return keycap_svg(key, sizes, parms, $sanitize, lightenColor);
|
|
};
|
|
|
|
$renderKey.fullSVG = function(keys, metadata) {
|
|
// Render all the keys
|
|
var units = "px";
|
|
var bbox = { x: 99999999, y:99999999, x2:-99999999, y2:-99999999 };
|
|
var keysSVG = "";
|
|
keys.forEach(function(key,index) {
|
|
keysSVG += $renderKey.svg(key, index, bbox, unitSizes[units][getProfile(key)]);
|
|
});
|
|
|
|
// Wrap with SVG boilerplate
|
|
var kbdMargin = 10, kbdPadding = 5;
|
|
return keyboard_svg({
|
|
margin: 10,
|
|
padding: 5,
|
|
width: bbox.x2,
|
|
height: bbox.y2,
|
|
units: units,
|
|
backcolor: metadata.backcolor,
|
|
strokeWidth: unitSizes[units].strokeWidth,
|
|
keys: keysSVG
|
|
});
|
|
};
|
|
|
|
$renderKey.getGlyphsFromRules = function(rules) {
|
|
// Find rules that look like the base slyph-set definition
|
|
var classes = [];
|
|
rules.forEach(function(rule) {
|
|
if(!rule.name && rule.selector.length === 1 && rule.selector[0].match(/^\.[a-zA-Z0-9]+$/)) {
|
|
classes.push(rule.selector[0].substring(1));
|
|
}
|
|
});
|
|
|
|
// Find rules that look like glyphs
|
|
var glyphs = [];
|
|
rules.forEach(function(rule) {
|
|
if(!rule.name && rule.selector.length > 0) {
|
|
rule.selector.forEach(function(selector) {
|
|
var matches = selector.match(/^\.([a-zA-Z0-9]+)-([-a-zA-Z0-9]+)\:(before|after)$/);
|
|
if(matches) {
|
|
var theClass = classes.indexOf(matches[1]);
|
|
if(theClass != -1) {
|
|
var glyph = { name: matches[2], html: "<i class='" + classes[theClass] + " " + matches[1]+"-"+matches[2] +"'></i>" };
|
|
glyphs.push(glyph);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
glyphs.sort(function(a,b) { return a.name.localeCompare(b.name); });
|
|
return glyphs;
|
|
}
|
|
|
|
$renderKey.sanitizeCssRules = function(rules) {
|
|
if(rules) {
|
|
// Sanitize the CSS
|
|
rules.forEach(function(rule) {
|
|
if(!rule.name) {
|
|
for(var i = 0; i < rule.selector.length; ++i) {
|
|
if(rule.selector[i] !== "#keyboard-bg") {
|
|
rule.selector[i] = "#keyboard .keycap " + rule.selector[i] + ", #glyphScroller " + rule.selector[i];
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
// Re-stringify the sanitized CSS
|
|
var css = "";
|
|
rules.forEach(function(rule) {
|
|
if(!rule.name) {
|
|
css += rule.selector.join(', ') + " { ";
|
|
if(rule.decls) {
|
|
for(var i = 0; i < rule.decls.length; ++i) {
|
|
css += rule.decls[i][0] + ": " + rule.decls[i][1] + "; ";
|
|
}
|
|
}
|
|
css += "}\n";
|
|
} else {
|
|
var ok = (rule.name === "@font-face")
|
|
|| (rule.name === "@import" && !rule.content && rule.selector.match(/^url\('?https?:\/\/fonts.googleapis.com\/css\?family=[^\)]+'?\)$/));
|
|
if(ok) {
|
|
css += rule.name;
|
|
if(rule.selector) css += ' ' + rule.selector;
|
|
if(rule.content) css += '{ ' + rule.content + ' }\n';
|
|
else css += ';\n';
|
|
}
|
|
}
|
|
});
|
|
return css;
|
|
}
|
|
return "";
|
|
}
|
|
|
|
}());
|