• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

My event handler is not removing guides as it should

Explorer ,
Jul 15, 2023 Jul 15, 2023

Copy link to clipboard

Copied

I'm experimenting with a script that can add guides, and then separately, remove one of them. The upper half of the script is just a dialog with some variable names, particularly an editable text field.

 

Then there's a for-loop drawing several guides, followed by an event handler function and then the event handler itself. 

 

I get an alert when I change the text field so this assures me the event handler function is successfully called, but for some reason, I have no idea why, the guide doesn't get removed. Can anyone fix this?

 

var myWindow = new Window("dialog");

var ProportionsGroup = myWindow.add("group");
ProportionsGroup.orientation = "column";
ProportionsGroup.alignment = "left";
ProportionsGroup.add("statictext", undefined, "Proportions (enter values between 0 and 1)");

var ProportionEntries = ProportionsGroup.add("group");
ProportionEntries.alignment = "left";

var ProportionA = ProportionEntries.add("edittext", undefined, "0.2");
ProportionA.characters = 6;
ProportionA.active = true;

var A = ProportionA.text;

var docWidth = Number(app.activeDocument.documentPreferences.pageWidth);
var docHeight = Number(app.activeDocument.documentPreferences.pageHeight);

for (var i = 1; i < 5; ++i) {
    app.activeWindow.activePage.guides.add({name:"Blah"+i,location: docWidth*i*0.1, orientation: HorizontalOrVertical.VERTICAL});
}

function myEventHandler() {
     alert("guide blah2: " + app.activeWindow.activePage.guides.itemByName("Blah2"));
     app.activeWindow.activePage.guides.itemByName("Blah2").remove();
}
ProportionA.addEventListener('change', myEventHandler);
 
myWindow.show();
TOPICS
Scripting

Views

136

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 15, 2023 Jul 15, 2023

Copy link to clipboard

Copied

Hi @dane13860245, you cannot make changes to the DOM while a modal dialog is active. The error is:

Screenshot 2023-07-16 at 09.40.41.png

 

Here is one approach to get you moving forward. I'm pretty sure it isn't the best way, because it re-creates the dialog each time, rather than re-using the existing dialog. I would like to see a neater way, if you come up with it. The crux is that everytime you click the Apply button it closes, then *does stuff*, then re-creates the dialog with the new values (you must keep the settings object up-to-date).

 

Anyway, here it is:

function main() {

    var settings = {
        proportionA: '0.2',
    };

    var docWidth = Number(app.activeDocument.documentPreferences.pageWidth);
    var docHeight = Number(app.activeDocument.documentPreferences.pageHeight);

    for (var i = 1; i < 5; ++i) {
        app.activeWindow.activePage.guides.add({ name: "Blah" + i, location: docWidth * i * 0.1, orientation: HorizontalOrVertical.VERTICAL });
    }

    while (makeWindow(settings).show() === 1) {

        // anything here happens every time the apply button is clicked

        // you can access anything you store in settings object
        $.writeln(settings.proportionA);

        var myGuide = app.activeWindow.activePage.guides.itemByName("Blah2");        
        if (myGuide.isValid) {
            alert("guide blah2: " + myGuide);
            app.activeWindow.activePage.guides.itemByName("Blah2").remove();
        }

    }

};

app.doScript(main, ScriptLanguage.JAVASCRIPT, undefined, UndoModes.ENTIRE_SCRIPT, 'Add guides');


function makeWindow(settings) {

    var myWindow = new Window("dialog");

    var ProportionsGroup = myWindow.add("group");
    ProportionsGroup.orientation = "column";
    ProportionsGroup.alignment = "left";
    ProportionsGroup.add("statictext", undefined, "Proportions (enter values between 0 and 1)");

    var ProportionEntries = ProportionsGroup.add("group");
    ProportionEntries.alignment = "left";

    var ProportionA = ProportionEntries.add("edittext", undefined, "");
    ProportionA.characters = 6;
    ProportionA.active = true;
    ProportionA.text = settings.proportionA || '0.2';

    var buttons = myWindow.add('group');
    var cancelButton = buttons.add("Button { text:'Cancel', enabled: true, properties: { name:'cancel' } }");
    var applyButton = buttons.add("Button { text:'Apply', enabled: true, properties: { name:'ok' } }");
    applyButton.onClick = function () { myWindow.close(1) };

    ProportionA.addEventListener('change', function () { settings.proportionA = parseFloat(this.text) });

    return myWindow;

};

 

See what you think.

 - Mark

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 15, 2023 Jul 15, 2023

Copy link to clipboard

Copied

Thank you mb, I will give this a try and see what I can do. 
So okay, you can't "delete" guides in a dialog, for whatever reason. But, can you HIDE guides instead? If so, then I might render all possible guides, and then reveal them gradually as desired in an event listener, if that's possible. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 15, 2023 Jul 15, 2023

Copy link to clipboard

Copied

Also, what is "DOM"?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 15, 2023 Jul 15, 2023

Copy link to clipboard

Copied

You can easily find definition in Google - Document Object Model. 

 

Here is one for InDesign:

 

https://www.indesignjs.de/extendscriptAPI/indesign-latest/#about.html

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 15, 2023 Jul 15, 2023

Copy link to clipboard

Copied

Here's code very similar to yours except at the bottom, I've reinstated the event handler function to do something. What I intend it to do is to "hide" a guide that has already been made earlier on, though it doesn't work.

 

function main() {

    var settings = {
        proportionA: '0.2',
    };

    var docWidth = Number(app.activeDocument.documentPreferences.pageWidth);
    var docHeight = Number(app.activeDocument.documentPreferences.pageHeight);

    for (var i = 1; i < 5; ++i) {
        app.activeWindow.activePage.guides.add({ name: "Blah" + i, location: docWidth * i * 0.1, orientation: HorizontalOrVertical.VERTICAL });
    }

    while (makeWindow(settings).show() === 1) {

        // anything here happens every time the apply button is clicked

        // you can access anything you store in settings object
        $.writeln(settings.proportionA);

        var myGuide = app.activeWindow.activePage.guides.itemByName("Blah2");        
        if (myGuide.isValid) {
            alert("guide blah2: " + myGuide);
            app.activeWindow.activePage.guides.itemByName("Blah2").remove();
        }

    }

};

app.doScript(main, ScriptLanguage.JAVASCRIPT, undefined, UndoModes.ENTIRE_SCRIPT, 'Add guides');


function makeWindow(settings) {

    var myWindow = new Window("dialog");

    var ProportionsGroup = myWindow.add("group");
    ProportionsGroup.orientation = "column";
    ProportionsGroup.alignment = "left";
    ProportionsGroup.add("statictext", undefined, "Proportions (enter values between 0 and 1)");

    var ProportionEntries = ProportionsGroup.add("group");
    ProportionEntries.alignment = "left";

    var ProportionA = ProportionEntries.add("edittext", undefined, "");
    ProportionA.characters = 6;
    ProportionA.active = true;
    ProportionA.text = settings.proportionA || '0.2';

    var buttons = myWindow.add('group');
    var cancelButton = buttons.add("Button { text:'Cancel', enabled: true, properties: { name:'cancel' } }");

    // Here we are defining a new button in the wondow, which closes and then reopens the window
    var applyButton = buttons.add("Button { text:'Apply', enabled: true, properties: { name:'ok' } }");
    applyButton.onClick = function () { myWindow.close(1) };

    function myEventHandler(){
        app.activeDocument.activePage.itemByName(Blah3).hidden
    }
    ProportionA.addEventListener('change', myEventHandler);

    return myWindow;

};

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 15, 2023 Jul 15, 2023

Copy link to clipboard

Copied

Shouldn't "Blah3" here:

 

app.activeDocument.activePage.itemByName(Blah3).hidden

 

be in ""? 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 15, 2023 Jul 15, 2023

Copy link to clipboard

Copied

LATEST

Hi @dane13860245, the DOM in this case is the Indesign Document Object Model, meaning any objects belonging to the Indesign app, as opposed to ExtendScript itself. You can do whatever you want in ExtendScript when a scriptUI dialog is open, but you can't do anything that changes the document. So you cannot change the visibility of a guide while the dialog is open. Also, more importantly, there doesn't seem to be any way to hide a single guide. There's nothing I could see in the api for Guide except maybe a workaround: guideColor. You could "hide" a guide by coloring it the same color as the paper:

// just an example guide
var guide = app.activeDocument.guides[0];
// this stops the guide being visible into the pasteboard
guide.fitToPage = true;
// make this match your paper
guide.guideColor = [255, 255, 255];

However you must do it in part of the code *after* the dialog is closed. See my while loop for example. It cannot be done in the eventListener as you wrote.

 

If you really need the document to update while the user is editing the dialog values, you might need to use a "palette" instead of a "dialog". I'm not very familiar with those, and they are more tricky to set up, but I'm pretty sure they can be made to do what you want.

- Mark

 

P.S. You can post code with the  </>  button in the forum editor.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines