Skip to content

Commit

Permalink
Chrome with new data!
Browse files Browse the repository at this point in the history
  • Loading branch information
@casesandberg
casesandberg committed Aug 14, 2015
1 parent 4cfe576 commit ab389d0
Show file tree
Hide file tree
Showing 7 changed files with 87 additions and 143 deletions.
3 changes: 2 additions & 1 deletion docs/components/home/HomeFeature.jsx
View file
Expand Up @@ -116,6 +116,7 @@ class HomeFeature extends ReactCSS.Component {
}

handleChange(data) {
console.log(data);
if (data.hsl !== this.state) {
this.setState(data.hsl);
}
Expand Down Expand Up @@ -155,7 +156,7 @@ class HomeFeature extends ReactCSS.Component {
<div is="over" ref="over">
<Grid preset="two">
<div is="sketch">
<ColorPicker type="sketch" color={ this.state } onChange={ this.handleChange } />
<ColorPicker type="sketch" color={ this.state } />
<div is="label">Sketch</div>
</div>
<div is="photoshop">
Expand Down
77 changes: 30 additions & 47 deletions src/components/Color.js
View file
Expand Up @@ -13,23 +13,22 @@ var Slider = require('./slider/Slider');
var Material = require('./material/Material');
var Compact = require('./compact/Compact');

var toHsl = function(data) {
if (data.h) {
return {
h: data.h,
s: data.s,
l: data.l,
a: data.a,
};
}
var toColors = function(data) {
var color = tinycolor(data);
return {
hsl: color.toHsl(),
hex: color.toHex(),
rgb: color.toRgb(),
hsv: color.toHsv(),
};
};

class ColorPicker extends ReactCSS.Component {

constructor(props) {
super();

this.state = toHsl(props.color);
this.state = toColors(props.color);

this.handleChange = this.handleChange.bind(this);
}
Expand All @@ -43,49 +42,33 @@ class ColorPicker extends ReactCSS.Component {
}

handleChange(data) {
this.setState(data);

if (this.props.onChange) {
var color = tinycolor(merge(this.state, data));

var newData = {
hsl: color.toHsl(),
rgb: color.toRgb(),
hex: color.toHex(),
};

newData.hsl.h = Math.round(newData.hsl.h * 100) / 100;
newData.hsl.s = Math.round(newData.hsl.s * 100) / 100;
newData.hsl.l = Math.round(newData.hsl.l * 100) / 100;

this.props.onChange(newData);
}
var colors = toColors(data);
this.setState(colors);
this.props.onChange && this.props.onChange(colors);
}

componentWillReceiveProps(nextProps) {
if (this.state !== nextProps.color) {
this.setState(toHsl(nextProps.color));
}
this.setState(toColors(nextProps.color));
}

render() {
var Picker = Sketch;

if (this.props.type === 'sketch') {
Picker = Sketch;
} else if (this.props.type === 'photoshop') {
Picker = Photoshop;
} else if (this.props.type === 'chrome') {
Picker = Chrome;
} else if (this.props.type === 'swatches') {
Picker = Swatches;
} else if (this.props.type === 'slider') {
Picker = Slider;
} else if (this.props.type === 'material') {
Picker = Material;
} else if (this.props.type === 'compact') {
Picker = Compact;
}
var Picker = Chrome // Sketch;

// if (this.props.type === 'sketch') {
// Picker = Sketch;
// } else if (this.props.type === 'photoshop') {
// Picker = Photoshop;
// } else if (this.props.type === 'chrome') {
// Picker = Chrome;
// } else if (this.props.type === 'swatches') {
// Picker = Swatches;
// } else if (this.props.type === 'slider') {
// Picker = Slider;
// } else if (this.props.type === 'material') {
// Picker = Material;
// } else if (this.props.type === 'compact') {
// Picker = Compact;
// }

return <Picker {...this.state} onChange={ this.handleChange } />;
}
Expand Down
6 changes: 2 additions & 4 deletions src/components/chrome/Chrome.jsx
View file
Expand Up @@ -21,8 +21,6 @@ class Chrome extends ReactCSS.Component {
}

classes() {
var rgb = tinycolor(this.props).toRgb();

return {
'default': {
picker: {
Expand Down Expand Up @@ -64,7 +62,7 @@ class Chrome extends ReactCSS.Component {
zIndex: 2,
borderRadius: '8px',
boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.1)',
background: 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + this.props.a + ')',
background: 'rgba(' + this.props.rgb.r + ', ' + this.props.rgb.g + ', ' + this.props.rgb.b + ', ' + this.props.rgb.a + ')',
},
toggles: {
flex: '1',
Expand Down Expand Up @@ -108,7 +106,7 @@ class Chrome extends ReactCSS.Component {
</div>
<div is="toggles">
<div is="hue">
<Hue is="Hue" value={ this.props.h } pointer={ ChromePointer } onChange={ this.handleChange } />
<Hue is="Hue" {...this.props} pointer={ ChromePointer } onChange={ this.handleChange } />
</div>
<div is="alpha">
<Alpha is="Alpha" {...this.props} pointer={ ChromePointer } onChange={ this.handleChange } />
Expand Down
65 changes: 35 additions & 30 deletions src/components/chrome/ChromeFields.jsx
View file
Expand Up @@ -92,7 +92,7 @@ class ChromeFields extends ReactCSS.Component {
}

componentDidMount() {
if (this.props.a === 1 && this.state.view !== 'hex') {
if (this.props.hsl.a === 1 && this.state.view !== 'hex') {
this.setState({ view: 'hex' });
} else if (this.state.view !== 'rgb' && this.state.view !== 'hsl') {
this.setState({ view: 'rgb' });
Expand All @@ -105,29 +105,29 @@ class ChromeFields extends ReactCSS.Component {
} else if (this.state.view === 'rgb') {
this.setState({ view: 'hsl' });
} else if (this.state.view === 'hsl') {
if (this.props.a === 1) {
if (this.props.hsl.a === 1) {
this.setState({ view: 'hex' });
} else {
this.setState({ view: 'rgb' });
}
}
}

componentWillReceiveProps(nextProps) {
if (nextProps.hsl.a !== 1 && this.state.view === 'hex') {
this.setState({ view: 'rgb' });
}
}

handleChange(data) {
if (data.hex) {
var color = tinycolor(data.hex);
if (color.isValid()) {
var hsl = color.toHsl();
this.props.onChange({ h: hsl.h, s: hsl.s, l: hsl.l });
}
tinycolor(data.hex).isValid() && this.props.onChange(data.hex);
} else if (data.r || data.g || data.b) {
var oldColor = tinycolor({ h: this.props.h, s: this.props.s, l: this.props.l}).toRgb();
for (var key in data) {
oldColor[key] = Number(data[key]);
}

var hsl = tinycolor(oldColor).toHsl();
this.props.onChange({ h: hsl.h, s: hsl.s, l: hsl.l });
this.props.onChange({
r: data.r || this.props.rgb.r,
g: data.g || this.props.rgb.g,
b: data.b || this.props.rgb.b,
});
} else if (data.a) {
if (data.a < 0) {
data.a = 0;
Expand All @@ -137,13 +137,20 @@ class ChromeFields extends ReactCSS.Component {
data.a = Math.round(data.a * 100);
}

this.props.onChange(data);
// TODO: Fix this?
this.props.onChange({
h: this.props.hsl.h,
s: this.props.hsl.s,
l: this.props.hsl.l,
a: data.a,
});
} else if (data.h || data.s || data.l) {
for (var key in data) {
data[key] = data[key].replace('%', '');
}

this.props.onChange(data);
this.props.onChange({
h: data.h || this.props.hsl.h,
s: data.s && (data.s).replace('%', '') || this.props.hsl.s,
l: data.l && (data.l).replace('%', '') || this.props.hsl.l,
});
}
}

Expand All @@ -156,43 +163,41 @@ class ChromeFields extends ReactCSS.Component {
}

render() {
var color = tinycolor({ h: this.props.h, s: this.props.s, l: this.props.l });

var fields;
if (this.state.view === 'hex') {
fields = <div is="fields">
<div is="field">
<EditableInput is="Input" label="hex" value={ color.toHexString() } onChange={ this.handleChange }/>
<EditableInput is="Input" label="hex" value={ '#' + this.props.hex } onChange={ this.handleChange }/>
</div>
</div>;
} else if (this.state.view === 'rgb') {
fields = <div is="fields">
<div is="field">
<EditableInput is="Input" label="r" value={ color.toRgb().r } onChange={ this.handleChange } />
<EditableInput is="Input" label="r" value={ this.props.rgb.r } onChange={ this.handleChange } />
</div>
<div is="field">
<EditableInput is="Input" label="g" value={ color.toRgb().g } onChange={ this.handleChange } />
<EditableInput is="Input" label="g" value={ this.props.rgb.g } onChange={ this.handleChange } />
</div>
<div is="field">
<EditableInput is="Input" label="b" value={ color.toRgb().b } onChange={ this.handleChange } />
<EditableInput is="Input" label="b" value={ this.props.rgb.b } onChange={ this.handleChange } />
</div>
<div is="field">
<EditableInput is="Input" label="a" value={ this.props.a } onChange={ this.handleChange } />
<EditableInput is="Input" label="a" value={ this.props.rgb.a } onChange={ this.handleChange } />
</div>
</div>;
} else if (this.state.view === 'hsl') {
fields = <div is="fields">
<div is="field">
<EditableInput is="Input" label="h" value={ color.toHsl().h } onChange={ this.handleChange } />
<EditableInput is="Input" label="h" value={ Math.round(this.props.hsl.h) } onChange={ this.handleChange } />
</div>
<div is="field">
<EditableInput is="Input" label="s" value={ Math.round(color.toHsl().s * 100) + '%' } onChange={ this.handleChange } />
<EditableInput is="Input" label="s" value={ Math.round(this.props.hsl.s * 100) + '%' } onChange={ this.handleChange } />
</div>
<div is="field">
<EditableInput is="Input" label="l" value={ Math.round(color.toHsl().l * 100) + '%' } onChange={ this.handleChange } />
<EditableInput is="Input" label="l" value={ Math.round(this.props.hsl.l * 100) + '%' } onChange={ this.handleChange } />
</div>
<div is="field">
<EditableInput is="Input" label="a" value={ this.props.a } onChange={ this.handleChange } />
<EditableInput is="Input" label="a" value={ this.props.hsl.a } onChange={ this.handleChange } />
</div>
</div>;
}
Expand Down
7 changes: 3 additions & 4 deletions src/components/common/Alpha.jsx
View file
Expand Up @@ -15,7 +15,6 @@ class Alpha extends ReactCSS.Component {
}

classes() {
var rgb = tinycolor(this.props).toRgb();
return {
'default': {
alpha: {
Expand All @@ -28,7 +27,7 @@ class Alpha extends ReactCSS.Component {
},
gradient: {
Absolute: '0 0 0 0',
background: 'linear-gradient(to right, rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 0) 0%, rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 1) 100%)',
background: 'linear-gradient(to right, rgba(' + this.props.rgb.r + ', ' + this.props.rgb.g + ', ' + this.props.rgb.b + ', 0) 0%, rgba(' + this.props.rgb.r + ', ' + this.props.rgb.g + ', ' + this.props.rgb.b + ', 1) 100%)',
boxShadow: this.props.shadow,
borderRadius: this.props.radius,
},
Expand All @@ -41,7 +40,7 @@ class Alpha extends ReactCSS.Component {
pointer: {
zIndex: '2',
position: 'absolute',
left: this.props.a * 100 + '%',
left: this.props.rgb.a * 100 + '%',
},
slider: {
width: '4px',
Expand All @@ -63,7 +62,7 @@ class Alpha extends ReactCSS.Component {
if (left >= 0 && left <= containerWidth) {
var percent = Math.round(left * 100 / containerWidth) / 100;
if (this.props.a !== percent) {
this.props.onChange({ a: percent });
this.props.onChange({ h: this.props.hsl.h, s: this.props.hsl.s, l: this.props.hsl.l, a: percent });
}
}
}
Expand Down
12 changes: 6 additions & 6 deletions src/components/common/Hue.jsx
View file
Expand Up @@ -28,7 +28,7 @@ class Hue extends ReactCSS.Component {
pointer: {
zIndex: '2',
position: 'absolute',
left: (this.props.value * 100) / 360 + '%',
left: (this.props.hsl.h * 100) / 360 + '%',
},
slider: {
marginTop: '1px',
Expand All @@ -46,7 +46,7 @@ class Hue extends ReactCSS.Component {
},
pointer: {
left: '0',
top: -((this.props.value * 100) / 360) + 100 + '%',
top: -((this.props.hsl.h * 100) / 360) + 100 + '%',
},
},
};
Expand All @@ -63,16 +63,16 @@ class Hue extends ReactCSS.Component {
if (top > 0 && top < containerHeight) {
var percent = -(top * 100 / containerHeight) + 100;
var h = (360 * percent / 100);
if (this.props.value !== h) {
this.props.onChange({ h: h });
if (this.props.hsl.h !== h) {
this.props.onChange({ h: h, s: this.props.hsl.s, l: this.props.hsl.l });
}
}
} else {
if (left > 0 && left < containerWidth) {
var percent = left * 100 / containerWidth;
var h = (360 * percent / 100);
if (this.props.value !== h) {
this.props.onChange({ h: h });
if (this.props.hsl.h !== h) {
this.props.onChange({ h: h, s: this.props.hsl.s, l: this.props.hsl.l });
}
}
}
Expand Down

0 comments on commit ab389d0

Please sign in to comment.