Skip to main content
T
TooLzor
Known Participant
November 26, 2018
Question

Flyout menu broken in 2019?

  • November 26, 2018
  • 3 replies
  • 2003 views

Hey guys,

So I've had settings put into the flyout menu of my extension for easily a year or two now and in the latest adobe update it's disappeared which really really breaks the usability of it.

Here's a snippet of me setting the menu up.

function init() {
        
        // Ugly workaround to keep track of "checked" and "enabled" statuses
var checkableMenuItem_isChecked = true;
var targetMenuItem_isEnabled = true;
// Flyout menu XML string 
var flyoutXML = '<Menu> \
                            <MenuItem Id="modes" Label="Modes" Enabled="false"/>\
                            <MenuItem Label="---" /> \
<MenuItem Id="selectedGroupMode" Label="Selected Group Mode" Enabled="true" Checked="true"/> \
<MenuItem Id="groupContentsMode" Label="Group Contents Mode" Enabled="true" Checked="false"/> \
<MenuItem Id="channelPackingMode" Label="Channel Packing Mode" Enabled="true" Checked="false"/> \
<MenuItem Id="wysiwygMode" Label="WYSIWYG Mode" Enabled="true" Checked="false"/> \
<MenuItem Label="---" /> \
\
</Menu>';
// Uses the XML string to build the menu
csInterface.setPanelFlyoutMenu(flyoutXML);
        
// Flyout Menu Click Callback
function flyoutMenuClickedHandler (event) {
// the event's "data" attribute is an object, which contains "menuId" and "menuName"
console.dir(event); 
switch (event.data.menuId) {
case "selectedGroupMode": 
checkableMenuItem_isChecked = !checkableMenuItem_isChecked;
csInterface.updatePanelMenuItem("Selected Group Mode", true, true);
                    csInterface.updatePanelMenuItem("Group Contents Mode", true, false);
                    csInterface.updatePanelMenuItem("Channel Packing Mode", true, false);
                    csInterface.updatePanelMenuItem("WYSIWYG Mode", true, false);
                    loadJSX('selectedGroup.jsx');
break;
                case "groupContentsMode": 
checkableMenuItem_isChecked = !checkableMenuItem_isChecked;
csInterface.updatePanelMenuItem("Selected Group Mode", true, false);
                    csInterface.updatePanelMenuItem("Group Contents Mode", true, true);
                    csInterface.updatePanelMenuItem("Channel Packing Mode", true, false);
                    csInterface.updatePanelMenuItem("WYSIWYG Mode", true, false);
                    loadJSX('groupContents.jsx');
break;
                    
                case "channelPackingMode": 
checkableMenuItem_isChecked = !checkableMenuItem_isChecked;
csInterface.updatePanelMenuItem("Selected Group Mode", true, false);
                    csInterface.updatePanelMenuItem("Group Contents Mode", true, false);
                    csInterface.updatePanelMenuItem("Channel Packing Mode", true, true);
                    csInterface.updatePanelMenuItem("WYSIWYG Mode", true, false);
                    loadJSX('channelPacking.jsx');
break;
                case "wysiwygMode": 
checkableMenuItem_isChecked = !checkableMenuItem_isChecked;
csInterface.updatePanelMenuItem("Selected Group Mode", true, false);
                    csInterface.updatePanelMenuItem("Group Contents Mode", true, false);
                    csInterface.updatePanelMenuItem("Channel Packing Mode", true, false);
                    csInterface.updatePanelMenuItem("WYSIWYG Mode", true, true);
                    loadJSX('wysiwyg.jsx');
break;
                    
default: 
console.log(event.data.menuName + " clicked!");
}
//csInterface.evalScript("alert('Clicked!\\n \"" + event.data.menuName + "\"');");
}
// Listen for the Flyout menu clicks
csInterface.addEventListener("com.adobe.csxs.events.flyoutMenuClicked", flyoutMenuClickedHandler);
                       


I've manually updated the CSInterface.js file I was using to the new one from
CEP-Resources/CSInterface.js at master · Adobe-CEP/CEP-Resources · GitHub
and same result after building.

Has something changed drastically? It was working fine for the longest time.

This topic has been closed for replies.

3 replies

U
user9282867
Participant
December 5, 2018

Hi

   I am from CEP team.  we have sample extension where we are creating flyout menu. You can find code atCEP-Resources/CEPFeatures.html at master · Adobe-CEP/CEP-Resources · GitHub

Thank

Amit

T
TooLzorAuthor
Known Participant
December 14, 2018

Ah, at this point I've already started a big UI/UX overhaul which is going to bring the stuff I had in the flyout menu just into the panel itself

Thanks for looking, sorry for time wasting.

    Silly-V
    Silly-V
    Legend
    January 5, 2019

    Unfortunately the example code is not working, but it appears some limited functionality is still in play as the first and 2nd-to-last and last of the example string's menu items were displayed. This meant that nested items were not welcome.

    Next, updating the items was not working - possibly because these items could not be checked and therefore would not report expected information in the callback event anyhow - so event.data.checked is out as well. Nevertheless, even with a global variable taking place of data.checked, it failed to update the item.

    However, it appears that we can just re-apply the entire thing. Here is what I was able to make work just now:

    // global variable
    var GLOBAL_VAR = false;
    /**
     * 
     * @param {Object} firstMenuItem - The object for the first menu item.
     * @param {string} firstMenuItem.name - Item's name.
     * @param {string} firstMenuItem.checked - Whether it's checked.
     */
    function setFlyoutMenu(firstMenuItem){
      const menuString = `<Menu>
        <MenuItem Id="menuItemId1" Label="Is GLOBAL_VAR true?" Enabled="true" Checked="${GLOBAL_VAR}"/>
      </Menu>`;
      const cs = new CSInterface();
      cs.setPanelFlyoutMenu(menuString);
      cs.addEventListener("com.adobe.csxs.events.flyoutMenuClicked", setPanelCallback);
    }
    function setPanelCallback(event) {
      const cs = new CSInterface();
      console.log('The menu ID is: ' + event.data.menuId + '\n' + 'The menu name is: ' + event.data.menuName);
      if(event.data.menuId == "menuItemId1"){
        GLOBAL_VAR = !GLOBAL_VAR;
        // not working
        // cs.updatePanelMenuItem(event.data.menuId, true, event.data.checked);
        // cs.updatePanelMenuItem(event.data.menuId, true, GLOBAL_VAR);
        setFlyoutMenu({
          name: event.data.menuId,
          checked: GLOBAL_VAR
        });
      }
    }
      erinferinferinf
      Adobe Employee
      erinferinferinf
      Adobe Employee
      December 4, 2018

      Hi Tool111,

      I asked the CEP team, and they said that flyout menus work in CEP 9 / Photoshop 2019 on their internal testing sample app. They tried your code sample above and could confirm the flyout menu didn't work.

      Could we get some more details on your operating system and the exact version(s) of Photoshop that you've tried?

      They also asked if they could see your extension. Is it available for download on Github or listed on the Creative Cloud Exchange by any change?

      Wish I had some better news...

      Erin

      T
      TooLzorAuthor
      Known Participant
      December 3, 2018

      Hey, so far all my things are only PS and only one is using the flyout. I'm thinking of removing it but till I get new UI built for it it would be great to fix it

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices