@rrebuffo, it depends on the version of Caspar you are building for.
2.7.0 and 2.1.0 Beta use Chromium 33.0.1750.170 which means you need to do everything with JS. We can talk more if this is the case.
2.2.0 uses Chromium 63.0.3239.132 (Found here), which gives you CSS Flexbox.
Here is a CodePen with the example.
You will need to use JavaScript’s window.getComputedStyle method to get the current width of the element then set it’s style to be that width.
Or you take this neat little helper function below and just watch the magic happen!
Simply call getElemComputedStyles() with an CSS selector or DOM element and then pass an array or string of attributes you want back and any operations you want done with them.
// Checks for spaces in a value and if they are found, splits and adds each value together
// @param {string} value - The string to check for spaces or return as a number
// @return {number} - The sum of the value passed in.
function addStyleValues(value, width, height) {
if(value.indexOf(' ') !== -1) {
const values = value.split(' ');
value = values.reduce((acc, val, index) => {
if(index % 2 !== 0 && !width) return acc;
if(index % 2 === 0 && !height) return acc;
acc = values.length === 2 ? acc + (Number(val)* 2) : acc + Number(val);
return acc;
}, 0);
return value;
} else {
return Number(value);
}
}
// Takes an element and returns the computed styles as a total or object of all the values
// @param {string || DOM node} elem - The elemnt to get the style from
// @param {string || array} attrs - The attribute/s that need to have their values computed
// @param {object} direction - The direction to compute. width or height
// @param {string} operation - The operation to perform on the attribute values
function getElemComputedStyles({elem, attrs, direction, ops}) {
if(!elem || !attrs) throw 'Missing element or attributes for getElemComputedStyles';
if(typeof elem === 'string') elem = document.querySelector(elem);
if(!direction) direction = {width: true, height: false};
const compStyles = window.getComputedStyle(elem);
try {
if(Array.isArray(attrs)) {
return attrs.reduce((acc, prop, i) => {
const rawValue = compStyles.getPropertyValue(prop).replace(/px/g, '');
const value = addStyleValues(rawValue, direction.width, direction.height);
if(isNaN(value)) throw new Error(`${prop} could not be used`);
const operation = Array.isArray(ops) && ops[i]
? ops[i] : ops;
switch(operation) {
case 'add':
default:
acc.total += value;
break;
case 'subtract':
acc.total -= value;
break;
case 'multiple':
acc.total *= value;
break;
case 'divide':
acc.total /= value;
break;
case 'all':
acc[prop] = value
break;
}
return acc;
}, {total: 0});
} else {
return addStyleValues(compStyles.getPropertyValue(attrs).replace(/px/g, ''), direction.width, direction.height);
}
} catch (error) {
return console.error(error);
}
}
Here is an example:
Say we have this DOM element.
<div class="someClass"></div>
And we wanted to know it’s width and padding total; which on the CSS file would be 200px.
.someClass {
width: 100px;
padding: 100px;
}
Trying document.querySelector('.someClass').style.width will return undefined so instead use.
const widthAndPaddingTotal = getElemComputedStyles({
elem: '.someClass',
attrs: ['width', 'padding'],
// This tells the helper, for any properties that return two values,
// like padding (100px 100px), use either the height, width or both.
direction: {width: true, height: false},
ops: 'add'
});
widthAndPaddingTotal will now equal the width of the object plus the padding on the left and the right.
Please let me know if that helps!
at this point is a proper frankenstein.