How to handle the OnClick event.

[yashk90147758]

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.

[Loic.Aigon]

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]

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.

[Loic.Aigon]

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.    

[yashk90147758]

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);

}

[yashk90147758]

I have done it, not its working.

Thanks.

[yashk90147758]

Below code is working.

function loadPlaceGun(image, text){

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

macReg = /^file:\/\//,

winReg = /^file:\/\/\//,

filePath = image.replace(mac? macReg : winReg, ''),

    file = File(filePath);   

    file1=file;

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

macReg = /^file:\/\//,

winReg = /^file:\/\/\//,

filePath = text.replace(mac? macReg : winReg, ''),

    file = File(filePath);   

    file2=file;

    var arr = new Array(file1, file2);

    if ( !file.exists) return;

    app.toolBoxTools.currentTool = UITools.PLACE_CURSOR_TOOL;

    app.activeDocument.placeGuns.loadPlaceGun(arr);

}

[yashk90147758]

Hi,

I don't understand, how to use snippet for the particular task.

• 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.

[Loic.Aigon]

yashk90147758  a écrit

Hi,

I don't understand, how to use snippet for the particular task.

• 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.

Well, it would mean creating or editing a pre-set snippet (even easier) that you would later load in the placeGun. That way you could handle anything you want like size, image fitting property…

[yashk90147758]

Hi Loic,

Below code is not working for me, may be it is not correct.

So please correct it, if possible.

I want to execute some code, when click any where on the page.

app.activeDocument.pages.addEventListener("click", function () {

    alert("Click");

});

[yashk90147758]

All done good.

But now what i want is, when i drop a image in frame or rectangle.

I need to select the option [FIT CONTENT TO FRAME] to fit it in the frame.

I want to do it automatically done by code, when a drop an image in frame.

Thank for the help you provided.

[Loic.Aigon]

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-DO...

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.