Need some help with weird clicking issue (possibly JS) [2.2.4]

Zhaan

Hiya! Need some help with a weird issue.. So basically I've removed all images from Button Bar, and now I'm only using text. It looks like this:

And here's the weird problem -- you have to click the padding AROUND the text (basically the div containing the span tag) for it to register the action. Clicking the actual text does nothing at all, which is extremely annoying.

Now, I don't know a thing about JS, but could the piece of code below have something to do with it? It does mention SPAN (which contains the text) and DIV which contains SPAN, but I'm kinda grasping at straws here.

(This is from buttonbar.js):

 // Attach events
     $(ThisButtonBar).find('div').mousedown(function(event){
        var MyButtonBar = $(event.target).closest('.ButtonBar');
        var Button = $(event.target).find('span').closest('div');
        if ($(Button).hasClass('ButtonOff')) return;

        var TargetTextArea = $(MyButtonBar).data('ButtonBarTarget');
        if (!TargetTextArea) return false;

        var Operation = $(Button).find('span').text();
        ButtonBar.Perform(TargetTextArea, Operation, event);
        return false;
     });

     ButtonBar.Prepare(ThisButtonBar, TextArea);
  },

As always, any help will be appreciated.

K17

Have you deleted images and add text before, or just replace images by texts ?

(I'm sorry for english errors, I'm french)

Zhaan

I didn't add any text, it was already there. Whoever made the addon simply hid the text and used background-images instead.

I removed the background images, made the text visible again and styled it. That's about it.

But yeah.. I really do wonder if that JS snippet has something to do with it.. /shrug

K17

@Zhaan said:
I didn't add any text, it was already there. Whoever made the addon simply hid the text and used background-images instead.

I removed the background images, made the text visible again and styled it. That's about it.

But yeah.. I really do wonder if that JS snippet has something to do with it.. /shrug

I don't know what you can do to fiwx it.
Try to contact the plugin devllopper.

peregrine

post the html code that appears on your screen around the button bar. since many of us don't use your version of vanilla or have it installed (nor do we plan to install it ).

e.g.

        <span class="editor-action icon icon-bold editor-dialog-fire-close" data-editor="{"action":"bold","value":""}" title="Bold" data-wysihtml5-command="bold"></span>
        <span class="editor-action icon icon-italic editor-dialog-fire-close" data-editor="{"action":"italic","value":""}" title="Italic" data-wysihtml5-command="italic"></span>
.snip.

Zhaan

They're all like this:

<div title="Italic, ctrl+i" class="ButtonBarItalic"><span>italic</span></div>

Zhaan

I have not touched the HTML at all. These are the contents of buttonbar.php:

<div class="ButtonBar"> <div><span>bold</span></div> <div><span>italic</span></div> <div><span>underline</span></div> <div><span>strike</span></div> <div><span>code</span></div> <div><span>image</span></div> <div><span>url</span></div> <div><span>quote</span></div> <div><span>spoiler</span></div> </div>

hgtonight

How did you remove the images? As in, what CSS rules did you use?

peregrine

I was thinking you could try adding in transparent images then you could click on image. might be the easiest without changing jQuery.

Zhaan

@hgtonigth they were just background-images, so I replaced them with a generic background colour.

@peregrine interesting.. I might give that a try

hgtonight

It looks like you are using ButtonBar 1.1 looking at that markup.

Try 1.6 which comes in the GitHub repo or in the 2.1.1 download.

Zhaan

I'm playing around 1.6 atm, but the text still can't be clicked so I'm back to square one.. Maybe it would be easier to edit buttonbar.js after all?

Zhaan

Does anyone know if the author is still active nowadays? Otherwise I'll have to seek help from a jQuery/JS guru.

hgtonight

I think I have found the issue.

ButtonBar.js binds the 'mousedown' event rather than the click event. I am sure they have their reasons. The problem with 'mousedown' is it is only fired on the element directly underneath the mouse and does not propagate to parent elements (like a click event does normally).

I added this snippet at the very end of my buttonbar.js file:

jQuery(document).on('click', '.ButtonBar .ButtonWrap span', function(e) {
  e.stopPropagation();
  $(this).parent().trigger('mousedown');
});

This should solve your issue.

EDIT - It says it was originally written by Tim Gunter. You can find him here (at) Tim.

Zhaan

That did indeed solve my problem. Thanks a lot to both of you.