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
{
"presets": [
[
"env",
{
"targets": {
"uglify": true
},
"modules": false
}
]
]
}
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# http://editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 4
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[{package.json,bower.json}]
indent_size = 2
### Minimal example
> Fork this [JSFiddle](https://jsfiddle.net/zenorocha/5kk0eysw/) and reproduce your issue.
### Expected behaviour
I thought that by going to the page '...' and pressing the button '...' then '...' would happen.
### Actual behaviour
Instead of '...', what I saw was that '...' happened instead.
### Browsers affected
I tested on all major browsers and only IE 11 does not work.
# Number of days of inactivity before an issue becomes stale
daysUntilStale: 60
# Number of days of inactivity before a stale issue is closed
daysUntilClose: 7
# Issues with these labels will never be considered stale
exemptLabels:
- pinned
# Label to use when marking an issue as stale
staleLabel: stale
# Comment to post when marking an issue as stale. Set to `false` to disable
markComment: >
This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs. Thank you
for your contributions.
# Comment to post when closing a stale issue. Set to `false` to disable
closeComment: false
sudo: false
language: node_js
node_js:
- stable
MIT License
Copyright (c) Zeno Rocha
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
{
"name": "clipboard",
"version": "2.0.6",
"description": "Modern copy to clipboard. No Flash. Just 3kb",
"license": "MIT",
"main": "dist/clipboard.js",
"ignore": [
"/.*/",
"/demo/",
"/test/",
"/.*",
"/bower.json",
"/karma.conf.js",
"/src",
"/lib"
],
"keywords": [
"clipboard",
"copy",
"cut"
]
}
{
"name": "zenorocha/clipboardjs",
"description": "Modern copy to clipboard. No Flash. Just 3kb gzipped https://clipboardjs.com",
"type": "component",
"homepage": "https://clipboardjs.com/",
"authors": [
{
"name": "Zeno Rocha",
"homepage": "http://zenorocha.com/"
}
],
"require": {
"oomphinc/composer-installers-extender": "*"
},
"extra": {
"component": {
"scripts": [
"dist/clipboard.js"
],
"files": [
"dist/clipboard.min.js"
]
}
}
}
# Contributing guide
Want to contribute to Clipboard.js? Awesome!
There are many ways you can contribute, see below.
## Opening issues
Open an issue to report bugs or to propose new features.
- 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.
- 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.
## Proposing pull requests
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.
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.
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.
## Documentation
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.
## Known issues
If you're using npm@3 you'll probably face some issues related to peerDependencies.
https://github.com/npm/npm/issues/9204
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>constructor-node</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<div id="btn" data-clipboard-text="1">
<span>Copy</span>
</div>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard by passing a HTML element -->
<script>
var btn = document.getElementById('btn');
var clipboard = new ClipboardJS(btn);
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>constructor-nodelist</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<button data-clipboard-text="1">Copy</button>
<button data-clipboard-text="2">Copy</button>
<button data-clipboard-text="3">Copy</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard by passing a list of HTML elements -->
<script>
var btns = document.querySelectorAll('button');
var clipboard = new ClipboardJS(btns);
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>constructor-selector</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<button class="btn" data-clipboard-text="1">Copy</button>
<button class="btn" data-clipboard-text="2">Copy</button>
<button class="btn" data-clipboard-text="3">Copy</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard by passing a string selector -->
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>function-target</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<button class="btn">Copy</button>
<div>hello</div>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new ClipboardJS('.btn', {
target: function() {
return document.querySelector('div');
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>function-text</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<button class="btn">Copy</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new ClipboardJS('.btn', {
text: function() {
return 'to be or not to be';
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-div</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<div>hello</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-input</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<input id="foo" type="text" value="hello">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-textarea</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<textarea id="bar">hello</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
var webpackConfig = require('./webpack.config.js');
module.exports = function (karma) {
karma.set({
plugins: ['karma-webpack', 'karma-chai', 'karma-sinon', 'karma-mocha', 'karma-chrome-launcher'],
frameworks: ['chai', 'sinon', 'mocha'],
files: [
'src/**/*.js',
'test/**/*.js',
],
preprocessors: {
'src/**/*.js': ['webpack'],
'test/**/*.js': ['webpack']
},
webpack: {
module: webpackConfig.module,
plugins: webpackConfig.plugins
},
webpackMiddleware: {
stats: 'errors-only'
},
browsers: ['ChromeHeadless']
});
};
// Package metadata for Meteor.js.
Package.describe({
name: "zenorocha:clipboard",
summary: "Modern copy to clipboard. No Flash. Just 3kb.",
version: "2.0.6",
git: "https://github.com/zenorocha/clipboard.js"
});
Package.onUse(function(api) {
api.addFiles("dist/clipboard.js", "client");
});
{
"_from": "clipboard@^2.0.0",
"_id": "clipboard@2.0.6",
"_inBundle": false,
"_integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
"_location": "/clipboard",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "clipboard@^2.0.0",
"name": "clipboard",
"escapedName": "clipboard",
"rawSpec": "^2.0.0",
"saveSpec": null,
"fetchSpec": "^2.0.0"
},
"_requiredBy": [
"/vue-clipboard2"
],
"_resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
"_shasum": "52921296eec0fdf77ead1749421b21c968647376",
"_spec": "clipboard@^2.0.0",
"_where": "/Users/zhanghao/brcode/br-client/node_modules/vue-clipboard2",
"bugs": {
"url": "https://github.com/zenorocha/clipboard.js/issues"
},
"bundleDependencies": false,
"dependencies": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
},
"deprecated": false,
"description": "Modern copy to clipboard. No Flash. Just 2kb",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"chai": "^4.2.0",
"cross-env": "^5.2.0",
"karma": "^3.1.1",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.2.0",
"karma-mocha": "^1.2.0",
"karma-sinon": "^1.0.4",
"karma-webpack": "^3.0.5",
"mocha": "^5.2.0",
"sinon": "^7.1.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack": "^4.5.0",
"webpack-cli": "^3.1.2"
},
"homepage": "https://github.com/zenorocha/clipboard.js#readme",
"keywords": [
"clipboard",
"copy",
"cut"
],
"license": "MIT",
"main": "dist/clipboard.js",
"name": "clipboard",
"repository": {
"type": "git",
"url": "git+https://github.com/zenorocha/clipboard.js.git"
},
"scripts": {
"build": "npm run build-debug && npm run build-min",
"build-debug": "webpack",
"build-min": "cross-env NODE_ENV=production webpack",
"build-watch": "webpack --watch",
"prepublish": "npm run build",
"test": "karma start --single-run"
},
"version": "2.0.6"
}
# clipboard.js
[![Build Status](http://img.shields.io/travis/zenorocha/clipboard.js/master.svg?style=flat)](https://travis-ci.org/zenorocha/clipboard.js)
![Killing Flash](https://img.shields.io/badge/killing-flash-brightgreen.svg?style=flat)
> Modern copy to clipboard. No Flash. Just 3kb gzipped.
<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>
## Why
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.
That's why clipboard.js exists.
## Install
You can get it on npm.
```
npm install clipboard --save
```
Or if you're not into package management, just [download a ZIP](https://github.com/zenorocha/clipboard.js/archive/master.zip) file.
## Setup
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).
```html
<script src="dist/clipboard.min.js"></script>
```
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).
```js
new ClipboardJS('.btn');
```
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.
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).
# Usage
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.
### Copy text from another element
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.
The value you include on this attribute needs to match another's element selector.
<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>
```html
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
```
### Cut text from another element
Additionally, you can define a `data-clipboard-action` attribute to specify if you want to either `copy` or `cut` content.
If you omit this attribute, `copy` will be used by default.
<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>
```html
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
```
As you may expect, the `cut` action only works on `<input>` or `<textarea>` elements.
### Copy text from attribute
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.
<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>
```html
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
```
## Events
There are cases where you'd like to show some user feedback or capture what has been selected after a copy/cut operation.
That's why we fire custom events such as `success` and `error` for you to listen and implement your custom logic.
```js
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
```
For a live demonstration, go to this [site](https://clipboardjs.com/) and open your console.
## Tooltips
Each application has different design needs, that's why clipboard.js does not include any CSS or built-in tooltip solution.
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.
## Advanced Options
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.
For instance, if you want to dynamically set a `target`, you'll need to return a Node.
```js
new ClipboardJS('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
```
If you want to dynamically set a `text`, you'll return a String.
```js
new ClipboardJS('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
});
```
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.
```js
new ClipboardJS('.btn', {
container: document.getElementById('modal')
});
```
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.
```js
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();
```
## Browser Support
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.
| <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"> |
|:---:|:---:|:---:|:---:|:---:|:---:|
| 42+ ✔ | 12+ ✔ | 41+ ✔ | 9+ ✔ | 29+ ✔ | 10+ ✔ |
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.
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.
## Bonus
A browser extension that adds a "copy to clipboard" button to every code block on *GitHub, MDN, Gist, StackOverflow, StackExchange, npm, and even Medium.*
Install for [Chrome](https://chrome.google.com/webstore/detail/codecopy/fkbfebkcoelajmhanocgppanfoojcdmg) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/codecopy/).
## License
[MIT License](https://zenorocha.mit-license.org/) © Zeno Rocha
import select from 'select';
/**
* Inner class which performs selection from either `text` or `target`
* properties and then executes copy or cut operations.
*/
class ClipboardAction {
/**
* @param {Object} options
*/
constructor(options) {
this.resolveOptions(options);
this.initSelection();
}
/**
* Defines base properties passed from constructor.
* @param {Object} options
*/
resolveOptions(options = {}) {
this.action = options.action;
this.container = options.container;
this.emitter = options.emitter;
this.target = options.target;
this.text = options.text;
this.trigger = options.trigger;
this.selectedText = '';
}
/**
* Decides which selection strategy is going to be applied based
* on the existence of `text` and `target` properties.
*/
initSelection() {
if (this.text) {
this.selectFake();
}
else if (this.target) {
this.selectTarget();
}
}
/**
* Creates a fake textarea element, sets its value from `text` property,
* and makes a selection on it.
*/
selectFake() {
const isRTL = document.documentElement.getAttribute('dir') == 'rtl';
this.removeFake();
this.fakeHandlerCallback = () => this.removeFake();
this.fakeHandler = this.container.addEventListener('click', this.fakeHandlerCallback) || true;
this.fakeElem = document.createElement('textarea');
// Prevent zooming on iOS
this.fakeElem.style.fontSize = '12pt';
// Reset box model
this.fakeElem.style.border = '0';
this.fakeElem.style.padding = '0';
this.fakeElem.style.margin = '0';
// Move element out of screen horizontally
this.fakeElem.style.position = 'absolute';
this.fakeElem.style[ isRTL ? 'right' : 'left' ] = '-9999px';
// Move element to the same position vertically
let yPosition = window.pageYOffset || document.documentElement.scrollTop;
this.fakeElem.style.top = `${yPosition}px`;
this.fakeElem.setAttribute('readonly', '');
this.fakeElem.value = this.text;
this.container.appendChild(this.fakeElem);
this.selectedText = select(this.fakeElem);
this.copyText();
}
/**
* Only removes the fake element after another click event, that way
* a user can hit `Ctrl+C` to copy because selection still exists.
*/
removeFake() {
if (this.fakeHandler) {
this.container.removeEventListener('click', this.fakeHandlerCallback);
this.fakeHandler = null;
this.fakeHandlerCallback = null;
}
if (this.fakeElem) {
this.container.removeChild(this.fakeElem);
this.fakeElem = null;
}
}
/**
* Selects the content from element passed on `target` property.
*/
selectTarget() {
this.selectedText = select(this.target);
this.copyText();
}
/**
* Executes the copy operation based on the current selection.
*/
copyText() {
let succeeded;
try {
succeeded = document.execCommand(this.action);
}
catch (err) {
succeeded = false;
}
this.handleResult(succeeded);
}
/**
* Fires an event based on the copy operation result.
* @param {Boolean} succeeded
*/
handleResult(succeeded) {
this.emitter.emit(succeeded ? 'success' : 'error', {
action: this.action,
text: this.selectedText,
trigger: this.trigger,
clearSelection: this.clearSelection.bind(this)
});
}
/**
* Moves focus away from `target` and back to the trigger, removes current selection.
*/
clearSelection() {
if (this.trigger) {
this.trigger.focus();
}
document.activeElement.blur();
window.getSelection().removeAllRanges();
}
/**
* Sets the `action` to be performed which can be either 'copy' or 'cut'.
* @param {String} action
*/
set action(action = 'copy') {
this._action = action;
if (this._action !== 'copy' && this._action !== 'cut') {
throw new Error('Invalid "action" value, use either "copy" or "cut"');
}
}
/**
* Gets the `action` property.
* @return {String}
*/
get action() {
return this._action;
}
/**
* Sets the `target` property using an element
* that will be have its content copied.
* @param {Element} target
*/
set target(target) {
if (target !== undefined) {
if (target && typeof target === 'object' && target.nodeType === 1) {
if (this.action === 'copy' && target.hasAttribute('disabled')) {
throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
}
if (this.action === 'cut' && (target.hasAttribute('readonly') || target.hasAttribute('disabled'))) {
throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');
}
this._target = target;
}
else {
throw new Error('Invalid "target" value, use a valid Element');
}
}
}
/**
* Gets the `target` property.
* @return {String|HTMLElement}
*/
get target() {
return this._target;
}
/**
* Destroy lifecycle.
*/
destroy() {
this.removeFake();
}
}
export default ClipboardAction;
import ClipboardAction from './clipboard-action';
import Emitter from 'tiny-emitter';
import listen from 'good-listener';
/**
* Base class which takes one or more elements, adds event listeners to them,
* and instantiates a new `ClipboardAction` on each click.
*/
class Clipboard extends Emitter {
/**
* @param {String|HTMLElement|HTMLCollection|NodeList} trigger
* @param {Object} options
*/
constructor(trigger, options) {
super();
this.resolveOptions(options);
this.listenClick(trigger);
}
/**
* Defines if attributes would be resolved using internal setter functions
* or custom functions that were passed in the constructor.
* @param {Object} options
*/
resolveOptions(options = {}) {
this.action = (typeof options.action === 'function') ? options.action : this.defaultAction;
this.target = (typeof options.target === 'function') ? options.target : this.defaultTarget;
this.text = (typeof options.text === 'function') ? options.text : this.defaultText;
this.container = (typeof options.container === 'object') ? options.container : document.body;
}
/**
* Adds a click event listener to the passed trigger.
* @param {String|HTMLElement|HTMLCollection|NodeList} trigger
*/
listenClick(trigger) {
this.listener = listen(trigger, 'click', (e) => this.onClick(e));
}
/**
* Defines a new `ClipboardAction` on each click event.
* @param {Event} e
*/
onClick(e) {
const trigger = e.delegateTarget || e.currentTarget;
if (this.clipboardAction) {
this.clipboardAction = null;
}
this.clipboardAction = new ClipboardAction({
action : this.action(trigger),
target : this.target(trigger),
text : this.text(trigger),
container : this.container,
trigger : trigger,
emitter : this
});
}
/**
* Default `action` lookup function.
* @param {Element} trigger
*/
defaultAction(trigger) {
return getAttributeValue('action', trigger);
}
/**
* Default `target` lookup function.
* @param {Element} trigger
*/
defaultTarget(trigger) {
const selector = getAttributeValue('target', trigger);
if (selector) {
return document.querySelector(selector);
}
}
/**
* Returns the support of the given action, or all actions if no action is
* given.
* @param {String} [action]
*/
static isSupported(action = ['copy', 'cut']) {
const actions = (typeof action === 'string') ? [action] : action;
let support = !!document.queryCommandSupported;
actions.forEach((action) => {
support = support && !!document.queryCommandSupported(action);
});
return support;
}
/**
* Default `text` lookup function.
* @param {Element} trigger
*/
defaultText(trigger) {
return getAttributeValue('text', trigger);
}
/**
* Destroy lifecycle.
*/
destroy() {
this.listener.destroy();
if (this.clipboardAction) {
this.clipboardAction.destroy();
this.clipboardAction = null;
}
}
}
/**
* Helper function to retrieve attribute value.
* @param {String} suffix
* @param {Element} element
*/
function getAttributeValue(suffix, element) {
const attribute = `data-clipboard-${suffix}`;
if (!element.hasAttribute(attribute)) {
return;
}
return element.getAttribute(attribute);
}
export default Clipboard;
import ClipboardAction from '../src/clipboard-action';
import Emitter from 'tiny-emitter';
describe('ClipboardAction', () => {
before(() => {
global.input = document.createElement('input');
global.input.setAttribute('id', 'input');
global.input.setAttribute('value', 'abc');
document.body.appendChild(global.input);
global.paragraph = document.createElement('p');
global.paragraph.setAttribute('id', 'paragraph');
global.paragraph.textContent = 'abc';
document.body.appendChild(global.paragraph);
});
after(() => {
document.body.innerHTML = '';
});
describe('#resolveOptions', () => {
it('should set base properties', () => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
text: 'foo'
});
assert.property(clip, 'action');
assert.property(clip, 'container');
assert.property(clip, 'emitter');
assert.property(clip, 'target');
assert.property(clip, 'text');
assert.property(clip, 'trigger');
assert.property(clip, 'selectedText');
});
});
describe('#initSelection', () => {
it('should set the position right style property', done => {
// Set document direction
document.documentElement.setAttribute('dir', 'rtl');
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
text: 'foo'
});
assert.equal(clip.fakeElem.style.right, '-9999px');
done();
});
});
describe('#set action', () => {
it('should throw an error since "action" is invalid', done => {
try {
new ClipboardAction({
text: 'foo',
action: 'paste'
});
}
catch(e) {
assert.equal(e.message, 'Invalid "action" value, use either "copy" or "cut"');
done();
}
});
});
describe('#set target', () => {
it('should throw an error since "target" do not match any element', done => {
try {
new ClipboardAction({
target: document.querySelector('#foo')
});
}
catch(e) {
assert.equal(e.message, 'Invalid "target" value, use a valid Element');
done();
}
});
});
describe('#selectText', () => {
it('should create a fake element and select its value', () => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
text: 'blah'
});
assert.equal(clip.selectedText, clip.fakeElem.value);
});
});
describe('#removeFake', () => {
it('should remove a temporary fake element', () => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
text: 'blah'
});
clip.removeFake();
assert.equal(clip.fakeElem, null);
});
});
describe('#selectTarget', () => {
it('should select text from editable element', () => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
target: document.querySelector('#input')
});
assert.equal(clip.selectedText, clip.target.value);
});
it('should select text from non-editable element', () => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
target: document.querySelector('#paragraph')
});
assert.equal(clip.selectedText, clip.target.textContent);
});
});
describe('#copyText', () => {
before(() => {
global.stub = sinon.stub(document, 'execCommand');
});
after(() => {
global.stub.restore();
});
it('should fire a success event on browsers that support copy command', done => {
global.stub.returns(true);
let emitter = new Emitter();
emitter.on('success', () => {
done();
});
let clip = new ClipboardAction({
emitter,
target: document.querySelector('#input')
});
});
it('should fire an error event on browsers that support copy command', done => {
global.stub.returns(false);
let emitter = new Emitter();
emitter.on('error', () => {
done();
});
let clip = new ClipboardAction({
emitter,
target: document.querySelector('#input')
});
});
});
describe('#handleResult', () => {
it('should fire a success event with certain properties', done => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
target: document.querySelector('#input')
});
clip.emitter.on('success', (e) => {
assert.property(e, 'action');
assert.property(e, 'text');
assert.property(e, 'trigger');
assert.property(e, 'clearSelection');
done();
});
clip.handleResult(true);
});
it('should fire a error event with certain properties', done => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
target: document.querySelector('#input')
});
clip.emitter.on('error', (e) => {
assert.property(e, 'action');
assert.property(e, 'trigger');
assert.property(e, 'clearSelection');
done();
});
clip.handleResult(false);
});
});
describe('#clearSelection', () => {
it('should remove focus from target and text selection', () => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
target: document.querySelector('#input')
});
clip.clearSelection();
let selectedElem = document.activeElement;
let selectedText = window.getSelection().toString();
assert.equal(selectedElem, document.body);
assert.equal(selectedText, '');
});
});
describe('#destroy', () => {
it('should destroy an existing fake element', () => {
let clip = new ClipboardAction({
emitter: new Emitter(),
container: document.body,
text: 'blah'
});
clip.selectFake();
clip.destroy();
assert.equal(clip.fakeElem, null);
});
});
});
import Clipboard from '../src/clipboard';
import ClipboardAction from '../src/clipboard-action';
import listen from 'good-listener';
describe('Clipboard', () => {
before(() => {
global.button = document.createElement('button');
global.button.setAttribute('class', 'btn');
global.button.setAttribute('data-clipboard-text', 'foo');
document.body.appendChild(global.button);
global.span = document.createElement('span');
global.span.innerHTML = 'bar';
global.button.appendChild(span);
global.event = {
target: global.button,
currentTarget: global.button
};
});
after(() => {
document.body.innerHTML = '';
});
describe('#resolveOptions', () => {
before(() => {
global.fn = () => {};
});
it('should set action as a function', () => {
let clipboard = new Clipboard('.btn', {
action: global.fn
});
assert.equal(global.fn, clipboard.action);
});
it('should set target as a function', () => {
let clipboard = new Clipboard('.btn', {
target: global.fn
});
assert.equal(global.fn, clipboard.target);
});
it('should set text as a function', () => {
let clipboard = new Clipboard('.btn', {
text: global.fn
});
assert.equal(global.fn, clipboard.text);
});
it('should set container as an object', () => {
let clipboard = new Clipboard('.btn', {
container: document.body
});
assert.equal(document.body, clipboard.container);
});
it('should set container as body by default', () => {
let clipboard = new Clipboard('.btn');
assert.equal(document.body, clipboard.container);
});
});
describe('#listenClick', () => {
it('should add a click event listener to the passed selector', () => {
let clipboard = new Clipboard('.btn');
assert.isObject(clipboard.listener);
});
});
describe('#onClick', () => {
it('should create a new instance of ClipboardAction', () => {
let clipboard = new Clipboard('.btn');
clipboard.onClick(global.event);
assert.instanceOf(clipboard.clipboardAction, ClipboardAction);
});
it('should use an event\'s currentTarget when not equal to target', () => {
let clipboard = new Clipboard('.btn');
let bubbledEvent = { target: global.span, currentTarget: global.button };
clipboard.onClick(bubbledEvent);
assert.instanceOf(clipboard.clipboardAction, ClipboardAction);
});
it('should throw an exception when target is invalid', done => {
try {
const clipboard = new Clipboard('.btn', {
target() {
return null;
}
});
clipboard.onClick(global.event);
}
catch(e) {
assert.equal(e.message, 'Invalid "target" value, use a valid Element');
done();
}
});
});
describe('#static isSupported', () => {
it('should return the support of the given action', () => {
assert.equal(Clipboard.isSupported('copy'), true);
assert.equal(Clipboard.isSupported('cut'), true);
});
it('should return the support of the cut and copy actions', () => {
assert.equal(Clipboard.isSupported(), true);
});
});
describe('#destroy', () => {
it('should destroy an existing instance of ClipboardAction', () => {
let clipboard = new Clipboard('.btn');
clipboard.onClick(global.event);
clipboard.destroy();
assert.equal(clipboard.clipboardAction, null);
});
});
});
const pkg = require('./package.json');
const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const production = process.env.NODE_ENV === 'production' || false;
const banner = `clipboard.js v${pkg.version}
https://clipboardjs.com/
Licensed MIT © Zeno Rocha`;
module.exports = {
entry: './src/clipboard.js',
mode: 'production',
output: {
filename: production ? 'clipboard.min.js' : 'clipboard.js',
path: path.resolve(__dirname, 'dist'),
library: 'ClipboardJS',
globalObject: 'this',
libraryExport: 'default',
libraryTarget: 'umd'
},
module: {
rules: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}
]
},
optimization: {
minimize: production,
minimizer: [
new UglifyJSPlugin({
parallel: require('os').cpus().length,
uglifyOptions: {
ie8: false,
keep_fnames: false,
output: {
beautify: false,
comments: (node, {value, type}) => type == 'comment2' && value.startsWith('!')
}
}
})
]
},
plugins: [new webpack.BannerPlugin({ banner })]
};
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# http://editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 4
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[{package.json,bower.json}]
indent_size = 2
language: node_js
node_js:
- stable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Delegate</title>
</head>
<body>
<!-- 1. Write some markup -->
<ul>
<li><button>Item 1</button></li>
<li><button>Item 2</button></li>
<li><button>Item 3</button></li>
<li><button>Item 4</button></li>
<li><button>Item 5</button></li>
</ul>
<!-- 2. Include library -->
<script src="../dist/delegate.js"></script>
<!-- 3. Add event delegation -->
<script>
var ul = document.querySelector('ul');
delegate(ul, 'button', 'click', function(e) {
console.log(e.target);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Delegate</title>
</head>
<body>
<!-- 1. Write some markup -->
<ul>
<li><button>Item 1</button></li>
<li><button>Item 2</button></li>
<li><button>Item 3</button></li>
<li><button>Item 4</button></li>
<li><button>Item 5</button></li>
</ul>
<ul>
<li><span>Item 6</span></li>
<li><span>Item 7</span></li>
</ul>
<!-- 2. Include library -->
<script src="../dist/delegate.js"></script>
<!-- 3. Add event delegation -->
<script>
var ul = document.querySelector('ul');
delegate(ul, 'button', 'click', function(e) {
console.log(e.target);
});
delegate(document.body, 'span', 'click', function(e) {
console.log(e.target);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Undelegate</title>
</head>
<body>
<!-- 1. Write some markup -->
<ul>
<li><button>Item 1</button></li>
<li><button>Item 2</button></li>
<li><button>Item 3</button></li>
<li><button>Item 4</button></li>
<li><button>Item 5</button></li>
</ul>
<!-- 2. Include library -->
<script src="../dist/delegate.js"></script>
<!-- 3. Remove event delegation -->
<script>
var ul = document.querySelector('ul');
var delegation = delegate(ul, 'li button', 'click', function(e) {
console.log(e.target);
});
delegation.destroy();
</script>
</body>
</html>
(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){
var DOCUMENT_NODE_TYPE = 9;
/**
* A polyfill for Element.matches()
*/
if (typeof Element !== 'undefined' && !Element.prototype.matches) {
var proto = Element.prototype;
proto.matches = proto.matchesSelector ||
proto.mozMatchesSelector ||
proto.msMatchesSelector ||
proto.oMatchesSelector ||
proto.webkitMatchesSelector;
}
/**
* Finds the closest parent that matches a selector.
*
* @param {Element} element
* @param {String} selector
* @return {Function}
*/
function closest (element, selector) {
while (element && element.nodeType !== DOCUMENT_NODE_TYPE) {
if (element.matches(selector)) return element;
element = element.parentNode;
}
}
module.exports = closest;
},{}],2:[function(require,module,exports){
var closest = require('./closest');
/**
* Delegates event to a selector.
*
* @param {Element} element
* @param {String} selector
* @param {String} type
* @param {Function} callback
* @param {Boolean} useCapture
* @return {Object}
*/
function delegate(element, selector, type, callback, useCapture) {
var listenerFn = listener.apply(this, arguments);
element.addEventListener(type, listenerFn, useCapture);
return {
destroy: function() {
element.removeEventListener(type, listenerFn, useCapture);
}
}
}
/**
* Finds closest match and invokes callback.
*
* @param {Element} element
* @param {String} selector
* @param {String} type
* @param {Function} callback
* @return {Function}
*/
function listener(element, selector, type, callback) {
return function(e) {
e.delegateTarget = closest(e.target, selector);
if (e.delegateTarget) {
callback.call(element, e);
}
}
}
module.exports = delegate;
},{"./closest":1}]},{},[2])(2)
});
\ No newline at end of file
module.exports = function(karma) {
karma.set({
plugins: ['karma-browserify', 'karma-chai', 'karma-sinon', 'karma-mocha', 'karma-phantomjs-launcher'],
frameworks: ['browserify', 'chai', 'sinon', 'mocha'],
files: [
'src/**/*.js',
'test/**/*.js',
'./node_modules/phantomjs-polyfill/bind-polyfill.js'
],
preprocessors: {
'src/**/*.js' : ['browserify'],
'test/**/*.js': ['browserify']
},
browserify: {
debug: true
},
browsers: ['PhantomJS']
});
}
{
"_from": "delegate@^3.1.2",
"_id": "delegate@3.2.0",
"_inBundle": false,
"_integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
"_location": "/delegate",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "delegate@^3.1.2",
"name": "delegate",
"escapedName": "delegate",
"rawSpec": "^3.1.2",
"saveSpec": null,
"fetchSpec": "^3.1.2"
},
"_requiredBy": [
"/good-listener"
],
"_resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"_shasum": "b66b71c3158522e8ab5744f720d8ca0c2af59166",
"_spec": "delegate@^3.1.2",
"_where": "/Users/zhanghao/brcode/br-client/node_modules/good-listener",
"bugs": {
"url": "https://github.com/zenorocha/delegate/issues"
},
"bundleDependencies": false,
"deprecated": false,
"description": "Lightweight event delegation",
"devDependencies": {
"browserify": "^13.1.0",
"chai": "^3.5.0",
"karma": "^1.3.0",
"karma-browserify": "^5.1.0",
"karma-chai": "^0.1.0",
"karma-mocha": "^1.2.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-sinon": "^1.0.4",
"mocha": "^3.1.2",
"phantomjs-polyfill": "0.0.2",
"simulant": "^0.2.2",
"sinon": "^1.17.6"
},
"homepage": "https://github.com/zenorocha/delegate#readme",
"keywords": [
"event",
"delegate",
"delegation"
],
"license": "MIT",
"main": "src/delegate.js",
"name": "delegate",
"repository": {
"type": "git",
"url": "git+https://github.com/zenorocha/delegate.git"
},
"scripts": {
"build": "browserify src/delegate.js -s delegate -o dist/delegate.js",
"test": "karma start --single-run"
},
"version": "3.2.0"
}
# delegate
Lightweight event delegation.
## Install
You can get it on npm.
```
npm install delegate --save
```
If you're not into package management, just [download a ZIP](https://github.com/zenorocha/delegate/archive/master.zip) file.
## Setup
###### Node (Browserify)
```js
var delegate = require('delegate');
```
###### Browser (Standalone)
```html
<script src="dist/delegate.js"></script>
```
## Usage
### Add event delegation
#### With the default base (`document`)
```js
delegate('.btn', 'click', function(e) {
console.log(e.delegateTarget);
}, false);
```
#### With an element as base
```js
delegate(document.body, '.btn', 'click', function(e) {
console.log(e.delegateTarget);
}, false);
```
#### With a selector (of existing elements) as base
```js
delegate('.container', '.btn', 'click', function(e) {
console.log(e.delegateTarget);
}, false);
```
#### With an array/array-like of elements as base
```js
delegate(document.querySelectorAll('.container'), '.btn', 'click', function(e) {
console.log(e.delegateTarget);
}, false);
```
### Remove event delegation
#### With a single base element (default or specified)
```js
var delegation = delegate(document.body, '.btn', 'click', function(e) {
console.log(e.delegateTarget);
}, false);
delegation.destroy();
```
#### With multiple elements (via selector or array)
Note: selectors are always treated as multiple elements, even if one or none are matched. `delegate()` will return an array.
```js
var delegations = delegate('.container', '.btn', 'click', function(e) {
console.log(e.delegateTarget);
}, false);
delegations.forEach(function (delegation) {
delegation.destroy();
});
```
## Browser Support
| <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"> |
|:---:|:---:|:---:|:---:|:---:|:---:|
| Latest ✔ | Latest ✔ | Latest ✔ | 9+ ✔ | Latest ✔ | Latest ✔ |
## License
[MIT License](http://zenorocha.mit-license.org/) © Zeno Rocha
var DOCUMENT_NODE_TYPE = 9;
/**
* A polyfill for Element.matches()
*/
if (typeof Element !== 'undefined' && !Element.prototype.matches) {
var proto = Element.prototype;
proto.matches = proto.matchesSelector ||
proto.mozMatchesSelector ||
proto.msMatchesSelector ||
proto.oMatchesSelector ||
proto.webkitMatchesSelector;
}
/**
* Finds the closest parent that matches a selector.
*
* @param {Element} element
* @param {String} selector
* @return {Function}
*/
function closest (element, selector) {
while (element && element.nodeType !== DOCUMENT_NODE_TYPE) {
if (typeof element.matches === 'function' &&
element.matches(selector)) {
return element;
}
element = element.parentNode;
}
}
module.exports = closest;
var closest = require('./closest');
/**
* Delegates event to a selector.
*
* @param {Element} element
* @param {String} selector
* @param {String} type
* @param {Function} callback
* @param {Boolean} useCapture
* @return {Object}
*/
function _delegate(element, selector, type, callback, useCapture) {
var listenerFn = listener.apply(this, arguments);
element.addEventListener(type, listenerFn, useCapture);
return {
destroy: function() {
element.removeEventListener(type, listenerFn, useCapture);
}
}
}
/**
* Delegates event to a selector.
*
* @param {Element|String|Array} [elements]
* @param {String} selector
* @param {String} type
* @param {Function} callback
* @param {Boolean} useCapture
* @return {Object}
*/
function delegate(elements, selector, type, callback, useCapture) {
// Handle the regular Element usage
if (typeof elements.addEventListener === 'function') {
return _delegate.apply(null, arguments);
}
// Handle Element-less usage, it defaults to global delegation
if (typeof type === 'function') {
// Use `document` as the first parameter, then apply arguments
// This is a short way to .unshift `arguments` without running into deoptimizations
return _delegate.bind(null, document).apply(null, arguments);
}
// Handle Selector-based usage
if (typeof elements === 'string') {
elements = document.querySelectorAll(elements);
}
// Handle Array-like based usage
return Array.prototype.map.call(elements, function (element) {
return _delegate(element, selector, type, callback, useCapture);
});
}
/**
* Finds closest match and invokes callback.
*
* @param {Element} element
* @param {String} selector
* @param {String} type
* @param {Function} callback
* @return {Function}
*/
function listener(element, selector, type, callback) {
return function(e) {
e.delegateTarget = closest(e.target, selector);
if (e.delegateTarget) {
callback.call(element, e);
}
}
}
module.exports = delegate;
var closest = require('../src/closest');
describe('closest', function() {
before(function() {
var html = '<div id="a">' +
'<div id="b">' +
'<div id="c"></div>' +
'</div>' +
'</div>';
document.body.innerHTML += html;
global.a = document.querySelector('#a');
global.b = document.querySelector('#b');
global.c = document.querySelector('#c');
});
after(function() {
document.body.innerHTML = '';
});
it('should return the closest parent based on the selector', function() {
assert.ok(closest(global.c, '#b'), global.b);
assert.ok(closest(global.c, '#a'), global.a);
assert.ok(closest(global.b, '#a'), global.a);
});
it('should return itself if the same selector is passed', function() {
assert.ok(closest(document.body, 'body'), document.body);
});
it('should not throw on elements without matches()', function() {
var fakeElement = {
nodeType: -1, // anything but DOCUMENT_NODE_TYPE
parentNode: null,
matches: undefined // undefined to emulate Elements without this function
};
try {
closest(fakeElement, '#a')
} catch (err) {
assert.fail();
}
});
});
var delegate = require('../src/delegate');
var simulant = require('simulant');
describe('delegate', function() {
before(function() {
var html = '<ul>' +
'<li><a>Item 1</a></li>' +
'<li><a>Item 2</a></li>' +
'<li><a>Item 3</a></li>' +
'<li><a>Item 4</a></li>' +
'<li><a>Item 5</a></li>' +
'</ul>';
document.body.innerHTML += html;
global.container = document.querySelector('ul');
global.anchor = document.querySelector('a');
global.spy = sinon.spy(global.container, 'removeEventListener');
});
after(function() {
global.spy.restore();
document.body.innerHTML = '';
});
it('should add an event listener', function(done) {
delegate(global.container, 'a', 'click', function() {
done();
});
simulant.fire(global.anchor, simulant('click'));
});
it('should remove an event listener', function() {
var delegation = delegate(global.container, 'a', 'click', function() {});
delegation.destroy();
assert.ok(global.spy.calledOnce);
});
it('should use `document` if the element is unspecified', function(done) {
delegate('a', 'click', function() {
done();
});
simulant.fire(global.anchor, simulant('click'));
});
it('should remove an event listener the unspecified base (`document`)', function() {
var delegation = delegate('a', 'click', function() {});
var spy = sinon.spy(document, 'removeEventListener');
delegation.destroy();
assert.ok(spy.calledOnce);
spy.restore();
});
it('should add event listeners to all the elements in a base selector', function() {
var spy = sinon.spy();
delegate('li', 'a', 'click', spy);
var anchors = document.querySelectorAll('a');
simulant.fire(anchors[0], simulant('click'));
simulant.fire(anchors[1], simulant('click'));
assert.ok(spy.calledTwice);
});
it('should remove the event listeners from all the elements in a base selector', function() {
var items = document.querySelectorAll('li')
var spies = Array.prototype.map.call(items, function (li) {
return sinon.spy(li, 'removeEventListener');
});
var delegations = delegate('li', 'a', 'click', function() {});
delegations.forEach(function (delegation) {
delegation.destroy();
});
spies.every(function (spy) {
var success = spy.calledOnce;
spy.restore();
return success;
});
});
it('should add event listeners to all the elements in a base array', function() {
var spy = sinon.spy();
var items = document.querySelectorAll('li')
delegate(items, 'a', 'click', spy);
var anchors = document.querySelectorAll('a')
simulant.fire(anchors[0], simulant('click'));
simulant.fire(anchors[1], simulant('click'));
assert.ok(spy.calledTwice);
});
it('should remove the event listeners from all the elements in a base array', function() {
var items = document.querySelectorAll('li')
var spies = Array.prototype.map.call(items, function (li) {
return sinon.spy(li, 'removeEventListener');
});
var delegations = delegate(items, 'a', 'click', function() {});
delegations.forEach(function (delegation) {
delegation.destroy();
});
spies.every(function (spy) {
var success = spy.calledOnce;
spy.restore();
return success;
});
});
});
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# http://editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 4
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[{package.json,bower.json}]
indent_size = 2
node_modules
\ No newline at end of file
language: node_js
node_js:
- stable
{
"name": "good-listener",
"description": "A more versatile way of adding & removing event listeners",
"version": "1.2.1",
"license": "MIT",
"main": "dist/good-listener.js",
"keywords": [
"event",
"listener"
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Destroy</title>
</head>
<body>
<!-- 1. Write some markup -->
<button class="target">Click me</button>
<button class="target">Click me</button>
<button class="target">Click me</button>
<!-- 2. Include library -->
<script src="../dist/good-listener.js"></script>
<!-- 3. Remove listener by calling the destroy function -->
<script>
var listener = listen('.target', 'click', function(e) {
console.info(e);
});
listener.destroy();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selector</title>
</head>
<body>
<!-- 1. Write some markup -->
<button data-a>Click me</button>
<button data-a>Click me</button>
<button data-a>Click me</button>
<button data-b>Click me</button>
<button data-b>Click me</button>
<button data-b>Click me</button>
<!-- 2. Include library -->
<script src="../dist/good-listener.js"></script>
<!-- 3. Add listener by passing a string selector -->
<script>
listen('[data-a]', 'click', function(e) {
console.info(e);
});
listen('[data-b]', 'click', function(e) {
console.info(e);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node</title>
</head>
<body>
<!-- 1. Write some markup -->
<button id="target">Click me</button>
<!-- 2. Include library -->
<script src="../dist/good-listener.js"></script>
<!-- 3. Add listener by passing a HTML element -->
<script>
var target = document.getElementById('target');
listen(target, 'click', function(e) {
console.info(e);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NodeList</title>
</head>
<body>
<!-- 1. Write some markup -->
<button>Click me</button>
<button>Click me</button>
<button>Click me</button>
<!-- 2. Include library -->
<script src="../dist/good-listener.js"></script>
<!-- 3. Add listener by passing a list of HTML elements -->
<script>
var targets = document.querySelectorAll('button');
listen(targets, 'click', function(e) {
console.info(e);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Selector</title>
</head>
<body>
<!-- 1. Write some markup -->
<button class="target">Click me</button>
<button class="target">Click me</button>
<button class="target">Click me</button>
<!-- 2. Include library -->
<script src="../dist/good-listener.js"></script>
<!-- 3. Add listener by passing a string selector -->
<script>
listen('.target', 'click', function(e) {
console.info(e);
});
</script>
</body>
</html>
(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){
var DOCUMENT_NODE_TYPE = 9;
/**
* A polyfill for Element.matches()
*/
if (typeof Element !== 'undefined' && !Element.prototype.matches) {
var proto = Element.prototype;
proto.matches = proto.matchesSelector ||
proto.mozMatchesSelector ||
proto.msMatchesSelector ||
proto.oMatchesSelector ||
proto.webkitMatchesSelector;
}
/**
* Finds the closest parent that matches a selector.
*
* @param {Element} element
* @param {String} selector
* @return {Function}
*/
function closest (element, selector) {
while (element && element.nodeType !== DOCUMENT_NODE_TYPE) {
if (element.matches(selector)) return element;
element = element.parentNode;
}
}
module.exports = closest;
},{}],2:[function(require,module,exports){
var closest = require('./closest');
/**
* Delegates event to a selector.
*
* @param {Element} element
* @param {String} selector
* @param {String} type
* @param {Function} callback
* @param {Boolean} useCapture
* @return {Object}
*/
function delegate(element, selector, type, callback, useCapture) {
var listenerFn = listener.apply(this, arguments);
element.addEventListener(type, listenerFn, useCapture);
return {
destroy: function() {
element.removeEventListener(type, listenerFn, useCapture);
}
}
}
/**
* Finds closest match and invokes callback.
*
* @param {Element} element
* @param {String} selector
* @param {String} type
* @param {Function} callback
* @return {Function}
*/
function listener(element, selector, type, callback) {
return function(e) {
e.delegateTarget = closest(e.target, selector);
if (e.delegateTarget) {
callback.call(element, e);
}
}
}
module.exports = delegate;
},{"./closest":1}],3:[function(require,module,exports){
/**
* Check if argument is a HTML element.
*
* @param {Object} value
* @return {Boolean}
*/
exports.node = function(value) {
return value !== undefined
&& value instanceof HTMLElement
&& value.nodeType === 1;
};
/**
* Check if argument is a list of HTML elements.
*
* @param {Object} value
* @return {Boolean}
*/
exports.nodeList = function(value) {
var type = Object.prototype.toString.call(value);
return value !== undefined
&& (type === '[object NodeList]' || type === '[object HTMLCollection]')
&& ('length' in value)
&& (value.length === 0 || exports.node(value[0]));
};
/**
* Check if argument is a string.
*
* @param {Object} value
* @return {Boolean}
*/
exports.string = function(value) {
return typeof value === 'string'
|| value instanceof String;
};
/**
* Check if argument is a function.
*
* @param {Object} value
* @return {Boolean}
*/
exports.fn = function(value) {
var type = Object.prototype.toString.call(value);
return type === '[object Function]';
};
},{}],4:[function(require,module,exports){
var is = require('./is');
var delegate = require('delegate');
/**
* Validates all params and calls the right
* listener function based on its target type.
*
* @param {String|HTMLElement|HTMLCollection|NodeList} target
* @param {String} type
* @param {Function} callback
* @return {Object}
*/
function listen(target, type, callback) {
if (!target && !type && !callback) {
throw new Error('Missing required arguments');
}
if (!is.string(type)) {
throw new TypeError('Second argument must be a String');
}
if (!is.fn(callback)) {
throw new TypeError('Third argument must be a Function');
}
if (is.node(target)) {
return listenNode(target, type, callback);
}
else if (is.nodeList(target)) {
return listenNodeList(target, type, callback);
}
else if (is.string(target)) {
return listenSelector(target, type, callback);
}
else {
throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList');
}
}
/**
* Adds an event listener to a HTML element
* and returns a remove listener function.
*
* @param {HTMLElement} node
* @param {String} type
* @param {Function} callback
* @return {Object}
*/
function listenNode(node, type, callback) {
node.addEventListener(type, callback);
return {
destroy: function() {
node.removeEventListener(type, callback);
}
}
}
/**
* Add an event listener to a list of HTML elements
* and returns a remove listener function.
*
* @param {NodeList|HTMLCollection} nodeList
* @param {String} type
* @param {Function} callback
* @return {Object}
*/
function listenNodeList(nodeList, type, callback) {
Array.prototype.forEach.call(nodeList, function(node) {
node.addEventListener(type, callback);
});
return {
destroy: function() {
Array.prototype.forEach.call(nodeList, function(node) {
node.removeEventListener(type, callback);
});
}
}
}
/**
* Add an event listener to a selector
* and returns a remove listener function.
*
* @param {String} selector
* @param {String} type
* @param {Function} callback
* @return {Object}
*/
function listenSelector(selector, type, callback) {
return delegate(document.body, selector, type, callback);
}
module.exports = listen;
},{"./is":3,"delegate":2}]},{},[4])(4)
});
\ No newline at end of file
module.exports = function(karma) {
karma.set({
plugins: ['karma-browserify', 'karma-chai', 'karma-sinon', 'karma-mocha', 'karma-phantomjs-launcher'],
frameworks: ['browserify', 'chai', 'sinon', 'mocha'],
files: [
'src/**/*.js',
'test/**/*.js',
'./node_modules/phantomjs-polyfill/bind-polyfill.js'
],
preprocessors: {
'src/**/*.js' : ['browserify'],
'test/**/*.js': ['browserify']
},
browserify: {
debug: true
},
browsers: ['PhantomJS']
});
}
{
"_from": "good-listener@^1.2.2",
"_id": "good-listener@1.2.2",
"_inBundle": false,
"_integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"_location": "/good-listener",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "good-listener@^1.2.2",
"name": "good-listener",
"escapedName": "good-listener",
"rawSpec": "^1.2.2",
"saveSpec": null,
"fetchSpec": "^1.2.2"
},
"_requiredBy": [
"/clipboard"
],
"_resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"_shasum": "d53b30cdf9313dffb7dc9a0d477096aa6d145c50",
"_spec": "good-listener@^1.2.2",
"_where": "/Users/zhanghao/brcode/br-client/node_modules/clipboard",
"bugs": {
"url": "https://github.com/zenorocha/good-listener/issues"
},
"bundleDependencies": false,
"dependencies": {
"delegate": "^3.1.2"
},
"deprecated": false,
"description": "A more versatile way of adding & removing event listeners",
"devDependencies": {
"browserify": "^13.0.0",
"chai": "^3.5.0",
"karma": "^1.3.0",
"karma-browserify": "^5.0.1",
"karma-chai": "^0.1.0",
"karma-mocha": "^1.2.0",
"karma-phantomjs-launcher": "^1.0.0",
"karma-sinon": "^1.0.4",
"mocha": "^3.1.2",
"phantomjs-polyfill": "0.0.2",
"phantomjs-prebuilt": "^2.1.3",
"simulant": "^0.2.2",
"sinon": "^1.17.3",
"watchify": "^3.7.0"
},
"homepage": "https://github.com/zenorocha/good-listener#readme",
"keywords": [
"event",
"listener"
],
"license": "MIT",
"main": "src/listen.js",
"name": "good-listener",
"repository": {
"type": "git",
"url": "git+https://github.com/zenorocha/good-listener.git"
},
"scripts": {
"build": "browserify src/listen.js -s listen -o dist/good-listener.js",
"test": "karma start --single-run"
},
"version": "1.2.2"
}
# good-listener
[![Build Status](http://img.shields.io/travis/zenorocha/good-listener/master.svg?style=flat)](https://travis-ci.org/zenorocha/good-listener)
> A more versatile way of adding & removing event listeners.
![good listener](https://cloud.githubusercontent.com/assets/398893/10718224/dfc25f6c-7b2a-11e5-9d3d-75b35e8603c8.jpg)
## Install
You can get it on npm.
```
npm install good-listener --save
```
Or bower, too.
```
bower install good-listener --save
```
If you're not into package management, just [download a ZIP](https://github.com/zenorocha/good-listener/archive/master.zip) file.
## Setup
###### Node (Browserify)
```js
var listen = require('good-listener');
```
###### Browser (Standalone)
```html
<script src="dist/good-listener.js"></script>
```
## Usage
### Add an event listener
By passing a string selector [(see full demo)](https://github.com/zenorocha/good-listener/blob/master/demo/selector.html).
```js
listen('.btn', 'click', function(e) {
console.log(e);
});
```
Or by passing a HTML element [(see full demo)](https://github.com/zenorocha/good-listener/blob/master/demo/node.html).
```js
var logo = document.getElementById('logo');
listen(logo, 'click', function(e) {
console.log(e);
});
```
Or by passing a list of HTML elements [(see full demo)](https://github.com/zenorocha/good-listener/blob/master/demo/nodelist.html).
```js
var anchors = document.querySelectorAll('a');
listen(anchors, 'click', function(e) {
console.log(e);
});
```
### Remove an event listener
By calling the `destroy` function that returned from previous operation [(see full demo)](https://github.com/zenorocha/good-listener/blob/master/demo/destroy.html).
```js
var listener = listen('.btn', 'click', function(e) {
console.log(e);
});
listener.destroy();
```
## Browser Support
| <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"> |
|:---:|:---:|:---:|:---:|:---:|:---:|
| Latest ✔ | Latest ✔ | Latest ✔ | 9+ ✔ | Latest ✔ | Latest ✔ |
## License
[MIT License](http://zenorocha.mit-license.org/) © Zeno Rocha
/**
* Check if argument is a HTML element.
*
* @param {Object} value
* @return {Boolean}
*/
exports.node = function(value) {
return value !== undefined
&& value instanceof HTMLElement
&& value.nodeType === 1;
};
/**
* Check if argument is a list of HTML elements.
*
* @param {Object} value
* @return {Boolean}
*/
exports.nodeList = function(value) {
var type = Object.prototype.toString.call(value);
return value !== undefined
&& (type === '[object NodeList]' || type === '[object HTMLCollection]')
&& ('length' in value)
&& (value.length === 0 || exports.node(value[0]));
};
/**
* Check if argument is a string.
*
* @param {Object} value
* @return {Boolean}
*/
exports.string = function(value) {
return typeof value === 'string'
|| value instanceof String;
};
/**
* Check if argument is a function.
*
* @param {Object} value
* @return {Boolean}
*/
exports.fn = function(value) {
var type = Object.prototype.toString.call(value);
return type === '[object Function]';
};
var is = require('./is');
var delegate = require('delegate');
/**
* Validates all params and calls the right
* listener function based on its target type.
*
* @param {String|HTMLElement|HTMLCollection|NodeList} target
* @param {String} type
* @param {Function} callback
* @return {Object}
*/
function listen(target, type, callback) {
if (!target && !type && !callback) {
throw new Error('Missing required arguments');
}
if (!is.string(type)) {
throw new TypeError('Second argument must be a String');
}
if (!is.fn(callback)) {
throw new TypeError('Third argument must be a Function');
}
if (is.node(target)) {
return listenNode(target, type, callback);
}
else if (is.nodeList(target)) {
return listenNodeList(target, type, callback);
}
else if (is.string(target)) {
return listenSelector(target, type, callback);
}
else {
throw new TypeError('First argument must be a String, HTMLElement, HTMLCollection, or NodeList');
}
}
/**
* Adds an event listener to a HTML element
* and returns a remove listener function.
*
* @param {HTMLElement} node
* @param {String} type
* @param {Function} callback
* @return {Object}
*/
function listenNode(node, type, callback) {
node.addEventListener(type, callback);
return {
destroy: function() {
node.removeEventListener(type, callback);
}
}
}
/**
* Add an event listener to a list of HTML elements
* and returns a remove listener function.
*
* @param {NodeList|HTMLCollection} nodeList
* @param {String} type
* @param {Function} callback
* @return {Object}
*/
function listenNodeList(nodeList, type, callback) {
Array.prototype.forEach.call(nodeList, function(node) {
node.addEventListener(type, callback);
});
return {
destroy: function() {
Array.prototype.forEach.call(nodeList, function(node) {
node.removeEventListener(type, callback);
});
}
}
}
/**
* Add an event listener to a selector
* and returns a remove listener function.
*
* @param {String} selector
* @param {String} type
* @param {Function} callback
* @return {Object}
*/
function listenSelector(selector, type, callback) {
return delegate(document.body, selector, type, callback);
}
module.exports = listen;
var is = require('../src/is');
describe('is', function() {
before(function() {
global.node = document.createElement('div');
global.node.setAttribute('id', 'foo');
global.node.setAttribute('class', 'foo');
document.body.appendChild(global.node);
});
after(function() {
document.body.innerHTML = '';
});
describe('is.node', function() {
it('should be considered as node', function() {
assert.ok(is.node(document.getElementById('foo')));
assert.ok(is.node(document.getElementsByTagName('div')[0]));
assert.ok(is.node(document.getElementsByClassName('foo')[0]));
assert.ok(is.node(document.querySelector('.foo')));
});
it('should not be considered as node', function() {
assert.notOk(is.node(undefined));
assert.notOk(is.node(null));
assert.notOk(is.node(false));
assert.notOk(is.node(true));
assert.notOk(is.node(function () {}));
assert.notOk(is.node([]));
assert.notOk(is.node({}));
assert.notOk(is.node(/a/g));
assert.notOk(is.node(new RegExp('a', 'g')));
assert.notOk(is.node(new Date()));
assert.notOk(is.node(42));
assert.notOk(is.node(NaN));
assert.notOk(is.node(Infinity));
assert.notOk(is.node(new Number(42)));
});
});
describe('is.nodeList', function() {
it('should be considered as nodeList', function() {
assert.ok(is.nodeList(document.getElementsByTagName('div')));
assert.ok(is.nodeList(document.getElementsByClassName('foo')));
assert.ok(is.nodeList(document.querySelectorAll('.foo')));
});
it('should not be considered as nodeList', function() {
assert.notOk(is.nodeList(undefined));
assert.notOk(is.nodeList(null));
assert.notOk(is.nodeList(false));
assert.notOk(is.nodeList(true));
assert.notOk(is.nodeList(function () {}));
assert.notOk(is.nodeList([]));
assert.notOk(is.nodeList({}));
assert.notOk(is.nodeList(/a/g));
assert.notOk(is.nodeList(new RegExp('a', 'g')));
assert.notOk(is.nodeList(new Date()));
assert.notOk(is.nodeList(42));
assert.notOk(is.nodeList(NaN));
assert.notOk(is.nodeList(Infinity));
assert.notOk(is.nodeList(new Number(42)));
});
});
describe('is.string', function() {
it('should be considered as string', function() {
assert.ok(is.string('abc'));
assert.ok(is.string(new String('abc')));
});
it('should not be considered as string', function() {
assert.notOk(is.string(undefined));
assert.notOk(is.string(null));
assert.notOk(is.string(false));
assert.notOk(is.string(true));
assert.notOk(is.string(function () {}));
assert.notOk(is.string([]));
assert.notOk(is.string({}));
assert.notOk(is.string(/a/g));
assert.notOk(is.string(new RegExp('a', 'g')));
assert.notOk(is.string(new Date()));
assert.notOk(is.string(42));
assert.notOk(is.string(NaN));
assert.notOk(is.string(Infinity));
assert.notOk(is.string(new Number(42)));
});
});
describe('is.fn', function() {
it('should be considered as function', function() {
assert.ok(is.fn(function () {}));
});
it('should not be considered as function', function() {
assert.notOk(is.fn(undefined));
assert.notOk(is.fn(null));
assert.notOk(is.fn(false));
assert.notOk(is.fn(true));
assert.notOk(is.fn([]));
assert.notOk(is.fn({}));
assert.notOk(is.fn(/a/g));
assert.notOk(is.fn(new RegExp('a', 'g')));
assert.notOk(is.fn(new Date()));
assert.notOk(is.fn(42));
assert.notOk(is.fn(NaN));
assert.notOk(is.fn(Infinity));
assert.notOk(is.fn(new Number(42)));
});
});
});
var listen = require('../src/listen');
var simulant = require('simulant');
describe('good-listener', function() {
before(function() {
global.node = document.createElement('div');
global.node.setAttribute('id', 'foo');
global.node.setAttribute('class', 'foo');
document.body.appendChild(global.node);
});
after(function() {
document.body.innerHTML = '';
});
describe('listen', function() {
it('should throw an error since arguments were not passed', function(done) {
try {
listen();
}
catch(error) {
assert.equal(error.message, 'Missing required arguments');
done();
}
});
it('should throw an error since "target" was invalid', function(done) {
try {
listen(null, 'click', function() {});
}
catch(error) {
assert.equal(error.message, 'First argument must be a String, HTMLElement, HTMLCollection, or NodeList');
done();
}
});
it('should throw an error since "type" was invalid', function(done) {
try {
listen('.btn', false, function() {});
}
catch(error) {
assert.equal(error.message, 'Second argument must be a String');
done();
}
});
it('should throw an error since "callback" was invalid', function(done) {
try {
listen('.btn', 'click', []);
}
catch(error) {
assert.equal(error.message, 'Third argument must be a Function');
done();
}
});
});
describe('listenNode', function() {
before(function() {
global.target = document.querySelector('#foo');
global.spy = sinon.spy(global.target, 'removeEventListener');
});
after(function() {
global.spy.restore();
});
it('should add an event listener', function(done) {
listen(global.target, 'click', function() {
done();
});
simulant.fire(global.target, simulant('click'));
});
it('should remove an event listener', function() {
var listener = listen(global.target, 'click', function() {});
listener.destroy();
assert.ok(global.spy.calledOnce);
});
});
describe('listenNodeList', function() {
before(function() {
global.targets = document.querySelectorAll('.foo');
global.spy = sinon.spy(global.targets[0], 'removeEventListener');
});
after(function() {
global.spy.restore();
});
it('should add an event listener', function(done) {
listen(global.targets, 'click', function() {
done();
});
simulant.fire(global.targets[0], simulant('click'));
});
it('should remove an event listener', function() {
var listener = listen(global.targets, 'click', function() {});
listener.destroy();
assert.ok(global.spy.calledOnce);
});
});
describe('listenSelector', function() {
before(function() {
global.target = document.querySelector('.foo');
global.spy = sinon.spy(document.body, 'removeEventListener');
});
after(function() {
global.spy.restore();
});
it('should add an event listener', function(done) {
listen('.foo', 'click', function() {
done();
});
simulant.fire(global.target, simulant('click'));
});
it('should remove an event listener', function() {
var listener = listen('.foo', 'click', function() {});
listener.destroy();
assert.ok(global.spy.calledOnce);
});
});
});
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# http://editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 4
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[{package.json,bower.json}]
indent_size = 2
node_modules
\ No newline at end of file
language: node_js
node_js:
- stable
{
"name": "select",
"version": "1.1.0",
"description": "Programmatically select the text of a HTML element",
"license": "MIT",
"main": "dist/select.js",
"keywords": [
"range",
"select",
"selecting",
"selection"
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>contenteditable</title>
</head>
<body>
<!-- 1. Define some markup -->
<button type="button">Select</button>
<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>
<!-- 2. Include library -->
<script src="../dist/select.js"></script>
<!-- 3. Select! -->
<script>
var p = document.querySelector('p');
var button = document.querySelector('button');
button.addEventListener('click', function(e) {
var selected = select(p);
console.log(selected);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dropdown</title>
</head>
<body>
<!-- 1. Define some markup -->
<button type="button">Select</button>
<select>
<option>Option 1</option>
<option selected>Option 2</option>
<option>Option 3</option>
</select>
<!-- 2. Include library -->
<script src="../dist/select.js"></script>
<!-- 3. Select! -->
<script>
var dropdown = document.querySelector('select');
var button = document.querySelector('button');
button.addEventListener('click', function(e) {
var selected = select(dropdown);
console.log(selected);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>editable</title>
</head>
<body>
<!-- 1. Define some markup -->
<button type="button">Select</button>
<input type="text" value="Lorem ipsum">
<!-- 2. Include library -->
<script src="../dist/select.js"></script>
<!-- 3. Select! -->
<script>
var input = document.querySelector('input');
var button = document.querySelector('button');
button.addEventListener('click', function(e) {
var selected = select(input);
console.log(selected);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>multiple</title>
</head>
<body>
<!-- 1. Define some markup -->
<button type="button">Select</button>
<input type="text" value="Lorem ipsum">
<textarea>Lorem ipsum</textarea>
<!-- 2. Include library -->
<script src="../dist/select.js"></script>
<!-- 3. Select! -->
<script>
var input = document.querySelector('input');
var textarea = document.querySelector('textarea');
var button = document.querySelector('button');
button.addEventListener('click', function(e) {
console.log(select(input));
console.log(select(textarea));
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>non-editable</title>
</head>
<body>
<!-- 1. Define some markup -->
<button type="button">Select</button>
<div>
<p>Item 1</p>
<p>Item 2</p>
<ul>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<!-- 2. Include library -->
<script src="../dist/select.js"></script>
<!-- 3. Select! -->
<script>
var div = document.querySelector('div');
var button = document.querySelector('button');
button.addEventListener('click', function(e) {
var selected = select(div);
console.log(selected);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>non-editable</title>
</head>
<body>
<!-- 1. Define some markup -->
<button type="button">Select</button>
<p>Lorem ipsum</p>
<!-- 2. Include library -->
<script src="../dist/select.js"></script>
<!-- 3. Select! -->
<script>
var p = document.querySelector('p');
var button = document.querySelector('button');
button.addEventListener('click', function(e) {
var selected = select(p);
console.log(selected);
});
</script>
</body>
</html>
(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){
function select(element) {
var selectedText;
if (element.nodeName === 'SELECT') {
element.focus();
selectedText = element.value;
}
else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
var isReadOnly = element.hasAttribute('readonly');
if (!isReadOnly) {
element.setAttribute('readonly', '');
}
element.select();
element.setSelectionRange(0, element.value.length);
if (!isReadOnly) {
element.removeAttribute('readonly');
}
selectedText = element.value;
}
else {
if (element.hasAttribute('contenteditable')) {
element.focus();
}
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
selectedText = selection.toString();
}
return selectedText;
}
module.exports = select;
},{}]},{},[1])(1)
});
\ No newline at end of file
module.exports = function(karma) {
karma.set({
plugins: ['karma-browserify', 'karma-chai', 'karma-mocha', 'karma-phantomjs-launcher'],
frameworks: ['browserify', 'chai', 'mocha'],
files: [
'src/**/*.js',
'test/**/*.js'
],
preprocessors: {
'src/**/*.js' : ['browserify'],
'test/**/*.js': ['browserify']
},
browserify: {
debug: true
},
browsers: ['PhantomJS']
});
}
{
"_from": "select@^1.1.2",
"_id": "select@1.1.2",
"_inBundle": false,
"_integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
"_location": "/select",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "select@^1.1.2",
"name": "select",
"escapedName": "select",
"rawSpec": "^1.1.2",
"saveSpec": null,
"fetchSpec": "^1.1.2"
},
"_requiredBy": [
"/clipboard"
],
"_resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"_shasum": "0e7350acdec80b1108528786ec1d4418d11b396d",
"_spec": "select@^1.1.2",
"_where": "/Users/zhanghao/brcode/br-client/node_modules/clipboard",
"bugs": {
"url": "https://github.com/zenorocha/select/issues"
},
"bundleDependencies": false,
"deprecated": false,
"description": "Programmatically select the text of a HTML element",
"devDependencies": {
"browserify": "^14.0.0",
"chai": "^3.3.0",
"karma": "^1.4.1",
"karma-browserify": "^5.1.1",
"karma-chai": "^0.1.0",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"mocha": "^3.2.0",
"phantomjs": "^2.1.7"
},
"homepage": "https://github.com/zenorocha/select#readme",
"keywords": [
"range",
"select",
"selecting",
"selection"
],
"license": "MIT",
"main": "src/select.js",
"name": "select",
"repository": {
"type": "git",
"url": "git+https://github.com/zenorocha/select.git"
},
"scripts": {
"build": "browserify src/select.js -s select -o dist/select.js",
"test": "karma start --single-run"
},
"version": "1.1.2"
}
# select
[![Build Status](http://img.shields.io/travis/zenorocha/select/master.svg?style=flat)](https://travis-ci.org/zenorocha/select)
Programmatically select the text of a HTML element.
## Install
You can get it on npm.
```
npm install select --save
```
Or bower, too.
```
bower install select --save
```
If you're not into package management, just [download a ZIP](https://github.com/zenorocha/select/archive/master.zip) file.
## Usage
### Standalone
```html
<script src="dist/select.js"></script>
```
```js
var input = document.querySelector('input');
var result = select(input);
```
### Browserify
```js
var select = require('select');
```
```js
var input = document.querySelector('input');
var result = select(input);
```
## License
[MIT License](http://zenorocha.mit-license.org/) © Zeno Rocha
function select(element) {
var selectedText;
if (element.nodeName === 'SELECT') {
element.focus();
selectedText = element.value;
}
else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
var isReadOnly = element.hasAttribute('readonly');
if (!isReadOnly) {
element.setAttribute('readonly', '');
}
element.select();
element.setSelectionRange(0, element.value.length);
if (!isReadOnly) {
element.removeAttribute('readonly');
}
selectedText = element.value;
}
else {
if (element.hasAttribute('contenteditable')) {
element.focus();
}
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
selectedText = selection.toString();
}
return selectedText;
}
module.exports = select;
var select = require('../src/select');
describe('select editable elements', function() {
before(function() {
global.input = document.createElement('input');
global.input.value = 'lorem ipsum';
global.textarea = document.createElement('textarea');
global.textarea.value = 'lorem ipsum';
document.body.appendChild(global.input);
document.body.appendChild(global.textarea);
});
after(function() {
document.body.innerHTML = '';
});
it('should return the selected text on input', function() {
var result = select(global.input);
assert.equal(result, global.input.value);
});
it('should return the selected text on textarea', function() {
var result = select(global.textarea);
assert.equal(result, global.textarea.value);
});
});
describe('select non-editable element with no children', function() {
before(function() {
global.paragraph = document.createElement('p');
global.paragraph.textContent = 'lorem ipsum';
document.body.appendChild(global.paragraph);
});
after(function() {
document.body.innerHTML = '';
});
it('should return the selected text', function() {
var result = select(global.paragraph);
assert.equal(result, global.paragraph.textContent);
});
});
describe('select non-editable element with child node', function() {
before(function() {
global.li = document.createElement('li');
global.li.textContent = 'lorem ipsum';
global.ul = document.createElement('ul');
global.ul.appendChild(global.li);
document.body.appendChild(global.ul);
});
after(function() {
document.body.innerHTML = '';
});
it('should return the selected text', function() {
var result = select(global.ul);
assert.equal(result, global.ul.textContent);
});
});
describe('select non-editable svg element w/ multiple text children', function() {
before(function() {
global.text1 = document.createElement('text');
global.text1.textContent = 'lorem ipsum';
global.text2 = document.createElement('text');
global.text2.textContent = 'dolor zet';
global.svg = document.createElement('svg');
global.svg.appendChild(global.text1);
global.svg.appendChild(global.text2);
document.body.appendChild(global.svg);
});
after(function() {
document.body.innerHTML = '';
});
it('should return the selected text', function() {
var result = select(global.svg);
assert.equal(result, global.text1.textContent +
global.text2.textContent);
});
});
The MIT License (MIT)
Copyright (c) 2017 Scott Corgan
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
# tiny-emitter
A tiny (less than 1k) event emitter library.
## Install
### npm
```
npm install tiny-emitter --save
```
## Usage
```js
var Emitter = require('tiny-emitter');
var emitter = new Emitter();
emitter.on('some-event', function (arg1, arg2, arg3) {
//
});
emitter.emit('some-event', 'arg1 value', 'arg2 value', 'arg3 value');
```
Alternatively, you can skip the initialization step by requiring `tiny-emitter/instance` instead. This pulls in an already initialized emitter.
```js
var emitter = require('tiny-emitter/instance');
emitter.on('some-event', function (arg1, arg2, arg3) {
//
});
emitter.emit('some-event', 'arg1 value', 'arg2 value', 'arg3 value');
```
## Instance Methods
### on(event, callback[, context])
Subscribe to an event
* `event` - the name of the event to subscribe to
* `callback` - the function to call when event is emitted
* `context` - (OPTIONAL) - the context to bind the event callback to
### once(event, callback[, context])
Subscribe to an event only **once**
* `event` - the name of the event to subscribe to
* `callback` - the function to call when event is emitted
* `context` - (OPTIONAL) - the context to bind the event callback to
### off(event[, callback])
Unsubscribe from an event or all events. If no callback is provided, it unsubscribes you from all events.
* `event` - the name of the event to unsubscribe from
* `callback` - the function used when binding to the event
### emit(event[, arguments...])
Trigger a named event
* `event` - the event name to emit
* `arguments...` - any number of arguments to pass to the event subscribers
## Test and Build
Build (Tests, Browserifies, and minifies)
```
npm install
npm run build
```
Test
```
npm install
npm test
```
## License
[MIT](https://github.com/scottcorgan/tiny-emitter/blob/master/LICENSE)
(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){
function E () {
// Keep this empty so it's easier to inherit from
// (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
}
E.prototype = {
on: function (name, callback, ctx) {
var e = this.e || (this.e = {});
(e[name] || (e[name] = [])).push({
fn: callback,
ctx: ctx
});
return this;
},
once: function (name, callback, ctx) {
var self = this;
function listener () {
self.off(name, listener);
callback.apply(ctx, arguments);
};
listener._ = callback
return this.on(name, listener, ctx);
},
emit: function (name) {
var data = [].slice.call(arguments, 1);
var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
var i = 0;
var len = evtArr.length;
for (i; i < len; i++) {
evtArr[i].fn.apply(evtArr[i].ctx, data);
}
return this;
},
off: function (name, callback) {
var e = this.e || (this.e = {});
var evts = e[name];
var liveEvents = [];
if (evts && callback) {
for (var i = 0, len = evts.length; i < len; i++) {
if (evts[i].fn !== callback && evts[i].fn._ !== callback)
liveEvents.push(evts[i]);
}
}
// Remove event from queue to prevent memory leak
// Suggested by https://github.com/lazd
// Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
(liveEvents.length)
? e[name] = liveEvents
: delete e[name];
return this;
}
};
module.exports = E;
module.exports.TinyEmitter = E;
},{}]},{},[1])(1)
});
\ No newline at end of file
(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
export declare class TinyEmitter {
on(event: string, callback: Function, ctx?: any): this;
once(event: string, callback: Function, ctx?: any): this;
emit(event: string, ...args: any[]): this;
off(event: string, callback?: Function): this;
}
\ No newline at end of file
function E () {
// Keep this empty so it's easier to inherit from
// (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
}
E.prototype = {
on: function (name, callback, ctx) {
var e = this.e || (this.e = {});
(e[name] || (e[name] = [])).push({
fn: callback,
ctx: ctx
});
return this;
},
once: function (name, callback, ctx) {
var self = this;
function listener () {
self.off(name, listener);
callback.apply(ctx, arguments);
};
listener._ = callback
return this.on(name, listener, ctx);
},
emit: function (name) {
var data = [].slice.call(arguments, 1);
var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
var i = 0;
var len = evtArr.length;
for (i; i < len; i++) {
evtArr[i].fn.apply(evtArr[i].ctx, data);
}
return this;
},
off: function (name, callback) {
var e = this.e || (this.e = {});
var evts = e[name];
var liveEvents = [];
if (evts && callback) {
for (var i = 0, len = evts.length; i < len; i++) {
if (evts[i].fn !== callback && evts[i].fn._ !== callback)
liveEvents.push(evts[i]);
}
}
// Remove event from queue to prevent memory leak
// Suggested by https://github.com/lazd
// Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
(liveEvents.length)
? e[name] = liveEvents
: delete e[name];
return this;
}
};
module.exports = E;
module.exports.TinyEmitter = E;
var E = require('./index.js');
module.exports = new E();
{
"_from": "tiny-emitter@^2.0.0",
"_id": "tiny-emitter@2.1.0",
"_inBundle": false,
"_integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
"_location": "/tiny-emitter",
"_phantomChildren": {},
"_requested": {
"type": "range",
"registry": true,
"raw": "tiny-emitter@^2.0.0",
"name": "tiny-emitter",
"escapedName": "tiny-emitter",
"rawSpec": "^2.0.0",
"saveSpec": null,
"fetchSpec": "^2.0.0"
},
"_requiredBy": [
"/clipboard"
],
"_resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"_shasum": "1d1a56edfc51c43e863cbb5382a72330e3555423",
"_spec": "tiny-emitter@^2.0.0",
"_where": "/Users/zhanghao/brcode/br-client/node_modules/clipboard",
"author": {
"name": "Scott Corgan"
},
"bugs": {
"url": "https://github.com/scottcorgan/tiny-emitter/issues"
},
"bundleDependencies": false,
"deprecated": false,
"description": "A tiny (less than 1k) event emitter library",
"devDependencies": {
"@tap-format/spec": "0.2.0",
"browserify": "11.2.0",
"tape": "4.2.1",
"testling": "1.7.1",
"uglify-js": "2.5.0"
},
"homepage": "https://github.com/scottcorgan/tiny-emitter#readme",
"keywords": [
"event",
"emitter",
"pubsub",
"tiny",
"events",
"bind"
],
"license": "MIT",
"main": "index.js",
"name": "tiny-emitter",
"repository": {
"type": "git",
"url": "git+https://github.com/scottcorgan/tiny-emitter.git"
},
"scripts": {
"build": "npm test && npm run bundle && npm run minify",
"bundle": "browserify index.js > dist/tinyemitter.js -s TinyEmitter && echo 'Bundled'",
"minify": "uglifyjs dist/tinyemitter.js -o dist/tinyemitter.min.js -m && echo 'Minified'",
"size": "uglifyjs index.js -o minified.js -m && ls -l && rm minified.js",
"test": "testling | tap-format-spec",
"test-node": "tape test/index.js | tap-format-spec"
},
"testling": {
"files": [
"test/index.js"
],
"browsers": [
"iexplore/10.0",
"iexplore/9.0",
"firefox/16..latest",
"chrome/22..latest",
"safari/5.1..latest",
"ipad/6.0..latest",
"iphone/6.0..latest",
"android-browser/4.2..latest"
]
},
"version": "2.1.0"
}
var Emitter = require('../index');
var emitter = require('../instance');
var test = require('tape');
test('subscribes to an event', function (t) {
var emitter = new Emitter();
emitter.on('test', function () {});
t.equal(emitter.e.test.length, 1, 'subscribed to event');
t.end();
});
test('subscribes to an event with context', function (t) {
var emitter = new Emitter();
var context = {
contextValue: true
};
emitter.on('test', function () {
t.ok(this.contextValue, 'is in context');
t.end();
}, context);
emitter.emit('test');
});
test('subscibes only once to an event', function (t) {
var emitter = new Emitter();
emitter.once('test', function () {
t.notOk(emitter.e.test, 'removed event from list');
t.end();
});
emitter.emit('test');
});
test('keeps context when subscribed only once', function (t) {
var emitter = new Emitter();
var context = {
contextValue: true
};
emitter.once('test', function () {
t.ok(this.contextValue, 'is in context');
t.notOk(emitter.e.test, 'not subscribed anymore');
t.end();
}, context);
emitter.emit('test');
});
test('emits an event', function (t) {
var emitter = new Emitter();
emitter.on('test', function () {
t.ok(true, 'triggered event');
t.end();
});
emitter.emit('test');
});
test('passes all arguments to event listener', function (t) {
var emitter = new Emitter();
emitter.on('test', function (arg1, arg2) {
t.equal(arg1, 'arg1', 'passed the first argument');
t.equal(arg2, 'arg2', 'passed the second argument');
t.end();
});
emitter.emit('test', 'arg1', 'arg2');
});
test('unsubscribes from all events with name', function (t) {
var emitter = new Emitter();
emitter.on('test', function () {
t.fail('should not get called');
});
emitter.off('test');
emitter.emit('test')
process.nextTick(function () {
t.end();
});
});
test('unsubscribes single event with name and callback', function (t) {
var emitter = new Emitter();
var fn = function () {
t.fail('should not get called');
}
emitter.on('test', fn);
emitter.off('test', fn);
emitter.emit('test')
process.nextTick(function () {
t.end();
});
});
// Test added by https://github.com/lazd
// From PR: https://github.com/scottcorgan/tiny-emitter/pull/6
test('unsubscribes single event with name and callback when subscribed twice', function (t) {
var emitter = new Emitter();
var fn = function () {
t.fail('should not get called');
};
emitter.on('test', fn);
emitter.on('test', fn);
emitter.off('test', fn);
emitter.emit('test');
process.nextTick(function () {
t.notOk(emitter.e['test'], 'removes all events');
t.end();
});
});
test('unsubscribes single event with name and callback when subscribed twice out of order', function (t) {
var emitter = new Emitter();
var calls = 0;
var fn = function () {
t.fail('should not get called');
};
var fn2 = function () {
calls++;
};
emitter.on('test', fn);
emitter.on('test', fn2);
emitter.on('test', fn);
emitter.off('test', fn);
emitter.emit('test');
process.nextTick(function () {
t.equal(calls, 1, 'callback was called');
t.end();
});
});
test('removes an event inside another event', function (t) {
var emitter = new Emitter();
emitter.on('test', function () {
t.equal(emitter.e.test.length, 1, 'event is still in list');
emitter.off('test');
t.notOk(emitter.e.test, 0, 'event is gone from list');
t.end();
});
emitter.emit('test');
});
test('event is emitted even if unsubscribed in the event callback', function (t) {
var emitter = new Emitter();
var calls = 0;
var fn = function () {
calls += 1;
emitter.off('test', fn);
};
emitter.on('test', fn);
emitter.on('test', function () {
calls += 1;
});
emitter.on('test', function () {
calls += 1;
});
process.nextTick(function () {
t.equal(calls, 3, 'all callbacks were called');
t.end();
});
emitter.emit('test');
});
test('calling off before any events added does nothing', function (t) {
var emitter = new Emitter();
emitter.off('test', function () {});
t.end();
});
test('emitting event that has not been subscribed to yet', function (t) {
var emitter = new Emitter();
emitter.emit('some-event', 'some message');
t.end();
});
test('unsubscribes single event with name and callback which was subscribed once', function (t) {
var emitter = new Emitter();
var fn = function () {
t.fail('event not unsubscribed');
}
emitter.once('test', fn);
emitter.off('test', fn);
emitter.emit('test');
t.end();
});
test('exports an instance', function (t) {
t.ok(emitter, 'exports an instance')
t.ok(emitter instanceof Emitter, 'an instance of the Emitter class');
t.end();
});
{
"extends": "standard",
"env": {
"browser": true,
"amd": true
}
}
# 0.3.1
- Add TypeScript type definiation from @vlad-ro
# 0.3.0
- Add config option `appendToBody` to support IE
# 0.2.1
- Fix VueClipboard.config is undefined
# 0.2.0
- Add config option `autoSetContainer`
# 0.1.1
- Move vue to peerDependency
- Fix links in npmjs page
# 0.1.0
Add support for `contianer` option from `clipboard.js` v1.7.0, thanks robmazur
# 0.0.9
Upgrade dependency package version
# 0.0.8
Change vue dependency version to ^2.0.0
# 0.0.7
Add method: this.$copyText
# 0.0.6
Add error handler `v-clipboard:error`
# 0.0.5
Add success handler `v-clipboard:success`
# 0.0.3
Add pre-built version for browser
# 0.0.1
First usable version
The MIT License (MIT)
Copyright (c) 2017 Inndy <inndy \dot tw \at gmail \dot com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
\ No newline at end of file
# vue-clipboard2
A simple vuejs 2 binding for clipboard.js
## Install
`npm install --save vue-clipboard2` or use `dist/vue-clipboard.min.js` without webpack
## Usage
For vue-cli user:
```javascript
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
```
For standalone usage:
```html
<script src="vue.min.js"></script>
<!-- must place this line after vue.js -->
<script src="dist/vue-clipboard.min.js"></script>
```
## I want to copy texts without a specific button!
Yes, you can do it by using our new method: `this.$copyText`. See
[sample2](https://github.com/Inndy/vue-clipboard2/blob/master/samples/sample2.html),
where we replace the clipboard directives with a v-on directive.
Modern browsers have some limitations like that you can't use `window.open` without a user interaction.
So there's the same restriction on copying things! Test it before you use it. Make sure you are not
using this method inside any async method.
Before using this feature, read:
[this issue](https://github.com/zenorocha/clipboard.js/issues/218) and
[this page](https://github.com/zenorocha/clipboard.js/wiki/Known-Limitations) first.
## It doesn't work with bootstrap modals
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:
```js
let container = this.$refs.container
this.$copyText("Text to copy", container)
```
Or you can let `vue-clipboard2` set `container` to current element by doing this:
```js
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true // add this line
Vue.use(VueClipboard)
```
## Sample
```html
<div id="app"></div>
<template id="t">
<div class="container">
<input type="text" v-model="message">
<button type="button"
v-clipboard:copy="message"
v-clipboard:success="onCopy"
v-clipboard:error="onError">Copy!</button>
</div>
</template>
<script>
new Vue({
el: '#app',
template: '#t',
data: function () {
return {
message: 'Copy These Text'
}
},
methods: {
onCopy: function (e) {
alert('You just copied: ' + e.text)
},
onError: function (e) {
alert('Failed to copy texts')
}
}
})
</script>
```
## Sample 2
```html
<div id="app"></div>
<template id="t">
<div class="container">
<input type="text" v-model="message">
<button type="button" @click="doCopy">Copy!</button>
</div>
</template>
<script>
new Vue({
el: '#app',
template: '#t',
data: function () {
return {
message: 'Copy These Text'
}
},
methods: {
doCopy: function () {
this.$copyText(this.message).then(function (e) {
alert('Copied')
console.log(e)
}, function (e) {
alert('Can not copy')
console.log(e)
})
}
}
})
</script>
```
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.:
```this.$el.children[1].children[2].textContent```
This will allow you to access the *rendered* content of your components, rather than the components themselves.
### Contribution
PRs welcome, and issues as well! If you want any feature that we don't have currently,
please fire an issue for a feature request.
### License
[MIT License](https://github.com/Inndy/vue-clipboard2/blob/master/LICENSE)
var VueClipboard = require('./vue-clipboard.js')
global.VueClipboard = VueClipboard
window.Vue && global.Vue.use(VueClipboard)
declare module 'vue-clipboard2' {
import Vue, { PluginFunction, WatchOptions } from 'vue'
module "vue/types/vue" {
interface Vue {
$clipboardConfig: {
autoSetContainer: boolean,
appendToBody: boolean
}
$copyText(text: string, container?: object | HTMLElement): Promise<{
action: string,
text: string,
trigger: String | HTMLElement | HTMLCollection | NodeList,
clearSelection: () => void
}>
}
}
class VueClipboard {
static install: PluginFunction<never>
static config: {
autoSetContainer: boolean
appendToBody: boolean
}
}
export default VueClipboard
}
{
"_from": "vue-clipboard2",
"_id": "vue-clipboard2@0.3.1",
"_inBundle": false,
"_integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==",
"_location": "/vue-clipboard2",
"_phantomChildren": {},
"_requested": {
"type": "tag",
"registry": true,
"raw": "vue-clipboard2",
"name": "vue-clipboard2",
"escapedName": "vue-clipboard2",
"rawSpec": "",
"saveSpec": null,
"fetchSpec": "latest"
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",
"_shasum": "6e551fb7bd384889b28b0da3b12289ed6bca4894",
"_spec": "vue-clipboard2",
"_where": "/Users/zhanghao/brcode/br-client",
"author": {
"name": "Inndy"
},
"bugs": {
"url": "https://github.com/Inndy/vue-clipboard2/issues"
},
"bundleDependencies": false,
"dependencies": {
"clipboard": "^2.0.0"
},
"deprecated": false,
"description": "A Vuejs2 binding for clipboard.js",
"devDependencies": {
"browserify": "^16.1.0",
"eslint": ">=5.0.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": ">=2.13.0",
"eslint-plugin-node": ">=7.0.0",
"eslint-plugin-promise": ">=4.0.0",
"eslint-plugin-standard": ">=4.0.0",
"uglify-js": "^3.3.12"
},
"homepage": "https://github.com/Inndy/vue-clipboard2#readme",
"keywords": [
"vue",
"vue2",
"clipboard",
"clipboard.js"
],
"license": "MIT",
"main": "vue-clipboard.js",
"name": "vue-clipboard2",
"peerDependecies": {
"vue": "^2.0.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Inndy/vue-clipboard2.git"
},
"scripts": {
"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"
},
"version": "0.3.1"
}
var Clipboard = require('clipboard/dist/clipboard.min.js') // FIXME: workaround for browserify
var VueClipboardConfig = {
autoSetContainer: false,
appendToBody: true // This fixes IE, see #50
}
var VueClipboard = {
install: function (Vue) {
Vue.prototype.$clipboardConfig = VueClipboardConfig
Vue.prototype.$copyText = function (text, container) {
return new Promise(function (resolve, reject) {
var fakeElement = document.createElement('button')
var clipboard = new Clipboard(fakeElement, {
text: function () { return text },
action: function () { return 'copy' },
container: typeof container === 'object' ? container : document.body
})
clipboard.on('success', function (e) {
clipboard.destroy()
resolve(e)
})
clipboard.on('error', function (e) {
clipboard.destroy()
reject(e)
})
if (VueClipboardConfig.appendToBody) document.body.appendChild(fakeElement)
fakeElement.click()
if (VueClipboardConfig.appendToBody) document.body.removeChild(fakeElement)
})
}
Vue.directive('clipboard', {
bind: function (el, binding, vnode) {
if (binding.arg === 'success') {
el._vClipboard_success = binding.value
} else if (binding.arg === 'error') {
el._vClipboard_error = binding.value
} else {
var clipboard = new Clipboard(el, {
text: function () { return binding.value },
action: function () { return binding.arg === 'cut' ? 'cut' : 'copy' },
container: VueClipboardConfig.autoSetContainer ? el : undefined
})
clipboard.on('success', function (e) {
var callback = el._vClipboard_success
callback && callback(e)
})
clipboard.on('error', function (e) {
var callback = el._vClipboard_error
callback && callback(e)
})
el._vClipboard = clipboard
}
},
update: function (el, binding) {
if (binding.arg === 'success') {
el._vClipboard_success = binding.value
} else if (binding.arg === 'error') {
el._vClipboard_error = binding.value
} else {
el._vClipboard.text = function () { return binding.value }
el._vClipboard.action = function () { return binding.arg === 'cut' ? 'cut' : 'copy' }
}
},
unbind: function (el, binding) {
if (binding.arg === 'success') {
delete el._vClipboard_success
} else if (binding.arg === 'error') {
delete el._vClipboard_error
} else {
el._vClipboard.destroy()
delete el._vClipboard
}
}
})
},
config: VueClipboardConfig
}
if (typeof exports === 'object') {
module.exports = VueClipboard
} else if (typeof define === 'function' && define.amd) {
define([], function () {
return VueClipboard
})
}
......@@ -1759,6 +1759,16 @@
"integrity": "sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==",
"dev": true
},
"clipboard": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
"integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
"requires": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"cliui": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
......@@ -3251,6 +3261,11 @@
}
}
},
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"depd": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
......@@ -4306,6 +4321,14 @@
"slash": "^1.0.0"
}
},
"good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"requires": {
"delegate": "^3.1.2"
}
},
"graceful-fs": {
"version": "4.2.4",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
......@@ -9403,6 +9426,11 @@
"ajv": "^5.0.0"
}
},
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
},
"select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
......@@ -10250,6 +10278,11 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true
},
"tiny-emitter": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
},
"to-arraybuffer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
......@@ -10703,6 +10736,14 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
},
"vue-clipboard2": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",
"integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==",
"requires": {
"clipboard": "^2.0.0"
}
},
"vue-hot-reload-api": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
......
......@@ -14,6 +14,7 @@
"element-ui": "^2.13.2",
"qs": "^6.9.4",
"vue": "^2.5.2",
"vue-clipboard2": "^0.3.1",
"vue-router": "^3.0.1"
},
"devDependencies": {
......
......@@ -7,6 +7,7 @@ import axios from 'axios'
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import qs from 'qs'
import vueClipboard from 'vue-clipboard2'
Vue.config.productionTip = false
Vue.prototype.$http = axios
......@@ -15,6 +16,7 @@ axios.defaults.baseURL = 'http://192.168.8.216:9090'
// axios.defaults.baseURL = 'http://127.0.0.1:9090'
Vue.use(Element, { size: 'small', zIndex: 3000 });
Vue.use(vueClipboard);
router.beforeEach((to, from, next) => {
if (to.meta.title) {
......
......@@ -56,7 +56,7 @@
width="30%">
<span>{{mybizdata}}</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
<el-button type="primary" v-clipboard:copy="JSON.stringify(mybizdata)" v-clipboard:success="onCopy" @click="dialogVisible = false">点击复制</el-button>
</span>
</el-dialog>
</el-col>
......@@ -112,6 +112,57 @@
</el-form>
</el-col>
<el-col :span="8">
<el-form ref="createUserInfo" :model="createUserInfo" label-width="0px">
<el-card class="CadetBlue" shadow="always">
<div slot="header" class="clearfix">
<span>创建指定代理人的健康坊用户</span>
</div>
<div class="text item">
<el-form-item>
<el-input placeholder="代理人手机号" v-model="createUserInfo.agentPhone" clearable></el-input>
</el-form-item>
<div style="margin: 15px 0;"></div>
<el-form-item>
<el-input placeholder="该代理人名下的健康坊用户手机号" v-model="createUserInfo.phone" clearable></el-input>
</el-form-item>
<div style="margin: 15px 0;"></div>
<el-form-item>
<el-button round @click="createUserInfoSubmit">创建用户</el-button>
</el-form-item>
</div>
</el-card>
</el-form>
</el-col>
<el-col :span="8">
<el-form ref="createUserInfo" :model="queryUserInfo" label-width="0px">
<el-card class="LightPink" shadow="always">
<div slot="header" class="clearfix">
<span>查询指定代理人的健康坊用户</span>
</div>
<div class="text item">
<el-form-item>
<el-input placeholder="代理人手机号" v-model="queryUserInfo.agentPhone" clearable></el-input>
</el-form-item>
<div style="margin: 15px 0;"></div>
<el-form-item>
<el-button round @click="queryUserInfoSubmit">查询用户</el-button>
</el-form-item>
</div>
</el-card>
</el-form>
<el-dialog
title="健康坊用户："
:visible.sync="dialogQueryUserInfo"
width="30%">
<span>{{myQueryUserInfo}}</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" v-clipboard:copy="JSON.stringify(myQueryUserInfo)" v-clipboard:success="onCopy" @click="dialogQueryUserInfo = false">点击复制</el-button>
</span>
</el-dialog>
</el-col>
</el-row>
<el-row style="margin-bottom: 15px;">
<el-col :span="8">
<el-form ref="createCluesYoubaoe" :model="createCluesYoubaoe" label-width="0px">
<el-card class="aquamarine" shadow="always">
<div slot="header" class="clearfix">
......@@ -138,7 +189,7 @@
</el-col>
<el-col :span="8">
<el-form ref="createAPI" :model="createAPI" label-width="0px">
<el-card class="CadetBlue" shadow="always">
<el-card class="LightSalmon" shadow="always">
<div slot="header" class="clearfix">
<span>生成接口请求参数</span>
</div>
......@@ -178,32 +229,10 @@
width="30%">
<span>{{myApi}}</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogCreateApi = false">确 定</el-button>
<el-button type="primary" v-clipboard:copy="JSON.stringify(myApi)" v-clipboard:success="onCopy" @click="dialogCreateApi = false">点击复制</el-button>
</span>
</el-dialog>
</el-col>
<!-- <el-col :span="8">-->
<!-- <el-form ref="createUserInfo" :model="createUserInfo" label-width="0px">-->
<!-- <el-card class="CadetBlue" shadow="always">-->
<!-- <div slot="header" class="clearfix">-->
<!-- <span>创建指定代理人的健康坊用户</span>-->
<!-- </div>-->
<!-- <div class="text item">-->
<!-- <el-form-item>-->
<!-- <el-input placeholder="代理人手机号" v-model="createUserInfo.phone" clearable></el-input>-->
<!-- </el-form-item>-->
<!-- <div style="margin: 15px 0;"></div>-->
<!-- <el-form-item>-->
<!-- <el-input placeholder="该代理人名下的健康坊用户手机号" v-model="createUserInfo.agentPhone" clearable></el-input>-->
<!-- </el-form-item>-->
<!-- <div style="margin: 15px 0;"></div>-->
<!-- <el-form-item>-->
<!-- <el-button round @click="">创建用户</el-button>-->
<!-- </el-form-item>-->
<!-- </div>-->
<!-- </el-card>-->
<!-- </el-form>-->
<!-- </el-col>-->
</el-row>
</div>
</template>
......@@ -260,6 +289,16 @@
padding: 0px;
background-color: CadetBlue;
}
.LightPink {
width: calc(100% - 20px);
padding: 0px;
background-color: LightPink;
}
.LightSalmon {
width: calc(100% - 20px);
padding: 0px;
background-color: LightSalmon;
}
</style>
<script>
......@@ -307,6 +346,9 @@
phone: '',
agentPhone: ''
},
queryUserInfo: {
agentPhone: ''
},
createAPI: {
method: '',
biz_data: '',
......@@ -322,7 +364,9 @@
label: '线上环境'
}],
dialogCreateApi: false,
myApi: ''
myApi: '',
dialogQueryUserInfo: false,
myQueryUserInfo: ''
// activityConfigRules: {
// id: [
// { required: true, message: '请输入活动ID', trigger: 'blur' }
......@@ -331,6 +375,13 @@
}
},
methods: {
onCopy (e) {
this.$message({
showClose: true,
message: '内容已复制到剪切板！',
type: 'success'
});
},
onSubmit() {
let config = {
headers: {
......@@ -492,6 +543,74 @@
type: 'error'
});
})
},
createUserInfoSubmit() {
let config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
this.$http.get('/tool/createUser?'+this.$qs.stringify({
phone: this.createUserInfo.phone,
agent_phone: this.createUserInfo.agentPhone
}),config).then((res)=>{
console.log(res);
if(res.data=='agentnull') {
this.$message({
showClose: true,
message: '代理人手机号不存在',
type: 'error'
});
} else if(res.data=='usermore') {
this.$message({
showClose: true,
message: '该用户手机号已存在，请更换手机号',
type: 'error'
});
} else if(res.data=='success') {
this.$message({
showClose: true,
message: '创建健康坊用户成功',
type: 'success'
});
}
}).catch(error=>{
console.log(error);
this.$message({
showClose: true,
message: '服务器处理失败，请核对参数！',
type: 'error'
});
})
},
queryUserInfoSubmit() {
let config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}
this.$http.get('/tool/queryJiankangfang?'+this.$qs.stringify({
phone: this.queryUserInfo.agentPhone
}),config).then((res)=>{
console.log(res);
if(res.data=='usernull') {
this.$message({
showClose: true,
message: '代理人手机号不存在',
type: 'error'
});
} else {
this.myQueryUserInfo = res.data
this.dialogQueryUserInfo = true
}
}).catch(error=>{
console.log(error);
this.$message({
showClose: true,
message: '服务器处理失败，请核对参数！',
type: 'error'
});
})
}
}
}
......