11 Replies Latest reply on Jun 1, 2018 2:21 AM by Loic.Aigon

    How to handle the OnClick event.

    yashk90147758 Level 1

      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.

        • 1. Re: How to handle the OnClick event.
          Loic.Aigon Adobe Community Professional

          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.

          • 2. Re: How to handle the OnClick event.
            yashk90147758 Level 1

            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.

            • 3. Re: How to handle the OnClick event.
              Loic.Aigon Adobe Community Professional

              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.    

              • 4. Re: How to handle the OnClick event.
                yashk90147758 Level 1

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

                }

                • 5. Re: How to handle the OnClick event.
                  yashk90147758 Level 1

                  I have done it, not its working.

                  Thanks.

                  • 6. Re: How to handle the OnClick event.
                    yashk90147758 Level 1

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

                    }

                    • 7. Re: How to handle the OnClick event.
                      yashk90147758 Level 1

                      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.
                      • 8. Re: How to handle the OnClick event.
                        yashk90147758 Level 1

                        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.

                        • 9. Re: How to handle the OnClick event.
                          Loic.Aigon Adobe Community Professional

                          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…

                          • 10. Re: How to handle the OnClick event.
                            yashk90147758 Level 1

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

                            });

                            • 11. Re: How to handle the OnClick event.
                              Loic.Aigon Adobe Community Professional

                              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.