`;
// Loop array to generate input fields
STATUS_SETTINGS_FIELDS.forEach(field => {
html += '
';
if (field.inputType === "checkbox") {
html += ``;
} else {
// Standard structure for input/select
html += ``;
if (field.inputType === "select") {
html += `";
} else {
// Text, Number and Color
html += ``;
}
}
html += "
";
});
// Close structure, add preview divs and buttons
html += `
Live preview
Save this ID or paste one you already have to sync across other devices
By syncing, your UI preferences and this anonymous ID are securely stored on the cloud. No personal Libib data is collected.
Read Privacy Policy.
`;
return html;
};
const getJSONConfigFromGM = async () => {
let JSONConfig = {};
for (const item of STATUS_SETTINGS_FIELDS)
JSONConfig[item.id] = await GM.getValue(item.id, item.default);
return JSONConfig;
}
const setGMFromJSONConfig = async (JSONConfig) => {
if (JSONConfig == null) return;
for (const item of STATUS_SETTINGS_FIELDS)
await GM.setValue(item.id, JSONConfig[item.id] ?? item.default);
}
const getJSONConfigFromInputs = () => {
const JSONConfig = {};
STATUS_SETTINGS_FIELDS.forEach( item => {
if(item.inputType != "checkbox")
JSONConfig[item.id] = document.getElementById(item.inputId).value;
else
JSONConfig[item.id] = document.getElementById(item.inputId).checked;
});
return JSONConfig;
}
const setInputValuesFromGM = async () => {
for (const item of STATUS_SETTINGS_FIELDS) {
if(item.inputType != "checkbox")
document.getElementById(item.inputId).value = await GM.getValue(item.id, item.default);
else
document.getElementById(item.inputId).checked = await GM.getValue(item.id, item.default);
}
}
const setInputValuesFromJSONConfig = (JSONConfig) => {
if (JSONConfig == null) return;
for (const item of STATUS_SETTINGS_FIELDS) {
if(item.inputType != "checkbox")
document.getElementById(item.inputId).value = JSONConfig[item.id] ?? item.default;
else
document.getElementById(item.inputId).checked = JSONConfig[item.id] ?? item.default;
}
}
// Geretate CSS based on saved settings
const generateCSS = async (JSONConfig, preview = false) => {
if (JSONConfig == null) JSONConfig = await getJSONConfigFromGM();
const noBlurOnHover = JSONConfig.noBlurOnHover;
// Set array with states and associated colors
const statuses = [
{ name: 'completed', color: JSONConfig.colorCompleted },
{ name: 'in-progress', color: JSONConfig.colorProgress },
{ name: 'abandoned', color: JSONConfig.colorAbandoned },
{ name: 'not-begun', color: JSONConfig.colorNotBegun }
];
let cssStyle = "";
if(!preview)
cssStyle += scriptCssStyle;
// Open wrapper
cssStyle += preview ? '.status-settings-preview {' : '#library-items-wrapper {';
// Make libib buttons still clickable
cssStyle += `
.quick-edit-link{
z-index: 10;
}
.quick-blur-link{
position: absolute;
height: 24px;
width: 24px;
top: 5px;
left: 5px;
border: none;
background-color: #fff;
background-image: url(${STATUS_SETTINGS_ICONS.crossedEye});
background-repeat: no-repeat;
background-position: center;
background-size: 70%;
opacity: 0;
border-radius: 100px;
transition: all 0.3s ease-in-out;
cursor: pointer;
text-indent: -99999px;
z-index: 10;
&.blurred {
background-image: url(${STATUS_SETTINGS_ICONS.eye});
}
}
.item.cover:hover .quick-blur-link {
opacity: 1;
}
.batch-select{
z-index: 10;
}
.cover-blur{
overflow: hidden;
}
.cover-blur img{
filter: blur(8px);
}`;
// Disable blur on cover hover
if(noBlurOnHover){
cssStyle += `
.cover-blur:hover img{
filter: blur(0px);
}`;
}
// Set the save, close and reset buttons color to white id dark mode
cssStyle += `
body.dark #libib_status_config_resetLink,body.dark #libib_status_config_saveBtn,body.dark #libib_status_config_closeBtn{
color:white!important
}`;
// --- TRIANGLE STYLE ---
if (JSONConfig.type == "Triangle") {
// Mapping triangle positions and colors
const positionSettings = {
"Top left": {
position: "top: 0; left: 0; bottom: auto; right: auto;",
colorShorthand: (color) => `border-color: ${color} transparent transparent ${color};`
},
"Top right": {
position: "top: 0; right: 0; bottom: auto; left: auto;",
colorShorthand: (color) => `border-color: ${color} ${color} transparent transparent;`
},
"Bottom right": {
position: "bottom: 0; right: 0; top: auto; left: auto;",
colorShorthand: (color) => `border-color: transparent ${color} ${color} transparent;`
},
"Bottom left": {
position: "bottom: 0; left: 0; top: auto; right: auto;",
colorShorthand: (color) => `border-color: transparent transparent ${color} ${color};`
}
};
// Get position from settings
const currentPosition = positionSettings[JSONConfig.trianglePosition];
// Set triangle position
cssStyle += `
.cover .cover-wrapper::after {
${currentPosition.position}
}
`;
// Dynamically create color classes
statuses.forEach(status => {
cssStyle += `
.cover .${status.name}.cover-wrapper::after {
${currentPosition.colorShorthand(status.color)}
}
`;
});
// --- BORDER STYLE ---
} else if (JSONConfig.type == "Border") {
// The box-shadow prevents the click on the item, so it needs to be hidden on hover
cssStyle += `
.cover-wrapper {
--shadow-y: ${JSONConfig.borderPosition == "Top" ? '' : '-'}${JSONConfig.borderHeight}px;
}
.cover-wrapper:hover::after {
display:none!important;
--shadow-y: 0px;
transition: all 0.25s;
transition-behavior: allow-discrete;
}`;
cssStyle += `
.cover .cover-wrapper::before, .cover .cover-wrapper::after {
width: 100%;
height: 100%;
border-radius: 4px;
display: block;
border: none;
z-index: 0;
}
`;
statuses.forEach(status => {
cssStyle += `
.cover .${status.name}.cover-wrapper::after {
box-shadow: inset 0px var(--shadow-y) ${status.color};
}
`;
});
}
// Close wrapper
cssStyle += '}';
return cssStyle;
};
// Create the element to open the settings, it needs to be an tag inside an