https://github.com/fegemo/bespoke-qrcode
Shows qr-codes for hyperlinks on you bespoke.js presentation
https://github.com/fegemo/bespoke-qrcode
Last synced: 4 months ago
JSON representation
Shows qr-codes for hyperlinks on you bespoke.js presentation
- Host: GitHub
- URL: https://github.com/fegemo/bespoke-qrcode
- Owner: fegemo
- License: mit
- Created: 2016-02-25T12:14:48.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-06-11T21:37:54.000Z (about 10 years ago)
- Last Synced: 2026-01-23T10:11:16.836Z (5 months ago)
- Language: JavaScript
- Size: 1.99 MB
- Stars: 5
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/fegemo/bespoke-qrcode) [](https://coveralls.io/github/fegemo/bespoke-qrcode?branch=master)
# bespoke-qrcode
Shows a QR code for all external links in a presentation.
When an external link (one that starts with "http") is hovered, a small
qr code icon appears indicating that it can be clicked. When that happens,
a fullscreen QR code appears, with which viewers can grab their phones and
read it to navigate to the URL enconded in the image.
## Download
Download the [production version][min] or use a [package manager](#package-managers).
[min]: https://raw.github.com/fegemo/bespoke-qrcode/master/dist/bespoke-qrcode.min.js
### Known Issue
Because of a characteristic in Browserify (a script can't be bundled more
than once substack/node-browserify#374), this plugin can only be used in
its minified (uglified) version.
## Usage
This plugin is shipped in a [UMD format](https://github.com/umdjs/umd), meaning that it is available as a CommonJS/AMD module or browser global.
For example, when using CommonJS modules:
```js
var bespoke = require('bespoke'),
qrcode = require('bespoke-qrcode');
bespoke.from('#presentation', [
qrcode()
]);
```
When using browser globals:
```js
bespoke.from('#presentation', [
bespoke.plugins.qrcode()
]);
```
There are a few options that can be used to configure the plugin:
```js
bespoke.from('#presentation', [
qrcode({
insertStyles: false // Defaults to true
})
]);
```
The option **`insertStyles`** (default: `true`) is used to ask the plugin to
inject some CSS rules to style both the small QR code icon that appears when
an external link is hovered and the modal with the actual QR code that encodes
the URL.
## Default Styling
By default, it adds some CSS rules based on that class. To see which CSS
rules are added by default, see the file [`lib/bespoke-qrcode.css`](https://github.com/fegemo/bespoke-qrcode/blob/master/lib/bespoke-qrcode.css).
## Package managers
### npm
```bash
$ npm install bespoke-qrcode
```
### Bower
```bash
$ bower install bespoke-qrcode
```
## Credits
This plugin was built with [generator-bespokeplugin](https://github.com/markdalgleish/generator-bespokeplugin).
## License
[MIT License](http://en.wikipedia.org/wiki/MIT_License)