Skip to main content
yashk90147758
yashk90147758
Known Participant
May 29, 2018
Question

How to handle the OnClick event.

  • May 29, 2018
  • 2 replies
  • 1921 views

1> How to handle the OnClick() event, clicked on Indesign Document not in html document.

I have a senario where will load a image and wait to drop it on document. When user click the document to drop the image then text content will be loaded to drop on the document.

2> If i will drop an image in frame, how to set image size automatically to fit to frame.

(If have please share the sample code for reference.)

Thanks.

This topic has been closed for replies.

2 replies

Loic.Aigon
Loic.Aigon
Legend
June 1, 2018

I am not sure you could add such an event listener to pages objects. There is a set of events you can listen for good. I am pretty certain documentation listed them but I can't find it back. The only reference I could find right now is this :

http://www.indiscripts.com/blog/public/data/so-what-s-new-in-indesign-cs5-scripting-dom/en_ID-CS5-DOM-WhatsNewObjects.pd…

Which is complete enough.

So let's get back to your issue. A "click" on a page might mean the user did select or unselect something (although clicking without selection in an empty space wouldn't throw any event but still…). So you may be interested in monitoring the afterSelectionChanged event. Only issue is that if you are interested in the item the user just unselected (but normally you would have caught this at the select stage).

Remember that events need to be added with a persistent engine or it won't monitor events all the session long.

So the jsx file you call has to declare a targetengine.

Loic.Aigon
Loic.Aigon
Legend
May 29, 2018

For what it's worth, CEP team put great efforts in creating documentation and samples everyone can learn from :

Creative Cloud Extension SDK - CC extension resources | Adobe I/O

Adobe I/O Console

Adobe CEP · GitHub

Most of your question can find an answer there.

    yashk90147758
    yashk90147758Author
    Known Participant
    May 30, 2018

    Hi Loic,

    All previous code is working fine but now i have to implement some other scenario.

    I am badly stucked. Below is my code -

    ------------------------------------------------ HTML Code ---------------------------------------------------

    <div class="panel-body" draggable="true" ondragend="dragEnd(event)">

    <img id="i" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Toad7.jpg/320px-Toad7.jpg" alt="C:/Users/Yash/Desktop/downloadImage/3.jpg" style="width: 150px; height: 80px;" draggable="false">

    <p id="p" draggable="false">Hello Image 1</p>

    </div>

    ------------------------------------------------ JS Code ---------------------------------------------------

    // Event fire when drag end

    function dragEnd(ev) {

           csInterface.evalScript("checkContext()", function(result) {

                  // Drag image to document

                  var filePath = "monTexte.txt";

                  window.cep.fs.writeFile(filePath,

                  ev.target.children.p.textContent);

                  csInterface.evalScript("loadPlaceGun('" + filePath + "')");

                  // Drag text to document

                  csInterface.evalScript("loadPlaceGun('" + ev.target.children.i.alt + "')");

           });

           return true;

    }

    Now, i need to drag the image and text both in one drag, and drop it on the document and also need to set the height and width of image to some fixed value.

    yashk90147758
    yashk90147758Author
    Known Participant
    May 31, 2018

    Now, i need to drag the image and text both in one drag, and drop it on the document and also need to set the height and width of image to some fixed value.

    First part ain't no hard. Just append the files in the placeGun. Second part is tougher (just a bit).

    You would need to use either :

    • A snippet (aka a XML file) where you would define a regular rectangle and its geometry and its image file. Just place a picture, export a snippet, open that snippet in a xml editor and you will see what I mean.
    • An event listener that will monitor AfterPlace events to change just placed objects geometry.

    If it was me, i would certainly pick snippet option here.    


    I am using the below code to drag both image and text in one time but it is not working. Please check.

    imagePath - Path of image file

    textPath - Path of text file

    function loadPlaceGun(imagePath,  textPath){

         var mac = $.os[0]=="M";

         macReg = /^file:\/\//;

         winReg = /^file:\/\/\/;

         textPath = textPath.replace(mac? macReg : winReg, '');

        file1 = File(textPath);

       

         imagePath = imagePath.replace(mac? macReg : winReg, '');

        file2 = File(imagePath);

       

        var arr = new Array(file2, file1);

        app.toolBoxTools.currentTool = UITools.PLACE_CURSOR_TOOL;

        app.activeDocument.placeGuns.loadPlaceGun(arr);

    }

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices