Skip to content

张浩 / br-client

Go to a project
Toggle navigation
Toggle navigation pinning
Commit b727f20a b727f20aa28be9fc6ccf134725560e32f593c835 by zhanghao
Options

commit

1 parent d43df021
Expand all
Inline Side-by-side
Showing 98 changed files with 4788 additions and 26 deletions
1 {
2 "presets": [
3 [
4 "env",
5 {
6 "targets": {
7 "uglify": true
8 },
9 "modules": false
10 }
11 ]
12 ]
13 }
1 # EditorConfig helps developers define and maintain consistent
2 # coding styles between different editors and IDEs
3 # http://editorconfig.org
4
5 root = true
6
7 [*]
8 # Change these settings to your own preference
9 indent_style = space
10 indent_size = 4
11
12 # We recommend you to keep these unchanged
13 end_of_line = lf
14 charset = utf-8
15 trim_trailing_whitespace = true
16 insert_final_newline = true
17
18 [*.md]
19 trim_trailing_whitespace = false
20
21 [{package.json,bower.json}]
22 indent_size = 2
1 ### Minimal example
2
3 > Fork this [JSFiddle](https://jsfiddle.net/zenorocha/5kk0eysw/) and reproduce your issue.
4
5 ### Expected behaviour
6
7 I thought that by going to the page '...' and pressing the button '...' then '...' would happen.
8
9 ### Actual behaviour
10
11 Instead of '...', what I saw was that '...' happened instead.
12
13 ### Browsers affected
14
15 I tested on all major browsers and only IE 11 does not work.
1 # Number of days of inactivity before an issue becomes stale
2 daysUntilStale: 60
3
4 # Number of days of inactivity before a stale issue is closed
5 daysUntilClose: 7
6
7 # Issues with these labels will never be considered stale
8 exemptLabels:
9 - pinned
10
11 # Label to use when marking an issue as stale
12 staleLabel: stale
13
14 # Comment to post when marking an issue as stale. Set to `false` to disable
15 markComment: >
16 This issue has been automatically marked as stale because it has not had
17 recent activity. It will be closed if no further activity occurs. Thank you
18 for your contributions.
19
20 # Comment to post when closing a stale issue. Set to `false` to disable
21 closeComment: false
1 sudo: false
2 language: node_js
3 node_js:
4 - stable
1 MIT License
2
3 Copyright (c) Zeno Rocha
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 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,
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 THE
21 SOFTWARE.
1 {
2 "name": "clipboard",
3 "version": "2.0.6",
4 "description": "Modern copy to clipboard. No Flash. Just 3kb",
5 "license": "MIT",
6 "main": "dist/clipboard.js",
7 "ignore": [
8 "/.*/",
9 "/demo/",
10 "/test/",
11 "/.*",
12 "/bower.json",
13 "/karma.conf.js",
14 "/src",
15 "/lib"
16 ],
17 "keywords": [
18 "clipboard",
19 "copy",
20 "cut"
21 ]
22 }
1 {
2 "name": "zenorocha/clipboardjs",
3 "description": "Modern copy to clipboard. No Flash. Just 3kb gzipped https://clipboardjs.com",
4 "type": "component",
5 "homepage": "https://clipboardjs.com/",
6 "authors": [
7 {
8 "name": "Zeno Rocha",
9 "homepage": "http://zenorocha.com/"
10 }
11 ],
12 "require": {
13 "oomphinc/composer-installers-extender": "*"
14 },
15 "extra": {
16 "component": {
17 "scripts": [
18 "dist/clipboard.js"
19 ],
20 "files": [
21 "dist/clipboard.min.js"
22 ]
23 }
24 }
25 }
1 # Contributing guide
2
3 Want to contribute to Clipboard.js? Awesome!
4 There are many ways you can contribute, see below.
5
6 ## Opening issues
7
8 Open an issue to report bugs or to propose new features.
9
10 - Reporting bugs: describe the bug as clearly as you can, including steps to reproduce, what happened and what you were expecting to happen. Also include browser version, OS and other related software's (npm, Node.js, etc) versions when applicable.
11
12 - Proposing features: explain the proposed feature, what it should do, why it is useful, how users should use it. Give us as much info as possible so it will be easier to discuss, access and implement the proposed feature. When you're unsure about a certain aspect of the feature, feel free to leave it open for others to discuss and find an appropriate solution.
13
14 ## Proposing pull requests
15
16 Pull requests are very welcome. Note that if you are going to propose drastic changes, be sure to open an issue for discussion first, to make sure that your PR will be accepted before you spend effort coding it.
17
18 Fork the Clipboard.js repository, clone it locally and create a branch for your proposed bug fix or new feature. Avoid working directly on the master branch.
19
20 Implement your bug fix or feature, write tests to cover it and make sure all tests are passing (run a final `npm test` to make sure everything is correct). Then commit your changes, push your bug fix/feature branch to the origin (your forked repo) and open a pull request to the upstream (the repository you originally forked)'s master branch.
21
22 ## Documentation
23
24 Documentation is extremely important and takes a fair deal of time and effort to write and keep updated. Please submit any and all improvements you can make to the repository's docs.
25
26 ## Known issues
27 If you're using npm@3 you'll probably face some issues related to peerDependencies.
28 https://github.com/npm/npm/issues/9204
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>constructor-node</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 </head>
8 <body>
9 <!-- 1. Define some markup -->
10 <div id="btn" data-clipboard-text="1">
11 <span>Copy</span>
12 </div>
13
14 <!-- 2. Include library -->
15 <script src="../dist/clipboard.min.js"></script>
16
17 <!-- 3. Instantiate clipboard by passing a HTML element -->
18 <script>
19 var btn = document.getElementById('btn');
20 var clipboard = new ClipboardJS(btn);
21
22 clipboard.on('success', function(e) {
23 console.log(e);
24 });
25
26 clipboard.on('error', function(e) {
27 console.log(e);
28 });
29 </script>
30 </body>
31 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>constructor-nodelist</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 </head>
8 <body>
9 <!-- 1. Define some markup -->
10 <button data-clipboard-text="1">Copy</button>
11 <button data-clipboard-text="2">Copy</button>
12 <button data-clipboard-text="3">Copy</button>
13
14 <!-- 2. Include library -->
15 <script src="../dist/clipboard.min.js"></script>
16
17 <!-- 3. Instantiate clipboard by passing a list of HTML elements -->
18 <script>
19 var btns = document.querySelectorAll('button');
20 var clipboard = new ClipboardJS(btns);
21
22 clipboard.on('success', function(e) {
23 console.log(e);
24 });
25
26 clipboard.on('error', function(e) {
27 console.log(e);
28 });
29 </script>
30 </body>
31 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>constructor-selector</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 </head>
8 <body>
9 <!-- 1. Define some markup -->
10 <button class="btn" data-clipboard-text="1">Copy</button>
11 <button class="btn" data-clipboard-text="2">Copy</button>
12 <button class="btn" data-clipboard-text="3">Copy</button>
13
14 <!-- 2. Include library -->
15 <script src="../dist/clipboard.min.js"></script>
16
17 <!-- 3. Instantiate clipboard by passing a string selector -->
18 <script>
19 var clipboard = new ClipboardJS('.btn');
20
21 clipboard.on('success', function(e) {
22 console.log(e);
23 });
24
25 clipboard.on('error', function(e) {
26 console.log(e);
27 });
28 </script>
29 </body>
30 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>function-target</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 </head>
8 <body>
9 <!-- 1. Define some markup -->
10 <button class="btn">Copy</button>
11 <div>hello</div>
12
13 <!-- 2. Include library -->
14 <script src="../dist/clipboard.min.js"></script>
15
16 <!-- 3. Instantiate clipboard -->
17 <script>
18 var clipboard = new ClipboardJS('.btn', {
19 target: function() {
20 return document.querySelector('div');
21 }
22 });
23
24 clipboard.on('success', function(e) {
25 console.log(e);
26 });
27
28 clipboard.on('error', function(e) {
29 console.log(e);
30 });
31 </script>
32 </body>
33 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>function-text</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 </head>
8 <body>
9 <!-- 1. Define some markup -->
10 <button class="btn">Copy</button>
11
12 <!-- 2. Include library -->
13 <script src="../dist/clipboard.min.js"></script>
14
15 <!-- 3. Instantiate clipboard -->
16 <script>
17 var clipboard = new ClipboardJS('.btn', {
18 text: function() {
19 return 'to be or not to be';
20 }
21 });
22
23 clipboard.on('success', function(e) {
24 console.log(e);
25 });
26
27 clipboard.on('error', function(e) {
28 console.log(e);
29 });
30 </script>
31 </body>
32 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>target-div</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 </head>
8 <body>
9 <!-- 1. Define some markup -->
10 <div>hello</div>
11 <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
12
13 <!-- 2. Include library -->
14 <script src="../dist/clipboard.min.js"></script>
15
16 <!-- 3. Instantiate clipboard -->
17 <script>
18 var clipboard = new ClipboardJS('.btn');
19
20 clipboard.on('success', function(e) {
21 console.log(e);
22 });
23
24 clipboard.on('error', function(e) {
25 console.log(e);
26 });
27 </script>
28 </body>
29 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>target-input</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 </head>
8 <body>
9 <!-- 1. Define some markup -->
10 <input id="foo" type="text" value="hello">
11 <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
12
13 <!-- 2. Include library -->
14 <script src="../dist/clipboard.min.js"></script>
15
16 <!-- 3. Instantiate clipboard -->
17 <script>
18 var clipboard = new ClipboardJS('.btn');
19
20 clipboard.on('success', function(e) {
21 console.log(e);
22 });
23
24 clipboard.on('error', function(e) {
25 console.log(e);
26 });
27 </script>
28 </body>
29 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>target-textarea</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 </head>
8 <body>
9 <!-- 1. Define some markup -->
10 <textarea id="bar">hello</textarea>
11 <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
12
13 <!-- 2. Include library -->
14 <script src="../dist/clipboard.min.js"></script>
15
16 <!-- 3. Instantiate clipboard -->
17 <script>
18 var clipboard = new ClipboardJS('.btn');
19
20 clipboard.on('success', function(e) {
21 console.log(e);
22 });
23
24 clipboard.on('error', function(e) {
25 console.log(e);
26 });
27 </script>
28 </body>
29 </html>
1 var webpackConfig = require('./webpack.config.js');
2
3 module.exports = function (karma) {
4 karma.set({
5 plugins: ['karma-webpack', 'karma-chai', 'karma-sinon', 'karma-mocha', 'karma-chrome-launcher'],
6
7 frameworks: ['chai', 'sinon', 'mocha'],
8
9 files: [
10 'src/**/*.js',
11 'test/**/*.js',
12 ],
13
14 preprocessors: {
15 'src/**/*.js': ['webpack'],
16 'test/**/*.js': ['webpack']
17 },
18
19 webpack: {
20 module: webpackConfig.module,
21 plugins: webpackConfig.plugins
22 },
23
24 webpackMiddleware: {
25 stats: 'errors-only'
26 },
27
28 browsers: ['ChromeHeadless']
29 });
30 };
1 // Package metadata for Meteor.js.
2
3 Package.describe({
4 name: "zenorocha:clipboard",
5 summary: "Modern copy to clipboard. No Flash. Just 3kb.",
6 version: "2.0.6",
7 git: "https://github.com/zenorocha/clipboard.js"
8 });
9
10 Package.onUse(function(api) {
11 api.addFiles("dist/clipboard.js", "client");
12 });
1 {
2 "_from": "clipboard@^2.0.0",
3 "_id": "clipboard@2.0.6",
4 "_inBundle": false,
5 "_integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
6 "_location": "/clipboard",
7 "_phantomChildren": {},
8 "_requested": {
9 "type": "range",
10 "registry": true,
11 "raw": "clipboard@^2.0.0",
12 "name": "clipboard",
13 "escapedName": "clipboard",
14 "rawSpec": "^2.0.0",
15 "saveSpec": null,
16 "fetchSpec": "^2.0.0"
17 },
18 "_requiredBy": [
19 "/vue-clipboard2"
20 ],
21 "_resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
22 "_shasum": "52921296eec0fdf77ead1749421b21c968647376",
23 "_spec": "clipboard@^2.0.0",
24 "_where": "/Users/zhanghao/brcode/br-client/node_modules/vue-clipboard2",
25 "bugs": {
26 "url": "https://github.com/zenorocha/clipboard.js/issues"
27 },
28 "bundleDependencies": false,
29 "dependencies": {
30 "good-listener": "^1.2.2",
31 "select": "^1.1.2",
32 "tiny-emitter": "^2.0.0"
33 },
34 "deprecated": false,
35 "description": "Modern copy to clipboard. No Flash. Just 2kb",
36 "devDependencies": {
37 "babel-core": "^6.26.0",
38 "babel-loader": "^7.1.4",
39 "babel-preset-env": "^1.7.0",
40 "chai": "^4.2.0",
41 "cross-env": "^5.2.0",
42 "karma": "^3.1.1",
43 "karma-chai": "^0.1.0",
44 "karma-chrome-launcher": "^2.2.0",
45 "karma-mocha": "^1.2.0",
46 "karma-sinon": "^1.0.4",
47 "karma-webpack": "^3.0.5",
48 "mocha": "^5.2.0",
49 "sinon": "^7.1.1",
50 "uglifyjs-webpack-plugin": "^2.0.1",
51 "webpack": "^4.5.0",
52 "webpack-cli": "^3.1.2"
53 },
54 "homepage": "https://github.com/zenorocha/clipboard.js#readme",
55 "keywords": [
56 "clipboard",
57 "copy",
58 "cut"
59 ],
60 "license": "MIT",
61 "main": "dist/clipboard.js",
62 "name": "clipboard",
63 "repository": {
64 "type": "git",
65 "url": "git+https://github.com/zenorocha/clipboard.js.git"
66 },
67 "scripts": {
68 "build": "npm run build-debug && npm run build-min",
69 "build-debug": "webpack",
70 "build-min": "cross-env NODE_ENV=production webpack",
71 "build-watch": "webpack --watch",
72 "prepublish": "npm run build",
73 "test": "karma start --single-run"
74 },
75 "version": "2.0.6"
76 }
1 # clipboard.js
2
3 [![Build Status](http://img.shields.io/travis/zenorocha/clipboard.js/master.svg?style=flat)](https://travis-ci.org/zenorocha/clipboard.js)
4 ![Killing Flash](https://img.shields.io/badge/killing-flash-brightgreen.svg?style=flat)
5
6 > Modern copy to clipboard. No Flash. Just 3kb gzipped.
7
8 <a href="https://clipboardjs.com/"><img width="728" src="https://cloud.githubusercontent.com/assets/398893/16165747/a0f6fc46-349a-11e6-8c9b-c5fd58d9099c.png" alt="Demo"></a>
9
10 ## Why
11
12 Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework.
13
14 That's why clipboard.js exists.
15
16 ## Install
17
18 You can get it on npm.
19
20 ```
21 npm install clipboard --save
22 ```
23
24 Or if you're not into package management, just [download a ZIP](https://github.com/zenorocha/clipboard.js/archive/master.zip) file.
25
26 ## Setup
27
28 First, include the script located on the `dist` folder or load it from [a third-party CDN provider](https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers).
29
30 ```html
31 <script src="dist/clipboard.min.js"></script>
32 ```
33
34 Now, you need to instantiate it by [passing a DOM selector](https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html#L18), [HTML element](https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-node.html#L16-L17), or [list of HTML elements](https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html#L18-L19).
35
36 ```js
37 new ClipboardJS('.btn');
38 ```
39
40 Internally, we need to fetch all elements that matches with your selector and attach event listeners for each one. But guess what? If you have hundreds of matches, this operation can consume a lot of memory.
41
42 For this reason we use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) which replaces multiple event listeners with just a single listener. After all, [#perfmatters](https://twitter.com/hashtag/perfmatters).
43
44 # Usage
45
46 We're living a _declarative renaissance_, that's why we decided to take advantage of [HTML5 data attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) for better usability.
47
48 ### Copy text from another element
49
50 A pretty common use case is to copy content from another element. You can do that by adding a `data-clipboard-target` attribute in your trigger element.
51
52 The value you include on this attribute needs to match another's element selector.
53
54 <a href="https://clipboardjs.com/#example-target"><img width="473" alt="example-2" src="https://cloud.githubusercontent.com/assets/398893/9983467/a4946aaa-5fb1-11e5-9780-f09fcd7ca6c8.png"></a>
55
56 ```html
57 <!-- Target -->
58 <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
59
60 <!-- Trigger -->
61 <button class="btn" data-clipboard-target="#foo">
62 <img src="assets/clippy.svg" alt="Copy to clipboard">
63 </button>
64 ```
65
66 ### Cut text from another element
67
68 Additionally, you can define a `data-clipboard-action` attribute to specify if you want to either `copy` or `cut` content.
69
70 If you omit this attribute, `copy` will be used by default.
71
72 <a href="https://clipboardjs.com/#example-action"><img width="473" alt="example-3" src="https://cloud.githubusercontent.com/assets/398893/10000358/7df57b9c-6050-11e5-9cd1-fbc51d2fd0a7.png"></a>
73
74 ```html
75 <!-- Target -->
76 <textarea id="bar">Mussum ipsum cacilds...</textarea>
77
78 <!-- Trigger -->
79 <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
80 Cut to clipboard
81 </button>
82 ```
83
84 As you may expect, the `cut` action only works on `<input>` or `<textarea>` elements.
85
86 ### Copy text from attribute
87
88 Truth is, you don't even need another element to copy its content from. You can just include a `data-clipboard-text` attribute in your trigger element.
89
90 <a href="https://clipboardjs.com/#example-text"><img width="147" alt="example-1" src="https://cloud.githubusercontent.com/assets/398893/10000347/6e16cf8c-6050-11e5-9883-1c5681f9ec45.png"></a>
91
92 ```html
93 <!-- Trigger -->
94 <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
95 Copy to clipboard
96 </button>
97 ```
98
99 ## Events
100
101 There are cases where you'd like to show some user feedback or capture what has been selected after a copy/cut operation.
102
103 That's why we fire custom events such as `success` and `error` for you to listen and implement your custom logic.
104
105 ```js
106 var clipboard = new ClipboardJS('.btn');
107
108 clipboard.on('success', function(e) {
109 console.info('Action:', e.action);
110 console.info('Text:', e.text);
111 console.info('Trigger:', e.trigger);
112
113 e.clearSelection();
114 });
115
116 clipboard.on('error', function(e) {
117 console.error('Action:', e.action);
118 console.error('Trigger:', e.trigger);
119 });
120 ```
121
122 For a live demonstration, go to this [site](https://clipboardjs.com/) and open your console.
123
124 ## Tooltips
125
126 Each application has different design needs, that's why clipboard.js does not include any CSS or built-in tooltip solution.
127
128 The tooltips you see on the [demo site](https://clipboardjs.com/) were built using [GitHub's Primer](https://primer.style/css/components/tooltips). You may want to check that out if you're looking for a similar look and feel.
129
130 ## Advanced Options
131
132 If you don't want to modify your HTML, there's a pretty handy imperative API for you to use. All you need to do is declare a function, do your thing, and return a value.
133
134 For instance, if you want to dynamically set a `target`, you'll need to return a Node.
135
136 ```js
137 new ClipboardJS('.btn', {
138 target: function(trigger) {
139 return trigger.nextElementSibling;
140 }
141 });
142 ```
143
144 If you want to dynamically set a `text`, you'll return a String.
145
146 ```js
147 new ClipboardJS('.btn', {
148 text: function(trigger) {
149 return trigger.getAttribute('aria-label');
150 }
151 });
152 ```
153
154 For use in Bootstrap Modals or with any other library that changes the focus you'll want to set the focused element as the `container` value.
155
156 ```js
157 new ClipboardJS('.btn', {
158 container: document.getElementById('modal')
159 });
160 ```
161
162 Also, if you are working with single page apps, you may want to manage the lifecycle of the DOM more precisely. Here's how you clean up the events and objects that we create.
163
164 ```js
165 var clipboard = new ClipboardJS('.btn');
166 clipboard.destroy();
167 ```
168
169 ## Browser Support
170
171 This library relies on both [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) and [execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) APIs. The first one is [supported by all browsers](https://caniuse.com/#search=selection) while the second one is supported in the following browsers.
172
173 | <img src="https://clipboardjs.com/assets/images/chrome.png" width="48px" height="48px" alt="Chrome logo"> | <img src="https://clipboardjs.com/assets/images/edge.png" width="48px" height="48px" alt="Edge logo"> | <img src="https://clipboardjs.com/assets/images/firefox.png" width="48px" height="48px" alt="Firefox logo"> | <img src="https://clipboardjs.com/assets/images/ie.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="https://clipboardjs.com/assets/images/opera.png" width="48px" height="48px" alt="Opera logo"> | <img src="https://clipboardjs.com/assets/images/safari.png" width="48px" height="48px" alt="Safari logo"> |
174 |:---:|:---:|:---:|:---:|:---:|:---:|
175 | 42+ ✔ | 12+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | 10+ ✔ |
176
177 The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying `Copied!` when `success` event is called and `Press Ctrl+C to copy` when `error` event is called because the text is already selected.
178
179 You can also check if clipboard.js is supported or not by running `ClipboardJS.isSupported()`, that way you can hide copy/cut buttons from the UI.
180
181 ## Bonus
182
183 A browser extension that adds a "copy to clipboard" button to every code block on *GitHub, MDN, Gist, StackOverflow, StackExchange, npm, and even Medium.*
184
185 Install for [Chrome](https://chrome.google.com/webstore/detail/codecopy/fkbfebkcoelajmhanocgppanfoojcdmg) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/codecopy/).
186
187 ## License
188
189 [MIT License](https://zenorocha.mit-license.org/) © Zeno Rocha
1 import select from 'select';
2
3 /**
4 * Inner class which performs selection from either `text` or `target`
5 * properties and then executes copy or cut operations.
6 */
7 class ClipboardAction {
8 /**
9 * @param {Object} options
10 */
11 constructor(options) {
12 this.resolveOptions(options);
13 this.initSelection();
14 }
15
16 /**
17 * Defines base properties passed from constructor.
18 * @param {Object} options
19 */
20 resolveOptions(options = {}) {
21 this.action = options.action;
22 this.container = options.container;
23 this.emitter = options.emitter;
24 this.target = options.target;
25 this.text = options.text;
26 this.trigger = options.trigger;
27
28 this.selectedText = '';
29 }
30
31 /**
32 * Decides which selection strategy is going to be applied based
33 * on the existence of `text` and `target` properties.
34 */
35 initSelection() {
36 if (this.text) {
37 this.selectFake();
38 }
39 else if (this.target) {
40 this.selectTarget();
41 }
42 }
43
44 /**
45 * Creates a fake textarea element, sets its value from `text` property,
46 * and makes a selection on it.
47 */
48 selectFake() {
49 const isRTL = document.documentElement.getAttribute('dir') == 'rtl';
50
51 this.removeFake();
52
53 this.fakeHandlerCallback = () => this.removeFake();
54 this.fakeHandler = this.container.addEventListener('click', this.fakeHandlerCallback) || true;
55
56 this.fakeElem = document.createElement('textarea');
57 // Prevent zooming on iOS
58 this.fakeElem.style.fontSize = '12pt';
59 // Reset box model
60 this.fakeElem.style.border = '0';
61 this.fakeElem.style.padding = '0';
62 this.fakeElem.style.margin = '0';
63 // Move element out of screen horizontally
64 this.fakeElem.style.position = 'absolute';
65 this.fakeElem.style[ isRTL ? 'right' : 'left' ] = '-9999px';
66 // Move element to the same position vertically
67 let yPosition = window.pageYOffset || document.documentElement.scrollTop;
68 this.fakeElem.style.top = `${yPosition}px`;
69
70 this.fakeElem.setAttribute('readonly', '');
71 this.fakeElem.value = this.text;
72
73 this.container.appendChild(this.fakeElem);
74
75 this.selectedText = select(this.fakeElem);
76 this.copyText();
77 }
78
79 /**
80 * Only removes the fake element after another click event, that way
81 * a user can hit `Ctrl+C` to copy because selection still exists.
82 */
83 removeFake() {
84 if (this.fakeHandler) {
85 this.container.removeEventListener('click', this.fakeHandlerCallback);
86 this.fakeHandler = null;
87 this.fakeHandlerCallback = null;
88 }
89
90 if (this.fakeElem) {
91 this.container.removeChild(this.fakeElem);
92 this.fakeElem = null;
93 }
94 }
95
96 /**
97 * Selects the content from element passed on `target` property.
98 */
99 selectTarget() {
100 this.selectedText = select(this.target);
101 this.copyText();
102 }
103
104 /**
105 * Executes the copy operation based on the current selection.
106 */
107 copyText() {
108 let succeeded;
109
110 try {
111 succeeded = document.execCommand(this.action);
112 }
113 catch (err) {
114 succeeded = false;
115 }
116
117 this.handleResult(succeeded);
118 }
119
120 /**
121 * Fires an event based on the copy operation result.
122 * @param {Boolean} succeeded
123 */
124 handleResult(succeeded) {
125 this.emitter.emit(succeeded ? 'success' : 'error', {
126 action: this.action,
127 text: this.selectedText,
128 trigger: this.trigger,
129 clearSelection: this.clearSelection.bind(this)
130 });
131 }
132
133 /**
134 * Moves focus away from `target` and back to the trigger, removes current selection.
135 */
136 clearSelection() {
137 if (this.trigger) {
138 this.trigger.focus();
139 }
140 document.activeElement.blur();
141 window.getSelection().removeAllRanges();
142 }
143
144 /**
145 * Sets the `action` to be performed which can be either 'copy' or 'cut'.
146 * @param {String} action
147 */
148 set action(action = 'copy') {
149 this._action = action;
150
151 if (this._action !== 'copy' && this._action !== 'cut') {
152 throw new Error('Invalid "action" value, use either "copy" or "cut"');
153 }
154 }
155
156 /**
157 * Gets the `action` property.
158 * @return {String}
159 */
160 get action() {
161 return this._action;
162 }
163
164 /**
165 * Sets the `target` property using an element
166 * that will be have its content copied.
167 * @param {Element} target
168 */
169 set target(target) {
170 if (target !== undefined) {
171 if (target && typeof target === 'object' && target.nodeType === 1) {
172 if (this.action === 'copy' && target.hasAttribute('disabled')) {
173 throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
174 }
175
176 if (this.action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) {
177 throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');
178 }
179
180 this._target = target;
181 }
182 else {
183 throw new Error('Invalid "target" value, use a valid Element');
184 }
185 }
186 }
187
188 /**
189 * Gets the `target` property.
190 * @return {String|HTMLElement}
191 */
192 get target() {
193 return this._target;
194 }
195
196 /**
197 * Destroy lifecycle.
198 */
199 destroy() {
200 this.removeFake();
201 }
202 }
203
204 export default ClipboardAction;
1 import ClipboardAction from './clipboard-action';
2 import Emitter from 'tiny-emitter';
3 import listen from 'good-listener';
4
5 /**
6 * Base class which takes one or more elements, adds event listeners to them,
7 * and instantiates a new `ClipboardAction` on each click.
8 */
9 class Clipboard extends Emitter {
10 /**
11 * @param {String|HTMLElement|HTMLCollection|NodeList} trigger
12 * @param {Object} options
13 */
14 constructor(trigger, options) {
15 super();
16
17 this.resolveOptions(options);
18 this.listenClick(trigger);
19 }
20
21 /**
22 * Defines if attributes would be resolved using internal setter functions
23 * or custom functions that were passed in the constructor.
24 * @param {Object} options
25 */
26 resolveOptions(options = {}) {
27 this.action = (typeof options.action === 'function') ? options.action : this.defaultAction;
28 this.target = (typeof options.target === 'function') ? options.target : this.defaultTarget;
29 this.text = (typeof options.text === 'function') ? options.text : this.defaultText;
30 this.container = (typeof options.container === 'object') ? options.container : document.body;
31 }
32
33 /**
34 * Adds a click event listener to the passed trigger.
35 * @param {String|HTMLElement|HTMLCollection|NodeList} trigger
36 */
37 listenClick(trigger) {
38 this.listener = listen(trigger, 'click', (e) => this.onClick(e));
39 }
40
41 /**
42 * Defines a new `ClipboardAction` on each click event.
43 * @param {Event} e
44 */
45 onClick(e) {
46 const trigger = e.delegateTarget || e.currentTarget;
47
48 if (this.clipboardAction) {
49 this.clipboardAction = null;
50 }
51
52 this.clipboardAction = new ClipboardAction({
53 action : this.action(trigger),
54 target : this.target(trigger),
55 text : this.text(trigger),
56 container : this.container,
57 trigger : trigger,
58 emitter : this
59 });
60 }
61
62 /**
63 * Default `action` lookup function.
64 * @param {Element} trigger
65 */
66 defaultAction(trigger) {
67 return getAttributeValue('action', trigger);
68 }
69
70 /**
71 * Default `target` lookup function.
72 * @param {Element} trigger
73 */
74 defaultTarget(trigger) {
75 const selector = getAttributeValue('target', trigger);
76
77 if (selector) {
78 return document.querySelector(selector);
79 }
80 }
81
82 /**
83 * Returns the support of the given action, or all actions if no action is
84 * given.
85 * @param {String} [action]
86 */
87 static isSupported(action = ['copy', 'cut']) {
88 const actions = (typeof action === 'string') ? [action] : action;
89 let support = !!document.queryCommandSupported;
90
91 actions.forEach((action) => {
92 support = support && !!document.queryCommandSupported(action);
93 });
94
95 return support;
96 }
97
98 /**
99 * Default `text` lookup function.
100 * @param {Element} trigger
101 */
102 defaultText(trigger) {
103 return getAttributeValue('text', trigger);
104 }
105
106 /**
107 * Destroy lifecycle.
108 */
109 destroy() {
110 this.listener.destroy();
111
112 if (this.clipboardAction) {
113 this.clipboardAction.destroy();
114 this.clipboardAction = null;
115 }
116 }
117 }
118
119
120 /**
121 * Helper function to retrieve attribute value.
122 * @param {String} suffix
123 * @param {Element} element
124 */
125 function getAttributeValue(suffix, element) {
126 const attribute = `data-clipboard-${suffix}`;
127
128 if (!element.hasAttribute(attribute)) {
129 return;
130 }
131
132 return element.getAttribute(attribute);
133 }
134
135 export default Clipboard;
1 import ClipboardAction from '../src/clipboard-action';
2 import Emitter from 'tiny-emitter';
3
4 describe('ClipboardAction', () => {
5 before(() => {
6 global.input = document.createElement('input');
7 global.input.setAttribute('id', 'input');
8 global.input.setAttribute('value', 'abc');
9 document.body.appendChild(global.input);
10
11 global.paragraph = document.createElement('p');
12 global.paragraph.setAttribute('id', 'paragraph');
13 global.paragraph.textContent = 'abc';
14 document.body.appendChild(global.paragraph);
15 });
16
17 after(() => {
18 document.body.innerHTML = '';
19 });
20
21 describe('#resolveOptions', () => {
22 it('should set base properties', () => {
23 let clip = new ClipboardAction({
24 emitter: new Emitter(),
25 container: document.body,
26 text: 'foo'
27 });
28
29 assert.property(clip, 'action');
30 assert.property(clip, 'container');
31 assert.property(clip, 'emitter');
32 assert.property(clip, 'target');
33 assert.property(clip, 'text');
34 assert.property(clip, 'trigger');
35 assert.property(clip, 'selectedText');
36 });
37 });
38
39 describe('#initSelection', () => {
40 it('should set the position right style property', done => {
41 // Set document direction
42 document.documentElement.setAttribute('dir', 'rtl');
43
44 let clip = new ClipboardAction({
45 emitter: new Emitter(),
46 container: document.body,
47 text: 'foo'
48 });
49
50 assert.equal(clip.fakeElem.style.right, '-9999px');
51 done();
52 });
53 });
54
55 describe('#set action', () => {
56 it('should throw an error since "action" is invalid', done => {
57 try {
58 new ClipboardAction({
59 text: 'foo',
60 action: 'paste'
61 });
62 }
63 catch(e) {
64 assert.equal(e.message, 'Invalid "action" value, use either "copy" or "cut"');
65 done();
66 }
67 });
68 });
69
70 describe('#set target', () => {
71 it('should throw an error since "target" do not match any element', done => {
72 try {
73 new ClipboardAction({
74 target: document.querySelector('#foo')
75 });
76 }
77 catch(e) {
78 assert.equal(e.message, 'Invalid "target" value, use a valid Element');
79 done();
80 }
81 });
82 });
83
84 describe('#selectText', () => {
85 it('should create a fake element and select its value', () => {
86 let clip = new ClipboardAction({
87 emitter: new Emitter(),
88 container: document.body,
89 text: 'blah'
90 });
91
92 assert.equal(clip.selectedText, clip.fakeElem.value);
93 });
94 });
95
96 describe('#removeFake', () => {
97 it('should remove a temporary fake element', () => {
98 let clip = new ClipboardAction({
99 emitter: new Emitter(),
100 container: document.body,
101 text: 'blah'
102 });
103
104 clip.removeFake();
105
106 assert.equal(clip.fakeElem, null);
107 });
108 });
109
110 describe('#selectTarget', () => {
111 it('should select text from editable element', () => {
112 let clip = new ClipboardAction({
113 emitter: new Emitter(),
114 container: document.body,
115 target: document.querySelector('#input')
116 });
117
118 assert.equal(clip.selectedText, clip.target.value);
119 });
120
121 it('should select text from non-editable element', () => {
122 let clip = new ClipboardAction({
123 emitter: new Emitter(),
124 container: document.body,
125 target: document.querySelector('#paragraph')
126 });
127
128 assert.equal(clip.selectedText, clip.target.textContent);
129 });
130 });
131
132 describe('#copyText', () => {
133 before(() => {
134 global.stub = sinon.stub(document, 'execCommand');
135 });
136
137 after(() => {
138 global.stub.restore();
139 });
140
141 it('should fire a success event on browsers that support copy command', done => {
142 global.stub.returns(true);
143
144 let emitter = new Emitter();
145
146 emitter.on('success', () => {
147 done();
148 });
149
150 let clip = new ClipboardAction({
151 emitter,
152 target: document.querySelector('#input')
153 });
154 });
155
156 it('should fire an error event on browsers that support copy command', done => {
157 global.stub.returns(false);
158
159 let emitter = new Emitter();
160
161 emitter.on('error', () => {
162 done();
163 });
164
165 let clip = new ClipboardAction({
166 emitter,
167 target: document.querySelector('#input')
168 });
169 });
170 });
171
172 describe('#handleResult', () => {
173 it('should fire a success event with certain properties', done => {
174 let clip = new ClipboardAction({
175 emitter: new Emitter(),
176 container: document.body,
177 target: document.querySelector('#input')
178 });
179
180 clip.emitter.on('success', (e) => {
181 assert.property(e, 'action');
182 assert.property(e, 'text');
183 assert.property(e, 'trigger');
184 assert.property(e, 'clearSelection');
185
186 done();
187 });
188
189 clip.handleResult(true);
190 });
191
192 it('should fire a error event with certain properties', done => {
193 let clip = new ClipboardAction({
194 emitter: new Emitter(),
195 container: document.body,
196 target: document.querySelector('#input')
197 });
198
199 clip.emitter.on('error', (e) => {
200 assert.property(e, 'action');
201 assert.property(e, 'trigger');
202 assert.property(e, 'clearSelection');
203
204 done();
205 });
206
207 clip.handleResult(false);
208 });
209 });
210
211 describe('#clearSelection', () => {
212 it('should remove focus from target and text selection', () => {
213 let clip = new ClipboardAction({
214 emitter: new Emitter(),
215 container: document.body,
216 target: document.querySelector('#input')
217 });
218
219 clip.clearSelection();
220
221 let selectedElem = document.activeElement;
222 let selectedText = window.getSelection().toString();
223
224 assert.equal(selectedElem, document.body);
225 assert.equal(selectedText, '');
226 });
227 });
228
229 describe('#destroy', () => {
230 it('should destroy an existing fake element', () => {
231 let clip = new ClipboardAction({
232 emitter: new Emitter(),
233 container: document.body,
234 text: 'blah'
235 });
236
237 clip.selectFake();
238 clip.destroy();
239
240 assert.equal(clip.fakeElem, null);
241 });
242 });
243 });
1 import Clipboard from '../src/clipboard';
2 import ClipboardAction from '../src/clipboard-action';
3 import listen from 'good-listener';
4
5 describe('Clipboard', () => {
6 before(() => {
7 global.button = document.createElement('button');
8 global.button.setAttribute('class', 'btn');
9 global.button.setAttribute('data-clipboard-text', 'foo');
10 document.body.appendChild(global.button);
11
12 global.span = document.createElement('span');
13 global.span.innerHTML = 'bar';
14
15 global.button.appendChild(span);
16
17 global.event = {
18 target: global.button,
19 currentTarget: global.button
20 };
21 });
22
23 after(() => {
24 document.body.innerHTML = '';
25 });
26
27 describe('#resolveOptions', () => {
28 before(() => {
29 global.fn = () => {};
30 });
31
32 it('should set action as a function', () => {
33 let clipboard = new Clipboard('.btn', {
34 action: global.fn
35 });
36
37 assert.equal(global.fn, clipboard.action);
38 });
39
40 it('should set target as a function', () => {
41 let clipboard = new Clipboard('.btn', {
42 target: global.fn
43 });
44
45 assert.equal(global.fn, clipboard.target);
46 });
47
48 it('should set text as a function', () => {
49 let clipboard = new Clipboard('.btn', {
50 text: global.fn
51 });
52
53 assert.equal(global.fn, clipboard.text);
54 });
55
56 it('should set container as an object', () => {
57 let clipboard = new Clipboard('.btn', {
58 container: document.body
59 });
60
61 assert.equal(document.body, clipboard.container);
62 });
63
64 it('should set container as body by default', () => {
65 let clipboard = new Clipboard('.btn');
66
67 assert.equal(document.body, clipboard.container);
68 });
69 });
70
71 describe('#listenClick', () => {
72 it('should add a click event listener to the passed selector', () => {
73 let clipboard = new Clipboard('.btn');
74 assert.isObject(clipboard.listener);
75 });
76 });
77
78 describe('#onClick', () => {
79 it('should create a new instance of ClipboardAction', () => {
80 let clipboard = new Clipboard('.btn');
81
82 clipboard.onClick(global.event);
83 assert.instanceOf(clipboard.clipboardAction, ClipboardAction);
84 });
85
86 it('should use an event\'s currentTarget when not equal to target', () => {
87 let clipboard = new Clipboard('.btn');
88 let bubbledEvent = { target: global.span, currentTarget: global.button };
89
90 clipboard.onClick(bubbledEvent);
91 assert.instanceOf(clipboard.clipboardAction, ClipboardAction);
92 });
93
94 it('should throw an exception when target is invalid', done => {
95 try {
96 const clipboard = new Clipboard('.btn', {
97 target() {
98 return null;
99 }
100 });
101
102 clipboard.onClick(global.event);
103 }
104 catch(e) {
105 assert.equal(e.message, 'Invalid "target" value, use a valid Element');
106 done();
107 }
108 });
109 });
110
111 describe('#static isSupported', () => {
112 it('should return the support of the given action', () => {
113 assert.equal(Clipboard.isSupported('copy'), true);
114 assert.equal(Clipboard.isSupported('cut'), true);
115 });
116
117 it('should return the support of the cut and copy actions', () => {
118 assert.equal(Clipboard.isSupported(), true);
119 });
120 });
121
122 describe('#destroy', () => {
123 it('should destroy an existing instance of ClipboardAction', () => {
124 let clipboard = new Clipboard('.btn');
125
126 clipboard.onClick(global.event);
127 clipboard.destroy();
128
129 assert.equal(clipboard.clipboardAction, null);
130 });
131 });
132 });
1 const pkg = require('./package.json');
2 const path = require('path');
3 const webpack = require('webpack');
4 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
5
6 const production = process.env.NODE_ENV === 'production' || false;
7
8 const banner = `clipboard.js v${pkg.version}
9 https://clipboardjs.com/
10
11 Licensed MIT © Zeno Rocha`;
12
13 module.exports = {
14 entry: './src/clipboard.js',
15 mode: 'production',
16 output: {
17 filename: production ? 'clipboard.min.js' : 'clipboard.js',
18 path: path.resolve(__dirname, 'dist'),
19 library: 'ClipboardJS',
20 globalObject: 'this',
21 libraryExport: 'default',
22 libraryTarget: 'umd'
23 },
24 module: {
25 rules: [
26 {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}
27 ]
28 },
29 optimization: {
30 minimize: production,
31 minimizer: [
32 new UglifyJSPlugin({
33 parallel: require('os').cpus().length,
34 uglifyOptions: {
35 ie8: false,
36 keep_fnames: false,
37 output: {
38 beautify: false,
39 comments: (node, {value, type}) => type == 'comment2' && value.startsWith('!')
40 }
41 }
42 })
43 ]
44 },
45 plugins: [new webpack.BannerPlugin({ banner })]
46 };
1 # EditorConfig helps developers define and maintain consistent
2 # coding styles between different editors and IDEs
3 # http://editorconfig.org
4
5 root = true
6
7 [*]
8 # Change these settings to your own preference
9 indent_style = space
10 indent_size = 4
11
12 # We recommend you to keep these unchanged
13 end_of_line = lf
14 charset = utf-8
15 trim_trailing_whitespace = true
16 insert_final_newline = true
17
18 [*.md]
19 trim_trailing_whitespace = false
20
21 [{package.json,bower.json}]
22 indent_size = 2
1 language: node_js
2 node_js:
3 - stable
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Delegate</title>
6 </head>
7 <body>
8 <!-- 1. Write some markup -->
9 <ul>
10 <li><button>Item 1</button></li>
11 <li><button>Item 2</button></li>
12 <li><button>Item 3</button></li>
13 <li><button>Item 4</button></li>
14 <li><button>Item 5</button></li>
15 </ul>
16
17 <!-- 2. Include library -->
18 <script src="../dist/delegate.js"></script>
19
20 <!-- 3. Add event delegation -->
21 <script>
22 var ul = document.querySelector('ul');
23
24 delegate(ul, 'button', 'click', function(e) {
25 console.log(e.target);
26 });
27 </script>
28 </body>
29 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Delegate</title>
6 </head>
7 <body>
8 <!-- 1. Write some markup -->
9 <ul>
10 <li><button>Item 1</button></li>
11 <li><button>Item 2</button></li>
12 <li><button>Item 3</button></li>
13 <li><button>Item 4</button></li>
14 <li><button>Item 5</button></li>
15 </ul>
16 <ul>
17 <li><span>Item 6</span></li>
18 <li><span>Item 7</span></li>
19 </ul>
20
21 <!-- 2. Include library -->
22 <script src="../dist/delegate.js"></script>
23
24 <!-- 3. Add event delegation -->
25 <script>
26 var ul = document.querySelector('ul');
27
28 delegate(ul, 'button', 'click', function(e) {
29 console.log(e.target);
30 });
31
32 delegate(document.body, 'span', 'click', function(e) {
33 console.log(e.target);
34 });
35 </script>
36 </body>
37 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Undelegate</title>
6 </head>
7 <body>
8 <!-- 1. Write some markup -->
9 <ul>
10 <li><button>Item 1</button></li>
11 <li><button>Item 2</button></li>
12 <li><button>Item 3</button></li>
13 <li><button>Item 4</button></li>
14 <li><button>Item 5</button></li>
15 </ul>
16
17 <!-- 2. Include library -->
18 <script src="../dist/delegate.js"></script>
19
20 <!-- 3. Remove event delegation -->
21 <script>
22 var ul = document.querySelector('ul');
23
24 var delegation = delegate(ul, 'li button', 'click', function(e) {
25 console.log(e.target);
26 });
27
28 delegation.destroy();
29 </script>
30 </body>
31 </html>
1 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.delegate = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
2 var DOCUMENT_NODE_TYPE = 9;
3
4 /**
5 * A polyfill for Element.matches()
6 */
7 if (typeof Element !== 'undefined' && !Element.prototype.matches) {
8 var proto = Element.prototype;
9
10 proto.matches = proto.matchesSelector ||
11 proto.mozMatchesSelector ||
12 proto.msMatchesSelector ||
13 proto.oMatchesSelector ||
14 proto.webkitMatchesSelector;
15 }
16
17 /**
18 * Finds the closest parent that matches a selector.
19 *
20 * @param {Element} element
21 * @param {String} selector
22 * @return {Function}
23 */
24 function closest (element, selector) {
25 while (element && element.nodeType !== DOCUMENT_NODE_TYPE) {
26 if (element.matches(selector)) return element;
27 element = element.parentNode;
28 }
29 }
30
31 module.exports = closest;
32
33 },{}],2:[function(require,module,exports){
34 var closest = require('./closest');
35
36 /**
37 * Delegates event to a selector.
38 *
39 * @param {Element} element
40 * @param {String} selector
41 * @param {String} type
42 * @param {Function} callback
43 * @param {Boolean} useCapture
44 * @return {Object}
45 */
46 function delegate(element, selector, type, callback, useCapture) {
47 var listenerFn = listener.apply(this, arguments);
48
49 element.addEventListener(type, listenerFn, useCapture);
50
51 return {
52 destroy: function() {
53 element.removeEventListener(type, listenerFn, useCapture);
54 }
55 }
56 }
57
58 /**
59 * Finds closest match and invokes callback.
60 *
61 * @param {Element} element
62 * @param {String} selector
63 * @param {String} type
64 * @param {Function} callback
65 * @return {Function}
66 */
67 function listener(element, selector, type, callback) {
68 return function(e) {
69 e.delegateTarget = closest(e.target, selector);
70
71 if (e.delegateTarget) {
72 callback.call(element, e);
73 }
74 }
75 }
76
77 module.exports = delegate;
78
79 },{"./closest":1}]},{},[2])(2)
80 });
...\ No newline at end of file ...\ No newline at end of file
1 module.exports = function(karma) {
2 karma.set({
3 plugins: ['karma-browserify', 'karma-chai', 'karma-sinon', 'karma-mocha', 'karma-phantomjs-launcher'],
4
5 frameworks: ['browserify', 'chai', 'sinon', 'mocha'],
6
7 files: [
8 'src/**/*.js',
9 'test/**/*.js',
10 './node_modules/phantomjs-polyfill/bind-polyfill.js'
11 ],
12
13 preprocessors: {
14 'src/**/*.js' : ['browserify'],
15 'test/**/*.js': ['browserify']
16 },
17
18 browserify: {
19 debug: true
20 },
21
22 browsers: ['PhantomJS']
23 });
24 }
1 {
2 "_from": "delegate@^3.1.2",
3 "_id": "delegate@3.2.0",
4 "_inBundle": false,
5 "_integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
6 "_location": "/delegate",
7 "_phantomChildren": {},
8 "_requested": {
9 "type": "range",
10 "registry": true,
11 "raw": "delegate@^3.1.2",
12 "name": "delegate",
13 "escapedName": "delegate",
14 "rawSpec": "^3.1.2",
15 "saveSpec": null,
16 "fetchSpec": "^3.1.2"
17 },
18 "_requiredBy": [
19 "/good-listener"
20 ],
21 "_resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
22 "_shasum": "b66b71c3158522e8ab5744f720d8ca0c2af59166",
23 "_spec": "delegate@^3.1.2",
24 "_where": "/Users/zhanghao/brcode/br-client/node_modules/good-listener",
25 "bugs": {
26 "url": "https://github.com/zenorocha/delegate/issues"
27 },
28 "bundleDependencies": false,
29 "deprecated": false,
30 "description": "Lightweight event delegation",
31 "devDependencies": {
32 "browserify": "^13.1.0",
33 "chai": "^3.5.0",
34 "karma": "^1.3.0",
35 "karma-browserify": "^5.1.0",
36 "karma-chai": "^0.1.0",
37 "karma-mocha": "^1.2.0",
38 "karma-phantomjs-launcher": "^1.0.2",
39 "karma-sinon": "^1.0.4",
40 "mocha": "^3.1.2",
41 "phantomjs-polyfill": "0.0.2",
42 "simulant": "^0.2.2",
43 "sinon": "^1.17.6"
44 },
45 "homepage": "https://github.com/zenorocha/delegate#readme",
46 "keywords": [
47 "event",
48 "delegate",
49 "delegation"
50 ],
51 "license": "MIT",
52 "main": "src/delegate.js",
53 "name": "delegate",
54 "repository": {
55 "type": "git",
56 "url": "git+https://github.com/zenorocha/delegate.git"
57 },
58 "scripts": {
59 "build": "browserify src/delegate.js -s delegate -o dist/delegate.js",
60 "test": "karma start --single-run"
61 },
62 "version": "3.2.0"
63 }
1 # delegate
2
3 Lightweight event delegation.
4
5 ## Install
6
7 You can get it on npm.
8
9 ```
10 npm install delegate --save
11 ```
12
13 If you're not into package management, just [download a ZIP](https://github.com/zenorocha/delegate/archive/master.zip) file.
14
15 ## Setup
16
17 ###### Node (Browserify)
18
19 ```js
20 var delegate = require('delegate');
21 ```
22
23 ###### Browser (Standalone)
24
25 ```html
26 <script src="dist/delegate.js"></script>
27 ```
28
29 ## Usage
30
31 ### Add event delegation
32
33 #### With the default base (`document`)
34
35 ```js
36 delegate('.btn', 'click', function(e) {
37 console.log(e.delegateTarget);
38 }, false);
39 ```
40
41 #### With an element as base
42
43 ```js
44 delegate(document.body, '.btn', 'click', function(e) {
45 console.log(e.delegateTarget);
46 }, false);
47 ```
48
49 #### With a selector (of existing elements) as base
50
51 ```js
52 delegate('.container', '.btn', 'click', function(e) {
53 console.log(e.delegateTarget);
54 }, false);
55 ```
56
57 #### With an array/array-like of elements as base
58
59 ```js
60 delegate(document.querySelectorAll('.container'), '.btn', 'click', function(e) {
61 console.log(e.delegateTarget);
62 }, false);
63 ```
64
65 ### Remove event delegation
66
67 #### With a single base element (default or specified)
68
69 ```js
70 var delegation = delegate(document.body, '.btn', 'click', function(e) {
71 console.log(e.delegateTarget);
72 }, false);
73
74 delegation.destroy();
75 ```
76
77 #### With multiple elements (via selector or array)
78
79 Note: selectors are always treated as multiple elements, even if one or none are matched. `delegate()` will return an array.
80
81 ```js
82 var delegations = delegate('.container', '.btn', 'click', function(e) {
83 console.log(e.delegateTarget);
84 }, false);
85
86 delegations.forEach(function (delegation) {
87 delegation.destroy();
88 });
89 ```
90
91 ## Browser Support
92
93 | <img src="https://clipboardjs.com/assets/images/chrome.png" width="48px" height="48px" alt="Chrome logo"> | <img src="https://clipboardjs.com/assets/images/edge.png" width="48px" height="48px" alt="Edge logo"> | <img src="https://clipboardjs.com/assets/images/firefox.png" width="48px" height="48px" alt="Firefox logo"> | <img src="https://clipboardjs.com/assets/images/ie.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="https://clipboardjs.com/assets/images/opera.png" width="48px" height="48px" alt="Opera logo"> | <img src="https://clipboardjs.com/assets/images/safari.png" width="48px" height="48px" alt="Safari logo"> |
94 |:---:|:---:|:---:|:---:|:---:|:---:|
95 | Latest ✔ | Latest ✔ | Latest ✔ | 9+ ✔ | Latest ✔ | Latest ✔ |
96
97 ## License
98
99 [MIT License](http://zenorocha.mit-license.org/) © Zeno Rocha
1 var DOCUMENT_NODE_TYPE = 9;
2
3 /**
4 * A polyfill for Element.matches()
5 */
6 if (typeof Element !== 'undefined' && !Element.prototype.matches) {
7 var proto = Element.prototype;
8
9 proto.matches = proto.matchesSelector ||
10 proto.mozMatchesSelector ||
11 proto.msMatchesSelector ||
12 proto.oMatchesSelector ||
13 proto.webkitMatchesSelector;
14 }
15
16 /**
17 * Finds the closest parent that matches a selector.
18 *
19 * @param {Element} element
20 * @param {String} selector
21 * @return {Function}
22 */
23 function closest (element, selector) {
24 while (element && element.nodeType !== DOCUMENT_NODE_TYPE) {
25 if (typeof element.matches === 'function' &&
26 element.matches(selector)) {
27 return element;
28 }
29 element = element.parentNode;
30 }
31 }
32
33 module.exports = closest;
1 var closest = require('./closest');
2
3 /**
4 * Delegates event to a selector.
5 *
6 * @param {Element} element
7 * @param {String} selector
8 * @param {String} type
9 * @param {Function} callback
10 * @param {Boolean} useCapture
11 * @return {Object}
12 */
13 function _delegate(element, selector, type, callback, useCapture) {
14 var listenerFn = listener.apply(this, arguments);
15
16 element.addEventListener(type, listenerFn, useCapture);
17
18 return {
19 destroy: function() {
20 element.removeEventListener(type, listenerFn, useCapture);
21 }
22 }
23 }
24
25 /**
26 * Delegates event to a selector.
27 *
28 * @param {Element|String|Array} [elements]
29 * @param {String} selector
30 * @param {String} type
31 * @param {Function} callback
32 * @param {Boolean} useCapture
33 * @return {Object}
34 */
35 function delegate(elements, selector, type, callback, useCapture) {
36 // Handle the regular Element usage
37 if (typeof elements.addEventListener === 'function') {
38 return _delegate.apply(null, arguments);
39 }
40
41 // Handle Element-less usage, it defaults to global delegation
42 if (typeof type === 'function') {
43 // Use `document` as the first parameter, then apply arguments
44 // This is a short way to .unshift `arguments` without running into deoptimizations
45 return _delegate.bind(null, document).apply(null, arguments);
46 }
47
48 // Handle Selector-based usage
49 if (typeof elements === 'string') {
50 elements = document.querySelectorAll(elements);
51 }
52
53 // Handle Array-like based usage
54 return Array.prototype.map.call(elements, function (element) {
55 return _delegate(element, selector, type, callback, useCapture);
56 });
57 }
58
59 /**
60 * Finds closest match and invokes callback.
61 *
62 * @param {Element} element
63 * @param {String} selector
64 * @param {String} type
65 * @param {Function} callback
66 * @return {Function}
67 */
68 function listener(element, selector, type, callback) {
69 return function(e) {
70 e.delegateTarget = closest(e.target, selector);
71
72 if (e.delegateTarget) {
73 callback.call(element, e);
74 }
75 }
76 }
77
78 module.exports = delegate;
1 var closest = require('../src/closest');
2
3 describe('closest', function() {
4 before(function() {
5 var html = '<div id="a">' +
6 '<div id="b">' +
7 '<div id="c"></div>' +
8 '</div>' +
9 '</div>';
10
11 document.body.innerHTML += html;
12
13 global.a = document.querySelector('#a');
14 global.b = document.querySelector('#b');
15 global.c = document.querySelector('#c');
16 });
17
18 after(function() {
19 document.body.innerHTML = '';
20 });
21
22 it('should return the closest parent based on the selector', function() {
23 assert.ok(closest(global.c, '#b'), global.b);
24 assert.ok(closest(global.c, '#a'), global.a);
25 assert.ok(closest(global.b, '#a'), global.a);
26 });
27
28 it('should return itself if the same selector is passed', function() {
29 assert.ok(closest(document.body, 'body'), document.body);
30 });
31
32 it('should not throw on elements without matches()', function() {
33 var fakeElement = {
34 nodeType: -1, // anything but DOCUMENT_NODE_TYPE
35 parentNode: null,
36 matches: undefined // undefined to emulate Elements without this function
37 };
38
39 try {
40 closest(fakeElement, '#a')
41 } catch (err) {
42 assert.fail();
43 }
44 });
45 });
1 var delegate = require('../src/delegate');
2 var simulant = require('simulant');
3
4 describe('delegate', function() {
5 before(function() {
6 var html = '<ul>' +
7 '<li><a>Item 1</a></li>' +
8 '<li><a>Item 2</a></li>' +
9 '<li><a>Item 3</a></li>' +
10 '<li><a>Item 4</a></li>' +
11 '<li><a>Item 5</a></li>' +
12 '</ul>';
13
14 document.body.innerHTML += html;
15
16 global.container = document.querySelector('ul');
17 global.anchor = document.querySelector('a');
18
19 global.spy = sinon.spy(global.container, 'removeEventListener');
20 });
21
22 after(function() {
23 global.spy.restore();
24 document.body.innerHTML = '';
25 });
26
27 it('should add an event listener', function(done) {
28 delegate(global.container, 'a', 'click', function() {
29 done();
30 });
31
32 simulant.fire(global.anchor, simulant('click'));
33 });
34
35 it('should remove an event listener', function() {
36 var delegation = delegate(global.container, 'a', 'click', function() {});
37
38 delegation.destroy();
39 assert.ok(global.spy.calledOnce);
40 });
41
42 it('should use `document` if the element is unspecified', function(done) {
43 delegate('a', 'click', function() {
44 done();
45 });
46
47 simulant.fire(global.anchor, simulant('click'));
48 });
49
50 it('should remove an event listener the unspecified base (`document`)', function() {
51 var delegation = delegate('a', 'click', function() {});
52 var spy = sinon.spy(document, 'removeEventListener');
53
54 delegation.destroy();
55 assert.ok(spy.calledOnce);
56
57 spy.restore();
58 });
59
60 it('should add event listeners to all the elements in a base selector', function() {
61 var spy = sinon.spy();
62 delegate('li', 'a', 'click', spy);
63
64 var anchors = document.querySelectorAll('a');
65 simulant.fire(anchors[0], simulant('click'));
66 simulant.fire(anchors[1], simulant('click'));
67 assert.ok(spy.calledTwice);
68 });
69
70 it('should remove the event listeners from all the elements in a base selector', function() {
71 var items = document.querySelectorAll('li')
72 var spies = Array.prototype.map.call(items, function (li) {
73 return sinon.spy(li, 'removeEventListener');
74 });
75
76 var delegations = delegate('li', 'a', 'click', function() {});
77 delegations.forEach(function (delegation) {
78 delegation.destroy();
79 });
80
81 spies.every(function (spy) {
82 var success = spy.calledOnce;
83 spy.restore();
84 return success;
85 });
86 });
87
88 it('should add event listeners to all the elements in a base array', function() {
89 var spy = sinon.spy();
90 var items = document.querySelectorAll('li')
91 delegate(items, 'a', 'click', spy);
92
93 var anchors = document.querySelectorAll('a')
94 simulant.fire(anchors[0], simulant('click'));
95 simulant.fire(anchors[1], simulant('click'));
96 assert.ok(spy.calledTwice);
97 });
98
99 it('should remove the event listeners from all the elements in a base array', function() {
100 var items = document.querySelectorAll('li')
101 var spies = Array.prototype.map.call(items, function (li) {
102 return sinon.spy(li, 'removeEventListener');
103 });
104
105 var delegations = delegate(items, 'a', 'click', function() {});
106 delegations.forEach(function (delegation) {
107 delegation.destroy();
108 });
109
110 spies.every(function (spy) {
111 var success = spy.calledOnce;
112 spy.restore();
113 return success;
114 });
115 });
116 });
1 # EditorConfig helps developers define and maintain consistent
2 # coding styles between different editors and IDEs
3 # http://editorconfig.org
4
5 root = true
6
7 [*]
8 # Change these settings to your own preference
9 indent_style = space
10 indent_size = 4
11
12 # We recommend you to keep these unchanged
13 end_of_line = lf
14 charset = utf-8
15 trim_trailing_whitespace = true
16 insert_final_newline = true
17
18 [*.md]
19 trim_trailing_whitespace = false
20
21 [{package.json,bower.json}]
22 indent_size = 2
1 node_modules
...\ No newline at end of file ...\ No newline at end of file
1 language: node_js
2 node_js:
3 - stable
1 {
2 "name": "good-listener",
3 "description": "A more versatile way of adding & removing event listeners",
4 "version": "1.2.1",
5 "license": "MIT",
6 "main": "dist/good-listener.js",
7 "keywords": [
8 "event",
9 "listener"
10 ]
11 }
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Destroy</title>
6 </head>
7 <body>
8 <!-- 1. Write some markup -->
9 <button class="target">Click me</button>
10 <button class="target">Click me</button>
11 <button class="target">Click me</button>
12
13 <!-- 2. Include library -->
14 <script src="../dist/good-listener.js"></script>
15
16 <!-- 3. Remove listener by calling the destroy function -->
17 <script>
18 var listener = listen('.target', 'click', function(e) {
19 console.info(e);
20 });
21
22 listener.destroy();
23 </script>
24 </body>
25 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Selector</title>
6 </head>
7 <body>
8 <!-- 1. Write some markup -->
9 <button data-a>Click me</button>
10 <button data-a>Click me</button>
11 <button data-a>Click me</button>
12 <button data-b>Click me</button>
13 <button data-b>Click me</button>
14 <button data-b>Click me</button>
15
16 <!-- 2. Include library -->
17 <script src="../dist/good-listener.js"></script>
18
19 <!-- 3. Add listener by passing a string selector -->
20 <script>
21 listen('[data-a]', 'click', function(e) {
22 console.info(e);
23 });
24
25 listen('[data-b]', 'click', function(e) {
26 console.info(e);
27 });
28 </script>
29 </body>
30 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Node</title>
6 </head>
7 <body>
8 <!-- 1. Write some markup -->
9 <button id="target">Click me</button>
10
11 <!-- 2. Include library -->
12 <script src="../dist/good-listener.js"></script>
13
14 <!-- 3. Add listener by passing a HTML element -->
15 <script>
16 var target = document.getElementById('target');
17
18 listen(target, 'click', function(e) {
19 console.info(e);
20 });
21 </script>
22 </body>
23 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>NodeList</title>
6 </head>
7 <body>
8 <!-- 1. Write some markup -->
9 <button>Click me</button>
10 <button>Click me</button>
11 <button>Click me</button>
12
13 <!-- 2. Include library -->
14 <script src="../dist/good-listener.js"></script>
15
16 <!-- 3. Add listener by passing a list of HTML elements -->
17 <script>
18 var targets = document.querySelectorAll('button');
19
20 listen(targets, 'click', function(e) {
21 console.info(e);
22 });
23 </script>
24 </body>
25 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Selector</title>
6 </head>
7 <body>
8 <!-- 1. Write some markup -->
9 <button class="target">Click me</button>
10 <button class="target">Click me</button>
11 <button class="target">Click me</button>
12
13 <!-- 2. Include library -->
14 <script src="../dist/good-listener.js"></script>
15
16 <!-- 3. Add listener by passing a string selector -->
17 <script>
18 listen('.target', 'click', function(e) {
19 console.info(e);
20 });
21 </script>
22 </body>
23 </html>
1 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.listen = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
2 var DOCUMENT_NODE_TYPE = 9;
3
4 /**
5 * A polyfill for Element.matches()
6 */
7 if (typeof Element !== 'undefined' && !Element.prototype.matches) {
8 var proto = Element.prototype;
9
10 proto.matches = proto.matchesSelector ||
11 proto.mozMatchesSelector ||
12 proto.msMatchesSelector ||
13 proto.oMatchesSelector ||
14 proto.webkitMatchesSelector;
15 }
16
17 /**
18 * Finds the closest parent that matches a selector.
19 *
20 * @param {Element} element
21 * @param {String} selector
22 * @return {Function}
23 */
24 function closest (element, selector) {
25 while (element && element.nodeType !== DOCUMENT_NODE_TYPE) {
26 if (element.matches(selector)) return element;
27 element = element.parentNode;
28 }
29 }
30
31 module.exports = closest;
32
33 },{}],2:[function(require,module,exports){
34 var closest = require('./closest');
35
36 /**
37 * Delegates event to a selector.
38 *
39 * @param {Element} element
40 * @param {String} selector
41 * @param {String} type
42 * @param {Function} callback
43 * @param {Boolean} useCapture
44 * @return {Object}
45 */
46 function delegate(element, selector, type, callback, useCapture) {
47 var listenerFn = listener.apply(this, arguments);
48
49 element.addEventListener(type, listenerFn, useCapture);
50
51 return {
52 destroy: function() {
53 element.removeEventListener(type, listenerFn, useCapture);
54 }
55 }
56 }
57
58 /**
59 * Finds closest match and invokes callback.
60 *
61 * @param {Element} element
62 * @param {String} selector
63 * @param {String} type
64 * @param {Function} callback
65 * @return {Function}
66 */
67 function listener(element, selector, type, callback) {
68 return function(e) {
69 e.delegateTarget = closest(e.target, selector);
70
71 if (e.delegateTarget) {
72 callback.call(element, e);
73 }
74 }
75 }
76
77 module.exports = delegate;
78
79 },{"./closest":1}],3:[function(require,module,exports){
80 /**
81 * Check if argument is a HTML element.
82 *
83 * @param {Object} value
84 * @return {Boolean}
85 */
86 exports.node = function(value) {
87 return value !== undefined
88 && value instanceof HTMLElement
89 && value.nodeType === 1;
90 };
91
92 /**
93 * Check if argument is a list of HTML elements.
94 *
95 * @param {Object} value
96 * @return {Boolean}
97 */
98 exports.nodeList = function(value) {
99 var type = Object.prototype.toString.call(value);
100
101 return value !== undefined
102 && (type === '[object NodeList]' || type === '[object HTMLCollection]')
103 && ('length' in value)
104 && (value.length === 0 || exports.node(value[0]));
105 };
106
107 /**
108 * Check if argument is a string.
109 *
110 * @param {Object} value
111 * @return {Boolean}
112 */
113 exports.string = function(value) {
114 return typeof value === 'string'
115 || value instanceof String;
116 };
117
118 /**
119 * Check if argument is a function.
120 *
121 * @param {Object} value
122 * @return {Boolean}
123 */
124 exports.fn = function(value) {
125 var type = Object.prototype.toString.call(value);
126
127 return type === '[object Function]';
128 };
129
130 },{}],4:[function(require,module,exports){
131 var is = require('./is');
132 var delegate = require('delegate');
133
134 /**
135 * Validates all params and calls the right
136 * listener function based on its target type.
137 *
138 * @param {String|HTMLElement|HTMLCollection|NodeList} target
139 * @param {String} type
140 * @param {Function} callback
141 * @return {Object}
142 */
143 function listen(target, type, callback) {
144 if (!target && !type && !callback) {
145 throw new Error('Missing required arguments');
146 }
147
148 if (!is.string(type)) {
149 throw new TypeError('Second argument must be a String');
150 }
151
152 if (!is.fn(callback)) {
153 throw new TypeError('Third argument must be a Function');
154 }
155
156 if (is.node(target)) {
157 return listenNode(target, type, callback);
158 }
159 else if (is.nodeList(target)) {
160 return listenNodeList(target, type, callback);
161 }
162 else if (is.string(target)) {
163 return listenSelector(target, type, callback);
164 }
165 else {
166 throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList');
167 }
168 }
169
170 /**
171 * Adds an event listener to a HTML element
172 * and returns a remove listener function.
173 *
174 * @param {HTMLElement} node
175 * @param {String} type
176 * @param {Function} callback
177 * @return {Object}
178 */
179 function listenNode(node, type, callback) {
180 node.addEventListener(type, callback);
181
182 return {
183 destroy: function() {
184 node.removeEventListener(type, callback);
185 }
186 }
187 }
188
189 /**
190 * Add an event listener to a list of HTML elements
191 * and returns a remove listener function.
192 *
193 * @param {NodeList|HTMLCollection} nodeList
194 * @param {String} type
195 * @param {Function} callback
196 * @return {Object}
197 */
198 function listenNodeList(nodeList, type, callback) {
199 Array.prototype.forEach.call(nodeList, function(node) {
200 node.addEventListener(type, callback);
201 });
202
203 return {
204 destroy: function() {
205 Array.prototype.forEach.call(nodeList, function(node) {
206 node.removeEventListener(type, callback);
207 });
208 }
209 }
210 }
211
212 /**
213 * Add an event listener to a selector
214 * and returns a remove listener function.
215 *
216 * @param {String} selector
217 * @param {String} type
218 * @param {Function} callback
219 * @return {Object}
220 */
221 function listenSelector(selector, type, callback) {
222 return delegate(document.body, selector, type, callback);
223 }
224
225 module.exports = listen;
226
227 },{"./is":3,"delegate":2}]},{},[4])(4)
228 });
...\ No newline at end of file ...\ No newline at end of file
1 module.exports = function(karma) {
2 karma.set({
3 plugins: ['karma-browserify', 'karma-chai', 'karma-sinon', 'karma-mocha', 'karma-phantomjs-launcher'],
4
5 frameworks: ['browserify', 'chai', 'sinon', 'mocha'],
6
7 files: [
8 'src/**/*.js',
9 'test/**/*.js',
10 './node_modules/phantomjs-polyfill/bind-polyfill.js'
11 ],
12
13 preprocessors: {
14 'src/**/*.js' : ['browserify'],
15 'test/**/*.js': ['browserify']
16 },
17
18 browserify: {
19 debug: true
20 },
21
22 browsers: ['PhantomJS']
23 });
24 }
1 {
2 "_from": "good-listener@^1.2.2",
3 "_id": "good-listener@1.2.2",
4 "_inBundle": false,
5 "_integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
6 "_location": "/good-listener",
7 "_phantomChildren": {},
8 "_requested": {
9 "type": "range",
10 "registry": true,
11 "raw": "good-listener@^1.2.2",
12 "name": "good-listener",
13 "escapedName": "good-listener",
14 "rawSpec": "^1.2.2",
15 "saveSpec": null,
16 "fetchSpec": "^1.2.2"
17 },
18 "_requiredBy": [
19 "/clipboard"
20 ],
21 "_resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
22 "_shasum": "d53b30cdf9313dffb7dc9a0d477096aa6d145c50",
23 "_spec": "good-listener@^1.2.2",
24 "_where": "/Users/zhanghao/brcode/br-client/node_modules/clipboard",
25 "bugs": {
26 "url": "https://github.com/zenorocha/good-listener/issues"
27 },
28 "bundleDependencies": false,
29 "dependencies": {
30 "delegate": "^3.1.2"
31 },
32 "deprecated": false,
33 "description": "A more versatile way of adding & removing event listeners",
34 "devDependencies": {
35 "browserify": "^13.0.0",
36 "chai": "^3.5.0",
37 "karma": "^1.3.0",
38 "karma-browserify": "^5.0.1",
39 "karma-chai": "^0.1.0",
40 "karma-mocha": "^1.2.0",
41 "karma-phantomjs-launcher": "^1.0.0",
42 "karma-sinon": "^1.0.4",
43 "mocha": "^3.1.2",
44 "phantomjs-polyfill": "0.0.2",
45 "phantomjs-prebuilt": "^2.1.3",
46 "simulant": "^0.2.2",
47 "sinon": "^1.17.3",
48 "watchify": "^3.7.0"
49 },
50 "homepage": "https://github.com/zenorocha/good-listener#readme",
51 "keywords": [
52 "event",
53 "listener"
54 ],
55 "license": "MIT",
56 "main": "src/listen.js",
57 "name": "good-listener",
58 "repository": {
59 "type": "git",
60 "url": "git+https://github.com/zenorocha/good-listener.git"
61 },
62 "scripts": {
63 "build": "browserify src/listen.js -s listen -o dist/good-listener.js",
64 "test": "karma start --single-run"
65 },
66 "version": "1.2.2"
67 }
1 # good-listener
2
3 [![Build Status](http://img.shields.io/travis/zenorocha/good-listener/master.svg?style=flat)](https://travis-ci.org/zenorocha/good-listener)
4
5 > A more versatile way of adding & removing event listeners.
6
7 ![good listener](https://cloud.githubusercontent.com/assets/398893/10718224/dfc25f6c-7b2a-11e5-9d3d-75b35e8603c8.jpg)
8
9 ## Install
10
11 You can get it on npm.
12
13 ```
14 npm install good-listener --save
15 ```
16
17 Or bower, too.
18
19 ```
20 bower install good-listener --save
21 ```
22
23 If you're not into package management, just [download a ZIP](https://github.com/zenorocha/good-listener/archive/master.zip) file.
24
25 ## Setup
26
27 ###### Node (Browserify)
28
29 ```js
30 var listen = require('good-listener');
31 ```
32
33 ###### Browser (Standalone)
34
35 ```html
36 <script src="dist/good-listener.js"></script>
37 ```
38
39 ## Usage
40
41 ### Add an event listener
42
43 By passing a string selector [(see full demo)](https://github.com/zenorocha/good-listener/blob/master/demo/selector.html).
44
45 ```js
46 listen('.btn', 'click', function(e) {
47 console.log(e);
48 });
49 ```
50
51 Or by passing a HTML element [(see full demo)](https://github.com/zenorocha/good-listener/blob/master/demo/node.html).
52
53 ```js
54 var logo = document.getElementById('logo');
55
56 listen(logo, 'click', function(e) {
57 console.log(e);
58 });
59 ```
60
61 Or by passing a list of HTML elements [(see full demo)](https://github.com/zenorocha/good-listener/blob/master/demo/nodelist.html).
62
63 ```js
64 var anchors = document.querySelectorAll('a');
65
66 listen(anchors, 'click', function(e) {
67 console.log(e);
68 });
69 ```
70
71 ### Remove an event listener
72
73 By calling the `destroy` function that returned from previous operation [(see full demo)](https://github.com/zenorocha/good-listener/blob/master/demo/destroy.html).
74
75 ```js
76 var listener = listen('.btn', 'click', function(e) {
77 console.log(e);
78 });
79
80 listener.destroy();
81 ```
82
83 ## Browser Support
84
85 | <img src="https://clipboardjs.com/assets/images/chrome.png" width="48px" height="48px" alt="Chrome logo"> | <img src="https://clipboardjs.com/assets/images/edge.png" width="48px" height="48px" alt="Edge logo"> | <img src="https://clipboardjs.com/assets/images/firefox.png" width="48px" height="48px" alt="Firefox logo"> | <img src="https://clipboardjs.com/assets/images/ie.png" width="48px" height="48px" alt="Internet Explorer logo"> | <img src="https://clipboardjs.com/assets/images/opera.png" width="48px" height="48px" alt="Opera logo"> | <img src="https://clipboardjs.com/assets/images/safari.png" width="48px" height="48px" alt="Safari logo"> |
86 |:---:|:---:|:---:|:---:|:---:|:---:|
87 | Latest ✔ | Latest ✔ | Latest ✔ | 9+ ✔ | Latest ✔ | Latest ✔ |
88
89 ## License
90
91 [MIT License](http://zenorocha.mit-license.org/) © Zeno Rocha
1 /**
2 * Check if argument is a HTML element.
3 *
4 * @param {Object} value
5 * @return {Boolean}
6 */
7 exports.node = function(value) {
8 return value !== undefined
9 && value instanceof HTMLElement
10 && value.nodeType === 1;
11 };
12
13 /**
14 * Check if argument is a list of HTML elements.
15 *
16 * @param {Object} value
17 * @return {Boolean}
18 */
19 exports.nodeList = function(value) {
20 var type = Object.prototype.toString.call(value);
21
22 return value !== undefined
23 && (type === '[object NodeList]' || type === '[object HTMLCollection]')
24 && ('length' in value)
25 && (value.length === 0 || exports.node(value[0]));
26 };
27
28 /**
29 * Check if argument is a string.
30 *
31 * @param {Object} value
32 * @return {Boolean}
33 */
34 exports.string = function(value) {
35 return typeof value === 'string'
36 || value instanceof String;
37 };
38
39 /**
40 * Check if argument is a function.
41 *
42 * @param {Object} value
43 * @return {Boolean}
44 */
45 exports.fn = function(value) {
46 var type = Object.prototype.toString.call(value);
47
48 return type === '[object Function]';
49 };
1 var is = require('./is');
2 var delegate = require('delegate');
3
4 /**
5 * Validates all params and calls the right
6 * listener function based on its target type.
7 *
8 * @param {String|HTMLElement|HTMLCollection|NodeList} target
9 * @param {String} type
10 * @param {Function} callback
11 * @return {Object}
12 */
13 function listen(target, type, callback) {
14 if (!target && !type && !callback) {
15 throw new Error('Missing required arguments');
16 }
17
18 if (!is.string(type)) {
19 throw new TypeError('Second argument must be a String');
20 }
21
22 if (!is.fn(callback)) {
23 throw new TypeError('Third argument must be a Function');
24 }
25
26 if (is.node(target)) {
27 return listenNode(target, type, callback);
28 }
29 else if (is.nodeList(target)) {
30 return listenNodeList(target, type, callback);
31 }
32 else if (is.string(target)) {
33 return listenSelector(target, type, callback);
34 }
35 else {
36 throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList');
37 }
38 }
39
40 /**
41 * Adds an event listener to a HTML element
42 * and returns a remove listener function.
43 *
44 * @param {HTMLElement} node
45 * @param {String} type
46 * @param {Function} callback
47 * @return {Object}
48 */
49 function listenNode(node, type, callback) {
50 node.addEventListener(type, callback);
51
52 return {
53 destroy: function() {
54 node.removeEventListener(type, callback);
55 }
56 }
57 }
58
59 /**
60 * Add an event listener to a list of HTML elements
61 * and returns a remove listener function.
62 *
63 * @param {NodeList|HTMLCollection} nodeList
64 * @param {String} type
65 * @param {Function} callback
66 * @return {Object}
67 */
68 function listenNodeList(nodeList, type, callback) {
69 Array.prototype.forEach.call(nodeList, function(node) {
70 node.addEventListener(type, callback);
71 });
72
73 return {
74 destroy: function() {
75 Array.prototype.forEach.call(nodeList, function(node) {
76 node.removeEventListener(type, callback);
77 });
78 }
79 }
80 }
81
82 /**
83 * Add an event listener to a selector
84 * and returns a remove listener function.
85 *
86 * @param {String} selector
87 * @param {String} type
88 * @param {Function} callback
89 * @return {Object}
90 */
91 function listenSelector(selector, type, callback) {
92 return delegate(document.body, selector, type, callback);
93 }
94
95 module.exports = listen;
1 var is = require('../src/is');
2
3 describe('is', function() {
4 before(function() {
5 global.node = document.createElement('div');
6 global.node.setAttribute('id', 'foo');
7 global.node.setAttribute('class', 'foo');
8 document.body.appendChild(global.node);
9 });
10
11 after(function() {
12 document.body.innerHTML = '';
13 });
14
15 describe('is.node', function() {
16 it('should be considered as node', function() {
17 assert.ok(is.node(document.getElementById('foo')));
18 assert.ok(is.node(document.getElementsByTagName('div')[0]));
19 assert.ok(is.node(document.getElementsByClassName('foo')[0]));
20 assert.ok(is.node(document.querySelector('.foo')));
21 });
22
23 it('should not be considered as node', function() {
24 assert.notOk(is.node(undefined));
25 assert.notOk(is.node(null));
26 assert.notOk(is.node(false));
27 assert.notOk(is.node(true));
28 assert.notOk(is.node(function () {}));
29 assert.notOk(is.node([]));
30 assert.notOk(is.node({}));
31 assert.notOk(is.node(/a/g));
32 assert.notOk(is.node(new RegExp('a', 'g')));
33 assert.notOk(is.node(new Date()));
34 assert.notOk(is.node(42));
35 assert.notOk(is.node(NaN));
36 assert.notOk(is.node(Infinity));
37 assert.notOk(is.node(new Number(42)));
38 });
39 });
40
41 describe('is.nodeList', function() {
42 it('should be considered as nodeList', function() {
43 assert.ok(is.nodeList(document.getElementsByTagName('div')));
44 assert.ok(is.nodeList(document.getElementsByClassName('foo')));
45 assert.ok(is.nodeList(document.querySelectorAll('.foo')));
46 });
47
48 it('should not be considered as nodeList', function() {
49 assert.notOk(is.nodeList(undefined));
50 assert.notOk(is.nodeList(null));
51 assert.notOk(is.nodeList(false));
52 assert.notOk(is.nodeList(true));
53 assert.notOk(is.nodeList(function () {}));
54 assert.notOk(is.nodeList([]));
55 assert.notOk(is.nodeList({}));
56 assert.notOk(is.nodeList(/a/g));
57 assert.notOk(is.nodeList(new RegExp('a', 'g')));
58 assert.notOk(is.nodeList(new Date()));
59 assert.notOk(is.nodeList(42));
60 assert.notOk(is.nodeList(NaN));
61 assert.notOk(is.nodeList(Infinity));
62 assert.notOk(is.nodeList(new Number(42)));
63 });
64 });
65
66 describe('is.string', function() {
67 it('should be considered as string', function() {
68 assert.ok(is.string('abc'));
69 assert.ok(is.string(new String('abc')));
70 });
71
72 it('should not be considered as string', function() {
73 assert.notOk(is.string(undefined));
74 assert.notOk(is.string(null));
75 assert.notOk(is.string(false));
76 assert.notOk(is.string(true));
77 assert.notOk(is.string(function () {}));
78 assert.notOk(is.string([]));
79 assert.notOk(is.string({}));
80 assert.notOk(is.string(/a/g));
81 assert.notOk(is.string(new RegExp('a', 'g')));
82 assert.notOk(is.string(new Date()));
83 assert.notOk(is.string(42));
84 assert.notOk(is.string(NaN));
85 assert.notOk(is.string(Infinity));
86 assert.notOk(is.string(new Number(42)));
87 });
88 });
89
90 describe('is.fn', function() {
91 it('should be considered as function', function() {
92 assert.ok(is.fn(function () {}));
93 });
94
95 it('should not be considered as function', function() {
96 assert.notOk(is.fn(undefined));
97 assert.notOk(is.fn(null));
98 assert.notOk(is.fn(false));
99 assert.notOk(is.fn(true));
100 assert.notOk(is.fn([]));
101 assert.notOk(is.fn({}));
102 assert.notOk(is.fn(/a/g));
103 assert.notOk(is.fn(new RegExp('a', 'g')));
104 assert.notOk(is.fn(new Date()));
105 assert.notOk(is.fn(42));
106 assert.notOk(is.fn(NaN));
107 assert.notOk(is.fn(Infinity));
108 assert.notOk(is.fn(new Number(42)));
109 });
110 });
111 });
1 var listen = require('../src/listen');
2 var simulant = require('simulant');
3
4 describe('good-listener', function() {
5 before(function() {
6 global.node = document.createElement('div');
7 global.node.setAttribute('id', 'foo');
8 global.node.setAttribute('class', 'foo');
9 document.body.appendChild(global.node);
10 });
11
12 after(function() {
13 document.body.innerHTML = '';
14 });
15
16 describe('listen', function() {
17 it('should throw an error since arguments were not passed', function(done) {
18 try {
19 listen();
20 }
21 catch(error) {
22 assert.equal(error.message, 'Missing required arguments');
23 done();
24 }
25 });
26
27 it('should throw an error since "target" was invalid', function(done) {
28 try {
29 listen(null, 'click', function() {});
30 }
31 catch(error) {
32 assert.equal(error.message, 'First argument must be a String, HTMLElement, HTMLCollection, or NodeList');
33 done();
34 }
35 });
36
37 it('should throw an error since "type" was invalid', function(done) {
38 try {
39 listen('.btn', false, function() {});
40 }
41 catch(error) {
42 assert.equal(error.message, 'Second argument must be a String');
43 done();
44 }
45 });
46
47 it('should throw an error since "callback" was invalid', function(done) {
48 try {
49 listen('.btn', 'click', []);
50 }
51 catch(error) {
52 assert.equal(error.message, 'Third argument must be a Function');
53 done();
54 }
55 });
56 });
57
58 describe('listenNode', function() {
59 before(function() {
60 global.target = document.querySelector('#foo');
61 global.spy = sinon.spy(global.target, 'removeEventListener');
62 });
63
64 after(function() {
65 global.spy.restore();
66 });
67
68 it('should add an event listener', function(done) {
69 listen(global.target, 'click', function() {
70 done();
71 });
72
73 simulant.fire(global.target, simulant('click'));
74 });
75
76 it('should remove an event listener', function() {
77 var listener = listen(global.target, 'click', function() {});
78
79 listener.destroy();
80 assert.ok(global.spy.calledOnce);
81 });
82 });
83
84 describe('listenNodeList', function() {
85 before(function() {
86 global.targets = document.querySelectorAll('.foo');
87 global.spy = sinon.spy(global.targets[0], 'removeEventListener');
88 });
89
90 after(function() {
91 global.spy.restore();
92 });
93
94 it('should add an event listener', function(done) {
95 listen(global.targets, 'click', function() {
96 done();
97 });
98
99 simulant.fire(global.targets[0], simulant('click'));
100 });
101
102 it('should remove an event listener', function() {
103 var listener = listen(global.targets, 'click', function() {});
104
105 listener.destroy();
106 assert.ok(global.spy.calledOnce);
107 });
108 });
109
110 describe('listenSelector', function() {
111 before(function() {
112 global.target = document.querySelector('.foo');
113 global.spy = sinon.spy(document.body, 'removeEventListener');
114 });
115
116 after(function() {
117 global.spy.restore();
118 });
119
120 it('should add an event listener', function(done) {
121 listen('.foo', 'click', function() {
122 done();
123 });
124
125 simulant.fire(global.target, simulant('click'));
126 });
127
128 it('should remove an event listener', function() {
129 var listener = listen('.foo', 'click', function() {});
130
131 listener.destroy();
132 assert.ok(global.spy.calledOnce);
133 });
134 });
135 });
1 # EditorConfig helps developers define and maintain consistent
2 # coding styles between different editors and IDEs
3 # http://editorconfig.org
4
5 root = true
6
7 [*]
8 # Change these settings to your own preference
9 indent_style = space
10 indent_size = 4
11
12 # We recommend you to keep these unchanged
13 end_of_line = lf
14 charset = utf-8
15 trim_trailing_whitespace = true
16 insert_final_newline = true
17
18 [*.md]
19 trim_trailing_whitespace = false
20
21 [{package.json,bower.json}]
22 indent_size = 2
1 node_modules
...\ No newline at end of file ...\ No newline at end of file
1 language: node_js
2 node_js:
3 - stable
1 {
2 "name": "select",
3 "version": "1.1.0",
4 "description": "Programmatically select the text of a HTML element",
5 "license": "MIT",
6 "main": "dist/select.js",
7 "keywords": [
8 "range",
9 "select",
10 "selecting",
11 "selection"
12 ]
13 }
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>contenteditable</title>
6 </head>
7 <body>
8 <!-- 1. Define some markup -->
9 <button type="button">Select</button>
10 <p contenteditable>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio totam adipisci, saepe ad vero dignissimos laborum non eum eveniet aperiam, consequuntur repellendus architecto inventore iusto blanditiis quasi commodi voluptatum vitae!</p>
11
12 <!-- 2. Include library -->
13 <script src="../dist/select.js"></script>
14
15 <!-- 3. Select! -->
16 <script>
17 var p = document.querySelector('p');
18 var button = document.querySelector('button');
19
20 button.addEventListener('click', function(e) {
21 var selected = select(p);
22 console.log(selected);
23 });
24 </script>
25 </body>
26 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>dropdown</title>
6 </head>
7 <body>
8 <!-- 1. Define some markup -->
9 <button type="button">Select</button>
10 <select>
11 <option>Option 1</option>
12 <option selected>Option 2</option>
13 <option>Option 3</option>
14 </select>
15
16 <!-- 2. Include library -->
17 <script src="../dist/select.js"></script>
18
19 <!-- 3. Select! -->
20 <script>
21 var dropdown = document.querySelector('select');
22 var button = document.querySelector('button');
23
24 button.addEventListener('click', function(e) {
25 var selected = select(dropdown);
26 console.log(selected);
27 });
28 </script>
29 </body>
30 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>editable</title>
6 </head>
7 <body>
8 <!-- 1. Define some markup -->
9 <button type="button">Select</button>
10 <input type="text" value="Lorem ipsum">
11
12 <!-- 2. Include library -->
13 <script src="../dist/select.js"></script>
14
15 <!-- 3. Select! -->
16 <script>
17 var input = document.querySelector('input');
18 var button = document.querySelector('button');
19
20 button.addEventListener('click', function(e) {
21 var selected = select(input);
22 console.log(selected);
23 });
24 </script>
25 </body>
26 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>multiple</title>
6 </head>
7 <body>
8 <!-- 1. Define some markup -->
9 <button type="button">Select</button>
10 <input type="text" value="Lorem ipsum">
11 <textarea>Lorem ipsum</textarea>
12
13 <!-- 2. Include library -->
14 <script src="../dist/select.js"></script>
15
16 <!-- 3. Select! -->
17 <script>
18 var input = document.querySelector('input');
19 var textarea = document.querySelector('textarea');
20 var button = document.querySelector('button');
21
22 button.addEventListener('click', function(e) {
23 console.log(select(input));
24 console.log(select(textarea));
25 });
26 </script>
27 </body>
28 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>non-editable</title>
6 </head>
7 <body>
8 <!-- 1. Define some markup -->
9 <button type="button">Select</button>
10 <div>
11 <p>Item 1</p>
12 <p>Item 2</p>
13 <ul>
14 <li>Item 3</li>
15 <li>Item 4</li>
16 <li>Item 5</li>
17 </ul>
18 </div>
19
20 <!-- 2. Include library -->
21 <script src="../dist/select.js"></script>
22
23 <!-- 3. Select! -->
24 <script>
25 var div = document.querySelector('div');
26 var button = document.querySelector('button');
27
28 button.addEventListener('click', function(e) {
29 var selected = select(div);
30 console.log(selected);
31 });
32 </script>
33 </body>
34 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>non-editable</title>
6 </head>
7 <body>
8 <!-- 1. Define some markup -->
9 <button type="button">Select</button>
10 <p>Lorem ipsum</p>
11
12 <!-- 2. Include library -->
13 <script src="../dist/select.js"></script>
14
15 <!-- 3. Select! -->
16 <script>
17 var p = document.querySelector('p');
18 var button = document.querySelector('button');
19
20 button.addEventListener('click', function(e) {
21 var selected = select(p);
22 console.log(selected);
23 });
24 </script>
25 </body>
26 </html>
1 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.select = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
2 function select(element) {
3 var selectedText;
4
5 if (element.nodeName === 'SELECT') {
6 element.focus();
7
8 selectedText = element.value;
9 }
10 else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
11 var isReadOnly = element.hasAttribute('readonly');
12
13 if (!isReadOnly) {
14 element.setAttribute('readonly', '');
15 }
16
17 element.select();
18 element.setSelectionRange(0, element.value.length);
19
20 if (!isReadOnly) {
21 element.removeAttribute('readonly');
22 }
23
24 selectedText = element.value;
25 }
26 else {
27 if (element.hasAttribute('contenteditable')) {
28 element.focus();
29 }
30
31 var selection = window.getSelection();
32 var range = document.createRange();
33
34 range.selectNodeContents(element);
35 selection.removeAllRanges();
36 selection.addRange(range);
37
38 selectedText = selection.toString();
39 }
40
41 return selectedText;
42 }
43
44 module.exports = select;
45
46 },{}]},{},[1])(1)
47 });
...\ No newline at end of file ...\ No newline at end of file
1 module.exports = function(karma) {
2 karma.set({
3 plugins: ['karma-browserify', 'karma-chai', 'karma-mocha', 'karma-phantomjs-launcher'],
4
5 frameworks: ['browserify', 'chai', 'mocha'],
6
7 files: [
8 'src/**/*.js',
9 'test/**/*.js'
10 ],
11
12 preprocessors: {
13 'src/**/*.js' : ['browserify'],
14 'test/**/*.js': ['browserify']
15 },
16
17 browserify: {
18 debug: true
19 },
20
21 browsers: ['PhantomJS']
22 });
23 }
1 {
2 "_from": "select@^1.1.2",
3 "_id": "select@1.1.2",
4 "_inBundle": false,
5 "_integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
6 "_location": "/select",
7 "_phantomChildren": {},
8 "_requested": {
9 "type": "range",
10 "registry": true,
11 "raw": "select@^1.1.2",
12 "name": "select",
13 "escapedName": "select",
14 "rawSpec": "^1.1.2",
15 "saveSpec": null,
16 "fetchSpec": "^1.1.2"
17 },
18 "_requiredBy": [
19 "/clipboard"
20 ],
21 "_resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
22 "_shasum": "0e7350acdec80b1108528786ec1d4418d11b396d",
23 "_spec": "select@^1.1.2",
24 "_where": "/Users/zhanghao/brcode/br-client/node_modules/clipboard",
25 "bugs": {
26 "url": "https://github.com/zenorocha/select/issues"
27 },
28 "bundleDependencies": false,
29 "deprecated": false,
30 "description": "Programmatically select the text of a HTML element",
31 "devDependencies": {
32 "browserify": "^14.0.0",
33 "chai": "^3.3.0",
34 "karma": "^1.4.1",
35 "karma-browserify": "^5.1.1",
36 "karma-chai": "^0.1.0",
37 "karma-mocha": "^1.3.0",
38 "karma-phantomjs-launcher": "^1.0.2",
39 "mocha": "^3.2.0",
40 "phantomjs": "^2.1.7"
41 },
42 "homepage": "https://github.com/zenorocha/select#readme",
43 "keywords": [
44 "range",
45 "select",
46 "selecting",
47 "selection"
48 ],
49 "license": "MIT",
50 "main": "src/select.js",
51 "name": "select",
52 "repository": {
53 "type": "git",
54 "url": "git+https://github.com/zenorocha/select.git"
55 },
56 "scripts": {
57 "build": "browserify src/select.js -s select -o dist/select.js",
58 "test": "karma start --single-run"
59 },
60 "version": "1.1.2"
61 }
1 # select
2
3 [![Build Status](http://img.shields.io/travis/zenorocha/select/master.svg?style=flat)](https://travis-ci.org/zenorocha/select)
4
5 Programmatically select the text of a HTML element.
6
7 ## Install
8
9 You can get it on npm.
10
11 ```
12 npm install select --save
13 ```
14
15 Or bower, too.
16
17 ```
18 bower install select --save
19 ```
20
21 If you're not into package management, just [download a ZIP](https://github.com/zenorocha/select/archive/master.zip) file.
22
23 ## Usage
24
25 ### Standalone
26
27 ```html
28 <script src="dist/select.js"></script>
29 ```
30
31 ```js
32 var input = document.querySelector('input');
33 var result = select(input);
34 ```
35
36 ### Browserify
37
38 ```js
39 var select = require('select');
40 ```
41
42 ```js
43 var input = document.querySelector('input');
44 var result = select(input);
45 ```
46
47 ## License
48
49 [MIT License](http://zenorocha.mit-license.org/) © Zeno Rocha
1 function select(element) {
2 var selectedText;
3
4 if (element.nodeName === 'SELECT') {
5 element.focus();
6
7 selectedText = element.value;
8 }
9 else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
10 var isReadOnly = element.hasAttribute('readonly');
11
12 if (!isReadOnly) {
13 element.setAttribute('readonly', '');
14 }
15
16 element.select();
17 element.setSelectionRange(0, element.value.length);
18
19 if (!isReadOnly) {
20 element.removeAttribute('readonly');
21 }
22
23 selectedText = element.value;
24 }
25 else {
26 if (element.hasAttribute('contenteditable')) {
27 element.focus();
28 }
29
30 var selection = window.getSelection();
31 var range = document.createRange();
32
33 range.selectNodeContents(element);
34 selection.removeAllRanges();
35 selection.addRange(range);
36
37 selectedText = selection.toString();
38 }
39
40 return selectedText;
41 }
42
43 module.exports = select;
1 var select = require('../src/select');
2
3 describe('select editable elements', function() {
4 before(function() {
5 global.input = document.createElement('input');
6 global.input.value = 'lorem ipsum';
7
8 global.textarea = document.createElement('textarea');
9 global.textarea.value = 'lorem ipsum';
10
11 document.body.appendChild(global.input);
12 document.body.appendChild(global.textarea);
13 });
14
15 after(function() {
16 document.body.innerHTML = '';
17 });
18
19 it('should return the selected text on input', function() {
20 var result = select(global.input);
21 assert.equal(result, global.input.value);
22 });
23
24 it('should return the selected text on textarea', function() {
25 var result = select(global.textarea);
26 assert.equal(result, global.textarea.value);
27 });
28 });
29
30 describe('select non-editable element with no children', function() {
31 before(function() {
32 global.paragraph = document.createElement('p');
33 global.paragraph.textContent = 'lorem ipsum';
34
35 document.body.appendChild(global.paragraph);
36 });
37
38 after(function() {
39 document.body.innerHTML = '';
40 });
41
42 it('should return the selected text', function() {
43 var result = select(global.paragraph);
44 assert.equal(result, global.paragraph.textContent);
45 });
46 });
47
48 describe('select non-editable element with child node', function() {
49 before(function() {
50 global.li = document.createElement('li');
51 global.li.textContent = 'lorem ipsum';
52
53 global.ul = document.createElement('ul');
54 global.ul.appendChild(global.li);
55
56 document.body.appendChild(global.ul);
57 });
58
59 after(function() {
60 document.body.innerHTML = '';
61 });
62
63 it('should return the selected text', function() {
64 var result = select(global.ul);
65 assert.equal(result, global.ul.textContent);
66 });
67 });
68
69 describe('select non-editable svg element w/ multiple text children', function() {
70 before(function() {
71 global.text1 = document.createElement('text');
72 global.text1.textContent = 'lorem ipsum';
73
74 global.text2 = document.createElement('text');
75 global.text2.textContent = 'dolor zet';
76
77 global.svg = document.createElement('svg');
78 global.svg.appendChild(global.text1);
79 global.svg.appendChild(global.text2);
80
81 document.body.appendChild(global.svg);
82 });
83
84 after(function() {
85 document.body.innerHTML = '';
86 });
87
88 it('should return the selected text', function() {
89 var result = select(global.svg);
90 assert.equal(result, global.text1.textContent +
91 global.text2.textContent);
92 });
93 });
1 The MIT License (MIT)
2
3 Copyright (c) 2017 Scott Corgan
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 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,
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 THE
21 SOFTWARE.
22
1 # tiny-emitter
2
3 A tiny (less than 1k) event emitter library.
4
5 ## Install
6
7 ### npm
8
9 ```
10 npm install tiny-emitter --save
11 ```
12
13 ## Usage
14
15 ```js
16 var Emitter = require('tiny-emitter');
17 var emitter = new Emitter();
18
19 emitter.on('some-event', function (arg1, arg2, arg3) {
20 //
21 });
22
23 emitter.emit('some-event', 'arg1 value', 'arg2 value', 'arg3 value');
24 ```
25
26 Alternatively, you can skip the initialization step by requiring `tiny-emitter/instance` instead. This pulls in an already initialized emitter.
27
28 ```js
29 var emitter = require('tiny-emitter/instance');
30
31 emitter.on('some-event', function (arg1, arg2, arg3) {
32 //
33 });
34
35 emitter.emit('some-event', 'arg1 value', 'arg2 value', 'arg3 value');
36 ```
37
38 ## Instance Methods
39
40 ### on(event, callback[, context])
41
42 Subscribe to an event
43
44 * `event` - the name of the event to subscribe to
45 * `callback` - the function to call when event is emitted
46 * `context` - (OPTIONAL) - the context to bind the event callback to
47
48 ### once(event, callback[, context])
49
50 Subscribe to an event only **once**
51
52 * `event` - the name of the event to subscribe to
53 * `callback` - the function to call when event is emitted
54 * `context` - (OPTIONAL) - the context to bind the event callback to
55
56 ### off(event[, callback])
57
58 Unsubscribe from an event or all events. If no callback is provided, it unsubscribes you from all events.
59
60 * `event` - the name of the event to unsubscribe from
61 * `callback` - the function used when binding to the event
62
63 ### emit(event[, arguments...])
64
65 Trigger a named event
66
67 * `event` - the event name to emit
68 * `arguments...` - any number of arguments to pass to the event subscribers
69
70 ## Test and Build
71
72 Build (Tests, Browserifies, and minifies)
73
74 ```
75 npm install
76 npm run build
77 ```
78
79 Test
80
81 ```
82 npm install
83 npm test
84 ```
85
86 ## License
87
88 [MIT](https://github.com/scottcorgan/tiny-emitter/blob/master/LICENSE)
1 (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.TinyEmitter = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
2 function E () {
3 // Keep this empty so it's easier to inherit from
4 // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
5 }
6
7 E.prototype = {
8 on: function (name, callback, ctx) {
9 var e = this.e || (this.e = {});
10
11 (e[name] || (e[name] = [])).push({
12 fn: callback,
13 ctx: ctx
14 });
15
16 return this;
17 },
18
19 once: function (name, callback, ctx) {
20 var self = this;
21 function listener () {
22 self.off(name, listener);
23 callback.apply(ctx, arguments);
24 };
25
26 listener._ = callback
27 return this.on(name, listener, ctx);
28 },
29
30 emit: function (name) {
31 var data = [].slice.call(arguments, 1);
32 var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
33 var i = 0;
34 var len = evtArr.length;
35
36 for (i; i < len; i++) {
37 evtArr[i].fn.apply(evtArr[i].ctx, data);
38 }
39
40 return this;
41 },
42
43 off: function (name, callback) {
44 var e = this.e || (this.e = {});
45 var evts = e[name];
46 var liveEvents = [];
47
48 if (evts && callback) {
49 for (var i = 0, len = evts.length; i < len; i++) {
50 if (evts[i].fn !== callback && evts[i].fn._ !== callback)
51 liveEvents.push(evts[i]);
52 }
53 }
54
55 // Remove event from queue to prevent memory leak
56 // Suggested by https://github.com/lazd
57 // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
58
59 (liveEvents.length)
60 ? e[name] = liveEvents
61 : delete e[name];
62
63 return this;
64 }
65 };
66
67 module.exports = E;
68 module.exports.TinyEmitter = E;
69
70 },{}]},{},[1])(1)
71 });
...\ No newline at end of file ...\ No newline at end of file
1 (function(e){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=e()}else if(typeof define==="function"&&define.amd){define([],e)}else{var n;if(typeof window!=="undefined"){n=window}else if(typeof global!=="undefined"){n=global}else if(typeof self!=="undefined"){n=self}else{n=this}n.TinyEmitter=e()}})(function(){var e,n,t;return function r(e,n,t){function i(o,u){if(!n[o]){if(!e[o]){var s=typeof require=="function"&&require;if(!u&&s)return s(o,!0);if(f)return f(o,!0);var a=new Error("Cannot find module '"+o+"'");throw a.code="MODULE_NOT_FOUND",a}var l=n[o]={exports:{}};e[o][0].call(l.exports,function(n){var t=e[o][1][n];return i(t?t:n)},l,l.exports,r,e,n,t)}return n[o].exports}var f=typeof require=="function"&&require;for(var o=0;o<t.length;o++)i(t[o]);return i}({1:[function(e,n,t){function r(){}r.prototype={on:function(e,n,t){var r=this.e||(this.e={});(r[e]||(r[e]=[])).push({fn:n,ctx:t});return this},once:function(e,n,t){var r=this;function i(){r.off(e,i);n.apply(t,arguments)}i._=n;return this.on(e,i,t)},emit:function(e){var n=[].slice.call(arguments,1);var t=((this.e||(this.e={}))[e]||[]).slice();var r=0;var i=t.length;for(r;r<i;r++){t[r].fn.apply(t[r].ctx,n)}return this},off:function(e,n){var t=this.e||(this.e={});var r=t[e];var i=[];if(r&&n){for(var f=0,o=r.length;f<o;f++){if(r[f].fn!==n&&r[f].fn._!==n)i.push(r[f])}}i.length?t[e]=i:delete t[e];return this}};n.exports=r;n.exports.TinyEmitter=r},{}]},{},[1])(1)});
...\ No newline at end of file ...\ No newline at end of file
1 export declare class TinyEmitter {
2 on(event: string, callback: Function, ctx?: any): this;
3 once(event: string, callback: Function, ctx?: any): this;
4 emit(event: string, ...args: any[]): this;
5 off(event: string, callback?: Function): this;
6 }
...\ No newline at end of file ...\ No newline at end of file
1 function E () {
2 // Keep this empty so it's easier to inherit from
3 // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
4 }
5
6 E.prototype = {
7 on: function (name, callback, ctx) {
8 var e = this.e || (this.e = {});
9
10 (e[name] || (e[name] = [])).push({
11 fn: callback,
12 ctx: ctx
13 });
14
15 return this;
16 },
17
18 once: function (name, callback, ctx) {
19 var self = this;
20 function listener () {
21 self.off(name, listener);
22 callback.apply(ctx, arguments);
23 };
24
25 listener._ = callback
26 return this.on(name, listener, ctx);
27 },
28
29 emit: function (name) {
30 var data = [].slice.call(arguments, 1);
31 var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
32 var i = 0;
33 var len = evtArr.length;
34
35 for (i; i < len; i++) {
36 evtArr[i].fn.apply(evtArr[i].ctx, data);
37 }
38
39 return this;
40 },
41
42 off: function (name, callback) {
43 var e = this.e || (this.e = {});
44 var evts = e[name];
45 var liveEvents = [];
46
47 if (evts && callback) {
48 for (var i = 0, len = evts.length; i < len; i++) {
49 if (evts[i].fn !== callback && evts[i].fn._ !== callback)
50 liveEvents.push(evts[i]);
51 }
52 }
53
54 // Remove event from queue to prevent memory leak
55 // Suggested by https://github.com/lazd
56 // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
57
58 (liveEvents.length)
59 ? e[name] = liveEvents
60 : delete e[name];
61
62 return this;
63 }
64 };
65
66 module.exports = E;
67 module.exports.TinyEmitter = E;
1 var E = require('./index.js');
2 module.exports = new E();
1 {
2 "_from": "tiny-emitter@^2.0.0",
3 "_id": "tiny-emitter@2.1.0",
4 "_inBundle": false,
5 "_integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
6 "_location": "/tiny-emitter",
7 "_phantomChildren": {},
8 "_requested": {
9 "type": "range",
10 "registry": true,
11 "raw": "tiny-emitter@^2.0.0",
12 "name": "tiny-emitter",
13 "escapedName": "tiny-emitter",
14 "rawSpec": "^2.0.0",
15 "saveSpec": null,
16 "fetchSpec": "^2.0.0"
17 },
18 "_requiredBy": [
19 "/clipboard"
20 ],
21 "_resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
22 "_shasum": "1d1a56edfc51c43e863cbb5382a72330e3555423",
23 "_spec": "tiny-emitter@^2.0.0",
24 "_where": "/Users/zhanghao/brcode/br-client/node_modules/clipboard",
25 "author": {
26 "name": "Scott Corgan"
27 },
28 "bugs": {
29 "url": "https://github.com/scottcorgan/tiny-emitter/issues"
30 },
31 "bundleDependencies": false,
32 "deprecated": false,
33 "description": "A tiny (less than 1k) event emitter library",
34 "devDependencies": {
35 "@tap-format/spec": "0.2.0",
36 "browserify": "11.2.0",
37 "tape": "4.2.1",
38 "testling": "1.7.1",
39 "uglify-js": "2.5.0"
40 },
41 "homepage": "https://github.com/scottcorgan/tiny-emitter#readme",
42 "keywords": [
43 "event",
44 "emitter",
45 "pubsub",
46 "tiny",
47 "events",
48 "bind"
49 ],
50 "license": "MIT",
51 "main": "index.js",
52 "name": "tiny-emitter",
53 "repository": {
54 "type": "git",
55 "url": "git+https://github.com/scottcorgan/tiny-emitter.git"
56 },
57 "scripts": {
58 "build": "npm test && npm run bundle && npm run minify",
59 "bundle": "browserify index.js > dist/tinyemitter.js -s TinyEmitter && echo 'Bundled'",
60 "minify": "uglifyjs dist/tinyemitter.js -o dist/tinyemitter.min.js -m && echo 'Minified'",
61 "size": "uglifyjs index.js -o minified.js -m && ls -l && rm minified.js",
62 "test": "testling | tap-format-spec",
63 "test-node": "tape test/index.js | tap-format-spec"
64 },
65 "testling": {
66 "files": [
67 "test/index.js"
68 ],
69 "browsers": [
70 "iexplore/10.0",
71 "iexplore/9.0",
72 "firefox/16..latest",
73 "chrome/22..latest",
74 "safari/5.1..latest",
75 "ipad/6.0..latest",
76 "iphone/6.0..latest",
77 "android-browser/4.2..latest"
78 ]
79 },
80 "version": "2.1.0"
81 }
1 var Emitter = require('../index');
2 var emitter = require('../instance');
3 var test = require('tape');
4
5 test('subscribes to an event', function (t) {
6 var emitter = new Emitter();
7 emitter.on('test', function () {});
8
9 t.equal(emitter.e.test.length, 1, 'subscribed to event');
10 t.end();
11 });
12
13 test('subscribes to an event with context', function (t) {
14 var emitter = new Emitter();
15 var context = {
16 contextValue: true
17 };
18
19 emitter.on('test', function () {
20 t.ok(this.contextValue, 'is in context');
21 t.end();
22 }, context);
23
24 emitter.emit('test');
25 });
26
27 test('subscibes only once to an event', function (t) {
28 var emitter = new Emitter();
29
30 emitter.once('test', function () {
31 t.notOk(emitter.e.test, 'removed event from list');
32 t.end();
33 });
34
35 emitter.emit('test');
36 });
37
38 test('keeps context when subscribed only once', function (t) {
39 var emitter = new Emitter();
40 var context = {
41 contextValue: true
42 };
43
44 emitter.once('test', function () {
45 t.ok(this.contextValue, 'is in context');
46 t.notOk(emitter.e.test, 'not subscribed anymore');
47 t.end();
48 }, context);
49
50 emitter.emit('test');
51 });
52
53 test('emits an event', function (t) {
54 var emitter = new Emitter();
55
56 emitter.on('test', function () {
57 t.ok(true, 'triggered event');
58 t.end();
59 });
60
61 emitter.emit('test');
62 });
63
64 test('passes all arguments to event listener', function (t) {
65 var emitter = new Emitter();
66
67 emitter.on('test', function (arg1, arg2) {
68 t.equal(arg1, 'arg1', 'passed the first argument');
69 t.equal(arg2, 'arg2', 'passed the second argument');
70 t.end();
71 });
72
73 emitter.emit('test', 'arg1', 'arg2');
74 });
75
76 test('unsubscribes from all events with name', function (t) {
77 var emitter = new Emitter();
78 emitter.on('test', function () {
79 t.fail('should not get called');
80 });
81 emitter.off('test');
82 emitter.emit('test')
83
84 process.nextTick(function () {
85 t.end();
86 });
87 });
88
89 test('unsubscribes single event with name and callback', function (t) {
90 var emitter = new Emitter();
91 var fn = function () {
92 t.fail('should not get called');
93 }
94
95 emitter.on('test', fn);
96 emitter.off('test', fn);
97 emitter.emit('test')
98
99 process.nextTick(function () {
100 t.end();
101 });
102 });
103
104 // Test added by https://github.com/lazd
105 // From PR: https://github.com/scottcorgan/tiny-emitter/pull/6
106 test('unsubscribes single event with name and callback when subscribed twice', function (t) {
107 var emitter = new Emitter();
108 var fn = function () {
109 t.fail('should not get called');
110 };
111
112 emitter.on('test', fn);
113 emitter.on('test', fn);
114
115 emitter.off('test', fn);
116 emitter.emit('test');
117
118 process.nextTick(function () {
119 t.notOk(emitter.e['test'], 'removes all events');
120 t.end();
121 });
122 });
123
124 test('unsubscribes single event with name and callback when subscribed twice out of order', function (t) {
125 var emitter = new Emitter();
126 var calls = 0;
127 var fn = function () {
128 t.fail('should not get called');
129 };
130 var fn2 = function () {
131 calls++;
132 };
133
134 emitter.on('test', fn);
135 emitter.on('test', fn2);
136 emitter.on('test', fn);
137 emitter.off('test', fn);
138 emitter.emit('test');
139
140 process.nextTick(function () {
141 t.equal(calls, 1, 'callback was called');
142 t.end();
143 });
144 });
145
146 test('removes an event inside another event', function (t) {
147 var emitter = new Emitter();
148
149 emitter.on('test', function () {
150 t.equal(emitter.e.test.length, 1, 'event is still in list');
151
152 emitter.off('test');
153
154 t.notOk(emitter.e.test, 0, 'event is gone from list');
155 t.end();
156 });
157
158 emitter.emit('test');
159 });
160
161 test('event is emitted even if unsubscribed in the event callback', function (t) {
162 var emitter = new Emitter();
163 var calls = 0;
164 var fn = function () {
165 calls += 1;
166 emitter.off('test', fn);
167 };
168
169 emitter.on('test', fn);
170
171 emitter.on('test', function () {
172 calls += 1;
173 });
174
175 emitter.on('test', function () {
176 calls += 1;
177 });
178
179 process.nextTick(function () {
180 t.equal(calls, 3, 'all callbacks were called');
181 t.end();
182 });
183
184 emitter.emit('test');
185 });
186
187 test('calling off before any events added does nothing', function (t) {
188 var emitter = new Emitter();
189 emitter.off('test', function () {});
190 t.end();
191 });
192
193 test('emitting event that has not been subscribed to yet', function (t) {
194 var emitter = new Emitter();
195
196 emitter.emit('some-event', 'some message');
197 t.end();
198 });
199
200 test('unsubscribes single event with name and callback which was subscribed once', function (t) {
201 var emitter = new Emitter();
202 var fn = function () {
203 t.fail('event not unsubscribed');
204 }
205
206 emitter.once('test', fn);
207 emitter.off('test', fn);
208 emitter.emit('test');
209
210 t.end();
211 });
212
213 test('exports an instance', function (t) {
214 t.ok(emitter, 'exports an instance')
215 t.ok(emitter instanceof Emitter, 'an instance of the Emitter class');
216 t.end();
217 });
1 {
2 "extends": "standard",
3 "env": {
4 "browser": true,
5 "amd": true
6 }
7 }
1 # 0.3.1
2
3 - Add TypeScript type definiation from @vlad-ro
4
5 # 0.3.0
6
7 - Add config option `appendToBody` to support IE
8
9 # 0.2.1
10
11 - Fix VueClipboard.config is undefined
12
13 # 0.2.0
14
15 - Add config option `autoSetContainer`
16
17 # 0.1.1
18
19 - Move vue to peerDependency
20 - Fix links in npmjs page
21
22 # 0.1.0
23
24 Add support for `contianer` option from `clipboard.js` v1.7.0, thanks robmazur
25
26 # 0.0.9
27
28 Upgrade dependency package version
29
30 # 0.0.8
31
32 Change vue dependency version to ^2.0.0
33
34 # 0.0.7
35
36 Add method: this.$copyText
37
38 # 0.0.6
39
40 Add error handler `v-clipboard:error`
41
42 # 0.0.5
43
44 Add success handler `v-clipboard:success`
45
46 # 0.0.3
47
48 Add pre-built version for browser
49
50 # 0.0.1
51
52 First usable version
1 The MIT License (MIT)
2
3 Copyright (c) 2017 Inndy <inndy \dot tw \at gmail \dot com>
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.
...\ No newline at end of file ...\ No newline at end of file
1 # vue-clipboard2
2
3 A simple vuejs 2 binding for clipboard.js
4
5 ## Install
6
7 `npm install --save vue-clipboard2` or use `dist/vue-clipboard.min.js` without webpack
8
9 ## Usage
10
11 For vue-cli user:
12
13 ```javascript
14 import Vue from 'vue'
15 import VueClipboard from 'vue-clipboard2'
16
17 Vue.use(VueClipboard)
18 ```
19
20 For standalone usage:
21
22 ```html
23 <script src="vue.min.js"></script>
24 <!-- must place this line after vue.js -->
25 <script src="dist/vue-clipboard.min.js"></script>
26 ```
27
28 ## I want to copy texts without a specific button!
29
30 Yes, you can do it by using our new method: `this.$copyText`. See
31 [sample2](https://github.com/Inndy/vue-clipboard2/blob/master/samples/sample2.html),
32 where we replace the clipboard directives with a v-on directive.
33
34 Modern browsers have some limitations like that you can't use `window.open` without a user interaction.
35 So there's the same restriction on copying things! Test it before you use it. Make sure you are not
36 using this method inside any async method.
37
38 Before using this feature, read:
39 [this issue](https://github.com/zenorocha/clipboard.js/issues/218) and
40 [this page](https://github.com/zenorocha/clipboard.js/wiki/Known-Limitations) first.
41
42 ## It doesn't work with bootstrap modals
43
44 See [clipboardjs](https://clipboardjs.com/#advanced-usage) document and [this pull request](https://github.com/Inndy/vue-clipboard2/pull/23), `container` option is available like this:
45
46 ```js
47 let container = this.$refs.container
48 this.$copyText("Text to copy", container)
49 ```
50
51 Or you can let `vue-clipboard2` set `container` to current element by doing this:
52
53 ```js
54 import Vue from 'vue'
55 import VueClipboard from 'vue-clipboard2'
56
57 VueClipboard.config.autoSetContainer = true // add this line
58 Vue.use(VueClipboard)
59 ```
60
61 ## Sample
62
63 ```html
64 <div id="app"></div>
65
66 <template id="t">
67 <div class="container">
68 <input type="text" v-model="message">
69 <button type="button"
70 v-clipboard:copy="message"
71 v-clipboard:success="onCopy"
72 v-clipboard:error="onError">Copy!</button>
73 </div>
74 </template>
75
76 <script>
77 new Vue({
78 el: '#app',
79 template: '#t',
80 data: function () {
81 return {
82 message: 'Copy These Text'
83 }
84 },
85 methods: {
86 onCopy: function (e) {
87 alert('You just copied: ' + e.text)
88 },
89 onError: function (e) {
90 alert('Failed to copy texts')
91 }
92 }
93 })
94 </script>
95 ```
96
97 ## Sample 2
98
99 ```html
100 <div id="app"></div>
101
102 <template id="t">
103 <div class="container">
104 <input type="text" v-model="message">
105 <button type="button" @click="doCopy">Copy!</button>
106 </div>
107 </template>
108
109 <script>
110 new Vue({
111 el: '#app',
112 template: '#t',
113 data: function () {
114 return {
115 message: 'Copy These Text'
116 }
117 },
118 methods: {
119 doCopy: function () {
120 this.$copyText(this.message).then(function (e) {
121 alert('Copied')
122 console.log(e)
123 }, function (e) {
124 alert('Can not copy')
125 console.log(e)
126 })
127 }
128 }
129 })
130 </script>
131
132 ```
133
134 You can use [your Vue instance ```vm.$el```](https://vuejs.org/v2/api/#vm-el) to get DOM elements via the usual traversal methods, e.g.:
135
136 ```this.$el.children[1].children[2].textContent```
137
138 This will allow you to access the *rendered* content of your components, rather than the components themselves.
139
140 ### Contribution
141
142 PRs welcome, and issues as well! If you want any feature that we don't have currently,
143 please fire an issue for a feature request.
144
145 ### License
146
147 [MIT License](https://github.com/Inndy/vue-clipboard2/blob/master/LICENSE)
1 var VueClipboard = require('./vue-clipboard.js')
2
3 global.VueClipboard = VueClipboard
4
5 window.Vue && global.Vue.use(VueClipboard)
1 declare module 'vue-clipboard2' {
2 import Vue, { PluginFunction, WatchOptions } from 'vue'
3 module "vue/types/vue" {
4 interface Vue {
5 $clipboardConfig: {
6 autoSetContainer: boolean,
7 appendToBody: boolean
8 }
9 $copyText(text: string, container?: object | HTMLElement): Promise<{
10 action: string,
11 text: string,
12 trigger: String | HTMLElement | HTMLCollection | NodeList,
13 clearSelection: () => void
14 }>
15 }
16 }
17
18 class VueClipboard {
19 static install: PluginFunction<never>
20 static config: {
21 autoSetContainer: boolean
22 appendToBody: boolean
23 }
24 }
25 export default VueClipboard
26 }
1 {
2 "_from": "vue-clipboard2",
3 "_id": "vue-clipboard2@0.3.1",
4 "_inBundle": false,
5 "_integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==",
6 "_location": "/vue-clipboard2",
7 "_phantomChildren": {},
8 "_requested": {
9 "type": "tag",
10 "registry": true,
11 "raw": "vue-clipboard2",
12 "name": "vue-clipboard2",
13 "escapedName": "vue-clipboard2",
14 "rawSpec": "",
15 "saveSpec": null,
16 "fetchSpec": "latest"
17 },
18 "_requiredBy": [
19 "#USER",
20 "/"
21 ],
22 "_resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",
23 "_shasum": "6e551fb7bd384889b28b0da3b12289ed6bca4894",
24 "_spec": "vue-clipboard2",
25 "_where": "/Users/zhanghao/brcode/br-client",
26 "author": {
27 "name": "Inndy"
28 },
29 "bugs": {
30 "url": "https://github.com/Inndy/vue-clipboard2/issues"
31 },
32 "bundleDependencies": false,
33 "dependencies": {
34 "clipboard": "^2.0.0"
35 },
36 "deprecated": false,
37 "description": "A Vuejs2 binding for clipboard.js",
38 "devDependencies": {
39 "browserify": "^16.1.0",
40 "eslint": ">=5.0.0",
41 "eslint-config-standard": "^12.0.0",
42 "eslint-plugin-import": ">=2.13.0",
43 "eslint-plugin-node": ">=7.0.0",
44 "eslint-plugin-promise": ">=4.0.0",
45 "eslint-plugin-standard": ">=4.0.0",
46 "uglify-js": "^3.3.12"
47 },
48 "homepage": "https://github.com/Inndy/vue-clipboard2#readme",
49 "keywords": [
50 "vue",
51 "vue2",
52 "clipboard",
53 "clipboard.js"
54 ],
55 "license": "MIT",
56 "main": "vue-clipboard.js",
57 "name": "vue-clipboard2",
58 "peerDependecies": {
59 "vue": "^2.0.0"
60 },
61 "repository": {
62 "type": "git",
63 "url": "git+https://github.com/Inndy/vue-clipboard2.git"
64 },
65 "scripts": {
66 "build": "$(npm bin)/eslint vue-clipboard.js && $(npm bin)/browserify browserify-me.js -o dist/vue-clipboard.js && $(npm bin)/uglifyjs dist/vue-clipboard.js -o dist/vue-clipboard.min.js && echo Success"
67 },
68 "version": "0.3.1"
69 }
1 var Clipboard = require('clipboard/dist/clipboard.min.js') // FIXME: workaround for browserify
2
3 var VueClipboardConfig = {
4 autoSetContainer: false,
5 appendToBody: true // This fixes IE, see #50
6 }
7
8 var VueClipboard = {
9 install: function (Vue) {
10 Vue.prototype.$clipboardConfig = VueClipboardConfig
11 Vue.prototype.$copyText = function (text, container) {
12 return new Promise(function (resolve, reject) {
13 var fakeElement = document.createElement('button')
14 var clipboard = new Clipboard(fakeElement, {
15 text: function () { return text },
16 action: function () { return 'copy' },
17 container: typeof container === 'object' ? container : document.body
18 })
19 clipboard.on('success', function (e) {
20 clipboard.destroy()
21 resolve(e)
22 })
23 clipboard.on('error', function (e) {
24 clipboard.destroy()
25 reject(e)
26 })
27 if (VueClipboardConfig.appendToBody) document.body.appendChild(fakeElement)
28 fakeElement.click()
29 if (VueClipboardConfig.appendToBody) document.body.removeChild(fakeElement)
30 })
31 }
32
33 Vue.directive('clipboard', {
34 bind: function (el, binding, vnode) {
35 if (binding.arg === 'success') {
36 el._vClipboard_success = binding.value
37 } else if (binding.arg === 'error') {
38 el._vClipboard_error = binding.value
39 } else {
40 var clipboard = new Clipboard(el, {
41 text: function () { return binding.value },
42 action: function () { return binding.arg === 'cut' ? 'cut' : 'copy' },
43 container: VueClipboardConfig.autoSetContainer ? el : undefined
44 })
45 clipboard.on('success', function (e) {
46 var callback = el._vClipboard_success
47 callback && callback(e)
48 })
49 clipboard.on('error', function (e) {
50 var callback = el._vClipboard_error
51 callback && callback(e)
52 })
53 el._vClipboard = clipboard
54 }
55 },
56 update: function (el, binding) {
57 if (binding.arg === 'success') {
58 el._vClipboard_success = binding.value
59 } else if (binding.arg === 'error') {
60 el._vClipboard_error = binding.value
61 } else {
62 el._vClipboard.text = function () { return binding.value }
63 el._vClipboard.action = function () { return binding.arg === 'cut' ? 'cut' : 'copy' }
64 }
65 },
66 unbind: function (el, binding) {
67 if (binding.arg === 'success') {
68 delete el._vClipboard_success
69 } else if (binding.arg === 'error') {
70 delete el._vClipboard_error
71 } else {
72 el._vClipboard.destroy()
73 delete el._vClipboard
74 }
75 }
76 })
77 },
78 config: VueClipboardConfig
79 }
80
81 if (typeof exports === 'object') {
82 module.exports = VueClipboard
83 } else if (typeof define === 'function' && define.amd) {
84 define([], function () {
85 return VueClipboard
86 })
87 }
...@@ -1759,6 +1759,16 @@ ...@@ -1759,6 +1759,16 @@
1759 "integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==", 1759 "integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==",
1760 "dev": true 1760 "dev": true
1761 }, 1761 },
1762 "clipboard": {
1763 "version": "2.0.6",
1764 "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
1765 "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
1766 "requires": {
1767 "good-listener": "^1.2.2",
1768 "select": "^1.1.2",
1769 "tiny-emitter": "^2.0.0"
1770 }
1771 },
1762 "cliui": { 1772 "cliui": {
1763 "version": "2.1.0", 1773 "version": "2.1.0",
1764 "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz", 1774 "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
...@@ -3251,6 +3261,11 @@ ...@@ -3251,6 +3261,11 @@
3251 } 3261 }
3252 } 3262 }
3253 }, 3263 },
3264 "delegate": {
3265 "version": "3.2.0",
3266 "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
3267 "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
3268 },
3254 "depd": { 3269 "depd": {
3255 "version": "1.1.2", 3270 "version": "1.1.2",
3256 "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", 3271 "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
...@@ -4306,6 +4321,14 @@ ...@@ -4306,6 +4321,14 @@
4306 "slash": "^1.0.0" 4321 "slash": "^1.0.0"
4307 } 4322 }
4308 }, 4323 },
4324 "good-listener": {
4325 "version": "1.2.2",
4326 "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
4327 "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
4328 "requires": {
4329 "delegate": "^3.1.2"
4330 }
4331 },
4309 "graceful-fs": { 4332 "graceful-fs": {
4310 "version": "4.2.4", 4333 "version": "4.2.4",
4311 "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz", 4334 "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
...@@ -9403,6 +9426,11 @@ ...@@ -9403,6 +9426,11 @@
9403 "ajv": "^5.0.0" 9426 "ajv": "^5.0.0"
9404 } 9427 }
9405 }, 9428 },
9429 "select": {
9430 "version": "1.1.2",
9431 "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
9432 "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
9433 },
9406 "select-hose": { 9434 "select-hose": {
9407 "version": "2.0.0", 9435 "version": "2.0.0",
9408 "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", 9436 "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
...@@ -10250,6 +10278,11 @@ ...@@ -10250,6 +10278,11 @@
10250 "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", 10278 "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
10251 "dev": true 10279 "dev": true
10252 }, 10280 },
10281 "tiny-emitter": {
10282 "version": "2.1.0",
10283 "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
10284 "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
10285 },
10253 "to-arraybuffer": { 10286 "to-arraybuffer": {
10254 "version": "1.0.1", 10287 "version": "1.0.1",
10255 "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz", 10288 "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
...@@ -10703,6 +10736,14 @@ ...@@ -10703,6 +10736,14 @@
10703 "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz", 10736 "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
10704 "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==" 10737 "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
10705 }, 10738 },
10739 "vue-clipboard2": {
10740 "version": "0.3.1",
10741 "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",
10742 "integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==",
10743 "requires": {
10744 "clipboard": "^2.0.0"
10745 }
10746 },
10706 "vue-hot-reload-api": { 10747 "vue-hot-reload-api": {
10707 "version": "2.3.4", 10748 "version": "2.3.4",
10708 "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz", 10749 "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
......
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
14 "element-ui": "^2.13.2", 14 "element-ui": "^2.13.2",
15 "qs": "^6.9.4", 15 "qs": "^6.9.4",
16 "vue": "^2.5.2", 16 "vue": "^2.5.2",
17 "vue-clipboard2": "^0.3.1",
17 "vue-router": "^3.0.1" 18 "vue-router": "^3.0.1"
18 }, 19 },
19 "devDependencies": { 20 "devDependencies": {
......
...@@ -7,6 +7,7 @@ import axios from 'axios' ...@@ -7,6 +7,7 @@ import axios from 'axios'
7 import Element from 'element-ui'; 7 import Element from 'element-ui';
8 import 'element-ui/lib/theme-chalk/index.css'; 8 import 'element-ui/lib/theme-chalk/index.css';
9 import qs from 'qs' 9 import qs from 'qs'
10 import vueClipboard from 'vue-clipboard2'
10 11
11 Vue.config.productionTip = false 12 Vue.config.productionTip = false
12 Vue.prototype.$http = axios 13 Vue.prototype.$http = axios
...@@ -15,6 +16,7 @@ axios.defaults.baseURL = 'http://192.168.8.216:9090' ...@@ -15,6 +16,7 @@ axios.defaults.baseURL = 'http://192.168.8.216:9090'
15 // axios.defaults.baseURL = 'http://127.0.0.1:9090' 16 // axios.defaults.baseURL = 'http://127.0.0.1:9090'
16 17
17 Vue.use(Element, { size: 'small', zIndex: 3000 }); 18 Vue.use(Element, { size: 'small', zIndex: 3000 });
19 Vue.use(vueClipboard);
18 20
19 router.beforeEach((to, from, next) => { 21 router.beforeEach((to, from, next) => {
20 if (to.meta.title) { 22 if (to.meta.title) {
......
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
56 width="30%"> 56 width="30%">
57 <span>{{mybizdata}}</span> 57 <span>{{mybizdata}}</span>
58 <span slot="footer" class="dialog-footer"> 58 <span slot="footer" class="dialog-footer">
59 <el-button type="primary" @click="dialogVisible = false">确 定</el-button> 59 <el-button type="primary" v-clipboard:copy="JSON.stringify(mybizdata)" v-clipboard:success="onCopy" @click="dialogVisible = false">点击复制</el-button>
60 </span> 60 </span>
61 </el-dialog> 61 </el-dialog>
62 </el-col> 62 </el-col>
...@@ -112,6 +112,57 @@ ...@@ -112,6 +112,57 @@
112 </el-form> 112 </el-form>
113 </el-col> 113 </el-col>
114 <el-col :span="8"> 114 <el-col :span="8">
115 <el-form ref="createUserInfo" :model="createUserInfo" label-width="0px">
116 <el-card class="CadetBlue" shadow="always">
117 <div slot="header" class="clearfix">
118 <span>创建指定代理人的健康坊用户</span>
119 </div>
120 <div class="text item">
121 <el-form-item>
122 <el-input placeholder="代理人手机号" v-model="createUserInfo.agentPhone" clearable></el-input>
123 </el-form-item>
124 <div style="margin: 15px 0;"></div>
125 <el-form-item>
126 <el-input placeholder="该代理人名下的健康坊用户手机号" v-model="createUserInfo.phone" clearable></el-input>
127 </el-form-item>
128 <div style="margin: 15px 0;"></div>
129 <el-form-item>
130 <el-button round @click="createUserInfoSubmit">创建用户</el-button>
131 </el-form-item>
132 </div>
133 </el-card>
134 </el-form>
135 </el-col>
136 <el-col :span="8">
137 <el-form ref="createUserInfo" :model="queryUserInfo" label-width="0px">
138 <el-card class="LightPink" shadow="always">
139 <div slot="header" class="clearfix">
140 <span>查询指定代理人的健康坊用户</span>
141 </div>
142 <div class="text item">
143 <el-form-item>
144 <el-input placeholder="代理人手机号" v-model="queryUserInfo.agentPhone" clearable></el-input>
145 </el-form-item>
146 <div style="margin: 15px 0;"></div>
147 <el-form-item>
148 <el-button round @click="queryUserInfoSubmit">查询用户</el-button>
149 </el-form-item>
150 </div>
151 </el-card>
152 </el-form>
153 <el-dialog
154 title="健康坊用户："
155 :visible.sync="dialogQueryUserInfo"
156 width="30%">
157 <span>{{myQueryUserInfo}}</span>
158 <span slot="footer" class="dialog-footer">
159 <el-button type="primary" v-clipboard:copy="JSON.stringify(myQueryUserInfo)" v-clipboard:success="onCopy" @click="dialogQueryUserInfo = false">点击复制</el-button>
160 </span>
161 </el-dialog>
162 </el-col>
163 </el-row>
164 <el-row style="margin-bottom: 15px;">
165 <el-col :span="8">
115 <el-form ref="createCluesYoubaoe" :model="createCluesYoubaoe" label-width="0px"> 166 <el-form ref="createCluesYoubaoe" :model="createCluesYoubaoe" label-width="0px">
116 <el-card class="aquamarine" shadow="always"> 167 <el-card class="aquamarine" shadow="always">
117 <div slot="header" class="clearfix"> 168 <div slot="header" class="clearfix">
...@@ -138,7 +189,7 @@ ...@@ -138,7 +189,7 @@
138 </el-col> 189 </el-col>
139 <el-col :span="8"> 190 <el-col :span="8">
140 <el-form ref="createAPI" :model="createAPI" label-width="0px"> 191 <el-form ref="createAPI" :model="createAPI" label-width="0px">
141 <el-card class="CadetBlue" shadow="always"> 192 <el-card class="LightSalmon" shadow="always">
142 <div slot="header" class="clearfix"> 193 <div slot="header" class="clearfix">
143 <span>生成接口请求参数</span> 194 <span>生成接口请求参数</span>
144 </div> 195 </div>
...@@ -178,32 +229,10 @@ ...@@ -178,32 +229,10 @@
178 width="30%"> 229 width="30%">
179 <span>{{myApi}}</span> 230 <span>{{myApi}}</span>
180 <span slot="footer" class="dialog-footer"> 231 <span slot="footer" class="dialog-footer">
181 <el-button type="primary" @click="dialogCreateApi = false">确 定</el-button> 232 <el-button type="primary" v-clipboard:copy="JSON.stringify(myApi)" v-clipboard:success="onCopy" @click="dialogCreateApi = false">点击复制</el-button>
182 </span> 233 </span>
183 </el-dialog> 234 </el-dialog>
184 </el-col> 235 </el-col>
185 <!-- <el-col :span="8">-->
186 <!-- <el-form ref="createUserInfo" :model="createUserInfo" label-width="0px">-->
187 <!-- <el-card class="CadetBlue" shadow="always">-->
188 <!-- <div slot="header" class="clearfix">-->
189 <!-- <span>创建指定代理人的健康坊用户</span>-->
190 <!-- </div>-->
191 <!-- <div class="text item">-->
192 <!-- <el-form-item>-->
193 <!-- <el-input placeholder="代理人手机号" v-model="createUserInfo.phone" clearable></el-input>-->
194 <!-- </el-form-item>-->
195 <!-- <div style="margin: 15px 0;"></div>-->
196 <!-- <el-form-item>-->
197 <!-- <el-input placeholder="该代理人名下的健康坊用户手机号" v-model="createUserInfo.agentPhone" clearable></el-input>-->
198 <!-- </el-form-item>-->
199 <!-- <div style="margin: 15px 0;"></div>-->
200 <!-- <el-form-item>-->
201 <!-- <el-button round @click="">创建用户</el-button>-->
202 <!-- </el-form-item>-->
203 <!-- </div>-->
204 <!-- </el-card>-->
205 <!-- </el-form>-->
206 <!-- </el-col>-->
207 </el-row> 236 </el-row>
208 </div> 237 </div>
209 </template> 238 </template>
...@@ -260,6 +289,16 @@ ...@@ -260,6 +289,16 @@
260 padding: 0px; 289 padding: 0px;
261 background-color: CadetBlue; 290 background-color: CadetBlue;
262 } 291 }
292 .LightPink {
293 width: calc(100% - 20px);
294 padding: 0px;
295 background-color: LightPink;
296 }
297 .LightSalmon {
298 width: calc(100% - 20px);
299 padding: 0px;
300 background-color: LightSalmon;
301 }
263 </style> 302 </style>
264 303
265 <script> 304 <script>
...@@ -307,6 +346,9 @@ ...@@ -307,6 +346,9 @@
307 phone: '', 346 phone: '',
308 agentPhone: '' 347 agentPhone: ''
309 }, 348 },
349 queryUserInfo: {
350 agentPhone: ''
351 },
310 createAPI: { 352 createAPI: {
311 method: '', 353 method: '',
312 biz_data: '', 354 biz_data: '',
...@@ -322,7 +364,9 @@ ...@@ -322,7 +364,9 @@
322 label: '线上环境' 364 label: '线上环境'
323 }], 365 }],
324 dialogCreateApi: false, 366 dialogCreateApi: false,
325 myApi: '' 367 myApi: '',
368 dialogQueryUserInfo: false,
369 myQueryUserInfo: ''
326 // activityConfigRules: { 370 // activityConfigRules: {
327 // id: [ 371 // id: [
328 // { required: true, message: '请输入活动ID', trigger: 'blur' } 372 // { required: true, message: '请输入活动ID', trigger: 'blur' }
...@@ -331,6 +375,13 @@ ...@@ -331,6 +375,13 @@
331 } 375 }
332 }, 376 },
333 methods: { 377 methods: {
378 onCopy (e) {
379 this.$message({
380 showClose: true,
381 message: '内容已复制到剪切板！',
382 type: 'success'
383 });
384 },
334 onSubmit() { 385 onSubmit() {
335 let config = { 386 let config = {
336 headers: { 387 headers: {
...@@ -492,6 +543,74 @@ ...@@ -492,6 +543,74 @@
492 type: 'error' 543 type: 'error'
493 }); 544 });
494 }) 545 })
546 },
547 createUserInfoSubmit() {
548 let config = {
549 headers: {
550 'Content-Type': 'application/x-www-form-urlencoded'
551 }
552 }
553 this.$http.get('/tool/createUser?'+this.$qs.stringify({
554 phone: this.createUserInfo.phone,
555 agent_phone: this.createUserInfo.agentPhone
556 }),config).then((res)=>{
557 console.log(res);
558 if(res.data=='agentnull') {
559 this.$message({
560 showClose: true,
561 message: '代理人手机号不存在',
562 type: 'error'
563 });
564 } else if(res.data=='usermore') {
565 this.$message({
566 showClose: true,
567 message: '该用户手机号已存在，请更换手机号',
568 type: 'error'
569 });
570 } else if(res.data=='success') {
571 this.$message({
572 showClose: true,
573 message: '创建健康坊用户成功',
574 type: 'success'
575 });
576 }
577 }).catch(error=>{
578 console.log(error);
579 this.$message({
580 showClose: true,
581 message: '服务器处理失败，请核对参数！',
582 type: 'error'
583 });
584 })
585 },
586 queryUserInfoSubmit() {
587 let config = {
588 headers: {
589 'Content-Type': 'application/x-www-form-urlencoded'
590 }
591 }
592 this.$http.get('/tool/queryJiankangfang?'+this.$qs.stringify({
593 phone: this.queryUserInfo.agentPhone
594 }),config).then((res)=>{
595 console.log(res);
596 if(res.data=='usernull') {
597 this.$message({
598 showClose: true,
599 message: '代理人手机号不存在',
600 type: 'error'
601 });
602 } else {
603 this.myQueryUserInfo = res.data
604 this.dialogQueryUserInfo = true
605 }
606 }).catch(error=>{
607 console.log(error);
608 this.$message({
609 showClose: true,
610 message: '服务器处理失败，请核对参数！',
611 type: 'error'
612 });
613 })
495 } 614 }
496 } 615 }
497 } 616 }
......