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

hide/show buttonbar when click on Preview button

jackmaessenjackmaessen ✭✭✭
edited January 2015 in Vanilla 2.0 - 2.8

When buttonbar is enabled and you want to preview your comment with click on Preview button in a topic, the buttonbar keeps hanging in the preview. So i was searching where the div Preview is created and it is in:

applications\vanilla\views\post\preview.php

The original code looks like this:

 <?php if (!defined('APPLICATION')) exit();
$this->FireEvent('BeforeCommentPreviewFormat');
$this->Comment->Body = Gdn_Format::To($this->Comment->Body, GetValue('Format', $this->Comment, C('Garden.InputFormatter')));
$this->FireEvent('AfterCommentPreviewFormat');

?>

<div class="Preview">
   <div class="Message"><?php echo $this->Comment->Body; ?></div>
</div>

So i use some jQuery to hide/show the .ButtonBar class:

<?php if (!defined('APPLICATION')) exit();
$this->FireEvent('BeforeCommentPreviewFormat');
$this->Comment->Body = Gdn_Format::To($this->Comment->Body, GetValue('Format', $this->Comment, C('Garden.InputFormatter')));
$this->FireEvent('AfterCommentPreviewFormat');
echo '<script>$(document).ready(function(){
  $("a.PreviewButton").click(function(){
  $(".ButtonBar").hide();
  });
  $("a.WriteButton").click(function(){
  $(".ButtonBar").show();
  });
});</script>';
?>

<div class="Preview">
  <div class="Message"><?php echo $this->Comment->Body; ?></div>
</div>

This does work, but only after pressing the second time on Preview Button.
So the first time you press on Preview Button, .ButtonBar class does not hide.
Then you press on Edit button, and again on Preview button: this time .ButtonBar class is gone.

Why not the first time?

BTW: i prefer ofcourse not editing the core files, but is there another option to make this work?

Comments

  • Options
    peregrineperegrine MVP
    edited January 2015

    not your answer...

    you will notice some editors have other things in the buttonbar when previewing - like on the this site - the enlarge image on the right.

    seems like a very minor issue. that could cause bigger problems down the road. by hiding the entire buttonbar on previewing.

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

  • Options

    ok @peregrine, i will certainly post this as an issue on Github.
    But i still do not understand that you need to press 2 times on Preview before .Buttonbar class is gone.
    I also tried to hide the .Buttonbar class by adding a style element. This works immediately without problem but it is not proper html:

    <div class="Preview">
       <style>
          .ButtonBar {
             display: none;
          }
    
       </style>
      <div class="Message"><?php echo $this->Comment->Body; ?></div>
    </div>
    
  • Options
    R_JR_J Ex-Fanboy Munich Admin
    edited January 2015

    @jackmaessen said:

        echo '$(document).ready(function(){
          $("a.PreviewButton").click(function(){
          $(".ButtonBar").hide();
          });
          $("a.WriteButton").click(function(){
          $(".ButtonBar").show();
          });
        });';
        ?>
        
    


    This does work, but only after pressing the second time on Preview Button.
    So the first time you press on Preview Button, .ButtonBar class does not hide.
    Then you press on Edit button, and again on Preview button: this time .ButtonBar class is gone.

    Why not the first time?

    Don't know, but I would use $("a.PreviewButton").on("click", function(){ instead of $("a.PreviewButton").click(function(){ but I even do not know why that ;)

    @jackmaessen said:
    BTW: i prefer ofcourse not editing the core files, but is there another option to make this work?

    Great! So make it a part of a custom theme by adding it with a themehook or creating a plugin of its own for that.

    Couldn't this be solved with CSS by giving the button bar a lower z index than the preview popup?

  • Options
    hgtonighthgtonight ∞ · New Moderator

    The issue is that your code is only being loaded after the preview button has been clicked. You code then binds to that click, so it does what you expect on the second click.

    Put your code in an external JS file and add it to the head module or the foot module and be done with it.

    Also, if it is a Z-Fighting issue as @R_J says, you should solve this with CSS.

    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.

  • Options
    peregrineperegrine MVP
    edited January 2015

    external js files yes. prefer that to inline scripting if js is needed at all.

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

  • Options

    I put the jquery code external and it works great now; immediately after the first click!

Sign In or Register to comment.