Skip to content

Commit c066464

Browse files
melromeromelromero
committed
first commit
0 parents  commit c066464

File tree

8 files changed

+118
-0
lines changed

8 files changed

+118
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎.npmignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
demo/

‎LICENSE

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2017 Melisa Romero
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of
6+
this software and associated documentation files (the "Software"), to deal in
7+
the Software without restriction, including without limitation the rights to
8+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9+
the Software, and to permit persons to whom the Software is furnished to do so,
10+
subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17+
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18+
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19+
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20+
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# angular-ui-scribble

‎angular-ui-scribble.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
angular.module('angular-ui-scribble',[])
2+
.directive('uiScribble', function(){
3+
return {
4+
scope:{},
5+
template:
6+
`<div class="scribble">
7+
<div class="scribble-canvas">
8+
<canvas height="300" width="600"></canvas>
9+
</div>
10+
<button ng-click="clearSignature()">Clear</button>
11+
<button ng-click="setMode('erase')">Erase</button>
12+
<button ng-click="setMode('pen')">Pen</button>
13+
</div>`,
14+
controller: function($scope, $element){
15+
$scope.mode = 'pen';
16+
var signaturePad;
17+
var canvas = $element.find('canvas')[0];
18+
var ctx = canvas.getContext('2d');
19+
signaturePad = new SignaturePad(canvas);
20+
21+
$scope.clearSignature = function(){
22+
signaturePad.clear();
23+
};
24+
25+
$scope.setMode = function(mode){
26+
$scope.mode = mode;
27+
};
28+
29+
$scope.$watch('mode', function(newVal, oldVal){
30+
if (newVal == 'erase' && newVal !== oldVal) {
31+
$scope.oldStroke = {
32+
oldComposition: ctx.globalCompositeOperation,
33+
minWidth: signaturePad.minWidth,
34+
maxWidth: signaturePad.maxWidth
35+
};
36+
ctx.globalCompositeOperation = 'destination-out';
37+
signaturePad.minWidth = 6;
38+
signaturePad.maxWidth = 8;
39+
} else if (oldVal == 'erase') {
40+
ctx.globalCompositeOperation = $scope.oldStroke.oldComposition;
41+
signaturePad.minWidth = $scope.oldStroke.minWidth;
42+
signaturePad.maxWidth = $scope.oldStroke.maxWidth;
43+
}
44+
});
45+
}
46+
}
47+
});

‎demo/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<html>
2+
<head>
3+
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
4+
<!-- <script src="../node_modules/signature_pad/signature_pad.js"></script> -->
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js"></script>
6+
<link rel="stylesheet" href="./style.css">
7+
<!-- Angular-UI-Scribble -->
8+
<script src="../angular-ui-scribble.js"></script>
9+
</head>
10+
<body ng-app="app">
11+
<div ng-controller="scribbleExampleCtrl">
12+
13+
<h2>Scribble 1</h2>
14+
<ui-scribble></ui-scribble>
15+
<h2>Scribble 2</h2>
16+
<ui-scribble></ui-scribble>
17+
<script>
18+
var app = angular.module("app", [
19+
'angular-ui-scribble'
20+
]);
21+
22+
app.controller("scribbleExampleCtrl", function($scope) {
23+
});
24+
</script>
25+
</body>
26+
</html>

‎demo/style.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.scribble-canvas canvas{
2+
border: 1px solid #f4f4f4;
3+
}

‎package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "angular-ui-scribble",
3+
"version": "0.0.0",
4+
"description": "Angular signature_pad wrapper",
5+
"main": "angular-ui-scribble.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/MomsFriendlyDevCo/angular-ui-scribble.git"
12+
},
13+
"author": "Mel Romero <melisa.rfigueroa@gmail.com>",
14+
"license": "MIT",
15+
"bugs": {
16+
"url": "https://github.com/MomsFriendlyDevCo/angular-ui-scribble/issues"
17+
},
18+
"homepage": "https://github.com/MomsFriendlyDevCo/angular-ui-scribble#readme"
19+
}

0 commit comments

Comments
 (0)