ClientLogic.js.html

<script>
$(function() {
  google.script.run.withSuccessHandler(renderTagList)
      .getTagsSortedByPopularity();

  findEntriesByTag('All', 0, 10);
});

String.prototype.format = function (){
    var args = arguments;
    return this.replace(/\{\{|\}\}|\{(\d+)\}/g, function (curlyBrack, index) {
        return ((curlyBrack == "{{") ? "{" : ((curlyBrack == "}}") ? "}" : args[index]));
    });
};

/**
 * Displays each tag as an html link. Upon click, request the entries matching
 * the tags and display it in the entry area.
 */
function renderTagList(tags) {
  tags.forEach(function(tag) {
    var tagDisplayObj = getHtmlForASingleTag(tag.name, tag.count);
    $("#tags-list").append(tagDisplayObj.html);

    addTagClickEvent(tagDisplayObj.id, tag.name);
  });
}

// The code in this function runs when the page is loaded.
function onAddEntry() {
  var tagsArray = $("#input-tags").val().split(' ');
  google.script.run.withSuccessHandler(refreshTopTen)
    .addEntry($("#input-content").val(), tagsArray);

  return false;
};

function refreshTopTen(things) {
	$("#input-tags").val('');
	$("#input-content").val('');

  findEntriesByTag('All', 0, 10);
}

/**
 * Clears the entry div container and renders the provided entries.
 * @param entries
 */
function renderEntries(result) {
  var entries = result.entries;

  // clear all the entry tag events first
  var entryTagIdPrefix = 'entry-tag-';
  //$("[id^=" + entryTagIdPrefix + "]").off('click');
  var entryListNode = $("#entry-list");

  // Prev and Next links
  entryListNode.append('<div>');

  if ( result.offset > 0 ) {
    entryListNode.append("[<a href='' id='prev'>Prev</a>] ");
  }
  else {
    entryListNode.append("[Prev] ");
  }

  entryListNode.append("displaying entries {0} to {1} ".format(
        result.offset + 1, result.offset + result.count));

  if ( result.hasMore ) {
    entryListNode.append("[<a href='' id='next'>Next</a>] ");
  }
  else {
    entryListNode.append("[Next] ");
  }

  entryListNode.append('</div>');

  $("#prev").click(function() {
    findEntriesByTag(result.searchValue, 
        result.offset - result.count, 
        result.count);
    return false;
  });

  $("#next").click(function() {
    findEntriesByTag(result.searchValue, 
        result.offset + result.count, 
        result.count);
    return false;
  });

  var markDownReader = new commonmark.Parser();
  var markDownWriter = new commonmark.HtmlRenderer();

  entries.forEach(function(entry) {
    var contentHtml = markDownWriter.render(
        markDownReader.parse(entry.content));

		var html = '<div id="entry">';
    html += "<p id='entry-content'>{0}</p>".format(contentHtml);
		html += 'Tags: ';

    // accumulate the id and the tag name to register the event, after the 
    // tag link has been added to the DOM tree
    var tagIds = []; 
    entry.tags.forEach(function(name) {
      var tagDisplayObj = getHtmlForASingleTag(name, null, entryTagIdPrefix);
      html += tagDisplayObj.html;

      tagDisplayObj.name = name;
      tagIds.push(tagDisplayObj);
    });

    html += "<br />{0}".format(
        new Date(entry.creationTime).toLocaleString());
    html += '</div>';

    entryListNode.append(html);

    tagIds.forEach(function(obj) {
        addTagClickEvent(obj.id, obj.name);
    });
  });
}

/**
 * Returns an object containing the HTML string for the tag and the element's
 * id.
 * @return {html: string, id: string}
 */
function getHtmlForASingleTag(tagName, tagCount, idPrefix) {
  if ( 'undefined' == typeof idPrefix ) {
    idPrefix = 'tag-';
  }
  var id = idPrefix + tagName;

  var html;
  if (null != tagCount) {
    html = "<a href='' id='{0}'>{1} ({2})</a> ".format(id, tagName, tagCount);
  }
  else {
    html = "<a href='' id='{0}'>{1}</a> ".format(id, tagName); 
  }

  return {html: html, id: id};
}

/**
 * Handles clicking on a tag -> find entries matching the provided tag.
 */
function addTagClickEvent(id, tagName) {
  $("#" + id).click(function() {
    findEntriesByTag(tagName, 0, 10);
    return false;
  });
}

function findEntriesByTag(tagName, offset, count) {
  $("#entry-list").html('');
  $("#prev").off('click');
  $("#next").off('click');

  google.script.run
    .withSuccessHandler(renderEntries)
    .findEntriesByTag(tagName, offset, count);
}

</script>