Using Get following javascript error when using polymer core element animation imperatively . what am I missing?
Uncaught ReferenceError: CoreAnimation is not defined
var fadein = new CoreAnimation();
fadein.duration = 1000;
fadein.keyframes = [
{opacity: 0},
{opacity: 0.3},
{opacity: 1}
];
Maybe a stupid question, but did you include core-animation.html?
<link rel="import" href="components/core-animation/core-animation.html">
When do you try to programatically create your CoreAnimation instance?
If you do it too early it might be that it hasn't been initialized yet.
Try this:
<script>
// Wait for 'polymer-ready'. Ensures the element is upgraded.
window.addEventListener('polymer-ready', function(e) {
var animation = new CoreAnimation();
});
</script>
Related
I'm trying to hide a div (answers-box) nested in a shadowRoot element, but can't seem to do so.
When I inspect the page with dev tools, this is the format:
I'm using the following at the end of my code to work with the shadowRoot element:
<script>
$(document).ready(function ()
{
var crowdElement = document.getElementById('myCrowd');
console.log(crowdElement);
var shRoot = crowdElement.shadowRoot;
console.log('Here is the var: ' + shRoot)
});
</script>
</body>
</html>
but it comes back as null in the console.
At the time you execute the ready callback the Custom Element <crown-form> is not defined yet.
Probably because the loading of the Custom Element definition is deferred or asynchronous.
You should wait for it by using whenDefined().
customElements.whenDefined( 'crowd-form' ).then( () => {
var crowdElement = document.getElementById('myCrowd');
console.log(crowdElement);
var shRoot = crowdElement.shadowRoot;
console.log('Here is the var: ' + shRoot)
} )
If crowdElement.shadowRoot is returning null then this Shadow DOM is closed. This means that its implementation internals are inaccessible and unchangeable from JavaScript. Here you can read more about closed shadow DOMs.
i'm trying to call a dynamic custom element's method. It works only when the call is made inside the script tag of the custom element's html file. But when call is made in another custom element's script tag or in the script tag of index.html, i get the error: 'method-name' not a function in the console. Thanks for your response. for context, here is a snippet
// in my custom element html file
....
<script type="text/javascript">
Polymer( {
is: "my-new-view",
toggleContent: function() {
this.$.collapse.toggle();
},
insertContent: function (userContent) {
console.log("inserting userContent...");
}
});
</script>
</dom-module>
</html>
Now in another file my-app.html
...
<link rel="import" href="my-new-view.html">
...
<dom-module is="my-app">
...
<script>
...
// i want to test my-new-view. insertContent() here.
var dynamicView = document.createElement('my-new-view');
// in the following line i get the error insertContent is
// not a function
dynamicView.insertContent();
</script>
</dom-module>
pls help. what am i doing wrong. i tried the last 2 lines of javascript in my index.html as well but i get the same error. Thanks.
I think that maybe you're trying to call that method too early, when the elements have not been registered yet.
In index.html you can wrap you code in handler of WebComponentsReady event
window.addEventListener('WebComponentsReady', function(e) {
document.createElement('my-new-view').insertContent();
});
In other Polymer elements you could move your code inside of the my-app element rather than directly in the script.
Also, to check whether a custom element is available I look at document.createElement('my-new-view').constructor. If it says function HTMLElement() { [native code] } (in Chrome), it means that it's not available (usually an import is missing).
I'm trying to write a polymer element in charge of draw a google maps representation.
This is the code:
#CustomTag('map-element')
class MapElement extends PolymerElement {
...
#override
void attached() {
super.attached();
canvasMap = $['canvas_map'];
initMap();
window.navigator.geolocation.watchPosition(enableHighAccuracy: true)
.listen(
(Geoposition position) {addPosition(position);},
onError: (error) => handleError(error));
}
...
void initMap(){
gmap = new GMap(
canvasMap,
new MapOptions()
..zoom = 4
..center = new LatLng(0, 0)
..mapTypeId = MapTypeId.ROADMAP
);
line = new Polyline(
new PolylineOptions ()
..map = gmap
..strokeColor='#0022ee'
..geodesic=true
..strokeOpacity=0.7
..strokeWeight=2
..visible=true);
}
}
And this is the exception thrown when I try to create an instance of GMap:
Class 'GElement' has no instance method '[]'.
NoSuchMethodError: method not found: '[]'
Receiver: Instance of 'GElement'
Arguments: ["maps"]
I think the problem is because polymer uses DOM shadow, do you know any workaround?
Here is the whole project: https://github.com/carlosvin/snowroute
Now it is working, here you can try it: http://carlosvin.github.io/snowroute/
I have added javascript tag only in index.html, not in polymer element declaration.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
My try is in https://github.com/carlosvin/snowroute , the relevant files for this question are: web/map_element.dart, web/map_element.html and web/index.html.
Simple, you're just missing the JavaScript tag
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
I also tried to do what you're doing and forgot to include this, and got the same error. I found you can include it here
<polymer-element name="map-element">
<template>
<div id="canvas_map"></div>
</template>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="application/dart" src="map_element.dart"></script>
</polymer-element>
Or you can include it in the main index.html file.
Though this doesn't implement the CSS you must apply to actually size and see the map, that's another question, one which I've already answered here How to use javascript from Dart inside a polymer element.
I am using the code-mirror component from the Polymer Designer, and can set the initial value, but cannot see how to get changes to the code from the user.
I initialise the code-mirror using
<code-mirror id="code_mirror" value="{{code}}">
</code-mirror>
and would like to listen for changes in {{code}}, but codeChanged doesn't seem to fire.
I know I can get the actual value using code_mirror.$.mirror.getValue(), but would like to use data-binding.
I have tried using on-change to no avail.
Assuming you're using https://github.com/PolymerLabs/code-mirror what you need to do is make the CodeMirror instance created in the ready handle some events that the instance itself is emitting, then make the code-mirror element fire any custom event (something which I know is called event relay)
The following example makes the polymer element fire the custom event code-change whenever the editor value is changed
ready: function() {
var me = this;
//...
this.mirror = CodeMirror(this.shadowRoot, { /* ... */ });
this.mirror.on('change', function () {
// me = polymer instance
me.fire('code-change', { value: me.mirror.getValue() })
});
}
Then any instance of the polymer custom element would need to listen to that event using Polymer's declarative event mapping or through addEventListener
1st case (if code-mirror is inside another <polymer-element />):
<code-mirror on-code-change="{{ onCodeChange }}"></code-mirror>
// ...
<script>
Polymer({
onCodeChange: function(event, detail, sender) { ... }
});
</script>
2nd case ():
<code-mirror></code-mirror>
<script>
document
.querySelector('code-mirror')
.addEventListener('code-change', function () { ... });
</script>
I have a strange conflict in my code.
I have a function that called from body onload:
var someGlobalVar=new SpecialType();
function OnBodyLoad()
{
someGlobalVar.Bind();
}
But when I include jQuery 1.4.2 in my project I get an error that someGlobalVar is undefined.
Why is the global variable undefined now, and what ways are there to fix it?
Unless you need to use <body onload='OnBodyLoad()'> anymore, you can change thise to use jQuery's document.ready (and move it to an external file!) like this:
var someGlobalVar=new SpecialType();
$(OnBodyLoad);
//or..
$(function() {
//other stuff..
OnBodyLoad();
});
//or...
$(document).ready(function() {
//other stuff..
OnBodyLoad();
});
Why don't you use jQuery's load event?
$(window).load(function() {
functiontoexecute();
});
It is simple, and it is easy.
Just a side note.
// DOM Ready
$(document).ready(function() {});
// When the page has completely loaded
<body onload="someFunction()">
Perhaps jQuery interferes with SpecialType and so the call to new SpecialType(); results in the variable someGlobalVar being undefined.
Try using the console to check for any warnings, and try to instantiate a SpecialType object manually. This should give you some insight.