Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

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

This discussion is related to the Button Bar addon.
ZhaanZhaan Professional fool ✭✭
edited August 2014 in Vanilla 2.0 - 2.8

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.

Comments

  • K17K17 Français / French Paris, France ✭✭✭

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

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

  • ZhaanZhaan Professional fool ✭✭
    edited August 2014

    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

  • K17K17 Français / French Paris, France ✭✭✭

    @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.

  • peregrineperegrine MVP
    edited August 2014

    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.
    





    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • ZhaanZhaan Professional fool ✭✭
    edited August 2014

    They're all like this:

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

  • ZhaanZhaan Professional fool ✭✭

    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>

  • hgtonighthgtonight ∞ · New Moderator

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

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

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

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    Zhaan
  • ZhaanZhaan Professional fool ✭✭

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

    @peregrine interesting.. I might give that a try

  • hgtonighthgtonight ∞ · New Moderator

    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.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

    peregrineZhaan
  • ZhaanZhaan Professional fool ✭✭

    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?

  • ZhaanZhaan Professional fool ✭✭

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

  • hgtonighthgtonight ∞ · New Moderator
    edited August 2014

    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.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

    Zhaanperegrine
  • ZhaanZhaan Professional fool ✭✭

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

    peregrine
Sign In or Register to comment.