Add @hover selector (#114)

* Add `@hover` selector

1. `@hover {}`, same with `:hover {}`.

2. `@hover(-1, 1) {}`, the previous and next cells to the current hovered
   element.

3. `@hover(-1 0, 1 0)`, the left and right cells. Targeting by `dx dy`
   relatively.

* cleanup hover callbackup

src/generator/css.js

@@ -57,6 +57,7 @@ class Rules {
     this.reset();
     this.custom_properties = {};
     this.uniforms = {};
+    this.hover = false;
     this.content = {};
   }
 
@@ -167,7 +168,6 @@ class Rules {
         let fname = arg.name.substr(1);
         let fn = this.pick_func(fname);
         if (typeof fn === 'function') {
-          this.check_uniforms(fname);
           if (this.is_composable(fname)) {
             let value = get_value((arg.arguments[0] || [])[0]);
             let temp_arg;
@@ -294,7 +294,6 @@ class Rules {
           let fname = val.name.substr(1);
           let fn = this.pick_func(fname);
           if (typeof fn === 'function') {
-            this.check_uniforms(fname);
             if (this.is_composable(fname)) {
               let value = get_value((val.arguments[0] || [])[0]);
               let temp_arg;
@@ -668,8 +667,12 @@ class Rules {
         }
 
         case 'cond': {
-          let fn = Selector[token.name.substr(1)];
+          let name = token.name.substr(1);
+          let fn = Selector[name];
           if (fn) {
+            if (name === 'hover') {
+              this.hover = true;
+            }
             let args = token.arguments.map(arg => {
               return this.compose_argument(arg, coords);
             });
@@ -680,7 +683,29 @@ class Rules {
               }
             }
             if (cond) {
-              this.compose(coords, token.styles);
+              if (cond.selector) {
+                token.styles.forEach(_token => {
+                  if (_token.type === 'rule') {
+                    this.add_rule(
+                      cond.selector.replaceAll('$', this.compose_selector(coords)),
+                      this.compose_rule(_token, coords)
+                    )
+                  }
+                  if (_token.type === 'pseudo') {
+                    _token.selector.split(',').forEach(selector => {
+                      let pseudo = _token.styles.map(s =>
+                        this.compose_rule(s, coords, selector)
+                      );
+                      this.add_rule(
+                        (cond.selector + selector).replaceAll('$', this.compose_selector(coords)),
+                        pseudo
+                      );
+                    });
+                  }
+                });
+              } else {
+                this.compose(coords, token.styles);
+              }
             }
           }
           break;
@@ -714,8 +739,10 @@ class Rules {
       } else {
         let target = is_host_selector(selector) ? 'host' : 'cells';
         let value = join(rule).trim();
-        let name = (target === 'host') ? `${ selector }, .host` : selector;
-        this.styles[target] += `${ name } { ${ value  } }`;
+        if (value.length) {
+          let name = (target === 'host') ? `${ selector }, .host` : selector;
+          this.styles[target] += `${ name } { ${ value  } }`;
+        }
       }
     }
 
@@ -757,6 +784,7 @@ class Rules {
       pattern: this.pattern,
       uniforms: this.uniforms,
       content: this.content,
+      hover: this.hover,
     }
   }
 

src/index.js

@@ -55,6 +55,8 @@ if (typeof customElements !== 'undefined') {
         animation.cancel();
       }
       this.animations = [];
+      this.remove_hover();
+      this.remove_uniform_mouse();
     }
 
     update(styles) {
@@ -314,7 +316,6 @@ if (typeof customElements !== 'undefined') {
       let use = this.get_use();
       let parsed = parse_css(use + un_entity(this.innerHTML), this.extra);
       let compiled = this.generate(parsed);
-      let { uniforms } = compiled;
 
       if (!again) {
         if (this.hasAttribute('click-to-update')) {
@@ -404,7 +405,7 @@ if (typeof customElements !== 'undefined') {
       let style_container = get_grid_styles(grid) + host + container;
       let style_cells = has_delay ? '' : cells;
 
-      const { uniforms, content } = compiled;
+      const { uniforms, content, hover } = compiled;
 
       let replace = this.replace(compiled);
 
@@ -427,6 +428,11 @@ if (typeof customElements !== 'undefined') {
         this.set_content('.style-cells', replace(cells));
       }
 
+      if (hover) {
+        this.register_hover();
+      } else {
+        this.remove_hover();
+      }
       if (uniforms.time) {
         this.register_uniform_time();
       }
@@ -442,6 +448,35 @@ if (typeof customElements !== 'undefined') {
       }
     }
 
+    register_hover() {
+      if (!this.hover_callback) {
+        this.hover_callback = e => {
+          e.target.classList.add('hover');
+          this.hovered_element = e.target;
+        }
+      }
+      if (!this.hover_out_callback) {
+        this.hover_out_callback = e => {
+          if (this.hovered_element) {
+            this.hovered_element.classList.remove('hover');
+          }
+        }
+      }
+      this.doodle.addEventListener('pointerover', this.hover_callback);
+      this.doodle.addEventListener('pointerout', this.hover_out_callback);
+    }
+
+    remove_hover() {
+      if (this.hover_callback) {
+        this.doodle.removeEventListener('pointerover', this.hover_callback);
+        this.doodle.removeEventListener('pointerout', this.hover_out_callback);
+        let el = this.doodle.querySelector('.hover');
+        if (el) {
+          el.classList.remove('hover');
+        }
+      }
+    }
+
     register_uniform_mouse(uniforms) {
       if (!this.uniform_mouse_callback) {
         let { uniform_mousex, uniform_mousey } = Uniforms;

src/selector.js

@@ -16,6 +16,20 @@ function nth(input, curr, max) {
   }
 }
 
+function get_selector(offset) {
+  let selector = '';
+  if (offset == 0) {
+    selector = '$.hover';
+  }
+  else if (offset > 0) {
+    selector = `$.hover ${'+*'.repeat(offset)}`;
+  }
+  else {
+    selector = `:has(+ ${'*+'.repeat(Math.abs(offset + 1))} $.hover)`;
+  }
+  return selector;
+}
+
 export default {
 
   at({ x, y }) {
@@ -79,4 +93,37 @@ export default {
     }
   },
 
+  hover({ count, x, y, grid, random }) {
+    return (...args) => {
+      let selectors = [];
+      if (!args.length) {
+        selectors.push(get_selector(0));
+      }
+      for (let arg of args) {
+        let [dx, dy] = String(arg).split(/\s+/);
+        dx = Number(dx);
+        dy = Number(dy);
+        // @hover(1, 2, 3)
+        if (Number.isNaN(dy) && !Number.isNaN(dx)) {
+          selectors.push(get_selector(dx));
+        }
+        // @hover(1 -1, 0 1)
+        if (!Number.isNaN(dx) && !Number.isNaN(dy)) {
+          let rx = dx + x;
+          let ry = dy + y;
+          if (rx >= 1 && rx <= grid.x && ry >= 1 && ry <= grid.y) {
+            let offset = (dy * grid.y) + dx;
+            selectors.push(get_selector(offset));
+          }
+        }
+      }
+      if (!selectors.length) {
+        return false;
+      }
+      return {
+        selector: selectors.join(',')
+      }
+    }
+  },
+
 }