Skip to content

Commit 1e3c7d4

Browse files
shuartshuart
committed
start folder view refactor
1 parent 53f27a5 commit 1e3c7d4

File tree

4 files changed

+190
-17
lines changed

4 files changed

+190
-17
lines changed

‎src/js/modules/common_ui_components/folder_view/folder_custom_table.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
export function createFolders({
2+
domElement = undefined,
3+
childrenOffset=15,
4+
data=[
5+
{name:"test", _children:[
6+
{name:"testChild"},
7+
]},
8+
{name:"test2"},
9+
{name:"test3"},
10+
]
11+
}={}) {
12+
var self = {}
13+
var dataMap = {}
14+
var dataList = []
15+
var lastId =0
16+
17+
var dataToDomElement= function (record) {
18+
var itemData = record.data
19+
var itemElement = document.createElement("div")
20+
21+
if (record.level>0) {
22+
itemElement.style.marginLeft = (record.level*childrenOffset) + "px"
23+
}
24+
if (record.children) {
25+
itemElement.innerHTML += "- "
26+
}
27+
28+
itemElement.innerHTML += itemData.name
29+
itemElement.dataset.did = record.id
30+
31+
record.domElement = itemElement //update the record with the dom element
32+
return itemElement
33+
}
34+
35+
var recordData = function (itemData, domElement, parent, level) {
36+
var toRecord = {id:lastId, data:itemData, domElement:domElement, parent, level, children:itemData._children}
37+
dataList.push(toRecord)
38+
dataMap[lastId]=toRecord
39+
lastId ++
40+
return toRecord
41+
}
42+
43+
44+
var update = function () {
45+
dataMap = {}
46+
dataList = []
47+
48+
domElement.innerHTML=""
49+
processItems(data, domElement)
50+
}
51+
52+
var processItems = function (items, domElement, parent, level) {
53+
var currentLevel = level || 0
54+
for (let i = 0; i < items.length; i++) {
55+
const element = items[i];
56+
var record = recordData(element, undefined, parent, currentLevel)
57+
var elementToAppend = dataToDomElement(record)
58+
59+
60+
domElement.append(elementToAppend)
61+
if (element._children) {
62+
processItems(element._children, domElement, element, currentLevel+1)
63+
}
64+
}
65+
}
66+
67+
68+
var init = function () {
69+
update()
70+
}
71+
72+
init()
73+
74+
75+
76+
return self
77+
}

‎src/js/modules/common_ui_components/folder_view/folder_view.js

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { createAdler } from "../../../vendor/adler.js";
22
import {TabulatorFull as Tabulator} from "../../../vendor/tabulator_esm.min.js";
3+
import { createFolders } from "./folder_custom_table.js";
34

45

56
// import {checkColsForCustomFormating} from "./table_custom_formaters.js"
@@ -58,23 +59,28 @@ var setUpTable = function(self){
5859

5960

6061
var tableAra = instanceElem
61-
console.log(tableAra);
62-
var table = new Tabulator(instanceElem, {
63-
// height:tableHeight, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
64-
data:itemsList, //assign data to table
65-
headerVisible:false,
66-
dataTreeCollapseElement:"<span class='collapse'>></span>",
67-
dataTreeBranchElement:"<span class='branch'>", //hide branch element
68-
dataTreeChildIndent:25, //indent child rows by 15 px
69-
layout:"fitColumns", //fit columns to width of table (optional)
70-
columns:colsList,
71-
dataTree:options.dataTree,
72-
dataTreeStartExpanded:options.dataTreeStartExpanded,
73-
dataTreeElementColumn:options.dataTreeElementColumn,
74-
});
75-
self.tablepr = table //to avoid using a proxy
76-
console.log(table.rowManager)
7762

63+
// console.log(tableAra);
64+
// var table = new Tabulator(instanceElem, {
65+
// // height:tableHeight, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
66+
// data:itemsList, //assign data to table
67+
// headerVisible:false,
68+
// dataTreeCollapseElement:"<span class='collapse'>></span>",
69+
// dataTreeBranchElement:"<span class='branch'>", //hide branch element
70+
// dataTreeChildIndent:25, //indent child rows by 15 px
71+
// layout:"fitColumns", //fit columns to width of table (optional)
72+
// columns:colsList,
73+
// dataTree:options.dataTree,
74+
// dataTreeStartExpanded:options.dataTreeStartExpanded,
75+
// dataTreeElementColumn:options.dataTreeElementColumn,
76+
// movableRows:true,
77+
// // movableRowsConnectedElements: "#drop-area", //element to receive rows
78+
// });
79+
// self.tablepr = table //to avoid using a proxy
80+
// console.log(table.rowManager)
81+
var table = createFolders({
82+
domElement:tableAra,
83+
})
7884

7985

8086
}

‎src/js/modules/tools_collections/tools_collections.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import state from "../common_state/state_manager.js";
55
import createInstancesManagement from "../common_project_management/instances_management.js";
66
import project_views from "../project_views/project_views.js";
77
import createStructuresManagement from "../common_project_management/structures_management.js";
8+
// import { sortable } from "./tools_collections_storable.js";
89

910

1011

@@ -204,4 +205,4 @@ var toolsCollections =createAdler({
204205
`,
205206
})
206207

207-
export default toolsCollections
208+
export default toolsCollections

‎src/js/modules/tools_collections/tools_collections_storable.js

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
export function sortable(self, section, onUpdate){
2+
3+
section.addEventListener('dragstart', function(e){
4+
dragEl = e.target;
5+
nextEl = dragEl.nextSibling;
6+
7+
e.dataTransfer.effectAllowed = 'move';
8+
e.dataTransfer.setData('Text', dragEl.textContent);
9+
10+
section.addEventListener('dragover', _onDragOver, false);
11+
section.addEventListener('dragend', _onDragEnd, false);
12+
13+
setTimeout(function (){
14+
dragEl.classList.add('ghost');
15+
}, 0)
16+
17+
});
18+
}
19+
20+
// function sortable(self, section, onUpdate){
21+
// var dragEl, nextEl, newPos, dragGhost;
22+
// console.log([...section.children]);
23+
24+
// let oldPos = [...section.children].map(item => {
25+
// console.log(item);
26+
// item.draggable = true
27+
// let pos = self.query("#"+item.id).getBoundingClientRect();
28+
// return pos;
29+
// });
30+
31+
// function _onDragOver(e){
32+
// e.preventDefault();
33+
// e.dataTransfer.dropEffect = 'move';
34+
35+
// var target = e.target;
36+
// if(!target.classList.contains("dragging_placeholder")){
37+
// target = target.closest(".dragging_placeholder")
38+
// }
39+
// if( target && target !== dragEl && target.nodeName == 'DIV' ){
40+
// if(target.classList.contains('inside')) {
41+
// console.log("inside");
42+
// e.stopPropagation();
43+
// } else {
44+
45+
// var targetPos = target.getBoundingClientRect();//getBoundinClientRect contains location-info about the element (relative to the viewport)
46+
// var next = (e.clientY - targetPos.top) / (targetPos.bottom - targetPos.top) > .5 || (e.clientX - targetPos.left) / (targetPos.right - targetPos.left) > .5; //checking that dragEl is dragged over half the target y-axis or x-axis. (therefor the .5)
47+
// console.log(dragEl);
48+
// console.log(next && target.nextSibling);
49+
// console.log(next && target.nextSibling || target);
50+
// section.insertBefore(dragEl, next && target.nextSibling || target);
51+
52+
// /* console.log("oldPos:" + JSON.stringify(oldPos));
53+
// console.log("newPos:" + JSON.stringify(newPos)); */
54+
// /* console.log(newPos.top === oldPos.top ? 'They are the same' : 'Not the same'); */
55+
// console.log(oldPos);
56+
// }
57+
// }
58+
// }
59+
60+
// function _onDragEnd(evt){
61+
// evt.preventDefault();
62+
// newPos = [...section.children].map(child => {
63+
// let pos = self.query("#"+child.id).getBoundingClientRect();
64+
// return pos;
65+
// });
66+
// console.log(newPos);
67+
// dragEl.classList.remove('ghost');
68+
// section.removeEventListener('dragover', _onDragOver, false);
69+
// section.removeEventListener('dragend', _onDragEnd, false);
70+
71+
// nextEl !== dragEl.nextSibling ? onUpdate(dragEl) : false;
72+
// }
73+
74+
// section.addEventListener('dragstart', function(e){
75+
// dragEl = e.target;
76+
// nextEl = dragEl.nextSibling;
77+
78+
// e.dataTransfer.effectAllowed = 'move';
79+
// e.dataTransfer.setData('Text', dragEl.textContent);
80+
81+
// section.addEventListener('dragover', _onDragOver, false);
82+
// section.addEventListener('dragend', _onDragEnd, false);
83+
84+
// setTimeout(function (){
85+
// dragEl.classList.add('ghost');
86+
// }, 0)
87+
88+
// });
89+
// }

0 commit comments

Comments
 (0)