diff options
Diffstat (limited to 'js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js')
-rw-r--r-- | js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js | 78 |
1 files changed, 43 insertions, 35 deletions
diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js index 299d44f5..268ec41a 100644 --- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js +++ b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js | |||
@@ -209,26 +209,27 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
209 | this.refreshButton.addEventListener("click", this, false);//refresh - gets from file system directly | 209 | this.refreshButton.addEventListener("click", this, false);//refresh - gets from file system directly |
210 | this.backArrow.addEventListener("click", this, false); | 210 | this.backArrow.addEventListener("click", this, false); |
211 | this.forwardArrow.addEventListener("click", this, false); | 211 | this.forwardArrow.addEventListener("click", this, false); |
212 | this.okButton.addEventListener("click", this, false); | ||
213 | this.cancelButton.addEventListener("click", this, false); | ||
214 | |||
215 | //populate filters | ||
216 | var filtersDD = this.element.querySelector(".filters .dropdown"); | ||
217 | if(!!this.pickerModel.fileFilters | ||
218 | && (typeof this.pickerModel.fileFilters === "object") | ||
219 | && ('splice' in this.pickerModel.fileFilters) | ||
220 | && ('join' in this.pickerModel.fileFilters)){ | ||
221 | this.pickerModel.fileFilters.forEach(function(aFilter){ | ||
222 | var newDiv = document.createElement("div"); | ||
223 | newDiv.innerHTML = aFilter; | ||
224 | filtersDD.appendChild(newDiv); | ||
225 | newDiv.addEventListener("click", function(evt){that.handleFilterClick(evt, aFilter, filtersDD)}, false); | ||
226 | }, this); | ||
227 | } | ||
228 | 212 | ||
229 | var renderedWidth = this.getComputedWidth(filtersDD); | 213 | //populate filters if in file selection mode |
230 | this.filters.style.width = "" + (parseInt((renderedWidth.substring(0, (renderedWidth.length - 2)))) + 20) + "px"; | 214 | if(this.pickerModel.inFileMode === true){ |
215 | var filtersDD = this.element.querySelector(".filters .dropdown"); | ||
216 | if(!!this.pickerModel.fileFilters | ||
217 | && (typeof this.pickerModel.fileFilters === "object") | ||
218 | && ('splice' in this.pickerModel.fileFilters) | ||
219 | && ('join' in this.pickerModel.fileFilters)){ | ||
220 | this.pickerModel.fileFilters.forEach(function(aFilter){ | ||
221 | var newDiv = document.createElement("div"); | ||
222 | newDiv.innerHTML = aFilter; | ||
223 | filtersDD.appendChild(newDiv); | ||
224 | newDiv.addEventListener("click", function(evt){that.handleFilterClick(evt, aFilter, filtersDD)}, false); | ||
225 | }, this); | ||
226 | } | ||
231 | 227 | ||
228 | var renderedWidth = this.getComputedWidth(filtersDD); | ||
229 | this.filters.style.width = "" + (parseInt((renderedWidth.substring(0, (renderedWidth.length - 2)))) + 20) + "px"; | ||
230 | }else{ | ||
231 | this.filters.style.display = "none"; | ||
232 | } | ||
232 | /** | 233 | /** |
233 | * attach click event listeners to the addressbar dropdown arrows | 234 | * attach click event listeners to the addressbar dropdown arrows |
234 | */ | 235 | */ |
@@ -263,11 +264,11 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
263 | } | 264 | } |
264 | }, | 265 | }, |
265 | 266 | ||
266 | //TODO: add uri pattern validation | 267 | cleanupUri:{ |
267 | validateUri:{ | ||
268 | writable: false, | 268 | writable: false, |
269 | enumerable:true, | 269 | enumerable:true, |
270 | value: function(folderUri){ | 270 | value: function(folderUri){ |
271 | folderUri = folderUri.replace(/^\s+|\s+$/g,""); // strip any leading or trailing spaces | ||
271 | //remove unnecessary / from end - for Win and Mac .... don't trim for the root | 272 | //remove unnecessary / from end - for Win and Mac .... don't trim for the root |
272 | if(((folderUri.charAt(folderUri.length - 1) === "/") || (folderUri.charAt(folderUri.length - 1) === "\\")) && (folderUri !== "/")){ | 273 | if(((folderUri.charAt(folderUri.length - 1) === "/") || (folderUri.charAt(folderUri.length - 1) === "\\")) && (folderUri !== "/")){ |
273 | folderUri = folderUri.substring(0, (folderUri.length - 1)); | 274 | folderUri = folderUri.substring(0, (folderUri.length - 1)); |
@@ -324,7 +325,7 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
324 | writable:false, | 325 | writable:false, |
325 | enumerable:true, | 326 | enumerable:true, |
326 | value:function(uri){ | 327 | value:function(uri){ |
327 | uri = this.validateUri(uri); | 328 | uri = this.cleanupUri(uri); |
328 | var arr = []; | 329 | var arr = []; |
329 | var temp = new String(uri); | 330 | var temp = new String(uri); |
330 | while(temp.indexOf("/") != -1){ | 331 | while(temp.indexOf("/") != -1){ |
@@ -532,8 +533,6 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
532 | this.refreshButton.identifier = "refreshButton"; | 533 | this.refreshButton.identifier = "refreshButton"; |
533 | this.backArrow.identifier = "backArrow"; | 534 | this.backArrow.identifier = "backArrow"; |
534 | this.forwardArrow.identifier = "forwardArrow"; | 535 | this.forwardArrow.identifier = "forwardArrow"; |
535 | this.okButton.identifier = "okButton"; | ||
536 | this.cancelButton.identifier = "cancelButton"; | ||
537 | this.iconView.identifier = "iconView"; | 536 | this.iconView.identifier = "iconView"; |
538 | this.treeView.identifier = "treeView"; | 537 | this.treeView.identifier = "treeView"; |
539 | this.resultsArea.identifier = "resultsArea"; | 538 | this.resultsArea.identifier = "resultsArea"; |
@@ -622,6 +621,16 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
622 | this.currentSelectedNode = evt.target; | 621 | this.currentSelectedNode = evt.target; |
623 | 622 | ||
624 | }else{ | 623 | }else{ |
624 | |||
625 | |||
626 | //test: highlight non-selectable icons too | ||
627 | if(!evt.target.classList.contains("selected")){ | ||
628 | evt.target.classList.add("selected"); | ||
629 | } | ||
630 | this.currentSelectedNode = evt.target; | ||
631 | //end- test | ||
632 | |||
633 | |||
625 | //disable OK | 634 | //disable OK |
626 | if(!this.okButton.hasAttribute("disabled")){ | 635 | if(!this.okButton.hasAttribute("disabled")){ |
627 | this.okButton.setAttribute("disabled", "true"); | 636 | this.okButton.setAttribute("disabled", "true"); |
@@ -651,7 +660,7 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
651 | 660 | ||
652 | if(this.addressBarUri.value !== ""){ | 661 | if(this.addressBarUri.value !== ""){ |
653 | var uri = this.addressBarUri.value; | 662 | var uri = this.addressBarUri.value; |
654 | uri = this.validateUri(uri); | 663 | uri = this.cleanupUri(uri); |
655 | 664 | ||
656 | this.currentURI = uri; | 665 | this.currentURI = uri; |
657 | var status = this.pickerViews()[this.selectedPickerView].call(this, uri);//dynamically calls the update function of the current picker view | 666 | var status = this.pickerViews()[this.selectedPickerView].call(this, uri);//dynamically calls the update function of the current picker view |
@@ -676,7 +685,7 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
676 | value: function(evt){ | 685 | value: function(evt){ |
677 | if(evt.keyCode === 13 ){ | 686 | if(evt.keyCode === 13 ){ |
678 | var uri = this.addressBarUri.value; | 687 | var uri = this.addressBarUri.value; |
679 | uri = this.validateUri(uri); | 688 | uri = this.cleanupUri(uri); |
680 | 689 | ||
681 | this.currentURI = uri; | 690 | this.currentURI = uri; |
682 | 691 | ||
@@ -699,7 +708,7 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
699 | handleRefreshButtonClick:{ | 708 | handleRefreshButtonClick:{ |
700 | value:function(evt){ | 709 | value:function(evt){ |
701 | var uri = this.addressBarUri.value; | 710 | var uri = this.addressBarUri.value; |
702 | uri = this.validateUri(uri); | 711 | uri = this.cleanupUri(uri); |
703 | 712 | ||
704 | var status = this.pickerViews()[this.selectedPickerView].call(this, uri, false);//dynamically calls the update function of the current picker view | 713 | var status = this.pickerViews()[this.selectedPickerView].call(this, uri, false);//dynamically calls the update function of the current picker view |
705 | 714 | ||
@@ -768,22 +777,23 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
768 | } | 777 | } |
769 | }, | 778 | }, |
770 | 779 | ||
771 | handleOkButtonClick : { | 780 | handleOkButtonAction : { |
772 | value: function(evt){ | 781 | value: function(evt){ |
773 | alert("selected "+ this.selectedItems.toString()); | 782 | console.log("$$$ File Picker : selected "+ this.selectedItems.toString()); |
774 | var success = true; | 783 | var success = true; |
775 | if(!!this.pickerModel.callback && (this.selectedItems.length > 0)){//call the callback if it is available | 784 | if(!!this.pickerModel.callback && !!this.pickerModel.callbackScope && (this.selectedItems.length > 0)){//call the callback if it is available |
776 | try{ | 785 | try{ |
777 | this.pickerModel.callback({"uri":this.selectedItems}); | 786 | this.pickerModel.callback.call(this.pickerModel.callbackScope, {"uri":this.selectedItems}); |
778 | }catch(e){ | 787 | }catch(e){ |
779 | success = false; | 788 | success = false; |
780 | console.log("[ERROR] File IO failed to open URIs: "+ this.selectedItems.toString()); | 789 | console.log("[Error] Failed to open "+ this.selectedItems.toString()); |
790 | console.log(e.stack); | ||
781 | } | 791 | } |
782 | }else{//else send an event with the selected files | 792 | }else{//else send an event with the selected files |
783 | var pickerSelectionEvent = document.createEvent("Events"); | 793 | var pickerSelectionEvent = document.createEvent("Events"); |
784 | pickerSelectionEvent.initEvent("pickerSelectionsDone", false, false); | 794 | pickerSelectionEvent.initEvent("pickerSelectionsDone", false, false); |
785 | pickerSelectionEvent.selectedItems = this.selectedItems; | 795 | pickerSelectionEvent.selectedItems = this.selectedItems; |
786 | document.dispatchEvent(pickerSelectionEvent);//TODO: use eventManager when it is available | 796 | this.eventManager.dispatchEvent(pickerSelectionEvent); |
787 | } | 797 | } |
788 | 798 | ||
789 | //store last opened/saved folder, and view after IO is successful | 799 | //store last opened/saved folder, and view after IO is successful |
@@ -813,7 +823,7 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
813 | } | 823 | } |
814 | }, | 824 | }, |
815 | 825 | ||