2 Replies Latest reply on Jun 18, 2014 7:23 AM by SamLaundon

    Javascript Select Menu Item & Tool

    SamLaundon Level 1

      I am brand new to javascript and quite overwhelmed trying to learn this language. I am trying to convert extensions for Photoshop that were created with Configurator 4 (in case some of you may not know, these panels will no longer be supported in future versions of Photoshop).

       

      I need to create some HTML panels that use javascript. If someone could help me get started with some basic javascript I would be greatly appreciative.

      Here is what I need to get started:

      1. Tabs at the very top for access to different panel layers.

      2. Open menu item with button connected to javascript.

      3. Select tool from javascript.

       

      I have found the documentation a bit scarce for non-coders (Hello Adobe), so if someone could show me how the above would work then I probably can figure out the rest.

       

      Thanks in Advance - Sam

        • 1. Re: Javascript Select Menu Item & Tool
          c.pfaffenbichler Level 9
          3. Select tool from javascript.

          The Action Manager code (as created when recording with ScriptingListener.plugin) should be helpful for this.


           

          1. Tabs at the very top for access to different panel layers.

           

          Shouldn’t that be handled with html in an html panel?


          2. Open menu item with button connected to javascript.

          Do you mean actually expand the menu or just trigger some menu item?

          In the second case I think it should be possible by DOM, but again Action Manager code might be useful.

          • 2. Re: Javascript Select Menu Item & Tool
            SamLaundon Level 1

            Thank you - that's the ticket.

             

            For both tool and menu item I had ScriptingListenerJS active and it gave me the javascript for selecting a tool and also a menu item.

             

            I will look into the creating tabs on the panel in html.

             

            Another question:

            I am working with the "Hello World" extension example and am a bit confused by the main.js file.

            ------------------

            (function () {

                'use strict';

                var csInterface = new CSInterface();

                   

                // Reloads extension panel

                function reloadPanel() {

                    location.reload();

                }

               

                function init() {

                           

                    themeManager.init();

                   

                    $("#btn_reload").click(reloadPanel);

                   

                    $("#btn_test").click(function () {

                        csInterface.evalScript('sayHello()');

                    });

                   

                    $("#new_doc").click(function () {

                        csInterface.evalScript('newDoc()');

                    });

                   

                     $("#myNewDoc").click(function () {

                        app.documents.add();

                    });

                   

                }

                   

                init();

             

            }());

             

            -------------------

            On the html page there is this: <button id="btn_test">Call ExtendScript</button>

            On the main.js file there is this:

            $("#btn_test").click(function () {

                        csInterface.evalScript('sayHello()');

                    });

             

            What does the "$" mean and what does the "#" mean in front of "btw_test".

             

            Thanks in advance - Sam