Commit 34ac1a3c authored by Balasse QIIS's avatar Balasse QIIS
Browse files

first commit

parents
# Created by .ignore support plugin (hsz.mobi)
/paper-tree-qiis/.idea/
/.idea/
/.idea/workspace.xml
# Created by .ignore support plugin (hsz.mobi)
/bower_components/
/.idea/
*.iml
\ No newline at end of file
# \<paper-tree-qiis\>
## Install the Polymer-CLI
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.
## Viewing Your Element
```
$ polymer serve
```
## Running Tests
```
$ polymer test
```
Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
{
"name": "paper-tree-qiis",
"main": "paper-tree-qiis.html",
"dependencies": {
"polymer": "Polymer/polymer#^2.0.0",
"iron-icons": "PolymerElements/iron-icons#^2.0.1",
"iron-icon": "PolymerElements/iron-icon#^2.0.1",
"paper-item": "PolymerElements/paper-item#^2.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^2.0.1",
"import-lodash": "IngressoRapidoWebComponents/import-lodash#^1.0.1"
},
"devDependencies": {
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0"
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>paper-tree-qiis demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<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-qiis.html">
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
</style>
<style>
</style>
</custom-style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic paper-tree-qiis demo</h3>
<demo-snippet>
<template>
<paper-tree-qiis data='{
"name": "Media Center",
"icon": "weekend",
"selected":true,
"open": true,
"children": [
{
"name": "Movies",
"icon": "maps:place",
"selected": false,
"open":false,
"children": [
{
"name": "Interstellar",
"icon": "hardware:tv",
"selected": true
},
{
"name": "The Godfather",
"icon": "hardware:tv",
"selected": false
},
{
"name": "Pulp Fiction",
"icon": "hardware:tv",
"selected": true
}
]
},
{
"name": "TV Shows",
"icon": "maps:place",
"selected": true,
"open":true,
"children": [
{
"name": "Breaking Bad",
"icon": "hardware:tv",
"selected": true
},
{
"name": "Game of Thrones",
"icon": "hardware:tv",
"selected": true
}
]
}
]
}'
>
</paper-tree-qiis>
</template>
</demo-snippet>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="0;url=demo/" />
<title>paper-tree-qiis</title>
</head>
<body>
<!--
ELEMENT API DOCUMENTATION SUPPORT COMING SOON
Visit demo/index.html to see live examples of your element running.
This page will automatically redirect you there when run in the browser
with `polymer serve`.
-->
</body>
</html>
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icons/av-icons.html">
<link rel="import" href="../iron-icons/maps-icons.html">
<link rel="import" href="../iron-icons/notification-icons.html">
<link rel="import" href="../iron-icons/places-icons.html">
<link rel="import" href="../iron-icons/social-icons.html">
<link rel="import" href="../iron-icons/hardware-icons.html">
<link rel="import" href="../import-lodash/import-lodash.html">
<dom-module id="paper-tree-node-qiis">
<template>
<style>
:host {
display: block;
color: var(--paper-grey-500);
}
:host(.selected) > .node-container > .node-row {
background-color: var(--paper-tree-selected-background-color, rgba(200, 200, 200, 0.5));
color: var(--paper-tree-selected-color, inherit);
}
:host(.selected) > .node-container > .node-row > #actions {
display: inline-block;
}
.node-container {
white-space: nowrap;
}
.node-row {
padding-left: 4px;
padding-right: 4px;
}
.node-preicon.collapsed,
.node-preicon.expanded {
padding-left: 0;
}
.node-preicon {
padding-left: 18px;
}
.node-preicon:before {
margin-right: 5px;
@apply(--paper-tree-toggle-theme);
}
.node-preicon.collapsed:before {
content: '\002B';
}
.node-preicon.expanded:before {
content: '\2212';
}
.node-preicon, .node-name {
cursor: pointer;
}
.node-icon {
cursor: pointer;
--iron-icon-width: 24px;
--iron-icon-height: 24px;
color: var(--paper-grey-500);
@apply(--paper-tree-icon-theme);
}
.selected {
font-weight: bold;
color: black;
@apply(--paper-tree-text-selected);
}
.selected.node-icon {
color: var(--paper-pink-500);
@apply(--paper-tree-icon-selected);
}
#actions {
display: none;
float: right;
padding: 0;
top: -8px; /* cancel the padding of `paper-icon-button`. */
}
ul {
margin: 0;
padding-left: 20px;
}
li {
list-style-type: none;
}
[hidden] {
display: none;
}
</style>
<div class="node-container">
<div class="node-row" data-item$="{{data}}" id="row">
<span class$="{{_computeClass(data.*)}} [[selectedClass]]" on-click="toggleChildren"></span>
<iron-icon class$="node-icon [[selectedClass]]" icon$="{{_computeIcon(data.icon)}}" on-click="select"></iron-icon>
<span class$="node-name [[selectedClass]]" on-click="select">{{data.name}}</span>
</div>
<template is="dom-if" if="{{data.open}}">
<ul>
<template is="dom-repeat" items="{{data.children}}">
<li>
<paper-tree-node-qiis data="{{item}}" actions="{{actions}}" parent$="{{data.name}}"></paper-tree-node-qiis>
</li>
</template>
</ul>
</template>
</div>
</template>
<script>
/**
* `paper-tree-qiis`
*
*
* @customElement
* @polymer
* @demo demo/index.html
*/
class PaperTreeNodeQiis extends Polymer.Element {
static get is() {
return 'paper-tree-node-qiis';
}
static get observers() {
return [
// Observer method name, followed by a list of dependencies, in parenthesis
'_changeDataSelected(data.*)'
]
}
static get properties() {
return {
/**
* Data hold by this node (contains the children).
*
* Specific data:
*
* - `data.name`: string representing the node name.
* - `data.icon`: string telling which icon to use (default to 'folder' icon).
* - `data.open`: boolean telling whether the node is expanded or not.
* - `data.children` array containing the children of the node.
*/
data: {
type: Object,
value: function () {
return null;
},
notify: true,
observer: '_changeData'
},
/**
* `actions` available for this node. Each action object has the following fields:
*
* - `action.label`: string representing the display name of the menu item.
* - `action.event`: string which is the event name to dispatch whenever the item is clicked.
*
*/
actions: {
type: Array,
value: function () {
return null;
}
},
parent: {
type: String
},
selectedClass: {
type: String
}
};
}
ready() {
//FIXME gerer la cascading lors de la selection du parent sur plusieurs niveau
super.ready();
window.addEventListener('selected', e => {
console.log("selected");
if (this.parent && this.parent === e.detail.context) {
console.log("slectedChange");
this.selectedClass = e.detail.value ? 'selected' : '';
}
});
window.addEventListener('changedata', e => {
console.log("changeData");
if(this.data.children){
// console.log(this.data,this.data.children);
this.data.selected = _.every(this.data.children,['selected',true]);
}
// console.log(this.data.selected);
console.log(this.data.selected);
this.selectedClass = this.data.selected ? 'selected' : '';
});
}
_changeDataSelected(data) {
// console.log(this,data);
this.dispatchEvent(new CustomEvent('changedata', {detail: {value: this, selected: this.data.selected}, bubbles: true, composed: true}));
}
/**
* The `select` event is fired whenever `select()` is called on the node.
*
* @event select
*/
/**
* The `toggle` event is fired whenever a tree node is expanded or collapsed.
*
* @event toggle
*/
/**
* Returns the necessary classes.
*
* @param {object} change An object containing the property that changed and its value.
* @return {string} The class name indicating whether the node is open or closed
*/
_computeClass(change) {
let open = change && change.base && change.base.open;
let children = change && change.base && change.base.children;
let className = 'node-preicon ' + ((open && children && children.length) ? 'expanded' : children && children.length ? 'collapsed' : '');
return className + ((children && children.selected) ? ' selected' : '');
}
_computeClassSelected(data) {
return data && data.selected ? 'selected' : '';
}
/**
* Compute the necessary node icon.
*
* @param {string=folder} an icon name.
* @return {string} the computed icon name.
*/
_computeIcon(icon) {
return icon ? icon : 'folder';
}
_changeData(data) {
// console.log(data);
this.selectedClass = this.data.selected ? 'selected' : '';
}
_actionClicked(event) {
this.dispatchEvent(new CustomEvent(event.model.item.event, {detail: {value: this}, bubbles: true, composed: true}));
}
/**
* Highlights node as the selected node.
*/
select(e) {
this.selectedClass = this.data.selected ? 'selected' : '';
if (this.data.children) {
for (let i = 0; i < this.data.children.length; i++) {
console.log(this.data.selected);
this.data.children[i].selected = !this.data.selected;
this.dispatchEvent(new CustomEvent('selected', {detail: {value: this.data.selected, context: this.data.name}, bubbles: true, composed: true}));
}
}
this.set('data.selected', !this.data.selected);
this.dispatchEvent(new CustomEvent('select', {detail: {value: this.data}, bubbles: true, composed: true}));
// console.log(this.data);
}
/**
* Returns the parent tree node. Returns `null` if root.
*/
getParent() {
return this.domHost && this.domHost.tagName === 'PAPER-TREE-NODE-QIIS' ? this.domHost : null;
}
/**
* Returns the children tree nodes.
*/
getChildren() {
return Polymer.dom(this.root).querySelectorAll('paper-tree-node-qiis');
}
/**
* Display/Hide the children nodes.
*/
toggleChildren() {
console.log(this.data);
this.set("data.open", !this.data.open && this.data.children && this.data.children.length);
if (this.data.children) {
for (let i = 0; i < this.data.children.length; i++) {
this.data.children[i].selected = this.data.selected;
this.dispatchEvent(new CustomEvent('selected', {detail: {value: this.data.selected, context: this.data.name}, bubbles: true, composed: true}));
}
}
}
}
window.customElements.define(PaperTreeNodeQiis.is, PaperTreeNodeQiis);
</script>
</dom-module>
<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="paper-tree-node-qiis.html">
<!--
`<paper-tree-node>` display a tree node with expandable/collapsible capabilities and actions menu.
A node is defined by a name, an icon and a list of actions.
Example:
<paper-tree-node></paper-tree-node>
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-tree-selected-background-color` | Highlight color for selected node | `rgba(200, 200, 200, 0.5)`
`--paper-tree-selected-color` | Text and icon color for selected node | `inherit`
`--paper-tree-toggle-theme` | Change theme for node +/- toggle |
`--paper-tree-icon-theme` | Change theme for node icon |
@demo
-->
<dom-module id="paper-tree-qiis">
<template>
<style>
:host {
display: block;
}
#root{
color:black!important;
font-weight: bold!important;
}
#root{
--paper-tree-icon-theme:{
color: var(--paper-grey-500);
}
}
</style>
<paper-tree-node-qiis id="root" data="[[data]]" actions="[[actions]]"></paper-tree-node-qiis>
</template>
<script>
/**
* `paper-tree-qiis`
*
*
* @customElement
* @polymer
* @demo demo/index.html
*/
class PaperTreeQiis extends Polymer.Element {
static get is() {
return 'paper-tree-qiis';
}
static get properties() {
return {
/**
* Data hold by the root node (contains the children).
*
* Specific data:
*
* - `data.name`: string representing the node name.
* - `data.icon`: string telling which icon to use (default to 'folder' icon).
* - `data.open`: boolean telling whether the node is expanded or not.
* - `data.children` array containing the children of the node.
*/
data: {
type: Object,
value: function () {
return null;
},
observer: "_dataChanged"
},
/**
* `selected` is the current selected `<paper-tree-node>` in the tree.
*/
selected: {
type: Object,
value: null,
notify: true
},
/**
* `actions` available for all nodes. Each action object has the following fields:
*
* - `action.label`: string representing the display name of the menu item.
* - `action.event`: string which is the event name to dispatch whenever the item is clicked.
*
*/
actions: {
type: Array,
value: function () {
return null;
},
observer: "_actionsChanged"
}
};
}
ready() {
super.ready();
window.addEventListener('select', e => {
this._selectNode(e);
});
}
/**
* Called whenever the data is changed to notify the lower nodes.
*/
_dataChanged() {
this.$.root.data = this.data;
}
/**
* Called whenever the actions list is changed to notify the lower nodes.
*/
_actionsChanged() {
this.$.root.actions = this.actions;
}
/**
* Called when the `select` event is fired from an internal node.
*
* @param {object} e An event object.
*/
_selectNode(e) {