I have an AngularDart component that I would like to receive global keydown events. I tried this:
Stream<KeyEvent> _keyStream;
StreamSubscription<KeyEvent> _keyStreamSubscription;
#override
Future<Null> ngOnInit() async {
_keyStream = KeyEvent.keyPressEvent.forTarget(document.body);
_keyStreamSubscription = _keyStream.listen((keyEvent) =>
window.console.log('KeyPress event detected ${keyEvent.charCode}'));
}
#override
void ngOnDestroy() {
_keyStreamSubscription.cancel();
}
However when I press a key I get this error in the devtools console
EXCEPTION: InvalidStateError: Failed to execute 'dispatchEvent' on 'EventTarget': The event is already being dispatched.
STACKTRACE:
package:stack_trace <fn>
package:angular/src/core/zone/ng_zone.dart 144:18 <fn>
dart:sdk_internal runUnary
package:angular/src/core/zone/ng_zone.dart 141:18 [_runUnary]
dart:sdk_internal forTarget
package:human_sota/src/mnist_component.dart 34:41 ngOnInit
dart:sdk_internal _async
package:human_sota/src/mnist_component.dart 33:24 ngOnInit
package:human_sota/app_component.template.dart 152:27 detectChangesInternal
package:angular/src/core/linker/app_view.dart 384:7 detectChanges
package:angular/src/core/linker/view_container.dart 67:15 detectChangesInNestedViews
package:human_sota/app_component.template.dart 69:14 detectChangesInternal
package:angular/src/core/linker/app_view.dart 384:7 detectChanges
package:human_sota/app_component.template.dart 186:17 detectChangesInternal
package:angular/src/core/linker/app_view.dart 384:7 detectChanges
package:angular/src/core/change_detection/host.dart 164:18 [_runTick]
package:angular/src/core/change_detection/host.dart 140:7 tick
package:angular/src/core/zone/ng_zone.dart 132:18 <fn>
dart:sdk_internal run
package:angular/src/core/zone/ng_zone.dart 129:18 [_run]
dart:sdk_internal runGuarded
package:angular/src/core/zone/ng_zone.dart 300:23 runGuarded
package:angular/src/core/application_ref.dart 53:15 <fn>
package:stack_trace <fn>
package:angular/src/core/zone/ng_zone.dart 144:18 <fn>
dart:sdk_internal runUnary
package:angular/src/core/zone/ng_zone.dart 141:18 [_runUnary]
dart:sdk_internal add
package:angular/src/core/zone/ng_zone.dart 243:54 [_checkStable]
package:angular/src/core/zone/ng_zone.dart 176:5 [_onLeave]
package:angular/src/core/zone/ng_zone.dart 134:9 <fn>
dart:sdk_internal run
package:angular/src/core/zone/ng_zone.dart 129:18 [_run]
Why?
Related
I am writing a program that uses HTTP to get a list of themes from a server, and when transforming the data from JSON I am getting this error.
TypeError: map[$_get] is not a function
packages/outlook/src/provider/response.dart 28:19 fromHTTP
packages/outlook/src/provider/outlook.impl.dart 74:7 <fn>
dart-sdk/lib/async/zone.dart 1653:54 runUnary
dart-sdk/lib/async/future_impl.dart 147:18 handleValue
dart-sdk/lib/async/future_impl.dart 766:44 handleValueCallback
dart-sdk/lib/async/future_impl.dart 795:13 _propagateToListeners
dart-sdk/lib/async/future_impl.dart 566:5 [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 639:7 callback
dart-sdk/lib/async/schedule_microtask.dart 40:11 _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5 _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15 <fn>
here is the method of getting the themes:
Future<OtlResponse<List<OutlookTheme>>> getThemes() {
return http
.post(serverDomain,
body: jsonEncode({'method': RequestMethods.getThemes.name,}))
.then((http.Response resp) {
Map<String, dynamic> body = jsonDecode(resp.body);
OtlResponse<List<OutlookTheme>> response =
OtlResponse<List<OutlookTheme>>.fromHTTP(
map: body,
data: List.from(body['themes'])
.map(( themeMap) => OutlookTheme.fromMap(Map.from(themeMap)))
.toList());
return response;
});
}
After decoding the response I am transforming it into and OtlResponse using this factory as shown here:
factory OtlResponse.fromHTTP({required Map<String, dynamic> map, required T data}) {
return OtlResponse<T>(
success: map['success'] as bool,
data: data,
context: map['context'] as String,
statusCode: map['statusCode'] as int,
methodId: (map['method'] as String).toEnum(RequestMethods.values),
);
}
According to the log , the error is coming from the fromHTTP() factory and where am calling it in the getThemes method. I tried using Map.from() after decoding and its not working. What can I do to fix this? any help would be much appreciated🤝🏿!
Well after stopping main run process and running it, it's now working.
I have a basic react-native app for ios that loads an webview and I installed react-native-fbsdk-next module to get the auto events in facebook app but there is no activity in facebook event manager and I have this error in xcode when I run app on my device (iPhone SE ios 15.1):
nw_resolver_start_query_timer_block_invoke [C3] Query fired: did not receive all answers in time for graph.facebook.com:443
I followed all the install instruction in the docs.
This is my package.json
...
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "~0.63.4",
"react-native-fbsdk-next": "^8.0.2",
"react-native-gesture-handler": "~1.10.2",
"react-native-iap": "^7.5.0",
"react-native-orientation": "^3.1.3",
"react-native-permissions": "^3.3.1",
"react-native-reanimated": "~2.2.0",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.4.0",
"react-native-unimodules": "~0.14.5",
"react-native-web": "^0.17.1",
"react-native-webview": "11.6.2"
...
And the initialization code in my App.js file
...
export default function App() {
...
const requestTrackingPermission = async () => {
const res = await request(PERMISSIONS.IOS.APP_TRACKING_TRANSPARENCY);
return res === RESULTS.GRANTED || res === RESULTS.UNAVAILABLE;
};
(async function () {
if (!attGranted) {
const userAllowsTracking = await requestTrackingPermission();
if (userAllowsTracking) {
Settings.setAdvertiserTrackingEnabled(true).then(() => {
setAttGranted(true);
});
}
}
Settings.initializeSDK();
}
)();
...
I build a function that is used to store the token in shared preference and then fetch data from the server when I run my app for the very first time an error appears
The following NoSuchMethodError was thrown building AdminPage(dirty,
state: AdminPageState#87bcd): flutter: The method '[]' was called on
null. flutter: Receiver: null flutter: Tried calling:
and then the app works fine
P.S. my code is that
Future<Map<String, dynamic>> getCards(String userid) async {
BuildContext context;
String jWTtoken = '';
try {
final SharedPreferences prefs = await SharedPreferences.getInstance();
// prefs = await SharedPreferences.getInstance();
jWTtoken = prefs.getString('token');
tokenfoo();
} catch (e) {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (BuildContext context) => AuthPage()),
);
}
final Map<String, dynamic> authData = {
'Userid': '261',
// 'Email':_formData['Email'],
// 'Password':_formData['Password'],
};
final http.Response response = await http.post(
'hurl',
body: json.encode(authData),
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + jWTtoken
});
final Map<String, dynamic> responseData = json.decode(response.body);
if (responseData["StatusCode"] == 200) {
null;
} else if (responseData["StatusCode"] == 401) {
print(responseData);
Logout();
} else {
print(responseData);
Logout();
null;
}
return responseData;
}
anything worng with it?
and in the debug mode the error appears in this line
final SharedPreferences prefs = await SharedPreferences.getInstance();
the error :
══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY
╞═══════════════════════════════════════════════════════════ flutter:
The following NoSuchMethodError was thrown building AdminPage(dirty,
state: AdminPageState#7db9a): flutter: The method '[]' was called on
null. flutter: Receiver: null flutter: Tried calling: flutter:
flutter: When the exception was thrown, this was the stack: flutter:
0 Object.noSuchMethod (dart:core/runtime/libobject_patch.dart:50:5) flutter: #1
AdminPageState.build (package:idb/pages/adminpage.dart:63:39) flutter:
2 StatefulElement.build (package:flutter/src/widgets/framework.dart:3809:27) flutter: #3
ComponentElement.performRebuild
(package:flutter/src/widgets/framework.dart:3721:15) flutter: #4
Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
flutter: #5 ComponentElement._firstBuild
(package:flutter/src/widgets/framework.dart:3701:5) flutter: #6
StatefulElement._firstBuild
(package:flutter/src/widgets/framework.dart:3848:11) flutter: #7
ComponentElement.mount
(package:flutter/src/widgets/framework.dart:3696:5) flutter: #8
Element.inflateWidget
(package:flutter/src/widgets/framework.dart:2950:14) flutter: #9
Element.updateChild
(package:flutter/src/widgets/framework.dart:2753:12) flutter: #10
ComponentElement.performRebuild
(package:flutter/src/widgets/framework.dart:3732:16) flutter: #11
Element.rebuild (package:flutter/src/widgets/framework.dart:3547:5)
flutter: #12 BuildOwner.buildScope
(package:flutter/src/widgets/framework.dart:2286:33) flutter: #13
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame
(package:flutter/src/widgets/binding.dart:676:20) flutter: #14
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback
(package:flutter/src/rendering/binding.dart:219:5) flutter: #15
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback
(package:flutter/src/scheduler/binding.dart:990:15) flutter: #16
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame
(package:flutter/src/scheduler/binding.dart:930:9) flutter: #17
_WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame
(package:flutter/src/scheduler/binding.dart:842:5) flutter: #18
_invoke (dart:ui/hooks.dart:154:13) flutter: #19 _drawFrame (dart:ui/hooks.dart:143:3)
Possibly because jwToken is empty at initialization. Try giving jwToken a string value such as "test".
Create a global class to use globally:
final SharedPreferences prefs = await SharedPreferences.getInstance();
static Future init() async {
pref = await SharedPreferences.getInstance();
}
I am new to angulardart and I am working on mailer, but I am having an error that says:
dart_sdk.js:100398
EXCEPTION: Unsupported operation:
Platform._localHostname STACKTRACE: dart:sdk_internal
get localHostname package:mailer2/src/smtp/smtp_options.dart 4:25
new package:mailer2/src/smtp/helper_options.dart 12:24
new
package:DigitalHrSummit/src/components/homepagecomponent/homepage_component.dart
68:21 onSubmit
package:DigitalHrSummit/src/components/homepagecomponent/homepage_component.template.dart
1025:8 [_handle_click_287_0]
package:angular/src/core/linker/app_view.dart 602:29
src__core__linker__app_view_utils.appViewUtils.eventManager.zone.runGuarded.dart.fn
package:angular/src/core/zone/ng_zone.dart 134:16
parent.run.dart.fn dart:sdk_internal
run package:angular/src/core/zone/ng_zone.dart 131:18
[_run] dart:sdk_internal
runGuarded package:angular/src/core/zone/ng_zone.dart 302:22
runGuarded package:angular/src/core/linker/app_view.dart 601:37
event
Basically I just have the sample code that can be found here . I have my gmail username and password in the options variable.
I have the sample code inside my .dart component(homepage_component.dart)
...
import 'package:mailer2/mailer.dart';
...
class HomeComponent(){
void onSubmit(Map<String, dynamic> contactUsInfo) {
//Gmail account used to send email
var options = new GmailSmtpOptions()
..username = 'my-gmail-account'
..password = 'my-gmail-password';
// Create our email transport.
var emailTransport = new SmtpTransport(options);
// Create our mail/envelope.
var envelope = new Envelope()
..from = 'sender-email-here'
..recipients.add('recievers-mail-here')
//..bccRecipients.add('hidden#recipient.com')
..subject = 'Testing the Dart Mailer library'
//..attachments.add(new Attachment(file: new File('path/to/file')))
..text = 'This is a cool email message. Whats up?'
..html = '<h1>Test</h1><p>Hey!</p>';
// Email it.
emailTransport.send(envelope)
.then((envelope) => print('Email sent!'))
.catchError((e) => print('Error occurred: $e'));
}
}
Please help me guys. Thank you.
This library imports dart:io and therefore it isn't usable on the web.
In Polymer you can create neon-animations like their already built 'fade-in-animation'. You would implement the Polymer.NeonAnimationBehavior like this
<script>
Polymer({
is: 'fade-in-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
this._effect = new KeyframeEffect(node, [
{'opacity': '0'},
{'opacity': '1'}
], this.timingFromConfig(config));
return this._effect;
}
});
</script>
I could create something similar to that and just provide the configure function, which returns a KeyframeEffect. I tried reproducing this in Polymer Dart 1.0
#HtmlImport('diagonal-left.html')
library wellington.elements.animation.diagonal_left;
import 'dart:html';
import 'package:web_components/web_components.dart';
import 'package:polymer/polymer.dart';
import 'package:polymer_elements/neon_animation_behavior.dart';
#CustomElement('diagonal-left')
class DiagonalLeft extends PolymerElement with NeonAnimationBehavior {
KeyframeEffect _effect;
configure(config) {
var node = config.node;
if (config.transformOrigin) {
setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
} else {
setPrefixedProperty(node, 'transformOrigin', '0 75%');
}
_effect = new KeyframeEffect(node, [
{'transform': 'none'},
{'transform': 'translateX(-100%)'}
], timingFromConfig(config));
return _effect;
}
DiagonalLeft.created() : super.created();
}
with the HTMLImport importing this
<script type="application/dart" src="diagonal_left.dart"></script>
I try importing this, and putting this in the animationConfig
#property
Map get animationConfig => {
'entry': [
{
'name': 'fade-in-animation',
'node': this,
'timing': {'delay': 500, 'duration': 1000}
},
{
'name': 'scale-up-animation',
'node': this,
'timing': {'duration': 2000}
}],
'exit': [{
'name': 'fade-out-animation',
'node': this,
'timing': {'delay': 500, 'duration': 1000}
},
{
'name': 'slide-left-animation',
'node': this,
'timing': {'duration': 1000}
},
{
'name': 'diagonal-left',
'node': this
}]
};
and all I get is a message in the browser console saying
neon-animated-pages: diagonal-left not found!
What am I doing wrong? In other words, how can I create a custom animation for use in neon-animations in Polymer Dart 1.0?
UPDATE:
I've found the reason it was failing to find the custom animation I had created. Surprised no one noticed my mistake. I was using
#CustomElement('diagonal-left')
which is the old pre Polymer Dart 1.0 way of registering an element. It should be instead
#PolymerRegister('diagonal-left')
Now it's able to find my animation, but that only gave me another error in Dartium
VM4374:1 ORIGINAL EXCEPTION: V8 Exception(anonymous function) # VM4374:1
VM4374:1 ORIGINAL STACKTRACE:(anonymous function) # VM4374:1
VM4374:1 #0 JsFunction._apply (dart:js:1490)
#1 JsFunction.apply (dart:js:1488)
#2 BrowserDomAdapter.setProperty (package:angular2/src/platform/browser/browser_adapter.dart:140:20)
#3 DomRenderer.setElementProperty (package:angular2/src/platform/dom/dom_renderer.dart:190:9)
#4 DebugDomRenderer.setElementProperty (package:angular2/src/core/debug/debug_renderer.dart:127:10)
#5 AppView.notifyOnBinding (package:angular2/src/core/linker/view.dart:211:23)
#6 AbstractChangeDetector.notifyDispatcher (package:angular2/src/core/change_detection/abstract_change_detector.dart:280:21)
#7 _WaterfrontView_0.detectChangesInRecordsInternal (package:wellington/views/waterfront_view/waterfront_view.template.dart:66:20)
#8 AbstractChangeDetector.detectChangesInRecords (package:angular2/src/core/change_detection/abstract_change_detector.dart:151:12)
#9 AbstractChangeDetector.runDetectChanges (package:angular2/src/core/change_detection/abstract_change_detector.dart:125:10)
#10 AbstractChangeDetector._detectChangesInViewChildren (package:angular2/src/core/change_detection/abstract_change_detector.dart:244:12)
#11 AbstractChangeDetector.runDetectChanges (package:angular2/src/core/change_detection/abstract_change_detector.dart:128:10)
#12 AbstractChangeDetector._detectChangesInViewChildren (package:angular2/src/core/change_detection/abstract_change_detector.dart:244:12)
#13 AbstractChangeDetector.runDetectChanges (package:angular2/src/core/change_detection/abstract_change_detector.dart:128:10)
#14 AbstractChangeDetector.detectChanges (package:angular2/src/core/change_detection/abstract_change_detector.dart:111:10)
#15 ChangeDetectorRef_.detectChanges (package:angular2/src/core/change_detection/change_detector_ref.dart:209:14)
#16 ApplicationRef_.tick.<anonymous closure> (package:angular2/src/core/application_ref.dart:512:63)
#17 List.forEach (dart:core-patch/growable_array.dart:258)
#18 ApplicationRef_.tick (package:angular2/src/core/application_ref.dart:512:32)
#19 ApplicationRef_.ApplicationRef_.<anonymous closure>.<anonymous closure> (package:angular2/src/core/application_ref.dart:410:16)
#20 _rootRun (dart:async/zone.dart:1150)
#21 _ZoneDelegate.run (dart:async/zone.dart:693)
#22 NgZoneImpl._run (package:angular2/src/core/zone/ng_zone_impl.dart:150:21)
#23 _CustomZone.run (dart:async/zone.dart:1026)
#24 _CustomZone.runGuarded (dart:async/zone.dart:924)
#25 NgZoneImpl.runInner (package:angular2/src/core/zone/ng_zone_impl.dart:121:23)
#26 NgZone.run (package:angular2/src/core/zone/ng_zone.dart:219:27)
#27 ApplicationRef_.ApplicationRef_.<anonymous closure> (package:angular2/src/core/application_ref.dart:409:20)
#28 _RootZone.runUnaryGuarded (dart:async/zone.dart:1338)
#29 _BufferingStreamSubscription._sendData (dart:async/stream_impl.dart:331)
#30 _BufferingStreamSubscription._add (dart:async/stream_impl.dart:258)
#31 _SyncBroadcastStreamController._sendData (dart:async/broadcast_stream_controller.dart:386)
#32 _BroadcastStreamController.add (dart:async/broadcast_stream_controller.dart:261)
#33 EventEmitter.emit (package:angular2/src/facade/async.dart:95:17)
#34 NgZone._checkStable (package:angular2/src/core/zone/ng_zone.dart:146:34)
#35 NgZone.NgZone.<anonymous closure> (package:angular2/src/core/zone/ng_zone.dart:129:16)
#36 NgZoneImpl._run (package:angular2/src/core/zone/ng_zone_impl.dart:152:14)
#37 NgZoneImpl._runUnary (package:angular2/src/core/zone/ng_zone_impl.dart:157:7)
#38 _CustomZone.runUnary (dart:async/zone.dart:1037)
#39 _CustomZone.runUnaryGuarded (dart:async/zone.dart:932)
#40 _CustomZone.bindUnaryCallback.<anonymous closure> (dart:async/zone.dart:961)
#41 _Timer._Timer.<anonymous closure> (dart:html:49206)
and when run through pub serve I get the following in Chrome
EXCEPTION: NoSuchMethodError: method not found: 'configure' (animation.configure is not a function) in [selected in WaterfrontView#7:40] html_dart2js.dart:3351
EXCEPTION: NoSuchMethodError: method not found: 'configure' (animation.configure is not a function) in [selected in WaterfrontView#7:40]
ORIGINAL EXCEPTION: NoSuchMethodError: method not found: 'configure' (animation.configure is not a function)
ORIGINAL STACKTRACE:
TypeError: animation.configure is not a function
at HTMLElement._configureAnimationEffects (index.html?_ijt=j7c5fphk4jffr92eaclvnf00al:20326)
at HTMLElement.playAnimation (index.html?_ijt=j7c5fphk4jffr92eaclvnf00al:20362)
at HTMLElement._selectedChanged (index.html?_ijt=j7c5fphk4jffr92eaclvnf00al:20572)
at HTMLElement._complexObserverEffect (index.html?_ijt=j7c5fphk4jffr92eaclvnf00al:7749)
at HTMLElement._effectEffects (index.html?_ijt=j7c5fphk4jffr92eaclvnf00al:7496)
at HTMLElement._propertySetter (index.html?_ijt=j7c5fphk4jffr92eaclvnf00al:7473)
at HTMLElement.setter (index.html?_ijt=j7c5fphk4jffr92eaclvnf00al:7582)
at eval (eval at F (js_dart2js.dart:358), <anonymous>:1:39)
at h2.bt (js_dart2js.dart:387)
at h2.aC (js_dart2js.dart:392)
aE # html_dart2js.dart:3351
(anonymous function) # exception_handler.dart:80
dart.cI.$3 # exception_handler.dart:91
dart.yu.$1 # application_ref.dart:262
dart.xS.$0 # ng_zone_impl.dart:157
dart.nY # zone.dart:1150
dart.xN.fj # zone.dart:693
dart.xN.lB # ng_zone_impl.dart:157
(anonymous function) # VM202:2
bP # zone.dart:1037
bQ # zone.dart:932
W # stream_impl.dart:331
dart.ey.ay # stream_impl.dart:258
W # broadcast_stream_controller.dart:386
$1 # broadcast_stream_controller.dart:261
dart.xN.lz # ng_zone_impl.dart:190
(anonymous function) # VM198:2
aq # zone.dart:1005
ai # zone.dart:926
dart.ug.$1 # ng_zone_impl.dart:121
bQ # zone.dart:1338
W # stream_impl.dart:331
dart.ey.ay # stream_impl.dart:258
W # broadcast_stream_controller.dart:386
eH # broadcast_stream_controller.dart:261
$0 # ng_zone.dart:129
dart.xN.fj # ng_zone_impl.dart:152
dart.xN.lB # ng_zone_impl.dart:157
(anonymous function) # VM202:2
bP # zone.dart:1037
bQ # zone.dart:932
dart.Ar.$1 # zone.dart:961
dart.zF.$0 # isolate_helper.dart:1396
$0 # js_helper.dart:2408
bz # isolate_helper.dart:462
d9 # isolate_helper.dart:54
dart.HW # js_helper.dart:2408
(anonymous function) # js_helper.dart:2430
Which is telling me the dart method configure(config) is not being converted/wrapped into a JS function. Is there something I can do to fix this and get a custom dart animation to work in Polymer? And yes this is Polymer being run in a Angular 2 app, which means I am forced to use shadowroot.
UPDATE 2:
I encountered an error in the version of Chrome I was using, which relates to this bug https://github.com/Polymer/core-animation/pull/28. I found I needed to update to the latest polymer_elements 1.0.0-rc.9. Now I'm back to square one with the error being
neon-animated-pages: diagonal-left not found!
Oh well so much for progress.
I have yet again answered my own question. The only method I can get to work is to write the animation in JS, and then wrap it in a Polymer Dart wrapper. The easiest way is to use the custom_element_apigen. The problem is that's not working with the current Dart version, due to changes in pub. There is a pull request that answers that problem, but in the meantime you'll have to do it manually. I mimic the way custom_element_apigen does things.
JavaScript version in lib/src/test-animation/test-animation.html
<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="../../../../packages/polymer_elements/src/neon-animation/neon-animation-behavior.html">
<link rel="import" href="../../../../packages/polymer_elements/src/neon-animation/web-animations.html">
<script>
Polymer({
is: 'test-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
node.style.perspective = "600px";
node.style.backfaceVisibility = "hidden";
node.style.transformStyle = "preserve-3d";
node.style.transition = "transform 1s";
node.style.position = "absolute";
this._effect = new KeyframeEffect(node, [
{'transform': 'rotateY(-20deg)'},
{'transform': 'rotateY(-40deg)'},
{'transform': 'rotateY(-60deg)'},
{'transform': 'rotateY(-80deg)'},
{'transform': 'rotateY(-100deg)'},
{'transform': 'rotateY(-120deg)'},
{'transform': 'rotateY(-140deg)'},
{'transform': 'rotateY(-160deg)'},
{'transform': 'rotateY(-180deg)'},
{'transform': 'rotateY(0deg)'}
], this.timingFromConfig(config));
return this._effect;
}
});
</script>
Create a nodart html file lib/test_animation_nodart.html
<link rel="import" href="src/test-animation/test-animation.html">
<link rel="import" href="../../packages/polymer_elements/neon_animation_behavior_nodart.html">
Create the dart polymer html wrapper lib/test_animation.html. You actually don't need this file, but custom_element_apigen creates it, so I leave it in.
<link rel="import" href="test_animation_nodart.html">
<script type="application/dart" src="test_animation.dart"></script>
And then finally the dart wrapper lib test_animation.dart
#HtmlImport('test_animation_nodart.html')
library family_tree.lib.src.test_animation.test_animation;
import 'dart:html';
import 'package:web_components/web_components.dart';
import 'package:polymer_interop/polymer_interop.dart';
import 'package:polymer_elements/neon_animation_behavior.dart';
#CustomElementProxy('test-animation')
class TestAnimation extends HtmlElement with CustomElementProxyMixin, PolymerBase, NeonAnimationBehavior {
TestAnimation.created() : super.created();
}
You should now be able to include this in your neon animation element, in the animationConfig field. See this answer on how to do this.
This isn't the answer I was hoping for, but it works.