Changelog #

5.0.0 #

• moved content from./web to ./example
• changed architecture to be a more simple media query service instead of a big component with unnecessary complicated bindings
• adjusted example to fit new JbMediaQueryService

4.0.2 #

• added two dev dependencies back to normal dependencies because of transformer

4.0.1 #

• moves some dependencies to dev_dependencies

4.0.0 #

• updates to angular 4.0.0
• introduces strong mode & checked dart2js (dartdevc not compatible with angular currently)

2.0.5 #

• updated dependencies, mainly angular2 to 2.2.0
• removed test folder and entry_point from test folder in angular transformer in pubspec.yaml

2.0.4 #

• upgraded dependencies again - angular2 Beta 20
• added consumer component example to test injecting activeBreakpoints inside components
• changed onBreakpointChange EventEmitter to emit new list references on every breakpoint change

2.0.3 #

-downgraded dependencies - angular2 Beta 17

2.0.2 #

• updated dependencies - angular2 Beta 19

2.0.1 #

• emits now change events instead of refreshing the whole component tree on media queries

2.0.0 #

• updated syntax to Angular 2

1.0.1 #

• changed internals to use window.matchMedia
• problem with TwoWayBinding in AngularDart likely broken in version 1.16 of the dart sdk, maybe caused by some code generation issues

0.0.1 #

• Initial version

example/example.dart

library jb_responsive_breakpoints.app_init;

import 'package:angular/angular.dart';
import 'package:logging/logging.dart';
import 'package:logging_handlers/logging_handlers_shared.dart';
import 'package:jb_responsive_breakpoints/jb_responsive_breakpoints.dart';

final Logger _libLogger = new Logger("jb_responsive_breakpoints");

void main() {
  //init logging
  hierarchicalLoggingEnabled = true;
  Logger.root.onRecord.listen(new LogPrintHandler());

  Logger.root.level = Level.OFF;
  _libLogger.level = Level.ALL;
  //could be customized with _libLogger.level =  Level.INFO or Level.OFF and
  // then add specific logger
  //_logger.level = Level.All

  bootstrap(AppComponent);
}

@Component(
    selector: 'app-root',
    templateUrl: 'app_component.html',
    directives: const [CORE_DIRECTIVES],
    providers: const [JbMediaQueryService])
class AppComponent implements OnInit {
  JbMediaQueryService mqService;

  Map<String, String> colors = {
    'default': '#aaaaaa',
    'min300': '#aaaa00',
    'min600': '#00aaaa',
  };

  String color = "#aaaaaa";

  List<String> activeBreakpoints = [];

  AppComponent(this.mqService) {}

  @override
  ngOnInit() {
    mqService.register(min300, minWidth: 300);
    mqService.registerStringQuery(min600, '(min-width: 600px)');
  }

  min300(bool matches) {
    if (matches) {
      activeBreakpoints.add('min300');
      color = colors['min300'];
    } else {
      activeBreakpoints.remove('min300');
      color = colors['default'];
    }

    _libLogger.fine(activeBreakpoints);
  }

  min600(bool matches) {
    if (matches) {
      color = colors['min600'];
      activeBreakpoints.add('min600');
    } else {
      activeBreakpoints.remove('min600');
      color = colors['min300'];
    }

    _libLogger.fine(activeBreakpoints);
  }
}