Uh, tough, is there something like a stack trace for the error message? First stop would be to check is the clipboard.min.js is really loaded and displays without error, but I guess it does as otherwise the problem would appear on page load already ... One thing that looks odd to me is:
<button class="btn" data-clipboard-target="$doc.display('sTxtPassword')">
This will render the value of the sTxtPassword field as clipboard target; I guess you want to use the id of the input field instead, e.g. <button class="btn" data-clipboard-target="#XPass.Code.XPassClass_0_sTxtPassword"> or something like that. At least the generated HTML should look this. HTH Clemens D R wrote on 29.06.2016, 14:52
Hi,
I'm trying to implement a basic password manager as an XWiki application. I have short text fields for username and password. In view mode the password is replaced by ********** to hide it from prying eyes.
Now I'd like to have a button next to the username and password fields for copying the values to the clipboard.
I found two sources: 1. http://extensions.xwiki.org/xwiki/bin/view/Extension/Cross-browser+JavaScrip... 2. https://clipboardjs.com/
As the Wiki entry (1) is rather old I tried to replace it by (2) but I'm not sure how to insert the code exactly.
I uploaded the clipboard.min.js as an attachment to the Application code page. My Application sheet looks like this:
{{velocity}} {{html wiki="true"}} #set ($discard = $doc.use('XPass.Code.XPassClass')) #set($theSharedPanel = $xwiki.getDocument('XPass.Code')) <script src="$theSharedPanel.getAttachmentURL('clipboard.min.js')"></script> (% class="xform" %) ((( <script> var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); </script> ; <label for="XPass.Code.XPassClass_0_sTxtName">$escapetool.xml($doc.displayPrettyName('sTxtName', false, false))</label> : $doc.display('sTxtName') ; <label for="XPass.Code.XPassClass_0_sListCategory">$escapetool.xml($doc.displayPrettyName('sListCategory', false, false))</label> : $doc.display('sListCategory') ; <label for="XPass.Code.XPassClass_0_sTxtURL">$escapetool.xml($doc.displayPrettyName('sTxtURL', false, false))</label> : $doc.display('sTxtURL') ; <label for="XPass.Code.XPassClass_0_lTxtDesc">$escapetool.xml($doc.displayPrettyName('lTxtDesc', false, false))</label> : $doc.display('lTxtDesc') ; <label for="XPass.Code.XPassClass_0_sTxtUser">$escapetool.xml($doc.displayPrettyName('sTxtUser', false, false))</label> : $doc.display('sTxtUser')
; <label for="XPass.Code.XPassClass_0_sTxtPassword">$escapetool.xml($doc.displayPrettyName('sTxtPassword', false, false))</label> : #if ($context.display == 'edit') $doc.display('sTxtPassword') #else ~*~*~*~*~*~*~*~*~*~* #end <button class="btn" data-clipboard-target="$doc.display('sTxtPassword')"> <img src="assets/clippy.svg" alt="Copy to clipboard"> </button> ))) {{/html}} {{/velocity}}
Now then pressing the "Copy to clipboard" button the clipboard is not updated and the console shows: "ReferenceError: Clipboard is not defined"
I'm not sure where to place the scripts to make it work so mybe someone can enlighten me.
Regards, Dennis _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users