element_query

A polyfill for Element Query.

Usage

Use existing CSS syntax
Elements/selectors must be registered through code
Supported query types: min-width, max-width, min-height, max-height
Supported units: px, em
Queries are updated automatically when the window is resized. For other cases, a call to update is required.

CSS

header[min-width~="500px"] {
    color: red;
}
header[max-width~="500px"] nav {
    clear: both;
}
header[min-width~="500px"] nav[min-height~="3em"] {
    color: white;
}

Dart

import 'package:element_query/element_query.dart' as eq;

main() {
  // Initialize Element Query.
  // This method is safe to be called multiple times.
  eq.init();

  // Register a selector with two checkpoints for min-width.
  eq.register('.main-pane', minWidths: ['600px', '1000px']);
  
  // Register an element with one checkpoint for max-height.
  eq.register(element, maxHeights: ['3em']);


  document.querySelector('.left-pane')
    ..onClick.listen((e) {
      e.target.classes.toggle('expanded');
    })
    ..onTransitionEnd.listen((_) {
      // Call `update` to trigger a refresh.
      eq.update();
    });
}

Features and bugs

Please file feature requests and bugs at the issue tracker.

0.02

An event of type query-changed is fired on a target element when its size passes a break point
Fixed a bug when using the em unit

0.0.1

Initial version

example/example.dart

// Copyright (c) 2016, Man Hoang. All rights reserved. Use of this source code
// is governed by a BSD-style license that can be found in the LICENSE file.

import 'dart:html';
import 'package:element_query/element_query.dart' as eq;

main() {
  // Initialize Element Query.
  // This method is safe to be called multiple times.
  eq.init();

  // Register a selector with two checkpoints for min-width.
  eq.register('.main-pane', minWidths: ['600px', '1000px']);

  // Alternatively, we can register an element.
  //eq.register(document.querySelector('.main-pane'),
  //    minWidths: ['500px', '1000px']);

  document.querySelector('.left-pane')
    ..onClick.listen((e) {
      (e.target as Element).classes.toggle('expanded');
    })
    ..onTransitionEnd.listen((_) {
      eq.update();
    });
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  element_query: ^0.0.2

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:element_query/element_query.dart';

Version	Uploaded	Documentation	Archive
0.0.2	May 31, 2018
0.0.1	Sep 19, 2016

Popularity: Describes how popular the package is relative to other packages. [more]	16
Health: Code health derived from static analysis. [more]	0
Maintenance: Reflects how tidy and up-to-date the package is. [more]	0
Overall: Weighted score of the above. [more]	8

Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://www.dartlang.org/dart-2#migration.

Dependencies

Package	Constraint	Resolved	Available
Direct dependencies
Dart SDK	>=1.0.0 <2.0.0

Dart pub

element_query 0.0.2