Skip to content

Instantly share code, notes, and snippets.

@rleddy

rleddy/form-icecream.svg

Last active August 28, 2016 23:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rleddy/dd42ab598f5269538e8f3f8b1c66f8d2 to your computer and use it in GitHub Desktop.
Save rleddy/dd42ab598f5269538e8f3f8b1c66f8d2 to your computer and use it in GitHub Desktop.
Download ZIP
This is a further development of the previous gists. The date picker is improved a little. Also, you can select a window and load a colorful pure SVG form into the window. It has check boxes and radio buttons. An editable field has been borrowed and integrated.
Display the source blob
Display the rendered blob
Raw
form-icecream.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
pointer-events: all;
fill: none;
stroke: #666;
stroke-opacity: 0.2;
}
.active square {
stroke: #000;
stroke-width: 2px;
}
html, body { margin:0; padding:0; overflow:hidden }
</style>
<style>
.ticks {
font: 10px sans-serif;
}
.track,
.track-inset,
.track-overlay {
stroke-linecap: round;
}
.track {
stroke: #000;
stroke-opacity: 0.3;
stroke-width: 10px;
}
.track-inset {
stroke: #ddd;
stroke-width: 8px;
}
.track-overlay {
pointer-events: stroke;
stroke-width: 50px;
cursor: crosshair;
}
.handle {
fill: #fff;
stroke: #000;
stroke-opacity: 0.5;
stroke-width: 1.25px;
}
</style>
<style>
.svg-checkbox {
cursor : pointer;
}
.svg-checkbox-sel{
cursor : pointer;
}
.svg-radiobutton-on {
cursor : pointer;
}
.svg-radiobutton-off {
cursor : pointer;
}
</style>
<svg id="mainsvg" width="0" height="0" ></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var sliderHandleMap = {}; /// a quick fix
var sliderFunctionMap = {};
var gCurrentSlider = "";
var g_currentWindow = null;
var g_currentWindowLabel = "";
var g_calRange = {
"IntervalStart" : {
"year" : "2016",
"month" : "August",
"day" : 1,
"CalHours" : 0,
"CalMinutes" : 0,
"CalSeconds" : 0,
"exclude" : "IntervalEnd",
"exclOp" : function (a,b) { return( a <= b ); },
"time" : null,
"widgets" : {
"clocksWidget" : {
"transform" : null,
"transformed" : null
}
}
},
"IntervalEnd" : {
"year" : "2016",
"month" : "August",
"day" : 1,
"CalHours" : 0,
"CalMinutes" : 0,
"CalSeconds" : 0,
"exclude" : "IntervalStart",
"exclOp" : function (a,b) { return( a >= b ); },
"time" : null,
"widgets" : {
"clocksWidget" : {
"transform" : null,
"transformed" : null
}
}
}
};
var g_numOfMonth = {
"January" : 0,
"February" : 1,
"March" : 2,
"April" : 3,
"May" : 4,
"June" : 5,
"July" : 6,
"August" : 7,
"September" : 8,
"October" : 9,
"November" : 10,
"December" : 11
};
function slide(h,x,handle) {
handle.attr("cx", x(h));
}
g_currentSelectedCalendar = "CalStart";
function updateTimeIntervalTextDisplay() {
var dateStartText = d3.select("#start-date-text");
var dateEndText = d3.select("#end-date-text");
if ( g_calRange["IntervalStart"].time ) {
dateStartText.text(g_calRange["IntervalStart"].time.toString());
} else {
var dn = new Date();
dateStartText.text(dn.toString());
}
if ( g_calRange["IntervalEnd"].time ) {
dateEndText.text(g_calRange["IntervalEnd"].time.toString());
} else {
var dn = new Date();
dateEndText.text(dn.toString());
}
}
function update_dateTime(tFacet,txt,whichCal) {
var cal = g_currentSelectedCalendar;
if ( whichCal ) {
cal = whichCal;
}
var saveOld = g_calRange[cal][tFacet];
g_calRange[cal][tFacet] = txt;
var time = new Date( 1*(g_calRange[cal].year), g_numOfMonth[g_calRange[cal].month], g_calRange[cal].day,
g_calRange[cal].CalHours, g_calRange[cal].CalMinutes, g_calRange[cal].CalSeconds );
var excl = g_calRange[cal].exclude;
if ( g_calRange[excl].time == null ) {
g_calRange[cal].time = time;
updateTimeIntervalTextDisplay();
return(true);
}
if ( g_calRange[cal].exclOp(time,g_calRange[excl].time) ) {
g_calRange[cal].time = time;
updateTimeIntervalTextDisplay();
return(true);
}
g_calRange[cal][tFacet] = saveOld;
return(false);
}
function rememberTransformation(groupTranslation,widget,whichCal) {
var cal = g_currentSelectedCalendar;
if ( whichCal ) {
cal = whichCal;
}
g_calRange[cal]["widgets"]["clocksWidget"]["transform"] = groupTranslation;
g_calRange[cal]["widgets"]["clocksWidget"]["transformed"] = widget;
}
function recallTransformation(calCtxt) {
var transWidget = calCtxt["widgets"]["clocksWidget"]["transformed"];
if ( transWidget ) {
transWidget.attr("transform",calCtxt["widgets"]["clocksWidget"]["transform"]);
}
}
function setCalDates(calContainer) {
//-------------------------------------------
var yr = calContainer.select("#tspan-year").text();
var mo = calContainer.select("#tspan-month").text();
var moTime = new Date(mo + " 1, " + yr);
var curMo = moTime.getMonth();
while ( moTime.getDay() > 0 ) {
moTime.setDate(moTime.getDate()-1);
}
for ( var i = 0; i < 6; i++ ) {
for ( var j = 0; j < 7; j++ ) {
var tt = calContainer.select("#g_calBox_" + i + "_" + j).selectAll("tspan");
tt.text("" + moTime.getDate());
if ( curMo != moTime.getMonth() ) {
calContainer.select("#g_calBox_" + i + "_" + j).selectAll("rect")
.style("fill",function() {
var rct = d3.select(this);
this["preserve-color"] = rct.style("fill");
return("gray");
})
.style("fill-opacity","0.5");
} else {
calContainer.select("#g_calBox_" + i + "_" + j).selectAll("rect")
.style("fill",function() {
var rct = d3.select(this);
return( this["preserve-color"] ? this["preserve-color"] : rct.style("fill") );
})
.style("fill-opacity","1");
}
moTime.setDate(moTime.getDate()+1);
}
}
}
function toolMonth(monthList) {
monthList.style("visibility","hidden");
var mos = monthList.selectAll("g")
.on("mouseenter", function(){
var color = d3.select(this).select("rect").style("fill");
this["preserve_color"] = color;
d3.select(this).select("rect").style("fill","green");
})
.on("mouseleave", function(){
d3.select(this).select("rect").style("fill",this["preserve_color"]);
})
.on("click",function() {
var month_sel = d3.select(this).attr("id");
var calconP = d3.select(this.parentNode.parentNode);
var calcon = calconP.select("#calendar_widget");
var mo = calcon.select("#tspan-month").text(month_sel);
update_dateTime("month", month_sel );
setCalDates(calcon);
});
}
function addSlider(container,maxDomain,maxRange,sliderID) {
var whichCal = container.attr("id");
var margin = {right: 50, left: 550};
var width = maxRange - margin.left - margin.right;
var height = +container.attr("height");
var x = d3.scaleLinear()
.domain([0, maxDomain])
.range([0, maxRange])
.clamp(true);
var slider = container.append("g")
.attr("id",sliderID)
.attr("class", "slider")
.attr("visibility","hidden")
.attr("transform", "translate(" + margin.left + "," + height / 2 + ")");
slider.append("text").attr("x",x.range()[0]).attr("y",-10).text(sliderID);
slider.append("line")
.attr("class", "track")
.attr("x1", x.range()[0])
.attr("x2", x.range()[1])
.select( function() { return this.parentNode.appendChild(this.cloneNode(true)); } )
.attr("class", "track-inset")
.select( function() { return this.parentNode.appendChild(this.cloneNode(true)); } )
.attr("class", "track-overlay")
.call(d3.drag()
.on("start.interrupt", function() { slider.interrupt(); })
.on("start drag", function () {
sliderFunctionMap[gCurrentSlider]();
}
));
sliderFunctionMap[whichCal + sliderID] = function() {
var h = x.invert(d3.event.x-50);
if ( update_dateTime( sliderID, h, whichCal ) ) {
slide( h , x, sliderHandleMap[whichCal + sliderID] );
}
};
slider.insert("g", ".track-overlay")
.attr("class", "ticks")
.attr("transform", "translate(0," + 18 + ")")
.selectAll("text")
.data(x.ticks(10))
.enter().append("text")
.attr("x", x)
.attr("text-anchor", "middle")
.text(function(d) { return d + "°"; });
var handle = slider.insert("circle", ".track-overlay")
.attr("id","handle_" + sliderID)
.attr("class", "handle")
.attr("r", 9);
sliderHandleMap[whichCal + sliderID] = handle;
return(slider);
}
function hourSelection(hrsClock,svgCalBK) {
var vizState = svgCalBK.select("#CalHours").style("visibility");
hrsClock.raise();
hideAllSliders(svgCalBK);
if ( vizState == "hidden" ) {
var whichCal = svgCalBK.attr("id");
gCurrentSlider = whichCal + "CalHours";
svgCalBK.select("#CalHours").style("visibility","visible");
}
}
function minuteSelection(minsClock,svgCalBK) {
var vizState = svgCalBK.select("#CalMinutes").style("visibility");
minsClock.raise();
hideAllSliders(svgCalBK);
if ( vizState == "hidden" ) {
var whichCal = svgCalBK.attr("id");
gCurrentSlider = whichCal + "CalMinutes";
svgCalBK.select("#CalMinutes").style("visibility","visible");
}
}
function secondSelection(secsClock,svgCalBK) {
var vizState = svgCalBK.select("#CalSeconds").style("visibility");
secsClock.raise();
hideAllSliders(svgCalBK);
if ( vizState == "hidden" ) {
var whichCal = svgCalBK.attr("id");
gCurrentSlider = whichCal + "CalSeconds";
svgCalBK.select("#CalSeconds").style("visibility","visible");
}
}
function hideAllSliders(svgCalBK) {
svgCalBK.select("#CalHours").style("visibility","hidden");
svgCalBK.select("#CalMinutes").style("visibility","hidden");
svgCalBK.select("#CalSeconds").style("visibility","hidden");
}
function toolCalendar(svgCalBK,exclusionId,calLabel) {
var calContainer = svgCalBK.selectAll("g");
calContainer.attr("exclusion",exclusionId);
calContainer.on("click", ( function(svgCalBKB,exclID) { return(function() {
var calContainer = d3.select(this.parentNode);
var exclusion = d3.select(this.parentNode.parentNode).select("#" + exclID);
var vbox = calContainer.attr("viewBox");
if ( vbox != "0 0 500 490" ) {
calContainer.attr("openstate","closed");
calContainer.lower();
var width = this.parentNode["saveW"];
var height = this.parentNode["saveH"];
calContainer
.attr("width", width)
.attr("height",height)
.attr("viewBox","0 0 500 490");
//var ccg = calContainer.select("#cal-clock-group");
//ccg.attr("transform", this.parentNode["saveCalClockOrigin"] );
for ( var i = 0; i < 6; i++ ) {
for ( var j = 0; j < 7; j++ ) {
calContainer.select("#g_calBox_" + i + "_" + j).selectAll("rect")
.on("mouseenter",null)
.on("mouseenter",null)
.on("click",null);
}
}
hideAllSliders(svgCalBKB);
} else {
if ( !exclusion.empty() ) {
var open = exclusion.attr("openstate");
if ( open === "open" ) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent(
"click", /* type */
true, /* canBubble */
true, /* cancelable */
window, /* view */
0, /* detail */
0, /* screenX */
0, /* screenY */
0, /* clientX */
0, /* clientY */
false, /* ctrlKey */
false, /* altKey */
false, /* shiftKey */
false, /* metaKey */
0, /* button */
null); /* relatedTarget */
(exclusion.select("#calendar_widget").node()).dispatchEvent(evt);
}
}
calContainer.attr("openstate","open");
calContainer.raise();
this.parentNode["saveW"] = calContainer.attr("width");
this.parentNode["saveH"] = calContainer.attr("height");
var width = this.parentNode["saveW"];
var height = this.parentNode["saveH"];
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
wx = w.innerWidth || e.clientWidth || g.clientWidth,
wy = w.innerHeight|| e.clientHeight|| g.clientHeight;
var xratioWin = window.screen.width/wx;
var yratioWin = window.screen.height/wy;
var xW = Math.round(300*xratioWin);
var yW = Math.round(490*yratioWin);
calContainer
.attr("width", width*4)
.attr("height",height*8)
.attr("viewBox","0 0 " + xW + " " + yW);
g_currentSelectedCalendar = svgCalBKB.attr("id");
var ccg = calContainer.select("#cal-clock-group");
ccg.raise();
//this.parentNode["saveCalClockOrigin"] = ccg.attr("transform");
for ( var i = 0; i < 6; i++ ) {
for ( var j = 0; j < 7; j++ ) {
calContainer.selectAll( "#g_calBox_" + i + "_" + j ).selectAll("rect")
.on("mouseenter",function() {
var boxC = d3.select(this);
if ( boxC.style("fill") == "rgb(255, 255, 255)" ) {
boxC.style("fill","green");
}
})
.on("mouseleave",function() {
var boxC = d3.select(this);
if ( boxC.style("fill") == "rgb(0, 128, 0)" ) {
boxC.style("fill","#ffffff");
}
})
.on("click",(function(calCtr) { return(
function() {
d3.event.stopPropagation();
var boxC = d3.select(this);
var bX = 1*boxC.attr("x");
var bY = 1*boxC.attr("y");
var boxGroup = d3.select(this.parentNode);
var dayTxt = boxGroup.select("tspan").text();
if ( !update_dateTime("day",dayTxt) ) return;
var ccg = calCtr.select("#cal-clock-group");
var groupRow = d3.select(this.parentNode.parentNode);
var t = groupRow.attr("transform");
var y = 0;
if ( t != null ) {
var numberPattern = /[+-]?\d+(\.\d+)?/g;
var els = t.match( numberPattern );
y = 1*els[1];
}
var h = 1*boxC.attr("height");
var clockGroupTranslation = "translate(" + [ bX - 500, y + h/3 ] + ")";
rememberTransformation(clockGroupTranslation,ccg);
ccg.attr("transform",clockGroupTranslation);
ccg.raise();
}
);})(calContainer) );
}
}
}
}); })(svgCalBK,exclusionId) );
var calclocks = calContainer.select("#cal-clock-group-background");
calclocks.on("click",function() { d3.event.stopPropagation(); } );
var calclockHour = calContainer.selectAll("#cal-clock-H");
var calclockMin = calContainer.selectAll("#cal-clock-M");
var calclockSecs = calContainer.selectAll("#cal-clock-S");
calclockHour.on("click", (function(svgCalBKB){ return(
function() {
d3.event.stopPropagation();
hourSelection(d3.select(this),svgCalBKB);
} ); })(svgCalBK) );
calclockMin.on("click", (function(svgCalBKB){ return(
function() {
d3.event.stopPropagation();
minuteSelection(d3.select(this),svgCalBKB);
} ); })(svgCalBK) );
calclockSecs.on("click", (function(svgCalBKB){ return(
function() {
d3.event.stopPropagation();
secondSelection(d3.select(this),svgCalBKB);
} ); })(svgCalBK) );
setCalDates(calContainer);
var month_button = calContainer.select("#month_button").on("click", (function(svgCalBKB) {
return(function() {
d3.event.stopPropagation();
var mlist = svgCalBKB.select("#cal-month_list");
mlist.raise();
var vis = mlist.style("visibility") == "hidden" ? "visible" : "hidden";
mlist.style("visibility",vis);
});
})(svgCalBK) );
// calLabel
var label = calContainer.select("#interval-boundary").select("tspan").text(calLabel);
}
// ppoakf0k
var keydown = function() {
if (!focused) return;
var text = focused.text;
var code = d3.event.keyCode;
if (code == 8) { // Backspace
d3.event.preventDefault();
text = text.substring(0,text.length-1);
};
if (code == 13) { // Enter
focused.stroke = d3.rgb(240,240,240);
focused.callback();
};
//console.log("keydown: code: "+ code + ", text: "+text);
focused.text = text;
}
var keypress = function() {
if (!focused) return;
var text = focused.text;
var code = d3.event.keyCode;
text = text+String.fromCharCode(code);
//console.log("keypress: code: "+ code + ", text: "+text);
focused.text = text;
}
var focused = null;
d3.select("body")
.on("keydown",keydown)
.on("keypress",keypress)
.on("click", function() {
if (focused) {
focused.stroke = d3.rgb(240,240,240);
focused = null;
}
});
function Textbox(textgroup) {
var text = "",
fontsize = 12;
var stroke = d3.rgb(240,240,240),
fill = d3.rgb(255,255,255);
var rct = textgroup.select("#backing-rect");
var width = rct.attr("width");
var height = rct.attr("height");
var txt = textgroup.select("text");
var x = txt.attr("x");
var y = txt.attr("y");
var cover = textgroup.append("rect") // Transparent cover to hide cursor when mousing over text
.attr("width", width)
.attr("height", height)
.attr("x",x)
.attr("y",y)
.style("opacity", 0);
var txt_width = txt.node().getComputedTextLength();
var callback = function() {
console.log("Text: "+txt.text());
}
var aligntext = function() {
txt.attr("x",x+10); // + .5*(width-txt_width)
txt.attr("y",y); // + .5*(height+fontsize)-2
};
function textbox() {
}
Object.defineProperty(textbox,"text",{
get: function() {return text;},
set: function(_) {
text = _;
txt.text(_);
txt_width = txt.node().getComputedTextLength();
aligntext();
},
enumerable: true,
cofigurable: true
});
Object.defineProperty(textbox,"x",{
get: function() {return x;},
set: function(_) {
x = _;
textgroup.attr("transform", "translate(" + x + "," + y + ")");
},
enumerable: true,
cofigurable: true
});
Object.defineProperty(textbox,"y",{
get: function() {return y;},
set: function(_) {
y = _;
textgroup.attr("transform", "translate(" + x + "," + y + ")");
},
enumerable: true,
cofigurable: true
});
Object.defineProperty(textbox,"width",{
get: function() {return width;},
set: function(_) {
width = _;
rct.attr("width",_);
cover.attr("width",_);
aligntext();
},
enumerable: true,
cofigurable: true
});
Object.defineProperty(textbox,"height",{
get: function() {return height;},
set: function(_) {
height = _;
rct.attr("height",_);
cover.attr("height",_);
aligntext();
},
enumerable: true,
cofigurable: true
});
Object.defineProperty(textbox,"position",{
get: function() {return [x, y, width, height];},
set: function(_) {
textbox.x = _[0];
textbox.y = _[1];
textbox.width = _[2];
textbox.height = _[3];
},
enumerable: true,
cofigurable: true
})
Object.defineProperty(textbox,"stroke",{
get: function() {return stroke;},
set: function(_) {
stroke = _;
rct.style("stroke",stroke);
},
enumerable: true,
cofigurable: true
});
Object.defineProperty(textbox,"cover",{
get: function() {return cover;},
enumerable: true,
cofigurable: true
});
Object.defineProperty(textbox,"callback",{
get: function() {return callback;},
set: function(_) {
callback = _;
},
enumerable: true,
cofigurable: true
});
cover.on("click", function() {
focused = textbox;
rct.style("stroke","#347bbe");
d3.event.stopPropagation();
});
return textbox;
}
function toolApplication(appfile,appArea) {
// appfile for later applicatio differentiation and js loading
appArea.selectAll(".svg-checkbox").on("click",function() {
d3.event.stopPropagation();
d3.select(this.parentNode).select("path").style("visibility","visible");
});
appArea.selectAll(".svg-checkbox-sel").on("click",function() {
d3.event.stopPropagation();
var stl = d3.select(this).style("visibility");
if ( stl == "hidden" ) {
d3.select(this).style("visibility","visible");
} else {
d3.select(this).style("visibility","hidden");
}
});
// appfile for later applicatio differentiation and js loading
appArea.selectAll(".svg-radiobutton-off").on("click",function() {
d3.event.stopPropagation(); // parent node is a group
d3.select(this.parentNode.parentNode.parentNode).selectAll(".svg-radiobutton-on").style("visibility","hidden");
d3.select(this.parentNode).select(".svg-radiobutton-on").style("visibility","visible");
});
appArea.selectAll(".svg-radiobutton-on").on("click",function() {
d3.event.stopPropagation();
var stl = d3.select(this).style("visibility");
if ( stl == "hidden" ) {
d3.select(this.parentNode.parentNode.parentNode).selectAll(".svg-radiobutton-on").style("visibility","hidden");
d3.select(this).style("visibility","visible");
} else {
d3.select(this).style("visibility","hidden");
}
});
var t = new Textbox(appArea.select("#text-edit-group-1"));
var wDat = findCurrentWindowData();
wDat.contextualized = true;
}
var daysOfWeek = null;
function nestApplication( appArea, appfile, x, y ) {
d3.request((appfile),
function(resp) {
appArea.html(resp.response);
toolApplication(appfile,appArea);
});
}
function nestCalendar(selParent,calId,x,y,width,height,exclusivePair,calLabel) {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
wx = w.innerWidth || e.clientWidth || g.clientWidth,
wy = w.innerHeight|| e.clientHeight|| g.clientHeight;
selParent.append("svg")
.attr("id",calId)
.attr("x", x )
.attr("y", y )
.attr("width", Math.min(width,wx))
.attr("height",Math.min(height,wy))
.attr("viewBox","0 0 500 490")
.attr("preserveAspectRatio","xMinYMin meet");
var svgCal = selParent.select("svg");
d3.request("xcalendar-group.svg",
function(resp) {
var svgCalBK = selParent.select("#" + calId);
svgCalBK.html(resp.response);
toolCalendar(svgCalBK,exclusivePair,calLabel);
d3.request("month-list.svg",
(function(svgCalB) { return(
function(resp) {
var monthList = svgCalB.append("g").attr("id","cal-month_list").html(resp.response);
var hoursPerDay = addSlider(svgCalB,24,300,"CalHours");
var minutePerHour = addSlider(svgCalB,60,300,"CalMinutes");
var secondsPerMinut = addSlider(svgCalB,60,300,"CalSeconds");
toolMonth(monthList);
}); })(svgCalBK) );
});
}
/* -- // d3 example by Richard Leddy (c) 2016 */
function updateRemove(pSvg,d) {
var ms = pSvg.selectAll("#win-" + d.iam);
ms.remove();
}
function update_control_context(ctxtCtrl,d) {
if ( d.iam == "context" ) return;
ctxtCtrl.text(d.iam);
recallTransformation(d.context["IntervalStart"]);
recallTransformation(d.context["IntervalEnd"]);
g_calRange = d.context;
updateTimeIntervalTextDisplay();
if ( g_currentWindow ) {
g_currentWindow.select("#step-action-message").text("click the green circle");
}
}
var topSvg = d3.select("#mainsvg");
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
wx = w.innerWidth || e.clientWidth || g.clientWidth,
wy = w.innerHeight|| e.clientHeight|| g.clientHeight;
topSvg.attr("width",window.screen.width);
topSvg.attr("height",window.screen.height);
var winCount = 0;
var width = wx,
height = wy,
radius = 300;
var rectsAll = d3.range(6).map(function() {
return {
iam: winCount++,
x: Math.round(Math.random() * (width/2 - radius * 2) + radius),
y: Math.round(Math.random() * (height/2 - radius * 2) + radius),
w : radius,
h : radius/2,
contextualized : false,
context: {
"IntervalStart" : {
"year" : "2016",
"month" : "August",
"day" : 1,
"CalHours" : 0,
"CalMinutes" : 0,
"CalSeconds" : 0,
"exclude" : "IntervalEnd",
"exclOp" : function (a,b) { return( a <= b ); },
"time" : null,
"widgets" : {
"clocksWidget" : {
"transform" : null,
"transformed" : null
}
}
},
"IntervalEnd" : {
"year" : "2016",
"month" : "August",
"day" : 1,
"CalHours" : 0,
"CalMinutes" : 0,
"CalSeconds" : 0,
"exclude" : "IntervalStart",
"exclOp" : function (a,b) { return( a >= b ); },
"time" : null,
"widgets" : {
"clocksWidget" : {
"transform" : null,
"transformed" : null
}
}
}
}
};
});
rectsAll.push({
iam: "context",
x: 40,
y: 40,
w : 2*width/3,
h : radius/3,
context: {
"IntervalStart" : {
"year" : "2016",
"month" : "August",
"day" : 1,
"CalHours" : 0,
"CalMinutes" : 0,
"CalSeconds" : 0,
"exclude" : "IntervalEnd",
"exclOp" : function (a,b) { return( a <= b ); },
"time" : null,
"widgets" : {
"clocksWidget" : {
"transform" : null,
"transformed" : null
}
}
},
"IntervalEnd" : {
"year" : "2016",
"month" : "August",
"day" : 1,
"CalHours" : 0,
"CalMinutes" : 0,
"CalSeconds" : 0,
"exclude" : "IntervalStart",
"exclOp" : function (a,b) { return( a >= b ); },
"time" : null,
"widgets" : {
"clocksWidget" : {
"transform" : null,
"transformed" : null
}
}
}
}
});
var color = d3.scaleOrdinal()
.range(d3.schemeCategory20);
function findCurrentWindowData() {
var j = rectsAll.findIndex(function(obj){ var res = (obj.iam === g_currentWindowLabel); return res; });
return(rectsAll[j]);
}
function addWindows(pSvg,defRegions) {
var rectangle = pSvg.selectAll("g.windowBox")
.data(defRegions, function(d) { return(d.iam); } )
.enter().append("g")
.attr("id", function(d){ return("win-" + d.iam); } )
.attr("class","windowBox")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
rectangle.attr("deltaX",function(d) { return(0); })
.attr("deltaY",function(d) { return(0); });
// This is the containing box window
rectangle.append("rect")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("height", function(d) { return d.h; })
.attr("width", function(d) { return d.w; })
.attr("cursor", "move")
.style("fill", function(d, i) { return color(i); });
/*
rectangle.append("circle")
.attr("cx", function(d) { return d.x + d.w; })
.attr("cy", function(d) { return d.y + d.h; })
.attr("r", function(d) { return d.h; })
//.attr("width", function(d) { return d.w; })
.attr("cursor", "move")
.style("fill", function(d, i) { return color(i); });
*/
var noDrag = d3.drag()
.on('start', function(d){
g_currentWindowLabel = d.iam;
g_currentWindow = d.iam != "context" ? d3.select(this.parentNode) : null;
if ( g_currentWindow == null ) return;
d3.select(this.parentNode).raise().classed("active", true);
var ctxtCtrl = d3.select("#data-context-control-text");
update_control_context(ctxtCtrl,d);
})
.on('drag', function(d,i){
})
.on("end", function(d,i){
d3.select(this.parentNode).classed("active", false);
});
// This is the interior box window
rectangle.append("rect")
.attr("x", function(d) { return d.x+1; })
.attr("y", function(d) { return d.y+20; })
.attr("height", function(d) { return d.h-22; })
.attr("width", function(d) { return d.w-2; })
.style("fill", function(d, i) { return "#FAFACC"; })
.call(noDrag);
var dragBox = d3.drag()
.on('start', function(d){
g_currentWindowLabel = d.iam;
g_currentWindow = d.iam != "context" ? d3.select(this.parentNode) : null;
d3.event.sourceEvent.stopPropagation();
var ctxtCtrl = d3.select("#data-context-control-text");
update_control_context(ctxtCtrl,d);
})
.on('drag', function(d,i){
var resizeBox = d3.select(this);
var mx = +resizeBox.attr("x");
var my = +resizeBox.attr("y");
var topLimit = d.y + 20;
var leftLimit = d.x + 20;
mx += d3.event.dx;
if ( d.iam != "context" ) {
my += d3.event.dy;
}
if ( (mx > leftLimit) && (my > topLimit) ) {
resizeBox.attr('x', mx).attr('y', my);
var height = my - d.y;
var width = mx - d.x;
d3.select(this.previousElementSibling)
.attr("x", mx);
d3.select(this.previousElementSibling.previousElementSibling)
.attr("width", width + 10 - 2)
.attr("height", height + 10 - 22);
d3.select(this.previousElementSibling.previousElementSibling.previousElementSibling)
.attr("width", width + 10)
.attr("height", height + 10);
var subView = d3.select(this.parentNode).select("svg");
if ( !subView.empty()) {
var resF = subView.attr("custom-resize");
if ( resF && d.resize ) {
d.resize(subView,d,width,height);
}
}
}
});
rectangle.append("rect")
.attr("x", function(d) { return d.x + d.w - 10; })
.attr("y", function(d) { return d.y; })
.attr("height", 10)
.attr("width", 10)
.attr("fill", "navy" )
.attr("cursor","pointer")
.on("click", function(d,i) {
if ( d.iam == "context" ) return;
var j = rectsAll.findIndex(function(obj){ var res = (obj.iam === d.iam); return res; });
rectsAll.splice(j,1);
updateRemove(pSvg,d);
var rect = d3.select(this);
var cc = rect.attr("fill");
cc = (cc == "navy" )? "green" : "navy";
rect.attr("fill",cc);
});
rectangle.append("rect")
.attr("x", function(d) { return d.x + d.w - 10; })
.attr("y", function(d) { return d.y + d.h - 10; })
.attr("height", 10)
.attr("width", 10)
.style("fill", function(d, i) { return "#993300"; })
.attr("cursor", "nw-resize")
.call(dragBox);
rectangle.append("text")
.attr("x", function(d) { return d.x + 20; })
.attr("y", function(d) { return d.y + 60; })
.attr("id","step-action-message")
.text(function(d) { return( d.iam != "context" ? "Click me to make this window active" : "parameter window" ); } )
.call(dragBox);
}
function dragstarted(d) {
g_currentWindowLabel = d.iam;
g_currentWindow = d.iam != "context" ? d3.select(this) : null;
var dltX = 1*(d3.select(this).attr("deltaX"));
var dltY = 1*(d3.select(this).attr("deltaY"));
d3.select(this).attr("deltaX",d3.event.x - dltX);
d3.select(this).attr("deltaY",d3.event.y - dltY);
d3.select(this).raise().classed("active", true);
var ctxtCtrl = d3.select("#data-context-control-text");
update_control_context(ctxtCtrl,d);
}
function dragged(d) {
var dltX = 1*(d3.select(this).attr("deltaX"));
var dltY = 1*(d3.select(this).attr("deltaY"));
d3.select(this).attr("transform", function(d,i){
return "translate(" + [ d3.event.x - dltX, d3.event.y - dltY] + ")"
});
}
function dragended(d, i) {
var dltX = 1*(d3.select(this).attr("deltaX"));
var dltY = 1*(d3.select(this).attr("deltaY"));
d3.select(this).attr("deltaX",d3.event.x - dltX);
d3.select(this).attr("deltaY",d3.event.y - dltY);
d3.select(this).classed("active", false);
}
function renderCell(d) {
return d == null ? null : "M" + d.join("L") + "Z";
}
topSvg.append("rect")
.attr("x",5)
.attr("y",5)
.attr("height",20)
.attr("width",20).attr("fill","orange")
.style("cursor","pointer")
.on("click", function() {
var rect = d3.select(this);
var cc = rect.attr("fill");
cc = cc == "orange" ? "blue" : "orange";
rect.attr("fill",cc);
var newDatum = {
iam: winCount++,
x: Math.round(Math.random() * (width/2 - radius * 2) + radius),
y: Math.round(Math.random() * (height/2 - radius * 2) + radius),
w : radius,
h : radius/2
};
console.log(newDatum);
rectsAll.push(newDatum);
addWindows(topSvg,rectsAll);
});
topSvg.append("circle")
.attr("cx",40)
.attr("cy",15)
.attr("r",10).attr("fill","darkgreen")
.style("cursor","pointer")
.on("click", function() {
if ( g_currentWindow ) {
var wDat = findCurrentWindowData();
if ( wDat.contextualized ) return;
var ww = g_currentWindow.select("rect").attr("width");
var hh = g_currentWindow.select("rect").attr("height");
g_currentWindow.append("svg")
.attr("id","applicatoin" + g_currentWindow.attr("id"))
.attr("x", function(d){return d.x})
.attr("y", function(d){return (d.y + 20) })
.attr("width", ww-10 )
.attr("height", hh-30 )
.attr("preserveAspectRatio","xMinYMin meet")
.attr("custom-resize",function(d) { // clip the content of this window in a particular way.
d.resize = function(subsvg,data,w,h) {
subsvg.attr("height",h);
subsvg.attr("width",w);
}
return("true");
});
nestApplication( g_currentWindow.select("svg"), "form-icecream.svg", 10, 22 );
}
/*
var rect = d3.select(this);
var cc = rect.attr("fill");
cc = cc == "darkgreen" ? "purple" : "darkgreen";
rect.attr("fill",cc);
var newDatum = {
iam: winCount++,
x: Math.round(Math.random() * (width/2 - radius * 2) + radius),
y: Math.round(Math.random() * (height/2 - radius * 2) + radius),
w : radius,
h : radius/2
};
console.log(newDatum);
rectsAll.push(newDatum);
addWindows(topSvg,rectsAll);
*/
});
addWindows(topSvg,rectsAll);
var context_window = topSvg.select("#win-context")
.append("svg")
.attr("id","data-context-control")
.attr("x", function(d){return d.x})
.attr("y", function(d){return d.y})
.attr("width", function(d){return width;})
.attr("height", function(d){return height;})
.attr("custom-resize",function(d) { // clip the content of this window in a particular way.
d.resize = function(subsvg,data,w,h) {
subsvg.attr("width",w);
}
return("true");
})
.append("text")
.attr("id","data-context-control-text")
.attr("stroke","black")
.attr("x", function(d){return 10})
.attr("y", function(d){return 15})
.text(function(d){ return "context"; });
topSvg.select("#win-context").select("svg").append("text")
.attr("id","start-date-text")
.attr("stroke","rgb(50,230,0)")
.attr("fill","rgb(220,230,0)")
.attr("x", function(d){return 150})
.attr("y", function(d){return 15})
.text(function(d){ return "present"; });
topSvg.select("#win-context").select("svg").append("text")
.attr("id","end-date-text")
.attr("stroke","rgb(50,230,0)")
.attr("fill","rgb(200,230,0)")
.attr("x", function(d){return 550})
.attr("y", function(d){return 15})
.text(function(d){ return "present"; });
updateTimeIntervalTextDisplay();
nestCalendar( topSvg.select("#win-context").select("svg"), "IntervalStart", 10, 22, 45*7, 72, "IntervalEnd", "Start");
nestCalendar( topSvg.select("#win-context").select("svg"), "IntervalEnd", 90, 22, 45*7, 72, "IntervalStart", "Stop");
</script>
Display the source blob
Display the rendered blob
Raw
month-list.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
xcalendar-group.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment