hide/show buttonbar when click on Preview button

jackmaessen

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?

peregrine

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.

jackmaessen

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>

R_J

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

hgtonight

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.

peregrine

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

jackmaessen

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