├── LICENCE.txt
├── README.md
├── angular-qrcode.js
├── bower.json
├── index.html
└── package.json


/LICENCE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017 Monospaced
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all 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,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | [DEPRECATED] Angular QR Code
  2 | ===============
  3 | 
  4 | **Since [AngularJS support has been discontinued](https://blog.angular.io/discontinued-long-term-support-for-angularjs-cc066b82e65a) this package is deprecated and no longer maintained.**
  5 | 
  6 | ---
  7 | 
  8 | ````html
  9 | <qrcode></qrcode>
 10 | ````
 11 | 
 12 | An AngularJS directive to create QR Codes using Kazuhiko Arase’s [qrcode-generator](https://github.com/kazuhikoarase/qrcode-generator) library.
 13 | 
 14 | [See it in action](http://monospaced.github.io/angular-qrcode).
 15 | 
 16 | Installation
 17 | ------------
 18 | 
 19 | ````bash
 20 | npm install angular-qrcode
 21 | ````
 22 | 
 23 | ### Script elements
 24 | 
 25 | ````html
 26 | <script src="/node_modules/qrcode-generator/qrcode.js"></script>
 27 | <script src="/node_modules/qrcode-generator/qrcode_UTF8.js"></script>
 28 | <script src="/node_modules/angular-qrcode/angular-qrcode.js"></script>
 29 | ````
 30 | 
 31 | ````js
 32 | angular
 33 | .module('your-module', [
 34 |   'monospaced.qrcode',
 35 | ]);
 36 | ````
 37 | 
 38 | ### ES2015
 39 | 
 40 | ````js
 41 | import qrcode from 'qrcode-generator';
 42 | import ngQrcode from 'angular-qrcode';
 43 | 
 44 | // hacks for the browser
 45 | // if using webpack there is a better solution below
 46 | window.qrcode = qrcode;
 47 | require('/node_modules/qrcode-generator/qrcode_UTF8');
 48 | 
 49 | angular
 50 | .module('your-module', [
 51 |   ngQrcode,
 52 | ]);
 53 | ````
 54 | 
 55 | ### ES2015 + webpack
 56 | 
 57 | Add the following to `webpack.config.js`:
 58 | 
 59 | ````js
 60 | new webpack.ProvidePlugin({
 61 |   qrcode: 'qrcode-generator',
 62 | })
 63 | ````
 64 | 
 65 | Import everything, no need for `window` or `require` hacks:
 66 | 
 67 | ````js
 68 | import qrcode from 'qrcode-generator';
 69 | import qrcode_UTF8 from '/node_modules/qrcode-generator/qrcode_UTF8';
 70 | import ngQrcode from 'angular-qrcode';
 71 | 
 72 | angular
 73 | .module('your-module', [
 74 |   ngQrcode,
 75 | ]);
 76 | ````
 77 | 
 78 | Important!
 79 | ----------
 80 | 
 81 | ### Version and Error Correction
 82 | 
 83 | The amount of data a qrcode can contain is impacted by its `version` and `error-correction-level`.
 84 | 
 85 | `version` designates the density of the encoding. If it isn't specifed, it defaults to `5`. __If the `version` specified is too small to contain the data given, the next highest `version` will be tried automatically.__
 86 | 
 87 | The maximum supported `version` is `40`, and `error-correction-level`defaults to `M`.
 88 | 
 89 | For more information see http://www.qrcode.com/en/about/version.html.
 90 | 
 91 | Usage
 92 | -----
 93 | 
 94 | as element
 95 | 
 96 | ````html
 97 | <qrcode data="string"></qrcode>
 98 | ````
 99 | 
100 | with QR options
101 | 
102 | ````html
103 | <qrcode data="string" version="2" error-correction-level="Q" size="200" color="#fff" background="#000"></qrcode>
104 | ````
105 | 
106 | as a downloadable image
107 | 
108 | ````html
109 | <qrcode data="string" download></qrcode>
110 | ````
111 | 
112 | as a link to URL
113 | 
114 | ````html
115 | <qrcode data="http://example.com" href="http://example.com"></qrcode>
116 | ````
117 | 
118 | `download` and `href` can’t be used on the same element (if `download` is present, `href` will be ignored)
119 | 
120 | with expressions, observe changes
121 | 
122 | ````html
123 | <qrcode version="{{version}}" error-correction-level="{{level}}" size="{{size}}" data="{{var}}" href="{{var}}" color="{{color}}" background="{{background}}" download></qrcode>
124 | ````
125 | 
126 | Options
127 | -------
128 | 
129 | Permitted values
130 | 
131 | * `version`: `1–40`  (default: `5`) _- if required, will be auto-incremented to contain data given_
132 | 
133 | * `error-correction-level`: `L`, `M`, `Q`, `H` (default: `M`)
134 | 
135 | * `size`: `integer` (default: `size` is calculated automatically)
136 | 
137 | * `download`: `boolean` (default: `false`)
138 | 
139 | * `href`: `url` as `string`
140 | 
141 | * `color`: `hex` as `string` (default: `#000`)
142 | 
143 | * `background`: `hex` as `string` (default: `#fff`)
144 | 
145 | The amount of data (measured in bits) must be within capacity according to the `version` and `error correction level`, see http://www.qrcode.com/en/about/version.html.
146 | 
147 | Demo
148 | ----------------
149 | 
150 | [monospaced.github.io/angular-qrcode](http://monospaced.github.io/angular-qrcode)
151 | 
152 | Reference
153 | ----------------
154 | 
155 | [QR Code versions](http://www.qrcode.com/en/about/version.html)
156 | 
157 | [QR Code error correction](http://www.qrcode.com/en/about/error_correction.html)
158 | 


--------------------------------------------------------------------------------
/angular-qrcode.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * angular-qrcode
  3 |  * (c) 2017 Monospaced http://monospaced.com
  4 |  * License: MIT
  5 |  */
  6 | 
  7 | if (typeof module !== 'undefined' &&
  8 |     typeof exports !== 'undefined' &&
  9 |     module.exports === exports){
 10 |   module.exports = 'monospaced.qrcode';
 11 | }
 12 | 
 13 | angular.module('monospaced.qrcode', [])
 14 |   .directive('qrcode', ['$window', function($window) {
 15 | 
 16 |     var canvas2D = !!$window.CanvasRenderingContext2D,
 17 |         levels = {
 18 |           'L': 'Low',
 19 |           'M': 'Medium',
 20 |           'Q': 'Quartile',
 21 |           'H': 'High'
 22 |         },
 23 |         draw = function(context, qr, modules, tile, color) {
 24 |           for (var row = 0; row < modules; row++) {
 25 |             for (var col = 0; col < modules; col++) {
 26 |               var w = (Math.ceil((col + 1) * tile) - Math.floor(col * tile)),
 27 |                   h = (Math.ceil((row + 1) * tile) - Math.floor(row * tile));
 28 | 
 29 |               context.fillStyle = qr.isDark(row, col) ? color.foreground : color.background;
 30 |               context.fillRect(Math.round(col * tile),
 31 |                                Math.round(row * tile), w, h);
 32 |             }
 33 |           }
 34 |         };
 35 | 
 36 |     return {
 37 |       restrict: 'E',
 38 |       template: '<canvas class="qrcode"></canvas>',
 39 |       link: function(scope, element, attrs) {
 40 |         var domElement = element[0],
 41 |             $canvas = element.find('canvas'),
 42 |             canvas = $canvas[0],
 43 |             context = canvas2D ? canvas.getContext('2d') : null,
 44 |             download = 'download' in attrs,
 45 |             href = attrs.href,
 46 |             link = download || href ? document.createElement('a') : '',
 47 |             trim = /^\s+|\s+$/g,
 48 |             error,
 49 |             version,
 50 |             errorCorrectionLevel,
 51 |             data,
 52 |             size,
 53 |             modules,
 54 |             tile,
 55 |             qr,
 56 |             $img,
 57 |             color = {
 58 |               foreground: '#000',
 59 |               background: '#fff'
 60 |             },
 61 |             setColor = function(value) {
 62 |               color.foreground = value || color.foreground;
 63 |             },
 64 |             setBackground = function(value) {
 65 |               color.background = value || color.background;
 66 |             },
 67 |             setVersion = function(value) {
 68 |               version = Math.max(1, Math.min(parseInt(value, 10), 40)) || 5;
 69 |             },
 70 |             setErrorCorrectionLevel = function(value) {
 71 |               errorCorrectionLevel = value in levels ? value : 'M';
 72 |             },
 73 |             setData = function(value) {
 74 |               if (!value) {
 75 |                 return;
 76 |               }
 77 | 
 78 |               data = value.replace(trim, '');
 79 |               qr = qrcode(version, errorCorrectionLevel);
 80 |               qr.addData(data);
 81 | 
 82 |               try {
 83 |                 qr.make();
 84 |               } catch (e) {
 85 |                 var newVersion;
 86 |                 if (version >= 40) {
 87 |                   throw new Error('Data is too long', e);
 88 |                 }
 89 |                 newVersion = version + 1;
 90 |                 setVersion(newVersion);
 91 |                 console.warn('qrcode version is too low and has been incremented to', newVersion)
 92 |                 setData(value);
 93 |                 return;
 94 |               }
 95 | 
 96 |               error = false;
 97 |               modules = qr.getModuleCount();
 98 |             },
 99 |             setSize = function(value) {
100 |               size = parseInt(value, 10) || modules * 2;
101 |               tile = size / modules;
102 |               canvas.width = canvas.height = size;
103 |             },
104 |             render = function() {
105 |               if (!qr) {
106 |                 return;
107 |               }
108 | 
109 |               if (error) {
110 |                 if (link) {
111 |                   link.removeAttribute('download');
112 |                   link.title = '';
113 |                   link.href = '#_';
114 |                 }
115 |                 if (!canvas2D) {
116 |                   domElement.innerHTML = '<img src width="' + size + '"' +
117 |                                          'height="' + size + '"' +
118 |                                          'class="qrcode">';
119 |                 }
120 |                 scope.$emit('qrcode:error', error);
121 |                 return;
122 |               }
123 | 
124 |               if (download) {
125 |                 domElement.download = 'qrcode.png';
126 |                 domElement.title = 'Download QR code';
127 |               }
128 | 
129 |               if (canvas2D) {
130 |                 draw(context, qr, modules, tile, color);
131 | 
132 |                 if (download) {
133 |                   domElement.href = canvas.toDataURL('image/png');
134 |                   return;
135 |                 }
136 |               } else {
137 |                 domElement.innerHTML = qr.createImgTag(tile, 0);
138 |                 $img = element.find('img');
139 |                 $img.addClass('qrcode');
140 | 
141 |                 if (download) {
142 |                   domElement.href = $img[0].src;
143 |                   return;
144 |                 }
145 |               }
146 | 
147 |               if (href) {
148 |                 domElement.href = href;
149 |               }
150 |             };
151 | 
152 |         if (link) {
153 |           link.className = 'qrcode-link';
154 |           $canvas.wrap(link);
155 |           domElement = domElement.firstChild;
156 |         }
157 | 
158 |         setColor(attrs.color);
159 |         setBackground(attrs.background);
160 |         setVersion(attrs.version);
161 |         setErrorCorrectionLevel(attrs.errorCorrectionLevel);
162 |         setSize(attrs.size);
163 | 
164 |         attrs.$observe('version', function(value) {
165 |           if (!value) {
166 |             return;
167 |           }
168 | 
169 |           setVersion(value);
170 |           setData(data);
171 |           setSize(size);
172 |           render();
173 |         });
174 | 
175 |         attrs.$observe('errorCorrectionLevel', function(value) {
176 |           if (!value) {
177 |             return;
178 |           }
179 | 
180 |           setErrorCorrectionLevel(value);
181 |           setData(data);
182 |           setSize(size);
183 |           render();
184 |         });
185 | 
186 |         attrs.$observe('data', function(value) {
187 |           if (!value) {
188 |             return;
189 |           }
190 | 
191 |           setData(value);
192 |           setSize(size);
193 |           render();
194 |         });
195 | 
196 |         attrs.$observe('size', function(value) {
197 |           if (!value) {
198 |             return;
199 |           }
200 | 
201 |           setSize(value);
202 |           render();
203 |         });
204 | 
205 |         attrs.$observe('color', function(value) {
206 |           if (!value) {
207 |             return;
208 |           }
209 | 
210 |           setColor(value);
211 |           render();
212 |         });
213 | 
214 |         attrs.$observe('background', function(value) {
215 |           if (!value) {
216 |             return;
217 |           }
218 | 
219 |           setBackground(value);
220 |           render();
221 |         });
222 | 
223 |         attrs.$observe('href', function(value) {
224 |           if (!value) {
225 |             return;
226 |           }
227 | 
228 |           href = value;
229 |           render();
230 |         });
231 |       }
232 |     };
233 |   }]);
234 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-qrcode",
 3 |   "version": "7.2.0",
 4 |   "main": "angular-qrcode.js",
 5 |   "license" : "MIT",
 6 |   "ignore": [
 7 |     "**/.*",
 8 |     "node_modules",
 9 |     "components"
10 |   ],
11 |   "dependencies": {
12 |     "angular": ">=1.0.6",
13 |     "qrcode-generator": "git://github.com/monospaced/bower-qrcode-generator.git#v0.2.0"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-gb" data-ng-app="monospaced.qrcode" id="ng-app">
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <title>Angular QR Code</title>
  6 |   <!--[if lte IE 8]>
  7 |     <script>document.createElement('qrcode');</script>
  8 |   <![endif]-->
  9 |   <meta name="viewport" content="width=device-width">
 10 |   <link rel="stylesheet" href="//necolas.github.io/normalize.css/2.1.1/normalize.css">
 11 |   <style>
 12 |     html {
 13 |       overflow-y: scroll;
 14 |       background: #fff;
 15 |       color: #1c000e;
 16 |     }
 17 |     body {
 18 |       margin: 16px;
 19 |       text-align: center;
 20 |     }
 21 |     h1 {
 22 |       margin: 0 8px 8px;
 23 |       font-weight: normal;
 24 |       font-size: 30px;
 25 |     }
 26 |     h2 {
 27 |       margin: 24px 8px;
 28 |       font-weight: normal;
 29 |       font-size: 24px;
 30 |     }
 31 |     small {
 32 |       display: block;
 33 |       clear: both;
 34 |       margin: 0 8px;
 35 |     }
 36 |     p,
 37 |     pre {
 38 |       overflow: hidden;
 39 |       margin: 16px 0;
 40 |     }
 41 |     form {
 42 |       margin: 0 auto 8px;
 43 |       width: 274px;
 44 |       border-top: 1px solid #ccc;
 45 |       border-bottom: 1px solid #ccc;
 46 |     }
 47 |     label {
 48 |       float: left;
 49 |       width: 60px;
 50 |       color: #888;
 51 |       text-align: left;
 52 |       line-height: 2.125;
 53 |       cursor: pointer;
 54 |     }
 55 |     input,
 56 |     textarea {
 57 |       float: right;
 58 |       -moz-box-sizing: border-box;
 59 |            box-sizing: border-box;
 60 |       padding: 7px 3px 7px 7px;
 61 |       width: 204px;
 62 |       border: 1px solid #ccc;
 63 |     }
 64 |     textarea {
 65 |       resize: vertical;
 66 |     }
 67 |     select {
 68 |       float: right;
 69 |       -moz-box-sizing: border-box;
 70 |            box-sizing: border-box;
 71 |       padding: 7px 3px 7px 7px;
 72 |       width: 204px;
 73 |       height: 34px;
 74 |       border: 1px solid #ccc;
 75 |     }
 76 |     a {
 77 |       color: #000;
 78 |       text-decoration: none;
 79 |       -webkit-transition: all 250ms ease-in-out;
 80 |          -moz-transition: all 250ms ease-in-out;
 81 |            -o-transition: all 250ms ease-in-out;
 82 |               transition: all 250ms ease-in-out;
 83 |     }
 84 |     a:hover,
 85 |     a:focus,
 86 |     a:active {
 87 |       color: #0067ce;
 88 |       -webkit-transition: none;
 89 |          -moz-transition: none;
 90 |            -o-transition: none;
 91 |               transition: none;
 92 |     }
 93 |     .qrcode {
 94 |       display: block;
 95 |       margin: 24px auto 16px;
 96 |       max-width: 100%;
 97 |     }
 98 |     .qrcode-link {
 99 |       display: table;
100 |       margin: 24px auto 16px;
101 |     }
102 |     .qrcode-link .qrcode {
103 |       margin: 0;
104 |     }
105 |     .footer {
106 |       margin: 16px auto;
107 |       width: 290px;
108 |     }
109 |   </style>
110 | </head>
111 | <body data-ng-init="foo='here comes qr!';bar='https://github.com/monospaced/angular-qrcode';e='M';s=274;">
112 | 
113 |   <h1>Angular QR Code</h1>
114 | 
115 |   <pre>&lt;qrcode&gt;&lt;/qrcode&gt;</pre>
116 | 
117 |   <qrcode error-correction-level="{{e}}" size="{{s}}" data="{{foo}}" color="#FF69B4" background="#000"></qrcode>
118 | 
119 |   <form>
120 |     <p>
121 |       <label for="data">Data</label>
122 |       <textarea id="data" data-ng-model="foo"></textarea>
123 |     </p>
124 |     <p>
125 |       <label for="size">Size</label>
126 |       <input id="size" type="number" data-ng-model="s">
127 |     </p>
128 |     <p>
129 |       <label for="level" title="Error Correction Level">Level</label>
130 |       <select id="level" data-ng-model="e" data-ng-options="option.version as option.name for option in [{name:'Low', version:'L'},{name:'Medium', version:'M'},{name:'Quartile', version:'Q'},{name:'High', version:'H'}]"></select>
131 |     </p>
132 |   </form>
133 | 
134 |   <h2>Downloadable</h2>
135 | 
136 |   <qrcode error-correction-level="{{e}}" size="{{s}}" data="{{foo}}" download></qrcode>
137 | 
138 |   <h2>Linked</h2>
139 | 
140 |   <qrcode size="274" data="{{bar}}" href="{{bar}}"></qrcode>
141 | 
142 |   <form>
143 |     <p>
144 |       <label for="data">Data</label>
145 |       <textarea id="data" data-ng-model="bar"></textarea>
146 |     </p>
147 |   </form>
148 | 
149 |   <div class="footer">
150 | 
151 |     <small>
152 |       <a href="http://monospaced.github.io/">Monospaced Labs</a>
153 |     </small>
154 | 
155 |   </div>
156 | 
157 |   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
158 |   <script src="//kazuhikoarase.github.io/qrcode-generator/js/demo/assets/qrcode.js"></script>
159 |   <script src="angular-qrcode.js"></script>
160 | </body>
161 | </html>
162 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-qrcode",
 3 |   "version": "7.2.0",
 4 |   "description": "QR Code elements for AngularJS.",
 5 |   "keywords": [
 6 |     "angular",
 7 |     "angularjs",
 8 |     "qrcode"
 9 |   ],
10 |   "homepage": "http://monospaced.github.io/angular-qrcode/",
11 |   "main": "angular-qrcode.js",
12 |   "bugs": "http://github.com/monospaced/angular-qrcode/issues",
13 |   "license": "MIT",
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "http://github.com/monospaced/angular-qrcode"
17 |   },
18 |   "author": {
19 |     "name": "Scott Boyle",
20 |     "email": "scott@monospaced.com",
21 |     "url": "https://scottboyle.co.uk"
22 |   },
23 |   "files": [
24 |     "angular-qrcode.js",
25 |     "package.json"
26 |   ],
27 |   "dependencies": {
28 |     "angular": ">=1.0.6",
29 |     "qrcode-generator": "^1.1.0"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------