2
0
mirror of https://github.com/frappe/books.git synced 2024-12-23 03:19:01 +00:00

Tree as Web Component

This commit is contained in:
Faris Ansari 2018-04-09 17:58:51 +05:30
parent f7db1206b0
commit 2909cd74b7
6 changed files with 314 additions and 119 deletions

View File

@ -4,7 +4,6 @@
@import "node_modules/flatpickr/dist/themes/airbnb";
@import "node_modules/codemirror/lib/codemirror";
@import "node_modules/frappe-datatable/dist/frappe-datatable";
// @import "node_modules/octicons/build/build.css";
@import "./variables.scss";
@import "./indicators.scss";

View File

@ -1,111 +1,123 @@
@import "./variables.scss";
.tree {
.tree-body {
padding: $spacer-3 $spacer-4;
}
.tree li {
list-style: none;
f-tree, f-tree-node {
display: block;
}
ul.tree-children {
padding-left: $spacer-4;
}
.tree-link {
cursor: pointer;
display: flex;
align-items: center;
width: 100%;
}
.tree-link:hover {
f-tree-node:hover {
background-color: $gray-100;
cursor: pointer;
}
.tree-link .node-parent {
color: $gray-600;
width: 24px;
height: 24px;
text-align: center;
}
// .tree {
// padding: $spacer-3 $spacer-4;
// }
.tree-link .node-leaf {
color: $gray-400;
}
// .tree li {
// list-style: none;
// }
.tree-link .node-parent, .tree-link .node-leaf {
padding: $spacer-2;
}
.tree-link.active {
a {
color: $gray-600;
}
}
.tree-hover {
background-color: $gray-200;
min-height: 20px;
border: 1px solid $gray-600;
}
.tree-node-toolbar {
display: inline-block;
padding: 0px 5px;
margin-left: 15px;
margin-bottom: -4px;
margin-top: -8px;
}
// @media (max-width: @screen-xs) {
// ul.tree-children {
// padding-left: 10px;
// padding-left: $spacer-4;
// }
// .tree-link {
// cursor: pointer;
// display: flex;
// align-items: center;
// width: 100%;
// }
// .tree-link:hover {
// background-color: $gray-100;
// }
// .tree-link .node-parent {
// color: $gray-200;
// width: 24px;
// height: 24px;
// }
// .tree-link .node-leaf {
// color: $gray-400;
// }
// .tree-link .node-parent, .tree-link .node-leaf {
// padding: $spacer-2;
// }
// .tree-link.active {
// a {
// color: $gray-600;
// }
// }
// decoration
// .tree, .tree-node {
.tree.with-skeleton, .tree.with-skeleton .tree-node {
position: relative;
// .tree-hover {
// background-color: $gray-200;
// min-height: 20px;
// border: 1px solid $gray-600;
// }
&.opened::before, &:last-child::after {
content: '';
position: absolute;
top: 12px;
left: 7px;
height: calc(100% - 23px);
width: 1px;
background: $gray-400;
z-index: -1;
}
// .tree-node-toolbar {
// display: inline-block;
// padding: 0px 5px;
// margin-left: 15px;
// margin-bottom: -4px;
// margin-top: -8px;
// }
&:last-child::after {
top: 11px;
left: -13px;
height: calc(100% - 15px);
width: 3px;
background: #fff;
}
// // @media (max-width: @screen-xs) {
// // ul.tree-children {
// // padding-left: 10px;
// // }
// // }
&.opened > .tree-children > .tree-node > .tree-link::before {
content: '';
position: absolute;
width: 18px;
height: 1px;
top: 10px;
left: -12px;
z-index: -1;
background: $gray-400;
}
}
// // decoration
// // .tree, .tree-node {
// .tree.with-skeleton, .tree.with-skeleton .tree-node {
// position: relative;
.tree.with-skeleton.opened::before {
left: 22px;
top: 33px;
height: calc(100% - 67px);
}
// &.opened::before, &:last-child::after {
// content: '';
// position: absolute;
// top: 12px;
// left: 7px;
// height: calc(100% - 23px);
// width: 1px;
// background: $gray-400;
// z-index: -1;
// }
.tree-link.active ~ .balance-area {
color: $gray-600 !important;
}
// &:last-child::after {
// top: 11px;
// left: -13px;
// height: calc(100% - 15px);
// width: 3px;
// background: #fff;
// }
// &.opened > .tree-children > .tree-node > .tree-link::before {
// content: '';
// position: absolute;
// width: 18px;
// height: 1px;
// top: 10px;
// left: -12px;
// z-index: -1;
// background: $gray-400;
// }
// }
// .tree.with-skeleton.opened::before {
// left: 22px;
// top: 33px;
// height: calc(100% - 67px);
// }
// .tree-link.active ~ .balance-area {
// color: $gray-600 !important;
// }

View File

@ -64,6 +64,35 @@ module.exports = {
element.parentNode.removeChild(element);
},
on(element, event, selector, handler) {
if (!handler) {
handler = selector;
this.bind(element, event, handler);
} else {
this.delegate(element, event, selector, handler);
}
},
off(element, event, handler) {
element.removeEventListener(event, handler);
},
bind(element, event, callback) {
event.split(/\s+/).forEach(function (event) {
element.addEventListener(event, callback);
});
},
delegate(element, event, selector, callback) {
element.addEventListener(event, function (e) {
const delegatedTarget = e.target.closest(selector);
if (delegatedTarget) {
e.delegatedTarget = delegatedTarget;
callback.call(this, e, delegatedTarget);
}
});
},
empty(element) {
while (element.firstChild) {
element.removeChild(element.firstChild);

View File

@ -2,7 +2,98 @@ const frappe = require('frappejs');
const octicons = require('octicons');
const utils = require('frappejs/client/ui/utils');
class Tree {
const iconSet = {
open: octicons["triangle-down"].toSVG({ width: "12", height: "12", "class": "tree-icon-open" }),
close: octicons["triangle-right"].toSVG({ width: "12", height: "12", "class": "tree-icon-closed" })
};
let TreeTemplate = document.createElement('template');
TreeTemplate.innerHTML = `
<div class="tree">
<slot></slot>
</div>
`;
class Tree extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' })
.appendChild(TreeTemplate.content.cloneNode(true));
}
}
window.customElements.define('f-tree', Tree);
let TreeNodeTemplate = document.createElement('template');
TreeNodeTemplate.innerHTML = `
<style>
.tree-node-content {
display: flex;
align-items: center;
}
.tree-node-icon {
width: 2rem;
height: 2rem;
}
.tree-node-icon svg {
padding: 0.5rem;
}
</style>
<div class="tree-node-content">
<div class="tree-node-icon"></div>
<div class="tree-node-label"></div>
<div class="tree-node-actions"></div>
</div>
<slot></slot>
`;
class TreeNode extends HTMLElement {
static get observedAttributes() {
return ['label', 'expanded']
}
constructor() {
super();
let shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.appendChild(TreeNodeTemplate.content.cloneNode(true));
this.iconEl = shadowRoot.querySelector('.tree-node-icon');
this.labelEl = shadowRoot.querySelector('.tree-node-label');
this.actionsEl = shadowRoot.querySelector('.tree-node-actions');
}
attributeChangedCallback(name, oldValue, newValue) {
console.log(name, oldValue, newValue);
switch(name) {
case 'label': {
this.labelEl.innerHTML = newValue || '';
break;
}
case 'expanded': {
this.expanded = this.hasAttribute('expanded');
if (this.expanded) {
this.iconEl.innerHTML = iconSet.open;
} else {
this.iconEl.innerHTML = iconSet.close;
}
break;
}
default: break;
}
}
}
window.customElements.define('f-tree-node', TreeNode);
class TreeOld {
constructor({ parent, label, iconSet, withSkeleton, method }) {
Object.assign(this, arguments[0]);
this.nodes = {};
@ -91,7 +182,7 @@ class Tree {
let iconHtml = '';
if (this.iconSet) {
iconHtml = node.expandable ? this.iconSet.closed : this.iconSet.leaf;
iconHtml = node.expandable ? this.iconSet.closed : '';
}
let labelEl = `<span class="tree-label"> ${node.label}</span>`;

View File

@ -56,18 +56,83 @@ module.exports = class BaseTree extends BaseList {
}
renderTree(rootLabel) {
this.tree = new Tree({
// const tree = new Tree();
// tree.getChildNodes = async node => {
// const children = await this.getData(node) || [];
// return children.map(d => ({
// label: d.name,
// value: d.name,
// expandable: d.isGroup
// }));
// }
// tree.rootNode = {
// label: rootLabel,
// value: rootLabel,
// isRoot: 1,
// expandable: 1
// }
// this.body.appendChild(tree);
this.rootNode = {
label: rootLabel,
parent: this.body,
method: async node => {
const children = await this.getData(node) || [];
return children.map(d => ({
label: d.name,
value: d.name,
expandable: d.isGroup
}));
value: rootLabel,
isRoot: true,
expanded: true,
children: []
}
const getNodeHTML = node =>
`<f-tree-node
label="${node.label}"
value="${node.value}"
${node.expanded ? 'expanded' : ''}
${node.isRoot ? 'is-root' : ''}>
</f-tree-node>`;
this.treeWrapper = frappe.ui.create('f-tree');
this.rootNode.el = frappe.ui.create(getNodeHTML(this.rootNode), {
inside: this.treeWrapper
});
this.treeWrapper = frappe.ui.create(`
<f-tree>
${getNodeHTML(this.rootNode)}
</f-tree>
`);
this.body.appendChild(this.treeWrapper);
frappe.ui.on(this.treeWrapper, 'click', 'f-tree-node', async (e, treeNode) => {
if (treeNode.expanded) {
treeNode.removeAttribute('expanded');
} else {
treeNode.setAttribute('expanded', '');
}
let node = null;
// if (treeNode.hasAttribute('is-root')) {
// node = this.rootNode;
// } else {
// }
});
// this.tree = new Tree({
// label: rootLabel,
// parent: this.body,
// method: async node => {
// const children = await this.getData(node) || [];
// return children.map(d => ({
// label: d.name,
// value: d.name,
// expandable: d.isGroup
// }));
// }
// });
}
async getData(node) {

View File

@ -5,7 +5,6 @@ module.exports = {
format: 'cjs'
},
plugins: [
require('rollup-plugin-sass')(),
require('rollup-plugin-postcss')({
extract: true,
plugins: [