From 2bb3c5df89110f81445d40c273b91ca9a34b9a81 Mon Sep 17 00:00:00 2001
From: Jordi Boggiano <j.boggiano@seld.be>
Date: Fri, 16 Dec 2011 14:10:04 +0100
Subject: [PATCH] Styling adjustments and add clipboard button for Opera

---
 clippy.swf     | Bin 0 -> 5380 bytes
 index.php      |  25 ++++++++++++++++++++++++-
 php-console.js |  24 +++++++++++++-----------
 styles.css     |  29 ++++++++++++++++++++++++++---
 4 files changed, 63 insertions(+), 15 deletions(-)
 create mode 100644 clippy.swf

diff --git a/clippy.swf b/clippy.swf
new file mode 100644
index 0000000000000000000000000000000000000000..e46886cd1153122af2f216a6a86cbd816615d54d
GIT binary patch
literal 5380
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

literal 0
HcmV?d00001

diff --git a/index.php b/index.php
index cfeb0f9..cab5a6b 100644
--- a/index.php
+++ b/index.php
@@ -90,7 +90,30 @@ if (isset($_POST['code'])) {
 
             <div class="input">
                 <div class="editor" id="editor"><?php echo (isset($_POST['code']) ? htmlentities($_POST['code'], ENT_QUOTES, 'UTF-8') : null) ?></div>
-                <div class="statusbar">Line: 1, Column: 1</div>
+                <div class="statusbar">
+                    <span class="position">Line: 1, Column: 1</span>
+                    <span class="copy">
+                        Copy selection: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="110" height="14" id="clippy">
+                            <param name="movie" value="clippy.swf"/>
+                            <param name="allowScriptAccess" value="always" />
+                            <param name="quality" value="high" />
+                            <param name="scale" value="noscale" />
+                            <param NAME="FlashVars" value="text=">
+                            <param name="bgcolor" value="#E8E8E8">
+                            <embed src="clippy.swf"
+                                   width="110"
+                                   height="14"
+                                   name="clippy"
+                                   quality="high"
+                                   allowScriptAccess="always"
+                                   type="application/x-shockwave-flash"
+                                   pluginspage="http://www.macromedia.com/go/getflashplayer"
+                                   FlashVars="text="
+                                   bgcolor="#E8E8E8"
+                            />
+                        </object>
+                    </span>
+                </div>
             </div>
             <input type="submit" name="subm" value="Try this!" />
         </form>
diff --git a/php-console.js b/php-console.js
index ba11d21..2af24e4 100644
--- a/php-console.js
+++ b/php-console.js
@@ -25,7 +25,17 @@
      */
     updateStatusBar = function(e) {
         var cursor_position = editor.getCursorPosition();
-        $('.statusbar').text('Line: ' + (1+cursor_position.row) + ', Column: ' + cursor_position.column);
+        $('.statusbar .position').text('Line: ' + (1+cursor_position.row) + ', Column: ' + cursor_position.column);
+    };
+
+    /**
+     * prepares a clippy button for clipboard access
+     */
+    prepareClippyButton = function(e) {
+        var selection = editor.getSession().doc.getTextRange(editor.getSelectionRange());
+        $('#clippy embed').attr('FlashVars', 'text=' + selection);
+        $('#clippy param[name="FlashVars"]').attr('value', 'text=' + selection);
+        $('.statusbar .copy').html($('.statusbar .copy').html());
     };
 
     /**
@@ -70,9 +80,11 @@
 
         // tab size
         editor.getSession().setTabSize(options.tabsize);
+        editor.getSession().setUseSoftTabs(true);
 
         // events
         editor.getSession().selection.on('changeCursor', updateStatusBar);
+        editor.getSession().selection.on('changeSelection', prepareClippyButton);
 
         // commands
         editor.commands.addCommand({
@@ -88,7 +100,6 @@
         });
     };
 
-
     $.console = function(settings) {
         $.extend(options, settings);
 
@@ -96,15 +107,6 @@
             $(document).ready(initializeAce);
 
             $('form').submit(handleSubmit);
-/*
-            // set the focus back to the textarea if pressing tab moved
-            // the focus to the submit button (opera bug)
-            $('input[name="subm"]').keyup(function(e) {
-                if (e.keyCode === 9) {
-                    $('textarea[name="code"]').focus();
-                }
-            });
-            */
         });
     };
 }());
\ No newline at end of file
diff --git a/styles.css b/styles.css
index ded696b..b58526d 100644
--- a/styles.css
+++ b/styles.css
@@ -28,16 +28,31 @@ a {
 
 .output {
     padding: 5px 10px;
-    margin: 10px .4%;
+    margin: 10px;
 }
 
 .input {
     margin: .5% 10px;
-    padding: 2px 5px;
 }
 
 .statusbar {
-    margin-top: 3px;
+    padding: 3px 5px;
+    background: #E8E8E8;
+    -webkit-border-bottom-left-radius: 5px;
+    -moz-border-radius-bottomleft: 5px;
+    border-bottom-left-radius: 5px;
+    -webkit-border-bottom-right-radius: 5px;
+    -moz-border-radius-bottomright: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+.statusbar .copy {
+    margin-left: 50px;
+}
+#clippy {
+    position: relative;
+    top: 2px;
+    left: 0;
 }
 
 /* ace-editor requires to define styles by id (specificity) */
@@ -45,6 +60,14 @@ a {
     width: 100%;
     height: 400px;
     position: relative;
+    -webkit-border-top-right-radius: 5px;
+    -moz-border-radius-topright: 5px;
+    border-top-right-radius: 5px;
+}
+#editor .ace_gutter {
+    -webkit-border-top-left-radius: 5px;
+    -moz-border-radius-topleft: 5px;
+    border-top-left-radius: 5px;
 }
 
 .output img.loader {