From 648ee61ae84216d0236e0dbc211addc13b2cfa3a Mon Sep 17 00:00:00 2001 From: Kris Kowal Date: Fri, 6 Jul 2012 11:52:06 -0700 Subject: Expand tabs --- .../projectpanelbase.reel/ProjectPanelBase.js | 3502 ++++++++++---------- 1 file changed, 1751 insertions(+), 1751 deletions(-) (limited to 'js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js') diff --git a/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js b/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js index 51aebc31..759c5861 100755 --- a/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js +++ b/js/panels/Project/projectpanelbase.reel/ProjectPanelBase.js @@ -29,1868 +29,1868 @@ POSSIBILITY OF SUCH DAMAGE. */ var TreeControl = require("js/components/tree.reel").Tree, - ResizerControl = require("js/panels/Resizer").Resizer, - nj = require("js/lib/NJUtils").NJUtils; + ResizerControl = require("js/panels/Resizer").Resizer, + nj = require("js/lib/NJUtils").NJUtils; exports.ProjectPanelBase = (require("montage/core/core").Montage).create(require("montage/ui/component").Component, { - hasTemplate: { - value: true - }, + hasTemplate: { + value: true + }, _hasFocus: { - numerable: false, - value: false + numerable: false, + value: false }, /* The current project that we have in memory */ - _activeProject: { - value: false - }, - activeProject: { - get: function() { - return this._activeProject; - }, - set: function(objNewProject) { - this._activeProject = objNewProject; - } - }, + _activeProject: { + value: false + }, + activeProject: { + get: function() { + return this._activeProject; + }, + set: function(objNewProject) { + this._activeProject = objNewProject; + } + }, /* Is the panel initialized? Helps keep us from re-initializing things when a project switches */ _isPanelInitialized: { - value: false + value: false }, isPanelInitialized: { - get: function() { - return this._isPanelInitialized; - }, - set: function(boolValue) { - this._isPanelInitialized = boolValue; - } + get: function() { + return this._isPanelInitialized; + }, + set: function(boolValue) { + this._isPanelInitialized = boolValue; + } }, /* Project models: is there an active project, did the user just swap the project, etc. */ - _swapProject: { - value: false - }, - swapProject: { - get: function() { - return this._swapProject; - }, - set: function(boolValue) { - this._swapProject = boolValue; - } - }, - _updateTree: { - value: false - }, - updateTree: { - get: function() { - return this._updateTree; - }, - set: function(boolValue) { - this._updateTree = boolValue; - } - }, - _updateAssets: { - value: false - }, - _updateAssets : { - get: function() { - return this._updateAssets; - }, - set: function(boolValue) { - this._updateAssets = boolValue; - } - }, - _hasActiveProject: { - value: false - }, - hasActiveProject: { - get: function() { - return this._hasActiveProject; - }, - set: function(boolValue) { - if (this.hasActiveProject !== boolValue) { - this._hasActiveProject = boolValue; - this.needsDraw = true; - this.swapProject = true; - this.loadPanelState(); - } - } - }, - setActiveProject: { - value: function(myVal) { - this.hasActiveProject = myVal; - } - }, - - /* Focus monitor: needed to modify keyboard navigation through panels. */ - _hasFocus: { - value: false - }, - hasFocus: { - get: function() { - return this._hasFocus; - }, - set: function(newVal) { - if (this._hasFocus !== newVal) { - this._hasFocus = newVal; - } - } - }, + _swapProject: { + value: false + }, + swapProject: { + get: function() { + return this._swapProject; + }, + set: function(boolValue) { + this._swapProject = boolValue; + } + }, + _updateTree: { + value: false + }, + updateTree: { + get: function() { + return this._updateTree; + }, + set: function(boolValue) { + this._updateTree = boolValue; + } + }, + _updateAssets: { + value: false + }, + _updateAssets : { + get: function() { + return this._updateAssets; + }, + set: function(boolValue) { + this._updateAssets = boolValue; + } + }, + _hasActiveProject: { + value: false + }, + hasActiveProject: { + get: function() { + return this._hasActiveProject; + }, + set: function(boolValue) { + if (this.hasActiveProject !== boolValue) { + this._hasActiveProject = boolValue; + this.needsDraw = true; + this.swapProject = true; + this.loadPanelState(); + } + } + }, + setActiveProject: { + value: function(myVal) { + this.hasActiveProject = myVal; + } + }, + + /* Focus monitor: needed to modify keyboard navigation through panels. */ + _hasFocus: { + value: false + }, + hasFocus: { + get: function() { + return this._hasFocus; + }, + set: function(newVal) { + if (this._hasFocus !== newVal) { + this._hasFocus = newVal; + } + } + }, /* Active column models: Used to store the state of the columns as a resize is happening */ _activeColumn: { - enumerable: false, - value: false + enumerable: false, + value: false }, activeColumn: { - get: function() { - return this._activeColumn; - }, - set: function(intActiveColumn) { - this._activeColumn = intActiveColumn; - } + get: function() { + return this._activeColumn; + }, + set: function(intActiveColumn) { + this._activeColumn = intActiveColumn; + } }, _activeColumnWidths: { - enumerable: false, - value: [0,0,0] + enumerable: false, + value: [0,0,0] }, activeColumnWidths: { - get: function() { - return this._activeColumnWidths; - }, - set: function(activeColumnWidths) { - for (var i = 0; i < activeColumnWidths.length; i++) { - if (this._activeColumnWidths[i] !== activeColumnWidths[i]) { - this._activeColumnWidths[i] = activeColumnWidths[i]; - this.activeColumn = i; - this.needsDraw = true; - } - } - } + get: function() { + return this._activeColumnWidths; + }, + set: function(activeColumnWidths) { + for (var i = 0; i < activeColumnWidths.length; i++) { + if (this._activeColumnWidths[i] !== activeColumnWidths[i]) { + this._activeColumnWidths[i] = activeColumnWidths[i]; + this.activeColumn = i; + this.needsDraw = true; + } + } + } }, /* resizeColumn: Method to resize a column */ resizeColumn: { - value: function(strSelectorBase) { - // Resize column with index this.activeColumn in view specified by strSelectorBase. - var intAdjust = 0, - intTotalWidth = 0, - arrToChange = [], - arrToChangeLength = 0, - arrHeaders = document.querySelectorAll(strSelectorBase + " .pp-header"); - arrHeadersLength = arrHeaders.length; - containerList = document.querySelectorAll(strSelectorBase + " .pp-scroll-linked"); - containerListLength = containerList.length, - intNewWidth = 0, - strNewWidth = "", - boolProjectView = true, - arrStoredWidths = this.panelState.projectColumnWidths; - - if (strSelectorBase.indexOf("assets") > -1) { - boolProjectView = false; - arrStoredWidths = this.panelState.assetColumnWidths; - } + value: function(strSelectorBase) { + // Resize column with index this.activeColumn in view specified by strSelectorBase. + var intAdjust = 0, + intTotalWidth = 0, + arrToChange = [], + arrToChangeLength = 0, + arrHeaders = document.querySelectorAll(strSelectorBase + " .pp-header"); + arrHeadersLength = arrHeaders.length; + containerList = document.querySelectorAll(strSelectorBase + " .pp-scroll-linked"); + containerListLength = containerList.length, + intNewWidth = 0, + strNewWidth = "", + boolProjectView = true, + arrStoredWidths = this.panelState.projectColumnWidths; + + if (strSelectorBase.indexOf("assets") > -1) { + boolProjectView = false; + arrStoredWidths = this.panelState.assetColumnWidths; + } - if (this.activeColumn === 0) { - strSelector = strSelectorBase + " .pp-col-files"; - intAdjust = 17; - } else if (this.activeColumn === 1) { - strSelector = strSelectorBase + " .pp-col-date"; - intAdjust = 6; - } else if (this.activeColumn === 2) { - strSelector = strSelectorBase + " .pp-col-size"; - intAdjust = 6; - } else if (this.activeColumn === 3) { - strSelector = strSelectorBase + " .pp-col-type"; - intAdjust = 10; - } else { - return; - } - if ((this.activeColumn === 3) && boolProjectView) { - return; - } - - // Adjust intAdjust: for the asset view it needs to be 0. - if (strSelectorBase.indexOf("assets") >0) { - intAdjust = 0; - } - - // Get the total width of the headers and set the container to that width. - for (i = 0; i < arrHeadersLength; i++) { - intTotalWidth = intTotalWidth + parseInt(arrHeaders[i].offsetWidth); - } - if (intTotalWidth === 0) { - for (i = 0; i < arrStoredWidths.length; i++) { - intTotalWidth = intTotalWidth + arrStoredWidths[i]; - } - } + if (this.activeColumn === 0) { + strSelector = strSelectorBase + " .pp-col-files"; + intAdjust = 17; + } else if (this.activeColumn === 1) { + strSelector = strSelectorBase + " .pp-col-date"; + intAdjust = 6; + } else if (this.activeColumn === 2) { + strSelector = strSelectorBase + " .pp-col-size"; + intAdjust = 6; + } else if (this.activeColumn === 3) { + strSelector = strSelectorBase + " .pp-col-type"; + intAdjust = 10; + } else { + return; + } + if ((this.activeColumn === 3) && boolProjectView) { + return; + } + + // Adjust intAdjust: for the asset view it needs to be 0. + if (strSelectorBase.indexOf("assets") >0) { + intAdjust = 0; + } + + // Get the total width of the headers and set the container to that width. + for (i = 0; i < arrHeadersLength; i++) { + intTotalWidth = intTotalWidth + parseInt(arrHeaders[i].offsetWidth); + } + if (intTotalWidth === 0) { + for (i = 0; i < arrStoredWidths.length; i++) { + intTotalWidth = intTotalWidth + arrStoredWidths[i]; + } + } - for (i = 0; i < containerListLength; i++) { - containerList[i].style.minWidth = (intTotalWidth+12) + "px"; - } - intNewWidth = arrHeaders[this.activeColumn].offsetWidth; - if (intNewWidth === 0) { - intNewWidth = arrStoredWidths[this.activeColumn]; - } - strNewWidth = (intNewWidth - intAdjust) + "px"; - - // Get the array of column elements to change, and change them - arrToChange = document.querySelectorAll(strSelector); - arrToChangeLength = arrToChange.length; - for (i = 0; i < arrToChangeLength; i++) { - arrToChange[i].style.width = strNewWidth; - } - - // Once resize has been completed, we need to update the panelState object: - if (!boolProjectView) { - this.panelState.assetColumnWidths[this.activeColumn] = intNewWidth; - } else { - this.panelState.projectColumnWidths[this.activeColumn] = intNewWidth; - } - } + for (i = 0; i < containerListLength; i++) { + containerList[i].style.minWidth = (intTotalWidth+12) + "px"; + } + intNewWidth = arrHeaders[this.activeColumn].offsetWidth; + if (intNewWidth === 0) { + intNewWidth = arrStoredWidths[this.activeColumn]; + } + strNewWidth = (intNewWidth - intAdjust) + "px"; + + // Get the array of column elements to change, and change them + arrToChange = document.querySelectorAll(strSelector); + arrToChangeLength = arrToChange.length; + for (i = 0; i < arrToChangeLength; i++) { + arrToChange[i].style.width = strNewWidth; + } + + // Once resize has been completed, we need to update the panelState object: + if (!boolProjectView) { + this.panelState.assetColumnWidths[this.activeColumn] = intNewWidth; + } else { + this.panelState.projectColumnWidths[this.activeColumn] = intNewWidth; + } + } }, - /* checkForResize: Check if the columns in the active view are being resized */ + /* checkForResize: Check if the columns in the active view are being resized */ checkForResize: { - value: function() { - var arrHeaders = document.querySelectorAll("#pp-view-" + this.panelState.activeView + " .pp-header"), - arrHeadersLength = arrHeaders.length, - i=0, - colWidth = 0, - arrCols = this.panelState.projectColumnWidths; - - if (this.panelState.activeView === "assets") { - arrCols = this.panelState.assetColumnWidths; - } - for (i = 0; i < arrHeadersLength; i++) { - colWidth = parseInt(arrHeaders[i].offsetWidth); - if (colWidth !== arrCols[i]) { - this.activeColumn = i; - i = arrHeadersLength; - this.needsDraw = true; - } - } - } + value: function() { + var arrHeaders = document.querySelectorAll("#pp-view-" + this.panelState.activeView + " .pp-header"), + arrHeadersLength = arrHeaders.length, + i=0, + colWidth = 0, + arrCols = this.panelState.projectColumnWidths; + + if (this.panelState.activeView === "assets") { + arrCols = this.panelState.assetColumnWidths; + } + for (i = 0; i < arrHeadersLength; i++) { + colWidth = parseInt(arrHeaders[i].offsetWidth); + if (colWidth !== arrCols[i]) { + this.activeColumn = i; + i = arrHeadersLength; + this.needsDraw = true; + } + } + } }, /* Shift key status: is the shift key pressed (used for keyboard navigation and multiselect) */ - _isShiftKeyDown: { - value: false - }, - isShiftKeyDown: { - get: function() { - return this._isShiftKeyDown; - }, - set: function(boolValue) { - this._isShiftKeyDown = boolValue; - } - }, + _isShiftKeyDown: { + value: false + }, + isShiftKeyDown: { + get: function() { + return this._isShiftKeyDown; + }, + set: function(boolValue) { + this._isShiftKeyDown = boolValue; + } + }, /* Inline editor models: is the inline editor active, and a pointer to the current one */ - _activeInlineEditor: { - value: false - }, - activeInlineEditor: { - get: function() { - return this._activeInlineEditor; - }, - set: function(myVal) { - this._activeInlineEditor = myVal; - } - }, - _isInlineEditorActive: { - value: false - }, - isInlineEditorActive: { - get: function() { - return this._isInlineEditorActive; - }, - set: function(newVal) { - this._isInlineEditorActive = newVal; - } - }, + _activeInlineEditor: { + value: false + }, + activeInlineEditor: { + get: function() { + return this._activeInlineEditor; + }, + set: function(myVal) { + this._activeInlineEditor = myVal; + } + }, + _isInlineEditorActive: { + value: false + }, + isInlineEditorActive: { + get: function() { + return this._isInlineEditorActive; + }, + set: function(newVal) { + this._isInlineEditorActive = newVal; + } + }, /* Active sort: If the user is actively sorting the columns in the asset view */ - _isSortActive: { - value: false - }, - isSortActive: { - get: function() { - return this._isSortActive; - }, - set: function(boolValue) { - this._isSortActive = boolValue; - if (boolValue) { - this.needsDraw = true; - } - } - }, - - /* Active filter: If the user is actively filtering the asset view */ - _isFilterActive: { - value: false - }, - isFilterActive: { - get: function() { - return this._isFilterActive; - }, - set: function(boolValue) { - this._isFilterActive = boolValue; - } - }, + _isSortActive: { + value: false + }, + isSortActive: { + get: function() { + return this._isSortActive; + }, + set: function(boolValue) { + this._isSortActive = boolValue; + if (boolValue) { + this.needsDraw = true; + } + } + }, + + /* Active filter: If the user is actively filtering the asset view */ + _isFilterActive: { + value: false + }, + isFilterActive: { + get: function() { + return this._isFilterActive; + }, + set: function(boolValue) { + this._isFilterActive = boolValue; + } + }, - /* filteredAssets: where the filtered assets live */ - _filteredAssets: { - value: [] - }, - filteredAssets: { - get: function() { - return this._filteredAssets; - }, - set: function(arrValues) { - this._filteredAssets = arrValues; - } - }, + /* filteredAssets: where the filtered assets live */ + _filteredAssets: { + value: [] + }, + filteredAssets: { + get: function() { + return this._filteredAssets; + }, + set: function(arrValues) { + this._filteredAssets = arrValues; + } + }, - /* filterAssets: Method for filtering the assets */ - filterAssets: { - value: function(strFilter) { - var arrItems = document.querySelectorAll("#pp-container-assets .pp-col-files div"), - arrItemsLength = arrItems.length, - i = 0, - arrFilteredAssets = []; - for (i = 0; i < arrItemsLength; i++) { - var currText = arrItems[i].querySelector(".inline-editable").firstChild.nodeValue; - if (currText.indexOf(strFilter) > -1) { - arrFilteredAssets.push(i); - } - } - return arrFilteredAssets; - } - }, + /* filterAssets: Method for filtering the assets */ + filterAssets: { + value: function(strFilter) { + var arrItems = document.querySelectorAll("#pp-container-assets .pp-col-files div"), + arrItemsLength = arrItems.length, + i = 0, + arrFilteredAssets = []; + for (i = 0; i < arrItemsLength; i++) { + var currText = arrItems[i].querySelector(".inline-editable").firstChild.nodeValue; + if (currText.indexOf(strFilter) > -1) { + arrFilteredAssets.push(i); + } + } + return arrFilteredAssets; + } + }, - /* Asset Controllers: get first/last/previous/next visible asset, highlighting a row, and clearing a highlight */ + /* Asset Controllers: get first/last/previous/next visible asset, highlighting a row, and clearing a highlight */ getFirstVisibleAsset: { - value: function() { - var arrAssets = document.querySelectorAll("#pp-container-assets .pp-col-files div"), - arrAssetsLength = arrAssets.length, - i =0, - cssProp = ""; - for (i = 0; i < arrAssetsLength; i++) { - cssProp = window.getComputedStyle(arrAssets[i],null).getPropertyValue("display"); - if (cssProp == "block") { - return arrAssets[i]; - } - } - } + value: function() { + var arrAssets = document.querySelectorAll("#pp-container-assets .pp-col-files div"), + arrAssetsLength = arrAssets.length, + i =0, + cssProp = ""; + for (i = 0; i < arrAssetsLength; i++) { + cssProp = window.getComputedStyle(arrAssets[i],null).getPropertyValue("display"); + if (cssProp == "block") { + return arrAssets[i]; + } + } + } }, getLastVisibleAsset: { - value: function() { - var arrAssets = document.querySelectorAll("#pp-container-assets .pp-col-files div"), - arrAssetsLength = arrAssets.length, - i = 0, - cssProp = ""; - for (i = arrAssetsLength; i >0; i--) { - if (arrAssets[i] != null) { - cssProp = window.getComputedStyle(arrAssets[i],null).getPropertyValue("display"); - } - if (cssProp == "block") { - return arrAssets[i]; - } - } - } + value: function() { + var arrAssets = document.querySelectorAll("#pp-container-assets .pp-col-files div"), + arrAssetsLength = arrAssets.length, + i = 0, + cssProp = ""; + for (i = arrAssetsLength; i >0; i--) { + if (arrAssets[i] != null) { + cssProp = window.getComputedStyle(arrAssets[i],null).getPropertyValue("display"); + } + if (cssProp == "block") { + return arrAssets[i]; + } + } + } }, getNextVisibleAsset: { - value: function(currAsset) { - var arrAssets = document.querySelectorAll("#pp-container-assets .pp-col-files div"), - arrAssetsLength = arrAssets.length, - i =0, - cssProp = "", - boolContinue = false; - for (i = 0; i < arrAssetsLength; i++) { - if (!boolContinue) { - if (arrAssets[i].isSameNode(currAsset)) { - boolContinue = true; - } - } else { - cssProp = window.getComputedStyle(arrAssets[i],null).getPropertyValue("display"); - if (cssProp == "block") { - return arrAssets[i]; - } - } - } - // If we've got this far, there isn't one, so return false. - return false; - } + value: function(currAsset) { + var arrAssets = document.querySelectorAll("#pp-container-assets .pp-col-files div"), + arrAssetsLength = arrAssets.length, + i =0, + cssProp = "", + boolContinue = false; + for (i = 0; i < arrAssetsLength; i++) { + if (!boolContinue) { + if (arrAssets[i].isSameNode(currAsset)) { + boolContinue = true; + } + } else { + cssProp = window.getComputedStyle(arrAssets[i],null).getPropertyValue("display"); + if (cssProp == "block") { + return arrAssets[i]; + } + } + } + // If we've got this far, there isn't one, so return false. + return false; + } }, getPreviousVisibleAsset: { - value: function(currAsset) { - var arrAssets = document.querySelectorAll("#pp-container-assets .pp-col-files div"), - arrAssetsLength = arrAssets.length, - i =0, - cssProp = "", - boolContinue = false; - for (i = arrAssetsLength-1; i >-1 ; i--) { - if (!boolContinue) { - if (arrAssets[i].isSameNode(currAsset)) { - boolContinue = true; - } - } else { - cssProp = window.getComputedStyle(arrAssets[i],null).getPropertyValue("display"); - if (cssProp == "block") { - return arrAssets[i]; - } - } - } - // If we've got this far, there isn't one, so return false. - return false; - } + value: function(currAsset) { + var arrAssets = document.querySelectorAll("#pp-container-assets .pp-col-files div"), + arrAssetsLength = arrAssets.length, + i =0, + cssProp = "", + boolContinue = false; + for (i = arrAssetsLength-1; i >-1 ; i--) { + if (!boolContinue) { + if (arrAssets[i].isSameNode(currAsset)) { + boolContinue = true; + } + } else { + cssProp = window.getComputedStyle(arrAssets[i],null).getPropertyValue("display"); + if (cssProp == "block") { + return arrAssets[i]; + } + } + } + // If we've got this far, there isn't one, so return false. + return false; + } }, hilightAssetRow: { - value: function(ptrElement) { - if (ptrElement.classList.contains("focused")) { - return; - } - var arrFiles = document.querySelectorAll("#pp-view-assets .pp-col-files div"), - arrFilesLength = arrFiles.length, - arrSizes = document.querySelectorAll("#pp-view-assets .pp-col-size div"), - arrSizesLength = arrSizes.length, - arrDates = document.querySelectorAll("#pp-view-assets .pp-col-date div"), - arrDatesLength = arrDates.length, - arrTypes = document.querySelectorAll("#pp-view-assets .pp-col-type div"), - arrTypesLength = arrTypes.length, - inlineEditor = document.querySelector("#pp-view-assets input.inline-editor"), - mySpan = ptrElement.querySelector("span"), - currIndex, - i = 0; - ptrParent = nj.queryParentSelector(ptrElement, ".pp-asset-col"); + value: function(ptrElement) { + if (ptrElement.classList.contains("focused")) { + return; + } + var arrFiles = document.querySelectorAll("#pp-view-assets .pp-col-files div"), + arrFilesLength = arrFiles.length, + arrSizes = document.querySelectorAll("#pp-view-assets .pp-col-size div"), + arrSizesLength = arrSizes.length, + arrDates = document.querySelectorAll("#pp-view-assets .pp-col-date div"), + arrDatesLength = arrDates.length, + arrTypes = document.querySelectorAll("#pp-view-assets .pp-col-type div"), + arrTypesLength = arrTypes.length, + inlineEditor = document.querySelector("#pp-view-assets input.inline-editor"), + mySpan = ptrElement.querySelector("span"), + currIndex, + i = 0; + ptrParent = nj.queryParentSelector(ptrElement, ".pp-asset-col"); - if ((inlineEditor !== null) && (ptrElement.classList.contains("nj-skinned"))) { - // An inline edit is currently happening - // (sometimes the click event listeners might get fired in that process) - // So do nothing - return; - } - - if (ptrParent.classList.contains("pp-col-files")) { - for (i = 0; i < arrFilesLength; i++) { - if(arrFiles[i].isSameNode(ptrElement)) { - currIndex = i; - i = arrFilesLength; - } - } - } else if (ptrParent.classList.contains("pp-col-size")) { - // A size element was passed in - for (i = 0; i < arrSizesLength; i++) { - if(arrSizes[i].isSameNode(ptrElement)) { - currIndex = i; - i = arrSizesLength; - } - } - } else if (ptrParent.classList.contains("pp-col-type")) { - // A type element was passed in - for (i = 0; i < arrTypesLength; i++) { - if(arrTypes[i].isSameNode(ptrElement)) { - currIndex = i; - i = arrTypesLength; - } - } - } else if (ptrParent.classList.contains("pp-col-date")) { - // A date element was passed in - for (i = 0; i < arrDatesLength; i++) { - if(arrDates[i].isSameNode(ptrElement)) { - currIndex = i; - i = arrDatesLength; - } - } - } + if ((inlineEditor !== null) && (ptrElement.classList.contains("nj-skinned"))) { + // An inline edit is currently happening + // (sometimes the click event listeners might get fired in that process) + // So do nothing + return; + } + + if (ptrParent.classList.contains("pp-col-files")) { + for (i = 0; i < arrFilesLength; i++) { + if(arrFiles[i].isSameNode(ptrElement)) { + currIndex = i; + i = arrFilesLength; + } + } + } else if (ptrParent.classList.contains("pp-col-size")) { + // A size element was passed in + for (i = 0; i < arrSizesLength; i++) { + if(arrSizes[i].isSameNode(ptrElement)) { + currIndex = i; + i = arrSizesLength; + } + } + } else if (ptrParent.classList.contains("pp-col-type")) { + // A type element was passed in + for (i = 0; i < arrTypesLength; i++) { + if(arrTypes[i].isSameNode(ptrElement)) { + currIndex = i; + i = arrTypesLength; + } + } + } else if (ptrParent.classList.contains("pp-col-date")) { + // A date element was passed in + for (i = 0; i < arrDatesLength; i++) { + if(arrDates[i].isSameNode(ptrElement)) { + currIndex = i; + i = arrDatesLength; + } + } + } - this.clearAssetFocus(); - arrDates[currIndex].classList.add("focused"); - arrFiles[currIndex].classList.add("focused"); - arrSizes[currIndex].classList.add("focused"); - arrTypes[currIndex].classList.add("focused"); - - // Turn the file name in into an inline editable element - // To avoid getting caught in the current click event, we'll delay the - // component initialization for a few milliseconds. - var that = this; - setTimeout(function() { - that.activeInlineEditor = InlineEditor.create(); - that.activeInlineEditor.element = arrFiles[currIndex]; - - that.activeInlineEditor.onChange = function() { - that.updateTree = true; - that.isSortActive = true; - that.needsDraw = true; - } - that.activeInlineEditor.init(); - that.isInlineEditorActive = true; - - // Bind the editor to the property in the data structure, so that when the change happens - // it will propagate. - Object.defineBinding(that.activeInlineEditor, "value", { - boundObject: that.activeProject, - boundObjectPropertyPath: mySpan.dataset.bindpath + ".name" - }) - }, 200); - } + this.clearAssetFocus(); + arrDates[currIndex].classList.add("focused"); + arrFiles[currIndex].classList.add("focused"); + arrSizes[currIndex].classList.add("focused"); + arrTypes[currIndex].classList.add("focused"); + + // Turn the file name in into an inline editable element + // To avoid getting caught in the current click event, we'll delay the + // component initialization for a few milliseconds. + var that = this; + setTimeout(function() { + that.activeInlineEditor = InlineEditor.create(); + that.activeInlineEditor.element = arrFiles[currIndex]; + + that.activeInlineEditor.onChange = function() { + that.updateTree = true; + that.isSortActive = true; + that.needsDraw = true; + } + that.activeInlineEditor.init(); + that.isInlineEditorActive = true; + + // Bind the editor to the property in the data structure, so that when the change happens + // it will propagate. + Object.defineBinding(that.activeInlineEditor, "value", { + boundObject: that.activeProject, + boundObjectPropertyPath: mySpan.dataset.bindpath + ".name" + }) + }, 200); + } }, clearAssetFocus: { - value: function() { - var arrCurrFocused = document.querySelectorAll("#pp-view-assets .focused"), - arrCurrFocusedLength = arrCurrFocused.length, - inlineEditor = document.querySelector("#pp-view-assets input.inline-editor"), - i = 0; - if (inlineEditor !== null ) { - // an edit is happening, so we don't actually want to do anything. - //return; - } - for (i = 0; i < arrCurrFocusedLength; i++) { - arrCurrFocused[i].classList.remove("focused"); - if (this.isInlineEditorActive !== false) { - // TODO: A more bulletproof method for deleting this binding. This fails frequently and seemingly arbitrarily. - //Object.deleteBinding(this.activeInlineEditor, "value"); - this.activeInlineEditor.destroy(); - this.isInlineEditorActive = false; - - } - } - } + value: function() { + var arrCurrFocused = document.querySelectorAll("#pp-view-assets .focused"), + arrCurrFocusedLength = arrCurrFocused.length, + inlineEditor = document.querySelector("#pp-view-assets input.inline-editor"), + i = 0; + if (inlineEditor !== null ) { + // an edit is happening, so we don't actually want to do anything. + //return; + } + for (i = 0; i < arrCurrFocusedLength; i++) { + arrCurrFocused[i].classList.remove("focused"); + if (this.isInlineEditorActive !== false) { + // TODO: A more bulletproof method for deleting this binding. This fails frequently and seemingly arbitrarily. + //Object.deleteBinding(this.activeInlineEditor, "value"); + this.activeInlineEditor.destroy(); + this.isInlineEditorActive = false; + + } + } + } }, - /* Begin: Draw Cycle */ - /* First time draw: True if this is the first time the component has been drawn */ + /* Begin: Draw Cycle */ + /* First time draw: True if this is the first time the component has been drawn */ _firstTimeDraw: { - value: true + value: true }, firstTimeDraw: { - get: function() { - return this._firstTimeDraw; - }, - set: function(value) { - this._firstTimeDraw = value; - } + get: function() { + return this._firstTimeDraw; + }, + set: function(value) { + this._firstTimeDraw = value; + } }, willDraw: { - enumerable: false, - value: function() { + enumerable: false, + value: function() { - //this.log(newErr, "Test message " + newErr) - //this.log("willDraw: hasActiveProject: " + this.hasActiveProject + "\nthis.swapProject: " + this.swapProject + "\nthis.firstTimeDraw: " + this.firstTimeDraw); - var projectTree, - testDirectory, - treeContainer, - scroller = document.getElementById("pp-col-files"), - panelContainer = document.getElementById("pp-container"), - arrButtons = document.querySelectorAll("#pp-col-buttons .pp-button"), - listContainer = document.querySelector("#pp-container-list .pp-scroll-linked"), - assetContainer = document.querySelector("#pp-container-assets .pp-scroll-linked"), - arrButtonsLength = arrButtons.length, - arrHeaders = document.querySelectorAll("#pp-view-assets .pp-header"), - arrHeadersLength = arrHeaders.length, - arrAllHeaders = document.querySelectorAll("#pp-col-files .pp-header"), - arrAllHeadersLength = arrAllHeaders.length, - tempResizer, - arrSortArrows = document.querySelectorAll("#pp-view-assets .pp-sort-arrow"), - arrSortArrowsLength = arrSortArrows.length, - arrLinkedScrollers = document.querySelectorAll(".pp-scroll-main"), - arrLinkedScrollersLength = arrLinkedScrollers.length, - i = 0, - that = this; - /* - if (this.firstTimeDraw) { - this.hasActiveProject="large"; - } - */ + //this.log(newErr, "Test message " + newErr) + //this.log("willDraw: hasActiveProject: " + this.hasActiveProject + "\nthis.swapProject: " + this.swapProject + "\nthis.firstTimeDraw: " + this.firstTimeDraw); + var projectTree, + testDirectory, + treeContainer, + scroller = document.getElementById("pp-col-files"), + panelContainer = document.getElementById("pp-container"), + arrButtons = document.querySelectorAll("#pp-col-buttons .pp-button"), + listContainer = document.querySelector("#pp-container-list .pp-scroll-linked"), + assetContainer = document.querySelector("#pp-container-assets .pp-scroll-linked"), + arrButtonsLength = arrButtons.length, + arrHeaders = document.querySelectorAll("#pp-view-assets .pp-header"), + arrHeadersLength = arrHeaders.length, + arrAllHeaders = document.querySelectorAll("#pp-col-files .pp-header"), + arrAllHeadersLength = arrAllHeaders.length, + tempResizer, + arrSortArrows = document.querySelectorAll("#pp-view-assets .pp-sort-arrow"), + arrSortArrowsLength = arrSortArrows.length, + arrLinkedScrollers = document.querySelectorAll(".pp-scroll-main"), + arrLinkedScrollersLength = arrLinkedScrollers.length, + i = 0, + that = this; + /* + if (this.firstTimeDraw) { + this.hasActiveProject="large"; + } + */ - if (!this.hasActiveProject) { - var myContainer = document.getElementById("pp-container"); - myContainer.classList.add("pp-disabled"); - document.getElementById("pp-search-files").disabled=true; - return; - } else { - var myContainer = document.getElementById("pp-container"); - myContainer.classList.remove("pp-disabled"); - document.getElementById("pp-search-files").disabled=false; - } + if (!this.hasActiveProject) { + var myContainer = document.getElementById("pp-container"); + myContainer.classList.add("pp-disabled"); + document.getElementById("pp-search-files").disabled=true; + return; + } else { + var myContainer = document.getElementById("pp-container"); + myContainer.classList.remove("pp-disabled"); + document.getElementById("pp-search-files").disabled=false; + } - if (this.firstTimeDraw) { - + if (this.firstTimeDraw) { + - - // Make headers resizable. - for (i = 0; i < arrAllHeadersLength; i++) { - tempResizer = ResizerControl.create(); - tempResizer.element = arrAllHeaders[i].querySelector(".pp-resize-grip"); - tempResizer.panel = arrAllHeaders[i]; - tempResizer.isPanel = false; - tempResizer.isInversed = false; - this.eventManager.addEventListener("panelResizing", function() { - that.checkForResize(); - }); - this.eventManager.addEventListener("panelResizedEnd", function() { - that.checkForResize(); - that.savePanelState(); + + // Make headers resizable. + for (i = 0; i < arrAllHeadersLength; i++) { + tempResizer = ResizerControl.create(); + tempResizer.element = arrAllHeaders[i].querySelector(".pp-resize-grip"); + tempResizer.panel = arrAllHeaders[i]; + tempResizer.isPanel = false; + tempResizer.isInversed = false; + this.eventManager.addEventListener("panelResizing", function() { + that.checkForResize(); + }); + this.eventManager.addEventListener("panelResizedEnd", function() { + that.checkForResize(); + that.savePanelState(); - }) - /* - tempResizer.onResize = function() { - that.checkForResize(); - } - tempResizer.onResizeEnd = function() { - setTimeout(function() { - that.checkForResize(); - that.savePanelState(); - }, 100) - } - */ - tempResizer.needsDraw = true; - } - - // Add event handlers to buttons - for (i = 0; i < arrButtonsLength; i++) { - arrButtons[i].identifier="assetButton"; - arrButtons[i].addEventListener("click", this, false); - arrButtons[i].addEventListener("keydown", this, false); - arrButtons[i].addEventListener("keyup", this, false); - } - - // Add the click event listeners to the Asset View headers so they can be sorted - for (i = 0; i < arrHeadersLength; i++) { - arrHeaders[i].identifier="assetHeader"; - arrHeaders[i].addEventListener("click", this, false); - } - for (i = 0; i < arrSortArrowsLength; i++) { - arrSortArrows[i].identifier="assetHeader"; - arrSortArrows[i].addEventListener("click", this, false); - } - - // Add the event listener to the filter input so that when the user starts typing - // we will start filtering the list - var mySearch = document.getElementById("pp-search-files"), - mySearchContainer = document.getElementById("pp-search"); - mySearch.identifier = "filter"; - mySearch.addEventListener("keyup", this, false); - mySearchContainer.identifier = "searchContainer"; - mySearchContainer.addEventListener("mousedown", this, false); - mySearchContainer.addEventListener("keydown", this, false); - mySearchContainer.addEventListener("keyup", this, false); - - // FYI when a search field is cleared using the built-in clearing method it fires a search event? - mySearch.addEventListener("search", this, false); - - // Add keyboard event listeners for the asset container - assetContainer.identifier = "assetContainer"; - assetContainer.addEventListener("keydown", this, false); - assetContainer.addEventListener("mousedown", this, false); - assetContainer.addEventListener("keyup", this, false); - - // Add scroller - for (i = 0; i < arrLinkedScrollersLength; i++) { - arrLinkedScrollers[i].identifier = "linkedScroller"; - arrLinkedScrollers[i].addEventListener("scroll", this, false); - } - - // Add treeClickEvent handler - document.addEventListener("treeClickEvent", function() { - var arrDirs = document.querySelectorAll("#pp-view-project li.directory.open"), - arrDirsLength = arrDirs.length, - i = 0, - arrUris = []; - for (i = 0; i < arrDirsLength; i++) { - arrUris.push(arrDirs[i].dataset.uri); - } - that.panelState.openFolders = arrUris; - that.savePanelState(); - }); - } + }) + /* + tempResizer.onResize = function() { + that.checkForResize(); + } + tempResizer.onResizeEnd = function() { + setTimeout(function() { + that.checkForResize(); + that.savePanelState(); + }, 100) + } + */ + tempResizer.needsDraw = true; + } + + // Add event handlers to buttons + for (i = 0; i < arrButtonsLength; i++) { + arrButtons[i].identifier="assetButton"; + arrButtons[i].addEventListener("click", this, false); + arrButtons[i].addEventListener("keydown", this, false); + arrButtons[i].addEventListener("keyup", this, false); + } + + // Add the click event listeners to the Asset View headers so they can be sorted + for (i = 0; i < arrHeadersLength; i++) { + arrHeaders[i].identifier="assetHeader"; + arrHeaders[i].addEventListener("click", this, false); + } + for (i = 0; i < arrSortArrowsLength; i++) { + arrSortArrows[i].identifier="assetHeader"; + arrSortArrows[i].addEventListener("click", this, false); + } + + // Add the event listener to the filter input so that when the user starts typing + // we will start filtering the list + var mySearch = document.getElementById("pp-search-files"), + mySearchContainer = document.getElementById("pp-search"); + mySearch.identifier = "filter"; + mySearch.addEventListener("keyup", this, false); + mySearchContainer.identifier = "searchContainer"; + mySearchContainer.addEventListener("mousedown", this, false); + mySearchContainer.addEventListener("keydown", this, false); + mySearchContainer.addEventListener("keyup", this, false); + + // FYI when a search field is cleared using the built-in clearing method it fires a search event? + mySearch.addEventListener("search", this, false); + + // Add keyboard event listeners for the asset container + assetContainer.identifier = "assetContainer"; + assetContainer.addEventListener("keydown", this, false); + assetContainer.addEventListener("mousedown", this, false); + assetContainer.addEventListener("keyup", this, false); + + // Add scroller + for (i = 0; i < arrLinkedScrollersLength; i++) { + arrLinkedScrollers[i].identifier = "linkedScroller"; + arrLinkedScrollers[i].addEventListener("scroll", this, false); + } + + // Add treeClickEvent handler + document.addEventListener("treeClickEvent", function() { + var arrDirs = document.querySelectorAll("#pp-view-project li.directory.open"), + arrDirsLength = arrDirs.length, + i = 0, + arrUris = []; + for (i = 0; i < arrDirsLength; i++) { + arrUris.push(arrDirs[i].dataset.uri); + } + that.panelState.openFolders = arrUris; + that.savePanelState(); + }); + } - - if (this.swapProject) { - var arrCurrIcons = document.querySelectorAll(".pp-button.active"), - arrCurrIconsLength = arrCurrIcons.length, - i = 0; + + if (this.swapProject) { + var arrCurrIcons = document.querySelectorAll(".pp-button.active"), + arrCurrIconsLength = arrCurrIcons.length, + i = 0; - // TODO: real project fetching. - if (this.hasActiveProject === "large") { - testDirectory = this.getDirectoryData(false); - } else { - testDirectory = this.getDirectoryData(true); - } + // TODO: real project fetching. + if (this.hasActiveProject === "large") { + testDirectory = this.getDirectoryData(false); + } else { + testDirectory = this.getDirectoryData(true); + } - - // Clear the buttons. - for (i = 0; i < arrCurrIconsLength; i++) { - arrCurrIcons[i].classList.toggle("active"); - } - document.getElementById("pp-container-assets").removeAttribute("class"); - - // Set default view - if (this.panelState.activeView === "project") { - document.querySelector("#pp-view-assets").style.display = "none"; - document.querySelector("#pp-view-project").style.display = "block" - } else { - document.querySelector("#pp-view-project").style.display = "none" - document.querySelector("#pp-view-assets").style.display = "block"; - } + + // Clear the buttons. + for (i = 0; i < arrCurrIconsLength; i++) { + arrCurrIcons[i].classList.toggle("active"); + } + document.getElementById("pp-container-assets").removeAttribute("class"); + + // Set default view + if (this.panelState.activeView === "project") { + document.querySelector("#pp-view-assets").style.display = "none"; + document.querySelector("#pp-view-project").style.display = "block" + } else { + document.querySelector("#pp-view-project").style.display = "none" + document.querySelector("#pp-view-assets").style.display = "block"; + } - // Now build the asset view. First, get the flattened directory array - this.getFlatDirectory(); - - // Set for active sort so that the view gets drawn - this.isSortActive = true; - - // Set the tree update flag - this.updateTree = true; - } - - if (this.updateTree) { - var myTree = document.getElementById("pp-container-tree"); - - // TODO: Make this better. - if (myTree !== null) { - var myGetme = document.getElementById("getme"); - myGetme.removeChild(myTree); - } - - // Insert the base element for the tree. - treeContainer = document.createElement("ul"); - treeContainer.setAttribute("id", "tree"); - listContainer.appendChild(treeContainer); - - // Create the tree using the TreeControl - projectTree = TreeControl.create(); - projectTree.element = treeContainer; - projectTree.jsonData = this.activeProject; - projectTree.needsDraw = true; - } - } + // Now build the asset view. First, get the flattened directory array + this.getFlatDirectory(); + + // Set for active sort so that the view gets drawn + this.isSortActive = true; + + // Set the tree update flag + this.updateTree = true; + } + + if (this.updateTree) { + var myTree = document.getElementById("pp-container-tree"); + + // TODO: Make this better. + if (myTree !== null) { + var myGetme = document.getElementById("getme"); + myGetme.removeChild(myTree); + } + + // Insert the base element for the tree. + treeContainer = document.createElement("ul"); + treeContainer.setAttribute("id", "tree"); + listContainer.appendChild(treeContainer); + + // Create the tree using the TreeControl + projectTree = TreeControl.create(); + projectTree.element = treeContainer; + projectTree.jsonData = this.activeProject; + projectTree.needsDraw = true; + } + } }, draw: { - enumerable: false, - value: function() { - //this.log("draw: hasActiveProject: " + this.hasActiveProject + "\nthis.swapProject: " + this.swapProject + "\nthis.firstTimeDraw: " + this.firstTimeDraw); - var arrToChange, - arrToChangeLength, - arrHeaders, - arrHeadersLength, - containerList, - containerListLength, - strSelector, - intAdjust = 17, - intTotalWidth = 0, - errorMessage = document.querySelector("#pp-container-assets h3"), - myAssetCol = document.querySelector("#pp-container-assets .pp-col-files"), - filter = document.getElementById("pp-search-files"), - filterValue = filter.value, - i = 0, - j=0, - that = this; - - // Okay, so...what do we need to change? - - // Do we maybe need to resize the columns in a view? - if (!this.firstTimeDraw) { - if (this.activeColumn !== false) { - this.resizeColumn("#pp-view-" + this.panelState.activeView); - this.activeColumn = false; - } - } - - // Is there a sort event active? - if (this.isSortActive) { - // A sort is active, so we need to rebuild the asset view. - var aFileCol = document.querySelector("#pp-view-assets .pp-col-files"), - aSizeCol = document.querySelector("#pp-view-assets .pp-col-size"), - aDateCol = document.querySelector("#pp-view-assets .pp-col-date"), - aTypeCol = document.querySelector("#pp-view-assets .pp-col-type"), - sortCol = document.querySelector("#pp-view-assets .pp-sort"), - sortDirection = sortCol.dataset.direction, - sortTarget = "", - myColNumber = parseInt(sortCol.dataset.column), - myFiles = this.arrFiles, - myFilesLength = myFiles.length, - i = 0, - newFile, - newFileContent, - newSize, - newSizeContent, - newDate, - newDateContent, - newType, - newTypeDiv, - newTypeDivContent, - newClass = "pp-type-other", - typeScript = "css,scss,sass,htm,html,xhtm,xhtml,js,jscript,php", - typeVideo = "mpeg,avi,qt,wmv", - typeAudio = "mp3,mp4,wav", - typeImage = "jpeg,jpg,png,gif,ps", - typeFlash = "fla,swf", - sortHandler = function(thisObject, thatObject) { - var returnMultiplier = 1, - thisThing, thatThing; - - // Ascending or Descending sort? - if (sortDirection === "descending") { - returnMultiplier = -1; - } - - // Targets of size and modifiedDate need to be compared as integers, - // otherwise we're doing string compares. - if ((sortTarget === "size") || (sortTarget === "modifiedDate")) { - thisThing = parseInt(thisObject[sortTarget]); - thatThing = parseInt(thatObject[sortTarget]); - } else if (sortTarget === "type"){ - thisThing = thisObject.name.split(".").pop(); - thatThing = thatObject.name.split(".").pop(); - } else { - thisThing = thisObject[sortTarget]; - thatThing = thatObject[sortTarget]; - } - - // Run the comparison. - if (thisThing > thatThing) { - return (1 * returnMultiplier); - } else if (thisThing < thatThing) { - return (-1 * returnMultiplier); - } else { - return 0; - } - }, - makeFriendlySize = function(intSize) { - var strSize = false, - intRoundedSize = Math.round(intSize/1000); - strSize = intRoundedSize + " K"; - return strSize; - }, - makeFriendlyDate = function(intSeconds) { - // TODO: Localization. - var myDate = new Date(intSeconds), - strDate = ""; - strDate = (myDate.getMonth() + 1) + "/" - + myDate.getDate() + "/" - + myDate.getFullYear() + " " - + myDate.toLocaleTimeString(); - return strDate; - }; - - // Set the sort target - if (myColNumber === 0) { - sortTarget = "name"; - } else if (myColNumber === 1) { - sortTarget = "modifiedDate"; - } else if (myColNumber === 2) { - sortTarget = "size"; - } else if (myColNumber === 3) { - sortTarget = "type"; - } else { - return; - } + enumerable: false, + value: function() { + //this.log("draw: hasActiveProject: " + this.hasActiveProject + "\nthis.swapProject: " + this.swapProject + "\nthis.firstTimeDraw: " + this.firstTimeDraw); + var arrToChange, + arrToChangeLength, + arrHeaders, + arrHeadersLength, + containerList, + containerListLength, + strSelector, + intAdjust = 17, + intTotalWidth = 0, + errorMessage = document.querySelector("#pp-container-assets h3"), + myAssetCol = document.querySelector("#pp-container-assets .pp-col-files"), + filter = document.getElementById("pp-search-files"), + filterValue = filter.value, + i = 0, + j=0, + that = this; + + // Okay, so...what do we need to change? + + // Do we maybe need to resize the columns in a view? + if (!this.firstTimeDraw) { + if (this.activeColumn !== false) { + this.resizeColumn("#pp-view-" + this.panelState.activeView); + this.activeColumn = false; + } + } + + // Is there a sort event active? + if (this.isSortActive) { + // A sort is active, so we need to rebuild the asset view. + var aFileCol = document.querySelector("#pp-view-assets .pp-col-files"), + aSizeCol = document.querySelector("#pp-view-assets .pp-col-size"), + aDateCol = document.querySelector("#pp-view-assets .pp-col-date"), + aTypeCol = document.querySelector("#pp-view-assets .pp-col-type"), + sortCol = document.querySelector("#pp-view-assets .pp-sort"), + sortDirection = sortCol.dataset.direction, + sortTarget = "", + myColNumber = parseInt(sortCol.dataset.column), + myFiles = this.arrFiles, + myFilesLength = myFiles.length, + i = 0, + newFile, + newFileContent, + newSize, + newSizeContent, + newDate, + newDateContent, + newType, + newTypeDiv, + newTypeDivContent, + newClass = "pp-type-other", + typeScript = "css,scss,sass,htm,html,xhtm,xhtml,js,jscript,php", + typeVideo = "mpeg,avi,qt,wmv", + typeAudio = "mp3,mp4,wav", + typeImage = "jpeg,jpg,png,gif,ps", + typeFlash = "fla,swf", + sortHandler = function(thisObject, thatObject) { + var returnMultiplier = 1, + thisThing, thatThing; + + // Ascending or Descending sort? + if (sortDirection === "descending") { + returnMultiplier = -1; + } + + // Targets of size and modifiedDate need to be compared as integers, + // otherwise we're doing string compares. + if ((sortTarget === "size") || (sortTarget === "modifiedDate")) { + thisThing = parseInt(thisObject[sortTarget]); + thatThing = parseInt(thatObject[sortTarget]); + } else if (sortTarget === "type"){ + thisThing = thisObject.name.split(".").pop(); + thatThing = thatObject.name.split(".").pop(); + } else { + thisThing = thisObject[sortTarget]; + thatThing = thatObject[sortTarget]; + } + + // Run the comparison. + if (thisThing > thatThing) { + return (1 * returnMultiplier); + } else if (thisThing < thatThing) { + return (-1 * returnMultiplier); + } else { + return 0; + } + }, + makeFriendlySize = function(intSize) { + var strSize = false, + intRoundedSize = Math.round(intSize/1000); + strSize = intRoundedSize + " K"; + return strSize; + }, + makeFriendlyDate = function(intSeconds) { + // TODO: Localization. + var myDate = new Date(intSeconds), + strDate = ""; + strDate = (myDate.getMonth() + 1) + "/" + + myDate.getDate() + "/" + + myDate.getFullYear() + " " + + myDate.toLocaleTimeString(); + return strDate; + }; + + // Set the sort target + if (myColNumber === 0) { + sortTarget = "name"; + } else if (myColNumber === 1) { + sortTarget = "modifiedDate"; + } else if (myColNumber === 2) { + sortTarget = "size"; + } else if (myColNumber === 3) { + sortTarget = "type"; + } else { + return; + } - // Sort the files object - myFiles.sort(sortHandler); - - // Clear the columns and rebuild - nj.empty(aFileCol); - nj.empty(aSizeCol); - nj.empty(aDateCol); - nj.empty(aTypeCol); - - for (i = 0; i < myFilesLength; i ++) { - newSpan = document.createElement("span"), - newSpanContent = document.createTextNode(myFiles[i].name), - newFile = document.createElement("div"), - newSize = document.createElement("div"), - newSizeContent = document.createTextNode(makeFriendlySize(parseInt(myFiles[i].size))), - newDate = document.createElement("div"), - newDateContent = document.createTextNode(makeFriendlyDate(parseInt(myFiles[i].modifiedDate))), - newType = myFiles[i].name.split(".").pop().toLowerCase(), - newTypeDiv = document.createElement("div"), - newTypeDivContent = document.createTextNode(newType); + // Sort the files object + myFiles.sort(sortHandler); + + // Clear the columns and rebuild + nj.empty(aFileCol); + nj.empty(aSizeCol); + nj.empty(aDateCol); + nj.empty(aTypeCol); + + for (i = 0; i < myFilesLength; i ++) { + newSpan = document.createElement("span"), +