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 <[email protected]>: > Hi, > > I made the suggested change: > <button class="btn" data-clipboard-target="#XPass.Code.XPassClass_0_ > sTxtPassword"> > > 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 > <anonym> > 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<o.length;a++)i(o[a]);return > 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<n.length;++o)if(n[o]==t)return!0;return!1}var > 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<e.length;n++){var > 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=arguments.length<=0||void > 0===arguments[0]?{}:arguments[0];this.action=e.action,this. > emitter=e.emitter,this.target=e.target,this.text=e.text, > this.trigger=e.trigger,this.selectedText=""},t.prototype.initSelection=function > t(){this.text?this.selectFake():this.target&&this. > selectTarget()},t.prototype.selectFake=function t(){var > e=this,n="rtl"==document.documentElement.getAttribute(" > dir");this.removeFake(),this.fakeHandlerCallback=function(){return > e.removeFake()},this.fakeHandler=document.body. > addEventListener("click",this.fakeHandlerCallback)||!0,this. > fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize=" > 12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this. > fakeElem.style.margin="0",this.fakeElem.style.position=" > absolute",this.fakeElem.style[n?"right":"left"]="-9999px", > this.fakeElem.style.top=(window.pageYOffset||document. > documentElement.scrollTop)+"px",this.fakeElem.setAttribute("readonly",""), > this.fakeElem.value=this.text,document.body.appendChild( > this.fakeElem),this.selectedText=(0,i.default)( > this.fakeElem),this.copyText()},t.prototype.removeFake=function > t(){this.fakeHandler&&(document.body.removeEventListener("click", > this.fakeHandlerCallback),this.fakeHandler=null,this. > fakeHandlerCallback=null),this.fakeElem&&(document.body. > removeChild(this.fakeElem),this.fakeElem=null)},t.prototype.selectTarget=function > t(){this.selectedText=(0,i.default)(this.target),this. > copyText()},t.prototype.copyText=function t(){var e=void > 0;try{e=document.execCommand(this.action)}catch(n){e=!1} > this.handleResult(e)},t.prototype.handleResult=function > t(e){e?this.emitter.emit("success",{action:this.action, > text:this.selectedText,trigger:this.trigger,clearSelection:this. > clearSelection.bind(this)}):this.emitter.emit("error",{ > action:this.action,trigger:this.trigger,clearSelection: > this.clearSelection.bind(this)})},t.prototype.clearSelection=function > t(){this.target&&this.target.blur(),window.getSelection(). > removeAllRanges()},t.prototype.destroy=function > t(){this.removeFake()},a(t,[{key:"action",set:function t(){var > e=arguments.length<=0||void 0===arguments[0]?"copy": > arguments[0];if(this._action=e,"copy"!==this._action&&"cut"!==this._action)throw > new Error('Invalid "action" value, use either "copy" or > "cut"')},get:function t(){return this._action}},{key:"target",set:function > t(e){if(void 0!==e){if(!e||"object"!==("undefined"==typeof > e?"undefined":r(e))||1!==e.nodeType)throw new Error('Invalid "target" > value, use a valid > Element');if("copy"===this.action&&e.hasAttribute("disabled"))throw > new Error('Invalid "target" attribute. Please use "readonly" instead of > "disabled" attribute');if("cut"===this.action&&(e.hasAttribute(" > readonly")||e.hasAttribute("disabled")))throw new Error('Invalid "target" > attribute. You can\'t cut text from elements with "readonly" or "disabled" > attributes');this._target=e}},get:function t(){return > this._target}}]),t}();t.exports=c})},{select:6}],9:[ > function(e,n,o){!function(i,r){if("function"==typeof > t&&t.amd)t(["module","./clipboard-action","tiny- > emitter","good-listener"],r);else if("undefined"!=typeof > o)r(n,e("./clipboard-action"),e("tiny-emitter"),e("good-listener"));else{var > a={exports:{}};r(a,i.clipboardAction,i.tinyEmitter, > i.goodListener),i.clipboard=a.exports}}(this,function(t,e,n,o){"use > strict";function i(t){return t&&t.__esModule?t:{"default":t}}function > r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a > function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been > initialised - super() hasn't been called");return!e||"object"!=typeof > e&&"function"!=typeof e?t:e}function c(t,e){if("function"!=typeof > e&&null!==e)throw new TypeError("Super expression must either be null or a > function, not "+typeof e);t.prototype=Object.create( > e&&e.prototype,{constructor:{value:t,enumerable:!1, > writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf? > Object.setPrototypeOf(t,e):t.__proto__=e)}function s(t,e){var > n="data-clipboard-"+t;if(e.hasAttribute(n))return e.getAttribute(n)}var > l=i(e),u=i(n),f=i(o),d=function(t){function e(n,o){r(this,e);var > i=a(this,t.call(this));return i.resolveOptions(o),i.listenClick(n),i}return > c(e,t),e.prototype.resolveOptions=function t(){var > e=arguments.length<=0||void 0===arguments[0]?{}:arguments[ > 0];this.action="function"==typeof e.action?e.action:this. > defaultAction,this.target="function"==typeof e.target?e.target:this. > defaultTarget,this.text="function"==typeof e.text?e.text:this. > defaultText},e.prototype.listenClick=function t(e){var > n=this;this.listener=(0,f.default)(e,"click",function(t){return > n.onClick(t)})},e.prototype.onClick=function t(e){var > n=e.delegateTarget||e.currentTarget;this.clipboardAction&&(this. > clipboardAction=null),this.clipboardAction=new > l.default({action:this.action(n),target:this.target(n),text: > this.text(n),trigger:n,emitter:this})},e.prototype.defaultAction=function > t(e){return s("action",e)},e.prototype.defaultTarget=function t(e){var > n=s("target",e);return n?document.querySelector(n):void > 0},e.prototype.defaultText=function t(e){return > s("text",e)},e.prototype.destroy=function > t(){this.listener.destroy(),this.clipboardAction&&(this. > clipboardAction.destroy(),this.clipboardAction=null)},e} > (u.default);t.exports=d})},{"./clipboard-action":8,"good- > listener":4,"tiny-emitter":7}]},{},[9])(9)} > http://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 > <anonym> > > Regards, > Dennis > > 2016-06-29 15:05 GMT+02:00 Clemens Klein-Robbenhaar < > [email protected]>: > >> 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+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')) >> > <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 >> > >> _______________________________________________ >> users mailing list >> [email protected] >> http://lists.xwiki.org/mailman/listinfo/users >> > > _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
