2 Replies Latest reply on Sep 29, 2015 5:47 AM by EnsilZah_

    Populating an HTML panel from folders

    EnsilZah_ Level 1

      Hi, similarly to Chris_G_1975 a few posts down, I'm trying to populate my HTML panel with buttons, but in my case I'm trying to use the folder structure for the panel.

      My problem is mainly with being unfamiliar with HTML and Javascript, I'm quite confident with Extendscript, but plain Javascript doesn't seem to have the File and Folder objects I'm familiar

       

      So basically what I'd like to do is:

      1. Get a list of folders in a folder "scripts" that resides in the panel's source path.

      2. Check each folder name to see if it contains a prefix that indicates it contains a script (eg: "NS_ScriptName" starts with "NS_" so it's a valid script )

      3. Create a button such that for each forlder NS_ScriptName, it uses NS_ScriptName.png as the icon, NS_ScriptName.jsx as the script it executes and the contents of NS_ScriptName.txt as the button text.

       

      I've figured out how to create a button from script using document.write() and how to find the location of my panel's HTML file using document.location.pathname, but I'm having trouble with the file and folder stuff, is there some sort of library I should include to regain File and Folder functionality such as .parent, .getFiles(), .name and .read()?

        • 1. Re: Populating an HTML panel from folders
          Chuck Uebele Adobe Community Professional & MVP

          While I haven't done this, I did a little search and it seem like it may not be possible. See this link:

           

          http://stackoverflow.com/questions/15537424/get-a-list-of-all-folders-in-directory

           

          I thinking you might be able to do this with extenscript and send the info back to your js and html panel to create the buttons.

          • 2. Re: Populating an HTML panel from folders
            EnsilZah_ Level 1

            Well, in case anyone is interested, the solution I ended up going for is not optimal, but it gets the job done.

             

             

            The panel's main HTML file (index.html) runs a JSX (ReturnFolders.jsx) file that iterates over the script folders and generates a new HTML file with all the buttons (Buttons.html).

            It then loads Buttons.html as a "text/html" object.

             

            (This a bit of a problem because it usually asynchronously loads the Buttons.html file before generating it, so I have to reopen the panel twice to get the updated version)

             

            ReturnFolders.jsx looks like this:

            function main()
            {
                var CurrentFolder = Folder(Folder($.fileName).parent + "/scripts")
            
            
                var FolderFiles = CurrentFolder.getFiles()
                var FolderList = new Array;
            
            
                //Only include folders that have "NS_" in the name
                for (i = 0; i < FolderFiles.length; i++)
                {
                     if ((FolderFiles[i] instanceof Folder) && (strContains(FolderFiles[i].name, "NS_"))) {FolderList.push(FolderFiles[i].name)}
                }
            
            
                var fullHTML =
                '<script src="./ext.js"></script>  \n  <script src="./lib/CSInterface-4.0.0.js"></script>  \n  <link id="ppstyle" rel="stylesheet" type="text/css" href="./styleButtons.css">  \n  <body onLoad="onLoaded()">'
            
            
                for (var i = 0; i < FolderList.length; i++)
                {
                    NameOfFile = (FolderList[i][0] == "!")? FolderList[i].substring(4):FolderList[i];
                    NameOfFolder = FolderList[i];
            
            
                    if (NameOfFile == "NS_SPACER")  //Create Spacer
                    {
                        fullHTML += "\n\n" + '<p> </p><hr width="50%" size="2" noshade><p> </p>'
                    }
                    else    //Create Button
                    {
                        var scriptPath = "scripts" + "/" + NameOfFolder + "/" + NameOfFile + ".jsx";
                        var scriptIcon = "scripts" + "/" + NameOfFolder + "/" + NameOfFile + ".png";
                        var scriptName = readContents(File(CurrentFolder + "/" + NameOfFolder + "/" + NameOfFile + ".txt"));
                        if (scriptName == "" || scriptName == null) scriptName = NameOfFile;
                        
                        fullHTML += "\n\n" + writeHtmlButton(scriptPath, scriptIcon, scriptName);  
                    }
                }
            
            
                var outFile = File(Folder($.fileName).parent + "/Buttons.html")
                outFile.open("w");
                outFile.write(fullHTML);
                outFile.close();
            }
            main();
            
            
            function readContents(inFile)
            {
                if (!inFile.exists) return "";
                inFile.open("r");
                var name = inFile.readln();
                inFile.close();
            
            
                return name;
            }
            
            
            function writeHtmlButton (inScript, inIcon, inName)
            {
                var outHtml = "<button class='default' id='btn_PHXS'  onClick='runJSX(\""+ inScript +"\")' style='height: 22px; width: 122px'>";
                outHtml += "\n" +  "<img src='"+ inIcon +"' alt='' align='left'/>"
                outHtml += "\n" + inName + "\n" + "</button>";
                
                return outHtml;
            }
            
            
            function strContains (inString, subString)
            {
                return (inString.indexOf(subString) > -1);
            }