[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