Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add mixin for selecting elder siblings
  • Loading branch information
tomhodgins committed Sep 11, 2017
1 parent 73d1a9b commit c8da35e
Show file tree
Hide file tree
Showing 26 changed files with 186 additions and 56 deletions.
22 changes: 22 additions & 0 deletions README.md
Expand Up @@ -405,4 +405,26 @@ ancestor('#start', '.target', `border-color: lime`)

- [Ancestor Selector Mixin Demo](https://tomhodgins.github.io/reprocss/test/ancestor-selector-mixin.html)

### Elder Selector Mixin

This mixin lets CSS authors apply styles to all elder siblings of elements matching a CSS selector.

#### syntax

```javascript
elder('.target', 'background: lime;')
```

### output

```css
[data-elder-unique="0"] {
background: lime;
}
```

## demo

- [Elder Selector Mixin Demo](https://tomhodgins.github.io/reprocss/test/elder-selector-mixin.html)

> Made with ♥ by [@innovati](http://twitter.com/innovati)
47 changes: 33 additions & 14 deletions index.html
Expand Up @@ -181,10 +181,7 @@ <h2 id=demos>Demos</h2>
<li><a href=https://codepen.io/tomhodgins/pen/MoQmdY>Regex Search on Attribute Value</a>
<li><a href=https://codepen.io/tomhodgins/pen/MoQmLY>Cursor Tracking</a>
<li><a href=https://codepen.io/tomhodgins/pen/awqWNz>Scalable Iframe</a>
</ul>

<ul>
<li><a href=https://codepen.io/search/pens/?q=reprocss>View reproCSS demos on CodePen</a>
<li><strong><a href=https://codepen.io/search/pens/?q=reprocss>View reproCSS demos on CodePen</a></strong>
</ul>


Expand Down Expand Up @@ -239,7 +236,7 @@ <h3 id=aspect-ration-mixin>Aspect Ratio Mixin</h3>

<h4>syntax</h4>

<pre>${aspectRatio('iframe', 16/9)}</pre>
<pre>aspectRatio('iframe', 16/9)</pre>

<h4>output</h4>

Expand All @@ -261,9 +258,9 @@ <h3 id=xpath-selector-mixin>XPath Select Mixin</h3>

<h4>syntax</h4>

<pre>${xpath('//*', `
<pre>xpath('//*', `
border: 1px solid red;
`)}</pre>
`)</pre>

<h4>outpue</h4>

Expand All @@ -290,7 +287,7 @@ <h3 id=auto-expand-mixin>Auto Expand Mixin</h3>

<h4>syntax</h4>

<pre>${autoExpand('textarea', 'height')}</pre>
<pre>autoExpand('textarea', 'height')</pre>

<h4>output</h4>

Expand All @@ -309,7 +306,7 @@ <h3 id=container-queries-mixin>Container Queries Mixin</h3>

<h4>syntax</h4>

<pre>${container('div', 'this.offsetWidth > 500', 'span', 'background: lime;')}</pre>
<pre>container('div', 'this.offsetWidth > 500', 'span', 'background: lime;')</pre>

<h4>output</h4>

Expand All @@ -330,11 +327,11 @@ <h3 id=scoped-eval-mixin>Scoped Eval() Mixin</h3>

<h4>syntax</h4>

<pre>${scoped('div', `
<pre>scoped('div', `
margin: 1em;
background: lime;
height: eval(this.offsetWidth / (16/9))px;
`)}</pre>
`)</pre>

<h4>output</h4>

Expand All @@ -357,7 +354,7 @@ <h3 id=parent-selector-mixin>Parent Selector Mixin</h3>

<h4>syntax</h4>

<pre>${parent('li', 'border: 1px solid red;')}</pre>
<pre>parent('li', 'border: 1px solid red;')</pre>

<h4>output</h4>

Expand All @@ -378,7 +375,7 @@ <h3 id=prev-selector-mixin>Prev Selector Mixin</h3>

<h4>syntax</h4>

<pre>${prev('li:nth-of-type(2)', 'background: lime;')}</pre>
<pre>prev('li:nth-of-type(2)', 'background: lime;')</pre>

<h4>output</h4>

Expand All @@ -399,7 +396,7 @@ <h3 id=closest-selector-mixin>Closest Selector Mixin</h3>

<h4>syntax</h4>

<pre>${closest('#start', '.target', `border-color: lime`)}</pre>
<pre>closest('#start', '.target', `border-color: lime`)</pre>

<h4>output</h4>

Expand All @@ -412,6 +409,7 @@ <h4>demo</h4>

<ul>
<li><a href=https://tomhodgins.github.io/reprocss/test/closest-selector-mixin.html>Closest Selector Mixin Demo</a>
</ul>

<h3 id=ancestor-selector-mixin>Ancestor Selector Mixin</h3>

Expand All @@ -432,5 +430,26 @@ <h4>demo</h4>

<ul>
<li><a href=https://tomhodgins.github.io/reprocss/test/ancestor-selector-mixin.html>Ancestor Selector Mixin Demo</a>
</ul>

<h3 id=elder-selector-mixin>Elder Selector Mixin</h3>

<p>This mixin lets CSS authors apply styles to all elder siblings of elements matching a CSS selector.</p>

<h4>syntax</h4>

<pre>elder('.target', 'background: lime;')</pre>

<h4>output</h4>

<pre>[data-elder-unique="0"] {
background: lime;
}</pre>

<h4>demo</h4>

<ul>
<li><a href=https://tomhodgins.github.io/reprocss/test/elder-selector-mixin.html>Elder Selector Mixin Demo</a>
</ul>

<footer>Made with &hearts; by <a href=http://twitter.com/innovati>@innovati</a></footer>
2 changes: 1 addition & 1 deletion min/ancestor-selector.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion min/aspect-ratio.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion min/auto-expand.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion min/closest-selector.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion min/container-queries.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions min/elder-selector.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion min/parent-selector.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion min/prev-selector.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion min/reprocss.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion min/scoped-eval.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion min/xpath-selector.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions minify.sh
Expand Up @@ -6,14 +6,14 @@ rm ./min/* -v;

# Minify reproCSS
echo "Minifying reproCSS...";
echo "/* reproCSS / Tommy Hodgins / MIT License / version 0.0.8 */" > ./min/reprocss.min.js;
echo "/* reproCSS / Tommy Hodgins / MIT License / version 0.0.9 */" > ./min/reprocss.min.js;
uglifyjs reprocss.js >> ./min/reprocss.min.js;

# Minify Mixins
echo "Minifying mixins...";
cd mixins;
for f in *.js;
do
echo "/* ${f%.*} / Tommy Hodgins / MIT License / version 0.0.8 */" > ../min/"${f%.*}.min.js";
echo "/* ${f%.*} / Tommy Hodgins / MIT License / version 0.0.9 */" > ../min/"${f%.*}.min.js";
uglifyjs ./"$f" >> ../min/"${f%.*}.min.js";
done
8 changes: 4 additions & 4 deletions mixins/ancestor-selector.js
@@ -1,17 +1,17 @@
/*
# Ancestor Selector Mixin for reproCSS
## version 0.0.8
## version 0.0.9
This mixin lets CSS authors apply styles to all ancestor elements matching a CSS selector to another element matching a given CSS selector. You can use this to style all matching ancestors.
### Syntax
ancestor(ancestor, selector, rule)
ancestor(selector, ancestor, rule)
- `selector` is a CSS selector
- `ancestor` is a CSS selector
- `selector` is a comma-separated string containing one or more CSS selectors
- `rule` is a semicolon-separated string containing one or more CSS declarations
- `rule` is one or more CSS declarations separated by semicolons
### Example
Expand Down
6 changes: 3 additions & 3 deletions mixins/aspect-ratio.js
@@ -1,16 +1,16 @@
/*
# Aspect Ratio Mixin for reproCSS
## version 0.0.8
## version 0.0.9
Define a height for HTML elements based on the element's width and a supplied aspect ratio.
### Syntax
aspectRatio(selector, ratio)
- `selector` is a comma-separated string containing one or more CSS selectors
- `ratio` is a number expressed as `width/height` or a number
- `selector` is a CSS selector
- `ratio` is a ratio expressed as `width/height` or a number
### Example
Expand Down
4 changes: 2 additions & 2 deletions mixins/auto-expand.js
@@ -1,15 +1,15 @@
/*
# AutoExpand Mixin for reproCSS
## version 0.0.8
## version 0.0.9
Automatically expand an HTML element's `width` or `height` to match its `scrollWidth`, `scrollHeight`, or both.
### Syntax
autoExpand(selector, direction)
- `selector` is a comma-separated string containing one or more CSS selectors
- `selector` is a CSS selector
- `direction` is a string matching `width`, `height`, or `both`
### Example
Expand Down
6 changes: 3 additions & 3 deletions mixins/closest-selector.js
@@ -1,17 +1,17 @@
/*
# Closest Selector Mixin for reproCSS
## version 0.0.8
## version 0.0.9
This mixin lets CSS authors apply styles to the nearest element matching a CSS selector to another element matching a given CSS selector. You can use this to find the nearest matching ancestor.
### Syntax
closest(selector, ancestor, rule)
- `selector` is a comma-separated string containing one or more CSS selectors
- `selector` is a CSS selector
- `ancestor` is a CSS selector
- `rule` is a semicolon-separated string containing one or more CSS declarations
- `rule` is one or more CSS declarations separated by semicolons
### Example
Expand Down
10 changes: 5 additions & 5 deletions mixins/container-queries.js
@@ -1,18 +1,18 @@
/*
# Container Queries Mixin for reproCSS
## version 0.0.8
## version 0.0.9
Define a 'container' using a CSS selector, run a JavaScript test on matching HTML elements, and apply CSS styles to the container or its child elements if the test resolves `true`.
### Syntax
container(selector, test, childSelector, rule)
- `selector` is a comma-separated string containing one or more CSS selectors
- `test` is a JavaScript test that should evaluate to `true` or `false`
- `childSelector` is a comma-separated string containing one or more CSS selectors
- `rule` is a semicolon-separated string containing one or more CSS declarations
- `selector` is a CSS selector
- `test` is a JavaScript test that evaluates to `true` or `false`
- `childSelector` is a CSS selector
- `rule` is one or more CSS declarations separated by semicolons
### Example
Expand Down
64 changes: 64 additions & 0 deletions mixins/elder-selector.js
@@ -0,0 +1,64 @@
/*
# Elder Selector Mixin for reproCSS
## version 0.0.9
This mixin lets CSS authors apply styles to all elder siblings of elements matching a CSS selector.
### Syntax
elder(selector, rule)
- `selector` is a CSS selector
- `rule` is one or more CSS declarations separated by semicolons
### Example
elder('.target', 'background: lime')
- https://github.com/tomhodgins/reprocss
Author: Tommy Hodgins
License: MIT
*/

function elder(selector, rule) {

var tag = document.querySelectorAll(selector)
var style = ''
var count = 0

for (var i=0; i<tag.length; i++) {

var attr = selector.replace(/\W+/g, '')
var sibling = tag[i].parentNode.getElementsByTagName('*')
var tagIndex= [].indexOf.call(sibling, tag[i])

for (var j=0; j<sibling.length; j++) {

var siblingIndex = [].indexOf.call(sibling, sibling[j])

if (siblingIndex < tagIndex) {

sibling[j].setAttribute('data-elder-' + attr, count)

style += '\n[data-elder-' + attr + '="' + count + '"] {\n'
+ ' ' + rule + '\n'
+ '}\n'
count++

} else {

sibling[j].setAttribute('data-elder-' + attr, '')

}

}

}

return style

}

0 comments on commit c8da35e

Please sign in to comment.