From c8da35e8ec50f6edd4dbde663a44887116e8cfef Mon Sep 17 00:00:00 2001 From: Tom Hodgins Date: Sun, 10 Sep 2017 22:35:36 -0400 Subject: [PATCH] Add mixin for selecting elder siblings --- README.md | 22 ++++++++++++ index.html | 47 +++++++++++++++++-------- min/ancestor-selector.min.js | 2 +- min/aspect-ratio.min.js | 2 +- min/auto-expand.min.js | 2 +- min/closest-selector.min.js | 2 +- min/container-queries.min.js | 2 +- min/elder-selector.min.js | 2 ++ min/parent-selector.min.js | 2 +- min/prev-selector.min.js | 2 +- min/reprocss.min.js | 2 +- min/scoped-eval.min.js | 2 +- min/xpath-selector.min.js | 2 +- minify.sh | 4 +-- mixins/ancestor-selector.js | 8 ++--- mixins/aspect-ratio.js | 6 ++-- mixins/auto-expand.js | 4 +-- mixins/closest-selector.js | 6 ++-- mixins/container-queries.js | 10 +++--- mixins/elder-selector.js | 64 ++++++++++++++++++++++++++++++++++ mixins/parent-selector.js | 6 ++-- mixins/prev-selector.js | 6 ++-- mixins/scoped-eval.js | 6 ++-- mixins/xpath-selector.js | 6 ++-- reprocss.js | 2 +- test/elder-selector-mixin.html | 23 ++++++++++++ 26 files changed, 186 insertions(+), 56 deletions(-) create mode 100644 min/elder-selector.min.js create mode 100644 mixins/elder-selector.js create mode 100644 test/elder-selector-mixin.html diff --git a/README.md b/README.md index e51161c..e6e6e1f 100755 --- a/README.md +++ b/README.md @@ -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) \ No newline at end of file diff --git a/index.html b/index.html index 64ea97d..6751a64 100755 --- a/index.html +++ b/index.html @@ -181,10 +181,7 @@

Demos

  • Regex Search on Attribute Value
  • Cursor Tracking
  • Scalable Iframe - - - @@ -239,7 +236,7 @@

    Aspect Ratio Mixin

    syntax

    -
    ${aspectRatio('iframe', 16/9)}
    +
    aspectRatio('iframe', 16/9)

    output

    @@ -261,9 +258,9 @@

    XPath Select Mixin

    syntax

    -
    ${xpath('//*', `
+
    xpath('//*', `
   border: 1px solid red;
-`)}
    
+`)

    outpue

    @@ -290,7 +287,7 @@

    Auto Expand Mixin

    syntax

    -
    ${autoExpand('textarea', 'height')}
    +
    autoExpand('textarea', 'height')

    output

    @@ -309,7 +306,7 @@

    Container Queries Mixin

    syntax

    -
    ${container('div', 'this.offsetWidth > 500', 'span', 'background: lime;')}
    +
    container('div', 'this.offsetWidth > 500', 'span', 'background: lime;')

    output

    @@ -330,11 +327,11 @@

    Scoped Eval() Mixin

    syntax

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

    output

    @@ -357,7 +354,7 @@

    Parent Selector Mixin

    syntax

    -
    ${parent('li', 'border: 1px solid red;')}
    +
    parent('li', 'border: 1px solid red;')

    output

    @@ -378,7 +375,7 @@

    Prev Selector Mixin

    syntax

    -
    ${prev('li:nth-of-type(2)', 'background: lime;')}
    +
    prev('li:nth-of-type(2)', 'background: lime;')

    output

    @@ -399,7 +396,7 @@

    Closest Selector Mixin

    syntax

    -
    ${closest('#start', '.target', `border-color: lime`)}
    +
    closest('#start', '.target', `border-color: lime`)

    output

    @@ -412,6 +409,7 @@

    demo

    Ancestor Selector Mixin

    @@ -432,5 +430,26 @@

    demo

    + +

    Elder Selector Mixin

    + +

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

    + +

    syntax

    + +
    elder('.target', 'background: lime;')
    + +

    output

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

    demo

    + + \ No newline at end of file diff --git a/min/ancestor-selector.min.js b/min/ancestor-selector.min.js index 86c58ec..9e81b55 100644 --- a/min/ancestor-selector.min.js +++ b/min/ancestor-selector.min.js @@ -1,2 +1,2 @@ -/* ancestor-selector / Tommy Hodgins / MIT License / version 0.0.8 */ +/* ancestor-selector / Tommy Hodgins / MIT License / version 0.0.9 */ function ancestor(selector,ancestor,rule){var tag=document.querySelectorAll(ancestor);var style="";var count=0;for(var i=0;i ./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 @@ -14,6 +14,6 @@ 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 \ No newline at end of file diff --git a/mixins/ancestor-selector.js b/mixins/ancestor-selector.js index 1719cfa..7d14c15 100644 --- a/mixins/ancestor-selector.js +++ b/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 diff --git a/mixins/aspect-ratio.js b/mixins/aspect-ratio.js index 2194766..59d65ac 100755 --- a/mixins/aspect-ratio.js +++ b/mixins/aspect-ratio.js @@ -1,7 +1,7 @@ /* # 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. @@ -9,8 +9,8 @@ Define a height for HTML elements based on the element's width and a supplied as 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 diff --git a/mixins/auto-expand.js b/mixins/auto-expand.js index c22ab84..6660671 100755 --- a/mixins/auto-expand.js +++ b/mixins/auto-expand.js @@ -1,7 +1,7 @@ /* # 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. @@ -9,7 +9,7 @@ Automatically expand an HTML element's `width` or `height` to match its `scrollW 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 diff --git a/mixins/closest-selector.js b/mixins/closest-selector.js index 8b6ceff..f522152 100755 --- a/mixins/closest-selector.js +++ b/mixins/closest-selector.js @@ -1,7 +1,7 @@ /* # 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. @@ -9,9 +9,9 @@ This mixin lets CSS authors apply styles to the nearest element matching a CSS s 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 diff --git a/mixins/container-queries.js b/mixins/container-queries.js index eb1f7a5..29e4773 100755 --- a/mixins/container-queries.js +++ b/mixins/container-queries.js @@ -1,7 +1,7 @@ /* # 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`. @@ -9,10 +9,10 @@ Define a 'container' using a CSS selector, run a JavaScript test on matching HTM 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 diff --git a/mixins/elder-selector.js b/mixins/elder-selector.js new file mode 100644 index 0000000..c308663 --- /dev/null +++ b/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` tags and a `process=""` attribute. diff --git a/test/elder-selector-mixin.html b/test/elder-selector-mixin.html new file mode 100644 index 0000000..46bf29d --- /dev/null +++ b/test/elder-selector-mixin.html @@ -0,0 +1,23 @@ + + + +Elder Selector mixin for reproCSS + +

    Elder Selector Mixin Test

    + +
      +
    • item 1 +
    • item 2 +
    • item 3 +
    • item 4 +
    • item 5 +
    + + + + + \ No newline at end of file