element_query 0.0.1

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

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.

Changelog

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.classes.toggle('expanded');
    })
    ..onTransitionEnd.listen((_) {
      eq.update();
    });
}

1. Depend on it

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


dependencies:
  element_query: "^0.0.1"

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.1 Sep 19, 2016 Go to the documentation of element_query 0.0.1 Download element_query 0.0.1 archive

Analysis

This feature is new.
We welcome feedback.
More details: scoring.

We analyzed this package, and provided a score, details, and suggestions below.

  • completed on Feb 3, 2018
  • Dart: 2.0.0-dev.20.0
  • pana: 0.10.1

Scores

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

Platforms

Detected platforms: web

Primary library: package:element_query/element_query.dart with components: html.

Suggestions

  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

Dependencies

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