Include ZeroClipboard in a ftl template

[amandine_b]

Hi,

I'm trying to use ZeroClipboard, a JavaScript library which allow to copy text into the clipboard.
I used this librarie with Alfresco 4.1 without problems, but when I changed to Alfresco 4.2, the action doesn't work anymore.

I've added a custom action on the "More Action" menu. When I click on this action, a new popup shows up, which contains the JavaScript calling ZeroClipboard.

If I still use my 4.1 configuration, I get a JavaScript error which make the header menu disappear.
This error is caused by the librairie, which try to access to the body. Nevertheless, when the Javascript dependencies are loaded, the body isn't loaded yet.

So I try to move the dependency by removing it of the "share-config.xml" file and by including it to my ftl template, but the Javascript is never loaded.

<b>My 4.1 configuration (share-config.xml) :</b>
<blockcode> <config evaluator="string-compare" condition="DocLibCustom">
         <dependencies>
            <js src="/modules/simple-dialog.js" />
            <js src="/modules/email-form.js" />
            <js src="/components/people-finder/authority-finder.js" />
            <js src="/components/documentlibrary/my/ZeroClipboard.min.js" />
         </dependencies>
   </config>
</blockcode>

On the 4.2, I deleted the "ZeroClipboard" line.

<b>The ftl template :</b>
<blockcode>
<div id="div_getnoderef">

   <p id="p_label_do_ctrlc">${msg('do-ctrlc')}</p>
   <#if args.nodeRef??>
   <p>
      <input id="cp_nodeRef" name="nodeRef" type="text"
         value="${args.nodeRef}" title="NodeRef" />
   </p>
   <div class="ft">
      <span class="button-group"> <span
         class="yui-button yui-push-button"> <span class="first-child">
               <button id="my-button" data-clipboard-text="${args.nodeRef}">${msg('get-noderef-action.close')}</button>
         </span>
      </span>
      </span>
   </div>
   <#else>
   <p>Erreur lors de la récupération de la référence.</p>
   </#if>
</div>

<script type="text/javascript">
   //—————————–
   //Copie dans le presse papier
   //—————————–

   // pour éviter le bug sous IE on passe par sa fonction interne + destruction de la fenêtre
   if (window.clipboardData) {
      document.getElementById('my-button').onclick = function(event) {
         window.clipboardData.setData('Text', nodeRef);
         downloadDlg.destroy();
      }
   }
   // pour les autres navigateurs on appelle zeroclipboard
   else {
      // on test si l'utilisateur a bien flash d'installé pour que le script fonctionne
      var hasFlash = false;
      try {
         var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
         if (fo)
            hasFlash = true;
      } catch (e) {
         if (navigator.mimeTypes["application/x-shockwave-flash"] != undefined)
            hasFlash = true;
      }

      //Si Flash installé, on passe par la libraire ZeroClipboard.
      if (hasFlash) {
         ZeroClipboard.config({
                  swfPath : '/share/res/components/documentlibrary/my/ZeroClipboard.swf'
               });
         var client = new ZeroClipboard(document.getElementById('my-button'));
         // lorsque la mise en mémoire du noderef est finie on détruit la fenêtre
         client.on('complete', function(client, args) {
            downloadDlg.destroy();
         });
      } else { // s'il n' pas flash le clic sur le bouton fermé ne fait pas la copie, il ferme juste la fenêtre et on change le label
         document.getElementById('p_label_do_ctrlc').innerHTML = Alfresco.util
               .message("do-ctrlc-noflash");
         document.getElementById('my-button').onclick = function(event) {
            downloadDlg.destroy();
         }
      }
   }
</script>
</blockcode>

I try to add

<script src="classpath:share/res/components/documentlibrary/my/ZeroClipboard.min.js"></script>‍

on the ftl template but when I click on the action, I've got the error "ZeroClipboard is undefined" and the ZeroClipboard JavaScript file doesn't appear in the loaded JS files (on firebug).

Do you have any ideas to solve this issue please ?

Thanks,

Regards.

[amandine_b]

I resolved my problem by using "ZClip", a jQuery library, instead of ZeroClipboard.

I load the library in the share-config.xml file, I have modified the ftl template to use Zclip and it works !