mirror/clipboard.js
1
0
Fork 0
mirror of https://github.com/zenorocha/clipboard.js.git synced 2023-08-10 21:12:48 +03:00
Code Issues Projects Releases Wiki Activity

Removes files that should belong only to gh-pages

Browse Source
This commit is contained in:
Zeno Rocha 2015-09-19 03:23:09 -07:00
parent 702d353447
commit 718c1b33f0
4 changed files with 8 additions and 408 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
bower.json
View File

@ -8,10 +8,5 @@
"clipboard",
"copy",
"cut"
],
"devDependencies": {
"highlightjs": "~8.8.0",
"octicons": "~3.1.0",
"primer-css": "~2.3.3"
}
]
}

232
demo.css
View File

@ -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);}
}

168
index.html
View File

@ -1,168 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clipboard.js</title>
<link rel="stylesheet" href="bower_components/primer-css/css/primer.css">
<link rel="stylesheet" href="bower_components/octicons/octicons/octicons.css">
<link rel="stylesheet" href="bower_components/highlightjs/styles/github.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900">
<link rel="stylesheet" href="demo.css">
</head>
<body>
<header class="header gradient text-center">
<h1 class="title">clipboard.js</h1>
<h2 class="subtitle">A modern approach to copy &amp; cut to the clipboard</h2>
<h2 class="subtitle">No Flash. No dependencies. Just 2kb</h2>
<p class="gh-btns">
<iframe src="http://ghbtns.com/github-btn.html?user=zenorocha&amp;repo=clipboard.js&amp;type=watch&amp;count=true&amp;size=large"
allowtransparency="true" frameborder="0" scrolling="0" width="152" height="30"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=zenorocha&amp;repo=clipboard.js&amp;type=fork&amp;count=true&amp;size=large"
allowtransparency="true" frameborder="0" scrolling="0" width="156" height="30"></iframe>
</p>
</header>
<main class="wrap">
<h1>Install</h1>
<p>You can get it on npm.</p>
<pre><code class="js">npm install clipboard --save</code></pre>
<p>Or bower, too.</p>
<pre><code class="js">bower install clipboard --save</code></pre>
<p>If you're not into package management, just <a href="https://github.com/zenorocha/clipboard.js/archive/master.zip">download a ZIP</a> file.</p>
<h1>Setup</h1>
<p>First, include the script located on the <code>dist</code> folder</p>
<pre><code class="html">&lt;script src="dist/clipboard.min.js"&gt;&lt;/script&gt;</code></pre>
<p>Now, you need to instantiate it using a DOM selector. This selector corresponds to the trigger element, i.e. <code>&lt;button&gt;</code>.</p>
<pre><code class="html">&lt;script&gt; new Clipboard('.btn'); &lt;/script&gt;</code></pre>
<h1>Usage</h1>
<p>We're living a <em>declarative renaissance</em>, that's why we decided to take advantage of <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes">HTML5 data attributes</a> for better usability.</p>
<h3>Copy text from attribute</h3>
<p>The easiest way to copy some content to the clipboard, is to include a <code>data-text</code> attribute in your trigger element.</p>
<div class="example">
<button class="btn" data-action="copy" data-text="Just because you can doesn't mean you should — clipboard.js">Copy to the clipboard</button>
</div>
<pre><code class="html">&lt;!-- Trigger --&gt;
&lt;button class="btn" data-text="Heya!"&gt;Copy&lt;/button&gt;</code></pre>
<h3>Copy text from another element</h3>
<p>Alternatively, you can copy content from another element by adding a <code>data-target</code> attribute in your trigger element.</p>
<p>The value you include on this attribute needs to match another's element <code>id</code> attribute.</p>
<div class="example">
<div class="input-group">
<input id="foo" type="text" value="https://github.com/zenorocha/clipboard.js.git">
<span class="input-group-button">
<button class="btn" type="button" data-action="copy" data-target="foo">
<span class="octicon octicon-clippy"></span>
</button>
</span>
</div>
</div>
<pre><code class="html">&lt;!-- Target --&gt;
&lt;input id="foo" value="https://git.io/vn3cM"&gt;
&lt;!-- Trigger --&gt;
&lt;button class="btn" data-target="foo"&gt;Copy&lt;/button&gt;</code></pre>
<h3>Cut text from another element</h3>
<p>Additionally, you can define a <code>data-action</code> attribute to specify if you want to either <code>copy</code> or <code>cut</code> content.</p>
<p>If you omit this attribute, <code>copy</code> will be used by default.</p>
<div class="example">
<div class="input-group">
<textarea id="bar" cols="62" rows="4" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga.</textarea>
</div>
<div class="form-actions">
<button class="btn" type="button" data-action="cut" data-target="bar">
Cut to the clipboard
</button>
</div>
</div>
<pre><code class="html">&lt;!-- Target --&gt;
&lt;textarea id="bar"&gt;clipboard.js rocks!&lt;/textarea&gt;
&lt;!-- Trigger --&gt;
&lt;button class="btn" data-action="cut" data-target="bar"&gt;
Copy
&lt;/button&gt;</code></pre>
<p>As you may expect, the <code>cut</code> action only works on <code>&lt;input&gt;</code> or <code>&lt;textarea&gt;</code> elements.</p>
<h1>Browser Support</h1>
<p>This library relies on both <a href="https://developer.mozilla.org/en-US/docs/Web/API/Selection">Selection</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand">execCommand</a> APIs. When combined, they're supported in the following browsers.</p>
<ul class="support">
<li>
<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/chrome/chrome_128x128.png" width="64" height="64" alt="Chrome logo">
<p>Chrome 42+</p>
<li>
<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/firefox/firefox_128x128.png" width="64" height="64" alt="Firefox logo">
<p>Firefox 41+</p>
</li>
<li>
<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/internet-explorer/internet-explorer_128x128.png" width="64" height="64" alt="Internet Explorer logo">
<p>IE 9+</p>
</li>
<li>
<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/opera/opera_128x128.png" width="64" height="64" alt="Opera logo">
<p>Opera 29+</p>
</li>
<li>
<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/safari/safari_128x128.png" width="64" height="64" alt="Safari logo">
<p>Safari ✘</p>
</li>
</ul>
</main>
<footer class="footer gradient text-center">
<p class="credits">
Made with <span class="love">♥</span> by <a class="credits-link" href="http://zenorocha.com/">Zeno Rocha</a> under <a class="credits-link" href="http://zenorocha.mit-license.org/">MIT license</a>
</p>
</footer>
<!-- Clipboard.js -->
<script src="dist/clipboard.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
new Clipboard('.btn');
});
</script>
<!-- Highlight.js -->
<script src="bower_components/highlightjs/highlight.pack.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-4114546-44', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>

9
package.json
View File

@ -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"
},