Fix ContextMenu images.

[gogo]

The images in Xinha's version of ContextMenu are nto working.

[yermol]

It looks like the ContextMenu plugin expects a flat image name where the new htmlarea.js has an array. If I understand the code correctly, htmlarea.js uses 1 gif for the button bar where as ContextMenu is still referencing it as if each button was an individual gif.

htmlarea.js:395 for instance:

cut: [ "Cut selection", ["ed_buttons_main.gif",5,0], false, cut_copy_paste ]

content-menu.js:49 uses the reference:

config.btnListcut?[1]

cut?[1] refers to an array. cut?[1][0] refers to the gif, but it's the combined gif. (ed_buttons_main_gif instead of the old ed_cut.gif as referenced by the commented out section in htmlarea.js:365)

Not sure how to handle this. It would seem any plugins that reference the original set of buttons will need to be modified to use the new combined button gif.

If that gif then changes it may cause a maintainability problem.

The plugin should probably manage it's own set of buttons images so it's independent of the main set??

[gogo]

No I changed that, if you have a look around line 385 it gets passed through to a function in htmlarea.js in order to create the image for display (changeset:8 line 385). Still doesn't work (reliably, I did get it to work once I think), it must be some CSS ficklness.

[yermol]

To come up to speed I figured I'd try something simple. Here are the contents of the ContextMenu Div (innerHTML). I'm guessing you're using a viewport type construct to make sections of the larger image visible. Does anything jump out as being incorrect? I'm guessing maybe the relative path is a problem? (Testing it in flat HTML seems to work fine).

<table cellpadding="0" cellspacing="0"><tbody><tr class="item"><td class="icon"><div style="position: relative; overflow: hidden; width: 18px; height: 18px;"><img style="position: relative; top: -36px; left: -90px;" src="../images/ed_buttons_main.gif"></div></td><td class="label">Paste</td></tr><tr class="separator"><td class="icon"><div></div></td><td class="label"><div></div></td></tr><tr class="item"><td class="icon"><div style="position: relative; overflow: hidden; width: 18px; height: 18px;"><img style="position: relative; top: -18px; left: -18px;" src="../images/ed_buttons_main.gif"></div></td><td class="label">Justify Left</td></tr><tr class="item"><td class="icon"><div style="position: relative; overflow: hidden; width: 18px; height: 18px;"><img style="position: relative; top: -36px; left: -36px;" src="../images/ed_buttons_main.gif"></div></td><td class="label">Justify Center</td></tr><tr class="item"><td class="icon"><div style="position: relative; overflow: hidden; width: 18px; height: 18px;"><img style="position: relative; top: -18px; left: -36px;" src="../images/ed_buttons_main.gif"></div></td><td class="label">Justify Right</td></tr><tr class="item"><td class="icon"><div style="position: relative; overflow: hidden; width: 18px; height: 18px;"><img style="position: relative; top: -36px; left: -18px;" src="../images/ed_buttons_main.gif"></div></td><td class="label">Justify Full</td></tr><tr class="separator"><td class="icon"><div></div></td><td class="label"><div></div></td></tr><tr class="item"><td class="icon"></td><td class="label">Remove the <FONT> Element...</td></tr><tr class="item"><td class="icon"></td><td class="label">Insert paragraph before</td></tr><tr class="item"><td class="icon"></td><td class="label">Insert paragraph after</td></tr></tbody></table>

[yermol]

I put this in the forum as well; not knowing where general questions like this should go.

After some digging, the bug seems to be in plugins/ContextMenu/menu.css at line 20 where it says:

div.htmlarea-context-menu tr.item td.icon img {

width: 18px; height: 18px;

}

Commenting out the width and height causes the images to show up, but I'm afraid I don't why. Is it possibly that this style is scaling the ed_buttons image down to 18x18 before the viewport code is applied?

[yermol]

Fixed in SVN commit 23.