X-Git-Url: https://git.openstreetmap.org./osqa.git/blobdiff_plain/7fc0c9f2c94f090d9f743798cd9ef835757dcbc2..68b08ed5442bf968f91fed8c3339adcd324c4864:/forum/skins/default/templates/node/permanent_link.html

diff --git a/forum/skins/default/templates/node/permanent_link.html b/forum/skins/default/templates/node/permanent_link.html
index e4cfcf9..194f411 100644
--- a/forum/skins/default/templates/node/permanent_link.html
+++ b/forum/skins/default/templates/node/permanent_link.html
@@ -1,4 +1,4 @@
-{% load i18n %}
+{% load i18n extra_tags %}
 
 <p>
 {% blocktrans %}
@@ -6,22 +6,48 @@ Would you like to copy the permanent link to your clipboard?
 {% endblocktrans %}
 </p>
 
-<p>
 {% spaceless %}
-<table>
-    <tr>
-        <td><label for="permanent_link_url">{% trans "Permanent link" %}:</label></td>
-        <td><input id="permanent_link_url" name="permanent_link_url" readonly="readonly" type="text" value="{{ url }}" /></td>
-    </tr>
-</table>
+<p><label for="permanent_link_url" style="font-size: 13px;">{% trans "Permanent link" %}:</label></p>
+<p><textarea id="permanent_link_url" name="permanent_link_url" style="font-size: 12px;" readonly="readonly">{{ url }}</textarea></p>
 {% endspaceless %}
-</p>
 
+<script type="text/javascript" src="{% media  "/media/js/ZeroClipboard.js" %}"></script>
 <script type="text/javascript">
 $(document).ready(function() {
     // We highlight the content of the text field on click event
     $('#permanent_link_url').click(function() {
         $(this).select();
-    })
-})
+    });
+
+    // We use ZeroClipboard to copy the URL
+    ZeroClipboard.setMoviePath('{% media '/media/js/ZeroClipboard.swf' %}');
+
+    // Create the Client Clip
+    var clip = new ZeroClipboard.Client();
+
+    // Create the glue when on mouse-over event
+    $('#copy_clip_button').live('mouseover', function() {
+        // Take the URL from the input
+        clip.setText($('#permanent_link_url').val());
+
+        // Create the glue
+        clip.glue('copy_clip_button');
+
+        // Simulate click on the OK button when we hear a moseDown event on the glue
+        clip.addEventListener('mouseDown', function() {
+            $('#copy_clip_button').click();
+        });
+
+        // Reposition the clip
+        clip.addEventListener('complete', function() {
+            clip.reposition();
+        });
+    });
+
+    // Hide the clip if someone clicks on the cancel button
+    $('.dialog-no').live('click', function() {
+        clip.hide();
+    });
+
+});
 </script>