console.clear();

// ==================================== width old style
// get element
const oldeWidthEl = document.querySelector('.width-olde');
// get width -> this forces relayout
const oldeWidth = getComputedStyle(oldeWidthEl).width;
// flag to click back to original size
let wide = false;
// add click & change width
oldeWidthEl.addEventListener('click', function() {
	if (!wide) {
		// finding the value here is hard, so we just set a string with an arbituary unit
		oldeWidthEl.style.width = '320px';
		wide = true;
	} else {
		oldeWidthEl.style.width = oldeWidth;
		wide = false;
	}
}, false)

// ======================================= width typed om style
// get element
const typedWidthEl = document.querySelector('.width-typed');
// get width -> does _not_ force relayout \o/
let typedWidth = typedWidthEl.computedStyleMap().get('width');
// add click & change width
typedWidthEl.addEventListener('click', function() {
	// we don't need a flag anymore, number types come with an equals method!
	typedWidth = CSS.px(300).equals(typedWidth) ? CSS.px(320) : CSS.px(300);
	// set value
	this.attributeStyleMap.set('width', typedWidth);
}, false)

// ======================================= transform olde
// get element
const oldeTransformEl = document.querySelector('.transform-olde');
// this returns a matrix and is pretty useless to us
const oldeTransform = getComputedStyle(oldeTransformEl).transform;
// let's update the custom property instead
oldeTransformEl.style.setProperty('--rotate', '15deg');

// ================================== transform typed way
// get element
const typedTransformEl = document.querySelector('.transform-typed');
// get transform -> returns array of all transform values as types
let typedTransform = typedTransformEl.computedStyleMap().get('transform');
// create a new transform
const transform = new CSSTransformValue([
  new CSSRotate(CSS.deg(30)),
  new CSSScale(CSS.number(1.2), CSS.number(1.2))
])
typedTransformEl.attributeStyleMap.set('transform', transform);



console.log('%cOlde width value: ', 'background-color:#E4A834; color: white; padding: 4px; border: 2px solid #B3346C', oldeWidth);
console.log('%cTyped OM width value: ', 'background-color:#B3346C; color: white; padding: 4px; border: 2px solid #E4A834', typedWidth);
console.log('%cOlde transform value: ', 'background-color:#277E9E; color: white; padding: 4px; border: 2px solid #832B76', oldeTransform);
console.log('%cTyped OM transform value: ', 'background-color:#832B76; color: white; padding: 4px; border: 2px solid #277E9E', typedTransform);