Skip to content

Instantly share code, notes, and snippets.

@shgysk8zer0

shgysk8zer0/.editorconfig

Last active February 5, 2019 23:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shgysk8zer0/8e5bde0d02cebc9cd1abbf257d2e8a81 to your computer and use it in GitHub Desktop.
Save shgysk8zer0/8e5bde0d02cebc9cd1abbf257d2e8a81 to your computer and use it in GitHub Desktop.
Download ZIP
Signature Canvas
Raw
.editorconfig
# EditorConfig is awesome: http://EditorConfig.org
# top-most EditorConfig file
root = true
# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
charset = utf-8
[*.{html,xml,svg,js,css,php}]
indent_style = tab
trim_trailing_whitespace = true
max_line_length = 80
[*.{md,markdown,yml,json}]
indent_style = space
indent_size = 2
[*.{yml,json}]
trim_trailing_whitespace = true
[*.{md,markdown}]
trim_trailing_whitespace = false
[*.{js,php}]
quote_type = single
spaces_around_operators = true
spaces_around_brackets = true
[*.{html,xml,svg,css}]
quote_type = double
Raw
.gitignore
node_modules/
Raw
index.html
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Canvas Signature</title>
<script type="module" src="./script.js" async=""></script>
<link href="https://cdn.chriszuber.com/css/core-css/viewport.css" rel="stylesheet" />
<link href="https://cdn.chriszuber.com/css/core-css/rem.css" rel="stylesheet" />
<link href="https://cdn.chriszuber.com/normalize/normalize.css" rel="stylesheet" />
<link href="https://cdn.chriszuber.com/css/core-css/element.css" rel="stylesheet" />
<link href="https://cdn.chriszuber.com/css/core-css/class-rules.css" rel="stylesheet" />
<link href="https://cdn.chriszuber.com/animate.css/animate.cs" rel="stylesheet" />
<link href="https://cdn.chriszuber.com/core-css/animations.css" rel="stylesheet" />
<link href="https://cdn.chriszuber.com/css/core-css/fonts.css" rel="stylesheet" />
<link href="./style.css" rel="stylesheet" />
</head>
<body class="color-default backgorund-primary font-main smooth-scroll border-box no-js">
<canvas is="drawing-canvas" id="canvas" width="900" height="120" class="shadow-dark"></canvas>
<button is="share-button" type="button" class="round shadow">
<svg class="current-color icon" viewBox="0 0 16 16">
<path d="M5.969 7.969a2.969 2.969 0 1 1-5.938 0 2.969 2.969 0 1 1 5.938 0zm9.969 5a2.969 2.969 0 1 1-5.938 0 2.969 2.969 0 1 1 5.938 0zm0-10a2.969 2.969 0 1 1-5.938 0 2.969 2.969 0 1 1 5.938 0z" overflow="visible"/>
<path d="M12.625 2.156L2.562 7.031.75 7.938l1.812.906 10.032 5.062.906-1.812-8.22-4.156 8.219-4-.875-1.782z" overflow="visible"/>
</svg>
</button>
<div class="inline-flex column no-wrap">
<button type="button" id="save-btn" class="btn btn-accept">
<svg class="current-color icon" viewBox="0 0 16 16">
<path d="M4.406 9a.5.5 0 0 0-.312.219l-1 1.5a.5.5 0 1 0 .812.562l1-1.5a.5.5 0 0 0-.5-.781zm7 0a.5.5 0 0 0-.312.781l1 1.5a.5.5 0 1 0 .812-.562l-1-1.5a.5.5 0 0 0-.5-.219zM7 1v5.563L5.719 5.28A1.015 1.015 0 0 0 5 5.001L4 5v1c0 .265.093.53.281.719l3 3 .282.281h.875l.28-.281 3-3A1.01 1.01 0 0 0 12 6V5h-1c-.265 0-.53.093-.719.281l-1.28 1.282V1z"/>
<path fill-rule="evenodd" d="M3 11v4h10v-4zm3.344 1.438a.651.651 0 0 1 .062 0c.291-.056.6.203.594.5V13h2v-.063c-.004-.264.236-.507.5-.507s.504.243.5.507V13c0 .545-.455 1-1 1H7c-.545 0-1-.455-1-1v-.063a.515.515 0 0 1 .344-.5z"/>
</svg>
</button>
<button type="button" id="clear-btn" class="btn btn-reject">
<svg class="current-color icon" viewBox="0 0 16 16">
<path d="M6 2L0 8l6 6h9.035A1.03 1.03 0 0 0 16 13V3c0-.53-.346-1-1.009-1zm1 3h1.031c.255.011.51.129.688.313L10 6.593l1.313-1.28c.265-.231.446-.306.687-.313h1v1c0 .286-.034.55-.25.75l-1.281 1.281 1.25 1.25c.188.188.281.454.281.719v1h-1c-.265 0-.53-.093-.719-.281l-1.28-1.281-1.282 1.28A1.015 1.015 0 0 1 8 11H7v-1c0-.265.093-.53.281-.719l1.282-1.25L7.28 6.75A.909.909 0 0 1 7 6z"/>
</svg>
</button>
</div>
</body>
</html>
Raw
package-lock.json
{
"name": "8e5bde0d02cebc9cd1abbf257d2e8a81",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"async": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
"integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
"dev": true
},
"colors": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
"integrity": "sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=",
"dev": true
},
"corser": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
"integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=",
"dev": true
},
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"dev": true,
"requires": {
"ms": "2.0.0"
}
},
"ecstatic": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/ecstatic/-/ecstatic-3.3.0.tgz",
"integrity": "sha512-EblWYTd+wPIAMQ0U4oYJZ7QBypT9ZUIwpqli0bKDjeIIQnXDBK2dXtZ9yzRCOlkW1HkO8gn7/FxLK1yPIW17pw==",
"dev": true,
"requires": {
"he": "^1.1.1",
"mime": "^1.6.0",
"minimist": "^1.1.0",
"url-join": "^2.0.5"
}
},
"eventemitter3": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz",
"integrity": "sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA==",
"dev": true
},
"follow-redirects": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.6.1.tgz",
"integrity": "sha512-t2JCjbzxQpWvbhts3l6SH1DKzSrx8a+SsaVf4h6bG4kOXUuPYS/kg2Lr4gQSb7eemaHqJkOThF1BGyjlUkO1GQ==",
"dev": true,
"requires": {
"debug": "=3.1.0"
}
},
"he": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true
},
"http-proxy": {
"version": "1.17.0",
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.17.0.tgz",
"integrity": "sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==",
"dev": true,
"requires": {
"eventemitter3": "^3.0.0",
"follow-redirects": "^1.0.0",
"requires-port": "^1.0.0"
}
},
"http-server": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/http-server/-/http-server-0.11.1.tgz",
"integrity": "sha512-6JeGDGoujJLmhjiRGlt8yK8Z9Kl0vnl/dQoQZlc4oeqaUoAKQg94NILLfrY3oWzSyFaQCVNTcKE5PZ3cH8VP9w==",
"dev": true,
"requires": {
"colors": "1.0.3",
"corser": "~2.0.0",
"ecstatic": "^3.0.0",
"http-proxy": "^1.8.1",
"opener": "~1.4.0",
"optimist": "0.6.x",
"portfinder": "^1.0.13",
"union": "~0.4.3"
}
},
"mime": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
"dev": true
},
"minimist": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true
},
"mkdirp": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"requires": {
"minimist": "0.0.8"
},
"dependencies": {
"minimist": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true
}
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true
},
"opener": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/opener/-/opener-1.4.3.tgz",
"integrity": "sha1-XG2ixdflgx6P+jlklQ+NZnSskLg=",
"dev": true
},
"optimist": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
"integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
"dev": true,
"requires": {
"minimist": "~0.0.1",
"wordwrap": "~0.0.2"
},
"dependencies": {
"minimist": {
"version": "0.0.10",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
"integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
"dev": true
}
}
},
"portfinder": {
"version": "1.0.20",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
"integrity": "sha512-Yxe4mTyDzTd59PZJY4ojZR8F+E5e97iq2ZOHPz3HDgSvYC5siNad2tLooQ5y5QHyQhc3xVqvyk/eNA3wuoa7Sw==",
"dev": true,
"requires": {
"async": "^1.5.2",
"debug": "^2.2.0",
"mkdirp": "0.5.x"
},
"dependencies": {
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"dev": true,
"requires": {
"ms": "2.0.0"
}
}
}
},
"qs": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/qs/-/qs-2.3.3.tgz",
"integrity": "sha1-6eha2+ddoLvkyOBHaghikPhjtAQ=",
"dev": true
},
"requires-port": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
"dev": true
},
"union": {
"version": "0.4.6",
"resolved": "https://registry.npmjs.org/union/-/union-0.4.6.tgz",
"integrity": "sha1-GY+9rrolTniLDvy2MLwR8kopWeA=",
"dev": true,
"requires": {
"qs": "~2.3.3"
}
},
"url-join": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/url-join/-/url-join-2.0.5.tgz",
"integrity": "sha1-WvIvGMBSoACkjXuCxenC4v7tpyg=",
"dev": true
},
"wordwrap": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
"integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=",
"dev": true
}
}
}
Raw
package.json
{
"name": "8e5bde0d02cebc9cd1abbf257d2e8a81",
"version": "1.0.0",
"description": "Canvas Signature Gist",
"config": {
"serve": {
"domain": "localhost",
"port": 8081,
"path": "./"
}
},
"scripts": {
"start": "http-server ${npm_package_config_serve_path} -a ${npm_package_config_serve_domain} -p ${npm_package_config_serve_port} -o"
},
"repository": {
"type": "git",
"url": "git+ssh://git@gist.github.com/8e5bde0d02cebc9cd1abbf257d2e8a81.git"
},
"keywords": [
"gist",
"canvas"
],
"author": "Chris Zuber <shgysk8zer0@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://gist.github.com/8e5bde0d02cebc9cd1abbf257d2e8a81"
},
"homepage": "https://gist.github.com/8e5bde0d02cebc9cd1abbf257d2e8a81",
"devDependencies": {
"http-server": "^0.11.1"
}
}
Raw
script.js
import 'https://cdn.chriszuber.com/js/std-js/deprefixer.js';
import 'https://cdn.chriszuber.com/js/std-js/shims.js';
import 'https://cdn.chriszuber.com/components/drawing-canvas.js';
import 'https://cdn.chriszuber.com/components/share-button.js';
import {confirm} from 'https://cdn.chriszuber.com/js/std-js/asyncDialog.js';
import {ready, $} from 'https://cdn.chriszuber.com/js/std-js/functions.js';
document.documentElement.classList.replace('no-js', 'js');
document.documentElement.classList.toggle('no-dialog', document.createElement('dialog') instanceof HTMLUnknownElement);
ready().then(() => {
const canvas = document.getElementById('canvas');
$('#clear-btn').click(async () => {
if (await confirm('Are you sure you want to erase everything?')) {
canvas.clear();
}
});
$('#save-btn').click(async () => {
if (await confirm('This will open the image in a new tab. Continue?')) {
open(canvas.dataURL);
}
});
const share = document.querySelector('[is="share-button"]');
share.title = 'signature-canvas';
share.url = 'https://codepen.io/shgysk8zer0/full/JxWjEO';
share.text = share.title;
});
Raw
style.css
:root {
--default-color: #343434;
--primary-color: #fafafa;
--alt-color: #fefefe;
--main-font: "Roboto";
--line-height: 1.3;
--default-cursor: auto;
--desktop-rem: 1.3vmax;
--tablet-rem: 1.6vmax;
--mobile-rem: 20px;
--button-background: #1b5fcb;
--button-color: var(--alt-color);
--button-border: none;
--button-border-radius: 0.15rem;
--button-padding: 0.4rem;
--button-active-background: #1048a1;
--button-active-color: var(--button-color);
--button-active-border: var(--button-border);
--button-disabled-background: #787878;
--button-disabled-color: #4e4e4e;
--button-disabled-border: var(--button-border);
--button-accept-background: #1FA214;
--button-accept-active-background: #157a0c;
--button-reject-background: #B31414;
--button-reject-active-background: #7a0c0c;
--dialog-border: none;
--nav-height: 2.7rem;
--header-height: 30vh;
--footer-height: auto;
--header-bg-f: url("https://i.imgur.com/wJZeamR.jpg");
--header-bg-h: url("https://i.imgur.com/wJZeamRh.jpg");
--header-bg-l: url("https://i.imgur.com/wJZeamRl.jpg");
--header-bg-m: url("https://i.imgur.com/wJZeamRm.jpg");
--header-bg: var(--header-bg-l);
}
button:not([hidden])[is="share-button"] {
position: fixed;
z-index: 3;
bottom: 1.1em;
right: 1.1em;
box-shadow: var(--shadow-x, 0) var(--shadow-y, 2px) var(--shadow-blur, 10px) var(--shadow-spread, 0) var(--shadow-color, rgba(0,0,0,.2));
border-radius: 50%;
padding: 0.6rem;
text-align: center;
vertical-align: middle;
font-size: 1.65rem;
line-height: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment