├── .github └── workflows │ └── deploy.yml ├── .gitignore ├── CNAME ├── gulpfile.js ├── images └── logo_small.png ├── index.html ├── lib ├── html2canvas.min.js └── jquery-3.5.1.min.js ├── package-lock.json ├── package.json ├── sass └── style.scss └── script ├── click.js ├── fingers.js ├── index.js ├── key.js ├── keyboard.js ├── layouts.js ├── localstorage.js ├── mousemenu.js ├── nav.js ├── notifications.js ├── shift.js ├── test.js ├── tools.js └── util.js /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: Deploy to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: 6 | - master # Change this to your main branch name 7 | 8 | jobs: 9 | deploy: 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | - name: Checkout code 14 | uses: actions/checkout@v2 15 | 16 | - name: Set up Node.js 17 | uses: actions/setup-node@v2 18 | with: 19 | node-version: 16 # Change to your Node.js version if needed 20 | 21 | - name: Install dependencies 22 | run: npm install # Replace with your package manager command 23 | 24 | - name: Build project 25 | run: npm run build # Replace with your build command 26 | 27 | - name: Deploy to GitHub Pages 28 | run: | 29 | git config --global user.name "GitHub Actions" 30 | git config --global user.email "actions@users.noreply.github.com" 31 | git checkout --orphan gh-pages 32 | git rm -rf . 33 | mv build/* . 34 | git add -A 35 | git commit -m "Auto-deployed by GitHub Actions" 36 | git branch -D master 37 | git branch -m master 38 | git push -f origin master:gh-pages 39 | env: 40 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 41 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | fingermap.monkeytype.com -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require("gulp"); 2 | const sass = require("gulp-sass")(require("sass")); 3 | const del = require("del"); 4 | const eslint = require("gulp-eslint"); 5 | 6 | let eslintConfig = { 7 | envs: ["es6", "browser", "node"], 8 | globals: ["jQuery", "$", "html2canvas", "ClipboardItem"], 9 | parserOptions: { 10 | sourceType: "module", 11 | ecmaVersion: 2020, 12 | }, 13 | rules: { 14 | "constructor-super": "error", 15 | "for-direction": "error", 16 | "getter-return": "error", 17 | "no-async-promise-executor": "error", 18 | "no-case-declarations": "error", 19 | "no-class-assign": "error", 20 | "no-compare-neg-zero": "error", 21 | "no-cond-assign": "error", 22 | "no-const-assign": "error", 23 | "no-constant-condition": "error", 24 | "no-control-regex": "error", 25 | "no-debugger": "error", 26 | "no-delete-var": "error", 27 | "no-dupe-args": "error", 28 | "no-dupe-class-members": "error", 29 | "no-dupe-else-if": "warn", 30 | "no-dupe-keys": "error", 31 | "no-duplicate-case": "error", 32 | "no-empty": ["warn", { allowEmptyCatch: true }], 33 | "no-empty-character-class": "error", 34 | "no-empty-pattern": "error", 35 | "no-ex-assign": "error", 36 | "no-extra-boolean-cast": "error", 37 | "no-extra-semi": "error", 38 | "no-fallthrough": "error", 39 | "no-func-assign": "error", 40 | "no-global-assign": "error", 41 | "no-import-assign": "error", 42 | "no-inner-declarations": "error", 43 | "no-invalid-regexp": "error", 44 | "no-irregular-whitespace": "error", 45 | "no-misleading-character-class": "error", 46 | "no-mixed-spaces-and-tabs": "error", 47 | "no-new-symbol": "error", 48 | "no-obj-calls": "error", 49 | "no-octal": "error", 50 | "no-prototype-builtins": "error", 51 | "no-redeclare": "error", 52 | "no-regex-spaces": "error", 53 | "no-self-assign": "error", 54 | "no-setter-return": "error", 55 | "no-shadow-restricted-names": "error", 56 | "no-sparse-arrays": "error", 57 | "no-this-before-super": "error", 58 | "no-undef": "error", 59 | "no-unexpected-multiline": "warn", 60 | "no-unreachable": "error", 61 | "no-unsafe-finally": "error", 62 | "no-unsafe-negation": "error", 63 | "no-unused-labels": "error", 64 | "no-unused-vars": ["warn", { argsIgnorePattern: "e|event" }], 65 | "no-use-before-define": ["warn", { "functions": false }], 66 | "no-useless-catch": "error", 67 | "no-useless-escape": "error", 68 | "no-with": "error", 69 | "require-yield": "error", 70 | "use-isnan": "error", 71 | "valid-typeof": "error", 72 | }, 73 | }; 74 | 75 | gulp.task("styles", () => { 76 | return gulp 77 | .src("sass/**/*.scss") 78 | .pipe(sass().on("error", sass.logError)) 79 | .pipe(gulp.dest("./build/css/")); 80 | }); 81 | 82 | gulp.task("clean", () => { 83 | return del(["css/main.css"]); 84 | }); 85 | 86 | gulp.task("copy-js", () => { 87 | return gulp.src("script/**/*.js").pipe(gulp.dest("build/script")); 88 | }); 89 | 90 | gulp.task("copy-html", () => { 91 | return gulp.src("*.html").pipe(gulp.dest("build")); 92 | }); 93 | 94 | gulp.task("copy-lib", () => { 95 | return gulp.src("lib/**/*").pipe(gulp.dest("build/lib")); 96 | }); 97 | 98 | gulp.task("copy-images", () => { 99 | return gulp.src("images/**/*").pipe(gulp.dest("build/images")); 100 | }) 101 | 102 | gulp.task("lint", function () { 103 | return gulp 104 | .src("script/*.js") 105 | .pipe(eslint(eslintConfig)) 106 | .pipe(eslint.format()) 107 | .pipe(eslint.failAfterError()); 108 | }); 109 | 110 | gulp.task("compile", (done) => { 111 | gulp.series(["clean", "styles", "copy-js", "copy-html", "copy-lib", "copy-images", "lint"])( 112 | done 113 | ); 114 | }); 115 | 116 | gulp.task("watch", () => { 117 | gulp.watch(["sass/**/*.scss"], (done) => { 118 | gulp.series(["clean", "styles"])(done); 119 | }); 120 | gulp.watch(["script/*.js"], (done) => { 121 | gulp.series(["lint", "copy-js"])(done); 122 | }); 123 | gulp.watch(["*.html"], (done) => { 124 | gulp.series(["copy-html"])(done); 125 | }); 126 | }); 127 | -------------------------------------------------------------------------------- /images/logo_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/monkeytypegame/monkeytype-fingermap/074c9c8451179f0d8b1a6ee342ae1ed7e9da6ffe/images/logo_small.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fingermap 8 | 9 | 10 | 11 | 12 | 18 | 19 | 20 | 21 | 24 | 25 |
26 |
27 |
28 | 245 | 246 | 247 | -------------------------------------------------------------------------------- /lib/jquery-3.5.1.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery v3.5.1 | (c) JS Foundation and other contributors | jquery.org/license */ 2 | !function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.5.1",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function D(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||j,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,j=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function qe(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function Le(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function He(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Oe(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Ut,Xt=[],Vt=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Xt.pop()||S.expando+"_"+Ct.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Vt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Vt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Vt,"$1"+r):!1!==e.jsonp&&(e.url+=(Et.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Xt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((Ut=E.implementation.createHTMLDocument("").body).innerHTML="
",2===Ut.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):("number"==typeof f.top&&(f.top+="px"),"number"==typeof f.left&&(f.left+="px"),c.css(f))}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=$e(y.pixelPosition,function(e,t){if(t)return t=Be(e,n),Me.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0 { 5 | if(e.button === 0){ 6 | leftdrag = true; 7 | }else if(e.button === 2){ 8 | rightdrag = true; 9 | } 10 | }); 11 | document.addEventListener("mouseup", (e) => { 12 | if(e.button === 0){ 13 | leftdrag = false; 14 | }else if(e.button === 2){ 15 | rightdrag = false; 16 | } 17 | }); 18 | -------------------------------------------------------------------------------- /script/fingers.js: -------------------------------------------------------------------------------- 1 | export let list = { 2 | lp: { 3 | code: "lp", 4 | side: "left", 5 | finger: "pinky", 6 | name: "Left Pinky" 7 | }, 8 | lr: { 9 | code: "lr", 10 | side: "left", 11 | finger: "ring", 12 | name: "Left Ring" 13 | }, 14 | lm: { 15 | code: "lm", 16 | side: "left", 17 | finger: "middle", 18 | name: "Left Middle" 19 | }, 20 | li: { 21 | code: "li", 22 | side: "left", 23 | finger: "index", 24 | name: "Left Index" 25 | }, 26 | lt: { 27 | code: "lt", 28 | side: "left", 29 | finger: "thumb", 30 | name: "Left Thumb" 31 | }, 32 | rt: { 33 | code: "rt", 34 | side: "right", 35 | finger: "thumb", 36 | name: "Right Thumb" 37 | }, 38 | ri: { 39 | code: "ri", 40 | side: "right", 41 | finger: "index", 42 | name: "Right Index" 43 | }, 44 | rm: { 45 | code: "rm", 46 | side: "right", 47 | finger: "middle", 48 | name: "Right Middle" 49 | }, 50 | rr: { 51 | code: "rr", 52 | side: "right", 53 | finger: "ring", 54 | name: "Right Ring" 55 | }, 56 | rp: { 57 | code: "rp", 58 | side: "right", 59 | finger: "pinky", 60 | name: "Right Pinky" 61 | } 62 | } 63 | 64 | export function getFingerCodes(){ 65 | return Object.keys(list); 66 | } 67 | 68 | export function nextFinger(fCode) { 69 | const codes = this.getFingerCodes(); 70 | const nextCode = codes[(codes.indexOf(fCode) + 1) % codes.length]; 71 | return list[nextCode]; 72 | } 73 | 74 | export function prevFinger(fCode) { 75 | const codes = this.getFingerCodes(); 76 | let nextIdx = codes.indexOf(fCode) - 1; 77 | if (nextIdx < 0) 78 | nextIdx = codes.length + nextIdx; 79 | const nextCode = codes[nextIdx]; 80 | return list[nextCode]; 81 | } 82 | 83 | function initColors(){ 84 | getFingerCodes().forEach(fCode => { 85 | list[fCode].color = getComputedStyle(document.documentElement).getPropertyValue('--'+fCode).trim(); 86 | }) 87 | } 88 | 89 | initColors(); 90 | -------------------------------------------------------------------------------- /script/index.js: -------------------------------------------------------------------------------- 1 | import "./mousemenu.js"; 2 | import * as Keyboard from './keyboard.js'; 3 | import "./nav.js"; 4 | import * as LocalStorage from './localstorage.js'; 5 | 6 | window.test = function test(){ 7 | console.log(Keyboard.encode()); 8 | } 9 | 10 | let serachParams = new URLSearchParams(window.location.search); 11 | 12 | if(serachParams.has('code')){ 13 | Keyboard.decode(serachParams.get('code')); 14 | }else{ 15 | let local = LocalStorage.load(); 16 | if(local !== ""){ 17 | Keyboard.decode(local); 18 | }else{ 19 | Keyboard.init("staggered"); 20 | } 21 | } 22 | setTimeout(()=> { 23 | $(".content") 24 | .css("opacity", "0") 25 | .removeClass("hidden") 26 | .stop(true, true) 27 | .animate({ opacity: 1 }, 250, () => { 28 | }); 29 | },250) 30 | -------------------------------------------------------------------------------- /script/key.js: -------------------------------------------------------------------------------- 1 | import * as ClickTracker from './click.js'; 2 | import * as Tools from './tools.js'; 3 | import * as Shift from './shift.js'; 4 | import * as Fingers from './fingers.js'; 5 | 6 | const BUTTON_LEFT_MOUSE = 0; 7 | const BUTTON_RIGHT_MOUSE = 2; 8 | const SHIFT_SUPPRESS_MILLIS = 250; 9 | 10 | export default class Key{ 11 | constructor(element ){ 12 | this.element = element; 13 | this.fingers = []; 14 | this.shiftKeydownTimeout = null; 15 | this.shiftKeyupSuppressed = true; 16 | 17 | this.element.addEventListener("mouseover", (e) => { 18 | if (ClickTracker.leftdrag){ 19 | Shift.left || Shift.right 20 | ? this.setFinger(Tools.current) 21 | : this.addFinger(Tools.current); 22 | } 23 | if (ClickTracker.rightdrag){ 24 | Shift.left || Shift.right 25 | ? this.clearFingers() 26 | : this.removeFinger(Tools.current); 27 | } 28 | this.refreshColor(); 29 | }); 30 | this.element.addEventListener("mousedown", (e) => { 31 | switch(e.button) { 32 | case BUTTON_LEFT_MOUSE: 33 | Shift.left || Shift.right 34 | ? this.setFinger(Tools.current) 35 | : this.addFinger(Tools.current); 36 | break; 37 | case BUTTON_RIGHT_MOUSE: 38 | Shift.left || Shift.right 39 | ? this.clearFingers() 40 | : this.removeFinger(Tools.current); 41 | break; 42 | } 43 | this.refreshColor(); 44 | }); 45 | document.addEventListener("keydown", (e) => { 46 | if (e.code === this.element.attributes?.code?.value) { 47 | if (e.key === "Shift") { 48 | this.shiftKeyupSuppressed = false; 49 | this.shiftKeydownTimeout = setTimeout(() => { 50 | this.shiftKeyupSuppressed = true; 51 | }, SHIFT_SUPPRESS_MILLIS) 52 | } 53 | else { 54 | Shift.left || Shift.right 55 | ? this.setFinger(Tools.current) 56 | : this.addFinger(Tools.current); 57 | this.refreshColor(); 58 | } 59 | } 60 | // Stop spacebar from scrolling page 61 | if(e.key === " " && e.target == document.body) { 62 | e.preventDefault(); 63 | } 64 | }) 65 | document.addEventListener("keyup", (e) => { 66 | if (e.code === this.element.attributes?.code?.value) { 67 | if (e.key === "Shift") { 68 | if (!this.shiftKeyupSuppressed) { 69 | (Shift.left && e.code === "ShiftRight") || (Shift.right && e.code === "ShiftLeft") 70 | ? this.setFinger(Tools.current) 71 | : this.addFinger(Tools.current); 72 | this.refreshColor(); 73 | } 74 | clearTimeout(this.shiftKeydownTimeout); 75 | this.shiftKeydownTimeout = null; 76 | this.shiftKeyupSuppressed = true; 77 | } 78 | } 79 | }) 80 | } 81 | hasFinger(finger) { 82 | return this.fingers.indexOf(finger) > -1; 83 | } 84 | 85 | addFinger(finger) { 86 | this.fingers.push(finger) 87 | } 88 | 89 | removeFinger(finger) { 90 | this.fingers = this.fingers.filter(f => f !== finger); 91 | } 92 | 93 | setFinger(finger) { 94 | this.fingers = [finger]; 95 | } 96 | 97 | clearFingers() { 98 | this.fingers = [] 99 | } 100 | 101 | refreshColor(){ 102 | this.element.style.background = null; 103 | let found = []; 104 | Fingers.getFingerCodes().forEach((fingerKey) => { 105 | let finger = Fingers.list[fingerKey]; 106 | if(this.fingers.includes(finger.code)){ 107 | found.push(finger.color); 108 | } 109 | }) 110 | 111 | let bg = "-webkit-linear-gradient(left"; 112 | 113 | let lastPercent = 0; 114 | found.forEach((color, i) => { 115 | bg += `,${color} ${lastPercent}%`; 116 | lastPercent = Math.floor(100*((i+1)/found.length)); 117 | bg += `,${color} ${lastPercent}%`; 118 | }) 119 | 120 | bg += ")"; 121 | 122 | this.element.style.background = bg; 123 | // history.replaceState('','','/?code='+Keyboard.encode()); 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /script/keyboard.js: -------------------------------------------------------------------------------- 1 | import * as Layouts from './layouts.js'; 2 | import * as Tools from './tools.js'; 3 | import Key from './key.js'; 4 | 5 | export let data = { 6 | layout: 'staggered', 7 | keys: [], 8 | wheelListener: null 9 | }; 10 | 11 | export function init(layout) { 12 | cleanup(); 13 | 14 | data = { 15 | layout: layout, 16 | keys: [] 17 | } 18 | 19 | renderHtml(document.querySelector("keyboard"), layout); 20 | populateKeyData(document.querySelectorAll("key")); 21 | 22 | document.querySelector("keyboard").addEventListener("contextmenu", (e) => { 23 | e.preventDefault(); 24 | }) 25 | data.wheelListener = data.wheelListener || ((e) => { 26 | e.preventDefault(); 27 | Tools.getThrottledWheelHandler()(e); 28 | }); 29 | document.querySelector("keyboard").addEventListener("wheel", data.wheelListener); 30 | 31 | const scaleRefEl = document.querySelector(".ratioScalingSpacer"); 32 | const scaleTargetEl = document.querySelector(".keyboardFingersWrapper"); 33 | const MAX_SCALE = 1; 34 | const resizeObserver = new ResizeObserver((entries) => { 35 | for (const entry of entries) { 36 | let scale = Math.min( 37 | entry.contentRect.width / scaleTargetEl.offsetWidth, 38 | entry.contentRect.height / scaleTargetEl.offsetHeight 39 | ); 40 | scale = Math.min(scale, MAX_SCALE); 41 | scaleTargetEl.style.transformOrigin = "center top"; 42 | scaleTargetEl.style.transform = `translate(-50%, 0) scale(${scale})`; 43 | scaleTargetEl.style.top = "0px"; 44 | scaleTargetEl.style.left = (.5 * entry.contentRect.width) + "px"; 45 | } 46 | }); 47 | resizeObserver.observe(scaleRefEl); 48 | } 49 | 50 | export function encode(){ 51 | let ret = ""; 52 | ret += data.layout + "0"; 53 | data.keys.forEach(key => { 54 | if(key.fingers.length === 0){ 55 | ret += ""; 56 | }else{ 57 | ret += key.fingers.join('-'); 58 | } 59 | ret += "0"; 60 | }) 61 | return ret; 62 | } 63 | 64 | export function decode(code){ 65 | try{ 66 | let codeSplit = code.split("0"); 67 | let layout = codeSplit.shift(); 68 | let keys = codeSplit; 69 | init(layout); 70 | data.keys.forEach((key,index) => { 71 | let codeKey = keys[index]; 72 | if(codeKey !== ""){ 73 | let fingers = codeKey.split('-'); 74 | key.fingers = fingers; 75 | key.refreshColor(); 76 | } 77 | }) 78 | }catch(e){ 79 | init("staggered"); 80 | history.replaceState('','','/'); 81 | } 82 | } 83 | 84 | function cleanup() { 85 | if (data.wheelListener) 86 | document.querySelector("keyboard").removeEventListener("wheel", data.wheelListener); 87 | } 88 | 89 | function renderHtml(keyboardEl, layout) { 90 | let html = ""; 91 | Layouts[layout].forEach((row) => { 92 | html += ""; 93 | row.forEach((key) => { 94 | let attr = ""; 95 | if (key.size) { 96 | attr += `size='${key.size}' `; 97 | } 98 | if (key.key.length === 1) { 99 | attr += `fontSize='2' `; 100 | } 101 | if (key.homing === true) { 102 | attr += `homing='yes' `; 103 | } 104 | if (key.code) { 105 | attr += `code=${key.code} ` 106 | } 107 | html += ``; 108 | 109 | if (key.key.length === 2) { 110 | html += `
${key.key[0]}
`; 111 | html += `
${key.key[1]}
`; 112 | } else if (key.key.length === 1) { 113 | html += `
${key.key[0]}
`; 114 | } 115 | html += ""; 116 | }); 117 | html += ""; 118 | }); 119 | keyboardEl.innerHTML = html; 120 | } 121 | 122 | function populateKeyData(keyEls) { 123 | keyEls.forEach((key) => { 124 | data.keys.push(new Key(key)); 125 | }); 126 | } 127 | -------------------------------------------------------------------------------- /script/layouts.js: -------------------------------------------------------------------------------- 1 | export let staggered = [ 2 | [ 3 | { 4 | key: ["`", "~"], 5 | code: "Backquote" 6 | }, 7 | { 8 | key: ["!", "1"], 9 | code: "Digit1" 10 | }, 11 | { 12 | key: ["@", "2"], 13 | code: "Digit2" 14 | }, 15 | { 16 | key: ["#", "3"], 17 | code: "Digit3" 18 | }, 19 | { 20 | key: ["$", "4"], 21 | code: "Digit4" 22 | }, 23 | { 24 | key: ["%", "5"], 25 | code: "Digit5" 26 | }, 27 | { 28 | key: ["^", "6"], 29 | code: "Digit6" 30 | }, 31 | { 32 | key: ["&", "7"], 33 | code: "Digit7" 34 | }, 35 | { 36 | key: ["*", "8"], 37 | code: "Digit8" 38 | }, 39 | { 40 | key: ["(", "9"], 41 | code: "Digit9" 42 | }, 43 | { 44 | key: [")", "0"], 45 | code: "Digit0" 46 | }, 47 | { 48 | key: ["_", "-"], 49 | code: "Minus" 50 | }, 51 | { 52 | key: ["+", "="], 53 | code: "Equal" 54 | }, 55 | { 56 | key: ["Backspace"], 57 | code: "Backspace", 58 | size: 2, 59 | legend: { 60 | position: "center" 61 | } 62 | } 63 | ], 64 | [ 65 | { 66 | key: ["Tab"], 67 | code: "Tab", 68 | size: 1.5 69 | }, 70 | { 71 | key: ["Q"], 72 | code: "KeyQ" 73 | }, 74 | { 75 | key: ["W"], 76 | code: "KeyW" 77 | }, 78 | { 79 | key: ["E"], 80 | code: "KeyE" 81 | }, 82 | { 83 | key: ["R"], 84 | code: "KeyR" 85 | }, 86 | { 87 | key: ["T"], 88 | code: "KeyT" 89 | }, 90 | { 91 | key: ["Y"], 92 | code: "KeyY" 93 | }, 94 | { 95 | key: ["U"], 96 | code: "KeyU" 97 | }, 98 | { 99 | key: ["I"], 100 | code: "KeyI" 101 | }, 102 | { 103 | key: ["O"], 104 | code: "KeyO" 105 | }, 106 | { 107 | key: ["P"], 108 | code: "KeyP" 109 | }, 110 | { 111 | key: ["{", "["], 112 | code: "BracketLeft" 113 | }, 114 | { 115 | key: ["}", "]"], 116 | code: "BracketRight" 117 | }, 118 | { 119 | key: ["|", "\\"], 120 | code: "Backslash", 121 | size: 1.5 122 | } 123 | ], 124 | [ 125 | { 126 | key: ["Caps"], 127 | code: "CapsLock", 128 | size: 1.75 129 | }, 130 | { 131 | key: ["A"], 132 | code: "KeyA" 133 | }, 134 | { 135 | key: ["S"], 136 | code: "KeyS" 137 | }, 138 | { 139 | key: ["D"], 140 | code: "KeyD" 141 | }, 142 | { 143 | key: ["F"], 144 | code: "KeyF", 145 | homing: true 146 | }, 147 | { 148 | key: ["G"], 149 | code: "KeyG" 150 | }, 151 | { 152 | key: ["H"], 153 | code: "KeyH" 154 | }, 155 | { 156 | key: ["J"], 157 | code: "KeyJ", 158 | homing: true 159 | }, 160 | { 161 | key: ["K"], 162 | code: "KeyK" 163 | }, 164 | { 165 | key: ["L"], 166 | code: "KeyL" 167 | }, 168 | { 169 | key: [":", ";"], 170 | code: "Semicolon" 171 | }, 172 | { 173 | key: ['"', "'"], 174 | code: "Quote" 175 | }, 176 | { 177 | key: ["Enter"], 178 | code: "Enter", 179 | size: 2.25 180 | } 181 | ], 182 | [ 183 | { 184 | key: ["Shift"], 185 | code: "ShiftLeft", 186 | size: 2.25 187 | }, 188 | { 189 | key: ["Z"], 190 | code: "KeyZ" 191 | }, 192 | { 193 | key: ["X"], 194 | code: "KeyX" 195 | }, 196 | { 197 | key: ["C"], 198 | code: "KeyC" 199 | }, 200 | { 201 | key: ["V"], 202 | code: "KeyV" 203 | }, 204 | { 205 | key: ["B"], 206 | code: "KeyB" 207 | }, 208 | { 209 | key: ["N"], 210 | code: "KeyN" 211 | }, 212 | { 213 | key: ["M"], 214 | code: "KeyM" 215 | }, 216 | { 217 | key: ["<", ","], 218 | code: "Comma" 219 | }, 220 | { 221 | key: [">", "."], 222 | code: "Period" 223 | }, 224 | { 225 | key: ["?", "/"], 226 | code: "Slash" 227 | }, 228 | { 229 | key: ["Shift"], 230 | code: "ShiftRight", 231 | size: 2.75 232 | } 233 | ], 234 | [ 235 | { 236 | key: ["Ctrl"], 237 | code: "ControlLeft", 238 | size: 1.25 239 | }, 240 | { 241 | key: ["Win"], 242 | code: "MetaLeft", 243 | size: 1.25 244 | }, 245 | { 246 | key: ["Alt"], 247 | code: "AltLeft", 248 | size: 1.25 249 | }, 250 | { 251 | key: [""], 252 | code: "Space", 253 | size: 6.5 254 | }, 255 | { 256 | key: ["Alt"], 257 | code: "AltRight", 258 | size: 1.25 259 | }, 260 | { 261 | key: ["Win"], 262 | code: "MetaRight", 263 | size: 1.25 264 | }, 265 | { 266 | key: ["Meta"], 267 | code: "ContextMenu", 268 | size: 1.25 269 | }, 270 | { 271 | key: ["Ctrl"], 272 | code: "ControlRight", 273 | size: 1.25 274 | } 275 | ], 276 | ]; 277 | 278 | export let matrix = [ 279 | [ 280 | { 281 | key: ["`", "~"], 282 | code: "Backquote" 283 | }, 284 | { 285 | key: ["!", "1"], 286 | code: "Digit1" 287 | }, 288 | { 289 | key: ["@", "2"], 290 | code: "Digit2" 291 | }, 292 | { 293 | key: ["#", "3"], 294 | code: "Digit3" 295 | }, 296 | { 297 | key: ["$", "4"], 298 | code: "Digit4" 299 | }, 300 | { 301 | key: ["%", "5"], 302 | code: "Digit5" 303 | }, 304 | { 305 | key: ["^", "6"], 306 | code: "Digit6" 307 | }, 308 | { 309 | key: ["&", "7"], 310 | code: "DIgit7" 311 | }, 312 | { 313 | key: ["*", "8"], 314 | code: "Digit8" 315 | }, 316 | { 317 | key: ["(", "9"], 318 | code: "Digit9" 319 | }, 320 | { 321 | key: [")", "0"], 322 | code: "Digit0" 323 | }, 324 | { 325 | key: ["Bksp"], 326 | code: "Backspace", 327 | size: 1 328 | } 329 | ], 330 | [ 331 | { 332 | key: ["Tab"], 333 | code: "TabLeft", 334 | size: 1 335 | }, 336 | { 337 | key: ["Q"], 338 | code: "KeyQ" 339 | }, 340 | { 341 | key: ["W"], 342 | code: "KeyW" 343 | }, 344 | { 345 | key: ["E"], 346 | code: "KeyE" 347 | }, 348 | { 349 | key: ["R"], 350 | code: "KeyR" 351 | }, 352 | { 353 | key: ["T"], 354 | code: "KeyT" 355 | }, 356 | { 357 | key: ["Y"], 358 | code: "KeyY" 359 | }, 360 | { 361 | key: ["U"], 362 | code: "KeyU" 363 | }, 364 | { 365 | key: ["I"], 366 | code: "KeyI" 367 | }, 368 | { 369 | key: ["O"], 370 | code: "KeyO" 371 | }, 372 | { 373 | key: ["P"], 374 | code: "KeyP" 375 | }, 376 | { 377 | key: ["|", "\\"], 378 | code: "Backslash", 379 | size: 1 380 | } 381 | ], 382 | [ 383 | { 384 | key: ["Caps"], 385 | code: "CapsLock", 386 | size: 1 387 | }, 388 | { 389 | key: ["A"], 390 | code: "KeyA" 391 | }, 392 | { 393 | key: ["S"], 394 | code: "KeyS" 395 | }, 396 | { 397 | key: ["D"], 398 | code: "KeyD" 399 | }, 400 | { 401 | key: ["F"], 402 | code: "KeyF", 403 | homing: true 404 | }, 405 | { 406 | key: ["G"], 407 | code: "KeyG" 408 | }, 409 | { 410 | key: ["H"], 411 | code: "KeyH" 412 | }, 413 | { 414 | key: ["J"], 415 | code: "KeyJ", 416 | homing: true 417 | }, 418 | { 419 | key: ["K"], 420 | code: "KeyK" 421 | }, 422 | { 423 | key: ["L"], 424 | code: "KeyL" 425 | }, 426 | { 427 | key: [":", ";"], 428 | code: "Semicolon" 429 | }, 430 | { 431 | key: ["Entr"], 432 | code: "Enter", 433 | size: 1 434 | } 435 | ], 436 | [ 437 | { 438 | key: ["Shft"], 439 | code: "ShiftLeft", 440 | size: 1 441 | }, 442 | { 443 | key: ["Z"], 444 | code: "KeyZ" 445 | }, 446 | { 447 | key: ["X"], 448 | code: "KeyX" 449 | }, 450 | { 451 | key: ["C"], 452 | code: "KeyC" 453 | }, 454 | { 455 | key: ["V"], 456 | code: "KeyV" 457 | }, 458 | { 459 | key: ["B"], 460 | code: "KeyB" 461 | }, 462 | { 463 | key: ["N"], 464 | code: "KeyN" 465 | }, 466 | { 467 | key: ["M"], 468 | code: "KeyM" 469 | }, 470 | { 471 | key: ["<", ","], 472 | code: "Comma" 473 | }, 474 | { 475 | key: [">", "."], 476 | code: "Period" 477 | }, 478 | { 479 | key: ["?", "/"], 480 | code: "Slash" 481 | }, 482 | { 483 | key: ["Shft"], 484 | code: "ShiftRight", 485 | size: 1 486 | } 487 | ], 488 | [ 489 | { 490 | key: ["Ctrl"], 491 | code: "ControlLeft", 492 | size: 1 493 | }, 494 | { 495 | key: ["Win"], 496 | code: "MetaLeft", 497 | size: 1 498 | }, 499 | { 500 | key: ["Supr"], 501 | size: 1 502 | }, 503 | { 504 | key: ["Alt"], 505 | code: "AltLeft", 506 | size: 1 507 | }, 508 | { 509 | key: ["Lowr"], 510 | size: 1 511 | }, 512 | { 513 | key: [""], 514 | code: "Space", 515 | size: 2.1 516 | }, 517 | { 518 | key: ["Uppr"], 519 | size: 1 520 | }, 521 | { 522 | key: ["Alt"], 523 | code: "AltRight", 524 | size: 1 525 | }, 526 | { 527 | key: ["Win"], 528 | code: "MetaRight", 529 | size: 1 530 | }, 531 | { 532 | key: ["Meta"], 533 | code: "ContextMenu", 534 | size: 1 535 | }, 536 | { 537 | key: ["Ctrl"], 538 | code: "ControlRight", 539 | size: 1 540 | } 541 | ], 542 | ]; 543 | -------------------------------------------------------------------------------- /script/localstorage.js: -------------------------------------------------------------------------------- 1 | export function load(){ 2 | return window.localStorage.getItem("code"); 3 | } 4 | 5 | export function save(code){ 6 | window.localStorage.setItem("code", code); 7 | } -------------------------------------------------------------------------------- /script/mousemenu.js: -------------------------------------------------------------------------------- 1 | // import * as Tools from './tools.js'; 2 | // import * as Fingers from './fingers.js'; 3 | 4 | // let menu = document.querySelector('.mousemenu'); 5 | 6 | // let currentFinger = "Left index"; 7 | // let multi = false; 8 | 9 | 10 | // document.addEventListener("mousemove", e => { 11 | // let left = e.pageX; 12 | // let top = e.pageY; 13 | // menu.style.left = left + 25 + 'px'; 14 | // menu.style.top = top + + 25 + 'px'; 15 | // }) 16 | 17 | // function updateText(){ 18 | // menu.innerHTML = `
${multi ? "Multi mode" : ""}
`; 19 | // menu.innerHTML = `
${currentFinger}
${multi ? "Multi mode" : ""}
`; 20 | 21 | // } 22 | 23 | // export function updateFinger(){ 24 | // currentFinger = Fingers.list[Tools.current].name; 25 | // updateText(); 26 | // } 27 | 28 | // export function updateMultiple(tf){ 29 | // multi = tf; 30 | // updateText(); 31 | // } 32 | 33 | -------------------------------------------------------------------------------- /script/nav.js: -------------------------------------------------------------------------------- 1 | import * as Keyboard from "./keyboard.js"; 2 | import * as Notifications from "./notifications.js"; 3 | import * as LocalStorage from "./localstorage.js"; 4 | 5 | document 6 | .querySelector(".nav .buttons .hamburger") 7 | .addEventListener("click", (e) => { 8 | $(".navHamburger").toggleClass("hidden"); 9 | $(".nav .buttons .button.hamburger").toggleClass("active"); 10 | }); 11 | 12 | document 13 | .querySelectorAll(".nav .buttons .toggleLayout") 14 | .forEach((el) => { 15 | el.addEventListener("click", (e) => { 16 | if (Keyboard.data.layout === "staggered") { 17 | Keyboard.init("matrix"); 18 | } else { 19 | Keyboard.init("staggered"); 20 | } 21 | }); 22 | }); 23 | 24 | document 25 | .querySelectorAll(".nav .buttons .clear") 26 | .forEach((el) => { 27 | el.addEventListener("click", (e) => { 28 | Keyboard.init(Keyboard.data.layout); 29 | history.replaceState("", "", "/"); 30 | }); 31 | }); 32 | 33 | document 34 | .querySelector(".nav .buttons .share") 35 | .addEventListener("click", (e) => { 36 | history.replaceState("", "", "/"); 37 | let link = window.location.href + "?code=" + Keyboard.encode(); 38 | try { 39 | navigator.clipboard.writeText(link).then( 40 | () => { 41 | Notifications.add("Link copied", 1); 42 | }, 43 | (e) => { 44 | Notifications.add("Something went wrong: " + e, -1); 45 | } 46 | ); 47 | } catch (e) { 48 | alert("Copying to clipboard failed, here's the link instead: " + link); 49 | Notifications.add("Something went wrong: " + e, -1); 50 | } 51 | }); 52 | 53 | document.querySelector(".nav .buttons .save") 54 | .addEventListener("click", (e) => { 55 | LocalStorage.save(Keyboard.encode()); 56 | Notifications.add("Saved", 1); 57 | }); 58 | 59 | document 60 | .querySelectorAll(".nav .buttons .screenshot") 61 | .forEach((el) => { 62 | el.addEventListener("click", (e) => { 63 | $(".screenshotBottom").removeClass("hidden"); 64 | $("body").css("opacity", 1); 65 | let src = $(".keyboardContainer"); 66 | var sourceX = src.position().left; /*X position from div#target*/ 67 | var sourceY = src.position().top; /*Y position from div#target*/ 68 | var sourceWidth = src.width(); /*clientWidth/offsetWidth from div#target*/ 69 | var sourceHeight = src.height(); /*clientHeight/offsetHeight from div#target*/ 70 | try { 71 | html2canvas(document.body, 72 | { 73 | backgroundColor: "#111", 74 | height: sourceHeight + 50, 75 | width: sourceWidth + 50, 76 | x: sourceX - 25, 77 | y: sourceY - 25, 78 | } 79 | ).then(function (canvas) { 80 | // html2canvas(src[0], { 81 | // backgroundColor: "#111", 82 | // }).then(function (canvas) { 83 | // document.body.appendChild(canvas); 84 | canvas.toBlob(function (blob) { 85 | try { 86 | if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) { 87 | open(URL.createObjectURL(blob)); 88 | $(".screenshotBottom").addClass("hidden"); 89 | } else { 90 | navigator.clipboard 91 | .write([ 92 | new ClipboardItem( 93 | Object.defineProperty({}, blob.type, { 94 | value: blob, 95 | enumerable: true, 96 | }) 97 | ), 98 | ]) 99 | .then(() => { 100 | $(".screenshotBottom").addClass("hidden"); 101 | }); 102 | } 103 | } catch (e) { 104 | $(".screenshotBottom").addClass("hidden"); 105 | Notifications.add( 106 | "Error saving image to clipboard: " + e.message, 107 | -1 108 | ); 109 | } 110 | }); 111 | }); 112 | } catch (e) { 113 | $(".screenshotBottom").addClass("hidden"); 114 | Notifications.add("Error saving image to clipboard: " + e.message, -1); 115 | } 116 | }); 117 | }); 118 | -------------------------------------------------------------------------------- /script/notifications.js: -------------------------------------------------------------------------------- 1 | const notificationHistory = []; 2 | let id = 0; 3 | class Notification { 4 | constructor(message, level, duration, customTitle, customIcon) { 5 | this.message = message; 6 | this.level = level; 7 | if (duration == undefined) { 8 | if (level === -1) { 9 | this.duration = 0; 10 | } else { 11 | this.duration = 3000; 12 | } 13 | } else { 14 | this.duration = duration * 1000; 15 | } 16 | this.customTitle = customTitle; 17 | this.customIcon = customIcon; 18 | this.id = id++; 19 | } 20 | //level 21 | //0 - notice 22 | //1 - good 23 | //-1 - bad 24 | show() { 25 | let cls = "notice"; 26 | let icon = ``; 27 | let title = "Notice"; 28 | if (this.level === 1) { 29 | cls = "good"; 30 | icon = ``; 31 | title = "Success"; 32 | } else if (this.level === -1) { 33 | cls = "bad"; 34 | icon = ``; 35 | title = "Error"; 36 | console.error(this.message); 37 | } 38 | 39 | if (this.customTitle != undefined) { 40 | title = this.customTitle; 41 | } 42 | 43 | if (this.customIcon != undefined) { 44 | icon = ``; 45 | } 46 | 47 | // moveCurrentToHistory(); 48 | let oldHeight = $("#notificationCenter .history").height(); 49 | $("#notificationCenter .history").prepend(` 50 | 51 |
52 |
${icon}
53 |
${title}
${this.message}
54 |
55 | 56 | `); 57 | let newHeight = $("#notificationCenter .history").height(); 58 | $(`#notificationCenter .notif[id='${this.id}']`).remove(); 59 | $("#notificationCenter .history") 60 | .css("margin-top", 0) 61 | .animate( 62 | { 63 | marginTop: newHeight - oldHeight, 64 | }, 65 | 125, 66 | () => { 67 | $("#notificationCenter .history").css("margin-top", 0); 68 | $("#notificationCenter .history").prepend(` 69 | 70 |
71 |
${icon}
72 |
${title}
${this.message}
73 |
74 | 75 | `); 76 | $(`#notificationCenter .notif[id='${this.id}']`) 77 | .css("opacity", 0) 78 | .animate( 79 | { 80 | opacity: 1, 81 | }, 82 | 125, 83 | () => { 84 | $(`#notificationCenter .notif[id='${this.id}']`).css( 85 | "opacity", 86 | "" 87 | ); 88 | } 89 | ); 90 | $(`#notificationCenter .notif[id='${this.id}']`).click(() => { 91 | this.hide(); 92 | }); 93 | } 94 | ); 95 | if (this.duration > 0) { 96 | setTimeout(() => { 97 | this.hide(); 98 | }, this.duration + 250); 99 | } 100 | $(`#notificationCenter .notif[id='${this.id}']`).hover(() => { 101 | $(`#notificationCenter .notif[id='${this.id}']`).toggleClass("hover"); 102 | }); 103 | } 104 | hide() { 105 | $(`#notificationCenter .notif[id='${this.id}']`) 106 | .css("opacity", 1) 107 | .animate( 108 | { 109 | opacity: 0, 110 | }, 111 | 125, 112 | () => { 113 | $(`#notificationCenter .notif[id='${this.id}']`).animate( 114 | { 115 | height: 0, 116 | }, 117 | 125, 118 | () => { 119 | $(`#notificationCenter .notif[id='${this.id}']`).remove(); 120 | } 121 | ); 122 | } 123 | ); 124 | } 125 | } 126 | 127 | export function add(message, level, duration, customTitle, customIcon) { 128 | notificationHistory.push( 129 | new Notification(message, level, duration, customTitle, customIcon).show() 130 | ); 131 | } 132 | -------------------------------------------------------------------------------- /script/shift.js: -------------------------------------------------------------------------------- 1 | export let left = false; 2 | export let right = false; 3 | 4 | document.addEventListener('keydown', e => { 5 | if (e.code === "ShiftLeft") 6 | left = true; 7 | if (e.code === "ShiftRight") 8 | right = true; 9 | }) 10 | 11 | document.addEventListener('keyup', e => { 12 | if (e.code === "ShiftLeft") 13 | left = false; 14 | if (e.code === "ShiftRight") 15 | right = false; 16 | }) 17 | -------------------------------------------------------------------------------- /script/test.js: -------------------------------------------------------------------------------- 1 | export function log(){ 2 | console.log('hello from the other side'); 3 | } -------------------------------------------------------------------------------- /script/tools.js: -------------------------------------------------------------------------------- 1 | import * as Fingers from './fingers.js'; 2 | import * as Util from './util.js'; 3 | 4 | export let current = Fingers.list.li.code; 5 | 6 | export function goNextFinger() { 7 | current = Fingers.nextFinger(current).code; 8 | updateFingerButtons(); 9 | } 10 | 11 | export function goPrevFinger() { 12 | current = Fingers.prevFinger(current).code; 13 | updateFingerButtons(); 14 | } 15 | 16 | const WHEEL_THROTTLE_MILLIS = 150; 17 | export function getThrottledWheelHandler() { 18 | return Util.throttle((e) => { 19 | e.deltaY > 0 || e.deltaX > 0 20 | ? goNextFinger() 21 | : goPrevFinger(); 22 | }, WHEEL_THROTTLE_MILLIS); 23 | } 24 | 25 | function updateFingerButtons(){ 26 | let buttons = document.querySelectorAll('.fingerbuttons .button'); 27 | buttons.forEach(button => { 28 | button.classList.remove('active'); 29 | }) 30 | document.querySelector(`.fingerbuttons .button[finger='${current}']`).classList.add('active'); 31 | } 32 | 33 | document.addEventListener('keydown', (e) => { 34 | if (e.key === "ArrowRight") { 35 | goNextFinger() 36 | } 37 | if (e.key === "ArrowLeft") { 38 | goPrevFinger() 39 | } 40 | }) 41 | 42 | let buttons = document.querySelectorAll('.fingerbuttons .button'); 43 | buttons.forEach(button => { 44 | button.addEventListener('click', (e) => { 45 | current = e.currentTarget.getAttribute("finger"); 46 | // Mousemenu.updateFinger(); 47 | updateFingerButtons(); 48 | }) 49 | }) 50 | -------------------------------------------------------------------------------- /script/util.js: -------------------------------------------------------------------------------- 1 | export function throttle(fn, delay) { 2 | let lastCall = 0; 3 | return function (...args) { 4 | const now = new Date().getTime(); 5 | if (now - lastCall < delay) { 6 | return; 7 | } 8 | lastCall = now; 9 | return fn(...args); 10 | } 11 | } 12 | --------------------------------------------------------------------------------