[TASK] Initial import.
This commit is contained in:
commit
ce72c72515
|
|
@ -0,0 +1,2 @@
|
||||||
|
.project
|
||||||
|
.settings
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Colorsquareproject</title>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||||
|
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
|
||||||
|
<script type="text/javascript" src="js/init.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Ein kleines Feld bunter Kästchen.</h1>
|
||||||
|
<h3>Was auch sonst?... na los, spiel schon damit. :-)</h3>
|
||||||
|
<div id="controlbox">
|
||||||
|
<h1>Tastenbefehle</h1>
|
||||||
|
<h2>Normaler Modus</h2>
|
||||||
|
<dl>
|
||||||
|
<dt>R</dt>
|
||||||
|
<dd>Schaltet Farbanimation ein/aus</dd>
|
||||||
|
<dt>Q</dt>
|
||||||
|
<dd>Lightness erhöhen</dd>
|
||||||
|
<dt>W</dt>
|
||||||
|
<dd>Lightness verringern</dd>
|
||||||
|
<dt>A</dt>
|
||||||
|
<dd>Saturation erhöhen</dd>
|
||||||
|
<dt>S</dt>
|
||||||
|
<dd>Saturation verringern</dd>
|
||||||
|
<dt>+</dt>
|
||||||
|
<dd>Animationsgeschwindigkeit +1</dd>
|
||||||
|
<dt>0 (null)</dt>
|
||||||
|
<dd>Animationsgeschwindigkeit = 1</dd>
|
||||||
|
<dt>-</dt>
|
||||||
|
<dd>Animationsgeschwindigkeit -1</dd>
|
||||||
|
<dt>Linksklick</dt>
|
||||||
|
<dd>Setzt Kästchen auf Rot</dd>
|
||||||
|
<dt>T</dt>
|
||||||
|
<dd>Zum "toggleInterval" Modus</dd>
|
||||||
|
</dl>
|
||||||
|
<hr />
|
||||||
|
<h2>"toggleInterval" Modus</h2>
|
||||||
|
<dl>
|
||||||
|
<dt>T</dt>
|
||||||
|
<dd>Zum normalen Modus</dd>
|
||||||
|
<dt>Linksklick</dt>
|
||||||
|
<dd>Schaltet Farbveränderung für dieses Kästchen ein (hell) oder aus (dunkel)</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
<div id="squarecontainer"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,200 @@
|
||||||
|
var square = function(id) {
|
||||||
|
var newSquare = {
|
||||||
|
'id': id,
|
||||||
|
|
||||||
|
'h': 0,
|
||||||
|
's': 95,
|
||||||
|
'l': 65,
|
||||||
|
|
||||||
|
'hstep': 1,
|
||||||
|
|
||||||
|
interval: null,
|
||||||
|
intervalEnabled: true,
|
||||||
|
intervalView: false,
|
||||||
|
|
||||||
|
'init': function() {
|
||||||
|
this.setHSL(Math.random() * 360);
|
||||||
|
this.registerEvents();
|
||||||
|
},
|
||||||
|
|
||||||
|
'registerEvents': function() {
|
||||||
|
var me = this;
|
||||||
|
$(this.id).on('click', function(){
|
||||||
|
me.handleClick();
|
||||||
|
});
|
||||||
|
$(this.id).on('mouseenter', function(){
|
||||||
|
$(me.id).addClass('square-selected');
|
||||||
|
me.update();
|
||||||
|
});
|
||||||
|
$(this.id).on('mouseleave', function(){
|
||||||
|
$(me.id).removeClass('square-selected');
|
||||||
|
me.update();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('html').keypress(function(event) {
|
||||||
|
switch(event.charCode) {
|
||||||
|
case 113: //q
|
||||||
|
me.changeLightness(5);
|
||||||
|
break;
|
||||||
|
case 119: //w
|
||||||
|
me.changeLightness(-5);
|
||||||
|
break;
|
||||||
|
case 97: //a
|
||||||
|
me.changeSaturation(5);
|
||||||
|
break;
|
||||||
|
case 115: //s
|
||||||
|
me.changeSaturation(-5);
|
||||||
|
break;
|
||||||
|
case 116: //t
|
||||||
|
me.toggleIntervalView();
|
||||||
|
break;
|
||||||
|
case 43: //plus (+)
|
||||||
|
me.hstep += 1;
|
||||||
|
break;
|
||||||
|
case 45: //minus (-)
|
||||||
|
me.hstep -= 1;
|
||||||
|
break;
|
||||||
|
case 48: //null (0)
|
||||||
|
me.hstep = 1;
|
||||||
|
break;
|
||||||
|
case 114: //r
|
||||||
|
if(me.intervalView == true) {
|
||||||
|
me.toggleIntervalEnabled();
|
||||||
|
} else {
|
||||||
|
me.toggleInterval();
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
//console.log(["key pressed", event.charCode]);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
'handleClick': function() {
|
||||||
|
if(this.intervalView == true) {
|
||||||
|
this.toggleIntervalEnabled();
|
||||||
|
} else {
|
||||||
|
this.setHSL(0);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
'toggleIntervalView': function() {
|
||||||
|
this.intervalView = !this.intervalView;
|
||||||
|
this.update();
|
||||||
|
},
|
||||||
|
|
||||||
|
'toggleIntervalEnabled': function() {
|
||||||
|
this.intervalEnabled = !this.intervalEnabled;
|
||||||
|
this.update();
|
||||||
|
},
|
||||||
|
|
||||||
|
'toggleInterval': function() {
|
||||||
|
var me = this;
|
||||||
|
if(this.interval === null) {
|
||||||
|
if(this.intervalEnabled == true) {
|
||||||
|
this.interval = window.setInterval(function(vCallback, nDelay) {
|
||||||
|
me.adaptFromEnvironment();
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
window.clearInterval(this.interval);
|
||||||
|
this.interval = null;
|
||||||
|
}
|
||||||
|
this.update();
|
||||||
|
},
|
||||||
|
|
||||||
|
'adaptFromEnvironment': function() {
|
||||||
|
this.changeHue(this.hstep);
|
||||||
|
//maybe get hsl from top and left
|
||||||
|
//calculate and set new hsl to self.
|
||||||
|
},
|
||||||
|
|
||||||
|
'setHSL': function(h,s,l) {
|
||||||
|
this.h = (h !== undefined && h !== null) ? h : this.h;
|
||||||
|
this.s = (s !== undefined && s !== null) ? s : this.s;
|
||||||
|
this.l = (l !== undefined && l !== null) ? l: this.l;
|
||||||
|
this.update();
|
||||||
|
},
|
||||||
|
|
||||||
|
'getHSLForCSS': function(h, s, l) {
|
||||||
|
h = h % 360;
|
||||||
|
if(s < 0) s = 0;
|
||||||
|
if(s > 100) s = 100;
|
||||||
|
if(l < 0) l = 0;
|
||||||
|
if(l > 100) l = 100;
|
||||||
|
|
||||||
|
return 'hsl(' + h + ', ' + s + '%, '+ l + '%)';
|
||||||
|
},
|
||||||
|
|
||||||
|
'changeHue': function(step) {
|
||||||
|
this.h += step;
|
||||||
|
this.update();
|
||||||
|
},
|
||||||
|
|
||||||
|
'changeSaturation': function(step) {
|
||||||
|
this.s += step;
|
||||||
|
this.update();
|
||||||
|
},
|
||||||
|
|
||||||
|
'changeLightness': function(step) {
|
||||||
|
this.l += step;
|
||||||
|
this.update();
|
||||||
|
},
|
||||||
|
|
||||||
|
'validate': function() {
|
||||||
|
this.h = this.h % 360;
|
||||||
|
if(this.s < 0) this.s = 0;
|
||||||
|
if(this.s > 100) this.s = 100;
|
||||||
|
if(this.l < 0) this.l = 0;
|
||||||
|
if(this.l > 100) this.l = 100;
|
||||||
|
},
|
||||||
|
|
||||||
|
'update': function() {
|
||||||
|
this.validate();
|
||||||
|
|
||||||
|
//fetch values
|
||||||
|
h = this.h;
|
||||||
|
s = this.s;
|
||||||
|
l = this.l;
|
||||||
|
|
||||||
|
if(this.intervalView == true) {
|
||||||
|
if(this.intervalEnabled == true) {
|
||||||
|
l = 85;
|
||||||
|
} else {
|
||||||
|
l = 15;
|
||||||
|
}
|
||||||
|
h = 240;
|
||||||
|
s = 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
if($(this.id).hasClass('square-selected')) l += 25;
|
||||||
|
$(this.id).css('background-color', this.getHSLForCSS(h,s,l));
|
||||||
|
//$(this.id).css('border-color', this.getHSLForCSS(h,s,85));
|
||||||
|
$(this.id).css('-webkit-box-shadow', '0px 0px 20px 15px ' + this.getHSLForCSS(h,s,l));
|
||||||
|
$(this.id).css('box-shadow', '0px 0px 20px 15px ' + this.getHSLForCSS(h,s,l));
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
newSquare.init();
|
||||||
|
|
||||||
|
return newSquare;
|
||||||
|
};
|
||||||
|
|
||||||
|
var squares = {};
|
||||||
|
var amountOfSquares = 49;
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
for(var i = 1; i <= amountOfSquares; i++) {
|
||||||
|
id = 'square-' + i;
|
||||||
|
$('#squarecontainer').html($('#squarecontainer').html() + '<span class="square" id="'+id+'">'+'</span>');
|
||||||
|
}
|
||||||
|
|
||||||
|
//DOM must be ready before making the squares work.
|
||||||
|
for(var i = 1; i <= amountOfSquares; i++) {
|
||||||
|
id = 'square-' + i;
|
||||||
|
newSquare = new square('#' + id);
|
||||||
|
squares[id] = newSquare;
|
||||||
|
}
|
||||||
|
});
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,49 @@
|
||||||
|
body h1, body h3 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
background-color: hsl(0, 0%, 0%);
|
||||||
|
color: hsl(0, 0%, 100%);
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.square {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
float: left;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 16px;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.square-selected {
|
||||||
|
border: 1px solid hsl(0, 0%, 100%);
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#squarecontainer {
|
||||||
|
height: 588px;
|
||||||
|
width: 588px;
|
||||||
|
margin: 50px auto 0px auto;
|
||||||
|
padding: 10px;
|
||||||
|
border: 2px solid hsl(0, 0%, 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#controlbox hr {
|
||||||
|
border: none;
|
||||||
|
height: 1px;
|
||||||
|
background-color: hsl(0, 0%, 85%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#controlbox {
|
||||||
|
border: 2px solid hsl(0, 0%, 10%);
|
||||||
|
color: hsl(0, 0%, 90%);
|
||||||
|
width: 250px;
|
||||||
|
float: left;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue