Merge pull request #3 from lizfischer/development

Development
lizfischer · Mar 20, 2016 · 5ca38a1 · 5ca38a1
2 parents 38e887d + e452499
commit 5ca38a1
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 8 deletions.
diff --git a/cropper/css/main.css b/cropper/css/main.css
@@ -72,3 +72,45 @@ input {
 }
 
 
+/**
+	Tooltip
+*/
+.tooltip-wrap {
+  color: #555;
+  cursor: help;
+  font-family: "Gill Sans", Impact, sans-serif;
+  font-size: 12px;
+	display: inline-block;
+  position: relative;
+  text-align: center;
+  -webkit-transform: translateZ(0); /* webkit flicker fix */
+  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
+}
+
+.tooltip-wrap .tooltip {
+	display: none;
+	position: absolute;
+	z-index: 1;
+	padding: 5px 8px;
+	top: 37px;
+	left: -50%;
+	background-color: #666;
+	color: white;
+	border-radius: 3px;
+}
+
+/* CSS Triangle */
+.tooltip-wrap .tooltip:after {
+	width: 0;
+	height: 0;
+	border-left: 8px solid transparent;
+	border-right: 8px solid transparent;
+	border-bottom: 8px solid #666;
+	top: -8px;
+	content: " ";
+	height: 0;
+	left: 50%;
+	margin-left: -15%;
+	position: absolute;
+	width: 0;
+}
diff --git a/cropper/index.html b/cropper/index.html
@@ -10,8 +10,10 @@
 	<link rel="stylesheet" href="css/jquery.Jcrop.min.css"> <!-- required for jcrop to work right! -->
 	<link rel="stylesheet" href="css/main.css">
 	<link rel=stylesheet href="css/colors.css">
+	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 
 	<script type="text/javascript" src="js/jquery.min.js"></script>
+	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 	<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
 	<script type="text/javascript" src="js/clipboard.min.js"></script>
 	<script type="text/javascript" src="js/cropper.js"></script>
@@ -30,14 +32,12 @@ <h1>IIIF Image Cropper</h1>
 			<input type="text" name="output" id="output" readonly>
 
 			<!-- Copy to clipboad -->
-			<button class="btn" id="copy" data-clipboard-target="#output">
-				<img src="assets/clippy.svg" alt="Copy to clipboard">
-			</button>
-			<script>
-				(function(){
-					new Clipboard('.btn');
-				})();
-			</script>
+			<div class="tooltip-wrap" id="copy-tip">
+				<button class="btn" id="copy" data-clipboard-target="#output">
+					<img src="assets/clippy.svg" alt="Copy to clipboard">
+				</button>
+				<div class="tooltip" id="copy-tip-text">Copied!</div>
+			</div>
 		</div>
 
 		<!-- img placeholder -->

diff --git a/cropper/js/cropper.js b/cropper/js/cropper.js
@@ -19,6 +19,9 @@ $(document).ready(function(){
 		// This is also a workaround for a jcrop issue whereby it does not properly handle changing images and box constraints.
 		$('#target').removeAttr('style');
 
+		// Clear output box
+		$('#output').val('');
+
 		// Get input
 		var url = document.getElementById("URL").value;
 		// Display image
@@ -95,5 +98,20 @@ $(document).ready(function(){
 		return {'x':x, 'y':y, 'w':w, 'h':h}
 	}
 
+	/** CLIPBOARD **/
+
+	var clipboard = new Clipboard('.btn');
+
+	clipboard.on('success', function(e) {
+		console.log('Success');
+		$('#copy-tip-text').text('Copied!');
+		$('#copy-tip-text').fadeIn(300).delay(1000).fadeOut(300);
+	});
+
+	clipboard.on('error', function(e) {
+		$('#copy-tip-text').text('Ctrl+C to copy');
+		$('#copy-tip-text').fadeIn(300).delay(1000).fadeOut(300);
+	});
+
 
 });