Mirrors/ICEcoder
2
0
Fork 0
mirror of https://github.com/icecoder/ICEcoder.git synced 2026-03-03 07:13:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

Tab dragging, sortTabs, alphaTabs & dynamic close

Browse Source 
closeButtons now take the parent nodes' ID to know what to close, also
image inside has no ID anymore, targetted via
childNodes[0].childNodes[0] from parent tab
var diffX at top of function
Setting both tabSlide and tabDrag classes on start of tab dragging now
Massively improved and finished tabDragStart, tabDragMove & tabDragEnd
functions
New functions - sortTabs and alphaTabs
No need to get cM on redoTabHightlight, and it also sets the close tab
BG color by targeting the child elems, no need to consider or update an
ID on this anymore.
Now asking to close on all tabs
This commit is contained in:
Matt Pass
2013-02-08 10:57:49 +00:00
parent 8cd5a10ea8
commit 3fb9836fc8
1 changed files with 101 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
lib/ice-coder.js
View File

@@ -562,7 +562,7 @@ var ICEcoder = {
if(i>-1) {
// rename array item and the tab
top.ICEcoder.openFiles[i] = newName;
closeTabLink = '<a nohref onClick="top.ICEcoder.files.contentWindow.closeTab('+(i+1)+')"><img src="images/nav-close.gif" id="closeTabButton'+(i+1)+'" class="closeTab" onMouseOver="prevBG=this.style.backgroundColor;this.style.backgroundColor=\'#333\'" onMouseOut="this.style.backgroundColor=prevBG"></a>';
closeTabLink = '<a nohref onClick="top.ICEcoder.closeTab(parseInt(this.parentNode.id.slice(3),10))"><img src="images/nav-close.gif" class="closeTab" onMouseOver="prevBG=this.style.backgroundColor;this.style.backgroundColor=\'#333\'" onMouseOut="this.style.backgroundColor=prevBG"></a>';
fileName = top.ICEcoder.openFiles[i];
top.document.getElementById('tab'+(i+1)).innerHTML = closeTabLink + " " + fileName.slice(fileName.lastIndexOf("/")).replace(/\//,"");
top.document.getElementById('tab'+(i+1)).title = newName;
@@ -1094,9 +1094,9 @@ var ICEcoder = {
// Test if we need to show a drag cursor or not
dragCursorTest: function() {
var winH, cursorName;
var winH, cursorName, diffX;
var diffX = top.ICEcoder.mouseX - top.ICEcoder.diffStartX;
diffX = top.ICEcoder.mouseX - top.ICEcoder.diffStartX;
if (top.ICEcoder.draggingTab!==false && top.ICEcoder.diffStartX && (diffX <= -10 || diffX >= 10)) {
if (top.ICEcoder.mouseX > parseInt(top.ICEcoder.files.style.width,10)) {
top.ICEcoder.tabDragMouseX = top.ICEcoder.mouseX - parseInt(top.ICEcoder.files.style.width,10) - top.ICEcoder.tagDragMouseXStart;
@@ -1457,9 +1457,9 @@ var ICEcoder = {
top.ICEcoder.tagDragMouseXStart = (top.ICEcoder.mouseX - (parseInt(top.ICEcoder.files.style.width,10)+41+18)) % 150;
top.document.getElementById('tab'+tab).style.zIndex = 2;
for (var i=1; i<=top.ICEcoder.openFiles.length; i++) {
if (i!==tab) {
top.document.getElementById('tab'+i).className = "tab tabSlide";
}
top.document.getElementById('tab'+i).className = i!==tab
? "tab tabSlide"
: "tab tabDrag";
}
},
@@ -1467,7 +1467,7 @@ var ICEcoder = {
tabDragMove: function() {
var tabWidth, lastTabWidth;
lastTabWidth = parseInt(top.document.getElementById('newTab').style.left,10) - parseInt(top.document.getElementById('tab'+top.ICEcoder.openFiles.length).style.left,10);
lastTabWidth = parseInt(top.document.getElementById('tab'+top.ICEcoder.openFiles.length).style.width,10)+18;
top.ICEcoder.thisLeft = thisLeft = top.ICEcoder.tabDragMouseX >= 41
? top.ICEcoder.tabDragMouseX <= parseInt(top.document.getElementById('newTab').style.left,10) - lastTabWidth
@@ -1478,7 +1478,7 @@ var ICEcoder = {
top.ICEcoder.dragTabNo = dragTabNo = top.ICEcoder.draggingTab;
for (var i=1; i<=top.ICEcoder.openFiles.length; i++) {
top.document.getElementById('tab'+i).style.opacity = i == top.ICEcoder.draggingTab ? 1 : 0.5;
tabWidth = top.ICEcoder.tabLeftPos[i] - top.ICEcoder.tabLeftPos[i-1];
tabWidth = top.ICEcoder.tabLeftPos[i] ? top.ICEcoder.tabLeftPos[i] - top.ICEcoder.tabLeftPos[i-1] : tabWidth;
if (i!=top.ICEcoder.draggingTab) {
if (i < top.ICEcoder.draggingTab) {
top.document.getElementById('tab'+i).style.left = thisLeft <= top.ICEcoder.tabLeftPos[i-1]
@@ -1497,22 +1497,90 @@ var ICEcoder = {
tabDragEnd: function() {
var swapWith;
if (top.document.getElementById('tab'+top.ICEcoder.draggingTab)) {
top.document.getElementById('tab'+top.ICEcoder.draggingTab).className = "tab tabSlide";
}
top.ICEcoder.draggingTab = false;
top.ICEcoder.setTabWidths();
setTimeout(function() {
for (var i=1; i<=top.ICEcoder.openFiles.length; i++) {
top.document.getElementById('tab'+i).className = "tab";
top.document.getElementById('tab'+i).style.opacity = 1;
for (var i=1; i<=top.ICEcoder.openFiles.length; i++) {
if (top.ICEcoder.thisLeft >= top.ICEcoder.tabLeftPos[i-1]) {
swapWith = top.ICEcoder.thisLeft == top.ICEcoder.tabLeftPos[0] ? 1 : top.ICEcoder.dragTabNo > i ? i+1 : i;
}
top.document.getElementById('tab'+i).className = "tab";
top.document.getElementById('tab'+i).style.opacity = 1;
if (i!=top.ICEcoder.dragTabNo) {
top.document.getElementById('tab'+i).style.zIndex = 1;
if (top.ICEcoder.thisLeft >= top.ICEcoder.tabLeftPos[i-1]) {
swapWith = top.ICEcoder.thisLeft == top.ICEcoder.tabLeftPos[0] ? 1 : top.ICEcoder.dragTabNo > i ? i+1 : i;
} else {
setTimeout(function() {
top.document.getElementById('tab'+i).style.zIndex = 1;
},150);
}
}
if (top.ICEcoder.thisLeft && top.ICEcoder.thisLeft!==false) {
var tempArray = [];
for (var i=1;i<=top.ICEcoder.openFiles.length;i++) {
tempArray.push(i);
}
tempArray.splice(top.ICEcoder.dragTabNo-1,1);
tempArray.splice(swapWith-1,0,top.ICEcoder.dragTabNo);
ICEcoder.sortTabs(tempArray);
}
top.ICEcoder.setTabWidths();
top.ICEcoder.draggingTab = false;
top.ICEcoder.thisLeft = false;
},
// Sort tabs into new order
sortTabs: function(newOrder) {
var changedContent = [], openFiles = [], openFileMDTs = [], cMInstances = [];
a = [ICEcoder.changedContent, ICEcoder.openFiles, ICEcoder.openFileMDTs, ICEcoder.cMInstances];
b = [changedContent, openFiles, openFileMDTs, cMInstances];
for (var i=0;i<a.length;i++) {
for (var j=0;j<a[i].length;j++) {
b[i].push(a[i][newOrder[j]-1]);
}
a[i] = b[i];
}
for (var i=0;i<newOrder.length;i++) {
document.getElementById('tab'+newOrder[i]).id = "tab" + (i+1) + ".temp";
if (top.ICEcoder.selectedTab == newOrder[i]) {
selectedTabWillBe = (i+1);
}
}
for (var i=0;i<newOrder.length;i++) {
document.getElementById('tab'+(i+1)+'.temp').id = "tab"+(i+1);
}
if (top.document.getElementById('tab'+selectedTabWillBe)) {
top.document.getElementById('tab'+selectedTabWillBe).className = "tab tabSlide";
}
ICEcoder.changedContent = a[0];
ICEcoder.openFiles = a[1];
ICEcoder.openFileMDTs = a[2];
ICEcoder.cMInstances = a[3];
top.ICEcoder.setTabWidths();
top.ICEcoder.switchTab(selectedTabWillBe);
},
// Alphabetize tabs
alphaTabs: function() {
var currentArray, alphaArray, nextValue, nextPos;
currentArray = [];
alphaArray = [];
for (var i=0;i<top.ICEcoder.openFiles.length;i++) {
currentArray.push(top.ICEcoder.openFiles[i]);
top.document.getElementById('tab'+(i+1)).className = "tab tabSlide";
}
while (currentArray.length>0) {
nextValue = currentArray[0];
nextPos = 0;
for (i=0;i<currentArray.length;i++) {
if (currentArray[i] < nextValue) {
nextValue = currentArray[i];
nextPos = i;
}
}
//console.log("swap " + top.ICEcoder.dragTabNo + " with " + swapWith);
},150);
alphaArray.push((top.ICEcoder.openFiles.indexOf(nextValue)+1));
currentArray.splice(nextPos,1);
}
top.ICEcoder.sortTabs(alphaArray);
},
// Change permissions on a file/folder
@@ -1615,7 +1683,7 @@ var ICEcoder = {
top.ICEcoder.openFiles.push(top.ICEcoder.shortURL);
// Setup a new tab
closeTabLink = '<a nohref onClick="top.ICEcoder.closeTab('+(top.ICEcoder.openFiles.length)+')"><img src="images/nav-close.gif" id="closeTabButton'+(top.ICEcoder.openFiles.length)+'" class="closeTab" onMouseOver="prevBG=this.style.backgroundColor;this.style.backgroundColor=\'#333\'" onMouseOut="this.style.backgroundColor=prevBG"></a>';
closeTabLink = '<a nohref onClick="top.ICEcoder.closeTab(parseInt(this.parentNode.id.slice(3),10))"><img src="images/nav-close.gif" class="closeTab" onMouseOver="prevBG=this.style.backgroundColor;this.style.backgroundColor=\'#333\'" onMouseOut="this.style.backgroundColor=prevBG"></a>';
top.document.getElementById('tab'+(top.ICEcoder.openFiles.length)).style.display = "inline-block";
fileName = top.ICEcoder.openFiles[top.ICEcoder.openFiles.length-1];
top.document.getElementById('tab'+(top.ICEcoder.openFiles.length)).innerHTML = closeTabLink + " " + fileName.slice(fileName.lastIndexOf("/")).replace(/\//,"");
@@ -1658,7 +1726,7 @@ var ICEcoder = {
top.ICEcoder.openFiles[tabNum-1] = newName;
// Setup a new tab
closeTabLink = '<a nohref onClick="parent.ICEcoder.closeTab('+tabNum+')"><img src="images/nav-close.gif" id="closeTabButton'+tabNum+'" class="closeTab" onMouseOver="prevBG=this.style.backgroundColor;this.style.backgroundColor=\'#333\'" onMouseOut="this.style.backgroundColor=prevBG"></a>';
closeTabLink = '<a nohref onClick="top.ICEcoder.closeTab(parseInt(this.parentNode.id.slice(3),10))"><img src="images/nav-close.gif" class="closeTab" onMouseOver="prevBG=this.style.backgroundColor;this.style.backgroundColor=\'#333\'" onMouseOut="this.style.backgroundColor=prevBG"></a>';
fileName = top.ICEcoder.openFiles[tabNum-1];
top.document.getElementById('tab'+tabNum).innerHTML = closeTabLink + " " + fileName.slice(fileName.lastIndexOf("/")).replace(/\//,"");
top.document.getElementById('tab'+tabNum).title = "/" + top.ICEcoder.openFiles[tabNum-1].replace(/\//,"");
@@ -1666,12 +1734,11 @@ var ICEcoder = {
// Reset all tabs to be without a highlight and then highlight the selected
redoTabHighlight: function(selectedTab) {
var cM, bgVPos, tColor, fileLink;
var bgVPos, tColor, fileLink;
cM = ICEcoder.getcMInstance();
for(var i=1;i<=ICEcoder.changedContent.length;i++) {
if (document.getElementById('closeTabButton'+i)) {
document.getElementById('closeTabButton'+i).style.backgroundColor = ICEcoder.changedContent[i-1]==1
if (document.getElementById('tab'+i).childNodes[0]) {
document.getElementById('tab'+i).childNodes[0].childNodes[0].style.backgroundColor = ICEcoder.changedContent[i-1]==1
? "#b00" : "transparent";
}
tColor = i==selectedTab ? "#000" : "#fff";
@@ -1705,9 +1772,6 @@ var ICEcoder = {
top.document.getElementById('tab'+i).title = top.document.getElementById('tab'+(i+1)).title;
ICEcoder.openFiles[i-1] = ICEcoder.openFiles[i];
ICEcoder.openFileMDTs[i-1] = ICEcoder.openFileMDTs[i];
// reduce the tab reference number on the closeTab link by 1
top.document.getElementById('tab'+i).innerHTML = top.document.getElementById('tab'+i).innerHTML.replace(("closeTab("+(i+1)+")"),"closeTab("+i+")").replace(("closeTabButton"+(i+1)),"closeTabButton"+i);
}
// hide the instance we're closing by setting the hide class and removing from the array
ICEcoder.content.contentWindow['cM'+top.ICEcoder.cMInstances[closeTabNum-1]].getWrapperElement().style.display = "none";
@@ -1751,8 +1815,10 @@ var ICEcoder = {
// Close all tabs
closeAllTabs: function() {
for (var i=top.ICEcoder.cMInstances.length; i>0; i--) {
top.ICEcoder.closeTab(i, i>1? true:false);
if (ICEcoder.ask("Close all tabs?")) {
for (var i=top.ICEcoder.cMInstances.length; i>0; i--) {
top.ICEcoder.closeTab(i, i>1? true:false);
}
}
},
@@ -1769,11 +1835,10 @@ var ICEcoder = {
for (var i=0;i<top.ICEcoder.openFiles.length;i++) {
thisWidth = parseInt(avgWidth*i,10) - parseInt(avgWidth*(i-1),10);
tabWidth = top.ICEcoder.openFiles.length*(150+18) > availWidth ? thisWidth : 150;
if (top.ICEcoder.cMInstances[i]) {j=top.ICEcoder.cMInstances[i]} else {j=i+1;}
top.document.getElementById('tab'+j).style.width = tabWidth + "px";
lastLeft = i==0 ? 41 : parseInt(top.document.getElementById('tab'+(j-1)).style.left,10);
lastWidth = i==0 ? 0 : parseInt(top.document.getElementById('tab'+(j-1)).style.width,10)+18;
top.document.getElementById('tab'+j).style.left = (lastLeft+lastWidth) + "px";
lastLeft = i==0 ? 41 : parseInt(top.document.getElementById('tab'+(i)).style.left,10);
lastWidth = i==0 ? 0 : parseInt(top.document.getElementById('tab'+(i)).style.width,10)+18;
top.document.getElementById('tab'+(i+1)).style.left = (lastLeft+lastWidth) + "px";
top.document.getElementById('tab'+(i+1)).style.width = tabWidth + "px";
top.ICEcoder.tabLeftPos.push(lastLeft+lastWidth);
}
top.document.getElementById('newTab').style.left = (lastLeft+lastWidth+tabWidth+18) + "px";