function showImageAlert(src, cb) { var top = (document.documentElement.clientHeight - tileWidth * 3) / 2; //using tileWidth because we are scaling the bingo image to the screen width and the image is a square var alertContainer = d3.select("#alertContainer"); alertContainer.style("display", "block").style("top", "-" + (tileWidth * 3) + "px").on("click", null); var img = d3.select("#alertContainer img").attr("src", src).style("width", (tileWidth * 3) + "px"); //img.classed("rotate-text", true); console.log("top is " + top); //default behaviour is that image is removed when user clicks on it. alertContainer.on("click", function () { alertContainer.transition().duration(500).style("top", "-1300px") .each("end", function () { alertContainer.style("display", "none"); if (d3.select(".tile").classed("flip")) { var p = addClassToTiles(".tile", "unflip"); p.then(function () { d3.selectAll(".tile").classed("flip", false); }); } }); }); //show the image and invoke the callback after end of transition alertContainer.transition().duration(2000).style("top", top + "px").ease("bounce") .each("end", function () { if (typeof cb === "function") { cb(); } }); }
function highlightColumn(col) { var x = tileWidth * col, y = 0, w = tileWidth, h = height; d3.select("#columnHighlighter").style("top", y + "px").style("left", x + "px").style("width", w + "px").style("height", h + "px") .style("display", "block"); }
function highlightRow(row) { var y = tileHeight * row, x = 0, w = width, h = tileHeight; d3.select("#rowHighlighter").style("top", y + "px").style("left", x + "px").style("width", w + "px").style("height", h + "px") .style("display", "block"); }
.each("end", function () { alertContainer.style("display", "none"); if (d3.select(".tile").classed("flip")) { var p = addClassToTiles(".tile", "unflip"); p.then(function () { d3.selectAll(".tile").classed("flip", false); }); } });
img.onload = function () { // we can reposition the image if needed to properly centralise the captured image // using background-position-x or -y var xpos = (tileWidth - img.width) / 2, ypos = (tileHeight - img.height) / 2; var h = img.height * (tileWidth / img.width); d3.select("#" + tileId).style("background-image", "url(" + imageData + ")") .style("background-size", tileWidth + "px " + h + "px"); };
d3.selectAll(selector).each(function () { var el = d3.select(this); if (!p) { p = add(el); } else { p = p.then(function () { return add(el); }); } });
/** sets the text in the span provided. @param span a jquery selection object (e.g the result of a $("span.name")) */ function setName(id) { var span = d3.select("#" + id + " .name"); var currentName = span.html(); var msg = "Enter the name of the person you want to meet: ", title = "Name a face"; _prompt(msg, function (newName) { if (newName !== null) { span.style("background", "rgba(0,0,0,0.4)").html(newName); db.set(id + "name", newName); } }, title, currentName); }
function updateName(tileId, name) { d3.select("#" + tileId + " .name").html(name).style("background", "rgba(0,0,0,0.4)"); }