// Get any elem by ID
const get = function(elem) {
return document.getElementById(elem);
};
// URL we're viewing ICEcoder from
const iceLoc = window.location.origin + window.location.pathname.replace(/\/$/, "");
// Main ICEcoder object
var ICEcoder = {
// ====
// INIT
// ====
// Define settings
filesW: 250, // Width of files pane
minFilesW: 14, // Min width of files pane
maxFilesW: 250, // Max width of files pane
selectedTab: 0, // The tab that's currently selected
savedPoints: [], // Ints array to indicate save points for docs
savedContents: [], // Array of last known saved contents
canSwitchTabs: true, // Stops switching of tabs when trying to close
openFiles: [], // Array of open file URLs
openFileMDTs: [], // Array of open file modification datetimes
openFileVersions: [], // Array of open file version counts
cMInstances: [], // List of CodeMirror instance no's
nextcMInstance: 1, // Next available CodeMirror instance no
selectedFiles: [], // Array of selected files
thisFileFolderType: '', // The type of current item - file or folder
thisFileFolderLink: '', // The id value of the current item
results: [], // Array of find coords (line & char)
resultsLines: [], // Array of lines containing results (simpler version of results)
findResult: 0, // Array position of current find in results
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')
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
tabLeftPos: [], // Array of left positions of tabs inside content area
colorCurrentBG: '#1d1d1b', // Current tab/file background color
colorCurrentText: '#fff', // Current tab/file text color
colorOpenBG: '#c3c3c3', // Open tab/file background color
colorOpenTextFile: '#000', // Open file text color
colorOpenTextTab: '#888', // Open tab text color
colorSelectedBG: '#49d', // Selected tab/file background color
colorSelectedText: '#fff', // Selected tab/file text color
colorDropTgtBGFile: '#f80', // Drop dir target background color
prevTab: 0, // Previous tab to current
serverQueueItems: [], // Array of URLs to call in order
previewWindow: false, // Target variable for the preview window
previewWindowLoading: false, // Loading state of preview window
pluginIntervalRefs: [], // Array of plugin interval refs
overPopup: false, // Indicates if we're over a popup or not
cmdKey: false, // Tracking apple Command key up/down state
codeZoomedOut: false, // If true, code on non declaration lines is zoomed out
showingTool: false, // Which tool is showing right now (terminal, output, database, git etc)
oppTagReplaceData: [], // Will contain data for automatic opposite tag replacement to sync them
fmReady: false, // Indicates if the file manager is ready for action
bugReportStatus: "off", // Values of: off, error, ok, bugs
bugReportPath: "", // Bug report file path
bugFilesSizesSeen: [], // Array of last seen sizes of bug files
bugFilesSizesActual: [], // Array of actual sizes of bug files
splitPane: false, // Single or split pane editing
splitPaneLeftPerc: 100, // Width of left pane as a percentage
renderLineStyle: [], // Array of styles to apply on renderLine event
renderPaneShiftAmount: 0, // Shift comparison main (negative) vs diff pane (positive)
editorFocusInstance: "", // Name of editor instance that has focus
openSeconds: 0, // Number of seconds ICEcoder has been open for
indexing: false, // Indicates if ICEcoder is currently indexing
ready: false, // Indicates if ICEcoder is ready for action
// Set our aliases
initAliases: function() {
const aliasArray = ["header", "files", "fileOptions", "optionsFile", "optionsEdit", "optionsSettings", "optionsHelp", "filesFrame", "editor", "tabsBar", "findBar", "terminal", "output", "database", "git", "content", "tools", "footer", "versionsDisplay", "splitPaneControls", "splitPaneNamesMain", "splitPaneNamesDiff", "charDisplay", "byteDisplay"];
// Create our ID aliases
for (let i = 0; i < aliasArray.length; i++) {
this[aliasArray[i]] = get(aliasArray[i]);
}
},
// On load, set the layout
init: function() {
// Contract the file manager if the user has set to have it hidden
if (false === this.lockedNav) {
this.filesW = this.minFilesW;
}
// Set layout
this.setLayout();
this.overFileFolder('folder', '|');
this.selectFileFolder('init');
this.filesFrame.contentWindow.focus();
// Hide the loading screen & auto open last files?
this.showHide('hide', get('loadingMask'));
this.autoOpenInt = setInterval(function(ic) {
if (ic.fmReady) {
if (ic.openLastFiles) {ic.autoOpenFiles();}
clearInterval(ic.autoOpenInt);
}
}, 4, this);
// Start bug checking
this.startBugChecking();
// Set the time since last user interaction
this.autoLogoutTimer = 0;
// Start our interval timer, runs every second
this.oneSecondInt = setInterval(function(ic) {
ic.autoLogoutTimer++;
let unsavedFiles = false;
// Check if we have any unsaved files
for(let i = 1; i <= ic.savedPoints.length; i++) {
if (ic.savedPoints[i - 1] !== ic.getcMInstance(i).changeGeneration()) {
unsavedFiles = true;
}
}
// Show an auto-logout warning 60 secs before a logout
if(false === unsavedFiles && ic.autoLogoutMins > 1 && ic.autoLogoutTimer == (ic.autoLogoutMins * 60) - 60) {
ic.autoLogoutWarningScreen();
}
if (get('autoLogoutIFrame') && get('autoLogoutIFrame').contentWindow.document.getElementById('timeRemaning')) {
get('autoLogoutIFrame').contentWindow.document.getElementById('timeRemaning').innerHTML =
ic.autoLogoutTimer > 0
? (ic.autoLogoutMins * 60) - ic.autoLogoutTimer
: 0;
}
// If there aren't any unsaved files, we have a timeout period > 0 and the time is up, we can logout
if (false === unsavedFiles && ic.autoLogoutMins > 0 && ic.autoLogoutTimer >= ic.autoLogoutMins * 60) {
ic.logout('autoLogout');
}
// Increase number of seconds ICEcoder has been open for by 1
ic.openSeconds++;
// Every 5 mins, ping our file to keep the session alive
if (0 === ic.openSeconds % 300) {
ic.filesFrame.contentWindow.frames['pingActive'].location.href = iceLoc + "/lib/session-active-ping.php";
}
// Every 3 seconds, re-index if we're not already busy
if (false === ic.indexing && false === ic.loadingFile && 0 === ic.serverQueueItems.length && 0 === ic.openSeconds % 3) {
ic.indexing = true;
// Get new data
let timestampExtra = ic.indexData
? "?timestamp=" + ic.indexData.timestamps.indexed + "&csrf=" + ic.csrf
: "";
fetch(iceLoc + '/lib/indexer.php' + timestampExtra)
.then(function(response) {
// Convert to JSON
return response.json();
}).then(function(data) {
if (data.timestamps.changed) {
ic.indexData = data;
// If we have git diff data
if (data.gitDiff) {
ic.updateGitDiffPane();
}
// If we have git content data
if (data.gitContent) {
ic.highlightGitDiffs();
}
}
ic.indexing = false;
});
}
}, 1000, this);
// ICEcoder is ready to start using
this.ready = true;
},
// ======
// LAYOUT
// ======
// Set our layout according to the browser size
setLayout: function(setEditor) {
let winW, winH, headerH, fileNavH, tabsBarH, findBarH, toolsBarH;
// Determine width & height available
winW = window.innerWidth;
winH = window.innerHeight;
// Apply sizes to various elements of the page
headerH = 15, fileNavH = 38, tabsBarH = 27, findBarH = 28, toolsBarH = 30;
this.header.style.width = this.tabsBar.style.width = this.findBar.style.width = winW + "px";
this.files.style.width = this.editor.style.left = this.filesW + "px";
this.optionsFile.style.width = this.optionsEdit.style.width = this.optionsSettings.style.width = this.optionsHelp.style.width = this.filesW + "px";
this.filesFrame.style.height = (winH - headerH - fileNavH - 7 - toolsBarH) + "px";
this.versionsDisplay.style.left = (this.filesW + 10) + "px";
get("serverMessage").style.left = (this.filesW + 10) + "px";
this.splitPaneControls.style.left =
parseInt(
((winW - this.filesW) / 2) +
this.filesW -
(get("splitPaneControls").getBoundingClientRect().width / 2)
, 10) + "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 (false !== setEditor) {
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";
this.git.style.width = (winW - this.filesW - 31) + "px";
this.content.style.height = (winH - headerH - tabsBarH - findBarH - toolsBarH) + "px";
this.terminal.style.height =
this.output.style.height =
this.database.style.height =
this.git.style.height =
this.terminal.style.top =
this.output.style.top =
this.database.style.top =
this.git.style.top = winH + "px";
if (false !== this.showingTool) {
get(this.showingTool).style.top = 0;
}
// Resize the CodeMirror instances to match the window size
setTimeout(function(ic){
for (let i = 0; i < ic.openFiles.length; i++) {
// Done the long way here as we need to call them in specific order to stop showing background and so avoiding a flicker effect
if (false === ic.splitPane) {
ic.content.contentWindow['cM' + ic.cMInstances[i]].setSize(ic.splitPaneLeftPerc + "%", ic.content.style.height);
}
ic.content.contentWindow['cM' + ic.cMInstances[i] + 'diff'].setSize((100 - ic.splitPaneLeftPerc) + "%", ic.content.style.height);
ic.content.contentWindow['cM'+ ic.cMInstances[i] + 'diff'].getWrapperElement().style.left = ic.splitPaneLeftPerc + "%";
if (true === ic.splitPane) {
ic.content.contentWindow['cM' + ic.cMInstances[i]].setSize(ic.splitPaneLeftPerc + "%", ic.content.style.height);
}
}
// Place resultsBar on-top scrollbar
ic.content.contentWindow.document.getElementById('resultsBar').style.right = false === ic.splitPane
? 0
: parseInt(parseInt(ic.content.style.width, 10) / 2, 10) + "px";
}, 4, this);
}
},
// Set the layout as split pane or not
setSplitPane: function(onOff) {
let cM, cMdiff;
this.splitPane = "on" === onOff ? true : false;
get('splitPaneControlsOff').style.opacity = this.splitPane ? 0.2 : 0.8;
get('splitPaneControlsOn').style.opacity = this.splitPane ? 0.8 : 0.2;
get('splitPaneNamesMain').style.opacity = get('splitPaneNamesDiff').style.opacity = this.splitPane ? 1 : 0;
this.setLayout();
// Also clear marks (if going to a single pane) or redo the marks (if split pane)
if (true === this.splitPane) {
this.updateDiffs();
// Also set the scroll position to match
cM = this.getcMInstance();
this.cMonScroll(cM, 'cM' + this.cMInstances[this.selectedTab - 1]);
} else {
cM = this.getcMInstance();
cMdiff = this.getcMdiffInstance();
if (cM) {
// Clear all main pane marks
cMmarks = cM.getAllMarks();
for (let i = 0; i < cMmarks.length; i++) {
cMmarks[i].clear();
}
// Clear all diff pane marks
cMdiffMarks = cMdiff.getAllMarks();
for (let i = 0; i < cMdiffMarks.length; i++) {
cMdiffMarks[i].clear();
}
}
}
// Animate in/out the split pane
// First, clear any existing split pane interval anim
if ("undefined" !== typeof this.animSplitPaneInt) {
clearInterval(this.animSplitPaneInt);
}
// Now set the interval to animate it in/out
this.animSplitPaneInt = setInterval(function(ic) {
// Animate split pane in
if (ic.splitPane && ic.splitPaneLeftPerc > 50.1) {
ic.splitPaneLeftPerc = ((ic.splitPaneLeftPerc - 50) / 1.8) + 50;
// Animate split pane out
} else if (!ic.splitPane && ic.splitPaneLeftPerc < 99.9) {
ic.splitPaneLeftPerc = (50 - ((100 - ic.splitPaneLeftPerc) / 1.8)) + 50;
// Finish animating split pane in/out
} else {
ic.splitPaneLeftPerc = ic.splitPane ? 50 : 100;
clearInterval(ic.animSplitPaneInt);
}
ic.setLayout();
}, 4, this);
},
// Tool show/hide toggle
toolShowHideToggle: function(tool) {
let winH;
winH = window.innerHeight;
if (-1 < ["terminal", "output", "database", "git"].indexOf(tool)) {
// Set out of view as a start point
get('terminal').style.top = winH + "px";
get('output').style.top = winH + "px";
get('database').style.top = winH + "px";
get('git').style.top = winH + "px";
// Now set tool requested, out of view, or in view
get(tool).style.top = tool === this.showingTool ? winH + "px" : 0;
// Carry out any extras...
if (tool === "terminal") {
// Focus on command prompt
setTimeout(function(ic){
ic.terminal.contentWindow.document.getElementById('command').focus();
}, 0 ,this);
}
// Note which tool we're showing
this.showingTool = this.showingTool !== tool ? tool : false;
// Display and make close icon clickable to close this tool
setTimeout(function() {
get('closeIcon').style.display = ICEcoder.showingTool !== false ? "inline-block" : "none";
get('closeIcon').onclick = function() {
ICEcoder.toolShowHideToggle(ICEcoder.showingTool);
}
}, this.showingTool !== false ? 200 : 0);
}
},
// Set the width of the file manager on demand
changeFilesW: function(expandContract) {
if (false === this.lockedNav || this.filesW === this.minFilesW) {
if ("undefined" !== typeof this.changeFilesInt) {clearInterval(this.changeFilesInt)}
this.changeFilesInt = setInterval(function(ic) {ic.changeFilesWStep(expandContract)}, 10, this);
}
},
// Expand/contract the file manager in half-steps
changeFilesWStep: function (expandContract) {
if ("expand" === expandContract) {
this.filesW < this.maxFilesW - 1 ? this.filesW += Math.ceil((this.maxFilesW - this.filesW) / 2) : this.filesW = this.maxFilesW;
} else {
this.filesW > this.minFilesW + 1 ? this.filesW -= Math.ceil((this.filesW - this.minFilesW) / 2) : this.filesW = this.minFilesW;
}
if (("expand" === expandContract && this.filesW === this.maxFilesW) || ("contract" === expandContract && this.filesW === this.minFilesW)) {
clearInterval(this.changeFilesInt);
}
// Redo the layout to match
this.setLayout();
},
// Can click-drag file manager width?
canResizeFilesW: function() {
// If we have the cursor set we must be able!
if (true === this.ready && "w-resize" === document.body.style.cursor) {
// If our mouse is down (and went down on the CM instance's gutter) and we're within a 250px - half of avail width range
if (true === this.mouseDown && "gutter" === this.mouseDownInCM) {
this.filesW = this.maxFilesW = this.mouseX >= 250 && this.mouseX <= window.innerWidth / 2
? this.mouseX : this.mouseX < 250 ? 250 : window.innerWidth / 2;
// Set various widths based on the new width
this.files.style.width = this.filesFrame.style.width = this.filesW + "px";
this.setLayout();
this.draggingFilesW = true;
}
} else {
this.draggingFilesW = false;
}
},
// Lock & unlock the file manager navigation on demand
lockUnlockNav: function() {
let lockIconOpen, lockIconClosed;
lockIconOpen = this.filesFrame.contentWindow.document.getElementById('fmLockOpen');
lockIconClosed = this.filesFrame.contentWindow.document.getElementById('fmLockClosed');
this.lockedNav = false === this.lockedNav;
lockIconOpen.style.display = this.lockedNav ? "none" : "inline-block";
lockIconClosed.style.display = this.lockedNav ? "inline-block" : "none";
},
// Show/hide the plugins on demand
showHidePlugins: function(vis) {
get('plugins').style.width = "show" === vis ? '55px' : '3px';
get('plugins').style.background = "show" === vis ? '#333' : 'transparent';
if ("show" === vis) {
this.changeFilesW('expand');
}
},
// ======
// EDITOR
// ======
// Set editor stats
setEditorStats: function() {
this.getCaretPosition();
this.updateCharDisplay();
this.updateByteDisplay();
},
// On focus
cMonFocus: function(thisCM, cMinstance) {
this.setEditorStats();
this.editorFocusInstance = cMinstance;
this.getCaretPosition();
},
// On blur
cMonBlur: function(thisCM, cMinstance) {
// Nothing as yet
},
// On key up
cMonKeyUp: function(thisCM, cMinstance) {
if (undefined !== typeof this.doFindTimeout) {
clearInterval(this.doFindTimeout);
}
// If we have something to find in this document, find in 50 ms (unless cancelled by another keypress)
if ("" !== get('find').value && t['this document'] === document.findAndReplace.target.value) {
this.doFindTimeout = setTimeout(function (ic) {
ic.findReplace(get('find').value, false, false, false);
}, 50, this);
}
this.setEditorStats();
},
// On cursor activity
cMonCursorActivity: function(thisCM, cMinstance) {
let thisCMPrevLine;
this.setEditorStats();
thisCM.removeLineClass(this['cMActiveLine'+cMinstance], "background");
if(thisCM.getCursor('start').line === thisCM.getCursor().line) {
this['cMActiveLine' + cMinstance] = thisCM.addLineClass(thisCM.getCursor().line, "background", "cm-s-activeLine");
}
if ("CSS" === this.caretLocType) {
this.cssColorPreview();
}
thisCMPrevLine = this.editorFocusInstance.indexOf('diff') > -1 ? this.prevLineDiff : this.prevLine;
if (thisCMPrevLine !== thisCM.getCursor().line &&
thisCM.getLine(thisCMPrevLine) &&
thisCM.getLine(thisCMPrevLine).length > 0 &&
thisCM.getLine(thisCMPrevLine).replace(/\s/g, '').length === 0) {
thisCM.replaceRange("", {line: thisCMPrevLine, ch: 0}, {line: thisCMPrevLine, ch: 1000000}, "+input");
}
// Set the cursor to text height, not line height
setTimeout(function(ic) {
let paneMatch;
// Loop through styles to check if we have to adjust cursor height
for (let i = 0; i < ic.renderLineStyle.length; i++) {
// We have no matching pane to start with
paneMatch = false;
// Is the pane we need to set the cursor on this pane?
if (
("diff" !== ic.renderLineStyle[i][0] && 1 === cMinstance.indexOf("diff")) ||
("diff" === ic.renderLineStyle[i][0] && -1 < cMinstance.indexOf("diff"))
)
{paneMatch = true;}
// If the pane matches & also the line we're on is the line we have a style set for, set that cursor height
if (paneMatch && thisCM.getCursor().line + 1 === ic.renderLineStyle[i][1]) {
thisCM.setOption("cursorHeight", thisCM.defaultTextHeight() / thisCM.lineInfo(thisCM.getCursor().line).handle.height);
} else {
thisCM.setOption("cursorHeight", 1);
}
}
}, 0, this);
},
// On before change
cMonBeforeChange: function(thisCM, cMinstance, changeObj, cM) {
let sels, tagInfo, tagOpp, thisData;
// Get the selections
sels = thisCM.listSelections();
// For each of the user selections
for (let i = 0; i < sels.length; i++) {
// Get the matching tagInfo for current cursor position
tagInfo = cM.findMatchingTag(thisCM, sels[i].anchor);
// If we're not ending a tag (autocompletion) and we have tagInfo and not undoing/redoing (which handles changes itself)
if (0 !== changeObj.text[0].indexOf(">") && "undefined" !== typeof tagInfo && "undo" !== changeObj.origin && "redo" !== changeObj.origin) {
// If we also have both open and close tag info
if ("undefined" !== typeof tagInfo.open && "undefined" !== typeof tagInfo.close) {
// Log the opposite tag info
tagOpp = tagInfo.at === "open" ? "close" : "open";
if (null !== tagInfo[tagOpp]) {
thisData = tagInfo[tagOpp].tag + ";" + tagInfo[tagOpp].from.line + ":" + tagInfo[tagOpp].from.ch;
// Check that string firstly isn't in array and if not, push it in
if (-1 === this.oppTagReplaceData.indexOf(thisData)) {
this.oppTagReplaceData.push(thisData);
}
}
}
}
}
},
// On change
cMonChange: function(thisCM, cMinstance, changeObj, cM) {
let sels, rData, theTag, thisLine, thisChar, tagInfo, charDiff, closeDiff, repl1, repl2, filepath, filename, fileExt;
// Get the selections
sels = thisCM.listSelections();
// If we're not loading the file, it's a change, so update tab
if (false === this.loadingFile) {
this.redoTabHighlight(this.selectedTab);
}
// Detect if we have a scrollbar & set layout again
setTimeout(function(ic) {
ic.scrollBarVisible = thisCM.getScrollInfo().height > thisCM.getScrollInfo().clientHeight;
ic.setLayout();
}, 0, this);
// If we're replacing opposite tag strings, do that
if ("undefined" !== typeof this.oppTagReplaceData[0]) {
// For each one of them, grab our data to work with
for (let i = 0; i < this.oppTagReplaceData.length; i++) {
// Extract data from that string
rData = this.oppTagReplaceData[i].split(";");
theTag = rData[0];
thisLine = parseInt(rData[1].split(":")[0], 10);
thisChar = parseInt(rData[1].split(":")[1], 10);
// Get the tag info for matching tag
if (sels[i]) {
tagInfo = cM.findMatchingTag(thisCM, sels[i].anchor);
}
// If we have tagInfo
if ("undefined" !== typeof tagInfo) {
// Get the opposite tag string
theTag = "open" === tagInfo.at ? tagInfo.open.tag : tagInfo.close.tag;
// If we have changeObj.from info to work with
if ("undefined" !== typeof changeObj.from) {
// Same line changing needs a character pos shift
charDiff = thisLine === changeObj.from.line
? changeObj.text[0].length - changeObj.removed[0].length
: 0;
// Also need to adjust if we're in the close tag on same line
closeDiff = "close" === tagInfo.at && thisLine === changeObj.from.line
? changeObj.removed[0].length - changeObj.text[0].length + 1
: 1;
// Work out the replace from and to positions
repl1 = {line: thisLine, ch: thisChar + charDiff+("open" === tagInfo.at ? 2 : closeDiff)};
repl2 = {line: thisLine, ch: thisChar + charDiff+("open" === tagInfo.at ? 2 : closeDiff) + rData[0].length};
}
}
// Replace our string over the range, if this token string isn't blank and the end tag matches our original tag
if ("" !== theTag.trim() && "undefined" !== typeof repl1 && "undefined" !== typeof repl2 && thisCM.getRange(repl1,repl2) === rData[0]) {
thisCM.replaceRange(theTag, repl1, repl2, "+input");
// If at the close tag, don't autocomplete
if (tagInfo.at === "close") {
this.autocompleteSkip = true;
}
}
}
}
// Reset our array for next time and redo editor stats
this.oppTagReplaceData = [];
this.setEditorStats();
// Update the list of functions and classes
this.updateFunctionClassList();
filepath = this.openFiles[this.selectedTab - 1];
if (filepath) {
filename = filepath.substr(filepath.lastIndexOf("/") + 1);
fileExt = filename.substr(filename.lastIndexOf(".") + 1);
}
// Update diffs if we have a split pane
if (true === this.splitPane) {
// Need 0ms tickover so we handle char change first
setTimeout(function(ic){ic.updateDiffs();}, 0, this);
}
// Highlight Git diff colors in gutter
if (this.indexData) {
this.highlightGitDiffs();
}
// Update HTML edited files live
if (filepath && this.previewWindow.location && filepath !== "/[NEW]") {
this.updatePreviewWindow(thisCM, filepath, filename, fileExt);
}
// Update the title tag to indicate any changes
this.indicateChanges();
},
// On update
cMonUpdate: function(thisCM, cMinstance) {
// Nothing as yet
},
// On scroll
cMonScroll: function(thisCM, cMinstance) {
let cM, cMdiff, otherCM;
if (true === this.splitPane) {
// Get both main & diff instance and work out the instance we're not scrolling
cM = this.getcMInstance();
cMdiff = this.getcMdiffInstance();
otherCM = cMinstance.indexOf('diff') > -1 ? cM : cMdiff;
if (cM) {
// Scroll other pane x & y to match this one we're scrolling, after a tickover to avoid judder
// 0ms = drag scrollbar, 50 = mouse wheel
setTimeout(function(){otherCM.scrollTo(thisCM.getScrollInfo().left, thisCM.getScrollInfo().top);}, true === this.mouseDown ? 0 : 50);
}
}
},
// On input read
cMonInputRead: function(thisCM, cMinstance) {
if ("kepypress" === this.autoComplete && this.codeAssist) {
if (!thisCM.state.completionActive) {
if (!this.autocompleteSkip) {
this.autocomplete();
} else {
this.autocompleteSkip = false;
}
}
}
},
// On gutter click
cMonGutterClick: function(thisCM, line, gutter, evt, cMinstance) {
this.mouseDownInCM = "gutter";
},
// On mouse down
cMonMouseDown: function(thisCM, cMinstance, evt) {
this.mouseDownInCM = "editor";
},
// On context menu
cMonContextMenu: function(thisCM, cMinstance, evt) {
// Set cursor
const currCoords = thisCM.coordsChar({left: evt.pageX, top: evt.pageY});
thisCM.setCursor(currCoords);
// If CTRL key down
if (evt.ctrlKey) {
setTimeout(function(ic) {
// Get cM and word under mouse pointer
let cM = thisCM;
let word = (cM.getRange(cM.findWordAt(cM.getCursor()).anchor, cM.findWordAt(cM.getCursor()).head));
// Get result and number of results for word in functions and classes from index JSON object list
let result = null;
let numResults = 0;
let filePath = ic.openFiles[ic.selectedTab - 1];
let filePathExt = filePath.substr(filePath.lastIndexOf(".") + 1);
if ("undefined" !== typeof ic.indexData.functions) {
for(i in ic.indexData.functions[filePathExt]) {
if (i === word) {
result = ic.indexData.functions[filePathExt][i];
numResults++;
}
}
}
if ("undefined" !== typeof ic.indexData.class) {
for (i in ic.indexData.classes[filePathExt]) {
if (i === word) {
result = ic.indexData.classes[filePathExt][i];
numResults++;
}
}
}
// If we have a single result and the cursor isn't already on the definition of it we can jump to where it's defined
if (1 === numResults && -1 === [null, "def"].indexOf(cM.getTokenTypeAt(cM.getCursor()))) {
ic.openFile(result.filePath.replace(docRoot, ""));
ic.goFindAfterOpenInt = setInterval(function(result) {
if (ic.openFiles[ic.selectedTab - 1] == result.filePath.replace(docRoot, "") && !ic.loadingFile) {
cM = ic.getcMInstance();
setTimeout(function(result) {
ic.goToLine(result.range.from.line + 1);
cM.setSelection({line: result.range.from.line, ch: result.range.from.ch}, {line: result.range.to.line, ch: result.range.to.ch});
}, 20, result);
clearInterval(ic.goFindAfterOpenInt);
}
}, 20, result);
}
ic.mouseDownInCM = "editor";
}, 0, this);
}
},
// On drag over
cMonDragOver: function(thisCM, evt, cMinstance) {
this.setDragCursor(evt, 'editor');
},
// On render line
cMonRenderLine: function(thisCM, cMinstance, line, element) {
let paneMatch;
// Loop through styles to use when rendering lines
for (let i = 0; i < this.renderLineStyle.length; i++) {
// We have no matching pane to start with
paneMatch = false;
// Is the pane we need to style this pane?
if (
("diff" !== this.renderLineStyle[i][0] && -1 === cMinstance.indexOf("diff")) ||
("diff" === this.renderLineStyle[i][0] && -1 < cMinstance.indexOf("diff"))
)
{paneMatch = true;}
// If the pane matches & also the line we're rendering is the line we have a style set for, set that style
if (paneMatch && thisCM.lineInfo(line).line + 1 == this.renderLineStyle[i][1]) {
element.style[this.renderLineStyle[i][2]] = this.renderLineStyle[i][3];
}
}
},
// Show function args tooltip
functionArgsTooltip: function(e, area) {
let numLintErrors;
if (this.indexData) {
// If we have no files open, return early
if (0 === this.openFiles.length) {
get('tooltip').style.display = "none";
return true;
}
let i;
// Get cM instance, and the word under mouse pointer
const cM = this.getcMInstance();
const coordsChar = cM.coordsChar({left: this.mouseX - this.maxFilesW, top: this.mouseY - 72});
const word = (cM.getRange(cM.findWordAt(coordsChar).anchor, cM.findWordAt(coordsChar).head));
// If it's not a word, return early
if ("" === word) {
get('tooltip').style.display = "none";
return true;
}
// Get result and number of results for word in functions from index JSON object list
let result = null;
let numResults = 0;
const filePath = this.openFiles[this.selectedTab - 1];
const filePathExt = filePath.substr(filePath.lastIndexOf(".") + 1);
for(i in this.indexData.functions[filePathExt]) {
if (i === word) {
result = this.indexData.functions[filePathExt][i];
numResults++;
}
}
// If we have a single result and the mouse pointer is not over the definition of it (that would be pointless), show tooltip
if (1 === numResults && -1 === [null, "def"].indexOf(cM.getTokenTypeAt(coordsChar))) {
get('tooltip').style.display = "block";
get('tooltip').style.left = (this.mouseX - this.maxFilesW + 10) + "px";
numLintErrors = this.content.contentWindow.document.getElementsByClassName("CodeMirror-lint-tooltip")[0];
numLintErrors = numLintErrors && numLintErrors.childNodes
? numLintErrors.childNodes.length
: 0;
get('tooltip').style.top = (this.mouseY - 30 -
(0 < numLintErrors
? 18 * numLintErrors
: 0)
) + "px";
get('tooltip').style.zIndex = "1";
get('tooltip').innerHTML = result.params;
// Else hide it
} else {
get('tooltip').style.display = "none";
}
}
},
// Update diffs shown to the user in each pane
updateDiffs: function() {
let cM, cMdiff, mainText, diffText, sm, opcodes, cMmarks, cMdiffMarks, amt, sDiffs;
// Reset the style array container and main vs diff pane shift difference
this.renderLineStyle = [];
this.renderPaneShiftAmount = 0;
cM = this.getcMInstance();
cMdiff = this.getcMdiffInstance();
// Get the baseText and newText values from the two textboxes, and split them into lines
mainText = cM ? difflib.stringAsLines(cM.getValue()) : "";
diffText = cMdiff ? difflib.stringAsLines(cMdiff.getValue()) : "";
// Create a SequenceMatcher instance that diffs the two sets of lines
sm = new difflib.SequenceMatcher(mainText, diffText);
// Get the opcodes from the SequenceMatcher instance
// Opcodes is a list of 3-tuples describing what changes should be made to the base text in order to yield the new text
opcodes = sm.get_opcodes();
if (cM) {
// Clear all main pane marks
cMmarks = cM.getAllMarks();
for (let i = 0; i < cMmarks.length; i++) {
cMmarks[i].clear();
}
// Clear all diff pane marks
cMdiffMarks = cMdiff.getAllMarks();
for (let i = 0; i < cMdiffMarks.length; i++) {
cMdiffMarks[i].clear();
}
}
if (cM && "" !== cMdiff.getValue()) {
// For each opcode returned by jsdifflib
for (let i = 0; i < opcodes.length; i++) {
// If not 'equal' status for the section, we have a 'replace', 'delete' or 'insert' status, so do something
if ("equal" !== opcodes[i][0]) {
// =========
// MAIN PANE
// =========
// Replacing? Pad out main pane line to match equivalent last line in diff pane
if ("replace" === opcodes[i][0]) {
// Line amount is diff between end of both panes at this point in our loop, plus 1 line and our overall document shift, multiplied by font size
amt = ((opcodes[i][4] - opcodes[i][2] + 1 + this.renderPaneShiftAmount) * cM.defaultTextHeight());
// Add on the extra heights for any wrapped lines
for (let j = opcodes[i][4] - 1; j <= opcodes[i][2] - 1; j++) {
if (cMdiff.getLineHandle(j).height > cM.defaultTextHeight()) {
amt += cMdiff.getLineHandle(j).height - cM.defaultTextHeight();
}
}
// If we have an height greater than the default text height, add a new style
if (amt > cM.defaultTextHeight()) {
this.renderLineStyle.push(["main", opcodes[i][2], "height", amt + "px"]);
}
// Mark text in 2 colours, for each line
for (let j = 0; j<(opcodes[i][2]) - (opcodes[i][1]); j++) {
sDiffs = (this.findStringDiffs(cM.getLine(opcodes[i][1] + j),cMdiff.getLine(opcodes[i][3] + j)));
cM.markText({line: opcodes[i][1]+j, ch: 0}, {line: opcodes[i][3] + j + this.renderPaneShiftAmount, ch: sDiffs[0]}, {className: "diffGreyLighter"});
cM.markText({line: opcodes[i][1]+j, ch: sDiffs[0]}, {line: opcodes[i][3] + j + this.renderPaneShiftAmount, ch: sDiffs[0] + sDiffs[1]}, {className: "diffGrey"});
cM.markText({line: opcodes[i][1]+j, ch: sDiffs[0] + sDiffs[1]}, {line: opcodes[i][3] + j + this.renderPaneShiftAmount, ch: 1000000}, {className: "diffGreyLighter"});
}
// Inserting
} else {
cM.markText({line: opcodes[i][1], ch: 0}, {line: opcodes[i][2] - 1, ch: 1000000}, {className: "diffGreen"});
}
// If inserting or deleting and the main pane hasn't changed, we need to pad out the line in that pane
if ("replace" !== opcodes[i][0] && opcodes[i][1] === opcodes[i][2]) {
this.renderLineStyle.push(["main", opcodes[i][2], "height", ((opcodes[i][4] - opcodes[i][3] + 1) * cM.defaultTextHeight()) + "px"]);
// Mark the range with empty class
cM.markText({line: opcodes[i][2] - 1, ch: 0}, {line: opcodes[i][2]-1, ch: 1000000}, {className: "diffNone"});
}
// =========
// DIFF PANE
// =========
// Replacing? Pad out diff pane line to match equivalent last line in main pane
if ("replace" === opcodes[i][0]) {
// Line amount is diff between end of both panes at this point in our loop, plus 1 line and our overall document shift, multiplied by font size
amt = ((opcodes[i][2] - opcodes[i][4] + 1 - this.renderPaneShiftAmount) * cM.defaultTextHeight());
// Add on the extra heights for any wrapped lines
for (let j = opcodes[i][4] - 1; j <= opcodes[i][2] - 1; j++) {
if (cM.getLineHandle(j).height > cM.defaultTextHeight()) {
amt += cM.getLineHandle(j).height - cM.defaultTextHeight();
}
}
// If we have an height greater than the default text height, add a new style
if (amt > cM.defaultTextHeight()) {
this.renderLineStyle.push(["diff", opcodes[i][4], "height", amt + "px"]);
}
// Mark text in 2 colours, for each line
for (let j = 0; j<(opcodes[i][4]) - (opcodes[i][3]); j++) {
sDiffs = (this.findStringDiffs(cM.getLine(opcodes[i][1] + j),cMdiff.getLine(opcodes[i][3] + j)));
cMdiff.markText({line: opcodes[i][1] + j - this.renderPaneShiftAmount, ch: 0}, {line: opcodes[i][3] + j, ch: sDiffs[0]}, {className: "diffGreyLighter"});
cMdiff.markText({line: opcodes[i][1] + j - this.renderPaneShiftAmount, ch: sDiffs[0]}, {line: opcodes[i][3] + j, ch: sDiffs[0] + sDiffs[2]}, {className: "diffGrey"});
cMdiff.markText({line: opcodes[i][1] + j - this.renderPaneShiftAmount, ch: sDiffs[0] + sDiffs[2]}, {line: opcodes[i][3] + j, ch: 1000000}, {className: "diffGreyLighter"});
}
// Deleting
} else {
cMdiff.markText({line: opcodes[i][3], ch: 0}, {line: opcodes[i][4] - 1, ch: 1000000}, {className: "diffRed"});
}
// If inserting or deleting and the diff pane hasn't changed, we need to pad out the line in that pane
if ("replace" !== opcodes[i][0] && opcodes[i][3] === opcodes[i][4]) {
this.renderLineStyle.push(["diff", opcodes[i][4], "height", ((opcodes[i][2] - opcodes[i][1] + 1) * cM.defaultTextHeight()) + "px"]);
// Mark the range with empty class
cMdiff.markText({line: opcodes[i][4] - 1, ch: 0}, {line: opcodes[i][4] - 1, ch: 1000000}, {className: "diffNone"});
}
// Finally, set the last amount shifted for this change
this.renderPaneShiftAmount = (opcodes[i][2] - opcodes[i][4]);
}
}
}
},
// Find diffs between 2 strings
findStringDiffs: function(a, b) {
if ("undefined" == typeof a) {a = ""}
if ("undefined" == typeof b) {b = ""}
for (var c = 0, // start from the first character
d = a.length, e = b.length; // and from the last characters of both strings
a[c] && // if not at the end of the string and
a[c] === b[c]; // if both strings are equal at this position
c++); // go forward
for (; d > c & e > c & // stop at the position found by the first loop
a[d - 1] === b[e - 1]; // if both strings are equal at this position
d--) e--; // go backward
return[c, d - c, e - c] // return position and lengths of the two substrings found
},
// Highlight git diffs (between what is in browser and in Git commits)
highlightGitDiffs: function() {
// Clear the timeout if we have one already
if ("undefined" !== typeof highlightGitDiffTimeout) {
clearTimeout(highlightGitDiffTimeout);
}
// If we have index data & Git data, after a timeout, if we have a matching path in that Git data
if (this.indexData && this.indexData.gitContent) {
highlightGitDiffTimeout = setTimeout(function(ic) {
if (ic.indexData.gitContent[docRoot + ic.openFiles[ic.selectedTab - 1]]) {
// Get the CodeMirror instance and clear the gutter for it
cM = ic.getcMInstance();
cM.clearGutter("CodeMirror-linenumbers");
// Get the baseText and gitText values from the two sources, and split them into lines
const mainText = cM ? difflib.stringAsLines(cM.getValue()) : "";
const gitText = difflib.stringAsLines(ic.indexData.gitContent[docRoot + ic.openFiles[ic.selectedTab - 1]].lastHashContent ?? "");
// Create a SequenceMatcher instance that diffs the two sets of lines
const sm = new difflib.SequenceMatcher(gitText, mainText);
// Get the opcodes from the SequenceMatcher instance
// Opcodes is a list of 3-tuples describing what changes should be made to the base text in order to yield the new text
const opcodes = sm.get_opcodes();
// For each opcode returned by jsdifflib
for (let i = 0; i < opcodes.length; i++) {
// If not 'equal' status for the section, we have a 'replace', 'delete' or 'insert' status, so do something
if ("equal" !== opcodes[i][0]) {
// Replacing
if ("replace" === opcodes[i][0]) {
// Mark text in one of 2 colours, for each line
for (let j = opcodes[i][3]; j < opcodes[i][4]; j++) {
let elem = document.createElement("DIV");
elem.className = "CodeMirror-linenumber";
// Only trim whitespace is different, grey
if (gitText[j - (opcodes[i][4] - opcodes[i][2])] && mainText[j].trim() === gitText[j - (opcodes[i][4] - opcodes[i][2])].trim()) {
elem.style.background = "#888";
// Something other than whitespace is different, orange
} else {
elem.style.background = "#f80";
}
elem.style.color = "#111";
elem.innerHTML = j + 1;
cM.setGutterMarker(j, "CodeMirror-linenumbers", elem);
}
// Inserting
} else if ("insert" === opcodes[i][0]) {
// Mark text in green for each line
for (let j = opcodes[i][3]; j < opcodes[i][4]; j++) {
let elem = document.createElement("DIV");
elem.className = "CodeMirror-linenumber";
elem.style.background = "#080";
elem.style.color = "#fff";
elem.innerHTML = j + 1;
cM.setGutterMarker(j, "CodeMirror-linenumbers", elem);
}
// Deleting
} else {
// Add a red line to indicate where lines where deleted
let elem = document.createElement("DIV");
elem.className = "CodeMirror-linenumber";
// If we haven't deleted content at end, line is above numbers
if (cM.lineCount() > opcodes[i][3]) {
elem.style.borderTop = "solid #b00 1px";
elem.innerHTML = opcodes[i][3] + 1;
cM.setGutterMarker(opcodes[i][3], "CodeMirror-linenumbers", elem);
// Otherwise, line is below last number
} else {
elem.style.borderBottom = "solid #b00 1px";
elem.innerHTML = opcodes[i][3];
cM.setGutterMarker(opcodes[i][3] - 1, "CodeMirror-linenumbers", elem);
}
}
}
}
}
}, this.loadingFile ? 100 : 0, this);
}
},
// Update Git diff pane (the diffs between saved content and git commits)
updateGitDiffPane: function() {
let gitDiffList = "";
get("toolLinkGit").className = 0 < this.indexData.gitDiff.paths.length
? "highlight info"
: "";
for (let i = 0; i < this.indexData.gitDiff.paths.length; i++) {
gitDiffList +=
'
\n' + err.message.replace(//g, '>'));
}
}
setTimeout(function() {
// If we're not 'saving as', establish changes between current and known saved version from array
if (false === saveAs) {
changes = ic.getChangesToSave();
}
saveType = saveAs ? "saveAs" : "save";
filePath = ic.openFiles[ic.selectedTab - 1].replace(iceRoot, "").replace(/\//g, "|");
if ("|[NEW]" === filePath && 0 < ic.selectedFiles.length) {
pathPrefix = ic.selectedFiles[0];
filePath = -1 == pathPrefix.lastIndexOf(".") || pathPrefix.lastIndexOf(".") < pathPrefix.lastIndexOf("|")
? pathPrefix + filePath
: "|[NEW]";
}
filePath = filePath.replace("||", "|");
ic.serverQueue("add", iceLoc + "/lib/file-control.php?action=save&fileMDT=" + ic.openFileMDTs[ic.selectedTab - 1] + "&fileVersion=" + ic.openFileVersions[ic.selectedTab - 1] + "&saveType=" + saveType + "&newFileAutoSave=" + newFileAutoSave + "&tabNum=" + ic.selectedTab + "&csrf=" + ic.csrf,encodeURIComponent(filePath), changes);
ic.serverMessage('' + t['Saving'] + ' ' + ic.openFiles[ic.selectedTab - 1].replace(iceRoot, "").replace(/^\/|/g, ''));
}, 0, ic);
},
// Prompt a rename dialog
renameFile: function(oldName, newName) {
let shortURL, fileName, i;
if (!oldName) {
shortURL = this.selectedFiles[this.selectedFiles.length - 1].replace(/\|/g, "/");
oldName = this.selectedFiles[this.selectedFiles.length - 1].replace(/\|/g, "/");
} else {
shortURL = oldName.replace(/\|/g, "/");
}
if (!newName) {
newName = this.getInput(t['Please enter the...'], shortURL);
}
if (newName) {
this.serverQueue("add", iceLoc + "/lib/file-control.php?action=rename&oldFileName=" + encodeURIComponent(oldName.replace(/\|/g, "/")) + "&csrf=" + this.csrf,encodeURIComponent(newName));
this.serverMessage('' + t['Renaming to'] + ' ' + newName.replace(/^\/|/g, ''));
this.setPreviousFiles();
}
},
// Move a file from old location to new
moveFile: function(oldName, newName) {
let i, closeTabLink, fileName;
if (newName && newName !== oldName) {
if (this.ask("Are you sure you want to move file " + oldName + " to " + newName + " ?")){
this.serverQueue("add", iceLoc + "/lib/file-control.php?action=move&oldFileName=" + encodeURIComponent(oldName.replace(/\//g, "|")) + "&csrf=" + this.csrf, encodeURIComponent(newName.replace(/\//g, "|")));
this.serverMessage('' + t['Moving to'] + ' ' + newName.replace(/^\/|/g, ''));
}
this.setPreviousFiles();
}
},
// Delete a file
deleteFiles: function(fileList) {
let tgtFiles, tgtListDisplay;
tgtFiles = fileList ? fileList : this.selectedFiles;
tgtListDisplay = tgtFiles.toString().replace(/\|/g, "/").replace(/,/g, "\n");
if (0 < tgtFiles.length && this.ask('Delete:\n\n' + tgtListDisplay + '?')) {
this.serverQueue("add", iceLoc + "/lib/file-control.php?action=delete&csrf=" + this.csrf,encodeURIComponent(tgtFiles.join(";")));
this.serverMessage('' + t['Deleting File'] + ' ' + tgtListDisplay.replace(/^\/|/g, ''));
}
},
// Copy files
copyFiles: function(fileList, dontShowPaste, dontHide) {
this.copiedFiles = [];
for (let i = 0; i < fileList.length; i++) {
this.copiedFiles[i] = fileList[i];
}
if (!dontShowPaste) {
get('fmMenuPasteOption').style.display = "block";
}
if (!dontHide) {
this.hideFileMenu();
}
},
// Paste files
pasteFiles: function(location) {
if (this.copiedFiles) {
for (let i = 0; i < this.copiedFiles.length; i++) {
if ("|" !== this.copiedFiles[i]) {
this.serverQueue("add", iceLoc + "/lib/file-control.php?action=paste&location=" + location + "&csrf=" + this.csrf, encodeURIComponent(this.copiedFiles[i]));
this.serverMessage('' + t['Pasting File'] + ' ' + this.copiedFiles[i].toString().replace(/\|/g, "/").replace(/,/g, "\n").replace(/^\/|/g, ''));
} else {
this.message(t['Sorry cannot paste...']);
}
}
} else {
this.message(t['Nothing to paste...']);
}
},
// Duplicate (copy & paste) files
duplicateFiles: function(fileList) {
let copiedFiles, location;
// Take a snapshot of copied files
if (this.copiedFiles) {
copiedFiles = this.copiedFiles;
}
this.copyFiles(fileList, 'dontShowPaste', 'dontHide');
location = fileList[0].substr(0, fileList[0].lastIndexOf("|"));
this.pasteFiles(location);
// Restore copied files back to the snapshot
if ("undefined" !== typeof copiedFiles) {
this.copiedFiles = copiedFiles;
}
},
// Upload file(s) - select & submit
uploadFilesSelect: function(location) {
get('uploadDir').value = location;
get("fileInput").click();
},
uploadFilesSubmit: function(obj) {
if ("" !== get('fileInput').value) {
this.showHide('show', get('loadingMask'));
get('uploadFilesForm').submit();
event.preventDefault();
}
},
// Show/hide file manager nav options
showHideFileNav: function(vis, elem) {
let options = ["optionsFile", "optionsEdit", "optionsSettings", "optionsHelp"];
if ("hide" === vis) {
fileNavInt = setTimeout(function(ic) {
for (let i = 0; i < options.length; i++) {
ic.showHide('hide', get(options[i]));
get(options[i] + 'Nav').style.color = '';
}
}, 150, this);
} else {
for (let i = 0; i < options.length; i++) {
this.showHide('hide', get(options[i]));
get(options[i] + 'Nav').style.color = '';
}
}
get('fileOptions').style.opacity = "0";
if ("show" === vis) {
if ("undefined" !== typeof fileNavInt) {
clearTimeout(fileNavInt);
}
this.showHide(vis, get(elem));
get(elem + 'Nav').style.color = '#fff';
get('fileOptions').style.opacity = "1";
}
},
// Is a specified path a folder? (Note: path is string encoded path with / replaced with |)
isPathFolder: function(path) {
// let's enumerate all folders to find whether clicked file is a folder or not
const dir = this.filesFrame.contentDocument.getElementsByClassName("pft-directory");
const thisFileId = this.selectedFiles[0];
let liNode, aNode, spanNode;
for (let i = 0; i < dir.length; i++){
liNode = dir[i];
if ("undefined" !== typeof liNode){
aNode = liNode.childNodes[0];
if ("undefined" !== typeof aNode){
spanNode = aNode.childNodes[1];
if ("undefined" !== typeof spanNode){
if (thisFileId === spanNode.getAttribute('id')){
// It's a folder
return true;
}
}
}
}
}
// It's a file
return false;
},
// Check for existence of a file/dir
checkExists: function(path) {
let xhr, statusObj, timeStart;
path = path.replace(/\|/g, "/");
// Clear any prefixed iceRoot from path
if (0 === path.indexOf(iceRoot)) {
path = path.replace(iceRoot, "");
}
// Start a seperate XHR call. We run seperately rather than add into the serverQueue because we may need to run
// immediately, eg need to if a file/dir exists mid flow in 'Save As' function, so can't go into queue
xhr = this.xhrObj();
xhr.onreadystatechange=function() {
if (4 === xhr.readyState) {
// OK response?
if (200 === xhr.status) {
// Parse the response as a JSON object
statusObj = JSON.parse(xhr.responseText);
// Set the action end time and time taken in JSON object
statusObj.action.timeEnd = new Date().getTime();
statusObj.action.timeTaken = statusObj.action.timeEnd - statusObj.action.timeStart;
// User wanted raw (or both) output of the response?
if (0 <= ["raw", "both"].indexOf(ICEcoder.fileDirResOutput)) {
console.log(xhr.responseText);
}
// User wanted object (or both) output of the response?
if (0 <= ["object", "both"].indexOf(ICEcoder.fileDirResOutput)) {
console.log(statusObj);
}
// Also store the statusObj
ICEcoder.lastFileDirCheckStatusObj = statusObj;
// If error, show that, otherwise do whatever we're required to do next
if (statusObj.status.error) {
ICEcoder.message(statusObj.status.errorMsg);
console.log("ICEcoder error info for your request...");
console.log(statusObj);
ICEcoder.serverMessage();
ICEcoder.serverQueue('del');
} else {
eval(statusObj.action.doNext);
}
// Some other response? Display a message about that
} else {
ICEcoder.message(t['Sorry there was...']);
console.log("ICEcoder error info for your request...");
console.log(statusObj);
ICEcoder.serverMessage();
ICEcoder.serverQueue('del');
}
}
};
xhr.open("POST", iceLoc + "/lib/file-control.php?action=checkExists&csrf=" + this.csrf, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
timeStart = new Date().getTime();
xhr.send('timeStart=' + timeStart + '&file=' + encodeURIComponent(path));
},
// Show menu on right clicking in file manager
showMenu: function(evt) {
let menuType, menuHeight, winH, fmXPos, fmYPos;
if (0 === this.selectedFiles.length ||
-1 === this.selectedFiles.indexOf(this.selectedFiles[this.selectedFiles.length-1].replace(/\//g, "|"))) {
this.selectFileFolder(evt);
}
menuHeight = 124 + 5; // general options height in px plus 5px space
winH = window.innerHeight;
if ("undefined" !== typeof this.thisFileFolderLink && "" !== this.thisFileFolderLink) {
menuType = this.isPathFolder(this.selectedFiles[0]) ? "folder" : "file";
get('folderMenuItems').style.display = "folder" === menuType && 1 === this.selectedFiles.length ? "block" : "none";
if ("folder" === menuType && 1 === this.selectedFiles.length) {
menuHeight += 20 + 20 + 1 + 23 + 1 + 2; // new file, new folder, hr, upload files(s), hr, padding
if ("block" === get('fmMenuPasteOption').style.display) {
menuHeight += 19;
}
}
get('singleFileMenuItems').style.display = this.selectedFiles.length > 1 ? "none" : "block";
if (1 === this.selectedFiles.length) {
menuHeight += 43;
}
get('fileMenu').style.display = "inline-block";
setTimeout(function() {get('fileMenu').style.opacity = "1"}, 4);
fmXPos = this.mouseX - this.filesFrame.contentWindow.scrollX + 20;
fmYPos = this.mouseY - this.filesFrame.contentWindow.scrollY - 10;
if (fmYPos + menuHeight > winH) {
fmYPos -= (fmYPos + menuHeight - winH);
}
get('fileMenu').style.left = fmXPos + "px";
get('fileMenu').style.top = fmYPos + "px";
}
return false;
},
// Continue to show the file menu
showFileMenu: function() {
get('fileMenu').style.display = 'inline-block';
setTimeout(function() {get('fileMenu').style.opacity = "1"}, 4);
},
// Hide the file menu
hideFileMenu: function() {
get('fileMenu').style.display = 'none';
get('fileMenu').style.opacity = "0";
},
// Update the file manager tree list on demand
updateFileManagerList: function(action, location, file, perms, oldName, uploaded, fileOrFolder) {
let actionElemType, cssStyle, targetElem, locNest, newText, innerLI, permColors, newUL, newLI, elemType, nameLI, shortURL;
perms = parseInt(perms, 10);
// Adding files
if ("add" === action && !get('filesFrame').contentWindow.document.getElementById(location.replace(iceRoot, "").replace(/\/$/, "").replace(/\//g, "|") + "|" + file)) {
// Is this is a file or folder and based on that, set the CSS styling & link
actionElemType = fileOrFolder;
cssStyle = "file" === actionElemType ? "pft-file ext-" + file.substr(file.indexOf(".") + 1) : "pft-directory";
perms = "file" === actionElemType ? this.newFilePerms : this.newDirPerms;
// Identify our target element & the first child element in it's location
if (!location) {location = "/"}
location = location.replace(iceRoot, "/").replace("//", "/");
targetElem = get('filesFrame').contentWindow.document.getElementById(location.replace(/\//g, "|"));
locNest = targetElem.parentNode.parentNode.nextSibling;
newText = document.createTextNode("\n");
permColors = 777 === perms ? 'background: #800; color: #eee' : 'color: #888';
innerLI = ''+file+''+perms+'';
// If we don't have a locNest or at least 3 DOM items in there, it's an empty folder
if(!locNest || 3 > locNest.childNodes.length) {
// We now need to begin a new UL list
newUL = document.createElement("ul");
locNest = targetElem.parentNode.parentNode;
locNest.parentNode.insertBefore(newUL, locNest.nextSibling);
// Now we can add the first LI for this file/folder we're adding
newLI = document.createElement("li");
newLI.className = cssStyle;
newLI.draggable = false;
newLI.ondragstart = function(event) {parent.ICEcoder.addDefaultDragData(this, event)};
newLI.ondrag = function(event) {parent.ICEcoder.draggingWithKeyTest(event);if(parent.ICEcoder.getcMInstance()){parent.ICEcoder.editorFocusInstance.indexOf('diff') == -1 ? parent.ICEcoder.getcMInstance().focus() : parent.ICEcoder.getcMdiffInstance().focus()}};
newLI.ondragover = function(event) {parent.ICEcoder.setDragCursor(event, "folder" === actionElemType ? 'folder' : 'file')};
newLI.ondragend = function() {parent.ICEcoder.dropFile(this)};
newLI.innerHTML = innerLI;
locNest.nextSibling.appendChild(newLI);
locNest.nextSibling.appendChild(newText);
// There are items in that location, so add our new item in the right position
} else {
for (let i = 0; i < locNest.childNodes.length; i++) {
if (locNest.childNodes[i].className) {
// Identify if the item we're considering is a file or folder
elemType = 0 < locNest.childNodes[i].className.indexOf('directory') ? "folder" : "file";
// Get the name of the item
nameLI = locNest.childNodes[i].getElementsByTagName('span')[0].innerHTML;
// If it's of the same type & the name is greater, or we're adding a folder and it's a file or if we're at the end of the list
if ((elemType == actionElemType && nameLI > file) || ("folder" === actionElemType && "file" === elemType) || i == locNest.childNodes.length - 1) {
newLI = document.createElement("li");
newLI.className = cssStyle;
newLI.draggable = false;
newLI.ondragstart = function(event) {parent.ICEcoder.addDefaultDragData(this, event)};
newLI.ondrag = function(event) {parent.ICEcoder.draggingWithKeyTest(event);if(parent.ICEcoder.getcMInstance()){parent.ICEcoder.editorFocusInstance.indexOf('diff') == -1 ? parent.ICEcoder.getcMInstance().focus() : parent.ICEcoder.getcMdiffInstance().focus()}};
newLI.ondragover = function(event) {parent.ICEcoder.setDragCursor(event, "folder" === actionElemType ? 'folder' : 'file')};
newLI.ondragend = function() {parent.ICEcoder.dropFile(this)};
newLI.innerHTML = innerLI;
// Append or insert depending on which of the above if statements is true
if (i == locNest.childNodes.length - 1) {
locNest.appendChild(newLI);
locNest.appendChild(newText);
} else {
locNest.insertBefore(newLI,locNest.childNodes[i]);
locNest.insertBefore(newText,locNest.childNodes[i + 1]);
}
break;
}
}
}
}
// If we added a new file, we've saved it under a new filename, so set that
if ("file" === actionElemType && !oldName && !uploaded) {
this.openFiles[this.selectedTab - 1] = location + "/" + file;
}
}
// Renaming files
if ("rename" === action) {
// If dir is the same as before, it's a simple rename
if (location === oldName.substr(0, oldName.lastIndexOf('/'))) {
// Get short URL of our right clicked file and get target elem based on this
shortURL = oldName.replace(/\//g, "|");
targetElem = get('filesFrame').contentWindow.document.getElementById(shortURL);
// Set the name to be as per our new file/folder name
targetElem.innerHTML = file;
// Update the ID of the target & set a new title and perms ID
targetElem.id = location.replace(/\//g, "|") + "|" + file;
targetElem.parentNode.title = targetElem.id.replace(/\|/g, "/");
targetElemPerms = get('filesFrame').contentWindow.document.getElementById(shortURL + "_perms");
targetElemPerms.id = location.replace(/\//g, "|") + "|" + file + "_perms";
// Rename in selected files
this.renameInSelectedFiles(shortURL, location.replace(/\//g, "|") + "|" + file);
// Rename also within any children
this.renameInChildren(targetElem, oldName, location, file);
// Update data for any tabs we have open where we've changed a dir it resides in
for (let i = 0; i < this.openFiles.length; i++) {
if (0 === this.openFiles[i].indexOf(oldName + "/")) {
this.renameTab(i + 1, this.openFiles[i].replace(oldName, location + "/" + file));
}
}
// If dir has changed, handle dir change and possibly also filename change
} else {
// Target is root, or another dir?
const tgtClass = location === ""
? this.filesFrame.contentWindow.document.getElementById("|").parentNode.parentNode.className
: this.filesFrame.contentWindow.document.getElementById(location.replace(/\//g, "|")).parentNode.parentNode.className;
// Source is a dir or file?
const srcClass = this.filesFrame.contentWindow.document.getElementById(oldName.replace(/\//g, "|")).parentNode.parentNode.className;
fileOrFolder = srcClass.indexOf("pft-directory") > -1 ? "folder" : "file";
// Only add file into view if the dir is open
if (-1 < tgtClass.indexOf('dirOpen')) {
this.updateFileManagerList("add", location, file, false, oldName, false, fileOrFolder);
}
this.updateFileManagerList("delete", oldName.substr(0, oldName.lastIndexOf("/")), oldName.substr(oldName.lastIndexOf("/")+1), false, oldName, false, fileOrFolder);
this.selectedFiles = [];
}
}
// Moving files
if ("move" === action) {
// Target is root, or another dir?
const tgtClass = location === ""
? this.filesFrame.contentWindow.document.getElementById("|").parentNode.parentNode.className
: this.filesFrame.contentWindow.document.getElementById(location.replace(/\//g, "|")).parentNode.parentNode.className;
// Only add file into view if the dir is open
if (-1 < tgtClass.indexOf('dirOpen')) {
this.updateFileManagerList("add", location, file, false, oldName, false, fileOrFolder);
}
this.updateFileManagerList("delete", oldName.substr(0, oldName.lastIndexOf("/")), file, false, oldName, false, fileOrFolder);
this.selectedFiles = [];
}
// Chmod on files
if ("chmod" === action) {
// Get short URL for our file and get our target elem based on this
shortURL = this.selectedFiles[this.selectedFiles.length - 1].replace(/\|/g, "/");
targetElem = get('filesFrame').contentWindow.document.getElementById(shortURL.replace(/\//g, "|") + "_perms");
// Set the color for the perms
targetElem.style.background = 777 === perms ? '#800' : 'none';
targetElem.style.color = 777 === perms ? '#eee' : '#888';
// Set the new perms
targetElem.innerHTML = perms;
}
// Deleting files
if ("delete" === action) {
if (!location) {location = ""}
location = location.replace(iceRoot, "/");
location = location.replace("//", "/");
location = location.replace(/\/$/, "").replace(/\//g, "|");
targetElem = (location + "|" + file).replace("||", "|");
targetElem = get('filesFrame').contentWindow.document.getElementById(targetElem).parentNode.parentNode;
this.openCloseDir(targetElem.childNodes[0], false);
targetElem.parentNode.removeChild(targetElem);
if (!oldName) {
// Close any tabs we have open which would have had a file deleted
for (let i = this.openFiles.length - 1; i >= 0; i--) {
if ("folder" === fileOrFolder && 0 === this.openFiles[i].indexOf(location.replace(/\|/g, "/") + "/" + file + "/")) {
this.closeTab(i + 1, 'dontSetPV', 'dontAsk');
}
if ("file" === fileOrFolder && location.replace(/\|/g, "/") + "/" + file === this.openFiles[i]) {
this.closeTab(i + 1, 'dontSetPV', 'dontAsk');
}
}
}
}
// Finally, switch to selectedTab to refresh items
this.switchTab(this.selectedTab);
},
// Rename in selected files
renameInSelectedFiles: function(oldName, newName) {
for (let i = 0; i < this.selectedFiles.length; i++) {
if (oldName === this.selectedFiles[i]) {
this.selectedFiles[i] = newName;
}
}
},
// Rename node attributes within any renamed dirs recursively
renameInChildren: function(elem, oldName, location, file) {
let innerItems, targetElem, targetElemPerms;
// If our elem has a sibling and it's a UL, we renamed a dir
if(elem.parentNode.parentNode.nextSibling && "UL" === elem.parentNode.parentNode.nextSibling.nodeName) {
innerItems = elem.parentNode.parentNode.nextSibling;
// For each one of the children in the UL, if it's a LI (may be a file or dir)
for (let i = 0; i < innerItems.childNodes.length; i++) {
if ("LI" === innerItems.childNodes[i].nodeName) {
// Get the span elem inside as our targetElem
targetElem = innerItems.childNodes[i].childNodes[0].childNodes[1];
// Update the ID of the target & set a new title
targetElem.id = targetElem.id.replace(oldName.replace(/\//g, "|"),location.replace(/\//g, "|") + "|" + file);
targetElem.parentNode.title = targetElem.id.replace(/\|/g, "/");
// Also update the perms ID
targetElemPerms = get('filesFrame').contentWindow.document.getElementById(targetElem.id).nextSibling.nextSibling;
targetElemPerms.id = targetElem.id + "_perms";
// Finally, test this node for ULs next to it also, incase it's a dir
this.renameInChildren(targetElem, oldName, location, file);
}
}
}
},
// Refresh file manager
refreshFileManager: function() {
this.filesFrame.contentWindow.location.reload(true);
this.filesFrame.style.opacity = "0";
this.filesFrame.onload = function() {
ICEcoder.filesFrame.style.opacity = "1";
}
},
// Detect CTRL/Cmd key whilst dragging files
draggingWithKeyTest: function(evt) {
let key;
key = evt.keyCode ? evt.keyCode : evt.which ? evt.which : evt.charCode;
key = parseInt(key, 10);
// Mac command key handling (224 = Moz, 91/93 = Webkit Left/Right Apple)
if (-1 < [224, 91, 93].indexOf(key)) {
this.cmdKey = true;
}
this.draggingWithKey = evt.ctrlKey || this.cmdKey ? "CTRL" : false;
},
// Add default drag data (dragging in Firefox on DOM elems not possible otherwise)
addDefaultDragData: function(elem, evt) {
evt.dataTransfer.setData('Text', elem.id);
},
// Set a copy, move or none drag cursor type
setDragCursor: function(evt, dropType) {
let cursorIcon;
// Prevent the default and establish if CTRL key is down
evt.preventDefault();
this.draggingWithKeyTest(evt);
// Establish the cursor to show
cursorIcon =
"editor" === dropType
? "CTRL" === this.draggingWithKey
? "copy"
: "link"
: "folder" === dropType
? "CTRL" === this.draggingWithKey
? "copy"
: "move"
: "none";
evt.dataTransfer.dropEffect = cursorIcon;
},
// On dropping a file, do something
dropFile: function(elem) {
let filePath, tgtPath;
filePath = elem.childNodes[0].childNodes[1].id.replace(/\|/g, "/");
fileName = filePath.substr(filePath.lastIndexOf("/") + 1);
if ('editor' === this.area) {
this.pasteURL(filePath);
}
if ('files' === this.area) {
setTimeout(function(ic) {
tgtPath = "folder" === ic.thisFileFolderType ? ic.thisFileFolderLink : ic.thisFileFolderLink.substr(0, ic.thisFileFolderLink.lastIndexOf("|"));
if("CTRL" === ic.draggingWithKey) {
ic.copyFiles(ic.selectedFiles);
ic.pasteFiles(tgtPath);
} else {
// Clear the background of item you just dropped onto
this.filesFrame.contentWindow.document.getElementById(tgtPath.replace(/\//g, "|")).style.background = '';
// If the tgtPath is not the root, postfix the path with a pipe
if ("|" !== tgtPath) {tgtPath += "|"};
ic.moveFile(filePath,tgtPath.replace(/\|/g, "/") + fileName);
}
}, 4, this);
}
this.mouseDown = false;
this.mouseDownInCM = false;
},
// ==============
// FIND & REPLACE
// ==============
// Update find & replace options based on user selection
findReplaceOptions: function() {
get('rText').style.display =
get('replace').style.display =
get('rTarget').style.display =
document.findAndReplace.connector.value==t['and']
? "inline-block" : "none";
},
findReplaceOnInput: function() {
// Realtime finding - only action for finding/replacing in current doc
if ("" !== get('find').value && t['this document'] === document.findAndReplace.target.value) {
ICEcoder.findReplace(get('find').value, true, false, false);
get("find").focus();
return false;
}
},
// Find & replace text according to user selections
findReplace: function(find, selectNext, canActionChanges, findPrevious) {
let replace, results, thisCM, avgBlockH, addPadding, rBlocks, haveMatch, blockColor, replaceQS, targetQS, filesQS;
// Determine our find rExp, replace value and results display
const rExp = new RegExp(find.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), "gi");
replace = get('replace').value;
results = get('results');
// Get CM pane
thisCM = this.getThisCM();
if (thisCM && 0 < find.length && t['this document'] === document.findAndReplace.target.value) {
// Replacing?
if (t['and'] === document.findAndReplace.connector.value && true === canActionChanges) {
// Find & replace the next instance, or all?
if (t['replace'] === document.findAndReplace.replaceAction.value && thisCM.getSelection().toLowerCase() === find.toLowerCase()) {
thisCM.replaceSelection(replace, "around");
} else if (t['replace all'] === document.findAndReplace.replaceAction.value) {
thisCM.setValue(thisCM.getValue().replace(rExp, replace));
}
}
// Set results, resultsLines and findResult back to defaults
this.results = [];
this.resultsLines = [];
this.findResult = 0;
// Start new iterators for line & last line
let i = 0;
let lastLine = -1;
// Get lineNum and chNum from cursor
const lineNum = thisCM.getCursor(true === selectNext ? "anchor" : "head").line + 1;
const chNum = thisCM.getCursor(true === selectNext ? "anchor" : "head").ch;
// Work out thhe avg block is either line height or fraction of space available
avgBlockH = !this.scrollBarVisible ? thisCM.defaultTextHeight() : parseInt(this.content.style.height, 10) / thisCM.lineCount();
// Need to add padding if there's no scrollbar, so current line highlighting lines up with it
addPadding = !this.scrollBarVisible ? thisCM.heightAtLine(0) : 0;
// Result blocks string empty to start, ready to hold DOM elems to show in results bar
rBlocks = "";
// Start looking for results
thisCM.eachLine(function(line) {
i++;
haveMatch = false;
// If we have matches for our regex for this line
while ((match = rExp.exec(line.text)) !== null) {
haveMatch = true;
// Not the same as last line, add to resultsLines
if (lastLine !== i) {
ICEcoder.resultsLines.push(match.index);
lastLine = i;
}
// If the line containing a result is less than than the cursors line or
// if the character position of the match is less than the cursor position, increment findResult
if (i < lineNum || (i === lineNum && match.index < chNum)) {
ICEcoder.findResult++;
}
// Push the line & char position coords into results
ICEcoder.results.push([i, match.index]);
}
// If the avg block height for results in results bar is above 0.5 pixels heigh, we can add a DOM elem
if (0.5 <= avgBlockH) {
// Red for current line, grey for another line, transparent if no match
blockColor = haveMatch ? thisCM.getCursor().line + 1 == i ? "rgba(192,0,0,0.3)" : "rgba(128,128,128,0.3)" : "transparent";
// Add the DOM elem into our rBlocks string
rBlocks += '';
}
});
// Increment findResult one more if our selection is what we want to find and we want to find next
if (find.toLowerCase() === thisCM.getSelection().toLowerCase() && false === findPrevious) {
ICEcoder.findResult++;
}
if (findPrevious) {
// Find & replace backwards using previous button = 1, else just find = 1
this.findResult -= true === canActionChanges ? 1 : 2;
}
// If we have results
if (this.results.length>0) {
// Show results only
if (false === selectNext) {
results.innerHTML = this.results.length + " results";
// We may want to take action instead
} else {
// Looking for next and hit end, loop round to start
if (false === findPrevious && this.findResult > this.results.length - 1) {
this.findResult = 0
}
// Looking for previous and hit start, loop round to end
if (findPrevious && 0 > this.findResult) {
this.findResult = this.results.length - 1;
}
// If we somehow ended up with a number under 0, set to 0
if (this.findResult < 0) {
this.findResult = 0;
}
// Update results display
results.innerHTML = "Highlighted result " + (this.findResult + 1) + " of " + this.results.length + " results";
// Scroll to that line in the editor
this.goToLine(this.results[this.findResult][0], this.results[this.findResult][1], true);
// Finally, highlight our selection and focus on CM pane
thisCM.setSelection(
{"line": this.results[this.findResult][0]-1, "ch": this.results[this.findResult][1]},
{"line": this.results[this.findResult][0]-1, "ch": this.results[this.findResult][1] + find.length}
);
this.focus();
}
// Display the find results bar
this.content.contentWindow.document.getElementById('resultsBar').innerHTML = rBlocks;
this.content.contentWindow.document.getElementById('resultsBar').style.display = "inline-block";
return true;
} else {
results.innerHTML = "No results";
this.content.contentWindow.document.getElementById('resultsBar').innerHTML = "";
this.content.contentWindow.document.getElementById('resultsBar').style.display = "none";
// Clear our selection and so also the match highlights
thisCM.setCursor(thisCM.getCursor("anchor"));
return false;
}
} else {
// Show the relevant multiple results popup
if (find !== "" && true === canActionChanges) {
// Set replace, target and files query string to empty
replaceQS = "";
targetQS = "";
filesQS = "";
// Replacing?
if (t['and'] === document.findAndReplace.connector.value) {
replaceQS = "&replace=" + replace;
}
// Target?
if (0 <= document.findAndReplace.target.value.indexOf(t['file'])) {
targetQS = "&target=" + document.findAndReplace.target.value.replace(/ /g, "-");
}
// Files?
if (t['selected files'] === document.findAndReplace.target.value) {
filesQS = "&selectedFiles="+this.selectedFiles.join(":");
}
// Establish find
find = find.replace(/\'/g, '\'');
find !== encodeURIComponent(find) ? find = 'ICEcoder:' + encodeURIComponent(find) : find;
// Finally, show loading mask and open multiple results pane using QS params
this.showHide('show',get('loadingMask'));
get('mediaContainer').innerHTML = '';
// We have nothing to search for, blank it all out
} else {
results.innerHTML = "No results";
this.content.contentWindow.document.getElementById('resultsBar').innerHTML = "";
this.content.contentWindow.document.getElementById('resultsBar').style.display = "none";
// Clear our selection and so also the match highlights
thisCM.setCursor(thisCM.getCursor("anchor"));
}
}
},
// Replace text in a file
replaceInFile: function(fileRef, find, replace) {
this.serverQueue(
"add",
iceLoc +
"/lib/file-control.php?action=replaceText&find=" + find +
"&replace=" + replace +
"&csrf=" + this.csrf,
encodeURIComponent(fileRef.replace(/\//g, "|")));
this.serverMessage('' + t['Replacing text in'] + ' ' + fileRef.replace(/^\/|/g, ''));
},
// ==============
// INFO & DISPLAY
// ==============
// Get the caret position
getCaretPosition: function() {
var thisCM, line, ch, chPos;
thisCM = this.getThisCM();
line = thisCM.getCursor().line;
ch = thisCM.getCursor().ch;
chPos = 0;
for (var i=0;i0)
? 'cM'+ICEcoder.cMInstances[this.selectedTab-1]
// fallback to first tab
: 'cM1'
];
},
// Determine the CodeMirror instance we're using
getcMdiffInstance: function(tab, context) {
if ("undefined" === typeof context) {
context = ICEcoder;
}
return context.content.contentWindow[
(// target specific tab
!isNaN(tab)
? 'cM'+ICEcoder.cMInstances[tab-1]
// new tab or selected tab
: tab=="new"||(tab!="new" && this.openFiles.length>0)
? 'cM'+ICEcoder.cMInstances[this.selectedTab-1]
// fallback to first tab
: 'cM1')
+ 'diff'
];
},
// Get the mouse position
getMouseXY: function(e,area) {
var tempX, tempY;
this.mouseX = e.pageX ? e.pageX : e.clientX + document.body.scrollLeft;
this.mouseY = e.pageY ? e.pageY : e.clientY + document.body.scrollTop;
this.area = area;
if (area!="top") {
this.mouseY += 25 + 45;
}
if (area=="editor") {
this.mouseX += this.filesW;
}
this.dragCursorTest();
if (this.mouseY>62) {this.setTabWidths();};
},
// Test if we need to show a drag cursor or not
dragCursorTest: function() {
var diffX, winH, cursorName, zone;
// Dragging tabs, started after dragging for 10px from origin
diffX = this.mouseX - this.diffStartX;
if (this.draggingTab!==false && this.diffStartX && (diffX <= -10 || diffX >= 10)) {
if (this.mouseX > parseInt(this.files.style.width,10)) {
this.tabDragMouseX = this.mouseX - parseInt(this.files.style.width,10) - this.tabDragMouseXStart;
this.tabDragMove();
}
}
// Dragging file manager, possible within 7px of file manager edge
if (this.ready) {
winH = window.innerHeight;
if (!this.mouseDown) {this.draggingFilesW = false};
cursorName = (!this.draggingTab && ((this.mouseX > this.filesW-7 && this.mouseX < this.filesW+7) || this.draggingFilesW))
? "w-resize"
: "auto";
if (this.content.contentWindow.document && this.filesFrame.contentWindow) {
document.body.style.cursor = cursorName;
if (zone = this.content.contentWindow.document.body) {zone.style.cursor = cursorName};
if (zone = this.filesFrame.contentWindow.document.body) {zone.style.cursor = cursorName};
}
}
},
// Show or hide a server message
serverMessage: function(message) {
var serverMessage;
serverMessage = get('serverMessage');
if (message) {
serverMessage.innerHTML = this.xssClean(message).replace(/\<b\>/g,"").replace(/\<\/b\>/g,"");
}
serverMessage.style.opacity = message ? 1 : 0;
get("versionsDisplay").style.opacity = message ? 0 : 1;
},
// Show a CSS color block next to our text cursor
cssColorPreview: function() {
var thisCM, string, rx, match, oldBlock, newBlock;
thisCM = this.getThisCM();
if (thisCM) {
string = thisCM.getLine(thisCM.getCursor().line);
rx = /(#[\da-f]{3}(?:[\da-f]{3})?\b|\b(?:rgb|hsl)a?\([\s\d%,.-]+\)|\b[a-z]+\b)/gi;
while((match = rx.exec(string)) && thisCM.getCursor().ch > match.index+match[0].length);
oldBlock = get('content').contentWindow.document.getElementById('cssColor');
if (oldBlock) {oldBlock.parentNode.removeChild(oldBlock)};
if (this.codeAssist && this.caretLocType=="CSS") {
newBlock = document.createElement("div");
newBlock.id = "cssColor";
newBlock.style.position = "absolute";
newBlock.style.display = "block";
newBlock.style.width = newBlock.style.height = "20px";
newBlock.style.zIndex = "1000";
newBlock.style.background = match ? match[0] : '';
newBlock.style.cursor = "pointer";
newBlock.onclick = function() {ICEcoder.showColorPicker(match[0])};
if (newBlock.style.backgroundColor=="") {newBlock.style.display = "none"};
get('header').appendChild(newBlock);
thisCM.addWidget(thisCM.getCursor(), get('cssColor'), true);
}
}
},
// Show color picker
showColorPicker: function(color) {
get('blackMask').style.visibility = "visible";
get('mediaContainer').innerHTML = '
'+
''+
' '+
''+
'';
farbtastic('picker','color');
if (color) {
get('picker').farbtastic.setColor(color);
}
},
// Init the canvas by drawing the image and setting the floating containers background size (5x zoom)
initCanvasImage: function (imgThis) {
var canvas, img;
canvas = get('canvasPicker').getContext('2d');
img = new Image();
img.crossOrigin = "Anonymous";
img.src = imgThis.src;
// Issue with loading, display CORS error info
img.onerror = function() {
get('floatingContainer').style.visibility = "hidden";
get('canvasPickerColorInfo').style.display = "none";
get('canvasPickerCORSInfo').style.display = "block";
}
// On image load
img.onload = function() {
// Get width and height and draw this image into the canvas
get('canvasPicker').width = imgThis.width;
get('canvasPicker').height = imgThis.height;
canvas.drawImage(img,0,0,imgThis.width,imgThis.height);
// Display color picker info and hide CORS message
get('canvasPickerColorInfo').style.display = "block";
get('canvasPickerCORSInfo').style.display = "none";
// Show image preview box on mouse over
get('canvasPicker').onmouseover = function(event) {
get('floatingContainer').style.visibility = "visible";
};
// Hide image preview box on mouse out
get('canvasPicker').onmouseout = function(event) {
get('floatingContainer').style.visibility = "hidden";
};
}
document.getElementById('floatingContainer').style.backgroundSize = (imgThis.naturalWidth*5)+"px "+(imgThis.naturalHeight*5)+"px";
},
// Interact with the canvas image
interactCanvasImage: function (imgThis) {
var canvas, x, y, imgData, R, G, B, rgb, hex, textColor, fcElem, fcBGX, fcBGY;
canvas = get('canvasPicker').getContext('2d');
// Show pointer colors on mouse move over canvas
get('canvasPicker').onmousemove = function(event) {
// get mouse x & y
x = event.pageX - this.offsetLeft;
y = event.pageY - this.offsetTop;
// get image data & then RGB values
imgData = canvas.getImageData(x, y, 1, 1).data;
R = imgData[0];
G = imgData[1];
B = imgData[2];
rgb = R+','+G+','+B;
// Get hex from RGB value
hex = ICEcoder.rgbToHex(R,G,B);
// set the values & BG colours of the input boxes
get('rgbMouseXY').value = rgb;
get('hexMouseXY').value = '#' + hex;
get('hexMouseXY').style.backgroundColor = get('rgbMouseXY').style.backgroundColor = '#' + hex;
textColor = R<128 || G<128 || B<128 && (R<200 && G<200 && B>50) ? '#fff' : '#000';
get('hexMouseXY').style.color = get('rgbMouseXY').style.color = textColor;
// Move the floating container to follow mouse pointer
fcElem = get('floatingContainer');
fcElem.style.left = this.mouseX+20 + "px";
fcElem.style.top = this.mouseY + "px";
// Move the background image for the container to match also
// 5 x zoom, account for scaling down of large images and shift 25px of the hover div size
// (55px is the 11x11 grid of pixels), minus 5px for centre row/col
fcBGX = -((x*5)*(imgThis.naturalWidth/imgThis.width))+25;
fcBGY = -((y*5)*(imgThis.naturalHeight/imgThis.height))+25;
fcElem.style.backgroundPosition = fcBGX+"px "+fcBGY+"px";
};
// Set pointer colors on clicking canvas
get('canvasPicker').onclick = function() {
get('rgb').value = get('rgbMouseXY').value;
get('hex').value = get('hexMouseXY').value;
get('hex').style.backgroundColor = get('rgb').style.backgroundColor = get('hex').value;
get('hex').style.color = get('rgb').style.color = textColor;
}
},
// Convert RGB values to Hex
rgbToHex: function(R,G,B) {
return this.toHex(R)+this.toHex(G)+this.toHex(B);
},
// Return numbers as hex equivalent
toHex: function(n) {
n = parseInt(n,10);
if (isNaN(n)) return "00";
n = Math.max(0,Math.min(n,255));
return "0123456789abcdef".charAt((n-n%16)/16) + "0123456789abcdef".charAt(n%16);
},
// Insert new color value
insertColorValue: function(color) {
var thisCM, cursor;
thisCM = this.getThisCM();
cursor = thisCM.getTokenAt(thisCM.getCursor());
thisCM.replaceRange(color,{line:thisCM.getCursor().line,ch:cursor.start},{line:thisCM.getCursor().line,ch:cursor.end}, "+input");
},
// Change opacity of the file manager icons
fMIconVis: function(icon, vis) {
var i;
if (i = get(icon)) {
i.style.opacity = vis;
}
},
// Check if a file is already open
isOpen: function(file) {
var i;
file = file.replace(/\|/g, "/").replace(docRoot+iceRoot,"");
i = this.openFiles.indexOf(file);
// return the array position or false
return i!=-1 ? i : false;
},
// ==============
// SYSTEM
// ==============
getThisCM: function() {
return this.editorFocusInstance.indexOf('diff') > -1
? this.getcMdiffInstance()
: this.getcMInstance();
},
// Start running plugin intervals according to given specifics
startPluginIntervals: function(plugRef,plugURL,plugTarget,plugTimer) {
// Add CSRF to URL if it has QS params
if (plugURL.indexOf("?") > -1) {
plugURL = plugURL+"&csrf="+this.csrf;
}
this['plugTimer'+plugRef] =
// This window instances
["_parent","_top","_self",""].indexOf(plugTarget) > -1
? this['plugTimer'+plugRef] = setInterval('window.location=\''+plugURL+'\'',plugTimer*1000*60)
// fileControl iframe instances
: plugTarget.indexOf("fileControl") == 0
? this['plugTimer'+plugRef] = setInterval(function(ic) {
ic.serverQueue("add",plugURL);ic.serverMessage(plugTarget.split(":")[1]);
},plugTimer*1000*60,this)
// _blank or named target window instances
: this['plugTimer'+plugRef] = setInterval('window.open(\''+plugURL+'\',\''+plugTarget+'\')',plugTimer*1000*60);
// push the plugin ref into our array
this.pluginIntervalRefs.push(plugRef);
},
// Turning on/off the Code Assist
codeAssistToggle: function() {
var cM, cMdiff, fileName, fileExt;
this.codeAssist = !this.codeAssist;
this.cssColorPreview();
this.focus(this.editorFocusInstance.indexOf('diff') > -1 ? 'diff' : false);
for (i=0;i 0 && item.indexOf('action=save')>0 && this.serverQueueItems[0].file === file) {
this.serverMessage();
this.serverQueue("del");
return;
}
cM = this.getcMInstance();
// Firstly, work out how many saves we have to carry out
nextSaveID=0;
for (var i=0;i0) {
nextSaveID++;
}
}
nextSaveID++;
// Add to end of array or remove from beginning on demand, plus add or remove if necessary
if (action=="add") {
this.serverQueueItems.push(
{
"item" : item,
"file" : file,
"changes" : changes
});
if (item.indexOf('action=save')>0) {
txtArea = document.createElement('textarea');
txtArea.setAttribute('id', 'saveTemp'+nextSaveID);
document.body.appendChild(txtArea);
// If we're saving as or the file version is undefined, set the temp save value as the contents
if (item.indexOf('saveType=saveAs')>0 || item.indexOf('fileVersion=undefined')>0) {
get('saveTemp'+nextSaveID).value = cM.getValue();
// Else we can save the JSON version of the changes to implement
} else {
get('saveTemp'+nextSaveID).value = changes;
}
}
} else if (action=="del") {
if (this.serverQueueItems[0] && this.serverQueueItems[0].item.indexOf('action=save')>0) {
topSaveID = nextSaveID-1;
for (var i=1;i=1 || this.serverQueueItems.length==1) {
// If we have an item, we're not saving previous file refs and not loading
if (this.serverQueueItems[0].item && (this.serverQueueItems[0].item.indexOf('saveFiles=')==-1 && this.serverQueueItems[0].item.indexOf('action=load')==-1)) {
xhr = this.xhrObj();
xhr.onreadystatechange=function() {
if (xhr.readyState==4) {
// OK reponse?
if (xhr.status==200) {
// Parse the response as a JSON object
statusObj = JSON.parse(xhr.responseText);
// Set the action end time and time taken in JSON object
statusObj.action.timeEnd = new Date().getTime();
statusObj.action.timeTaken = statusObj.action.timeEnd - statusObj.action.timeStart;
// User wanted raw (or both) output of the response?
if (["raw","both"].indexOf(ICEcoder.fileDirResOutput) >= 0) {
console.log(xhr.responseText);
}
// User wanted object (or both) output of the response?
if (["object","both"].indexOf(ICEcoder.fileDirResOutput) >= 0) {
console.log(statusObj);
}
// If error, show that, otherwise do whatever we're required to do next
if (statusObj.status.error) {
ICEcoder.message(statusObj.status.errorMsg);
console.log("ICEcoder error info for your request...");
console.log(statusObj);
ICEcoder.serverMessage();
ICEcoder.serverQueue('del');
} else {
eval(statusObj.action.doNext);
}
// Some other response? Display a message about that
} else {
ICEcoder.message(t['Sorry there was...']);
console.log("ICEcoder error info for your request...");
console.log(statusObj);
ICEcoder.serverMessage();
ICEcoder.serverQueue('del');
}
}
};
xhr.open("POST",this.serverQueueItems[0].item,true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
timeStart = new Date().getTime();
// Save as events need to send all contents
if (this.serverQueueItems[0].item.indexOf('action=saveAs')>0) {
xhr.send('timeStart='+timeStart+'&file='+this.serverQueueItems[0].file+'&contents='+encodeURIComponent(document.getElementById('saveTemp1').value));
// Save events can just send the changes
} else if (this.serverQueueItems[0].item.indexOf('action=save')>0) {
xhr.send('timeStart='+timeStart+'&file='+this.serverQueueItems[0].file+'&changes='+encodeURIComponent(document.getElementById('saveTemp1').value));
// Another type of event
} else {
xhr.send('timeStart='+timeStart+'&file='+this.serverQueueItems[0].file);
}
} else {
// File loading done via fileControl iFrame
setTimeout(function(ic) {
if ("undefined" != typeof ic.serverQueueItems[0]) {
ic.filesFrame.contentWindow.frames['fileControl'].location.href=ic.serverQueueItems[0].item;
}
},1,this);
}
}
},
// Cancel all actions on pressing Esc in non content areas
cancelAllActions: function() {
// Stop whatever the parent may be loading and clear tasks other than the current one
window.stop();
if (this.serverQueueItems.length>0) {
this.serverQueueItems.splice(1,this.serverQueueItems.length);
}
this.showHide('hide',get('loadingMask'));
this.serverMessage(''+t['Cancelled tasks']+'');
setTimeout(function(ic) {ic.serverMessage();},2000,this);
},
// Set the current previousFiles in the settings file
setPreviousFiles: function() {
var previousFiles;
previousFiles = this.openFiles.join(',').replace(/\//g,"|").replace(/(\|\[NEW\])|(,\|\[NEW\])/g,"").replace(/(^,)|(,$)/g,"");
if (previousFiles=="") {previousFiles="CLEAR"};
// Then send through to the settings page to update setting
this.serverQueue("add",iceLoc+"/lib/settings.php?saveFiles="+encodeURIComponent(previousFiles)+"&csrf="+this.csrf, encodeURIComponent(previousFiles));
this.updateLast10List(previousFiles);
},
// Update the list of 10 previous files in browser
updateLast10List: function(previousFiles) {
var newFile, last10Files, last10FilesList;
// Split our previous files string into an array
previousFiles = previousFiles.split(',');
// For each one of those, if it's not 'CLEAR' we can maybe rotate the list
for (var i=0; i"+previousFiles[i].replace(/\|/g,"/")+"\n";
// Get DOM elem for last 10 files
last10Files = this.content.contentWindow.document.getElementById('last10Files');
// If the innerHTML of that doesn't contain our new item, we can insert it
if(last10Files.innerHTML.indexOf(newFile) == -1) {
// Get the last 10 files list, pop the last one off and add newFile at start
last10FilesList = last10Files.innerHTML.split("\n");
if (
last10FilesList.length > 8 || // No more than 8 + 1 we're about to add
last10FilesList[0] == '
[none]
' || // Clear out placeholder
last10FilesList[last10FilesList.length-1] == "" // No empty array items
) {
last10FilesList.pop();
}
// Update the list
last10Files.innerHTML = newFile + (last10FilesList.join("\n"));
}
}
}
},
// Opens the last files we had open
autoOpenFiles: function() {
if (this.previousFiles.length>0 && this.ask(t['Open previous files']+'\n\n'+this.previousFiles.length+' files:\n'+this.previousFiles.join('\n').replace(/\|/g,"/").replace(new RegExp(docRoot+iceRoot,'gi'),""))) {
for (var i=0;i';
}
this.showHide(hide?'hide':'show',get('blackMask'));
},
// Show the help screen
helpScreen: function() {
get('mediaContainer').innerHTML = '';
this.showHide('show',get('blackMask'));
},
// Show the backup versions screen
versionsScreen: function(file,versions) {
get('mediaContainer').innerHTML = '';
this.showHide('show',get('blackMask'));
},
// Show the ICEcoder manual, loaded remotely
showManual: function(version,section) {
var sectionExtra;
sectionExtra = section ? "#"+section : "";
get('mediaContainer').innerHTML = '';
this.showHide('show',get('blackMask'));
},
// Show the properties screen
propertiesScreen: function(fileName) {
get('mediaContainer').innerHTML = '';
this.showHide('show',get('blackMask'));
},
// Show the auto-logout warning screen
autoLogoutWarningScreen: function() {
get('mediaContainer').innerHTML = '';
this.showHide('show',get('blackMask'));
},
// Show the auto-logout warning screen
bugReportScreen: function() {
get('mediaContainer').innerHTML = '';
this.showHide('show',get('blackMask'));
},
// Show the plugins manager
pluginsManager: function() {
get('mediaContainer').innerHTML = '';
this.showHide('show',get('blackMask'));
},
// Go to localhost root
goLocalhostRoot: function() {
this.filesFrame.contentWindow.frames['fileControl'].location.href = iceLoc+"/lib/go-localhost-root.php";
},
// Show the FTP manager
ftpManager: function() {
get('mediaContainer').innerHTML = '';
this.showHide('show',get('blackMask'));
},
// Update the settings used when we make a change to them
useNewSettings: function(themeURL,codeAssist,lockedNav,tagWrapperCommand,autoComplete,visibleTabs,fontSize,lineWrapping,lineNumbers,showTrailingSpace,matchBrackets,autoCloseTags,autoCloseBrackets,indentType,indentAuto,indentSize,pluginPanelAligned,scrollbarStyle,bugFilePaths,bugFileCheckTimer,bugFileMaxLines,updateDiffOnSave,autoLogoutMins,refreshFM) {
var styleNode, thisCSS, strCSS, activeLineBG;
// cut out ?microtime= at the end
var cleanThemeUrl = themeURL.slice(0, themeURL.lastIndexOf("?"));
// find out new theme name without leading path and trailing ".css"
var newTheme = cleanThemeUrl.slice(cleanThemeUrl.lastIndexOf("/")+1,cleanThemeUrl.lastIndexOf("."));
// if theme was not changed - no need to do all these tricks
if (this.theme !== newTheme){
// Add new stylesheet for selected theme to editor
this.theme = newTheme;
if (this.theme=="editor") {this.theme="icecoder"};
styleNode = document.createElement('link');
styleNode.setAttribute('rel', 'stylesheet');
styleNode.setAttribute('type', 'text/css');
styleNode.setAttribute('href', themeURL);
this.content.contentWindow.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) {
activeLineBG = "#888";
} else {
activeLineBG = "#000";
}
this.switchTab(this.selectedTab);
}
// Check/uncheck Code Assist setting
if (codeAssist != this.codeAssist) {
this.codeAssistToggle();
}
// Unlock/lock the file manager
if (lockedNav != this.lockedNav) {
this.lockUnlockNav();
this.changeFilesW(!lockedNav ? 'contract' : 'expand');
this.hideFileMenu();
};
// Update font size at top level
thisCSS = document.styleSheets[0];
strCSS = thisCSS.rules ? 'rules' : 'cssRules';
thisCSS[strCSS][0].style['fontSize'] = fontSize;
// Update font size in file manager
thisCSS = this.filesFrame.contentWindow.document.styleSheets[3];
strCSS = thisCSS.rules ? 'rules' : 'cssRules';
thisCSS[strCSS][0].style['fontSize'] = fontSize;
// Update styles in editor
thisCSS = this.content.contentWindow.document.styleSheets[6];
strCSS = thisCSS.rules ? 'rules' : 'cssRules';
thisCSS[strCSS][0].style['fontSize'] = fontSize;
thisCSS[strCSS][4].style['border-left-width'] = visibleTabs ? '1px' : '0';
thisCSS[strCSS][4].style['margin-left'] = visibleTabs ? '-1px' : '0';
thisCSS[strCSS][2].style.cssText = "background-color: " + activeLineBG + " !important";
this.lineWrapping = lineWrapping;
this.lineNumbers = lineNumbers;
this.showTrailingSpace = showTrailingSpace;
this.matchBrackets = matchBrackets;
this.autoCloseTags = autoCloseTags;
this.autoCloseBrackets = autoCloseBrackets;
this.indentType = indentType;
this.indentSize = indentSize;
this.indentAuto = indentAuto;
this.scrollbarStyle = scrollbarStyle;
for (var i=0;ichMod '+perms+' on '+file.replace(/\|/g,"/").replace(/^\/|/g, ''));
},
// Open/show the preview window
openPreviewWindow: function() {
if (this.openFiles.length>0) {
var filepath, filename, fileExt;
filepath = this.openFiles[this.selectedTab-1];
filename = filepath.substr(filepath.lastIndexOf("/")+1);
fileExt = filename.substr(filename.lastIndexOf(".")+1);
this.previewWindowLoading = true;
this.previewWindow = window.open(filepath,"previewWindow",500,500);
if (["md"].indexOf(fileExt) > -1) {
this.previewWindow.addEventListener('load', function(ic, content) {
ic.previewWindowLoading = false;
ic.previewWindow.document.documentElement.innerHTML = ""
setTimeout(function() {ic.previewWindow.document.documentElement.innerHTML = content}, 100);
}(ic, mmd(ic.getThisCM().getValue())), false);
} else {
this.previewWindow.onload = function() {
this.previewWindowLoading = false;
// Do the pesticide plugin if it exists
try {this.doPesticide();} catch(err) {};
// Do the stats.js plugin if it exists
try {this.doStatsJS('open');} catch(err) {};
// Do the responsive plugin if it exists
try {this.doResponsive();} catch(err) {};
}
}
}
},
// Reset auto-logout timer
resetAutoLogoutTimer: function() {
if(this.autoLogoutMins > 1 && this.autoLogoutTimer > (this.autoLogoutMins*60)-60) {
this.showHide('hide',get('blackMask'));
}
this.autoLogoutTimer = 0;
},
// Logout of ICEcoder
logout: function(type) {
window.location = window.location + "?logout&"+(type ? "type="+type+"&" : "")+"csrf="+this.csrf;
},
// Show a message
outputMsg: function(msg) {
var output = this.output.innerHTML;
// If only placeholder, clear that
if ("Output via ICEcoder.output(message);