ben-burlingham
10 years ago
parent
89a20ac073
commit
990c6f38ed
12 changed files with 2524 additions and 184 deletions
@ -1,125 +1,155 @@ |
||||
/** |
||||
* Instructions contain a string with the name of a function in this object which is called to perform an action. |
||||
*/ |
||||
Visualizer.prototype.actions = { |
||||
/** |
||||
* |
||||
*/ |
||||
initSection: function() { |
||||
console.warn('INIT SECTION'); |
||||
}, |
||||
|
||||
/** |
||||
* |
||||
*/ |
||||
swap: function(indexA, indexB) { |
||||
console.warn('SWAP'); |
||||
// Move up
|
||||
// NOTE Two way binding here between dataset and function parameter?
|
||||
// NOTE swapping will not reorder index and i parameter will be off
|
||||
// NOTE discuss chained transitions: http://bl.ocks.org/mbostock/1125997
|
||||
// this.groups
|
||||
// .transition().duration(400)
|
||||
// .attr('transform', function doTransform(d) {
|
||||
// if (d.index === indexA) {
|
||||
// d.index = indexB;
|
||||
// }
|
||||
// else if (d.index === indexB) {
|
||||
// d.index = indexA;
|
||||
// }
|
||||
|
||||
// return `translate(${d.index * (Visualizer.itemW + Visualizer.spacerW)}, ${Visualizer.itemY})`;
|
||||
// })
|
||||
}, |
||||
|
||||
/** |
||||
* Highlights an index. |
||||
*/ |
||||
highlight: function(index) { |
||||
console.warn('HIGHLIGHT'); |
||||
}, |
||||
|
||||
/** |
||||
* Un-highlights an index. |
||||
*/ |
||||
unhighlight: function(index) { |
||||
console.warn('UNHIGHLIGHT'); |
||||
}, |
||||
|
||||
// /**
|
||||
// * Greys out an item.
|
||||
// */
|
||||
// fade: function(startIndex, endIndex) {
|
||||
// console.log(`fading from ${startIndex} to ${endIndex}`)
|
||||
|
||||
// this.svg.selectAll('rect')
|
||||
// // NOTE this replaces the fill function reference for each rectangle - key point!
|
||||
// .attr('fill', function fill(d) {
|
||||
// if (d.index >= startIndex && d.index <= endIndex) {
|
||||
// console.log(`${d.index} to ${d.fade}`)
|
||||
// return d.fade;
|
||||
Visualizer.prototype.initSection = function() { |
||||
// console.warn('INIT SECTION');
|
||||
}; |
||||
|
||||
/** |
||||
* |
||||
*/ |
||||
Visualizer.prototype.swap = function(indexA, indexB) { |
||||
// console.warn('SWAP');
|
||||
// Move u;
|
||||
// NOTE Two way binding here between dataset and function parameter?
|
||||
// NOTE swapping will not reorder index and i parameter will be off
|
||||
// NOTE discuss chained transitions: http://bl.ocks.org/mbostock/1125997
|
||||
// this.groups
|
||||
// .transition().duration(400)
|
||||
// .attr('transform', function doTransform(d) {
|
||||
// if (d.index === indexA) {
|
||||
// d.index = indexB;
|
||||
// }
|
||||
// return d.fill;
|
||||
// });
|
||||
// };
|
||||
|
||||
// /**
|
||||
// * Restores all items to un-greyed state.
|
||||
// */
|
||||
// unfade: function() {
|
||||
// this.svg.selectAll('rect')
|
||||
// .attr('fill', function fill(d) {
|
||||
// console.log(`unfade ${d.index}`)
|
||||
// return d.fill;
|
||||
// else if (d.index === indexB) {
|
||||
// d.index = indexA;
|
||||
// }
|
||||
|
||||
// return `translate(${d.index * (Visualizer.itemW + Visualizer.spacerW)}, ${Visualizer.itemY})`;
|
||||
// })
|
||||
// };
|
||||
|
||||
/** |
||||
* Moves marker 1 to an index and sets its text label. |
||||
*/ |
||||
marker1: function(index, label) { |
||||
console.warn('MARKER1') |
||||
}, |
||||
|
||||
/** |
||||
* Moves marker 2 to an index and sets its text label. |
||||
*/ |
||||
marker2: function(index, label) { |
||||
console.warn('MARKER2') |
||||
}, |
||||
|
||||
/** |
||||
* Updates message in stats 1 div. |
||||
*/ |
||||
stats1: function(message) { |
||||
console.warn('STATS1') |
||||
}, |
||||
|
||||
/** |
||||
* Updates message in stats 2 div. |
||||
*/ |
||||
stats2: function(message) { |
||||
console.warn('STATS2') |
||||
}, |
||||
|
||||
/** |
||||
* Updates message in message 1 div. |
||||
*/ |
||||
message1: function(message) { |
||||
console.warn('MESSAGE1') |
||||
}, |
||||
|
||||
/** |
||||
* Updates message in message 2 div. |
||||
*/ |
||||
message2: function(message) { |
||||
console.warn('MESSAGE2') |
||||
}, |
||||
|
||||
/** |
||||
* Updates message in message 3 div. |
||||
*/ |
||||
message3: function(message) { |
||||
console.warn('MESSAGE3') |
||||
}, |
||||
}; |
||||
|
||||
/** |
||||
* Highlights an index. |
||||
*/ |
||||
Visualizer.prototype.highlight = function(args) { |
||||
var index = args[2]; |
||||
|
||||
if (index < 0) { |
||||
console.error('Trying to highlight index of ' + index); |
||||
return; |
||||
} |
||||
|
||||
this.svg.select(`g:nth-child(${index})`).select('rect').attr('fill', 'red'); |
||||
}; |
||||
|
||||
/** |
||||
* Un-highlights an index. |
||||
*/ |
||||
Visualizer.prototype.unhighlight = function() { |
||||
this.svg.selectAll('.item').attr('fill', function(d) { return d.fill; }); |
||||
}; |
||||
|
||||
// /**
|
||||
// * Greys out an item.
|
||||
// */
|
||||
// Visualizer.prototype.fade = function(startIndex, endIndex) {
|
||||
// console.log(`fading from ${startIndex} to ${endIndex}`);
|
||||
// this.svg.selectAll('rect')
|
||||
// // NOTE this replaces the fill function reference for each rectangle - key point!
|
||||
// .attr('fill', function fill(d) {
|
||||
// if (d.index >= startIndex && d.index <= endIndex) {
|
||||
// console.log(`${d.index} to ${d.fade}`)
|
||||
// return d.fade;
|
||||
// }
|
||||
// return d.fill;
|
||||
// });
|
||||
// };
|
||||
|
||||
// /**
|
||||
// * Restores all items to un-greyed state.
|
||||
// */
|
||||
// Visualizer.prototype.unfade = function() {
|
||||
// this.svg.selectAll('rect')
|
||||
// .attr('fill', functi;n fill(d) {
|
||||
// console.log(`unfade ${d.index}`)
|
||||
// return d.fill;
|
||||
// })
|
||||
// };
|
||||
|
||||
/** |
||||
* Moves marker 1 to an index and sets its text label. |
||||
*/ |
||||
Visualizer.prototype.marker1 = function(args) { |
||||
var index = args[2]; |
||||
var label = args[3]; |
||||
|
||||
if (label !== undefined) { |
||||
label = label[0].toString(); |
||||
this.svg.select('#marker1 text').text(label) |
||||
} |
||||
|
||||
var x = index * (Visualizer.itemW + Visualizer.spacerW); |
||||
|
||||
this.svg.select('#marker1') |
||||
.transition().duration(300) |
||||
.attr('transform', `translate(${x},0)`) |
||||
}; |
||||
|
||||
/** |
||||
* Moves marker 2 to an index and sets its text label. |
||||
*/ |
||||
Visualizer.prototype.marker2 = function(args) { |
||||
var index = args[2]; |
||||
var label = args[3]; |
||||
|
||||
if (label !== undefined) { |
||||
label = label[0].toString(); |
||||
this.svg.select('#marker2 text').text(label) |
||||
} |
||||
|
||||
var x = index * (Visualizer.itemW + Visualizer.spacerW); |
||||
|
||||
this.svg.select('#marker2') |
||||
.transition().duration(300) |
||||
.attr('transform', `translate(${x},0)`) |
||||
}; |
||||
|
||||
/** |
||||
* Updates message in stats 1 div. |
||||
*/ |
||||
Visualizer.prototype.stats1 = function(args) { |
||||
var msg = args[2]; |
||||
this.parent.querySelectorAll('.stat')[0].innerHTML = msg; |
||||
}; |
||||
|
||||
/** |
||||
* Updates message in stats 2 div. |
||||
*/ |
||||
Visualizer.prototype.stats2 = function(args) { |
||||
var msg = args[2]; |
||||
this.parent.querySelectorAll('.stat')[1].innerHTML = msg; |
||||
}; |
||||
|
||||
/** |
||||
* Updates message in message 1 div. |
||||
*/ |
||||
Visualizer.prototype.message1 = function(args) { |
||||
var msg = args[2]; |
||||
this.parent.querySelector('.message:nth-child(2)').innerHTML = msg; |
||||
}; |
||||
|
||||
/** |
||||
* Updates message in message 2 div. |
||||
*/ |
||||
Visualizer.prototype.message2 = function(args) { |
||||
var msg = args[2]; |
||||
this.parent.querySelector('.message:nth-child(2)').innerHTML = msg; |
||||
}; |
||||
|
||||
/** |
||||
* Updates message in message 3 div. |
||||
*/ |
||||
Visualizer.prototype.message3 = function(args) { |
||||
var msg = args[2]; |
||||
this.parent.querySelector('.message:nth-child(3)').innerHTML = msg; |
||||
}; |
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,16 @@ |
||||
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 11, 2015 */ |
||||
|
||||
|
||||
|
||||
@font-face { |
||||
font-family: 'district_prothin'; |
||||
src: url('distproth-webfont.eot'); |
||||
src: url('distproth-webfont.eot?#iefix') format('embedded-opentype'), |
||||
url('distproth-webfont.woff2') format('woff2'), |
||||
url('distproth-webfont.woff') format('woff'), |
||||
url('distproth-webfont.ttf') format('truetype'), |
||||
url('distproth-webfont.svg#district_prothin') format('svg'); |
||||
font-weight: normal; |
||||
font-style: normal; |
||||
|
||||
} |
||||
Loading…
Reference in new issue