fetchSpreadsheet.js

function updateTable(tbl, cells) {
  while (tbl.firstChild) {
    tbl.removeChild(tbl.firstChild);
  }
  for (var i = 1; i < cells.length; i ++) {
    var tr = document.createElement("tr")
    tbl.appendChild(tr)
    for (var j = 1; j < cells[i].length; j ++) {
      if (cells[i] === void 0) {
        continue
      }
      var td = document.createElement((i == 1)? "th": "td")
      var text = document.createTextNode(cells[i][j])
      td.appendChild(text)
      tr.appendChild(td)
    }
  }
}
function updateMarkdown(pre, cells) {
  while (pre.firstChild) {
    pre.removeChild(pre.firstChild);
  }
  for (var i = 1; i < cells.length; i ++) {
    var s = "|"
    for (var j = 1; j < cells[i].length; j ++) {
      if (cells[i] === void 0) {
        continue
      }
      s += " "
      s += cells[i][j]
      s += " |"
    }
    s += "\n"
    if (i === 1) {
      s += "|"
      for (var j = 1; j < cells[i].length; j ++) {
        s += "---|"
      }
      s += "\n"
    }
    var text = document.createTextNode(s)
    pre.appendChild(text)
  }
}
function fetchCells(url, callback) {
  $.ajax({
    url: url,
    dataType: "json",
    cache: true,
    success: function(data, textStatus){
      var entries = data.feed.entry
      var cells = []
      for (var i = 0; i < entries.length; i ++) {
        var entry = entries[i]
        var cell = entry.gs$cell
        if (cells[cell.row] === void 0) {
          cells[cell.row] = []
        }
        cells[cell.row][cell.col] = cell.$t
      }
      callback(cells)
    }
  })
}
function fetchSpreadsheet() {
  var divs = $("div.spreadsheet[key]")
  for (var i = 0; i < divs.length; i ++) {
    var div = divs[i]
    var tbl = document.createElement("table")
    var pre = document.createElement("pre")
    pre.style.marginTop = 0
    var key = div.getAttribute("key")
    var a = document.createElement("a")
    a.href = "https://docs.google.com/spreadsheets/d/" + key +
     "/edit?usp=sharing"
    a.appendChild(document.createTextNode("Spreadsheet"))
    var url = "https://spreadsheets.google.com/feeds/cells/" +
     key + "/1/public/values?alt=json"
    fetchCells(url, function(cells) {
      updateTable(tbl, cells)
    })
    fetchCells(url, function(cells) {
      updateMarkdown(pre, cells)
    })
    var divTbl = document.createElement("div")
    divTbl.appendChild(tbl)
    divTbl.style.float = "left"
    div.appendChild(divTbl)
    var divInfo = document.createElement("div")
    divInfo.style.float = "right"
    divInfo.appendChild(pre)
    divInfo.appendChild(a)
    div.appendChild(divInfo)
    var divSep = document.createElement("div")
    divSep.style.clear = "both"
    divSep.innerHTML = '<hr style="display: none"></hr>'
    div.parentNode.insertBefore(divSep, div.nextSibling)
  }
}
function initSpreadsheet() {
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js";
  head.appendChild(script);
  window.addEventListener("load", fetchSpreadsheet)
}