Remove docExplorer, minimap, functionClassList, results bar ontop scrollbar

This commit is contained in:
mattpass
2020-03-08 11:32:07 +00:00
parent 53a2daad78
commit e08522e4f1
2 changed files with 17 additions and 198 deletions

View File

@@ -123,7 +123,7 @@ h2 {font-size: 18px; font-weight: normal; color: #fff}
}
.findReplace .selectWrapper select:focus {outline: 0}
.findReplace .findText {display: inline-block; height: 28px; font-size: 10px; margin: 7px 3px 0 27px}
.findReplace .find {position: relative; width: 167px; height: 28px; border: 0; top: -3px; font-size: 12px; padding-left: 5px; margin-right: 3px; background: #444; color: #eee}
.findReplace .find {position: relative; width: 167px; height: 28px; border: 0; top: -2px; font-size: 12px; padding-left: 5px; margin-right: 3px; background: #444; color: #eee}
.findReplace .replaceText {height: 28px; font-size: 10px; margin: 7px 3px 0 2px}
.findReplace .replace {position: relative; width: 167px; height: 28px; border: 0; top: -2px; font-size: 12px; padding-left: 5px; background: #444; color: #eee}
.findReplace .targetText {height: 28px; font-size: 10px; margin: 7px 3px 0 2px}

View File

@@ -30,7 +30,6 @@ var ICEcoder = {
scrollbarVisible: false, // Indicates if the main pane has a scrollbar
mouseDown: false, // If the mouse is down
mouseDownInCM: false, // If the mouse is down within CodeMirror instance (can be false, 'editor' or 'gutter')
mouseDownMinimap: false, // If the mouse is down on Minimap nav box
draggingFilesW: false, // If we're dragging the file manager width
draggingTab: false, // If we're dragging a tab
draggingWithKey: false, // The key that's down while dragging, false if no key
@@ -46,8 +45,6 @@ var ICEcoder = {
tabFGnormalTab: '#888', // FG of normal tab
prevTab: 0, // Previous tab to current
serverQueueItems: [], // Array of URLs to call in order
miniMapBoxTop: 0, // Top of the minimap box highlighter
miniMapBoxHeight: 0, // Height of the minimap box highlighter
previewWindow: false, // Target variable for the preview window
previewWindowLoading: false, // Loading state of preview window
pluginIntervalRefs: [], // Array of plugin interval refs
@@ -75,7 +72,7 @@ var ICEcoder = {
// Set our aliases
initAliases: function() {
var aliasArray = ["header","files", "fileOptions", "optionsFile", "optionsEdit", "optionsSource", "optionsHelp", "filesFrame", "editor", "tabsBar", "findBar", "terminal", "output", "database", "git", "content", "tools", "footer", "nestValid", "versionsDisplay", "splitPaneControls", "splitPaneNamesMain", "splitPaneNamesDiff", "charDisplay", "byteDisplay", "docExplorer", "miniMap", "miniMapContainer", "miniMapContent", "functionClassList"];
var aliasArray = ["header","files", "fileOptions", "optionsFile", "optionsEdit", "optionsSource", "optionsHelp", "filesFrame", "editor", "tabsBar", "findBar", "terminal", "output", "database", "git", "content", "tools", "footer", "nestValid", "versionsDisplay", "splitPaneControls", "splitPaneNamesMain", "splitPaneNamesDiff", "charDisplay", "byteDisplay"];
// Create our ID aliases
for (var i=0;i<aliasArray.length;i++) {
@@ -202,13 +199,13 @@ var ICEcoder = {
this.filesW -
(get("splitPaneControls").getBoundingClientRect().width / 2)
, 10) + "px";
this.splitPaneNamesMain.style.left = (parseInt((winW-this.filesW)*0.25,10)-50+this.filesW) - 60 + "px";
this.splitPaneNamesDiff.style.left = (parseInt((winW-this.filesW)*0.75,10)-50+this.filesW) - 135 + "px";
this.splitPaneNamesMain.style.left = (parseInt((winW-this.filesW)*0.25,10)-50+this.filesW) + "px";
this.splitPaneNamesDiff.style.left = (parseInt((winW-this.filesW)*0.75,10)-50+this.filesW) + "px";
this.setTabWidths();
// If we need to set the editor sizes
if (!dontSetEditor) {
this.editor.style.width = this.content.style.width = (winW-this.filesW) - 200 + "px";
this.editor.style.width = this.content.style.width = (winW-this.filesW) + "px";
this.terminal.style.width = (winW-this.filesW) + "px";
this.output.style.width = (winW-this.filesW-31) + "px";
this.database.style.width = (winW-this.filesW) + "px";
@@ -239,14 +236,10 @@ var ICEcoder = {
ic.content.contentWindow['cM'+ic.cMInstances[i]].setSize(ic.splitPaneLeftPerc+"%",ic.content.style.height);
}
}
// Set height of docExplorer
ic.docExplorer.style.height = ic.content.style.height;
// Place resultsBar to edge of pane or it's scrollbar
if (!ic.splitPane) {
ic.content.contentWindow.document.getElementById('resultsBar').style.right = !ic.scrollBarVisible ? "0" : "17px";
} else {
ic.content.contentWindow.document.getElementById('resultsBar').style.right = !ic.scrollBarVisible ? parseInt(parseInt(ic.content.style.width,10)/2,10)+"px" : (parseInt(parseInt(ic.content.style.width,10)/2,10)+17)+"px";
}
// Place resultsBar ontop scrollbar
ic.content.contentWindow.document.getElementById('resultsBar').style.right = !ic.splitPane
? 0
: parseInt(parseInt(ic.content.style.width,10)/2,10)+"px";
},4,this);
}
},
@@ -336,23 +329,6 @@ var ICEcoder = {
}
},
// Doc Explorer show item
docExplorerShow: function(item) {
var cM;
get('miniMap').style.display = item == "miniMap" ? 'block' : 'none';
get('functionClassList').style.display = item == "functionClassList" ? 'block' : 'none';
if (item == "miniMap") {
miniMapInt = setInterval(function(ic){
if (get('miniMapContent').getBoundingClientRect().height != 0) {
cM = ic.getcMInstance();
ic.setMinimapLayout(cM);
clearInterval(miniMapInt);
}
},10,this);
}
},
// Set the width of the file manager on demand
changeFilesW: function(expandContract) {
if (!this.lockedNav||this.filesW==this.minFilesW) {
@@ -531,16 +507,6 @@ var ICEcoder = {
// If we're not loading the file, it's a change, so update tab
if (!this.loadingFile) {
this.redoTabHighlight(this.selectedTab);
// File load needs to force a simple change to get minimap functional
} else {
setTimeout(function(ic){
thisCM.replaceRange('X',{line: 1, ch: 1},{line: 1, ch: 1});
thisCM.undo();
thisCM.clearHistory();
ic.savedPoints[ic.selectedTab-1] = thisCM.changeGeneration();
ic.savedContents[ic.selectedTab-1] = thisCM.getValue();
},0,this);
}
// Detect if we have a scrollbar & set layout again
@@ -610,19 +576,6 @@ var ICEcoder = {
}
// Update the list of functions and classes
this.updateFunctionClassList();
// Update the minimap nav
if ("undefined" != typeof doMiniNav) {
clearTimeout(doMiniNav);
}
if (this.loadingFile) {
// Load event means set it straight away
this.setMinimap();
} else {
// Update event means do it after 1 sec of inactivity
doMiniNav = setTimeout(function(ic) {
ic.setMinimap();
},1000,this);
}
filepath = this.openFiles[this.selectedTab-1];
if (filepath) {
filename = filepath.substr(filepath.lastIndexOf("/")+1);
@@ -648,12 +601,6 @@ var ICEcoder = {
},
cMonUpdate: function(thisCM,cMinstance) {
// Update the minimap background to match theme
setTimeout(function() {
get('docExplorer').style.background = window.getComputedStyle(thisCM.getWrapperElement(),null).getPropertyValue('background');
},0);
// Set the Minimap layout
this.setMinimapLayout(thisCM,cMinstance);
},
// On scroll
@@ -674,8 +621,6 @@ var ICEcoder = {
setTimeout(function(){otherCM.scrollTo(thisCM.getScrollInfo().left, thisCM.getScrollInfo().top);},0);
}
}
// Set the Minimap layout
this.setMinimapLayout(thisCM,cMinstance);
},
// On input read
@@ -1236,7 +1181,6 @@ var ICEcoder = {
this.scrollInt = setInterval(function(ic) {
ic.scrollingOnLine = ic.scrollingOnLine+((lineNo-ic.scrollingOnLine)/5);
thisCM.scrollTo(0,(thisCM.defaultTextHeight()*ic.scrollingOnLine)-(thisCM.getScrollInfo().clientHeight/10));
ic.setMinimapLayout(thisCM);
if (Math.round(ic.scrollingOnLine) == lineNo) {
clearInterval(ic.scrollInt);
}
@@ -1421,18 +1365,6 @@ var ICEcoder = {
if(cM) {
// For each line, establish if there's a function or class item on it
cM.doc.eachLine(function(handle){ICEcoder.updateFunctionClassListItems(handle)});
// // Update the list displayed
setTimeout(function(ic) {
functionClassList = '';
// For each of the items in our array, if it's verified, add it into string
for (var i=0; i<ic.functionClassList.length; i++) {
if (ic.functionClassList[i]['verified']) {
functionClassList += '<div onclick="this.goToLine('+(ic.functionClassList[i]['line']+1)+')" class="functionClassListItem"><span class="name">'+ic.functionClassList[i]['name']+'</span><br><span class="params">'+ic.functionClassList[i]['params']+'</span></div>';
}
}
// Update our list
get('functionClassList').innerHTML = functionClassList;
},0,this);
}
},
@@ -1476,98 +1408,6 @@ var ICEcoder = {
}
},
// Set the Minimap
setMinimap: function() {
var cM;
cM = this.getcMInstance();
if(cM) {
// Get syntax formatted content and output to miniMapContent
this.content.contentWindow.CodeMirror.runMode(cM.getValue(),cM.getOption('mode'),get('miniMapContent'));
// white-space: pre vs pre-wrap depending on line wrapping
get('miniMapContent').innerHTML = '<div class="cm-s-'+this.theme+'" style="font-family: monospace; white-space: '+(this.lineWrapping == true ? 'pre-wrap' : 'pre')+'; font-size: 2px; line-height: 2px">'+get('miniMapContent').innerHTML+'</div>';
get('miniMapContent').innerHTML = get('miniMapContent').innerHTML.replace(/\<span /g,'<span style="font-size: 2px; font-family: monospace" ');
get('miniMapContainer').innerHTML = '<div style="position: absolute; display: inline-block; top: '+
this.miniMapBoxTop+
'px; left: 0; width: 200px; height: '+
this.miniMapBoxHeight+'px; background: rgba(0,198,255,0.1); pointer-events: none; z-index: 1" id="miniMapBox"></div>';
this.setMinimapLayout(cM);
// ICEcoder.mouseDownMinimap = true;
// this.jumpMinimapPositon(400, 0);
get('docExplorer').style.right = "-220px";
}
},
setMinimapLayout: function(thisCM,cMinstance) {
var cM, percThru;
// If we've got a minimap box ready
if (get('miniMapBox') && thisCM) {
// Get CM instance and percentage through document
cM = this.getcMInstance();
percThru = thisCM.getScrollInfo().top/(thisCM.getScrollInfo().height-thisCM.getScrollInfo().clientHeight);
// If content to display has a greater height than docExplorer
if (parseInt(get('miniMapContent').getBoundingClientRect().height,10) > parseInt(get('docExplorer').style.height,10)) {
// Set the minimap container to same height
get('miniMapContainer').style.height = parseInt(get('docExplorer').style.height,10)+"px";
// Set box height relative to font height
this.miniMapBoxHeight = (parseInt(get('docExplorer').style.height,10)/cM.defaultTextHeight()*2);
get('miniMapBox').style.height = this.miniMapBoxHeight + "px";
// Set top position of it according to percentage through document and account for height of nav box
this.miniMapBoxTop = (percThru*parseInt(get('docExplorer').style.height,10)) - (percThru*this.miniMapBoxHeight);
// Set the minimap position according to scroll position (used if we move cursor in document)
get('miniMapContent').style.marginTop = (-(parseInt(get('miniMapContent').getBoundingClientRect().height,10) - parseInt(get('docExplorer').style.height,10))*percThru) + "px";
// If less than the docExplorer height
} else {
// Set height of container to that of the content
get('miniMapContainer').style.height = parseInt(get('miniMapContent').getBoundingClientRect().height,10)+"px";
// Set box height relative to font height
this.miniMapBoxHeight = (parseInt(get('docExplorer').style.height,10)/cM.defaultTextHeight()*2);
get('miniMapBox').style.height = this.miniMapBoxHeight + "px";
// Set top position of it according to percentage through minimap and account for height of nav box
this.miniMapBoxTop = (percThru*parseInt(get('miniMapContainer').getBoundingClientRect().height,10)) - (percThru*this.miniMapBoxHeight);
// Set the minimap position to 0
get('miniMapContent').style.marginTop = 0;
}
}
},
jumpMinimapPositon: function(yPos, buttons) {
var cM, mmPosY;
if (ICEcoder.mouseDownMinimap) {
cM = this.getcMInstance();
// Set mid height position
mmPosY = yPos - get('miniMapContainer').getBoundingClientRect().top - (get('miniMapBox').getBoundingClientRect().height / 2);
// Unless it would be beyond bottom, if so, set to bottom
if (mmPosY > get('miniMapContainer').getBoundingClientRect().height - get('miniMapBox').getBoundingClientRect().height) {
mmPosY = get('miniMapContainer').getBoundingClientRect().height - get('miniMapBox').getBoundingClientRect().height;
}
// Unless it would be beyond top, if so, set to top
if (mmPosY < 0) {
mmPosY = 0;
}
get("miniMapBox").style.top = mmPosY + "px";
// Set the max height to be that of doc explorer, or if less, the content height
maxHeight = parseInt(get('docExplorer').style.height, 10) <= parseInt(get('miniMapContent').getBoundingClientRect().height, 10)
? parseInt(get('docExplorer').style.height, 10)
: parseInt(get('miniMapContent').getBoundingClientRect().height, 10);
// Work out the new percentag, from that yPos and set CM scroll position to that
newPerc = (mmPosY / (maxHeight - ICEcoder.miniMapBoxHeight));
yPos = (cM.getScrollInfo().height - cM.getScrollInfo().clientHeight) * newPerc;
cM.scrollTo(0, yPos); // this.position.y
}
// If mouse buttons up, we no longer have mouse down on minimap
if (buttons === 0) {
ICEcoder.mouseDownMinimap = false;
}
},
// Autocomplete
autocomplete: function() {
var cM, cMdiff, thisCM;
@@ -2726,8 +2566,8 @@ var ICEcoder = {
addPadding = !this.scrollBarVisible ? thisCM.heightAtLine(0) : 0;
rBlocks = "";
for (var i=1; i<=thisCM.lineCount(); i++) {
blockColor = this.resultsLines.indexOf(i)>-1 ? thisCM.getCursor().line+1 == i ? "#b00" : "#888" : "transparent"
rBlocks += '<div style="position: absolute; display: block; width: 5px; height:'+avgBlockH+'px; background: '+blockColor+'; top: '+parseInt((avgBlockH*(i-1))+addPadding,10)+'px"></div>';
blockColor = this.resultsLines.indexOf(i)>-1 ? thisCM.getCursor().line+1 == i ? "rgba(192,0,0,0.3)" : "rgba(128,128,128,0.3)" : "transparent";
rBlocks += '<div style="position: absolute; display: block; width: 12px; height:'+avgBlockH+'px; background: '+blockColor+'; top: '+parseInt((avgBlockH*(i-1))+addPadding,10)+'px"></div>';
}
this.content.contentWindow.document.getElementById('resultsBar').innerHTML = rBlocks;
this.content.contentWindow.document.getElementById('resultsBar').style.display = "inline-block";
@@ -2891,16 +2731,6 @@ var ICEcoder = {
}
this.dragCursorTest();
if (this.mouseY>62) {this.setTabWidths();};
if (get("miniMapBox")) {
var mmBoxBCR = get("miniMapBox").getBoundingClientRect();
if (
mmBoxBCR.left <= this.mouseX && mmBoxBCR.top <= this.mouseY &&
mmBoxBCR.right >= this.mouseX && mmBoxBCR.bottom >= this.mouseY
) {
document.body.style.cursor = "pointer";
}
}
},
// Test if we need to show a drag cursor or not
@@ -3487,12 +3317,6 @@ var ICEcoder = {
styleNode.setAttribute('type', 'text/css');
styleNode.setAttribute('href', themeURL);
this.content.contentWindow.document.getElementsByTagName('head')[0].appendChild(styleNode);
// Add new stylesheet for selected theme to top level (used by Minimap)
styleNode = document.createElement('link');
styleNode.setAttribute('rel', 'stylesheet');
styleNode.setAttribute('type', 'text/css');
styleNode.setAttribute('href', themeURL);
document.getElementsByTagName('head')[0].appendChild(styleNode);
if (["3024-day","base16-light","eclipse","elegant","mdn-like","neat","neo","paraiso-light","solarized","the-matrix","xq-light"].indexOf(this.theme)>-1) {
activeLineBG = "#ccc";
} else if (["3024-night","blackboard","colorforth","liquibyte","night","tomorrow-night-bright","tomorrow-night-eighties","vibrant-ink"].indexOf(this.theme)>-1) {
@@ -3928,16 +3752,6 @@ var ICEcoder = {
cMdiff.refresh();
this.updateFunctionClassList();
// Update the minimap nav
if ("undefined" != typeof doMiniNav) {
clearTimeout(doMiniNav);
}
doMiniNav = setTimeout(function(ic) {
ic.setMinimap();
},this.loadingFile ? 0 : 100, this);
get('docExplorer').style.display = "block";
get('docExplorer').style.right = "-400px";
this.highlightGitDiffs();
// Highlight the selected tab
@@ -3950,6 +3764,12 @@ var ICEcoder = {
// Update our versions display
this.updateVersionsDisplay();
// Detect if we have a scrollbar & set layout again
setTimeout(function(ic) {
ic.scrollBarVisible = thisCM.getScrollInfo().height > thisCM.getScrollInfo().clientHeight;
ic.setLayout();
},0,this);
// Finally, update the cursor display
this.getCaretPosition();
this.updateCharDisplay();
@@ -4113,7 +3933,6 @@ var ICEcoder = {
// grey out the view icon
if (this.openFiles.length==0) {
this.fMIconVis('fMView',0.3);
get('docExplorer').style.display = "none";
} else {
// Switch the mode & the tab
this.switchMode();