hide the ZeroClipboard clip if someone clicks on the cancel button

[osqa.git] / 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 0ea2941bb8ad33f4394d20fa730531e210bbc556..194f4116728f01242fe09cc393a61a35b1ec2fc2 100644 (file)
--- a/forum/skins/default/templates/node/permanent_link.html
+++ b/forum/skins/default/templates/node/permanent_link.html
@@ -1,19 +1,53 @@
-{% load i18n %}
+{% load i18n extra_tags %}
+
+<p>
+{% blocktrans %}
+Would you like to copy the permanent link to your clipboard?
+{% endblocktrans %}
+</p>
 
 {% spaceless %}
-<table>
-    <tr>
-        <td><label for="permanent_link_url">{% trans "Permanent link" %}:</label></td>
-        <td><input id="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 %}
 
+<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>