Adding new features to the jskomment commenting system

Update: The file changes referenced in this post were integrated into the main project and no longer need to be added by hand.

I had some free time today and I decided to make a few changes to jskomment so that I could implement a few features that I felt were missing.

Here are the changes that I made:

Change Log:

  • jskomment has been given an overall nicer design.
  • The data is now sanitized when saved.
  • If the name field is left blank it will be changed to 'Anonymous' rather than display a blank string.
  • The time and date a comment was posted has now been added. It is customizable by defining JSKOMMENT_DATE in the jskomment.local.php file.
  • Added the ability for a commenter to add their website.
  • Added the ability for a commenter to leave their email address.
  • Added very basic parsing for the Markdown syntax (Bold, Italics, and URLs).

You can make the changes yourself or download a copy of the modified files that I have made available for you.

Making the changes

CSS Changes

I restyled the way the comments, text-boxes, and submit button looked so that they were relatively pleasing to look at as jskomment's default style does not exactly win it any beauty contests. :)

In the interest of time, you can acquire my updated CSS file here.

Modifying jskomment-core.js

Open jskomment-core.js and find the following at line 141:

$(array).each(function (k,commentEntry) {
  if (commentEntry.title != title) { throw new Exception('oops, precondition failed'); };
    var ePoster = $('<span class="jskomment_user"/>').text(commentEntry.name+': ');
    var eContent = $('<span class="jskomment_commentval"/>').html(commentEntry.comment.replace(/\n/g,'<br/>'));
    var eComment = $('<div class="jskomment_comment"/>').append(ePoster).append(eContent);
    elem.find('.jskomment_previous').append(eComment);
  }

Replace it with: 

$(array).each(function (k,commentEntry) {
  if (commentEntry.title != title) { throw new Exception('oops, precondition failed'); };
    var ePoster = $('<span class="jskomment_user"/>').html(commentEntry.name+': ');
    var eDate = $('<span class="jskomment_date"/>').text(commentEntry.date);
    var eContent = $('<br /><span class="jskomment_commentval"/>').html(commentEntry.comment.replace(/\n/g,'<br/>'));
    var eComment = $('<div class="jskomment_comment"/>').append(ePoster).append(eDate).append(eContent);
    elem.find('.jskomment_previous').append(eComment);
  }

Find the following around line 214:

try { name = localStorage.getItem('jskomment_username') || name; } catch (e) {}
var form = $('<form class="jskomment_form jskomment_add_comment">'
+'<input id="title" type="hidden" name="title" value="'+title+'"/>'
+'<div class="jskomment_input1">New comment from <input type="text" name="name" size="10"  value="'+name+'"/>: </div>'
+'<div class="jskomment_commentval"><textarea class="jskomment_input2" rows="6" cols="32" name="comment" value="your comment"/></div>'
+'<div class="jskomment_submit"><input class="jskomment_button" name="submit" type="submit" value="submit"/></div>'
+'</form>');

Replace it with:

var date='';
try { name = localStorage.getItem('jskomment_username') || name; } catch (e) {}
var form = $('<form class="jskomment_form jskomment_add_comment">'
+'<input id="title" type="hidden" name="title" value="'+title+'"/>'
+'<div class="jskomment_input1"><input class="textbox" type="text" name="name" placeholder="Name" size="30" maxlength="60 value="'+name+'" /></div>'
+'<div class="jskomment_input1"><input class="textbox" type="text" name="email" placeholder="Email (It will not be shared)" size="30" maxlength="60 value="" /></div>'
+'<div class="jskomment_input1"><input class="textbox" type="text" name="website" placeholder="Website" size="30" maxlength="60 value="" /></div>'
+'<div class="jskomment_commentval"><textarea class="jskomment_input2" cols="60" rows="5" name="comment" value="" placeholder="Please be respectful to others in your comments." /></div>'
+'<div class="jskomment_submit"><input class="jskomment_button" name="submit" type="submit" value="submit"/></div><br />'
+'You may use basic Markdown syntax in your post. **Bold**, __Italic__, and [Text](URL)'
+'</form>'
);

Modifying jskomment.php

Open jskomment.php file and find the get_comments() function near line 76 and replace it with:

function get_comments($query) {
  $result = array();
  $fname=DATADIR.sha1($query['title']);
  //echo $fname;
  if (file_exists($fname)) {
    foreach(file($fname) as $comment) {
      $comment = markdown($comment);
      $result[] = json_decode($comment, true);
    }
  } // end if
  return $result;
}

/** Implements some very basic Markdown */
function markdown($mdinput) {
  $mdinput = preg_replace("/\*\*(.*?)\*\*/", "<strong>$1</strong>", $mdinput);
  $mdinput = preg_replace("/\*(.*?)\*/", "<strong>$1</strong>", $mdinput);
  $mdinput = preg_replace("/\_\_(.*?)\_\_/", "<em>$1</em>", $mdinput);
  $mdinput = preg_replace("/\_(.*?)\_/", "<em>$1</em>", $mdinput);
  $mdinput = preg_replace('/\[(.*?)\]\s?\((.*?)\)/i', '<a href=\"$2\" rel=\"nofollow\">$1</a>', $mdinput);
  return $mdinput;
}

Next, you will need to find the add_comment() function near line 130 and replace it with:

function add_comment($comment) {
  $comment = check_recaptcha($comment);
  $fname=DATADIR.sha1(@$comment['title']);

  // Check to see if the user has defined how they want the comment date to look.
  if (!defined('JSKOMMENT_DATE')) {
    @$comment['date'] = date("M d, Y - g:i a");
  } else {
    @$comment['date'] = date(JSKOMMENT_DATE);
  }

  // Strip any tabs or spaces from the name and website fields.
  $namecheck = trim(@$comment['name'], " \t");
  $websitecheck = trim(@$comment['website'], " \t");

  // Replace a  blank user name with Anonymous. If a name is given sanitize it.
  if (empty($namecheck)) {
    @$comment['name'] = 'Anonymous';
  } else {
    @$comment['name'] = htmlspecialchars(strip_tags(@$comment['name']), ENT_NOQUOTES, 'utf-8');
  }

  // Attach the commenter's website to their name if included.
  if (!empty($websitecheck)) {
    @$comment['website'] = htmlspecialchars(strip_tags(@$comment['website']), ENT_NOQUOTES, 'utf-8');
    // Markdown. It will be converted to a proper link when displayed.
    @$comment['name'] = '['. @$comment['name'] . '](' . @$comment['website']. ')';
  }

  // Sanitize the remaining fields.
  @$comment['email'] = htmlspecialchars(strip_tags(@$comment['email']), ENT_NOQUOTES, 'utf-8');
  @$comment['comment'] = htmlspecialchars(strip_tags(@$comment['comment']), ENT_NOQUOTES, 'utf-8');

  $file  = fopen($fname, "a");
  fputs($file,json_encode($comment)."\n");
  fclose($file);
  return '{}'; // for json-p
}

Adjust the time and day format for comments (Optional)

By default comments will have the following format: Mar 13, 2013 - 7:31 pm

However, the time and day format is easily changed by defining JSKOMMENT_DATE in the jskomment.local.php file.

Please see the PHP manual for available formatting options.

Example:

Supplying the following format would would make it look like 2013-03-13 19:22:31

<?
    @define('JSKOMMENT_DATE','Y-m-d H:i:s');
?>

Comments?

recommended sites

social