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>
Related
I have the following code:
index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<div some-message></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js file
var app = angular.module('myModule', []);
var myController = function($scope) {
$scope.message = 'sdsd';
var technologies = [
{ name: "C#", likes: 0, dislikes: 0 },
{ name: "ASP.NET", likes: 0, dislikes: 0 },
{ name: "SQL", likes: 0, dislikes: 0 },
{ name: "AngularJS", likes: 0, dislikes: 0 }
];
$scope.technologies = technologies;
$scope.updateLikes = function(tech) {
tech.likes++;
}
}
app.controller('myController', myController)
app.directive('someMessage', function() {
return {
templateUrl: 'some-message.html',
controller: function($scope) {
$scope.testName = "Andrej";
console.log('tech', $scope.technologies)
// $scope.updateLikes = function(tech) {
// tech.likes++;
// }
}
}
})
and
some.message.html
<ul>
<li ng-repeat="tech in technologies">
{{ tech.name }} -- {{ tech.likes }} <button ng-click="updateLikes(tech)">Set like</button>
</li>
</ul>
so as you can see inside my module i have one controller and directive.
I have function where on button click i am increasing the likes for every technology.
Because i am new to angular.js i don't know.
Is there downsite if my updateLikes function is in the controller , instead of directive ?
Note i have the same function in the directive and it works same.
And why the function
updateLikes can be executed in the controller ?
As i understood when we have nested scopes the child scope can access the scope in the parent but not in the opposite case
I am new to React JS The question is that I need to display all the fields from my database in this piece of code. I have been able to obtain all the data as objects in the browser console and I am able to view the last piece of data in the array in the browser but have not been able to view them. Please forgive me for the wrong format in the code as I am new to this.Thanks in advance.....
Output and Codes
Browser View:
Land of Toys Inc. is the name 131 is the ID
The JSON data :
{"posts":[
{"id":"103","name":"Atelier graphique"},
{"id":"112","name":"Signal Gift Stores"},
{"id":"114","name":"Australian Collectors, Co."},
{"id":"119","name":"La Rochelle Gifts"},
{"id":"121","name":"Baane Mini Imports"},
{"id":"124","name":"Mini Gifts Distributors Ltd."},
{"id":"125","name":"Havel & Zbyszek Co"},
{"id":"128","name":"Blauer See Auto, Co."},
{"id":"129","name":"Mini Wheels Co."},
{"id":"131","name":"Land of Toys Inc."}
]}
This data is obtained through a PHP code written as a plugin which is in the form of a url which is given in the JS code
http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json
My Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://npmcdn.com/react#15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://npmcdn.com/jquery#3.1.0/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/remarkable#1.6.2/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var UserGist = React.createClass({
getInitialState: function() {
return {
username:[],
companyID:[]
};
},
componentDidMount: function()
{
var rows = [];
this.serverRequest = $.get(this.props.source, function (result) {
for (var i=0; i < 10; i++)
{
var lastGist = result.posts[i];
//console.log(result.posts[i]);
this.setState({
username: lastGist.id,
companyID: lastGist.name
});
}
}.bind(this));
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<li>{this.state.companyID} is the name {this.state.username} is the ID</li>
);
}
});
ReactDOM.render(
<UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />,
document.getElementById('content')
);
</script>
</body>
</html>
Use map to render your data. and store the json as a javascript object in the state itself instead of two seperate arrays.
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://npmcdn.com/react#15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://npmcdn.com/jquery#3.1.0/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/remarkable#1.6.2/dist/remarkable.min.js"></script>
<div id="content"></div>
<script type="text/babel">
var UserGist = React.createClass({
getInitialState: function() {
return {
data: [{"id":"103","name":"Atelier graphique"},
{"id":"112","name":"Signal Gift Stores"},
{"id":"114","name":"Australian Collectors, Co."},
{"id":"119","name":"La Rochelle Gifts"},
{"id":"121","name":"Baane Mini Imports"},
{"id":"124","name":"Mini Gifts Distributors Ltd."},
{"id":"125","name":"Havel & Zbyszek Co"},
{"id":"128","name":"Blauer See Auto, Co."},
{"id":"129","name":"Mini Wheels Co."},
{"id":"131","name":"Land of Toys Inc."}]
};
},
componentDidMount: function()
{
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<div>
{this.state.data.map(function(item, index){
return <li>{item.name} is the company name, {item.id} is the ID</li>
})}</div>
);
}
});
ReactDOM.render(
<UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />,
document.getElementById('content')
);
</script>
</html>
JSFIDDLE
For the fiddle example I have deleted your $.get() code in componentDidMount.
P.S. Create the state array data as an array of object as shown in the
fiddle example
It will help you i think.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://npmcdn.com/react#15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://npmcdn.com/jquery#3.1.0/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/remarkable#1.6.2/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var UserGist = React.createClass({
getInitialState: function() {
return {
username:[],
companyID:[]
};
},
componentDidMount: function()
{
var rows = [];
this.serverRequest = $.get(this.props.source, function (result) {
var username = [];
var companyID = [];
for (var i=0; i < 10; i++)
{
var lastGist = result.posts[i];
//console.log(result.posts[i]);
username.push(lastGist.id);
companyID.push(lastGist.name);
}
this.setState({
username: username,
companyID: companyID,
});
}.bind(this));
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<div>
{this.state.companyID.map(function(item, index){
return <li>{item} is the company name, {this.state.username[index]} is the ID</li>
})}</div>
);
}
});
ReactDOM.render(
<UserGist source="http://localhost/Akshay/REACT/testDataAPI.php?user=2&num=10&format=json" />,
document.getElementById('content')
);
</script>
</body>
</html>
We use Kendo UI diagram to represent a BPMN diagram (activity flow).
We also use Angular.
How can I bind an array of objects to the shapes Data Source, aka, every change to this array will mimic the same change in the Kendo UI diagram?
Update:
I found an example without Angular JS: http://dojo.telerik.com/ILUCOQ
Here you can defined scope and pass to function as a parameter and you can change dynamically change scope, and on scope change re-call those function that render UI with new parameter[scope].
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/diagram/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content wide" ng-controller="MyCtrl">
<div kendo-diagram k-options="options"></div>
</div>
</div>
<script>
angular.module("KendoDemos", ["kendo.directives"])
.controller("MyCtrl", function($scope){
$scope.change = [3,3,2]; // You Can Dynamically Change this scope that will reflect the UI
$scope.options = {
dataSource: {
data: diagramNodes($scope.c),
schema: {
model: {
children: "items"
}
}
},
layout: {
type: "tree",
subtype: "down",
horizontalSeparation: 30,
verticalSeparation: 20
},
shapeDefaults: {
width: 40,
height: 40
}
};
})
function diagramNodes(data) {
var root = { name: "0", items: [] };
addNodes(root, data);
return [root];
}
function addNodes(root, levels) {
if (levels.length > 0) {
for (var i = 0; i < levels[0]; i++) {
var node = { name: "0", items: [] };
root.items.push(node);
addNodes(node, levels.slice(1));
}
}
}
</script>
</body>
</html>
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?
I Wrote A Peace Of Code Which If Works Expected To Get Profile Pic And User Name From GitHub API According To User Input. Console Also Not Showing Any Error.Can Any One Help Me Correct This Thanks In Advance .
This I What I Tried So Far
var Main = React.createClass({
getInitialState:function(){
return({
user:[]
});
},
addUser: function(loginToAdd) {
this.setState({user: this.state.logins.concat(loginToAdd)});
},
render: function() {
var abc = this.state.user.map(function(user){
return(
<Display user={user} key={user}/>
);
});
return (
<div>
<Form addUser={this.addUser}/>
{abc}
<hr />
</div>
)
}
});
var Form = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var loginInput = React.findDOMNode(this.refs.login);
this.props.addUser(loginInput.value);
loginInput.value = '';
},
render:function(){
return (
<div onSubmit={this.handleSubmit}>
<input type="text" placeholder="github login" ref="login"/>
<button>Add</button>
</div>
)
}
});
var Display = React.createClass({
getInitialState:function(){
return{};
},
componentDidMount:function(){
var component = this;
$.get("https://api.github.com/users/"+this.props.user,function(data){
component.setState(data);
});
},
render: function() {
return (
<div>
<img src={this.state.avatar_url} width="80"/>
<h1>{this.state.name}</h1>
</div>
)
}
});
ReactDOM.render(<Main />, document.getElementById("app"));
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="container">
<div id="app"></div>
</div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
</body>
</html>
JSBin Link
div do not have an onSubmit event form do however, fix that and you should be ok