-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcolourPalette.js
executable file
·74 lines (54 loc) · 1.87 KB
/
colourPalette.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// Displays and handles the colour palette.
function ColourPalette() {
// a list of web colour strings
this.colours = ["black", "silver", "gray", "white", "maroon", "red", "purple",
"orange", "pink", "fuchsia", "green", "lime", "olive", "yellow", "navy",
"blue", "teal", "aqua"
];
// make the start colour be black
this.selectedColour = "black";
var self = this;
var colourClick = function() {
//remove the old border
var current = select("#" + self.selectedColour + "Swatch");
current.style("border", "0");
//get the new colour from the id of the clicked element
var c = this.id().split("Swatch")[0];
//set the selected colour and fill and stroke
self.selectedColour = c;
fill(c);
stroke(c);
// add a new border to the selected colour
this.style("border", "2px solid #ff4040");
}
/**
* Resets color, stroke etc back to what user selected
*/
this.resetColors = function(){
fill(this.selectedColour);
stroke(this.selectedColour);
strokeWeight(1);
}
// load in the colours
this.loadColours = function() {
// set the fill and stroke properties to be black at the start of the programme
// running
fill(this.colours[0]);
stroke(this.colours[0]);
// for each colour create a new div in the html for the colourSwatches
for (var i = 0; i < this.colours.length; i++) {
var colourID = this.colours[i] + "Swatch";
// using JQuery add the swatch to the palette and set its background colour
// to be the colour value.
var colourSwatch = createDiv()
colourSwatch.class('colourSwatches');
colourSwatch.id(colourID);
select(".colourPalette").child(colourSwatch);
select("#" + colourID).style("background-color", this.colours[i]);
colourSwatch.mouseClicked(colourClick)
}
select(".colourSwatches").style("border", "2px solid blue");
};
// call the loadColours function now it is declared
this.loadColours();
}