From 39c01da48abded18bb5d30a4aca67e97240dbe79 Mon Sep 17 00:00:00 2001
From: Gautam Kumar <guruonly007@gmail.com>
Date: Thu, 8 Feb 2018 12:05:14 +0530
Subject: [PATCH 1/5] Add copy to click feature

---
 index.html | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 8ca0cfb..44ffc83 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,6 @@
         <!-- Bootstrap CSS -->
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
         <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
-
         <title>Image filter with Vue.js and CSS3</title>
 		<style>
 			pre{
@@ -29,6 +28,12 @@
 				background: #f1f1f1;
 				cursor: not-allowed;
 			}
+			#copy-code{ position: relative; }
+			#copy-code .btn{
+				position: absolute;
+				top: 0;
+				right: 0;
+			 }
 			[v-clock{ display: none; }]
 		</style>
     </head>
@@ -76,8 +81,12 @@ <h2 class="h4 py-5">Syntax - <p> <code>.class-filter{ filter: &lt;filter-functio
 
 	                <div class="col-md-6 sticky-top">
 	                	<div class="card mb-2 bg-dark">
-            				<div class="card-body">
+            				<div class="card-body" id="copy-code">
                         		<pre>img: {<br>&nbsp;&nbsp;filter: {{filters.filter}}; <br>}</pre>
+                        		<button @click='textCopied = !textCopied' :disabled='!image' data-clipboard-target="#copy-code" class="btn btn-sm btn-dark">
+									<span v-if='textCopied'>Copied</span>
+									<span v-else='textCopied'>Copy code</span>
+                        		</button>
             				</div>
                 		</div>
 	                    <div class="card">
@@ -149,12 +158,22 @@ <h5 class="card-title float-left m-0">Adjust the filter</h5>
 			image: null,
 			filterFunctions: null,
 			width: 0,
-			height: 0
+			height: 0,
+			textCopied: false
 		},
 
 		created() {
 			this.filterFunctions = this.defaultValues();
 		},
+		watch: {
+			textCopied() {
+				setTimeout(function() {
+					if(this.textCopied == true) {
+						this.textCopied = false;
+					}
+				}.bind(this), 350);
+			}
+		},
 		computed: {
 			filters() {
 				var filterString = "";
@@ -236,6 +255,12 @@ <h5 class="card-title float-left m-0">Adjust the filter</h5>
 	});
 	</script>
 
-
+	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
+	<script>
+		$(function(){
+		    new Clipboard('.btn');
+		});
+	</script>
   </body>
 </html>
\ No newline at end of file

From 0495c3bde6275ba34098b385c2620a20098c86b8 Mon Sep 17 00:00:00 2001
From: Gautam Kumar <guruonly007@gmail.com>
Date: Thu, 8 Feb 2018 22:00:11 +0530
Subject: [PATCH 2/5] Add fork on github button

---
 index.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/index.html b/index.html
index 44ffc83..62263ab 100644
--- a/index.html
+++ b/index.html
@@ -51,6 +51,9 @@
                     <div class="col-md-10 offset-md-1 text-center my-5">
                         <h1 class="display-3">CSS3 Filter with Vue.js</h2>
                         <h2 class="h4 py-5">Syntax - <p> <code>.class-filter{ filter: &lt;filter-function&gt; [&lt;filter-function&gt;] }</code></p></h2>
+                        <a href="https://github.com/ariabid/vuejs-css3-image-filter/" class="btn btn-large btn-primary" title="CSS3 image filter with Vuejs">
+                            <i class="fa fa-code-fork"></i> fork on Github
+                        </a>
                     </div>
 
                 </div>

From 59c7ad7b3277b8a10762771437962cf53812965b Mon Sep 17 00:00:00 2001
From: Gautam Kumar <guruonly007@gmail.com>
Date: Thu, 8 Feb 2018 22:39:03 +0530
Subject: [PATCH 3/5] Add clipboard.js in readme.md

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 14a9738..3881af5 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# CSS3 image filter with Vuejs 
+# CSS3 image filter with Vuejs
 
 A tiny app to apply css3 filter function to the images. Upload and apply filters easily.
 
@@ -15,6 +15,7 @@ Made with **Bootstrap 4** and **Vue.js**
 
 * [Bootstrap V4](https://getbootstrap.com/docs/4.0/getting-started/introduction/) Stable
 * [Vue.js](https://vuejs.org/) - Vue.js
+* [clipboard.js](https://clipboardjs.com) - clipboard.js
 
 ## Authors
 

From 09ddbef633d5964de0949379055ce296837e5f57 Mon Sep 17 00:00:00 2001
From: Gautam Kumar <r8here@users.noreply.github.com>
Date: Wed, 8 May 2019 11:47:53 +0530
Subject: [PATCH 4/5] Update License

---
 LICENSE | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/LICENSE b/LICENSE
index 3063665..8fe99d6 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Abid Raza
+Copyright (c) 2019 Gautam Kumar
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

From 67011f2c94ffd79f6f0f25c28694411730c97475 Mon Sep 17 00:00:00 2001
From: Gautam Kumar <r8here@users.noreply.github.com>
Date: Wed, 8 May 2019 11:48:35 +0530
Subject: [PATCH 5/5] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 3881af5..4edb532 100644
--- a/README.md
+++ b/README.md
@@ -23,4 +23,4 @@ Made with **Bootstrap 4** and **Vue.js**
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.