mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-15 13:03:55 +02:00
Code Issues Packages Projects Releases Wiki Activity

Allowing for multiple colours and properly handling old values.

Browse Source
This commit is contained in:
MrOnosa
2020-10-10 12:25:03 -05:00
parent 2bcc0beec7
commit c9a89e5dc3
4 changed files with 193 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/widgets/Background.jsx
View File

@@ -3,20 +3,29 @@ import * as Constants from '../../modules/constants';
export default class Background extends React.PureComponent {
gradientStyleBuilder(gradientSettings) {
const {type, angle, gradient } = gradientSettings;
const stepStyles = gradient.map(g => ` ${g.colour} ${g.stop}%`).join();
return `background: ${gradient[0].colour}; background: ${type}-gradient(${angle}deg,${stepStyles})`;
const { type, angle, gradient } = gradientSettings;
let style = `background: ${gradient[0].colour};`;
if (gradient.length > 1) {
//Note: Append the gradient for additional browser support.
const stepStyles = gradient.map(g => ` ${g.colour} ${g.stop}%`).join();
style += ` background: ${type}-gradient(${angle}deg,${stepStyles})`;
}
return style;
}
setBackground(url, colour, credit) { // Sets the attributes of the background image
let gradientSettings;
let gradientSettings = '';
try {
gradientSettings = JSON.parse(colour);
} catch (e) {
//colour use to be simply a hex colour or a NULL value before it was a JSON object. This automatically upgrades the hex colour value to the new standard. (NULL would not trigger an exception)
gradientSettings = {"type": "linear", "angle": "0", "gradient": [{"colour": colour, "stop": 0}, {"colour": colour, "stop": 100}]};
const hexColorRegex = /#[0-9a-fA-F]{6}/s;
if (hexColorRegex.exec(colour)) {
//colour use to be simply a hex colour or a NULL value before it was a JSON object. This automatically upgrades the hex colour value to the new standard. (NULL would not trigger an exception)
gradientSettings = { "type": "linear", "angle": "180", "gradient": [{ "colour": colour, "stop": 0 }] };
localStorage.setItem('customBackgroundColour', JSON.stringify(gradientSettings));
}
}
const background = colour ? this.gradientStyleBuilder(gradientSettings) : `background-image: url(${url});`;
const background = typeof gradientSettings === 'object' && gradientSettings !== null ? this.gradientStyleBuilder(gradientSettings) : `background-image: url(${url});`;
document.querySelector('#backgroundImage').setAttribute(
'style',