add copied code on click and chenged modify class on element class

vUdav · Jan 31, 2016 · 5d138be · 5d138be
1 parent 38fa38d
commit 5d138be
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 42 deletions.
diff --git a/.TODO b/.TODO
diff --git a/src/index.html b/src/index.html
@@ -8,6 +8,8 @@
 </head>
 <body>
 
+	<div class="copy-notify" id="copy-notify"></div>
+
 	<header class="page-header">
 		<h1 class="page-header__title">FlexBox Guide</h1>
 		<address class="page-header__author">this project on <a href="https://github.com/vUdav/flexbox-guide" target="_blank">GitHub</a> by <a href="http://vudav.ru" rel="author" target="_blank">Valery Liubimov</a></address>
@@ -19,50 +21,50 @@ <h1 class="page-header__title">FlexBox Guide</h1>
 			<h2 class="flexbox-container__title">Parent Flex-container</h2>
 				<div class="code-container">
 <pre class="code-container__element">
-<span class="code-container__element--param">display:</span> <a href="#" class="code-container__element--value">flex</a>
-         <a href="#" class="code-container__element--value">inline-flex</a>
+<span class="code-container__element-param">display:</span> <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="display: flex;">flex</a>
+         <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="display: inline-flex;">inline-flex</a>
 </pre>
 
 <pre class="code-container__element" id="flex-direction">
-<span class="code-container__element--param">flex-direction:</span> <a href="#" class="code-container__element--value">row</a>
-                <a href="#" class="code-container__element--value">row-reverse</a>
-                <a href="#" class="code-container__element--value">column</a>
-                <a href="#" class="code-container__element--value">column-reverse</a>
+<span class="code-container__element-param">flex-direction:</span> <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="flex-direction: row;">row</a>
+                <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="flex-direction: row-reverse;">row-reverse</a>
+                <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="flex-direction: column;">column</a>
+                <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="flex-direction: column-reverse;">column-reverse</a>
 </pre>
 
 <pre class="code-container__element" id="flex-wrap">
-<span class="code-container__element--param">flex-wrap:</span> <a href="#" class="code-container__element--value">nowrap</a>
-           <a href="#" class="code-container__element--value">wrap</a>
-           <a href="#" class="code-container__element--value">wrap-reverse</a>
+<span class="code-container__element-param">flex-wrap:</span> <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="flex-wrap: nowrap;">nowrap</a>
+           <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="flex-wrap: wrap;">wrap</a>
+           <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="flex-wrap: wrap-reverse;">wrap-reverse</a>
 </pre>
 
 <pre class="code-container__element">
-<span class="code-container__element--param">justify-content:</span> <a href="#" class="code-container__element--value">flex-start</a>
-                 <a href="#" class="code-container__element--value">flex-end</a>
-                 <a href="#" class="code-container__element--value">center</a>
-                 <a href="#" class="code-container__element--value">space-between</a>
-                 <a href="#" class="code-container__element--value">space-around</a>
+<span class="code-container__element-param">justify-content:</span> <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="justify-content: flex-start;">flex-start</a>
+                 <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="justify-content: flex-end;">flex-end</a>
+                 <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="justify-content: center;">center</a>
+                 <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="justify-content: space-between;">space-between</a>
+                 <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="justify-content: space-around;">space-around</a>
 </pre>
 
 <pre class="code-container__element">
-<span class="code-container__element--param">align-items:</span> <a href="#" class="code-container__element--value">flex-start</a>
-             <a href="#" class="code-container__element--value">flex-end</a>
-             <a href="#" class="code-container__element--value">center</a>
-             <a href="#" class="code-container__element--value">baseline</a>
-             <a href="#" class="code-container__element--value">stretch</a>
+<span class="code-container__element-param">align-items:</span> <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-items: flex-start;">flex-start</a>
+             <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-items: flex-end;">flex-end</a>
+             <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-items: center;">center</a>
+             <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-items: baseline;">baseline</a>
+             <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-items: stretch;">stretch</a>
 </pre>
 
 <pre class="code-container__element">
-<span class="code-container__element--param">align-content:</span> <a href="#" class="code-container__element--value">flex-start</a>
-               <a href="#" class="code-container__element--value">flex-end</a>
-               <a href="#" class="code-container__element--value">center</a>
-               <a href="#" class="code-container__element--value">space-between</a>
-               <a href="#" class="code-container__element--value">space-around</a>
-               <a href="#" class="code-container__element--value">stretch</a>
+<span class="code-container__element-param">align-content:</span> <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-content: flex-start;">flex-start</a>
+               <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-content: flex-end;">flex-end</a>
+               <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-content: center;">center</a>
+               <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-content: space-between;">space-between</a>
+               <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-content: space-around;">space-around</a>
+               <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-content: stretch;">stretch</a>
 </pre>
 
 <pre class="code-container__element">
-<span class="code-container__element--param">flex-flow:</span> <a href="#flex-direction" class="code-container__element--value">&lt;flex-direction&gt;</a> <a href="#flex-wrap" class="code-container__element--value">&lt;flex-wrap&gt;</a>
+<span class="code-container__element-param">flex-flow:</span> <a href="#flex-direction" class="code-container__element-value" data-clipboard-text="flex-flow: row nowrap;">&lt;flex-direction&gt;</a> <a href="#flex-wrap" class="code-container__element-value" data-clipboard-text="flex-flow: row nowrap;">&lt;flex-wrap&gt;</a>
 </pre>
 			</div>
 		</div>
@@ -73,39 +75,40 @@ <h2 class="flexbox-container__title">Parent Flex-container</h2>
 			<h2 class="flexbox-container__title">Children Flex-container</h2>
 			<div class="code-container">
 <pre class="code-container__element">
-<span class="code-container__element--param">order:</span> <input type="number" value="0" min="0" id="flex-order" class="code-container__element--value">
+<span class="code-container__element-param">order:</span> <input type="number" value="0" min="0" id="flex-order" class="code-container__element-value">
 </pre>
 
 <pre class="code-container__element" id="flex-grow">
-<span class="code-container__element--param">flex-grow:</span> <input type="number" value="0" min="0" id="flex-grow" class="code-container__element--value">
+<span class="code-container__element-param">flex-grow:</span> <input type="number" value="0" min="0" id="flex-grow" class="code-container__element-value">
 </pre>
 
 <pre class="code-container__element" id="flex-shrink">
-<span class="code-container__element--param">flex-shrink:</span> <input type="number" value="1" min="0" id="flex-shrink" class="code-container__element--value">
+<span class="code-container__element-param">flex-shrink:</span> <input type="number" value="1" min="0" id="flex-shrink" class="code-container__element-value">
 </pre>
 
 <pre class="code-container__element" id="flex-basis">
-<span class="code-container__element--param">flex-basis:</span> <a href="#" class="code-container__element--value">auto</a>
-            <input type="number" value="0" min="0" id="flex-basis" class="code-container__element--value">
+<span class="code-container__element-param">flex-basis:</span> <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="flex-basis: auto;">auto</a>
+            <input type="number" value="0" min="0" id="flex-basis" class="code-container__element-value">
 </pre>
 
 <pre class="code-container__element">
-<span class="code-container__element--param">flex:</span> <a href="#flex-grow" class="code-container__element--value">&lt;flex-grow&gt;</a> <a href="#flex-shrink" class="code-container__element--value">&lt;flex-shrink&gt;</a> <a href="#flex-basis" class="code-container__element--value">&lt;flex-basis&gt;</a>
+<span class="code-container__element-param">flex:</span> <a href="#flex-grow" class="code-container__element-value" data-clipboard-text="flex: 0 1 auto;">&lt;flex-grow&gt;</a> <a href="#flex-shrink" class="code-container__element-value" data-clipboard-text="flex: 0 1 auto;">&lt;flex-shrink&gt;</a> <a href="#flex-basis" class="code-container__element-value" data-clipboard-text="flex: 0 1 auto;">&lt;flex-basis&gt;</a>
 </pre>
 
 <pre class="code-container__element">
-<span class="code-container__element--param">align-items:</span> <a href="#" class="code-container__element--value">auto</a>
-             <a href="#" class="code-container__element--value">flex-start</a>
-             <a href="#" class="code-container__element--value">flex-end</a>
-             <a href="#" class="code-container__element--value">center</a>
-             <a href="#" class="code-container__element--value">baseline</a>
-             <a href="#" class="code-container__element--value">stretch</a>
+<span class="code-container__element-param">align-items:</span> <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-items: auto;">auto</a>
+             <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-items: flex-start;">flex-start</a>
+             <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-items: flex-end;">flex-end</a>
+             <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-items: center;">center</a>
+             <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-items: baseline;">baseline</a>
+             <a href="javascript:void(0);" class="code-container__element-value" data-clipboard-text="align-items: stretch;">stretch</a>
 </pre>
 			</div>
 		</div>
 	</section>
 
 	<script src="http://code.jquery.com/jquery.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
 	<script src="js/script.js"></script>
 </body>
 </html>
diff --git a/src/js/script.js b/src/js/script.js
@@ -4,4 +4,13 @@ $(document).ready(function() {
 		var propertyId = $(this).attr('href');
 		$(propertyId).toggleClass('code-container__element--pulse');
 	});
+
+	// copy to clipboard property and value then click on value
+	var clipboard = new Clipboard('.code-container__element--value');
+	clipboard.on('success', function(e) {
+		$('#copy-notify').html('<strong>'+e.text+'</strong><br>is copied!');
+		$('#copy-notify').addClass('copy-notify--success');
+		setTimeout(function(){$('#copy-notify').removeClass('copy-notify--success')}, 3000);
+		e.clearSelection();
+	});
 });
diff --git a/src/less/code-container.less b/src/less/code-container.less
@@ -22,10 +22,10 @@
 			animation-duration: 1s;
 			animation-iteration-count: 2;
 		}
-		&--param {
+		&-param {
 			color: @code-param-color;
 		}
-		&--value {
+		&-value {
 			color: @code-link-color;
 			width: 35px;
 			background-color: transparent;

diff --git a/src/less/style.less b/src/less/style.less
@@ -3,4 +3,5 @@
 @import url(main-styles);
 @import url(page-header);
 @import url(flexbox-container);
-@import url(code-container);
+@import url(code-container);
+@import url(copy-notify);
diff --git a/src/less/variables.less b/src/less/variables.less
@@ -8,6 +8,9 @@
 @link-color:                  #3996F9;
 @link-color--hover:           darken(@link-color, 20%);
 
+@success-color: #90C695;
+@error-color: #d9534f;
+
 @code-bg: #272822;
 @code-text-color: #fff;
 @code-param-color: #79ABFF;