├── LICENSE
├── README.md
├── index.html
├── qss.js
└── tests
    ├── element-queries.html
    └── index.html


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Tommy Hodgins
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # QSS
  2 | 
  3 | **A Simple Query Syntax for CSS Element Queries**
  4 | 
  5 | ![](https://i.imgur.com/rntpa7l.png)
  6 | 
  7 | The goal of QSS is to define a simple syntax for specifying element queries by adding a new ending part between a CSS selector list and the block of rules that help define the breakpoints when those rules are to apply.
  8 | 
  9 | Normally in CSS you have something like this:
 10 | 
 11 | ```css
 12 | selectorList { block }
 13 | ```
 14 | 
 15 | We are going to add a new part for our query between the selector list and the block where we will store instructions for when the rule should apply.
 16 | 
 17 | ```css
 18 | selectorList <query> { block }
 19 | ```
 20 | 
 21 | Because this exists as a new part between the selector list and the block of rules, if you have a list of selectors like `h1, h2, h3, h4, h5, h6 {}` you only need to add the query once after the selector list is complete, like `h1, h2, h3, h4, h5, h6 <query> {}` rather than `h1 <query>, h2 <query>, h3 <query>, …`.
 22 | 
 23 | This document describes two different formats for expressing element queries for individual CSS rules, one using an `if`-based structure, and another that uses the `@` symbol to declare when it should apply.
 24 | 
 25 | ## Phrase Formats
 26 | 
 27 | ### 1) if &lt;condition> &lt;comparator> &lt;breakpoint>
 28 | 
 29 | - operator: `if`
 30 | - condition: `width` | `height` | `characters` | `children` | `xscroll` | `yscroll`
 31 | - comparator: `<` | `below` | `under` | `<=` | `max` | `==` | `equals` | `>=` | `min` | `>` | `above` | `over`
 32 | - breakpoint: &lt;number>
 33 | 
 34 | #### Examples
 35 | 
 36 | ```css
 37 | div if width above 500 {}
 38 | ```
 39 | 
 40 | ```css
 41 | input if characters under 1 {}
 42 | ```
 43 | 
 44 | ### 2) @ &lt;comparator> &lt;breakpoint> &lt;condition>
 45 | 
 46 | - operator: `@`
 47 | - comparator: `<` | `below` | `under` | `<=` | `max` | `==` | `equals` | `>=` | `min` | `>` | `above` | `over`
 48 | - breakpoint: &lt;number>
 49 | - condition: `width` | `height` | `characters` | `children` | `xscroll` | `yscroll`
 50 | 
 51 | #### Examples
 52 | 
 53 | ```css
 54 | div @ above 500 width {}
 55 | ```
 56 | 
 57 | ```css
 58 | input @ under 1 characters {}
 59 | ```
 60 | 
 61 | In both phrase formats the whitespace between tokens is optional, this means that if you prefer to think about these as `@above` or `@min` you can express them that way. The following should all equivalent:
 62 | 
 63 | ```css
 64 | div if width >= 500 {}
 65 | div if width >=500 {}
 66 | div if width min 500 {}
 67 | div @min 500 width {}
 68 | div@min500width{}
 69 | div @ >=500 width {}
 70 | ```
 71 | 
 72 | ## How it works
 73 | 
 74 | The queries parsed by QSS would be split into the following pieces:
 75 | 
 76 | - selector list
 77 | - rule block (or stylesheet?)
 78 | - comparator
 79 | - condition
 80 | - breakpoint
 81 | 
 82 | And these could also be used to construct Element Queries for other syntaxes like:
 83 | 
 84 | - [EQCSS](https://github.com/eqcss/eqcss)
 85 | - [Selectory](https://github.com/tomhodgins/cssplus#selectory-a-selector-resolver)
 86 | - and using functions like the [container query mixin](https://gist.github.com/tomhodgins/fc42b334beaafc75a271b1ef7c8e33ee)
 87 | 
 88 | Essentially QSS acts as a syntax to abstract away writing these: [Useful Tests for JS-powered Styling](https://codepen.io/tomhodgins/post/useful-tests-for-js-powered-styling)
 89 | 
 90 | ## Plugin Usage
 91 | 
 92 | This repository contains a working proof of concept of a plugin to parse and read QSS syntax. In order to use this plugin you just need to include QSS on the page where you want it to display:
 93 | 
 94 | ```html
 95 | <script src=qss.js></script>
 96 | ```
 97 | 
 98 | Then you're able to add queries written in QSS syntax to your site using one of the following methods: a `<style>` tag, a `<link>` tag with `type=text/qss` set, or a `<script>` tag with a `type` of `text/qss` either inline or linked externally using a `src=""` attribute:
 99 | 
100 | ```html
101 | <style type="text/qss"></style>
102 | ```
103 | 
104 | ```html
105 | <link type="text/qss" href=stylesheet.qss rel=stylesheet>
106 | ```
107 | 
108 | ```html
109 | <script type="text/qss"></script>
110 | ```
111 | 
112 | ```html
113 | <script type="text/qss" src=stylesheet.qss></script>
114 | ```
115 | 
116 | ## Links
117 | 
118 | - Website: [tomhodgins.github.io/qss/](http://tomhodgins.github.io/qss/)
119 | - Element Query Demo: [tests/element-queries.html](http://tomhodgins.github.io/qss/tests/element-queries.html)
120 | - Test: [tests/](http://tomhodgins.github.io/qss/tests/)
121 | - [QSS Playground](https://codepen.io/tomhodgins/pen/zPzpVR)
122 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <meta charset=utf-8>
  3 | <meta name=viewport content="width=device-width, initial-scale=1">
  4 | <title>QSS - A Simple Query Syntax</title>
  5 | 
  6 | <style>
  7 |   * {
  8 |     box-sizing: border-box;
  9 |     text-rendering: optimizeLegibility;
 10 |     -webkit-font-smoothing: antialiased;
 11 |     -moz-osx-font-smoothing: grayscale;
 12 |     font-kerning: auto;
 13 |   }
 14 |   html {
 15 |     font-size: 12pt;
 16 |     line-height: 1.4;
 17 |     font-weight: 400;
 18 |     font-family: sans-serif;
 19 |   }
 20 |   body {
 21 |     padding: 1em;
 22 |     margin: 0 auto;
 23 |     max-width: 800px;
 24 |   }
 25 |   img {
 26 |     display: block;
 27 |     width: auto;
 28 |     max-width: 100%;
 29 |   }
 30 |   img[src*=svg] {
 31 |     display: block;
 32 |     max-width: 300px;
 33 |     margin: 4em auto 2em;
 34 |   }
 35 |   code,
 36 |   pre,
 37 |   blockquote {
 38 |     padding: .1em .3em;
 39 |     background: rgba(0,0,0,.1);
 40 |   }
 41 |   code,
 42 |   pre {
 43 |     font-family: monospace;
 44 |   }
 45 |   pre {
 46 |     margin: 2em 0;
 47 |     padding: 1em;
 48 |     white-space: pre-wrap;
 49 |   }
 50 |   h1, h2, h3, h4, h5, h6 {
 51 |     margin: 1em 0 .5em 0;
 52 |     line-height: 1.2;
 53 |     letter-spacing: -.02em;
 54 |   }
 55 |   footer {
 56 |     opacity: .4;
 57 |     padding: 2em 0;
 58 |     text-align: center;
 59 |     transition: opacity .2s ease-in-out;
 60 |   }
 61 |   footer:hover {
 62 |     opacity: 1;
 63 |   }
 64 |   p,
 65 |   li {
 66 |     font-size: 14pt;
 67 |   }
 68 |   li {
 69 |     margin: 1em 0;
 70 |   }
 71 |   @media (min-width: 600px) {
 72 |     h1 { font-size: 300%; }
 73 |     h2 { font-size: 200%; }
 74 |     h3 { font-size: 160%; }
 75 |     h4 { font-size: 140%; }
 76 |     h5 { font-size: 120%; }
 77 |     h6 { font-size: 110%; }
 78 |   }
 79 | </style>
 80 | 
 81 | <h1>QSS</h1>
 82 | 
 83 | <p><strong>A Simple Query Syntax for CSS Element Queries</strong></p>
 84 | 
 85 | <img src=https://i.imgur.com/rntpa7l.png>
 86 | 
 87 | <p>The goal of QSS is to define a simple syntax for specifying element queries by adding a new ending part between a CSS selector list and the block of rules that help define the breakpoints when those rules are to apply.</p>
 88 | 
 89 | <p>Normally in CSS you have something like this:</p>
 90 | 
 91 | <pre>selectorList { block }</pre>
 92 | 
 93 | <p>We are going to add a new part for our query between the selector list and the block where we will store instructions for when the rule should apply.</p>
 94 | 
 95 | <pre>selectorList &lt;query> { block }</pre>
 96 | 
 97 | <p>Because this exists as a new part between the selector list and the block of rules, if you have a list of selectors like <code>h1, h2, h3, h4, h5, h6 {}</code> you only need to add the query once after the selector list is complete, like <code>h1, h2, h3, h4, h5, h6 &lt;query> {}</code> rather than <code>h1 &lt;query>, h2 &lt;query>, h3 &lt;query>, …</code>.</p>
 98 | 
 99 | <p>This document describes two different formats for expressing element queries for individual CSS rules, one using an <code>if</code>-based structure, and another that uses the <code>@</code> symbol to declare when it should apply.</p>
100 | 
101 | <h2>Phrase Formats</h2>
102 | 
103 | <h3>1) if &lt;condition> &lt;comparator> &lt;breakpoint></h3>
104 | 
105 | <ul>
106 |   <li>operator: <code>if</code>
107 |   <li>condition: <code>width</code> | <code>height</code> | <code>characters</code> | <code>children</code> | <code>xscroll</code> | <code>yscroll</code>
108 |   <li>comparator: <code><</code> | <code>below</code> | <code>under</code> | <code><=</code> | <code>max</code> | <code>==</code> | <code>equals</code> | <code>>=</code> | <code>min</code> | <code>></code> | <code>above</code> | <code>over</code>
109 |   <li>breakpoint: &lt;number>
110 | </ul>
111 | 
112 | <h4>Examples</h4>
113 | 
114 | <pre>div if width above 500 {}</pre>
115 | 
116 | <pre>input if characters under 1 {}</pre>
117 | 
118 | <h3>2) @ &lt;comparator> &lt;breakpoint> &lt;condition></h3>
119 | 
120 | <ul>
121 |   <li>operator: <code>@</code>
122 |   <li>comparator: <code><</code> | <code>below</code> | <code>under</code> | <code><=</code> | <code>max</code> | <code>==</code> | <code>equals</code> | <code>>=</code> | <code>min</code> | <code>></code> | <code>above</code> | <code>over</code>
123 |   <li>breakpoint: &lt;number>
124 |   <li>condition: <code>width</code> | <code>height</code> | <code>characters</code> | <code>children</code> | <code>xscroll</code> | <code>yscroll</code>
125 | </ul>
126 | 
127 | <h4>Examples</h4>
128 | 
129 | <pre>div @ above 500 width {}</pre>
130 | 
131 | <pre>input @ under 1 characters {}</pre>
132 | 
133 | <p>In both phrase formats the whitespace between tokens is optional, this means that if you prefer to think about these as <code>@above</code> or <code>@min</code> you can express them that way. The following should all equivalent:</p>
134 | 
135 | <pre>div if width >= 500 {}
136 | div if width >=500 {}
137 | div if width min 500 {}
138 | div @min 500 width {}
139 | div@min500width{}
140 | div @ >=500 width {}</pre>
141 | 
142 | <img src=https://i.imgur.com/CO2I9Rw.gif>
143 | 
144 | <h2>How it works</h2>
145 | 
146 | <p>The queries parsed by QSS would be split into the following pieces:</p>
147 | 
148 | <ul>
149 |   <li>selector list
150 |   <li>rule block (or stylesheet?)
151 |   <li>comparator
152 |   <li>condition
153 |   <li>breakpoint
154 | </ul>
155 | 
156 | <p>And these could also be used to construct Element Queries for other syntaxes like:</p>
157 | 
158 | <ul>
159 |   <li><a href=https://github.com/eqcss/eqcss>EQCSS</a>
160 |   <li><a href=https://github.com/tomhodgins/cssplus#selectory-a-selector-resolver>Selectory</a>
161 |   <li>and using functions like the <a href=https://gist.github.com/tomhodgins/fc42b334beaafc75a271b1ef7c8e33ee>container query mixin</a>
162 | </ul>
163 | 
164 | <p>Essentially QSS acts as a syntax to abstract away writing these: <a href=https://codepen.io/tomhodgins/post/useful-tests-for-js-powered-styling>Useful Tests for JS-powered Styling</a></p>
165 | 
166 | <h2>Plugin Usage</h2>
167 | 
168 | <p>This repository contains a working proof of concept of a plugin to parse and read QSS syntax. In order to use this plugin you just need to include QSS on the page where you want it to display:</p>
169 | 
170 | <pre>&lt;script src=qss.js>&lt;/script></pre>
171 | 
172 | <p>Then you're able to add queries written in QSS syntax to your site using one of the following methods: a <code>&lt;style></code> tag, a <code>&lt;link></code> tag with <code>type=text/qss</code> set, or a <code>&lt;script></code> tag with a <code>type</code> of <code>text/qss</code> either inline or linked externally using a <code>src=""</code> attribute:</p>
173 | 
174 | <pre>&lt;style type="text/qss">&lt;/style></pre>
175 | 
176 | <pre>&lt;link type="text/qss" href=stylesheet.qss rel=stylesheet></pre>
177 | 
178 | <pre>&lt;script type="text/qss">&lt;/script></pre>
179 | 
180 | <pre>&lt;script type="text/qss" src=stylesheet.qss>&lt;/script></pre>
181 | 
182 | <h3>Links</h3>
183 | 
184 | <ul>
185 |   <li><strong>Website:</strong> <a href=https://github.com/tomhodgins/qss>github.com/tomhodgins/qss</a>
186 |   <li><strong>Element Query Demo:</strong> <a href=http://tomhodgins.github.io/qss/tests/element-queries.html>/tests/element-queries.html</a>
187 |   <li><strong>Test:</strong> <a href=tests/index.html>tests/</a>
188 |   <li><a href=https://codepen.io/tomhodgins/pen/zPzpVR>QSS Playground</a>
189 | </ul>
190 | 
191 | <footer>Made with &hearts; by <a href=http://twitter.com/innovati>@innovati</a></footer>


--------------------------------------------------------------------------------
/qss.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 | # QSS
  4 | version 1.0.0
  5 | 
  6 | A Simple Query Syntax for CSS Element Queries
  7 | 
  8 | The goal of QSS is to define a simple syntax for specifying element queries by adding a new ending part between a CSS selector list and the block of rules that help define the breakpoints when those rules are to apply.
  9 | 
 10 |     selectorList <query> { block }
 11 | 
 12 | Supported syntax includes:
 13 | 
 14 | - Operators: `if`, `@`
 15 | 
 16 | - Comparators: `<` | `below` | `under` | `<=` | `max` | `==` | `equals` | `>=` | `min` | `>` | `above` | `over`
 17 | 
 18 | - Conditions: condition: `width` | `height` | `characters` | `children` | `xscroll` | `yscroll`
 19 | 
 20 | - Breakpoint: <number>
 21 | 
 22 | There are two different formats for expressing element queries for individual CSS rules, one using an `if`-based structure, and another that uses the `@` symbol to declare when it should apply.
 23 | 
 24 | ## If-formatted Query
 25 | 
 26 |     <selectorList> `if` <condition> <comparator> <breakpoint> { <block> }
 27 | 
 28 | ### Examples
 29 | 
 30 |     div if width above 500 {}
 31 | 
 32 |     input if characters under 1 {}
 33 | 
 34 | ## At-formatted Query
 35 | 
 36 |     <selectorList> `@` <comparator> <breakpoint> <condition> { <block> }
 37 | 
 38 | ### Examples
 39 | 
 40 |     div @ above 500 width {}
 41 | 
 42 |     input @ under 1 characters {}
 43 | 
 44 | ## Info
 45 | 
 46 | - license: MIT
 47 | - author: Tommy Hogins
 48 | - website: https://github.com/tomhodgins/qss
 49 | 
 50 | */
 51 | 
 52 | var qss = {}
 53 | 
 54 | qss.stylesheets = []
 55 | 
 56 | qss.load = function() {
 57 | 
 58 |   qss.count = 0
 59 | 
 60 |   var script = document.getElementsByTagName('script')
 61 | 
 62 |   for (var i=0; i<script.length; i++) {
 63 | 
 64 |     if (script[i].getAttribute('data-qss-read') === null && script[i].type === 'text/qss') {
 65 | 
 66 |       script[i].setAttribute('data-qss-read', qss.count)
 67 | 
 68 |       if (script[i].src) {
 69 | 
 70 |         ;(function() {
 71 | 
 72 |           var xhr = new XMLHttpRequest;
 73 | 
 74 |           xhr.open('GET', script[i].src, true);
 75 |           xhr.send(null);
 76 |           xhr.onload = function() {
 77 | 
 78 |             qss.stylesheets.push(xhr.responseText)
 79 | 
 80 |           }
 81 | 
 82 |         })()
 83 | 
 84 |       } else {
 85 | 
 86 |         qss.stylesheets.push(script[i].innerHTML)
 87 | 
 88 |         qss.count++
 89 | 
 90 |       }
 91 | 
 92 |     }
 93 | 
 94 |   }
 95 | 
 96 |   var link = document.getElementsByTagName('link')
 97 | 
 98 |   for (i=0; i<link.length; i++) {
 99 | 
100 |     if (link[i].getAttribute('data-qss-read') === null && link[i].type === 'text/qss') {
101 | 
102 |       link[i].setAttribute('data-qss-read', qss.count)
103 | 
104 |       if (link[i].href) {
105 | 
106 |         ;(function() {
107 | 
108 |           var xhr = new XMLHttpRequest
109 | 
110 |           xhr.open('GET', link[i].href, true)
111 |           xhr.send(null)
112 |           xhr.onload = function() {
113 | 
114 |             qss.stylesheets.push(xhr.responseText)
115 | 
116 |             qss.count++
117 | 
118 |           }
119 | 
120 |         })()
121 | 
122 |       }
123 | 
124 |     }
125 | 
126 |   }
127 | 
128 |   var style = document.getElementsByTagName('style')
129 | 
130 |   for (i=0; i<style.length; i++) {
131 | 
132 |     if (style[i].getAttribute('data-qss-read') === null && style[i].type === 'text/qss') {
133 | 
134 |       style[i].setAttribute('data-qss-read', qss.count)
135 | 
136 |       qss.stylesheets.push(style[i].innerHTML)
137 | 
138 |       qss.count++
139 | 
140 |     }
141 | 
142 |   }
143 | 
144 |   for (var i=0; i<qss.stylesheets.length; i++) {
145 | 
146 |     qss.process(qss.stylesheets[i], i)
147 | 
148 |   }
149 | 
150 | }
151 | 
152 | qss.process = function(stylesheet, count) {
153 | 
154 |   var tag = document.querySelector('style[data-qss="' + count + '"]')
155 | 
156 |   if (!tag) {
157 |     tag = document.createElement('style')
158 |     tag.setAttribute('data-qss', count)
159 |     document.head.appendChild(tag)
160 |   }
161 | 
162 |   tag.innerHTML = qss.apply(
163 |                     qss.query(
164 |                       qss.parser(
165 |                         qss.lexer(stylesheet))))
166 | 
167 | }
168 | 
169 | qss.lexer = function(code) {
170 | 
171 |   // Split string into characters
172 |   var stream = code.split('')
173 | 
174 |   // Prepare to read characters
175 |   var tokens = []
176 | 
177 |   // Known characters and types
178 |   var syntax = {
179 |     whitespace: ` 	\n⭿`,
180 |     word: `abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ,;.:()[]_"'!`,
181 |     number: `1234567890`,
182 |     block: `{}`,
183 |     punctuation: ``,
184 |     operator: `+-*/=<>^%@#&|`
185 |   }
186 | 
187 |   // Consume stream
188 |   stream.forEach(data => {
189 | 
190 |     for (type in syntax) {
191 | 
192 |       if (syntax[type].indexOf(data) !== -1) {
193 | 
194 |         tokens.push({
195 |           data: data,
196 |           type: type
197 |         })
198 | 
199 |       }
200 | 
201 |     }
202 | 
203 |   })
204 | 
205 |   return tokens
206 | 
207 | }
208 | 
209 | qss.parser = function(tokens) {
210 | 
211 |   var ast = []
212 | 
213 |   var blockOpen = false
214 |   var selector = []
215 |   var block = []
216 | 
217 |   // lump adjacent types together
218 |   tokens.forEach(token => {
219 | 
220 |     if (blockOpen) {
221 | 
222 |       if (selector.length > 0) {
223 | 
224 |         ast.push({
225 |           type: 'selector',
226 |           data: selector
227 |         })
228 |         selector = []
229 | 
230 |       }
231 | 
232 |       if (token.type === 'block') {
233 | 
234 |         ast.push({
235 |           type: 'block',
236 |           data: block
237 |         })
238 | 
239 |         block = []
240 | 
241 |       } else {
242 | 
243 |         block.push(token)
244 | 
245 |       }
246 | 
247 |     } else {
248 | 
249 |       if (token.type !== 'block') {
250 | 
251 |         selector.push(token)
252 | 
253 |       }
254 | 
255 |     }
256 | 
257 |     if (token.type === 'block') {
258 | 
259 |       blockOpen = blockOpen ? false : true
260 | 
261 |     }
262 | 
263 |   })
264 | 
265 |   ast = qss.consolidate(ast)
266 | 
267 |   return ast
268 | 
269 | }
270 | 
271 | qss.consolidate = function(ast) {
272 | 
273 |   var grouped = []
274 | 
275 |   ast.forEach(token => {
276 | 
277 |     var current = []
278 | 
279 |     if (token.type === 'selector') {
280 | 
281 |       for (var i=0; i<token.data.length; i++) {
282 | 
283 |         if (current.length && token.data[i].type === current[current.length-1].type) {
284 | 
285 |           current[current.length-1].data += token.data[i].data
286 | 
287 |         } else {
288 | 
289 |           current.push(token.data[i])
290 | 
291 |         }
292 | 
293 |       }
294 | 
295 |       grouped.push({
296 |         type: 'selector',
297 |         data: current
298 |       })
299 | 
300 |     } else if (token.type === 'block') {
301 | 
302 |       grouped.push({
303 |         type: 'block',
304 |         data: token
305 |       })
306 | 
307 |     }
308 | 
309 |   })
310 | 
311 |   return grouped
312 | 
313 | }
314 | 
315 | qss.query = function(grouped) {
316 | 
317 |   var selector = ''
318 |   var breakpoint = 0
319 |   var comparator = ''
320 |   var condition = ''
321 |   var conditions = ['width', 'height', 'characters', 'children', 'xscroll', 'yscroll',]
322 |   var comparators = ['<', 'below', 'under', '<=', 'max', '==', 'equals', '>=', 'min', '>', 'above', 'over']
323 |   var queries = []
324 | 
325 |   grouped.forEach(item => {
326 | 
327 |     if (item.type === 'selector') {
328 | 
329 |       selector = ''
330 | 
331 |       // Strip Whitespace
332 |       var data = qss.stripWhitespace(item.data)
333 |       var end = data.length
334 | 
335 |       // IF <condition> <comparator> <breakpoint>
336 |       if (
337 | 
338 |         // If last item is a <breakpoint>
339 |         data[end-1].type === 'number'
340 | 
341 |         // And second-last item is a <comparator>
342 |         && (
343 | 
344 |           // Operator
345 |           (data[end-2].type === 'operator' && comparators.indexOf(data[end-2].data) !== -1)
346 | 
347 |           // Word
348 |           || (data[end-2].type === 'word' && comparators.indexOf(data[end-2].data) !== -1)
349 | 
350 |         )
351 | 
352 |         // And third-last item is a <condition>
353 |         && (data[end-3].type === 'word' && conditions.indexOf(data[end-3].data) !== -1)
354 | 
355 |         // And fourth-last item is 'if'
356 |         && (data[end-4].type === 'word' && data[end-4].data === 'if')
357 | 
358 |       ) {
359 | 
360 |         // If query found!
361 |         for (var i=0; i<end-4; i++) {
362 | 
363 |           selector += data[i].data
364 | 
365 |         }
366 | 
367 |         breakpoint = data[end-1].data
368 | 
369 |         comparator = data[end-2].data
370 | 
371 |         condition = data[end-3].data
372 | 
373 |       }
374 | 
375 |       // @ <comparator> <breakpoint> <condition>
376 |       if (
377 | 
378 |         // If last item is a <condition>
379 |         (data[end-1].type === 'word' && conditions.indexOf(data[end-1].data) !== -1)
380 | 
381 |         // And second-last item is a <breakpoint>
382 |         && data[end-2].type === 'number'
383 | 
384 |         // And third-last item is a <comparator>
385 |         && (
386 | 
387 |           // Operator
388 |           (data[end-3].type === 'operator' && comparators.indexOf(data[end-3].data) !== -1)
389 | 
390 |           // Word
391 |           || (data[end-3].type === 'word' && comparators.indexOf(data[end-3].data) !== -1)
392 | 
393 |         )
394 | 
395 |         // And fourth-last item is '@'
396 |         && (data[end-4].type === 'operator' && data[end-4].data === '@')
397 | 
398 |       ) {
399 | 
400 |         // If query found!
401 |         for (var i=0; i<end-4; i++) {
402 | 
403 |           selector += data[i].data
404 | 
405 |         }
406 | 
407 |         condition = data[end-1].data
408 | 
409 |         breakpoint = data[end-2].data
410 | 
411 |         comparator = data[end-3].data
412 | 
413 |       }
414 | 
415 |     } else if (selector !== null && item.type === 'block') {
416 | 
417 |       var rule = ''
418 | 
419 |       for (var i=0; i<item.data.data.length; i++) {
420 | 
421 |         rule += item.data.data[i].data.replace(/\n/g, '')
422 | 
423 |       }
424 | 
425 |       switch (condition) {
426 | 
427 |         case 'width':
428 |           condition = 'el.offsetWidth'
429 |           break;
430 | 
431 |         case 'height':
432 |           condition = 'el.offsetHeight'
433 |           break;
434 | 
435 |         case 'characters':
436 |           condition = '(el.value === undefined ? el.textContent.length : el.value.length)'
437 |           break;
438 | 
439 |         case 'children':
440 |           condition = 'el.children.length'
441 |           break;
442 | 
443 |         case 'xscroll':
444 |           condition = 'el.scrollLeft'
445 |           break;
446 | 
447 |         case 'yscroll':
448 |           condition = 'el.scrollTop'
449 |           break;
450 | 
451 |       }
452 | 
453 |       switch (comparator) {
454 | 
455 |         case 'below':
456 |         case 'under':
457 |           comparator = '<'
458 |           break;
459 | 
460 |         case 'max':
461 |           comparator = '<='
462 |           break;
463 | 
464 |         case 'equals':
465 |           comparator = '=='
466 |           break;
467 | 
468 |         case 'min':
469 |           comparator = '>='
470 |           break;
471 | 
472 |         case 'above':
473 |         case 'over':
474 |           comparator = '>'
475 |           break;
476 |       }
477 | 
478 |       queries.push(`qss.elementQuery('${selector}', el => ${condition} ${comparator} ${breakpoint}, '${rule}')\n`)
479 | 
480 |     }
481 | 
482 |   })
483 | 
484 |   return queries
485 | 
486 | }
487 | 
488 | qss.stripWhitespace = function(ast) {
489 | 
490 |   for (var i=0; i<ast.length; i++) {
491 | 
492 |     if (
493 |       // If whitespace token
494 |       ast[i].type === 'whitespace'
495 | 
496 |       // Or an empty word
497 |       || ast[i].type === 'word' && ast[i].data.replace(/\s/g, '') === ''
498 |     ) {
499 | 
500 |       ast.splice(i, 1)
501 | 
502 |     }
503 | 
504 |   }
505 | 
506 |   return ast
507 | 
508 | }
509 | 
510 | qss.apply = function(queries) {
511 | 
512 |   var style = ''
513 | 
514 |   queries.forEach(command => {
515 | 
516 |     style += new Function('return ' + command)()
517 | 
518 |   })
519 | 
520 |   return style
521 | 
522 | }
523 | 
524 | qss.elementQuery = function(selector, test, rule) {
525 | 
526 |   var tag = document.querySelectorAll(selector)
527 |   var style = ''
528 |   var count = 0
529 | 
530 |   for (var i=0; i<tag.length; i++) {
531 | 
532 |     var attr = (selector+test).replace(/\W+/g, '')
533 | 
534 |     if (test(tag[i])) {
535 | 
536 |       tag[i].setAttribute(`data-${attr}`, count)
537 |       style += `[data-${attr}="${count}"] { ${rule} }`
538 |       count++
539 | 
540 |     } else {
541 | 
542 |       tag[i].setAttribute(`data-${attr}`, '')
543 | 
544 |     }
545 | 
546 |   }
547 | 
548 |   return style
549 | 
550 | }
551 | 
552 | window.addEventListener('load', qss.load)
553 | window.addEventListener('resize', qss.load)
554 | window.addEventListener('input', qss.load)
555 | window.addEventListener('click', qss.load)


--------------------------------------------------------------------------------
/tests/element-queries.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <meta charset=utf-8>
  3 | <meta name=viewport content="width=device-width, initial-scale=1">
  4 | <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel=stylesheet>
  5 | <link href=https://staticasset.s3.amazonaws.com/data-buttons.css rel=stylesheet>
  6 | <title>Element Queries using QCSS</title>
  7 | 
  8 | <style>
  9 |   body style {
 10 |     display: block;
 11 |     width: 100%;
 12 |     padding: 1em;
 13 |     margin: 1em 0 2em 0;
 14 |     border-radius: 3px;
 15 |     font-size: 12pt;
 16 |     font-family: 'Source Code Pro', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
 17 |     word-break: break-word;
 18 |     white-space: pre-wrap;
 19 |     font-kerning: auto;
 20 |     color: rgba(0,0,0,.7);
 21 |     background: transparent;
 22 |     border: 1px solid rgba(0,0,0,.3);
 23 |   }
 24 |   * {
 25 |     -webkit-box-sizing: border-box;
 26 |     -moz-box-sizing: border-box;
 27 |     box-sizing: border-box;
 28 |     text-rendering: optimizeLegibility;
 29 |     -webkit-font-smoothing: antialiased;
 30 |     -moz-osx-font-smoothing: grayscale;
 31 |     font-kerning: auto;
 32 |   }
 33 |   body {
 34 |     margin: 1em;
 35 |     font-family: 'Source Sans Pro', sans-serif;
 36 |   }
 37 |   [data-button] {
 38 |     display: block;
 39 |     margin: 1em 0;
 40 |   }
 41 |   div {
 42 |     display: inline-block;
 43 |     border-radius: .2em;
 44 |     padding: 1.5em;
 45 |     color: #555;
 46 |     font-size: 12pt;
 47 |     line-height: 1.4;
 48 |     background: #eee;
 49 |     border: 1px solid #ccc;
 50 |   }
 51 |   input,
 52 |   textarea {
 53 |     display: block;
 54 |     min-width: 250px;
 55 |     border-radius: .2em;
 56 |     margin: 1em;
 57 |     padding: .5em;
 58 |     color: #555;
 59 |     font-size: 12pt;
 60 |     background: white;
 61 |     border: 1px solid #ccc;
 62 |   }
 63 |   section {
 64 |     height: 300px;
 65 |     display: inline-block;
 66 |     border: 1px dotted black;
 67 |     padding: 1em;
 68 |   }
 69 |   img {
 70 |     max-width: 50px;
 71 |     box-shadow: rgba(0,0,0,.1) 0 .2em .5em;
 72 |   }
 73 |   img + img {
 74 |     margin-left: 1em;
 75 |   }
 76 |   p {
 77 |     font-size: 10pt;
 78 |     color: #555;
 79 |   }
 80 |   [class*=-scroll-x] {
 81 |     overflow-x: scroll;
 82 |   }
 83 |   [class*=-scroll-x] p {
 84 |     width: 200%;
 85 |   }
 86 |   [class*=-scroll-y] {
 87 |     height: 100px;
 88 |     overflow-y: scroll;
 89 |   }
 90 |   /* Drag Handles */
 91 |   [data-nubbin] {
 92 |     border: 1px solid rgba(0,0,0,.15);
 93 |     width: 30px;
 94 |     height: 30px;
 95 |     text-align: center;
 96 |     padding: 0;
 97 |     margin: 0;
 98 |     background: yellow;
 99 |     cursor: pointer;
100 |     z-index: 500;
101 |   }
102 |   [data-nubbin] i {
103 |     pointer-events: none;
104 |     color: black;
105 |     line-height: 30px;
106 |     font-size: 20px;
107 |   }
108 |   [data-drag] {
109 |     overflow: auto;
110 |   }
111 |   [data-drag=horizontal] {
112 |     resize: horizontal;
113 |   }
114 |   [data-drag=vertical] {
115 |     resize: vertical;
116 |   }
117 |   [data-drag=both] {
118 |     resize: both;
119 |   }
120 |   #ew, #eh, #emin, #emax {
121 |     min-width: 100px;
122 |     min-height: 100px;
123 |     width: 500px;
124 |     max-width: 100vw;
125 |     max-height: 100vh;
126 |   }
127 | </style>
128 | 
129 | <h1>Element Queries using QSS</h1>
130 | 
131 | <h2>Width Queries</h2>
132 | 
133 | <h3>min-width</h3>
134 | <div class=minwidth data-drag=horizontal>class="minwidth"</div>
135 | <style type=text/qss>
136 |   /* Min-width */
137 |   .minwidth if width >= 300 {
138 |     background: greenyellow;
139 |     border-color: limegreen;
140 |   }
141 | </style>
142 | 
143 | <h3>max-width</h3>
144 | <div class=maxwidth data-drag=horizontal>class="maxwidth"</div>
145 | <style type=text/qss>
146 |   /* Max-width in px */
147 |   .maxwidth if width <= 300 {
148 |     background: greenyellow;
149 |     border-color: limegreen;
150 |   }
151 | </style>
152 | 
153 | <h2>Height Queries</h2>
154 | 
155 | <h3>min-height</h3>
156 | <div class="minheight" data-drag=vertical>class="minheight"</div>
157 | <style type=text/qss>
158 |   /* Min-height in px */
159 |   .minheight if height >= 200 {
160 |     background: greenyellow;
161 |     border-color: limegreen;
162 |   }
163 | </style>
164 | 
165 | <h3>max-height</h3>
166 | <div class="maxheight" data-drag=vertical>class="maxheight"</div>
167 | <style type=text/qss>
168 |   /* Max-height in px */
169 |   .maxheight if height <= 200 {
170 |     background: greenyellow;
171 |     border-color: limegreen;
172 |   }
173 | </style>
174 | 
175 | <h2>Quantity Queries</h2>
176 | 
177 | <h3>min-characters on block elements</h3>
178 | <p>(Use keyboard)</p>
179 | <div class="mincharacters" contenteditable>class="mincharacters"</div>
180 | <style type=text/qss>
181 |   /* Min-characters on block elements */
182 |   .mincharacters if characters >= 35 {
183 |     background: greenyellow;
184 |     border-color: limegreen;
185 |   }
186 | </style>
187 | 
188 | <h3>min-characters on form inputs</h3>
189 | <p>(Use keyboard)</p>
190 | <input type=text class="mincharacters-input" value='class="mincharacters-input"'>
191 | <textarea class="mincharacters-textarea">class="mincharacters-textarea"</textarea>
192 | <style type=text/qss>
193 |   /* Min-characters on input */
194 |   .mincharacters-input if characters >= 35 {
195 |     background: greenyellow;
196 |     border-color: limegreen;
197 |   }
198 | 
199 |   /* Min-characters on textarea */
200 |   .mincharacters-textarea if characters >= 35 {
201 |     background: greenyellow;
202 |     border-color: limegreen;
203 |   }
204 | </style>
205 | 
206 | <h3>max-characters on block elements</h3>
207 | <p>(Use keyboard)</p>
208 | <div class="maxcharacters" contenteditable>class="maxcharacters"</div>
209 | <style type=text/qss>
210 |   /* Max-characters */
211 |   .maxcharacters if characters <= 35 {
212 |     background: greenyellow;
213 |     border-color: limegreen;
214 |   }
215 | </style>
216 | 
217 | <h3>max-characters on form inputs</h3>
218 | <p>(Use keyboard)</p>
219 | <input type=text class="maxcharacters-input" value='class="maxcharacters-input"'>
220 | <textarea class="maxcharacters-textarea">class="maxcharacters-textarea"</textarea>
221 | <style type=text/qss>
222 |   /* Max-characters on input */
223 |   .maxcharacters-input if characters <= 35 {
224 |     background: greenyellow;
225 |     border-color: limegreen;
226 |   }
227 | 
228 |   /* Max-characters on textarea */
229 |   .maxcharacters-textarea if characters <= 35 {
230 |     background: greenyellow;
231 |     border-color: limegreen;
232 |   }
233 | </style>
234 | 
235 | <h3>min-children</h3>
236 | <button data-button="semiflat" onclick="var img=document.createElement('img');img.src='https://staticasset.s3.amazonaws.com/user.png';document.querySelector('.minchildren').appendChild(img);EQCSS.apply()">Add Child</button>
237 | <div class="minchildren">
238 | <img src=https://staticasset.s3.amazonaws.com/user.png style=width:50px>
239 | </div>
240 | <style type=text/qss>
241 |   /* Min-children */
242 |   .minchildren if children >= 5 {
243 |     background: greenyellow;
244 |     border-color: limegreen;
245 |   }
246 | </style>
247 | 
248 | <h3>max-children</h3>
249 | <button data-button="semiflat" onclick="var img=document.createElement('img');img.src='https://staticasset.s3.amazonaws.com/user.png';document.querySelector('.maxchildren').appendChild(img);EQCSS.apply()">Add Child</button>
250 | <div class="maxchildren">
251 | <img src=https://staticasset.s3.amazonaws.com/user.png style=width:50px>
252 | </div>
253 | <style type=text/qss>
254 |   /* Max-children */
255 |   .maxchildren if children <= 5{
256 |     background: greenyellow;
257 |     border-color: limegreen;
258 |   }
259 | </style>
260 | 
261 | <h2>Scroll queries</h2>
262 | 
263 | <h3>min-scroll-y</h3>
264 | <div class="min-scroll-y" onscroll=qss.load()>
265 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
266 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
267 | </div>
268 | <style type=text/qss>
269 |   /* Min-scroll-y */
270 |   .min-scroll-y if yscroll >= 50 {
271 |     background: greenyellow;
272 |     border-color: limegreen;
273 |   }
274 | </style>
275 | 
276 | <h3>max-scroll-y</h3>
277 | <div class="max-scroll-y" onscroll=qss.load()>
278 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
279 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
280 | </div>
281 | <style type=text/qss>
282 |   /* Max-scroll-y */
283 |   .max-scroll-y if yscroll <= 50 {
284 |     background: greenyellow;
285 |     border-color: limegreen;
286 |   }
287 | </style>
288 | 
289 | <h3>min-scroll-x</h3>
290 | <div class="min-scroll-x" onscroll=qss.load()>
291 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
292 | </div>
293 | <style type=text/qss>
294 |   /* Min-scroll-x */
295 |   .min-scroll-x if xscroll >= 50 {
296 |     background: greenyellow;
297 |     border-color: limegreen;
298 |   }
299 | </style>
300 | 
301 | <h3>max-scroll-x</h3>
302 | <div class="max-scroll-x" onscroll=qss.load()>
303 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
304 | </div>
305 | <style type=text/qss>
306 |   /* Max-scroll-x */
307 |   .max-scroll-x if xscroll <= 50 {
308 |     background: greenyellow;
309 |     border-color: limegreen;
310 |   }
311 | </style>
312 | 
313 | <script src=../qss.js></script>
314 | <script>
315 |   function containerQuery(selector, test, stylesheet) {
316 | 
317 |     var tag = document.querySelectorAll(selector)
318 |     var style = ''
319 |     var count = 0
320 | 
321 |     for (var i=0; i<tag.length; i++) {
322 | 
323 |       var attr = (selector+test).replace(/\W+/g, '')
324 | 
325 |       if (test(tag[i])) {
326 | 
327 |         tag[i].setAttribute(`data-${attr}`, count)
328 | 
329 |         var css = stylesheet.replace(/\$this/g, `[data-${attr}="${count}"]`)
330 | 
331 |         style += css
332 | 
333 |         count++
334 | 
335 |       } else {
336 | 
337 |         tag[i].setAttribute(`data-${attr}`, '')
338 | 
339 |       }
340 | 
341 |     }
342 | 
343 |     return style
344 | 
345 |   }
346 | </script>
347 | <script>
348 |   // Drag Handles for Touchscreen Users
349 |   if(('ontouchstart' in window)||(navigator.msMaxTouchPoints>0)){
350 |     var tag = document.querySelectorAll('[data-drag]')
351 |     for(i=0;i<tag.length;i++){
352 |       var direction = tag[i].getAttribute('data-drag') || 'both'
353 |       tag[i].setAttribute('data-container',i)
354 |       spawnNubbin(i,direction)
355 |     }
356 |     function spawnNubbin(element,direction){
357 |       var parent = document.querySelector('[data-container="'+element+'"]'),
358 |           pTop = parent.scrollHeight - 20,
359 |           pLeft = parent.scrollWidth - 20,
360 |           nubbin = document.createElement('div')
361 |       nubbin.setAttribute('data-nubbin',element)
362 |       parent.style.position = 'relative'
363 |       parent.style.overflow = 'inherit'
364 |       nubbin.style.position = 'absolute'
365 |       nubbin.style.top = pTop+'px'
366 |       nubbin.style.left = pLeft+'px'
367 |       nubbin.setAttribute('data-max-top',pTop)
368 |       nubbin.setAttribute('data-max-left',pLeft)
369 |       if (direction == 'horizontal'){
370 |         nubbin.innerHTML = '<i class="fa fa-arrows-h"></i>'
371 |       }
372 |       if (direction == 'vertical'){
373 |         nubbin.innerHTML = '<i class="fa fa-arrows-v"></i>'
374 |       }
375 |       if (direction == 'both'){
376 |         nubbin.innerHTML = '<i class="fa fa-arrows"></i>'
377 |       }
378 |       document.addEventListener('mousedown',grab)
379 |       document.addEventListener('touchstart',grab)
380 |       document.addEventListener('mousemove',drag)
381 |       document.addEventListener('touchmove',drag)
382 |       document.addEventListener('mouseup',drop)
383 |       document.addEventListener('touchend',drop)
384 |       parent.appendChild(nubbin)
385 |     }
386 |     var grabbed
387 |     var startX = startY = oldTop = oldLeft = 0
388 |     function grab(e){
389 |       if (e.target.getAttribute('data-nubbin')){
390 |         e.preventDefault()
391 |         grabbed = e.target.getAttribute('data-nubbin')
392 |         startX = e.clientX || e.touches[0].clientX
393 |         startY = e.clientY || e.touches[0].clientY
394 |         oldTop = parseInt(e.target.style.top.split('px')[0]) || 0
395 |         oldLeft = parseInt(e.target.style.left.split('px')[0]) || 0
396 |       }
397 |     }
398 |     function drag(e){
399 |       if (grabbed){
400 |         if (e.target.getAttribute('data-nubbin')){
401 |           var nubbin = document.querySelector('[data-nubbin="'+grabbed+'"]'),
402 |               parent = e.target.parentNode,
403 |               direction = parent.getAttribute('data-drag'),
404 |               pTop = parent.scrollHeight,
405 |               pLeft = parent.scrollWidth,
406 |               newTop = oldTop+parseInt((e.clientY||e.touches[0].clientY)-startY),
407 |               newLeft = oldLeft+parseInt((e.clientX||e.touches[0].clientX)-startX),
408 |               maxTop = parseInt(nubbin.getAttribute('data-max-top')),
409 |               maxLeft = parseInt(nubbin.getAttribute('data-max-left')),
410 |               filterTop = newTop>=maxTop?newTop:maxTop,
411 |               filterLeft = newLeft>=maxLeft?newLeft:maxLeft
412 |           if (direction == 'vertical' || direction == 'both'){
413 |             nubbin.style.top = filterTop + 'px'
414 |             parent.style.height = newTop>maxTop?newTop+15+'px':maxTop+15+'px'
415 |           }
416 |           if (direction == 'horizontal' || direction == 'both'){
417 |             nubbin.style.left = filterLeft + 'px'
418 |             parent.style.width = newLeft>maxLeft?newLeft+15+'px':maxLeft+15+'px'
419 |           }
420 |           qss.load()
421 |         }
422 |       }
423 |     }
424 |     function drop(e){
425 |       grabbed = undefined
426 |       qss.load()
427 |     }
428 |   }
429 | </script>
430 | <script>
431 |   // Apply QSS during mouse drags
432 |   var resizing = false
433 | 
434 |   window.addEventListener('mousedown', function() {
435 | 
436 |     resizing = true
437 | 
438 |   })
439 | 
440 |   window.addEventListener('mousemove', function() {
441 | 
442 |     if (resizing === true) {
443 | 
444 |       qss.load()
445 | 
446 |     }
447 | 
448 |   })
449 | 
450 |   window.addEventListener('mouseup', function() {
451 | 
452 |     resizing = false
453 |     qss.load()
454 | 
455 |   })
456 | </script>


--------------------------------------------------------------------------------
/tests/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <meta charset=utf-8>
 3 | <meta name=viewport content="width=device-width, initial-scale=1">
 4 | <title>QSS Demo</title>
 5 | 
 6 | <style>
 7 |   * {
 8 |     box-sizing: border-box;
 9 |     text-rendering: optimizeLegibility;
10 |     -webkit-font-smoothing: antialiased;
11 |     -moz-osx-font-smoothing: grayscale;
12 |     font-kerning: auto;
13 |   }
14 |   html {
15 |     font-size: 14pt;
16 |     line-height: 1;
17 |     font-weight: 400;
18 |     font-family: sans-serif;
19 |     -webkit-text-size-adjust: 100%;
20 |   }
21 |   body {
22 |     margin: 0 auto;
23 |     max-width: 700px;
24 |     padding: 2em;
25 |   }
26 |   input, textarea {
27 |     width: 100%;
28 |     font-size: 14pt;
29 |     padding: .5em;
30 |     margin: 1em 0;
31 |     display: block;
32 |   }
33 | </style>
34 | 
35 | <h1>QSS Demo</h1>
36 | 
37 | <h2>At-formatted examples</h2>
38 | 
39 | <input placeholder="Type less than 5 characters" class=lesser>
40 | <input placeholder="Type at most 5 characters" class=max>
41 | <input placeholder="Type exactly 5 characters" class=equal>
42 | <input placeholder="Type at least 5 characters" class=min>
43 | <input placeholder="Type greater than 5 characters" class=greater>
44 | 
45 | <style type="text/qss">
46 |   /* Using At-formatting */
47 |   input.lesser @ under 5 characters {
48 |     background: lime;
49 |   }
50 |   input.max @ max 5 characters {
51 |     background: lime;
52 |   }
53 |   input.equal @ equals 5 characters {
54 |     background: lime;
55 |   }
56 |   input.min @ min 5 characters {
57 |     background: lime;
58 |   }
59 |   input.greater @ over 5 characters {
60 |     background: lime;
61 |   }
62 | </style>
63 | 
64 | <h2>If-formatted examples</h2>
65 | 
66 | <textarea placeholder="Type less than 5 characters" class=lesser></textarea>
67 | <textarea placeholder="Type at most 5 characters" class=max></textarea>
68 | <textarea placeholder="Type exactly 5 characters" class=equal></textarea>
69 | <textarea placeholder="Type at least 5 characters" class=min></textarea>
70 | <textarea placeholder="Type greater than 5 characters" class=greater></textarea>
71 | 
72 | <style type="text/qss">
73 |   /* Using If-formatting */
74 |   textarea.lesser if characters < 5 {
75 |     background: lime;
76 |   }
77 |   textarea.max if characters <= 5 {
78 |     background: lime;
79 |   }
80 |   textarea.equal if characters == 5 {
81 |     background: lime;
82 |   }
83 |   textarea.min if characters >= 5 {
84 |     background: lime;
85 |   }
86 |   textarea.greater if characters > 5 {
87 |     background: lime;
88 |   }
89 | </style>
90 | 
91 | <script src=../qss.js></script>


--------------------------------------------------------------------------------