I am trying with paper-dropdown-menu. It seems to be working on Google Chrome but on Firefox the dropdown menu is not coming up. Is this only compatible with Chrome browser?
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="cc-dropdown">
<template>
{{selectedData}}
<paper-dropdown-menu label="Environment">
<paper-menu class="dropdown-content" attr-for-selected="value" selected="{{selectedData}}">
<template is="dom-repeat" items="{{data}}">
<paper-item value="{{item}}">{{item}}</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'cc-dropdown',
properties: {
data: {
type: Array,
value: ["Stage", "Prod"],
notify: true
},
selectedData: {
type: String,
value: "Stage",
notify: true
}
}
});
})();
</script>
</dom-module>
Here is the one that works for me
Related
I try to embed a ui-grid in a component, and the embedded ui-grid doesnt render
I built a Plnkr to visualize the problem.
index.html
<!doctype html>
<html ng-app="app">
<head>
<scripts> ... </script>
</head>
<body>
<div ng-controller="MainCtrl as $ctrl">
DataGrid in HTML
<div id="grid1" ui-grid="{ data: $ctrl.myData }" class="grid"></div>
<h1>Template/ Component</h1>
<hero-detail hero="$ctrl.hero" myData="$ctrl.myData"}"</hero-detail>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
angular.module('app', ['ngTouch', 'ui.grid'])
.controller('MainCtrl', MainCtrl)
.component('heroDetail', {
template: `
<div>
DataGrid in Template
<div id="grid1" ui-grid="{ data: $ctrl.myData }" class="grid"></div>
<span>Name: {{$ctrl.hero.name}}</span>
</div>
`,
bindings: {
hero: '=',
myData: '='
}
});
function MainCtrl() {
this.hero = {name: 'Spawn'};
this.myData = [
{
firstName: "Cox",
lastName: "Carney",
company: "Enormo",
employed: true
},
...
];
}
Do you have an idea how to arrive at a workable solution?
Thanks for your input!
Looking at this github, all camelCase bindings in the component are translated to kabab-case in the html. So your component reference in the index.html needs to be changed from
<hero-detail hero="$ctrl.hero" myData="$ctrl.myData"></hero-detail>
into
<hero-detail hero="$ctrl.hero" my-data="$ctrl.myData"></hero-detail>
Also, a side note, you have a typo where ="$ctrl.myData"}"</hero-detail> needs to be changed to ="$ctrl.myData"></hero-detail>
I have problems testing the next component:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../maps/maps-api.html">
<dom-module id="address-input">
<template>
<maps-api on-api-load="_onApiLoad"></maps-api>
<paper-input
id="address"
name$="[[name]]"
label$="[[label]]"
placeholder="[[placeholder]]"
required$="[[required]]"
value="{{value}}"
disabled="{{disabled}}"
always-float-label
on-keydown="_onKeyDown"></paper-input>
</template>
<script>
(function () {
'use strict';
Polymer({
is: 'address-input',
properties: {
value: {
type: String,
notify: true
},
name: {
type: Object
},
label: {
type: Object
},
lastAutoCompleteResult: {
type: Object,
notify: true,
observer: '_onLastAutoCompleteResultChange'
},
disabled: {
type: Boolean,
value: false
},
required: {
type: Boolean,
value: false
},
map: {
type: Object
}
},
attached: function () {
if (!this._autocomplete && window.google && window.google.maps) this._onApiLoad();
},
_onApiLoad: function () {
//DOES SOMETHING
}
_onLastAutoCompleteResultChange: function () {
//DOES SOMETHING
}
});
})();
</script>
</dom-module>
and that module includes maps-api
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="stylesheet" href="../../bower_components/google-apis/google-maps-api.html">
<!--
Wrapper for the google maps api component in order to avoid copying the
API key everywhere just import this component instead.
-->
<dom-module id="maps-api">
<template>
<google-maps-api api-key="[[apiKey]]" version="3"></google-maps-api>
</template>
<script>
(function () {
'use strict';
Polymer({
is: 'maps-api',
properties: {
apiKey: {
type: String,
value: APP_CONFIG.gmapsApiKey
},
}
})
})();
</script>
</dom-module>
this is the test:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>my-greeting-basic</title>
<script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="../bower_components/web-component-tester/browser.js"></script>
<!-- Import the element to test -->
<link rel="import" href="../elements/common/address-input.html">
</head>
<maps-api on-api-load="_onApiLoad"></maps-api>
<body>
<test-fixture id="address-input">
<template>
<address-input
id="address"
value="430 W Erie St"
></address-input>
</template>
</test-fixture>
<script>
describe('address-input', function (done) {
var addressInput, id, value;
beforeEach(function () {
APP_CONFIG = {};
APP_CONFIG = {gmapsApiKey:"someKey"};
addressInput = fixture('address-input');
});
test('should enable when disable is false', function () {
addressInput.disabled = false;
var element = document.getElementById('address');
var isDisabled = element.disabled;
assert.equal(isDisabled, false);
});
});
</script>
</body>
</html>
The problem is the global variable APP_CONFIG is undefined forthe component map-api
I get this error:
Error: APP_CONFIG is not defined
at /components/elements/maps/maps-api.html:23
at /components/elements/maps/maps-api.html:27
(I'm using Mocha,Chai and Sinon)
what's the correct way to set global variables in polymer testing?
Regarding Neon Animations ( https://elements.polymer-project.org/guides/using-neon-animations )
Is it possible to specify the same animation to run simultaneously on multiple nodes?
For example:
animationConfig: {
value: function() {
return {
'entry': {
name: 'bounce-in-animation',
node: Polymer.dom(this.root).querySelectorAll("div"), // here
timing: {duration: 1000}
},
'exit': {
name: 'fade-out-animation',
node: this
}
}
}
}
In the above code sample (specifically in "//here"), I’m attempting to run ‘bounce-in-animation’ on multiple div instances instead of just one.
Is this presently possible?
I tried the code above, and got a 'Cannot execute' type of error. So I'm really asking if there is a way to achieve what the code above intends. Thanks
You have to import cascaded-animation and in your entry definition use:
{
name: 'cascaded-animation',
animation: 'bounce-in-animation',
nodes: Polymer.dom(this.root).querySelectorAll("div"),
nodeDelay: 0, // You can use this to delay animation between each node
timing: {duration: 1000}
}
Here you have a quick demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Polymer cascaded animation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents.min.js"></script>
<link href="https://polygit.org/components/polymer/polymer.html" rel="import">
<link href="https://polygit.org/components/neon-animation/neon-animation-runner-behavior.html" rel="import">
<link href="https://polygit.org/components/neon-animation/animations/fade-in-animation.html" rel="import">
<link href="https://polygit.org/components/neon-animation/animations/cascaded-animation.html" rel="import">
</head>
<body>
<dom-module id="x-foo">
<template>
<div>
Hi! I'm a div!
</div>
<div>
Hello! I'm another div!
</div>
<div>
And I'm the last div!
</div>
<button on-tap="runAnimation">Click me!</button>
</template>
<script>
HTMLImports.whenReady(function () {
Polymer({
is: 'x-foo',
behaviors: [
Polymer.NeonAnimationRunnerBehavior
],
properties: {
animationConfig: {
value: function() { return {
'entry': {
name: 'cascaded-animation',
animation: 'fade-in-animation',
nodes: Polymer.dom(this.root).querySelectorAll("div"),
nodeDelay: 0, // You can use this to delay animation between each node
timing: {duration: 1000}
}
} }
}
},
runAnimation: function() {
this.playAnimation('entry')
}
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
</html>
EDIT: If you are confused about imports - import from bower_components, I had to import from those sources to make the demo work.
EDIT2: After reading your comment I have another idea: you can tell Polymer that every time the elements is initialized you want it to check all of the divs in it and register animation for this one. I'm not best at describing but maybe the demo will help you understand it better:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Polymer cascaded animation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents.min.js"></script>
<link href="https://polygit.org/components/polymer/polymer.html" rel="import">
<link href="https://polygit.org/components/neon-animation/neon-animation-runner-behavior.html" rel="import">
<link href="https://polygit.org/components/neon-animation/animations/fade-in-animation.html" rel="import">
<link href="https://polygit.org/components/neon-animation/animations/cascaded-animation.html" rel="import">
</head>
<body>
<dom-module id="x-foo">
<template>
<div>
Hi! I'm a div!
</div>
<div>
Hello! I'm another div!
</div>
<div>
And I'm the last div!
</div>
<button on-tap="runAnimation">Click me!</button>
</template>
<script>
HTMLImports.whenReady(function () {
Polymer({
is: 'x-foo',
behaviors: [
Polymer.NeonAnimationRunnerBehavior
],
properties: {
animationConfig: {
value: function() { return {
'entry': {
// Leave empty
}
} }
}
},
ready: function() {
var divsNL = Polymer.dom(this.root).querySelectorAll('div');
var divs = Array.prototype.slice.call(divsNL);
var output = [];
divs.forEach(function(item) {
output.push({
name: 'fade-in-animation',
node: item,
timing: { duration: 1000 }
});
});
this.set('animationConfig.entry', output);
},
runAnimation: function() {
this.playAnimation('entry')
}
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
</html>
For some reason with the way we structured the page, the tooltip is not working.
main.html
<div class="main-navigation">
<div rt-tool-menus-"menus" selected="selectedMenus" tooltip="{{appController.displayName}}"></div>
</div>
controller.js
angular.module('abc')
.controller('abcController',.....
self.menus=[
{
heading: 'Head1',
active: false,
route: 'head1'
},
{
heading: 'Head2',
active: false,
route: 'head2'
tooltip: 'head2' // tried, doesnt work
}];
self.selectedMenus = []'
self.tooltip = appConfig.displayName; // tried not working
what would be the right approach to show tooltip with the correct header, and location?
Not sure what appConfig is (not visible in your snippet) but you have to add the text you want to show in the tooltip to an instance variable of the controller if you're using controllerAs or a $scope variable.
Please have a look at the code below or in this jsFiddle.
It's not clear what rt-tool-menus is. Is it a custom directive?
angular.module('demoApp', ['ngAnimate', 'ui.bootstrap'])
.config(function($tooltipProvider) {
$tooltipProvider.options({placement: 'bottom'});
})
.controller('mainController', function($scope){
this.displayName = 'Hello there';
});
.main-navigation {
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js"></script>
<div ng-app="demoApp" ng-controller="mainController as mainCtrl">
<div class="main-navigation">
<div rt-tool-menus-"menus" selected="selectedMenus" tooltip="{{mainCtrl.displayName}}">Hover me to show tooltip!!!</div>
</div>
</div>
The UI-Router docs shows that you can use dots in route name:
<!-- partials/state1.html -->
<h1>State 1</h1>
<hr/>
<a ui-sref="state1.list">Show List</a>
<div ui-view></div>
But however in my app this doesn't work. This is an example that worked fine until I changed client to client.ts everywhere:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" ui-sref="index">Quick Start</a>
<ul class="nav">
<li><a ui-sref="index">Home</a></li>
<li><a ui-sref="clien.ts">Clients</a></li>
<li><a ui-sref="route1">Route 1</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="span6">
<div class="well" ui-view=""></div>
</div>
<div class="span6">
<div class="well" ui-view="viewB"></div>
</div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- App Script -->
<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider){
$stateProvider
.state('index', {
url: "",
views: {
"": {
template: "index.viewA-index"
},
"viewB": {
template: "index.viewB"
}
}
})
.state('route1', {
url: "/route1",
views: {
"": {
template: "route1.viewA-route1"
},
"viewB": {
template: "route1.viewB"
}
}
})
.state('clien.ts', {
url: "/clients",
views: {
"viewB": {
template: "clients.viewA-route2"
},
"": {
controller: function($scope, ClientService) {
console.log('Controller code being run');
$scope.clients = ClientService.clientList();
},
templateUrl: 'client-list-template.html'
}
}
})
})
.service('ClientService', function() {
this.clientList = function() {
clients = [{'name': 'Acme Food', 'description': 'Makers of fine food'},
{'name': 'Dog Biscuits Inc', 'description': 'Cruncy creations for canines'},
{'name': 'Parrot treats Ltd', 'description': 'Puveyors of bird food'},
{'name': 'Pond supplies', 'description': 'Sell fish and gravel'}];
return(clients);
}
});
</script>
</body>
</html>
Plunker here: http://plnkr.co/edit/ZD7WlC9aKzpwte9dVMxC?p=preview
As you can see the link can't be clicked :/
What you need to do is add an abstract state for clien in that case.
Here's the plunkr, with the added state: plunkr
Whenever you define states with the dot. You still need to at least define the abstract state for the child. In your case for clien.
Also something from the docs
If you register only a single state, like contacts.list, you MUST define a state called contacts at some point, or else no states will be registered. The state contacts.list will get queued until contacts is defined. You will not see any errors if you do this, so be careful that you define the parent in order for the child to get properly registered.