https://github.com/justinfagnani/active_query.dart

active_query allows you to easily watch the DOM for elements that match and un-match CSS selectors.
https://github.com/justinfagnani/active_query.dart

Last synced: 28 days ago
JSON representation

active_query allows you to easily watch the DOM for elements that match and un-match CSS selectors.

• Host: GitHub
• URL: https://github.com/justinfagnani/active_query.dart
• Owner: justinfagnani
• License: apache-2.0
• Created: 2014-04-25T01:15:05.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-04-25T17:38:27.000Z (over 10 years ago)
• Last Synced: 2024-10-05T07:38:52.552Z (about 1 month ago)
• Language: Dart
• Size: 130 KB
• Stars: 6
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
active_query.dart

=================

`activeQuery()` allows you to easily watch the DOM for elements that match and

un-match CSS selectors. `activeQuery()` is much easier to use than Mutation

Observers for the specific case of watching which objects match a CSS selector.

## Example

```dart

import 'dart:html';

import 'package:active_query/active_query.dart';

main() {

  activeQuery('[important]')

    ..added.listen((element) {

      print("${element.classes.first} is now important");

    })

    ..removed.listen((element) {

      print("${element.classes.first} is no longer important");

    })

    ..elements.listen((elements) {

      print("Important elements: ${elements.map((e) => e.classes.first)}");

    });

  // We need to perform each mutation in a Future so that the browser doesn't

  // coalesce them and not trigger our observer.

  new Future(() {

    print("first mutation");

    querySelector('div.two').attributes['important'] = '';

  }).then((_) => new Future(() {

    print("second mutation");

    querySelector('div.one').attributes.remove('important');

  })).then((_) => new Future(() {

    print("third mutation");

    querySelector('div.two').attributes.remove('important');

  }));

}

```

```html

  

    


    


  


```

Prints the following:

```

one is now important

Important elements: (one)

first mutation

two is now important

Important elements: (one, two)

second mutation

one is no longer important

Important elements: (two)

third mutation

two is no longer important

Important elements: ()

```