Re: [xwiki-users] Integrate clipboard.js into XWiki application

[D R]

Hi,

does somebody else know a working solution for copying the value of a
certain field to the clipboard on the press of a button?

Thanks in advance,
Dennis

2016-06-29 16:04 GMT+02:00 D R :

> Hi,
>
> I made the suggested change:
> 
>
> But still nothing is being copied to the clipboard.
>
> Log files are empty but now in the console I also see:
>
> ReferenceError: Clipboard is not defined
> 
>  Testeintrag+1:556
>  Testeintrag+1:556:5
> Error: Mismatched anonymous define() module: function (){var t,e,n;return
> function t(e,n,o){function i(a,c){if(!n[a]){if(!e[a]){var
> s="function"==typeof require&if(!c&)return s(a,!0);if(r)return
> r(a,!0);var l=new Error("Cannot find module '"+a+"'");throw
> l.code="MODULE_NOT_FOUND",l}var 
> u=n[a]={exports:{}};e[a][0].call(u.exports,function(t){var
> n=e[a][1][t];return i(n?n:t)},u,u.exports,t,e,n,o)}return
> n[a].exports}for(var r="function"==typeof 
> require&,a=0;a i}({1:[function(t,e,n){var o=t("matches-selector");e.
> exports=function(t,e,n){for(var 
> i=n?t:t.parentNode;i&!==document;){if(o(i,e))return
> i;i=i.parentNode}}},{"matches-selector":5}],2:[function(t,e,n){function
> o(t,e,n,o,r){var a=i.apply(this,arguments);return
> t.addEventListener(n,a,r),{destroy:function(){t.
> removeEventListener(n,a,r)}}}function i(t,e,n,o){return
> function(n){n.delegateTarget=r(n.target,e,!0),n.
> delegateTarget&(t,n)}}var r=t("closest");e.exports=o},{
> closest:1}],3:[function(t,e,n){n.node=function(t){return void 0!==t&
> instanceof HTMLElement&&1===t.nodeType},n.nodeList=function(t){var
> e=Object.prototype.toString.call(t);return void 0!==t&&("[object
> NodeList]"===e||"[object HTMLCollection]"===e)&&"length"in
> t&&(0===t.length||n.node(t[0]))},n.string=function(t){return"string"==typeof
> t||t instanceof String},n.fn=function(t){var 
> e=Object.prototype.toString.call(t);return"[object
> Function]"===e}},{}],4:[function(t,e,n){function
> o(t,e,n){if(!t&&!e&&!n)throw new Error("Missing required
> arguments");if(!c.string(e))throw new TypeError("Second argument must be
> a String");if(!c.fn(n))throw new TypeError("Third argument must be a
> Function");if(c.node(t))return i(t,e,n);if(c.nodeList(t))return
> r(t,e,n);if(c.string(t))return a(t,e,n);throw new TypeError("First argument
> must be a String, HTMLElement, HTMLCollection, or NodeList")}function
> i(t,e,n){return t.addEventListener(e,n),{destroy:function(){t.
> removeEventListener(e,n)}}}function r(t,e,n){return
> Array.prototype.forEach.call(t,function(t){t.addEventListener(e,n)}),{
> destroy:function(){Array.prototype.forEach.call(t,function(t){t.
> removeEventListener(e,n)})}}}function a(t,e,n){return
> s(document.body,t,e,n)}var c=t("./is"),s=t("delegate");e.
> exports=o},{"./is":3,delegate:2}],5:[function(t,e,n){function
> o(t,e){if(r)return r.call(t,e);for(var n=t.parentNode.
> querySelectorAll(e),o=0;o i=Element.prototype,r=i.matchesSelector||i.webkitMatchesSelector||i.
> mozMatchesSelector||i.msMatchesSelector||i.oMatchesSelector;e.exports=o},
> {}],6:[function(t,e,n){function o(t){var e;if("INPUT"===t.nodeName||"
> TEXTAREA"===t.nodeName)t.focus(),t.setSelectionRange(0,
> t.value.length),e=t.value;else{t.hasAttribute("
> contenteditable")&();var n=window.getSelection(),o=
> document.createRange();o.selectNodeContents(t),n.
> removeAllRanges(),n.addRange(o),e=n.toString()}return
> e}e.exports=o},{}],7:[function(t,e,n){function
> o(){}o.prototype={on:function(t,e,n){var o=this.e||(this.e={});return(
> o[t]||(o[t]=[])).push({fn:e,ctx:n}),this},once:function(t,e,n){function
> o(){i.off(t,o),e.apply(n,arguments)}var i=this;return
> o._=e,this.on(t,o,n)},emit:function(t){var e=[].slice.call(arguments,1),
> n=((this.e||(this.e={}))[t]||[]).slice(),o=0,i=n.length;for(
> o;i>o;o++)n[o].fn.apply(n[o].ctx,e);return this},off:function(t,e){var
> n=this.e||(this.e={}),o=n[t],i=[];if(o&)for(var
> r=0,a=o.length;a>r;r++)o[r].fn!==e&[r].fn._!==e&(o[r]);return
> i.length?n[t]=i:delete n[t],this}},e.exports=o},{}],
> 8:[function(e,n,o){!function(i,r){if("function"==typeof
> t&)t(["module","select"],r);else if("undefined"!=typeof
> o)r(n,e("select"));else{var a={exports:{}};r(a,i.select),
> i.clipboardAction=a.exports}}(this,function(t,e){"use strict";function
> n(t){return t&__esModule?t:{"default":t}}function o(t,e){if(!(t
> instanceof e))throw new TypeError("Cannot call a class as a function")}var
> i=n(e),r="function"==typeof Symbol&&"symbol"==typeof
> Symbol.iterator?function(t){return typeof t}:function(t){return
> t&&"function"==typeof Symbol&===Symbol?"symbol":typeof
> t},a=function(){function t(t,e){for(var n=0;n o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in
> o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return
> function(e,n,o){return 
> n&(e.prototype,n),o&(e,o),e}}(),c=function(){function
> t(e){o(this,t),this.resolveOptions(e),this.initSelection()}return
> 

Re: [xwiki-users] Integrate clipboard.js into XWiki application

[D R]

Hi,

I made the suggested change:


But still nothing is being copied to the clipboard.

Log files are empty but now in the console I also see:

ReferenceError: Clipboard is not defined

 Testeintrag+1:556
 Testeintrag+1:556:5
Error: Mismatched anonymous define() module: function (){var t,e,n;return
function t(e,n,o){function i(a,c){if(!n[a]){if(!e[a]){var
s="function"==typeof require&if(!c&)return s(a,!0);if(r)return
r(a,!0);var l=new Error("Cannot find module '"+a+"'");throw
l.code="MODULE_NOT_FOUND",l}var
u=n[a]={exports:{}};e[a][0].call(u.exports,function(t){var
n=e[a][1][t];return i(n?n:t)},u,u.exports,t,e,n,o)}return
n[a].exports}for(var r="function"==typeof
require&,a=0;ao;o++)n[o].fn.apply(n[o].ctx,e);return
this},off:function(t,e){var
n=this.e||(this.e={}),o=n[t],i=[];if(o&)for(var
r=0,a=o.length;a>r;r++)o[r].fn!==e&[r].fn._!==e&(o[r]);return
i.length?n[t]=i:delete
n[t],this}},e.exports=o},{}],8:[function(e,n,o){!function(i,r){if("function"==typeof
t&)t(["module","select"],r);else if("undefined"!=typeof
o)r(n,e("select"));else{var
a={exports:{}};r(a,i.select),i.clipboardAction=a.exports}}(this,function(t,e){"use
strict";function n(t){return t&__esModule?t:{"default":t}}function
o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a
function")}var i=n(e),r="function"==typeof Symbol&&"symbol"==typeof
Symbol.iterator?function(t){return typeof t}:function(t){return
t&&"function"==typeof Symbol&===Symbol?"symbol":typeof
t},a=function(){function t(t,e){for(var n=0;n

Re: [xwiki-users] Integrate clipboard.js into XWiki application

[Clemens Klein-Robbenhaar]

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:
>   

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.



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+JavaScript+clipboard+access
> 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'))
> 
> (% class="xform" %)
> (((
>   
> var clipboard = new Clipboard('.btn');
> clipboard.on('success', function(e) {
> console.log(e);
> });
> clipboard.on('error', function(e) {
> console.log(e);
> });
>   
>   ;  for="XPass.Code.XPassClass_0_sTxtName">$escapetool.xml($doc.displayPrettyName('sTxtName',
> false, false))
>   : $doc.display('sTxtName')
>   ;  for="XPass.Code.XPassClass_0_sListCategory">$escapetool.xml($doc.displayPrettyName('sListCategory',
> false, false))
>   : $doc.display('sListCategory')
>   ;  for="XPass.Code.XPassClass_0_sTxtURL">$escapetool.xml($doc.displayPrettyName('sTxtURL',
> false, false))
>   : $doc.display('sTxtURL')
>   ;  for="XPass.Code.XPassClass_0_lTxtDesc">$escapetool.xml($doc.displayPrettyName('lTxtDesc',
> false, false))
>   : $doc.display('lTxtDesc')
>   ;  for="XPass.Code.XPassClass_0_sTxtUser">$escapetool.xml($doc.displayPrettyName('sTxtUser',
> false, false))
>   : $doc.display('sTxtUser')
> 
>   ;  for="XPass.Code.XPassClass_0_sTxtPassword">$escapetool.xml($doc.displayPrettyName('sTxtPassword',
> false, false))
>   :
>   #if ($context.display == 'edit')
> $doc.display('sTxtPassword')
>   #else
> ~*~*~*~*~*~*~*~*~*~*
>   #end
>   
> 
>   
> )))
> {{/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
> users@xwiki.org
> http://lists.xwiki.org/mailman/listinfo/users
> 
___
users mailing list
users@xwiki.org
http://lists.xwiki.org/mailman/listinfo/users