New Type

"; newType.value = "new"; type.appendChild(newType); type.value = activeData.Type; makeSwatches(); recolorEditor(); } function makeNewType() { editor.querySelector("#type").style.display = "none"; const newTypeBox = document.createElement("textArea"); editor.appendChild(newTypeBox); d3.select(newTypeBox) .style("position", "absolute") .style("top", "0px") .style("left", "0px") .style("width", "fit-content") .style("height", "1.2em") .style("font-family", "serif") .style("font-size", "1.2em") .style("font-style", "italic") .style("background", "none") .style("padding", "3px") .style("resize", "none") .style("margin", "0.1em 0.2em 0em 0.2em") .on("change", function() { activeData.Type = this.value; data.splice(data.indexOf(activeData), 1); // move to end of array (helps swatches) data.push(activeData); this.remove(); editor.querySelector("#type").style.display = "block"; fillTypeSelector(); edited("Type"); }) newTypeBox.focus(); } function showEditor(card, event, d) { for(let key of ["Type", "Title", "Description"]) { const element = editor.querySelector("#" + key.toLowerCase()); element.value = d[key]; if(key != "Type") { element.textContent = d[key]; } } d3.select(editor).selectAll("*") .style("visibility", "visible") d3.select(editor) .style("background", color(d.Type)) .selectAll("button") .style("background", color(d.Type)) .on("mouseover", function() {this.style.background = darkerColor(color(d.Type))}) .on("mouseout", function() {this.style.background = color(d.Type)}) d3.select(editor).select("#deleteButton") .text("Delete Card") .on("click", function() { // DELETE CARD if(this.textContent == "Delete Card") { this.textContent = "Are You Sure?"; } else if(this.textContent == "Are You Sure?") { closeEditor(); card.remove(); data.splice(d.ID, 1); data.forEach(function(entry, index) { const element = storyMap.querySelector("#_" + entry.ID); entry.ID = index; element.setAttribute("id", "_" + entry.ID); }) this.textContent = "Delete Card"; } }) d3.select(UI).select("button") // newcard button .style("background", color(d.Type)) .on("mouseover", function() {this.style.background = darkerColor(color(d.Type))}) .on("mouseout", function() {this.style.background = color(d.Type)}) activeData = d; } function edited(input) { activeData[input] = editor.querySelector("#" + input.toLowerCase()).value; let card = storyMap.querySelector("#_" + activeData.ID); card.firstChild.textContent = activeData.Title.length <= 35 ? activeData.Title : (activeData.Title.slice(0, 35) + "..."); card.lastChild.textContent = activeData.Description.length <= 80 ? activeData.Description : (activeData.Description.slice(0, 80) + "..."); card.style.background = color(activeData.Type); if(input == "Type") { recolorEditor(); fillTypeSelector(); } } function closeEditor() { d3.select(editor) .style("background", "none") .selectAll("*") .each(function() { if(this.id == "description") { this.value = "Click a card to edit it"; } else { this.style.visibility = "hidden"; } }) } function recolorEditor() { d3.select(editor) .style("background", color(activeData.Type)) .selectAll("button") .style("background", color(activeData.Type)) .on("mouseover", function() {this.style.background = darkerColor(color(activeData.Type))}) .on("mouseout", function() {this.style.background = color(activeData.Type)}) d3.select(UI).select("button") // newcard button .style("background", color(activeData.Type)) .on("mouseover", function() {this.style.background = darkerColor(color(activeData.Type))}) .on("mouseout", function() {this.style.background = color(activeData.Type)}) } //============================================ USER INTERFACE ==================================================== makeUI(); function makeUI() { d3.select(UI) .style("display", "flex") .style("flex-direction", "column") .style("justify-content", "space-around") .style("width", "13%") .style("height", editorHeight + "px") .style("margin", "auto") const newCardButton = document.createElement("button"); UI.appendChild(newCardButton) d3.select(newCardButton) .text("Add New Card") .style("height", "55%") .style("font-size", "1.5em") .style("font-family", "sans-serif") .style("text-align", "center") .style("line-height", "1em") .style("padding", "auto") .style("margin", "10%") .style("background-color", color(data[0].Type)) .style("border", "1px solid black") .style("border-radius", "5px") .style("cursor", "pointer") .on("mouseover", function() {this.style.background = darkerColor(color(data[0].Type))}) .on("mouseout", function() {this.style.background = color(data[0].Type)}) .on("click", function() {newCard()}) const zoomDiv = document.createElement("div"); UI.appendChild(zoomDiv); d3.select(zoomDiv) .style("width", "100%") .style("height", "30%") .style("text-align", "center") .style("font-family", "sans-serif") const zoomOut = document.createElement("Button"); zoomOut.setAttribute("class", "zoom"); zoomOut.textContent = "-"; zoomOut.addEventListener("click", function() {zoom("out")}); zoomDiv.appendChild(zoomOut); const zoomText = document.createElement("span"); zoomDiv.appendChild(zoomText); zoomText.textContent = "Zoom"; zoomText.style.height = "1em"; zoomText.style["font-size"] = "1.2em"; const zoomIn = document.createElement("Button"); zoomIn.setAttribute("class", "zoom"); zoomIn.textContent = "+"; zoomIn.addEventListener("click", function() {zoom("in")}); zoomDiv.appendChild(zoomIn); d3.select(zoomDiv).selectAll(".zoom") .style("background", "none") .style("border", "none") .style("border-radius", "2px") .style("padding", "0.1em 0.5em") .style("font-size", "1.2em") .on("mouseover", function() {this.style.background = "#cccccc"}) .on("mouseleave", function() {this.style.background = "none"}) } makeSwatches(); function makeSwatches() { if (container.firstChild != editor) { container.firstChild.remove(); } container.insertBefore(Swatches(d3.scaleOrdinal(Array.from(d3.group(data, entry => entry.Type).keys()), colorScheme)), editor); container.firstChild.appendChild(document.createElement("p")); d3.select(container.firstChild).select("p") .text("Types") .style("text-align", "center") .style("margin", "10px 0px 5px 0px") .style("font-size", "2em") .style("font-weight", "bold") d3.select(container.firstChild) .style("flex-direction", "column-reverse") .style("justify-content", "start") .style("width", "10%") .style("margin", "0px 0px 0px 10px") .select("div") .style("width", "100%") .style("height", "100%") .style("display", "flex") .style("flex-direction", "column") .style("justify-content", "center") .style("font-size", "1.5em") .selectAll("span") .style("margin", "0px") .style("min-width", "100%") } function newCard() { data.push({Type: activeData.Type, Title: "Title", Description: "Description"}); d3.select(storyMap) .selectAll("div") .data(data) .join(function(enter) { enter.append("div") .attr("id", (d, i) => "_" + i) .each(function(d, i) { showEditor(this,"", d); d.ID = i; d.Row = Math.floor((storyMap.scrollTop + (storyMap.offsetHeight / 2)) / (cardWidth + margin)); d.Column = Math.floor((storyMap.scrollLeft + (storyMap.offsetWidth / 2)) / (cardHeight + margin)); styleCard(this, d); bump(this, d); }) .call(drag()); }) } function zoom(dir) { let amt = (dir == "in") ? 10 : -10; cardWidth = cardWidth + amt; cardHeight = cardWidth * 0.8; margin = Math.ceil(cardWidth / 15) storyMap.style["font-size"] = (13/150 * cardWidth) + "px"; d3.select(storyMap).selectAll("div") .each(function(d) {styleCard(this, d)}) } // =============================================== SELECTIONS ================================================= function select() { const selBox = {}; const offset = {}; function selectStart(event, d) { endSelection(); offset.x = storyMap.scrollLeft + 2; // yucky hardcoded numbers, not sure where they come from offset.y = storyMap.scrollTop - 157; selBox.element = document.createElement("span"); storyMap.appendChild(selBox.element); d3.select(selBox.element) .style("position", "absolute") .style("left", (selBox.x = event.x + offset.x) + "px") .style("top", (selBox.y = event.y + offset.y) + "px") .style("background", "rgba(0, 0, 255, 0.2)") .style("border", "1px solid blue") .style("z-index", "4"); selBox.origin = {x: selBox.x, y: selBox.y}; } function selecting(event, d) { selBox.width = (event.x - selBox.origin.x + offset.x); selBox.height = (event.y - selBox.origin.y + offset.y); if(selBox.width < 0) { selBox.width = -selBox.width; selBox.element.style.left = (selBox.x = (selBox.origin.x - selBox.width)) + "px"; selBox.element.style.width = selBox.width + "px"; } else { selBox.element.style.width = selBox.width + "px"; } if(selBox.height < 0) { selBox.height = -selBox.height; selBox.element.style.top = (selBox.y = (selBox.origin.y - selBox.height)) + "px"; selBox.element.style.height = selBox.height + "px"; } else { selBox.element.style.height = selBox.height + "px"; } selection = data.filter(entry => ((entry.x_pos + cardWidth) > selBox.x) && (entry.x_pos < (selBox.x + selBox.width)) && ((entry.y_pos + cardHeight) > selBox.y) && (entry.y_pos < (selBox.y + selBox.height))); storyMap.querySelectorAll("div").forEach(function(card) { if (selection.some(entry => ("_" + entry.ID) == card.id)) { card.style.border = "2px solid blue"; } else { card.style.border = "1px solid black"; } }); } function selectEnd(event, d) { selBox.element.remove(); selection.sort((a, b) => (a.Row < b.Row) ? -1 : ((a.Row == b.Row && a.Column < b.Column) ? -1 : 1)); closeEditor(); } return d3.drag() .on("start", selectStart) .on("drag", selecting) .on("end", selectEnd); } function endSelection() { for(let card of selection) { storyMap.querySelector("#_" + card.ID).style.border = "1px solid black"; } selection = []; } return container; }