From 3fb9836fc826663eaef07dbd4316c57964306322 Mon Sep 17 00:00:00 2001 From: Matt Pass Date: Fri, 8 Feb 2013 10:57:49 +0000 Subject: [PATCH] Tab dragging, sortTabs, alphaTabs & dynamic close 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 --- lib/ice-coder.js | 137 ++++++++++++++++++++++++++++++++++------------- 1 file changed, 101 insertions(+), 36 deletions(-) diff --git a/lib/ice-coder.js b/lib/ice-coder.js index 270b711..5ff3d82 100644 --- a/lib/ice-coder.js +++ b/lib/ice-coder.js @@ -562,7 +562,7 @@ var ICEcoder = { if(i>-1) { // rename array item and the tab top.ICEcoder.openFiles[i] = newName; - closeTabLink = ''; + closeTabLink = ''; 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;i0) { + nextValue = currentArray[0]; + nextPos = 0; + for (i=0;i'; + closeTabLink = ''; 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 = ''; + closeTabLink = ''; 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 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";