Discussion refresh seems not really refreshing

jackmaessen

Version 2.1.3
I have a problem with automatically refreshing post when submitted.
Per example, when using code with geshi highlighter and submit the code,
See snapshot below;
After submitting, this is what i see:

When doing a "hard" refresh of the browser, i see this:

jackmaessen

update:
piece of code in the console:
After submit:

Only after browser refresh, geshi is loaded:

How can i solve this problem?

R_J

I'm kind of helpless, I must admit...

GeSHi changes comments by using the BeforeCommentBody event. That is inside of the function WriteComment that I use. So I would expect that if I use that function, every plugin using the BeforeCommentBody event will change the output, but obviously that's not the case.

I would have to debug that, but it could take some time before I have time to do so, sorry! Maybe one of the developers around has a theory on why this is not working.

There are some js issues that you would face nonetheless because GeSHi fires a script on document load which will never be executed for the refreshed comments, but at least the comments should not look like you've provided in your screenshot...

jackmaessen

That's correct;, normal comments are not the problem, they occur immediately; only the geshi highlighting is a problem...

R_J

@jackmaessen: I know it is quite late to come back on that, but I just did it right now and I didn't managed to recreate the problem.

I have enabled Discussion Refresh and GeSHi and when I post a longer piece of php code, it is highlighted as expected. The only thing not working here is the GeSHis javascript that expands the code display.

What I do not see is that "Selecteer Code". Maybe whatever creates that destroys themarkup? Could you post a list of plugins you have enabled?

R_J

By the way: I've commented out the js part in base_render_before so that it looks only like that:

    public function Base_Render_Before($Sender) {
        $Sender->AddCssFile($this->GetResource('styles.css', FALSE, FALSE));
    }

And to the styles.css I've add a rule:

.geshi_syntax:hover {
    display:inline-block;
    width: auto;
    min-width: 100%;
}

That way, the expansion of long code a) doesn't rely on javascript (why should it?) and what's more important: b) works also for just posted code snippets

jackmaessen

Great job @R_J

About the "Select Code"; i made this myself just above the code block.
In default.php from geshi plugin this is what i did ( read the ADDED lines):

function pre_entities($match) {
    include_once(PATH_PLUGINS.DS.'GeSHiSyntaxHighlighter'.DS.'geshi'.DS.'geshi.php');
    $language = strtolower(trim($match[1]));
    $line = trim($match[2]);
    $escaped = trim($match[3]);
    $code = geshisyntax_code_trim($match[4]);
    if ($escaped == "true") $code = htmlspecialchars_decode($code);

    $geshi = new GeSHi($code, $language);
    $geshi->enable_keyword_links(false);
    $geshi->enable_classes();   
    echo '<style type="text/css">'.$geshi->get_stylesheet()."</style>";

    $element_id = uniqid(); // ADDED generate unique ID
    $output = '';
    $output .='<p /><div class="selectable_anchor"><a rel="highlight'.$element_id.'" class="selectable">[Selecteer Code]</a></div>'; // ADDED assign unique ID to rel attribute

        $output .= "<div class='geshi_syntax'><table><tr>";


    if ($line) {

    $output .= "<td class='line_numbers'>";
    $output .= geshisyntax_line_numbers($code, $line);
    $output .= '</td><td class="code">';

    $output .= '<div id="highlight'.$element_id.'" class="code">'; // ADDED assign unique ID to div

    $output .= $geshi->parse_code();
    $output .= '</div>';
    $output .= "</td>";

    }
    else {
        $output .= "<td>";
        $output .= '<div id="highlight'.$element_id.'" class="code">'; // ADDED assign unique ID to div
        $output .= $geshi->parse_code();
        $output .= "</div>";
        $output .= "</td>";
    }

The corresponding javascript: i stored this in my themes bootstrap/js/selectable.js and looks like this:

function SelectText(element) {
    var doc = document;
    var text = doc.getElementById(element);    
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}


$( document ).ready(function() {
    $('a.selectable').click(function() {
        SelectText( $(this).attr("rel") );
    });

})

OK; this was about geshi plugin. There was also a problem with Mark V plugin which @hgtonight created: (also need a hard refresh)

<?php if (!defined('APPLICATION')) exit();
/*Copyright 2014 Zachary Doll */
$PluginInfo['MarkV'] = array(
    'Name' => 'Mark V',
    'Description' => 'Allows user to mark a comment as a V.',
    'Version' => '0.1',
    'MobileFriendly' => TRUE,
  'Author' => 'Zachary Doll',
    'AuthorEmail' => 'hgtonight@daklutz.com',
    'AuthorUrl' => 'http://www.daklutz.com',
    'License' => 'GPLv3'
);

class MarkVPlugin extends Gdn_Plugin {

  public function DiscussionController_CommentInfo_Handler($Sender) {
    $this->AddMarkV($Sender);
  }

  protected function AddMarkV($Sender) {
    $Discussion = $Sender->EventArguments['Discussion'];
    $Session = Gdn::Session();
    $Comment = $Sender->EventArguments['Comment'];
      if($Session->UserID == $Discussion->InsertUserID || $Session->CheckPermission('Garden.Moderation.Manage')) {
      if ($Comment->MarkV) {
        echo Anchor("", 'discussion/markv/' . $Comment->CommentID, 'Hijack img-swap on');
      }
      else {
        echo Anchor("", 'discussion/markv/' . $Comment->CommentID, 'Hijack img-swap');
      }
    }
    else {
      if ($Comment->MarkV) {
        echo Wrap("", 'div', array('class' => 'Hijack img-swap on'));

      }
      else {
        echo Wrap("", 'div', array('class' => 'Hijack img-swap'));
      }
    }
  }

  ////////////////////////////////////////////////////////////

  ////////////////////////////////////////////////////////////

  public function DiscussionController_Render_Before($Sender) {
    $Sender->AddJsFile($this->GetResource('js/markv.js', FALSE, FALSE));
    $Sender->AddCssFile($this->GetResource('design/markv.css', FALSE, FALSE));
  }

  public function DiscussionController_MarkV_Create($Sender, $Args) {
    // Make sure the user is allowed to mark this comment

    $Comment = $Sender->CommentModel->GetID($Args[0]);
    $Discussion = $Sender->DiscussionModel->GetID($Comment->DiscussionID);
    $Session = Gdn::Session();



    if($Session->UserID == $Discussion->InsertUserID or $Session->CheckPermission('Garden.Moderation.Manage')) {
      $Sender->CommentModel->SetField($Comment->CommentID, 'MarkV', !$Comment->MarkV);

      if(!$Sender->Request->IsPostBack()) {

        Redirect('/discussion/' . $Comment->DiscussionID);

      }
      else {
        $Sender->InformMessage('&#10004; Geupdate');
        // Don't render anything
        $Sender->Render('Blank', 'Utility', 'Dashboard');
      }
    }


  }

  public function Structure() {
    $Structure = Gdn::Structure();
    $Structure->Table('Comment')
      ->Column('MarkV', 'tinyint', 0)
      ->Set();
  }

    public function Setup() {
    $this->Structure();
    }
}

R_J

Instead of using

    $( document ).ready(function() {
        $('a.selectable').click(function() {
            SelectText( $(this).attr("rel") );
        });
    })

you should consider using something like:

$( document ).ready(function() {
    $('div#Content').on('click', 'div.geshi_syntax', function () {
        var doc = document;
        var text = $(this).find('div.code');
        if (doc.body.createTextRange) {
            var range = document.body.createTextRange();
            range.moveToElementText(text);
            range.select();
        } else if (window.getSelection) {
            var selection = window.getSelection();
            var range = document.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
        }
         console.log("yeahhhh!!! but this doesn't work for me :(");

    });
});

I do not understand why, but it doesn't do what I expect it to do. What is "better" is, that it uses .on('click' so that also newly created elements will be bound to that click element. And you do not need to add unique identifiers to it. I tried to simply let the magic happen when someone clicks on the code so that no extra link is needed.

Concerning @hgtonight's plugin: I see there is a js/markv.js and I woould guess it also uses element.click instead of $('body').on('click'...

hgtonight

Mind posting the MarkV plugin js? I can't remember what I wrote. I wrote this as a one off plugin that I never intended to support.

jackmaessen

This is the markv.js

    jQuery(document).ready(function ($) {
      $('a.img-swap').click(function () {
        $(this).toggleClass('on');
      });
    });

hgtonight

    jQuery(document).ready(function ($) {
      $('#Content').on('click', 'a.img-swap', function () {
        $(this).toggleClass('on');
      });
    });