CMYK controls almost fully functional
Need to better tie into swatch selection, and need to add UI to dials themselves, but currently can display and change values with the inputs.
This commit is contained in:
parent
08e4738b86
commit
5d2dcac4c4
|
|
@ -162,23 +162,23 @@ footer {
|
|||
}
|
||||
.dial-wrapper {
|
||||
position: absolute;
|
||||
width: 5.5em;
|
||||
height: 5.5em;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.dial-wrapper:after {
|
||||
content: "";
|
||||
background: #272b30;
|
||||
border-radius: 50%;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
position: absolute;
|
||||
top: 0.25em;
|
||||
left: 0.25em;
|
||||
top: 7px;
|
||||
left: 7px;
|
||||
}
|
||||
.dial-wrapper input {
|
||||
margin-top: 6em;
|
||||
width: 4.5em;
|
||||
margin-left: 0.5em;
|
||||
margin-top: 94px;
|
||||
width: 52px;
|
||||
margin-left: 14px;
|
||||
background: #272b30;
|
||||
border: 1px solid;
|
||||
text-align: center;
|
||||
|
|
@ -188,14 +188,14 @@ footer {
|
|||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
width: 2.75em;
|
||||
width: 40px;
|
||||
}
|
||||
.dial-container.dial-container1 {
|
||||
left: 2.75em;
|
||||
left: 40px;
|
||||
}
|
||||
.dial-container.dial-container1 .dial-wedge {
|
||||
transform: rotateZ(360deg);
|
||||
border-radius: 0 5.5em 5.5em 0;
|
||||
transform: rotateZ(0deg);
|
||||
border-radius: 0 80px 80px 0;
|
||||
left: 0;
|
||||
transform-origin: 0 50%;
|
||||
}
|
||||
|
|
@ -203,25 +203,25 @@ footer {
|
|||
left: 0;
|
||||
}
|
||||
.dial-container.dial-container2 .dial-wedge {
|
||||
transform: rotateZ(0);
|
||||
border-radius: 5.5em 0 0 5.5em;
|
||||
transform-origin: 5.5em 5.5em;
|
||||
transform: rotateZ(0deg);
|
||||
border-radius: 80px 0 0 80px;
|
||||
transform-origin: 40px 40px;
|
||||
}
|
||||
.dial-wedge {
|
||||
height: 5.5em;
|
||||
width: 2.75em;
|
||||
height: 80px;
|
||||
width: 40px;
|
||||
}
|
||||
.dial-marker {
|
||||
border-radius: 50%;
|
||||
height: 0.25em;
|
||||
width: 0.25em;
|
||||
height: 7px;
|
||||
width: 7px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(49%);
|
||||
left: calc(22%);
|
||||
}
|
||||
.dial-end {
|
||||
transform: rotateZ(360deg);
|
||||
transform-origin: 50% 2.75em;
|
||||
transform: rotateZ(0deg);
|
||||
transform-origin: 50% 40px;
|
||||
}
|
||||
#cmy-preview {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -163,8 +163,11 @@ footer{
|
|||
color: @BG;
|
||||
}
|
||||
|
||||
@dial_size : 5.5em;
|
||||
@dial_thickness : 0.5em;
|
||||
//@dial_size : 5.5em;
|
||||
//@dial_thickness : 0.5em;
|
||||
@dial_size : 80px;
|
||||
@dial_thickness : 14px;
|
||||
|
||||
@dial_cyan : #00FFFF;
|
||||
@dial_magenta : #FF00FF;
|
||||
@dial_yellow : #FFFF00;
|
||||
|
|
@ -187,7 +190,6 @@ footer{
|
|||
|
||||
#dial-c {
|
||||
.dial-class(@dial_cyan, 0);
|
||||
|
||||
}
|
||||
#dial-m {
|
||||
.dial-class(@dial_magenta, 1);
|
||||
|
|
@ -218,9 +220,9 @@ footer{
|
|||
left: @dial_thickness / 2;
|
||||
}
|
||||
input{
|
||||
margin-top: @dial_size + 0.5em;
|
||||
width: @dial_size - 1em;
|
||||
margin-left: 0.5em;
|
||||
margin-top: @dial_size + @dial_thickness;
|
||||
width: @dial_size - (@dial_thickness * 2);
|
||||
margin-left: @dial_thickness;
|
||||
background: @BG;
|
||||
border: 1px solid;
|
||||
text-align: center;
|
||||
|
|
@ -235,7 +237,7 @@ footer{
|
|||
&.dial-container1 {
|
||||
left: @dial_size / 2;
|
||||
.dial-wedge {
|
||||
transform: rotateZ(360deg);
|
||||
transform: rotateZ(0deg);
|
||||
border-radius: 0 @dial_size @dial_size 0;
|
||||
left: 0;
|
||||
transform-origin: 0 50%;
|
||||
|
|
@ -244,9 +246,9 @@ footer{
|
|||
&.dial-container2 {
|
||||
left: 0;
|
||||
.dial-wedge {
|
||||
transform: rotateZ(0);
|
||||
transform: rotateZ(0deg);
|
||||
border-radius: @dial_size 0 0 @dial_size;
|
||||
transform-origin: @dial_size @dial_size;
|
||||
transform-origin: @dial_size/2 @dial_size/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -263,9 +265,10 @@ footer{
|
|||
left: calc(50% - (@dial_thickness * 2));
|
||||
}
|
||||
.dial-end {
|
||||
transform: rotateZ(360deg);
|
||||
transform-origin: 50% @dial_size / 2;
|
||||
transform: rotateZ(0deg);
|
||||
transform-origin: 50% (@dial_size/2);
|
||||
}
|
||||
|
||||
#cmy-preview {
|
||||
position: absolute;
|
||||
margin-top: 220px;
|
||||
|
|
|
|||
|
|
@ -74,11 +74,14 @@ light.colorPickers = function () {
|
|||
$('#' + event.target + '-page').show();
|
||||
if (event.target === 'rgb') {
|
||||
light.rgb.page();
|
||||
} else if (event.target) {
|
||||
light.cmy.page();
|
||||
}
|
||||
}
|
||||
});
|
||||
light.rgb.init();
|
||||
light.kelvin.init();
|
||||
light.cmy.init();
|
||||
};
|
||||
light.set = function (rgb, callback) { //rgb = [0,0,0]
|
||||
'use strict';
|
||||
|
|
@ -249,25 +252,87 @@ light.kelvin.click = function (t, e) {
|
|||
light.cmy = {};
|
||||
light.cmy.init = function () {
|
||||
'use strict';
|
||||
|
||||
$('.dial-wrapper input').on('input', function () {
|
||||
light.cmy.change(this);
|
||||
});
|
||||
$('.dial-wrapper input').on('change', function () {
|
||||
light.cmy.change(this);
|
||||
});
|
||||
};
|
||||
|
||||
light.cmy.set = function (rgb) {
|
||||
light.cmy.page = function () {
|
||||
'use strict';
|
||||
light.cmy.fromRgb(light.color);
|
||||
};
|
||||
|
||||
light.cmy.change = function (t) {
|
||||
'use strict';
|
||||
var id = $(t).parent().attr('id').split('-')[1],
|
||||
val = $(t).val(),
|
||||
cmy = [];
|
||||
|
||||
cmy[0] = $('#dial-c input').val();
|
||||
cmy[1] = $('#dial-m input').val();
|
||||
cmy[2] = $('#dial-y input').val();
|
||||
cmy[3] = $('#dial-k input').val();
|
||||
|
||||
light.cmy.setDial(id, val);
|
||||
light.cmy.preview(cmy);
|
||||
};
|
||||
|
||||
light.cmy.fromRgb = function (rgb) {
|
||||
'use strict';
|
||||
var cmy = chroma.rgb(rgb).cmyk();
|
||||
light.cmy.set(cmy);
|
||||
};
|
||||
|
||||
light.cmy.set = function (cmy) {
|
||||
'use strict';
|
||||
light.cmy.setDial('c', cmy[0]);
|
||||
light.cmy.setDial('m', cmy[1]);
|
||||
light.cmy.setDial('y', cmy[2]);
|
||||
light.cmy.setDial('k', cmy[3]);
|
||||
|
||||
light.cmy.preview(cmy);
|
||||
};
|
||||
|
||||
light.cmy.setDial = function (dial, val) {
|
||||
'use strict';
|
||||
var elem = $('#dial-' + dial),
|
||||
angle = Math.floor(360 * val);
|
||||
elem.find('.dial-container1 .dial-wedge').css('transform', 'rotateZ(' + angle + 'deg)');
|
||||
elem.find('.dial-end').css('transform', 'rotateZ(' + angle + 'deg)');
|
||||
angle = Math.floor(360 * val),
|
||||
container1 = 0,
|
||||
container2 = 0;
|
||||
elem.find('.dial-end').hide();
|
||||
if (angle === 0) {
|
||||
container1 = 180;
|
||||
container2 = 180;
|
||||
} else if (angle < 180) {
|
||||
container1 = 180;
|
||||
container2 = 180 - angle;
|
||||
} else if (angle === 180) {
|
||||
container1 = 180;
|
||||
container2 = 0;
|
||||
} else if (angle > 180 && angle < 360) {
|
||||
container1 = 180 - (angle - 180);
|
||||
container2 = 0;
|
||||
} else if (angle === 360) {
|
||||
//
|
||||
}
|
||||
|
||||
if (angle !== 0) {
|
||||
elem.find('.dial-end').show();
|
||||
}
|
||||
|
||||
elem.find('.dial-container1 .dial-wedge').css('transform', 'rotateZ(' + container1 + 'deg)');
|
||||
elem.find('.dial-container2 .dial-wedge').css('transform', 'rotateZ(' + container2 + 'deg)');
|
||||
elem.find('.dial-end').css('transform', 'rotateZ(' + (360 - angle) + 'deg)');
|
||||
elem.find('input').val(val);
|
||||
};
|
||||
|
||||
light.cmy.preview = function (rgb_float) {
|
||||
light.cmy.preview = function (cmy) {
|
||||
'use strict';
|
||||
var elem = $('#cmy-preview'),
|
||||
rgb = light.rgb.floor(rgb_float),
|
||||
rgb = light.rgb.floor(chroma.cmyk(cmy).rgb()),
|
||||
rgb_str = 'rgb(' + rgb.join(', ') + ')';
|
||||
elem.css('background', rgb_str);
|
||||
elem.text(rgb_str);
|
||||
|
|
@ -362,6 +427,8 @@ light.swatch.init = function () {
|
|||
$(this).addClass('default set');
|
||||
if (w2ui['colors'].active === 'rgb') {
|
||||
light.rgb.set(light.color);
|
||||
} else if (w2ui['colors'].active === 'cmy') {
|
||||
light.cmy.fromRgb(light.color);
|
||||
}
|
||||
light.preview(rgb);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue