Skip to content

Commit

Permalink
staging this for now. WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@bot2x
bot2x committed Feb 16, 2024
1 parent f583dc5 commit 00caa51
Show file tree
Hide file tree
Showing 4 changed files with 171 additions and 31 deletions.
15 changes: 9 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,26 +11,29 @@
</div> -->

<div id="top_container">
<nav>This will be the nav bar</nav>
<div id="contain_editors" contenteditable="true">
<div id="file1" class="tabcontent">This is the content from <strong>File 1</strong></div>
<div id="file2" class="tabcontent">This is the content from <strong>File 2</strong></div>
<!-- <nav>This will be the nav bar</nav>
<div id="contain_editors">
<div id="file1" class="tabcontent" contentEditable="true">This is the content from <strong>File 1</strong></div>
<div id="file2" class="tabcontent" contentEditable="true">This is the content from <strong>File 2</strong></div>
</div>
<div id="contain_tablinks">
<button id="tab-file1" class="button_effect tablink">File1</button>
<button id="tab-file2" class="button_effect tablink">File2</button>
<button id="add_tab" class="button_effect">New File +</button>
</div>
</div> -->
</div>


<script type="text/javascript" src="js/layoutcontrols/tabControls.js"></script>
<script type="text/javascript" src="js/utils/tabFunctions.js"></script>
<script>

tc = TabController(2);

tc.selectThisTab(document.getElementById("tab-file1"));
// tc.selectThisTab(document.getElementById("tab-file1"));

tc.initTabLayout(document.getElementById("top_container"));

</script>
</body>
Expand Down
137 changes: 113 additions & 24 deletions js/layoutcontrols/tabControls.js
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,99 @@
numOfTabLayouts = 0 //this is global variable. Wrap this in a function later.


//This is going to be the main function class which will coordinate all tab related operations.
function TabController(numTabs) {
function TabController(numTabs=0) {
let nTabs = numTabs;
// let openTabs = [];
const selfRef = this;

function doSetup() {
console.log ("do setup is called.");
handleTabEvents = tabEventHandlers();
function getThis() {
return selfRef;
}

// console.log(handleTabEvents.openTabHandler);
function initTabLayout (tabContainerRef) {
if (!tabContainerRef) alert("[Undefined Reference] Cannot create a tab layout without the container reference.");

//attach event listeners.
tabButtons = document.getElementsByClassName("tablink");
addTabButton = document.getElementById("add_tab");
const tabEditor = getTabParentContainers();
let tabs = null;

Array.from(tabButtons).forEach((t) => {

console.log(t.className);
for (let tn=1; tn<=nTabs; tn++){
tabs = getTabDivPair(tn);

tabEditor.editorContainer.appendChild(tabs.tabcontent);
tabEditor.linkContainer.appendChild(tabs.tablink);
}

console.log(tabEditor);

//add the add more button
tabEditor.linkContainer.appendChild(getAddTabButton());

//Insert the tab layout in the DOM.
tabContainerRef.appendChild(tabEditor.navBar);
tabContainerRef.appendChild(tabEditor.editorContainer);
tabContainerRef.appendChild(tabEditor.linkContainer);

t.addEventListener('click', () => handleTabEvents.openTabHandler(t));
});
//Hydrate the added components in the DOM.
doHydrate(tabEditor);

//Select the first tab as a default behavior.
tabEditor.linkContainer.firstElementChild.click();

//incr the global counter.
numOfTabLayouts++;
}

addTabButton.addEventListener('click', () => handleTabEvents.addTabHandler(addTabButton));
function doHydrate(tabEditorRef=null) {
console.log ("do hydration is called.");
handleTabEvents = tabEventHandlers();

// console.log(handleTabEvents.openTabHandler);
// if (tabContainerRef) {
// //Let walk the container elements to hydrate them.
// for (const child of tabContainerRef.children) {
// if (child.id.startsWith("contain_tablinks")) {
// for (const cn of child.children) {
// if (cn.id.startsWith("tab-file")){
// cn.addEventListener('click', () => handleTabEvents.openTabHandler(cn));
// }
// if (cn.id.startsWith("add_tab")) {
// cn.addEventListener('click', () => handleTabEvents.addTabHandler(cn));
// }
// }
// }
// }
// }
if (tabEditorRef) {
for (const cn of tabEditorRef.linkContainer.children) {
if (cn.id.startsWith("tab-file")){
cn.addEventListener('click', () => handleTabEvents.openTabHandler(cn, getThis()));
}
if (cn.id.startsWith("add_tab")) {
cn.addEventListener('click', () => handleTabEvents.addTabHandler(cn, getThis()));
}
}

} else {
//To apply for manually created ones.

//attach event listeners.
tabButtons = document.getElementsByClassName("tablink");
addTabButton = document.getElementById("add_tab");

Array.from(tabButtons).forEach((t) => {

console.log(t.className);

t.addEventListener('click', () => handleTabEvents.openTabHandler(t));
});

addTabButton.addEventListener('click', () => handleTabEvents.addTabHandler(addTabButton));
}
console.log("hydration is finished.");
}
//Setup the tab layout and hydrate it.
doSetup();
// doHydrate(); //Moving this as a step for initTabLayout.

//this will hold the html ref for the currently selected tab. To be used by other modules for context management.
let selectedTabRef = {
Expand Down Expand Up @@ -60,14 +128,16 @@ function TabController(numTabs) {
totalOpenTabs,
selectThisTab,
getCurrentTabRef,
initTabLayout,
// getThis,
};
}

//This will hold all tab related event handlers.
function tabEventHandlers () {
console.log("tab event handler instantiated.");

const openTabHandler = (element) => {
const openTabHandler = (element, tcRef = null) => {

console.log("open tab got called.");
//Hide all the tabs
Expand All @@ -85,22 +155,38 @@ function tabEventHandlers () {
const tabcontentToHighlight = getContainerForTab(element);
tabcontentToHighlight.style.display = "block";

tc.selectThisTab(element, doClick=false);
if (tcRef)
tcRef.selectThisTab(element, doClick=false);
else
tc.selectThisTab(element, doClick=false);
}

const addTabHandler = (element) => {
const addTabHandler = (element, tcRef = null) => {

let fileNum = 0;
if (tcRef) {
console.log(tcRef.totalOpenTabs());

tcRef.incrTabs();
fileNum = tcRef.totalOpenTabs();

console.log(tc.totalOpenTabs());
tablink_container = element.parentNode; //document.getElementById("contain_tablinks");
tab_container = tablink_container.previousSibling;

tc.incrTabs();
const fileNum = tc.totalOpenTabs();
} else {
console.log(tc.totalOpenTabs());

tab_container = document.getElementById("contain_editors");
tablink_container = document.getElementById("contain_tablinks");
tc.incrTabs();
fileNum = tc.totalOpenTabs();

tab_container = document.getElementById("contain_editors");
tablink_container = document.getElementById("contain_tablinks");
}

let div_tab = document.createElement("div");
div_tab.id = `file${fileNum}`;
div_tab.className = "tabcontent";
div_tab.contentEditable="true";
div_tab.innerHTML = `Start typings in file - ${fileNum}`;

// let div_tab = `<div id="file${fileNum}" class="tabcontent">Start typings ..... </div>`
Expand All @@ -119,7 +205,10 @@ function tabEventHandlers () {
// document.getElementById(button_tab.id).className += " button_effect tablink";

//click the newly added button to select it.
tc.selectThisTab(button_tab);
if (tcRef)
tcRef.selectThisTab(button_tab);
else
tc.selectThisTab(button_tab);
}

return {
Expand Down
48 changes: 48 additions & 0 deletions js/utils/tabFunctions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,52 @@
function getContainerForTab (tabButtonRef) {
containerId = tabButtonRef.id.trim() ? tabButtonRef.id.trim().split("-")[1] : "";
return document.getElementById(containerId);
}

function getTabParentContainers() {
let nav_bar = document.createElement("nav");
nav_bar.innerHTML = "This will be a nav bar soon";

let editor_container = document.createElement("div");
editor_container.id = `contain_editors_${numOfTabLayouts}`

let link_container = document.createElement("div");
link_container.id = `contain_tablinks_${numOfTabLayouts}`

return {
navBar : nav_bar,
editorContainer : editor_container,
linkContainer : link_container,
}
}

function getTabDivPair (tabN) {
let div_tab = document.createElement("div");
div_tab.id = `file${tabN}`;
div_tab.className = "tabcontent";
div_tab.contentEditable="true";
div_tab.innerHTML = `Start typings in file - ${tabN}`;

// let div_tab = `<div id="file${fileNum}" class="tabcontent">Start typings ..... </div>`
let button_tab = document.createElement("button");
button_tab.id = `tab-file${tabN}`;
button_tab.className = `button_effect tablink`;
button_tab.innerHTML = `File${tabN}`;
//Avoid this here. This will be done during hydration stage.
// button_tab.addEventListener('click', () => openTabHandler(button_tab));

return {
tabcontent : div_tab,
tablink : button_tab,
}
}

function getAddTabButton () {
//<button id="add_tab" class="button_effect">New File +</button>
let add_tab = document.createElement("div");
add_tab.id = `add_tab_${numOfTabLayouts}`;
add_tab.className = `button_effect`;
add_tab.innerHTML = "New File +";

return add_tab;
}
2 changes: 1 addition & 1 deletion styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ body {
font-size: 1.6rem;
}

.contain_tablinks {
#contain_tablinks {
/* height: 20px; */
display: flex;
/* position: absolute; */
Expand Down

0 comments on commit 00caa51

Please sign in to comment.