Re: [xwiki-users] Integrate clipboard.js into XWiki application
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&&require;if(!c&&s)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&&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&&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&&o.call(t,n)}}var r=t("closest");e.exports=o},{ > closest:1}],3:[function(t,e,n){n.node=function(t){return void 0!==t&&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")&&t.focus();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&&e)for(var > r=0,a=o.length;a>r;r++)o[r].fn!==e&&o[r].fn._!==e&&i.push(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.amd)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&&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&&t.constructor===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&&t(e.prototype,n),o&&t(e,o),e}}(),c=function(){function > t(e){o(this,t),this.resolveOptions(e),this.initSelection()}return > t.prototype.resolveOptions=function t(){var e=argume
Re: [xwiki-users] Integrate clipboard.js into XWiki application
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&&require;if(!c&&s)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&&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&&e)for(var r=0,a=o.length;a>r;r++)o[r].fn!==e&&o[r].fn._!==e&&i.push(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.amd)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&&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&&t.constructor===Symbol?"symbol":typeof t},a=function(){function t(t,e){for(var n=0;nhttp://requirejs.org/docs/errors.html#mismatch C() require.min.js:8 J() require.min.js:15 j() require.min.js:26 requirejs() require.min.js:31 Regards, Dennis 2016-06-29 15:05 GMT+02:00 Clemens Klein-Robbenhaar < c.robbenh...@espresto.com>: > 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: > >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. > > 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+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')) > > src="$theSharedPanel.getAttachmentURL('clipboard.min.js')"> > > (% 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 > >data-clipboard-target="$doc.display('sTxtPassword')"> > > > > > > ))) > > {{/html}} > > {{/velocity}} > > > > Now then pressing t
Re: [xwiki-users] Integrate clipboard.js into XWiki application
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
[xwiki-users] Integrate clipboard.js into XWiki application
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); }); ; $escapetool.xml($doc.displayPrettyName('sTxtName', false, false)) : $doc.display('sTxtName') ; $escapetool.xml($doc.displayPrettyName('sListCategory', false, false)) : $doc.display('sListCategory') ; $escapetool.xml($doc.displayPrettyName('sTxtURL', false, false)) : $doc.display('sTxtURL') ; $escapetool.xml($doc.displayPrettyName('lTxtDesc', false, false)) : $doc.display('lTxtDesc') ; $escapetool.xml($doc.displayPrettyName('sTxtUser', false, false)) : $doc.display('sTxtUser') ; $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