diff --git a/bower.json b/bower.json index daa127c..5bf1d98 100644 --- a/bower.json +++ b/bower.json @@ -8,10 +8,5 @@ "clipboard", "copy", "cut" - ], - "devDependencies": { - "highlightjs": "~8.8.0", - "octicons": "~3.1.0", - "primer-css": "~2.3.3" - } + ] } diff --git a/demo.css b/demo.css deleted file mode 100644 index ef142ee..0000000 --- a/demo.css +++ /dev/null @@ -1,232 +0,0 @@ -body { - font-family: 'Lato', sans-serif; -} - -.gradient { - background: #4cd964; - background: -moz-linear-gradient(45deg, #4cd964 0%, #5ac8fa 100%); - background: -webkit-gradient(left bottom, right top, color-stop(0%, #4cd964), color-stop(100%, #5ac8fa)); - background: -webkit-linear-gradient(45deg, #4cd964 0%, #5ac8fa 100%); - background: -o-linear-gradient(45deg, #4cd964 0%, #5ac8fa 100%); - background: -ms-linear-gradient(45deg, #4cd964 0%, #5ac8fa 100%); - background: linear-gradient(45deg, #4cd964 0%, #5ac8fa 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cd964', endColorstr='#5ac8fa', GradientType=1 ); - margin: 0 auto; -} - -/* ========================================================================== - Header - ========================================================================== */ - -.header { - padding-top: 92px; -} - -.title { - color: white; - font-size: 64px; - font-weight: 900; - letter-spacing: -1px; - margin: 0 0 20px; -} - -.subtitle { - color: #16a085; - font-size: 27px; - font-weight: 400; - margin: 0 0 20px; -} - -.subtitle + .subtitle { - color: white; -} - -.gh-btns { - margin: 92px 0 0; - background: rgba(0, 0, 0, .1); - padding: 20px 0 10px; -} - -/* ========================================================================== - Main - ========================================================================== */ - -.wrap { - margin: 0 auto 90px; - width: 500px; -} - -p { - color: #333; - font-size: 18px; - line-height: 1.7; -} - -a { - color: #1BC1A1; - border-bottom: 1px dotted #1BC1A1; - -webkit-transition: opacity .3s ease-in-out; - transition: opacity .3s ease-in-out; -} - -a:hover, -a:focus { - text-decoration: none; - opacity: .7; -} - -h1 { - margin-top: 80px; -} - -h3 { - color: #333; - margin: 40px 0; - font-size: 18px; - font-weight: 300; - text-align: center; -} - -/* Code - ========================================================================== */ - -pre code { - font-size: 14px; - line-height: 20px; -} - -code { - background-color: rgba(0, 0, 0, 0.04); - border-radius: 3px; - font-size: 85%; - margin: 0; - padding: 0.2em; -} - -.hljs-keyword { - color: #008080; - font-weight: normal; -} - -/* Example - ========================================================================== */ - -.example { - position: relative; - margin: 15px 0 0; - padding: 39px 19px 14px; - background-color: #fff; - border-radius: 4px 4px 0 0; - border: 1px solid #ddd; -} - -.example p { - color: #666; -} - -.example:after { - content: "Example"; - position: absolute; - top: 0; - left: 0; - padding: 2px 8px; - font-size: 12px; - font-weight: bold; - background-color: #f5f5f5; - color: #9da0a4; - border-radius: 4px 0 4px 0; -} - -.example + pre { - background: #f8f8f8; - border-radius: 4px; - border: 1px solid #ddd; - clear: both; - margin-top: -20px; - padding: 20px 5px 0; -} - -/* Live example - ========================================================================== */ - -.form-actions { - margin-top: 15px; -} - -.form-actions .btn { - float: left; -} - -textarea { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - width: 100%; -} - -/* Support - ========================================================================== */ - -.support { - list-style: none; -} - -.support li { - display: inline-block; - text-align: center; - margin: 5px 8px 0; -} - -.support p { - margin: 0; -} - -/* ========================================================================== - Footer - ========================================================================== */ - -.footer { - padding: 36px 0; -} - -.credits { - font-weight: 400; - font-family: 'Lato', sans-serif; - font-size: 20px; - color: #16a085; -} - -.credits-link { - color: white; - border-color: white; -} - -.credits-link:hover, -.credits-link:focus { - text-decoration: none; - border-color: white; -} - -.love { - display: inline-block; - position: relative; - top: .2em; - font-size: 1.4em; - -webkit-transform: scale(.9); - -moz-transform: scale(.9); - transform: scale(.9); - -webkit-animation: love .5s infinite linear alternate-reverse; - -moz-animation: love .5s infinite linear alternate-reverse; - animation: love .5s infinite linear alternate-reverse; -} - -@-webkit-keyframes love { - to {-webkit-transform: scale(1.2);} -} - -@-moz-keyframes love { - to {-moz-transform: scale(1.2);} -} -@keyframes love { - to {transform: scale(1.2);} -} diff --git a/index.html b/index.html deleted file mode 100644 index 347cea8..0000000 --- a/index.html +++ /dev/null @@ -1,168 +0,0 @@ - - - - - clipboard.js - - - - - - - - -
-

clipboard.js

-

A modern approach to copy & cut to the clipboard

-

No Flash. No dependencies. Just 2kb

-

- - -

-
- -
-

Install

- -

You can get it on npm.

- - 
npm install clipboard --save
- -

Or bower, too.

- - 
bower install clipboard --save
- -

If you're not into package management, just download a ZIP file.

- -

Setup

- -

First, include the script located on the dist folder

- - 
<script src="dist/clipboard.min.js"></script>
- -

Now, you need to instantiate it using a DOM selector. This selector corresponds to the trigger element, i.e. <button>.

- - 
<script> new Clipboard('.btn'); </script>
- -

Usage

- -

We're living a declarative renaissance, that's why we decided to take advantage of HTML5 data attributes for better usability.

- -

Copy text from attribute

- -

The easiest way to copy some content to the clipboard, is to include a data-text attribute in your trigger element.

- -
- -
- - 
<!-- Trigger -->
-<button class="btn" data-text="Heya!">Copy</button>
- -

Copy text from another element

- -

Alternatively, you can copy content from another element by adding a data-target attribute in your trigger element.

-

The value you include on this attribute needs to match another's element id attribute.

- -
-
- - - - -
-
- - 
<!-- Target -->
-<input id="foo" value="https://git.io/vn3cM">
-
-<!-- Trigger -->
-<button class="btn" data-target="foo">Copy</button>
- -

Cut text from another element

- -

Additionally, you can define a data-action attribute to specify if you want to either copy or cut content.

-

If you omit this attribute, copy will be used by default.

- -
-
- -
-
- -
-
- - 
<!-- Target -->
-<textarea id="bar">clipboard.js rocks!</textarea>
-
-<!-- Trigger -->
-<button class="btn" data-action="cut" data-target="bar">
-    Copy
-</button>
- -

As you may expect, the cut action only works on <input> or <textarea> elements.

- -

Browser Support

- -

This library relies on both Selection and execCommand APIs. When combined, they're supported in the following browsers.

- - -
- - - - - - - - - - - - - - - diff --git a/package.json b/package.json index 7a96ad8..afc1a51 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,14 @@ { "name": "clipboard", "version": "0.0.0", - "description": "A modern approach to copy to the clipboard", + "description": "A modern approach to copy & cut to the clipboard", "main": "src/clipboard.js", - "dependencies": { + "keywords": [ + "clipboard", + "copy", + "cut" + ], + "devDependencies": { "babel": "^5.8.23", "uglify": "^0.1.5" },