Initial commit

CaptainCodeman · Jul 3, 2016 · 572052d · 572052d
commit 572052d
Show file tree

Hide file tree

Showing 9 changed files with 461 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,19 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# http://editorconfig.org
+
+root = true
+
+[*]
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+indent_size = 4
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/README.md b/README.md
@@ -0,0 +1,13 @@
+_[Demo and API docs](http://captaincodeman.github.io/sign-here/)_
+
+##&lt;sign-here&gt;
+
+`sign-here` is a polymer element that provides smooth signature drawing with HTML5 Canvas by wrapping
+the [signature_pad](https://github.com/szimek/signature_pad) library.
+
+Example:
+
+    <sign-here width="400" height="200" image="{{image}}"></sign-here>
+
+The `image` property will be updated after any interaction with the data-uri encoded value of the image.
+The encoding method and quality can be controlled, as can the color of the paper and ink.
diff --git a/bower.json b/bower.json
@@ -0,0 +1,33 @@
+{
+  "name": "sign-here",
+  "version": "0.0.1",
+  "description": "Smooth signature drawing with HTML5 Canvas",
+  "authors": [
+    "Simon Green <[email protected]>"
+  ],
+  "main": "sign-here.html",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/github.com/CaptainCodeman/sign-here.git"
+  },
+  "homepage": "http://captaincodeman.github.io/sign-here/",
+  "keywords": [
+    "polymer",
+    "web-components",
+    "signature_pad",
+    "signature",
+    "sign",
+    "canvas"
+  ],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.4.0",
+    "signature_pad": "^1.5.3"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+    "web-component-tester": "^4.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  },
+  "license": "MIT"
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+  <head>
+    <title>sign-here demo</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+
+    <link rel="import" href="x-sign-here.html">
+    <link rel="import" href="../sign-here.html">
+
+    <style is="custom-style" include="demo-pages-shared-styles">
+    </style>
+  </head>
+  <body>
+
+    <div class="vertical-section-container centered">
+      <h3>Basic sign-here Demo</h3>
+      <demo-snippet>
+        <template>
+          <sign-here id="signhere" width="360" height="180"></sign-here>
+        </template>
+      </demo-snippet>
+
+      <h3>With Bound Properties</h3>
+      <x-sign-here></x-sign-here>
+    </div>
+  </body>
+</html>
diff --git a/demo/x-sign-here.html b/demo/x-sign-here.html
@@ -0,0 +1,76 @@
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../sign-here.html">
+
+<dom-module id="x-sign-here">
+  <template>
+    <style>
+      sign-here, img {
+        border: 1px solid #ccc;
+        width: 400px;
+        height: 200px;
+      }
+      pre {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+      }
+    </style>
+    <sign-here id="signhere" width="400" height="200" image="{{image}}" active="{{active}}" empty="{{empty}}" type="[[type]]" pen-color="[[color]]" background-color="#fffff7"></sign-here>
+    <ul>
+      <li>Active: [[active]]</li>
+      <li>Empty: [[empty]]</li>
+    </ul>
+    <button on-tap="clear">Clear</button>
+    <button on-tap="jpeg">Jpeg</button>
+    <button on-tap="png">Png</button>
+    <button on-tap="webp">Webp</button>
+    <button on-tap="red" style="color: #a33">Red</button>
+    <button on-tap="green" style="color: #3a3">Green</button>
+    <button on-tap="blue" style="color: #33a">Blue</button>
+    <h3>Captured Image</h3>
+    <img src$="[[image]]">
+    <h3>Image Data</h3>
+    <p>[[len(image)]] bytes</p>
+    <pre>[[image]]</pre>
+  </template>
+  <script>
+    Polymer({
+      is: "x-sign-here",
+
+      properties: {
+        image: String,
+        type: {
+          type: String,
+          value: 'image/png'
+        },
+        color: {
+          type: String,
+          value: '#33a'
+        }
+      },
+      clear: function() {
+        this.$.signhere.clear();
+      },
+      jpeg: function() {
+        this.type = 'image/jpeg';
+      },
+      png: function() {
+        this.type = 'image/png';
+      },
+      webp: function() {
+        this.type = 'image/webp';
+      },
+      red: function() {
+        this.color = '#a33';
+      },
+      green: function() {
+        this.color = '#3a3';
+      },
+      blue: function() {
+        this.color = '#33a';
+      },
+      len: function(image) {
+        return image.length;
+      }
+    });
+  </script>
+</dom-module>
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>sign-here</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../iron-component-page/iron-component-page.html">
+  </head>
+  <body>
+    <iron-component-page src="sign-here.html"></iron-component-page>
+  </body>
+</html>