Comparing sensitive data, confidential files or internal emails?

Most legal and privacy policies prohibit uploading sensitive data online. Diffchecker Desktop ensures your confidential information never leaves your computer. Work offline and compare documents securely.

Untitled diff

Created Diff never expires
28 removals
66 lines
54 additions
68 lines
//Problem: No user interaction causes no change to application
// Problem: No user interaction causes no change to application.
//Solution: When user interacts cause changes appropriately
// Solution: When user interacts, cause changes appropriately.
var color = $(".selected").css("background-color");
var color = $(".selected").css("background-color");
var $canvas = $("canvas");
var $canvas = $("canvas");
var context = $canvas[0].getContext("2d");
var context = $canvas[0].getContext("2d");
var lastEvent;
var lastEvent;
var mouseDown = false;
var mouseDown = false;
// When clicking on control list items
//When clicking on control list items
$(".controls").on("click", "li", function() {
$(".controls").on("click", "li", function(){
// Deselect sibling elements
//Deselect sibling elements
$(this).siblings().removeClass("selected");
$(this).siblings().removeClass("selected");
// Select clicked element
//Select clicked element
$(this).addClass("selected");
$(this).addClass("selected");
// Cache current color
//cache current color
color = $(this).css("background-color");
color = $(this).css("background-color");
});
});
//When "New Color" is pressed
// When "New Color" is clicked
$("#revealColorSelect").click(function(){
$("#revealColorSelect").click(function(){
//Show color select or hide the color select
// Show color select or hide the color select
changeColor();
changeColor();
$("#colorSelect").toggle();
$("#colorSelect").toggle();
});
});
//update the new color span
// Update the new color span
function changeColor() {
function changeColor() {
var r = $("#red").val();
var r = $("#red").val();
var g = $("#green").val();
var g = $("#green").val();
var b = $("#blue").val();
var b = $("#blue").val();
$("#newColor").css("background-color", "rgb(" + r + "," + g +", " + b + ")");
$("#newColor").css("background-color", "rgb(" + r + "," + g + "," + b + ")");
}
}
//When color sliders change
// When color sliders change
$("input[type=range]").change(changeColor);
$("input[type=range]").change(changeColor);
//When "Add Color" is pressed
// When "Add Color" is pressed
$("#addNewColor").click(function(){
$("#addNewColor").click(function(){
//Append the color to the controls ul
// Append the color to the control list
var $newColor = $("<li></li>");
var $newColor = $("<li></li>");
$newColor.css("background-color", $("#newColor").css("background-color"));
$newColor.css("background-color", $("#newColor").css("background-color"));
$(".controls ul").append($newColor);
$(".controls ul").append($newColor);
//Select the new color
// Select the new color
$newColor.click();
$newColor.click();
});
});
//On mouse events on the canvas
// On mouse event on the canvas
$canvas.mousedown(function(e){
$canvas.mousedown(function(e){
lastEvent = e;
lastEvent = e;
mouseDown = true;
mouseDown = true;
}).mousemove(function(e){
}).mousemove(function(e){
//Draw lines
// Draw lines
if(mouseDown) {
if(mouseDown) {
context.beginPath();
context.beginPath();
context.moveTo(lastEvent.offsetx, lastEvent.offsety);
context.moveTo(lastEvent.offsetX, lastEvent.offsetY);
context.lineTo(e.offsetx, e.offsety);
context.lineTo(e.offsetX, e.offsetY);
context.strokeStyle = color;
context.strokeStyle = color;
context.stroke();
context.stroke();
lastEvent = e;
lastEvent = e;
}
}
}).mouseup(function(){
}).mouseup(function(){
mouseDown = false;
mouseDown = false;
}).mouseLeave(function(){
}).mouseleave(function(){
$canvas.mouseup();
$canvas.mouseup();
});
});