accessing pseudo-element property values through getComputedStyle in dart - dart

Question

I wish to detect what media query is active - I'm using Bootjack, so hence I am using the default breakpoints
I expected to be able to use getComputedStyle() to get hold of the value of the 'content' property in the example below - but I don't seem to get the syntax correct. I can happily get the value of an element - say the font-famly on the body, but not pseudo-elements...
Here's what I am doing:
Given this css..
/* tablets */
#media(min-width:768px){
body::after {
content: 'tablet';
display: none;
}
}
#media(min-width:992px){
body::after {
content: 'desktop';
display: none;
}
}
#media(min-width:1200px){
body::after {
content: 'large-screen';
display: none;
}
}
I have this in my dart file:
String activeMediaQuery = document.body.getComputedStyle('::after').getPropertyValue('content');
but activeMediaQuery is always empty.
I've tried ('after') and (':after') and anything else weird and wonderful but to no avail.
String activeMediaQuery = document.body.getComputedStyle().getPropertyValue('font-family');
sets the variable activeMediaQuery to the value of the font-family that I am using (not much use to me though!)
What should I be doing?

Answer 1

You can also subscribe to MediaQuery change events
for more details see https://github.com/bwu-dart/polymer_elements/blob/master/lib/polymer_media_query/polymer_media_query.dart
There is a bug in Dart and the workaround uses dart-js-interop.
This is the code from the polymer-media-query element. I don't know if the comments not suppored in Dart yet are still valid. It's a few months since I tried it.
Here is an example page that shows how to use the element.
https://github.com/bwu-dart/polymer_elements/blob/master/example/polymer_media_query.html
var _mqHandler;
var _mq;
init() {
this._mqHandler = queryHandler;
mqueryChanged(null);
if (_mq != null) {
if(context['matchMedia'] != null) {
_mq.callMethod('removeListener', [_mqHandler]);
}
// TODO not supported in Dart yet (#84)
//this._mq.removeListener(this._mqHandler);
}
if (mquery == null || mquery.isEmpty) {
return;
}
if(context['matchMedia'] != null) {
_mq = context.callMethod('matchMedia', ['(${mquery})']);
_mq.callMethod('addListener', [_mqHandler]);
queryHandler(this._mq);
}
// TODO not supported in Dart yet (#84)
// Listener hast to be as MediaQueryListListener but this is and abstract
// class and therefor it's not possible to create a listner
// _mq = window.matchMedia(q);
// _mq.addListener(queryHandler);
// queryHandler(this._mq);
}
void queryHandler(mq) {
queryMatches = mq['matches'];
//fire('polymer-mediachange', detail: mq);
}
This worked for me with the CSS you provided in your question but only when the window was wider than 768 px. You might miss a rule with max-width: 768px
import 'dart:html' as dom;
void main () {
dom.window.onResize.listen((e) {
var gcs = dom.document.body.getComputedStyle('::after');
print(gcs.content);
});
}