From 9048cd50bf5e0a418d1d95498bb593961f72db36 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Wed, 15 Feb 2012 09:51:12 -0800 Subject: Revert "Reverting text/html document classes and setting up MVC folder structure" This reverts commit 68ce64a5a2f4a71b54d33916aaf1d57161302425. Signed-off-by: Ananya Sen --- js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'js/components/ui/FilePicker/pickerNavigator.reel') diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css index 796c283f..9c85c6b5 100644 --- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css +++ b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css @@ -6,7 +6,7 @@ .picker{ font-size:12px; - width:523px; + width:510px; height:500px; padding-top:15px; padding-left:15px; @@ -53,7 +53,6 @@ height:75%; width:auto; border-right: none; - margin: 8px 0px 0px 8px; } .picker .right-bottom{ -- cgit v1.2.3 From e2b97c951a9a5a0c4ff831d44fdd82177cbd82ad Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Wed, 15 Feb 2012 10:54:14 -0800 Subject: Revert "Revert "Reverting text/html document classes and setting up MVC folder structure"" This reverts commit 9048cd50bf5e0a418d1d95498bb593961f72db36. Signed-off-by: Ananya Sen --- js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/components/ui/FilePicker/pickerNavigator.reel') diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css index 9c85c6b5..796c283f 100644 --- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css +++ b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css @@ -6,7 +6,7 @@ .picker{ font-size:12px; - width:510px; + width:523px; height:500px; padding-top:15px; padding-left:15px; @@ -53,6 +53,7 @@ height:75%; width:auto; border-right: none; + margin: 8px 0px 0px 8px; } .picker .right-bottom{ -- cgit v1.2.3 From 4937b39fb0cf542f57cdadc7d1e2ed9798f7ef87 Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Wed, 15 Feb 2012 16:09:14 -0800 Subject: fixes to document tabbing Signed-off-by: Ananya Sen --- js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/components/ui/FilePicker/pickerNavigator.reel') diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js index 6b0d92f7..edc24a2c 100644 --- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js +++ b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js @@ -794,7 +794,7 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { handleOkButtonAction : { value: function(evt){ - console.log("$$$ File Picker : selected "+ this.selectedItems.toString()); + //console.log("$$$ File Picker : selected "+ this.selectedItems.toString()); var success = true; if(!!this.pickerModel.callback && (this.selectedItems.length > 0)){//call the callback if it is available try{ -- cgit v1.2.3 From 2e766c9eaa98fa20f311b3eb2f892a1a240e90cf Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Thu, 16 Feb 2012 06:43:33 -0800 Subject: file picker: Enable ok if user double clicks folder and enter it. Validate path if user enter it manually in addressbar. Signed-off-by: Ananya Sen --- .../pickerNavigator.reel/pickerNavigator.js | 30 ++++++++++++++++++++++ 1 file changed, 30 insertions(+) (limited to 'js/components/ui/FilePicker/pickerNavigator.reel') diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js index edc24a2c..411386f9 100644 --- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js +++ b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js @@ -203,6 +203,13 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { this.pickerModel.storeHistory(this.pickerModel.currentRoot);//populate history this.updateMetadata(this.currentURI); + + //for directory selection, selected url is the folder entered + if(!this.pickerModel.inFileMode ){ + this.okButton.removeAttribute("disabled"); + //put into selectedItems..currently single selection is supported + this.selectedItems = [this.pickerModel.currentRoot]; + } } this.element.addEventListener("openFolder", function(evt){that.handlePickerNavOpenFolder(evt);}, false);//add icon double click event listener to reload iconList with new set of data @@ -211,6 +218,7 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { this.element.addEventListener("updateMetadata", function(evt){that.handlePickerNavUpdateMetadata(evt);}, false);//show metadata on click of icon //this.addressGo.addEventListener("click", this, false); this.addressBarUri.addEventListener("keydown", this, false); + this.addressBarUri.addEventListener("keyup", this, false); this.refreshButton.addEventListener("click", this, false);//refresh - gets from file system directly this.backArrow.addEventListener("click", this, false); this.forwardArrow.addEventListener("click", this, false); @@ -608,6 +616,13 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { this.backArrow.classList.remove("disable"); } + //for directory selection, selected url is the folder entered + if(!this.pickerModel.inFileMode ){ + this.okButton.removeAttribute("disabled"); + //put into selectedItems..currently single selection is supported + this.selectedItems = [evt.folderUri]; + } + } }, @@ -720,6 +735,21 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { } }, + handleAddressBarUriKeyup:{ + value: function(evt){ + //disable ok if user enters an invalid uri + if(!this.application.ninja.coreIoApi.isValidUri(this.addressBarUri.value)){ + //disable OK + if(!this.okButton.hasAttribute("disabled")){ + this.okButton.setAttribute("disabled", "true"); + } + }else{ + this.okButton.removeAttribute("disabled"); + this.selectedItems = [this.addressBarUri.value]; + } + } + }, + handleRefreshButtonClick:{ value:function(evt){ var uri = this.addressBarUri.value; -- cgit v1.2.3 From a9c369c2e5d8f6fc8d936f7e1e6b84f693226ddf Mon Sep 17 00:00:00 2001 From: Ananya Sen Date: Thu, 16 Feb 2012 13:11:48 -0800 Subject: moved file picker in file io Signed-off-by: Ananya Sen --- .../pickerNavigator.reel/pickerNavigator.css | 253 ----- .../pickerNavigator.reel/pickerNavigator.html | 80 -- .../pickerNavigator.reel/pickerNavigator.js | 1072 -------------------- 3 files changed, 1405 deletions(-) delete mode 100644 js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css delete mode 100755 js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html delete mode 100644 js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js (limited to 'js/components/ui/FilePicker/pickerNavigator.reel') diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css deleted file mode 100644 index 796c283f..00000000 --- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css +++ /dev/null @@ -1,253 +0,0 @@ -/* - This file contains proprietary software owned by Motorola Mobility, Inc.
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
- (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ - -.picker{ - font-size:12px; - width:523px; - height:500px; - padding-top:15px; - padding-left:15px; - padding-bottom:15px; - color:#ffffff; - background-color:#494949; - font-family: 'Droid Sans', sans-serif; - border-radius: 8px; - box-shadow: 0px 0px 8px rgba(0, 0, 0, .8); - text-shadow: 1px 1px 1px #000; -} - -.picker .pickerHeader{ - margin-bottom: 10px; -} - -.picker .container{ - border: 1px solid #000000; - overflow: auto; - background-color:#5f5f5f; -} - -.picker .left-nav{ - float:left; - width:20%; - height:86%; - padding-top: 10px; - overflow-x:hidden; - overflow-y:auto -} - -.picker .right-nav{ - float:left; - width:75%; - height:88%; - overflow: hidden; - border-left: none; -} - -.picker .right-top{ - border-right: 1px solid #000000; - overflow: auto; - min-height:150px; - height:75%; - width:auto; - border-right: none; - margin: 8px 0px 0px 8px; -} - -.picker .right-bottom{ - border: 1px solid #000000; - border-left: none; - overflow: auto; - height:20%; - padding: 10px; - border-bottom: none; - border-right: none; -} - -.picker .driversList{ - padding: 3px; - text-align: center; -} - -.picker .driversList:hover{ - cursor:pointer; - background-color: #444444; -} - -.picker .highlighted{ - background-color: #343434; -} - - -.picker .buttons{ - float:right; - margin-top: 7px; -} - -.picker .historyArrows{ - width:20px; - display:inline; - border-radius: 5px; - border: 1px solid #d1d1d1; -} - -.picker .historyArrows span{ - font-size: 0.7em; - cursor: pointer; -} - -.picker .addressbar{ - display:inline; - margin-left: 2px; - border-radius: 5px; - border: 1px solid #d1d1d1; - padding: 3px; - position:relative; -} - -.picker .addressbar input{ - width:320px; -} - -.picker .dropdownArrow{ - font-size: 0.7em; - cursor: pointer; -} - -.picker .dropdown{ - position:absolute; - z-index:10000; - border: 1px solid #d1d1d1; - background-color: #444; - opacity:0.9; -} - -.picker .dropdown div{ - padding: 3px; -} - -.picker .dropdown div:hover{ - cursor: pointer; - background-color: #343434; -} - -.picker .addressbar .dropdown{ - width:331px; - min-height:50px; -} - -.picker .go{ - margin-left: 5px; - cursor: pointer; -} - -.picker .viewSwitcher{ - display:inline; - margin-left: 30px; -} - -.picker .viewSwitcher span{ - margin-left: 5px; - border-radius: 5px; - border: 1px solid #d1d1d1; - padding: 3px; - cursor: pointer; -} - -.picker .reload{ - position:relative; - margin-left: 15px; - top:4px; - cursor: pointer; -} - -.picker .filters{ - display:inline; - float:left; - margin-left: 12px; - margin-top: 7px; - border-radius: 5px; - border: 1px solid #d1d1d1; - padding: 3px; - /*width:150px;*/ - position:relative; - max-width: 65%; -} - -.picker .filters .dropdown{ - min-height:25px; - /*width:154px;*/ - bottom:21px; - left:-1px; - white-space: nowrap; -} - -.picker .filterVal{ - width:120px; - margin-left: 5px; - background-color: #444; -} - -.picker .disable{ - color:#5f5f5f; - cursor:auto; -} - -.picker .hide{ - display: none; -} - -.picker .viewSelected{ - background-color:#6f6f6f; - pointer:auto; -} - -.picker .buttons button { - float: left; - width: 100px; - margin-top: 3px; -} - -.picker .okButton{ - margin: 0px 22px 0px 8px; - /* -margin-right:25px; - -webkit-box-align: center; - text-align: center; - cursor: default; - padding: 0px 6px 0px; - border:2px solid #d1d1d1; - background-color: #e1e1e1; - box-sizing: border-box; - border-radius:10px; - background-image: -webkit-linear-gradient(bottom, #e1e1e1 13%, #d1d1d1 58%, #e1e1e1 40%); - cursor:pointer; -*/ -} - -.picker .cancelButton{ - /* --webkit-box-align: center; - text-align: center; - cursor: default; - padding: 0px 6px 0px; - border:2px solid #d1d1d1; - background-color: #e1e1e1; - box-sizing: border-box; - border-radius:10px; - background-image: -webkit-linear-gradient(bottom, #e1e1e1 13%, #d1d1d1 58%, #e1e1e1 40%); - cursor:pointer; -*/ -} - -.picker input[type="button"]:disabled{ - background-color: #a1a1a1; - border:2px solid #a1a1a1; - background-image:none; - cursor:auto; -} - - - diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html deleted file mode 100755 index 20cb0c68..00000000 --- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html +++ /dev/null @@ -1,80 +0,0 @@ - - - - - - - - - - - - - \ No newline at end of file diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js deleted file mode 100644 index 411386f9..00000000 --- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js +++ /dev/null @@ -1,1072 +0,0 @@ -/* -This file contains proprietary software owned by Motorola Mobility, Inc.
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
-(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ - -var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component, - iconsListModule = require("js/components/ui/icon-list-basic/iconsList.reel"), - treeModule = require("js/components/ui/tree-basic/tree.reel"); - -var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { - - popup:{ - enumerable: false, - writable: true, - value: null - }, - - mainContentData:{ - enumerable:false, - writable:true, - value:null - }, - - _firstTime: { - enumerable: false, - value: true - }, - - firstTime:{ - get: function(){}, - set: function(){} - }, - - pickerCallback:{ - enumerable:false, - writable:true, - value:null - }, - - selectedItems:{//passed to pickerCallback on click of OK - enumerable:false, - writable:true, - value:[] - }, - - /** - * store a reference to the currently selected node... for single selection - */ - currentSelectedNode:{ - enumerable:false, - writable:true, - value:null - }, - - currentURI:{ - enumerable:false, - writable:true, - value:null - }, - - iconsViewDrawnOnce:{ - enumerable:false, - writable:true, - value:false - }, - - /** - * for tree view only - * will store folder uri vs tree instance map - */ - treeRefHash:{ - enumerable:false, - writable:true, - value:{ - - } - }, - - selectedPickerView:{ - enumerable:false, - writable:true, - value:null - }, - - /** - * Contains the different Views and their update handlers - */ - pickerViews:{ - enumerable:false, - writable:true, - value: function(){ - var that = this; - return { - "iconView":that.updateIconView, - "treeView":that.updateTreeView - } - } - }, - - pickerModel:{ - enumerable:false, - writable:true, - value:null - }, - - willDraw: { - enumerable: false, - value: function() { - - } - }, - draw: { - enumerable: false, - value: function() { - this.filterVal.innerHTML = this.pickerModel.currentFilter; - - if(this.pickerModel.fatalError !== null){ - this.error.innerHTML = this.pickerModel.fatalError; - } - - } - }, - didDraw: { - enumerable: false, - value: function() { - - var that = this; - this.iconList = null; - this.newContent = null; - this.spanEl = null; - - this.addIdentifiers(); - - var topLevelDirs = this.pickerModel.topLevelDirectories; - var leftNav = this.leftNav; - //draw left nav - if(!!topLevelDirs - && (typeof topLevelDirs === "object") - && ('splice' in topLevelDirs) - && ('join' in topLevelDirs) - &&(topLevelDirs.length > 0)){ - - topLevelDirs.forEach(function(dirObj){ - var newDiv = document.createElement("div"); - newDiv.className = "driversList"; - newDiv.innerHTML = dirObj.name; - leftNav.appendChild(newDiv); - if(dirObj.uri === this.pickerModel.currentRoot){ - newDiv.classList.add("highlighted"); - //enable ok for logical drive selections, when in directory selection mode - if(this.pickerModel.inFileMode === false){ - this.okButton.removeAttribute("disabled"); - //put into selectedItems..currently single selection is supported - this.selectedItems = [dirObj.uri]; - } - } - - newDiv.addEventListener("click", function(evt){that.handleTopLevelDirectoryClicks(evt, dirObj);}, false); - }, that); - }else{ - console.error("need at least 1 valid top level directory"); - } - - //Draw icon view list - //TODO: check the default view and draw the appropriate view - if(this.mainContentData !== null){ - - this.currentURI = this.pickerModel.currentRoot; - - //draw the IconsList if icons view container is on - if(this.iconViewContainer.style.display === "block"){ - this.iconList = iconsListModule.IconsList.create(); - //console.log(this.mainContentData); - this.iconList.iconsViewDataObject = this.mainContentData; - this.iconList.element = this.iconViewContainer; - this.iconList.needsDraw = true; - this.iconsViewDrawnOnce = true; - this.selectedPickerView = "iconView"; - - if(!this.iconView.classList.contains("viewSelected")){ - this.iconView.classList.add("viewSelected") - } - if(this.treeView.classList.contains("viewSelected")){ - this.treeView.classList.remove("viewSelected"); - } - - }else if(this.treeViewContainer.style.display === "block"){ - //else draw the Tree if tree view container is on - this.renderTree(this.treeViewContainer, this.currentURI); - this.selectedPickerView = "treeView"; - - if(!this.treeView.classList.contains("viewSelected")){ - this.treeView.classList.add("viewSelected") - } - if(this.iconView.classList.contains("viewSelected")){ - this.iconView.classList.remove("viewSelected"); - } - } - - this.updateAddressBar(this.pickerModel.currentRoot); - this.pickerModel.storeHistory(this.pickerModel.currentRoot);//populate history - - this.updateMetadata(this.currentURI); - - //for directory selection, selected url is the folder entered - if(!this.pickerModel.inFileMode ){ - this.okButton.removeAttribute("disabled"); - //put into selectedItems..currently single selection is supported - this.selectedItems = [this.pickerModel.currentRoot]; - } - } - - this.element.addEventListener("openFolder", function(evt){that.handlePickerNavOpenFolder(evt);}, false);//add icon double click event listener to reload iconList with new set of data - this.element.addEventListener("selectedItem", function(evt){that.handlePickerNavSelectedItem(evt);}, false);//for single selection only - this.element.addEventListener("showMetadata", function(evt){that.handlePickerNavShowMetadata(evt);}, false);//show metadata on hover of icon - this.element.addEventListener("updateMetadata", function(evt){that.handlePickerNavUpdateMetadata(evt);}, false);//show metadata on click of icon - //this.addressGo.addEventListener("click", this, false); - this.addressBarUri.addEventListener("keydown", this, false); - this.addressBarUri.addEventListener("keyup", this, false); - this.refreshButton.addEventListener("click", this, false);//refresh - gets from file system directly - this.backArrow.addEventListener("click", this, false); - this.forwardArrow.addEventListener("click", this, false); - - //populate filters if in file selection mode - if(this.pickerModel.inFileMode === true){ - var filtersDD = this.element.querySelector(".filters .dropdown"); - if(!!this.pickerModel.fileFilters - && (typeof this.pickerModel.fileFilters === "object") - && ('splice' in this.pickerModel.fileFilters) - && ('join' in this.pickerModel.fileFilters)){ - this.pickerModel.fileFilters.forEach(function(aFilter){ - var newDiv = document.createElement("div"); - newDiv.innerHTML = aFilter; - filtersDD.appendChild(newDiv); - newDiv.addEventListener("click", function(evt){that.handleFilterClick(evt, aFilter, filtersDD)}, false); - }, this); - } - - var renderedWidth = this.getComputedWidth(filtersDD); - this.filters.style.width = "" + (parseInt((renderedWidth.substring(0, (renderedWidth.length - 2)))) + 20) + "px"; - }else{ - this.filters.style.display = "none"; - } - /** - * attach click event listeners to the addressbar dropdown arrows - */ - var dropDownArrows = this.element.getElementsByClassName("dropdownArrow"); - for(var x=0; x0){ - arr.push(temp); - }else{//for unix root / - arr.push("/"); - } - - } - //console.log(arr); - return arr; - } - }, - - renderTree:{ - writable:false, - enumerable:true, - value:function(element, uri){ - if(!!element){ - var tree = treeModule.Tree.create(); - tree.treeViewDataObject = this.application.ninja.filePickerController.prepareContentList(uri, this.pickerModel); - //console.log("renderTree() for "+ uri); - //console.log(tree.treeViewDataObject); - tree.element = element; - tree.needsDraw = true; - } - } - }, - - updateIconView:{ - writable:false, - enumerable:true, - value:function(uri, fromCache){ - var status = true; - var iconViewContainer = this.element.querySelector(".iconViewContainer"); - if((typeof fromCache === 'undefined') || (fromCache === true)){ - this.newContent = this.application.ninja.filePickerController.prepareContentList(uri, this.pickerModel); - } - else{ - this.newContent = this.application.ninja.filePickerController.prepareContentList(uri, this.pickerModel, false); - } - if(!!this.newContent && this.newContent.length > 0){ - //clear selection - this.clearSelection(); - this.spanEl = iconViewContainer.querySelector(".noResults"); - if(!!this.spanEl){ - this.spanEl.style.display = "none"; - } - this.iconList.iconsViewDataObject = this.newContent; - }else{ - this.iconList.iconsViewDataObject = []; - this.spanEl = iconViewContainer.querySelector(".noResults"); - if(!!this.spanEl){ - this.spanEl.style.display = "block"; - }else{ - this.spanEl = document.createElement("span"); - this.spanEl.className = "noResults"; - this.spanEl.innerHTML = "no results"; - this.spanEl.style.display = "block"; - iconViewContainer.appendChild(this.spanEl); - } - status = false; //for no match - } - this.updateMetadata(uri); - - return status; - } - }, - - updateTreeView:{ - writable:false, - enumerable:true, - value:function(uri, fromCache){ - var status = true; - //need to draw every time since an expanded tree won't update with just bound data update - var treeViewContainer = this.element.querySelector(".treeViewContainer"); - //first clean up treeViewContainer - while(treeViewContainer.hasChilden){ - treeViewContainer.removeChild(treeViewContainer.lastChild); - } - //now draw the unexpanded tree with the current uri data - - if(!!treeViewContainer){ - var data = []; - if((typeof fromCache === 'undefined') || (fromCache === true)){ - data = this.application.ninja.filePickerController.prepareContentList(uri, this.pickerModel); - } - else{ - data = this.application.ninja.filePickerController.prepareContentList(uri, this.pickerModel, false); - } - - if(data.length > 0){ - - //clear selection - this.clearSelection(); - this.spanEl = this.element.querySelector(".treeViewContainer").querySelector(".noResults"); - if(!!this.spanEl){ - this.spanEl.style.display = "none"; - } - - var tree = treeModule.Tree.create(); - tree.treeViewDataObject = data; - tree.element = treeViewContainer; - tree.needsDraw = true; - - }else{ - - var treeUl = treeViewContainer.getElementsByTagName("ul")[0]; - if(!!treeUl){ - treeUl.style.display = "none"; - } - - this.spanEl = this.element.querySelector(".treeViewContainer").querySelector(".noResults"); - if(!!this.spanEl){ - this.spanEl.style.display = "block"; - }else{ - this.spanEl = document.createElement("span"); - this.spanEl.className = "noResults"; - this.spanEl.innerHTML = "no results"; - this.spanEl.style.display = "block"; - this.element.querySelector(".treeViewContainer").appendChild(this.spanEl); - } - - status = false; //for no match - } - - this.updateMetadata(uri); - - return status; - } - } - }, - - updateMetadata:{ - enumerable: false, - writable:false, - value:function(currentUri){ - var data = this.application.ninja.filePickerController._directoryContentCache[currentUri]; - var metadata = ""; - if(!!data){ - if(data.name !== ""){ - metadata = "Name: "+data.name; - } - metadata = metadata + "
" + "Type: "+data.type; - if(data.size){metadata = metadata + "
" + "Size: "+data.size;} - if(data.creationDate){metadata = metadata + "
" + "Creation date: "+ this.formatTimestamp(data.creationDate);} - if(data.modifiedDate){metadata = metadata + "
" + "Modified date: "+ this.formatTimestamp(data.modifiedDate);} - } - this.element.getElementsByClassName("right-bottom")[0].innerHTML = metadata; - } - }, - - isOutside:{ - enumerable:true, - value:function(el, targetEl){ - var isOutside = true; - if(el){ - var childElements = el.getElementsByTagName("*");//get a flat NodeList of all the child elements - if(childElements != null){ - for(var i=0; i< childElements.length; i++){ - if(childElements[i] === targetEl){//targetEl matches with an element inside the menu - isOutside = false; - break; - } - } - } - } - return isOutside; - } - }, - /** - * convert timestamp to human readable form - * - * @param: timestamp - UTC milliseconds - */ - formatTimestamp:{ - writable:false, - enumerable: false, - value: function(timestamp) { - var aDate = new Date(); - timestamp = timestamp - (aDate.getTimezoneOffset()*60*1000);//convert from GMT to local timestamp - aDate = new Date(timestamp); - return aDate.toLocaleString(); - } - }, - - /** - * Event Listners - */ - - addIdentifiers:{ - value: function(){ - this.element.identifier = "pickerNav"; - //this.addressGo.identifier = "addressGo"; - this.addressBarUri.identifier = "addressBarUri"; - this.refreshButton.identifier = "refreshButton"; - this.backArrow.identifier = "backArrow"; - this.forwardArrow.identifier = "forwardArrow"; - this.iconView.identifier = "iconView"; - this.treeView.identifier = "treeView"; - this.resultsArea.identifier = "resultsArea"; - } - }, - - handleTopLevelDirectoryClicks : { - enumerable: true, - writable: false, - value : function(evt, dirObj){ - this.currentURI = dirObj.uri; - - var status = this.pickerViews()[this.selectedPickerView].call(this, dirObj.uri);//dynamically calls the update function of the current picker view - - this.updateAddressBar(dirObj.uri); - this.pickerModel.currentRoot = dirObj.uri; - - //populate history - this.pickerModel.storeHistory(dirObj.uri); - //disable forward button for explicit new urls - if(!this.forwardArrow.classList.contains("disable")){ - this.forwardArrow.classList.add("disable"); - } - //enable back button if required - if((this.pickerModel.currentHistoryPointer === 1) && this.backArrow.classList.contains("disable")){ - this.backArrow.classList.remove("disable"); - } - - //dehighlight current selection and highlight new selection - var currentHighlighted = evt.target.parentNode.querySelector(".highlighted"); - if(!!currentHighlighted){ - currentHighlighted.classList.remove("highlighted"); - } - if(!evt.target.classList.contains("highlighted")){ - evt.target.classList.add("highlighted"); - } - - //enable ok for logical drive selections, when in directory selection mode - if(this.pickerModel.inFileMode === false){ - this.okButton.removeAttribute("disabled"); - //put into selectedItems..currently single selection is supported - this.selectedItems = [dirObj.uri]; - } - } - }, - - handlePickerNavOpenFolder: { - value: function(evt){ - this.currentURI = evt.folderUri; - var status = this.pickerViews()[this.selectedPickerView].call(this, evt.folderUri);//dynamically calls the update function of the current picker view - - //update address-bar - this.updateAddressBar(evt.folderUri); - - //populate history - this.pickerModel.storeHistory(evt.folderUri); - - //disable forward button for explicit new urls - if(!this.forwardArrow.classList.contains("disable")){ - this.forwardArrow.classList.add("disable"); - } - - //enable back button if required - if((this.pickerModel.currentHistoryPointer === 1) && this.backArrow.classList.contains("disable")){ - this.backArrow.classList.remove("disable"); - } - - //for directory selection, selected url is the folder entered - if(!this.pickerModel.inFileMode ){ - this.okButton.removeAttribute("disabled"); - //put into selectedItems..currently single selection is supported - this.selectedItems = [evt.folderUri]; - } - - } - }, - - - handlePickerNavSelectedItem: { - value:function(evt){ - var uri = evt.uri; - - //handle deselection of other icons for single selection - if((this.currentSelectedNode !== null) && (this.currentSelectedNode !== evt.target) && (this.currentSelectedNode.classList.contains("selected"))){ - this.currentSelectedNode.classList.remove("selected"); - this.currentSelectedNode = null; - } - //enable OK button if the selection is valid as per the picker mode - if((this.pickerModel.inFileMode && (this.application.ninja.filePickerController._directoryContentCache[uri].type === "file")) - || (!this.pickerModel.inFileMode && (this.application.ninja.filePickerController._directoryContentCache[uri].type === "directory"))){ - this.okButton.removeAttribute("disabled"); - - //put into selectedItems..currently single selection is supported - this.selectedItems = [uri]; - - if(!evt.target.classList.contains("selected")){ - evt.target.classList.add("selected"); - } - - this.currentSelectedNode = evt.target; - - }else{ - - - //test: highlight non-selectable icons too - if(!evt.target.classList.contains("selected")){ - evt.target.classList.add("selected"); - } - this.currentSelectedNode = evt.target; - //end- test - - - //disable OK - if(!this.okButton.hasAttribute("disabled")){ - this.okButton.setAttribute("disabled", "true"); - } - } - } - }, - - handlePickerNavShowMetadata: { - value: function(evt){ - //update matadata only if nothing is already selected - if(this.currentSelectedNode == null){ - //console.log("handle showmetadata - true"); - this.metadataSection.innerHTML = evt.metadata; - } - } - }, - - handlePickerNavUpdateMetadata:{ - value: function(evt){ - this.metadataSection.innerHTML = evt.metadata; - } - }, - - handleAddressGoClick :{ - value: function(evt){ - - if(this.addressBarUri.value !== ""){ - var uri = this.addressBarUri.value; - uri = this.cleanupUri(uri); - - this.currentURI = uri; - var status = this.pickerViews()[this.selectedPickerView].call(this, uri);//dynamically calls the update function of the current picker view - - //populate history - this.pickerModel.storeHistory(uri); - - //disable forward button for explicit new urls - if(!this.forwardArrow.classList.contains("disable")){ - this.forwardArrow.classList.add("disable"); - } - - //enable back button if required - if((this.pickerModel.currentHistoryPointer === 1) && this.backArrow.classList.contains("disable")){ - this.backArrow.classList.remove("disable"); - } - } - } - }, - - handleAddressBarUriKeydown:{ - value: function(evt){ - if(evt.keyCode === 13 ){ - var uri = this.addressBarUri.value; - uri = this.cleanupUri(uri); - - this.currentURI = uri; - - var status = this.pickerViews()[this.selectedPickerView].call(this, uri);//dynamically calls the update function of the current picker view - - //populate history - this.pickerModel.storeHistory(uri); - //disable forward button for explicit new urls - if(!this.forwardArrow.classList.contains("disable")){ - this.forwardArrow.classList.add("disable"); - } - //enable back button if required - if((this.pickerModel.currentHistoryPointer === 1) && this.backArrow.classList.contains("disable")){ - this.backArrow.classList.remove("disable"); - } - } - } - }, - - handleAddressBarUriKeyup:{ - value: function(evt){ - //disable ok if user enters an invalid uri - if(!this.application.ninja.coreIoApi.isValidUri(this.addressBarUri.value)){ - //disable OK - if(!this.okButton.hasAttribute("disabled")){ - this.okButton.setAttribute("disabled", "true"); - } - }else{ - this.okButton.removeAttribute("disabled"); - this.selectedItems = [this.addressBarUri.value]; - } - } - }, - - handleRefreshButtonClick:{ - value:function(evt){ - var uri = this.addressBarUri.value; - uri = this.cleanupUri(uri); - - var status = this.pickerViews()[this.selectedPickerView].call(this, uri, false);//dynamically calls the update function of the current picker view - - } - }, - - handleBackArrowClick :{ - value:function(evt){ - var uri = ""; - //console.log("*** backArrow: pointer ="+this.pickerModel.currentHistoryPointer); - if(this.pickerModel.currentHistoryPointer >0){ - uri = this.pickerModel._history[this.pickerModel.currentHistoryPointer -1]; - //console.log("*** back uri= "+ uri); - //console.log(this.pickerModel._history); - - this.currentURI = uri; - var status = this.pickerViews()[this.selectedPickerView].call(this, uri);//dynamically calls the update function of the current picker view - - //update address-bar - this.updateAddressBar(uri); - - this.pickerModel.currentHistoryPointer -= 1; - - //disable back button if it is at the beginning - if((this.pickerModel.currentHistoryPointer === 0) && (!evt.target.classList.contains("disable"))){ - evt.target.classList.add("disable"); - } - //enable forward button if required - if((this.pickerModel.currentHistoryPointer < (this.pickerModel._history.length -1) && (this.forwardArrow.classList.contains("disable")))){ - this.forwardArrow.classList.remove("disable"); - } - } - //console.log("***new backArrow: pointer ="+this.pickerModel.currentHistoryPointer); - } - }, - - handleForwardArrowClick: { - value:function(evt){ - var uri = ""; - //console.log("*** forwardArrow: pointer ="+this.pickerModel.currentHistoryPointer); - if(this.pickerModel.currentHistoryPointer < (this.pickerModel._history.length -1)){ - uri = this.pickerModel._history[this.pickerModel.currentHistoryPointer + 1]; - //console.log("*** forward uri= "+ uri); - //console.log(this.pickerModel._history); - - this.currentURI = uri; - var status = this.pickerViews()[this.selectedPickerView].call(this, uri);//dynamically calls the update function of the current picker view - - //update address-bar - this.updateAddressBar(uri); - - this.pickerModel.currentHistoryPointer += 1; - - //disable forward button if pointer is at the end - if((this.pickerModel.currentHistoryPointer === (this.pickerModel._history.length -1)) && (!evt.target.classList.contains("disable"))){ - evt.target.classList.add("disable"); - } - - //enable back button if required - if((this.pickerModel.currentHistoryPointer > 0) && (this.backArrow.classList.contains("disable"))){ - this.backArrow.classList.remove("disable"); - } - - } - //console.log("***new forwardArrow: pointer ="+this.pickerModel.currentHistoryPointer); - } - }, - - handleOkButtonAction : { - value: function(evt){ - //console.log("$$$ File Picker : selected "+ this.selectedItems.toString()); - var success = true; - if(!!this.pickerModel.callback && (this.selectedItems.length > 0)){//call the callback if it is available - try{ - this.pickerModel.callback({"uri":this.selectedItems}); - }catch(e){ - success = false; - console.log("[Error] Failed to open "+ this.selectedItems.toString()); - console.log(e.stack); - } - }else{//else send an event with the selected files - var pickerSelectionEvent = document.createEvent("Events"); - pickerSelectionEvent.initEvent("pickerSelectionsDone", false, false); - pickerSelectionEvent.selectedItems = this.selectedItems; - this.eventManager.dispatchEvent(pickerSelectionEvent); - } - - //store last opened/saved folder, and view after IO is successful - var dataStore = window.sessionStorage; - try { - if(this.pickerModel.pickerMode === "write"){ - dataStore.setItem('lastSavedFolderURI',escape(""+this.currentURI)); - } - else if(this.pickerModel.inFileMode === true){ - dataStore.setItem('lastOpenedFolderURI_fileSelection',escape(""+this.currentURI)); - }else if(this.pickerModel.inFileMode === false){ - dataStore.setItem('lastOpenedFolderURI_folderSelection',escape(""+this.currentURI)); - } - } - catch(e){ - if(e.code == 22){ - dataStore.clear(); - } - } - - this.cleanup();//clear up any unnecessary memory - - if(this.popup){ - this.popup.hide(); - } - //end - close dialog - } - }, - - handleCancelButtonAction :{ - value:function(evt){ - //clean up memory - this.cleanup(); - - if(this.popup){ - this.popup.hide(); - } - - } - }, - - handleFilterClick:{ - value: function(evt, aFilter, filtersDD){ - this.pickerModel.currentFilter = aFilter; - - this.pickerViews()[this.selectedPickerView].call(this, this.currentURI);//dynamically calls the update function of the current picker view - - this.element.querySelector(".filters .filterVal").innerHTML = evt.target.innerHTML; - filtersDD.classList.toggle("hide"); - } - }, - - handleAddressDropdownArrowClick:{ - value: function(evt){ - var that = this; - - //populate dropdown dynamically for addressbar - var addressbarDD = this.element.querySelector(".addressbar .dropdown"); - if((evt.target === this.element.querySelector(".addressbar .dropdownArrow")) && (addressbarDD.classList.contains("hide"))){//dropdown is closed - - //clear old dropdown contents - while(addressbarDD.hasChildNodes()){ - addressbarDD.removeChild(addressbarDD.lastChild); - } - - var uriTrail = this.prepareAddressDropdownData(this.addressBarUri.value); - if(uriTrail.length >0){ - uriTrail.forEach(function(aUri){ - var newDiv = document.createElement("div"); - newDiv.innerHTML = aUri; - addressbarDD.appendChild(newDiv); - newDiv.addEventListener("click", function(evt){that.handleAddressTrailClick(evt, aUri, addressbarDD);}, false); - }, this); - } - } - //open close dropdown - this.toggleDropdown(evt.target); - } - }, - - handleAddressTrailClick: { - value: function(evt, aUri, addressbarDD){ - this.currentURI = aUri; - var status = this.pickerViews()[this.selectedPickerView].call(this, aUri);//dynamically calls the update function of the current picker view - - //populate history - this.pickerModel.storeHistory(aUri); - //disable forward button for explicit new urls - if(!this.forwardArrow.classList.contains("disable")){ - this.forwardArrow.classList.add("disable"); - } - //enable back button if required - if((this.pickerModel.currentHistoryPointer === 1) && this.backArrow.classList.contains("disable")){ - this.backArrow.classList.remove("disable"); - } - this.addressBarUri.value = evt.target.innerHTML; - addressbarDD.classList.toggle("hide"); - } - }, - - handleIconViewClick :{ - value:function(evt){ - - this.selectedPickerView = "iconView"; - - if(this.element.querySelector(".iconViewContainer").style.display === "none"){ - //draw if icons list is not already drawn - if(this.iconsViewDrawnOnce === false){ - this.iconList = iconsListModule.IconsList.create(); - this.iconList.iconsViewDataObject = that.mainContentData; - this.iconList.element = that.iconViewContainer; - this.iconList.needsDraw = true; - this.iconsViewDrawnOnce = true; - }else{ - this.pickerViews()[this.selectedPickerView].call(this, this.currentURI); - } - this.element.querySelector(".iconViewContainer").style.display = "block"; - } - this.element.querySelector(".treeViewContainer").style.display = "none"; - - //enable selection - if(!evt.target.classList.contains("viewSelected")){ - evt.target.classList.add("viewSelected") - } - if(this.treeView.classList.contains("viewSelected")){ - this.treeView.classList.remove("viewSelected"); - } - } - }, - - handleTreeViewClick : { - value:function(evt){ - - this.selectedPickerView = "treeView"; - - if(this.element.querySelector(".treeViewContainer").style.display === "none"){ - - this.pickerViews()[this.selectedPickerView].call(this, this.currentURI); - - this.element.querySelector(".treeViewContainer").style.display = "block"; - } - this.element.querySelector(".iconViewContainer").style.display = "none"; - - //enable selection - if(!evt.target.classList.contains("viewSelected")){ - evt.target.classList.add("viewSelected") - } - if(this.iconView.classList.contains("viewSelected")){ - this.iconView.classList.remove("viewSelected"); - } - - } - }, - - handlePickerNavDrawTree:{ - value: function(evt){ - //toggle open or close for directory - if(evt.uriType === "directory"){ - this.renderTree(evt.subTreeContainer, evt.uri); - } - } - }, - - handlePickerNavRefreshTreeSegment:{ - value: function(evt){ -// if(this.application.ninja.filePickerController.checkIfStale(evt.uri)){ -// //update tree segment if was stale -// evt.treeSegment.treeViewDataObject = this.application.ninja.filePickerController.prepareContentList(evt.uri, this.pickerModel, true, false); -// } - } - }, - - handleResultsAreaClick: { - value:function(evt){ - //console.log("### clicked right-top"); - if((evt.target.querySelectorAll(".icon").length > 1) - || (evt.target.querySelectorAll(".atreeItem").length > 1)){//not clicked on an icon - //console.log("@@ clicked in empty area"); - this.clearSelection(); - } - } - }, - - handlePickerNavClick:{ - value: function(evt){ - //console.log("### clicked picker"); - this.closeDropdowns(evt.target); - } - }, - - getComputedWidth:{ - value: function(element){ - var calculatedWidth = "0px"; - var orginalDisplay = element.style.display; - var originalVisibility = element.style.visibility; - element.style.display = "block"; - element.style.visibility = "hidden"; - calculatedWidth = window.getComputedStyle(element, null).getPropertyValue("width"); - element.style.display = orginalDisplay; - element.style.visibility = originalVisibility; - return calculatedWidth; - } - }, - - cleanup:{ - writable:false, - enumerable:true, - value:function(){ - //clear memory - TODO:check for more memory leaks - this.pickerModel = null; - this.application.ninja.filePickerController._directoryContentCache = {}; - //remove listeners - this.element.removeEventListener("openFolder", this, false);//add icon double click event listener to reload iconList with new set of data - this.element.removeEventListener("selectedItem", this, false);//for single selection only - this.element.removeEventListener("showMetadata", this, false);//show metadata on hover of icon - this.element.removeEventListener("updateMetadata", this, false);//show metadata on click of icon - //this.addressGo.removeEventListener("click", this, false); - this.addressBarUri.removeEventListener("keydown", this, false); - this.refreshButton.removeEventListener("click", this, false);//refresh - gets from file system directly - this.backArrow.removeEventListener("click", this, false); - this.forwardArrow.removeEventListener("click",