- From: Tommy Hodgins via GitHub <sysbot+gh@w3.org>
- Date: Thu, 28 Dec 2017 17:44:12 +0000
- To: public-css-archive@w3.org
@Nadya678 I've got a simple ES6 definition of this behaviour [here](https://gist.github.com/tomhodgins/a106d938cbab066f1c9621aed1dde883#file-auto-expand-js):
```javascript
// Auto Expand
let autoExpand = (selector, option) => {
let styles = ''
let count = 0
let features = {
width: tag => {
let computed = getComputedStyle(tag)
tag.style.width = 'inherit'
let width = parseInt(computed.getPropertyValue('border-left-width'), 10)
+ parseInt(computed.getPropertyValue('padding-left'), 10)
+ tag.scrollWidth
+ parseInt(computed.getPropertyValue('padding-right'), 10)
+ parseInt(computed.getPropertyValue('border-right-width'), 10)
tag.style.width = ''
return `width: ${width}px;`
},
height: tag => {
let computed = getComputedStyle(tag)
tag.style.height = 'inherit'
let height = parseInt(computed.getPropertyValue('border-top-width'), 10)
+ parseInt(computed.getPropertyValue('padding-top'), 10)
+ tag.scrollHeight
+ parseInt(computed.getPropertyValue('padding-bottom'), 10)
+ parseInt(computed.getPropertyValue('border-bottom-width'), 10)
tag.style.height = ''
return `height: ${height}px;`
},
both: tag => {
return features.width(tag) + features.height(tag)
}
}
document.querySelectorAll(selector).forEach(tag => {
let attr = selector.replace(/\W/g, '')
let evaluated = features[option](tag)
tag.setAttribute(`data-${attr}`, count)
styles += `${selector}[data-${attr}="${count}"] { ${evaluated} }\n`
count++
})
return styles
}
```
Here's a live demo: https://codepen.io/tomhodgins/pen/baqMWL
And I also just updated a similar ES5 function for doing the same thing [here](https://github.com/tomhodgins/reprocss/blob/master/mixins/auto-expand.js) today :D
--
GitHub Notification of comment by tomhodgins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2141#issuecomment-354326700 using your GitHub account
Received on Thursday, 28 December 2017 17:44:14 UTC