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 --- .../picker-navigator.reel/picker-navigator.css | 253 +++++ .../picker-navigator.reel/picker-navigator.html | 80 ++ .../picker-navigator.reel/picker-navigator.js | 1072 ++++++++++++++++++++ 3 files changed, 1405 insertions(+) create mode 100644 js/io/ui/file-picker/picker-navigator.reel/picker-navigator.css create mode 100755 js/io/ui/file-picker/picker-navigator.reel/picker-navigator.html create mode 100644 js/io/ui/file-picker/picker-navigator.reel/picker-navigator.js (limited to 'js/io/ui/file-picker/picker-navigator.reel') diff --git a/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.css b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.css new file mode 100644 index 00000000..796c283f --- /dev/null +++ b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.css @@ -0,0 +1,253 @@ +/* + 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/io/ui/file-picker/picker-navigator.reel/picker-navigator.html b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.html new file mode 100755 index 00000000..f46068ec --- /dev/null +++ b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.html @@ -0,0 +1,80 @@ + + + + + + + + + + +

+ ◀ + ▶ +

+ + + ▼ + +

+ ¤ + ¥ +

+ +

+ + +

+ + ▼ + *.* +

+ + \ No newline at end of file diff --git a/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.js b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.js new file mode 100644 index 00000000..411386f9 --- /dev/null +++ b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.js @@ -0,0 +1,1072 @@ +/* +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", this, false); + this.iconView.removeEventListener("click", this, false); + this.treeView.removeEventListener("click", this, false); + this.element.removeEventListener("drawTree", this, false); + this.resultsArea.removeEventListener("click", this, false); + this.element.removeEventListener("click", this, false); + + } + } + +}); \ No newline at end of file -- cgit v1.2.3