element_query 0.0.2

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 0

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 Go to the documentation of element_query 0.0.2 Download element_query 0.0.2 archive
0.0.1 Sep 19, 2016 Go to the documentation of element_query 0.0.1 Download element_query 0.0.1 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
--
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
--
Overall:
Weighted score of the above. [more]
0
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.

Analysis 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.

Maintenance issues and suggestions

Running dartdoc failed. (-10 points)

Make sure dartdoc runs without any issues.

Dependencies

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