Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

2.0 preview #8

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

2.0 preview #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b30bd82
[WIP] Hybrid 2.0.
andreaskalin May 16, 2017
25f5555
[WIP] Hybrid 2.0. Fixed playground demo.
andreaskalin May 16, 2017
87fe797
Hybrid 2.0.
andreaskalin May 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
/bower_components
/.idea
/bower_components*
/bower-*.json
/.idea
45 changes: 32 additions & 13 deletions bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "paper-tree",
"main": "paper-tree.html",
"version": "1.0.3",
"version": "2.0-preview",
"description": "A custom element displaying a browsable tree.",
"keywords": [
"tree",
Expand All @@ -16,19 +16,38 @@
"Florian Maffini <florian.maffini@free.fr>"
],
"dependencies": {
"polymer": "Polymer/polymer#^1.7.0",
"paper-menu": "PolymerElements/paper-menu#^1.2.2",
"paper-menu-button": "PolymerElements/paper-menu-button#^1.5.2",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.1.4",
"paper-item": "PolymerElements/paper-item#^1.2.1",
"iron-icons": "PolymerElements/iron-icons#^1.2.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.12"
"polymer": "Polymer/polymer#^2.0.0-rc.3",
"paper-listbox": "PolymerElements/paper-listbox#2.0-preview",
"paper-menu-button": "PolymerElements/paper-menu-button#2.0-preview",
"paper-icon-button": "PolymerElements/paper-icon-button#2.0-preview",
"paper-item": "PolymerElements/paper-item#2.0-preview",
"iron-icons": "PolymerElements/iron-icons#2.0-preview",
"iron-icon": "PolymerElements/iron-icon#2.0-preview"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
"iron-component-page": "PolymerElements/iron-component-page#2.0-preview",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#2.0-preview",
"web-component-tester": "^6.0.0-prerelease.5",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.5",
"web-animations-js": "^2.2.5"
},
"variants": {
"1.x": {
"dependencies": {
"polymer": "Polymer/polymer#^1.7.0",
"paper-listbox": "PolymerElements/paper-listbox#^1.1.3",
"paper-menu-button": "PolymerElements/paper-menu-button#^1.5.2",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.1.4",
"paper-item": "PolymerElements/paper-item#^1.2.1",
"iron-icons": "PolymerElements/iron-icons#^1.2.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.12"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}
}
}

123 changes: 54 additions & 69 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,14 @@
<title>paper-tree Demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../../web-animations-js/web-animations-next-lite.min.html"> <!-- Shim for KeyframeEffect, used in neon-animation/fade-in-animation (from paper-menu-button). The KeyframeEffect exception did however not appear in pre 2.0... -->
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../paper-tree.html">

<style is="custom-style" include="demo-pages-shared-styles"></style>
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles"></style>
</custom-style>
</head>
<body>

Expand Down Expand Up @@ -173,81 +176,63 @@ <h3>Complex tree demo</h3>
<h3>Lazy loading demo</h3>
<demo-snippet>
<template>
<template id="t" is="dom-bind">
<style is="custom-style">
@keyframes blinker {
50% { opacity: 0; }
}

#tree {
--paper-tree-toggle-theme: {
animation: blinker 1s linear infinite;
content: '⧖';
margin-left: -21px;
};
}
</style>

<paper-tree id="tree" on-toggle="onToggle" data='{"name": "Loading..."}'></paper-tree>

<script>

var template = document.querySelector('#t'),
tree = template.$.tree;

// Update the root data after 1 second delay
window.setTimeout(function() {
tree.data = { name:'Cronos' };
// Fetching root children ...
template.fetchChildren(tree.$.root);
}, 1000);


template.onToggle = function(event) {
var target = event.detail;

if (!target.loaded) {
target.loaded = true;
target.getChildren().forEach(function(child){
// Fetching children ...
this.fetchChildren(child);
}, this);
}
},
<dom-bind>
<template is="dom-bind">

template.setLoadingState = function(node, enabled) {
<paper-tree id="tree" on-toggle="onToggle" data='{"name": "Loading..."}'></paper-tree>

if (enabled) {
node.customStyle['--paper-tree-toggle-theme'] = 'animation: blinker 1s linear infinite; content: \'⧖\'; margin-left: -21px;';
} else {
node.customStyle['--paper-tree-toggle-theme'] = ';';
}
<script>

node.updateStyles();
},
var template = document.querySelector('dom-bind'),
tree = template.$.tree;

template.fetchChildren = function(node) {
// Update the root data after 1 second delay
window.setTimeout(function() {
tree.data = { name:'Cronos' };
// Fetching root children ...
template.fetchChildren(tree.$.root);
}, 1000);


template.onToggle = function(event) {
var target = event.detail;

if (!target.loaded) {
target.loaded = true;
target.getChildren().forEach(function(child){
// Fetching children ...
this.fetchChildren(child);
}, this);
}
},

// Set loading styles
this.setLoadingState(node, true);
template.setLoadingState = function(node, enabled) {
node.set('data.loading', enabled);
},

window.setTimeout(function() {
template.fetchChildren = function(node) {

// Add children to the node
node.set('data.children', [
{name: 'Zeus'},
{name: 'Apollo'},
{name: 'Athena'},
{name: 'Poseidon'}
]);

// Reset loading styles
this.setLoadingState(node, false);

}.bind(this), Math.floor(Math.random() * 2000));
}
</script>
</template>
// Set loading styles
this.setLoadingState(node, true);

window.setTimeout(function() {

// Add children to the node
node.set('data.children', [
{name: 'Zeus'},
{name: 'Apollo'},
{name: 'Athena'},
{name: 'Poseidon'}
]);

// Reset loading styles
this.setLoadingState(node, false);

}.bind(this), Math.floor(Math.random() * 2000));
}
</script>
</template>
</dom-bind>
</template>
</demo-snippet>

Expand Down
28 changes: 4 additions & 24 deletions demo/lazyloading.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,20 +7,7 @@
</head>
<body>

<template id="t" is="dom-bind">
<style is="custom-style">
@keyframes blinker {
50% { opacity: 0; }
}

#tree {
--paper-tree-toggle-theme: {
animation: blinker 1s linear infinite;
content: '⧖';
margin-left: -21px;
};
}
</style>
<dom-bind><template is="dom-bind">
<h2>Lazy loading paper-tree demo</h2>
<p>
Here we use the 'toggle' event to lazy load grandchildren.<br>
Expand All @@ -29,7 +16,7 @@ <h2>Lazy loading paper-tree demo</h2>
<paper-tree id="tree" on-toggle="onToggle" data='{"name": "Loading..."}'></paper-tree>
<script>

var template = document.querySelector('#t'),
var template = document.querySelector('dom-bind'),
tree = template.$.tree;

// Update the root data after 1 second delay
Expand All @@ -53,14 +40,7 @@ <h2>Lazy loading paper-tree demo</h2>
},

template.setLoadingState = function(node, enabled) {

if (enabled) {
node.customStyle['--paper-tree-toggle-theme'] = 'animation: blinker 1s linear infinite; content: \'⧖\'; margin-left: -21px;';
} else {
node.customStyle['--paper-tree-toggle-theme'] = ';';
}

node.updateStyles();
node.set('data.loading', enabled);
},

template.fetchChildren = function(node) {
Expand All @@ -84,7 +64,7 @@ <h2>Lazy loading paper-tree demo</h2>
}.bind(this), Math.floor(Math.random() * 2000));
}
</script>
</template>
</template></dom-bind>


</body>
Expand Down
9 changes: 5 additions & 4 deletions demo/playground.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
<html>
<head>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../web-animations-js/web-animations-next-lite.min.html"> <!-- Shim for KeyframeEffect, used in neon-animation/fade-in-animation (from paper-menu-button). The KeyframeEffect exception did however not appear in pre 2.0... -->

<link rel="import" href="../paper-tree.html" />
</head>
<body>
<template is="dom-bind">
<dom-bind><template is="dom-bind">
<h3>GOT Tree: {{selected.data.name}}</h3>
<paper-tree selected="{{selected}}"></paper-tree>
<script>
Expand All @@ -32,9 +33,9 @@ <h3>GOT Tree: {{selected.data.name}}</h3>
]
};
</script>
</template>
</template></dom-bind>

<template is="dom-bind">
<dom-bind><template is="dom-bind">
<h3>Media Tree</h3>
<paper-tree data='{
"name": "Media Center",
Expand All @@ -57,6 +58,6 @@ <h3>Media Tree</h3>
"event": "play"
}]'>
</paper-tree>
</template>
</template></dom-bind>
</body>
</html>
Loading