Additional buttons added

Philipp · Philipp · commit 4ab236835484 · 2018-03-05T15:09:39.000+02:00
diff --git a/example.html b/example.html
@@ -0,0 +1,33 @@
+<!doctype html>
+
+<title>CodeMirror: Autoresize Demo</title>
+<meta charset="utf-8"/>
+
+<link rel="stylesheet" href="bower_components/codemirror/lib/codemirror.css">
+<script src="bower_components/codemirror/lib/codemirror.js"></script>
+<script src="bower_components/codemirror/mode/css/css.js"></script>
+<style type="text/css">
+    .CodeMirror {
+        border: 1px solid #eee;
+        height: auto;
+    }
+</style>
+
+
+<article>
+    <h2>Autoresize Demo</h2>
+    <form><textarea id="code" name="code">
+.CodeMirror {
+  border: 1px solid #eee;
+  height: auto;
+}
+</textarea></form>
+
+    <script>
+        var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+            lineNumbers: true,
+            viewportMargin: Infinity
+        });
+    </script>
+
+</article>
diff --git a/index.html b/index.html
@@ -5,14 +5,18 @@
     <link rel="stylesheet" href="bower_components/codemirror/lib/codemirror.css">
     <script src="bower_components/codemirror/mode/xml/xml.js"></script>
 
-    <script src="philsweb.jquery-codemirror.min.js"></script>
+    <script src="philsweb.jquery-codemirror.js"></script>
     <link rel="stylesheet" href="philsweb.codemirror.css">
 
     <style>
+        .CodeMirror {
+            height: inherit;
+        }
+
         .code-snippet-group-1 {
             margin: 10px;
             width: 250px;
-            height: 250px;
+            height: 150px;
             border: 1px solid black;
             display: inline-block;
         }
@@ -23,6 +27,10 @@
             height: 250px;
             border: 1px solid black;
         }
+
+        .codemirror-buttons-wrapper {
+            z-index: 100;
+        }
     </style>
 </head>
 
diff --git a/philsweb.codemirror.css b/philsweb.codemirror.css
@@ -1,3 +1,21 @@
-.CodeMirror {
-    height: inherit;
+.codemirror-buttons-wrapper {
+    position: relative;
+    z-index: 9999; /* @todo Should be configured */
+    display: none;
+}
+
+.codemirror-buttons {
+    position: absolute;
+    width: 100%;
+    background-color: rgba(255, 255, 255, .75);
+}
+
+.codemirror-button {
+    cursor: pointer;
+    margin: 5px;
+    float: right;
+}
+
+.codemirror-button:hover {
+    font-weight: bold;
 }
diff --git a/philsweb.jquery-codemirror.js b/philsweb.jquery-codemirror.js
@@ -78,6 +78,21 @@
 
             $.data(this, 'codemirror', CodeMirror(this, configs));
 
+            // Buttons
+            var buttonsWrapper = $('<div>');
+            var buttons = $('<div>');
+            var copyToClipboardButton = $('<div>Copy to clipboard</div>');
+            $(this).prepend(buttonsWrapper.addClass("codemirror-buttons-wrapper").append(
+                buttons.addClass("codemirror-buttons").append(copyToClipboardButton.addClass("codemirror-button"))
+            ));
+
+            $(this).mouseenter(function () {
+                $(this).children('.codemirror-buttons-wrapper').first().show();
+            });
+
+            $(this).mouseleave(function () {
+                $(this).children('.codemirror-buttons-wrapper').first().hide();
+            });
         });
     };
 
