diff options
Diffstat (limited to 'js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js')
-rw-r--r-- | js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js | 81 |
1 files changed, 46 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..d7a19c14 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 | */ |
@@ -244,6 +245,9 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
244 | this.resultsArea.addEventListener("click", function(evt){that.handleResultsAreaClick(evt);}, false); | 245 | this.resultsArea.addEventListener("click", function(evt){that.handleResultsAreaClick(evt);}, false); |
245 | this.element.addEventListener("click", function(evt){that.handlePickerNavClick(evt);}, false); | 246 | this.element.addEventListener("click", function(evt){that.handlePickerNavClick(evt);}, false); |
246 | 247 | ||
248 | this.okButton.addEventListener("click", function(evt){that.handleOkButtonAction(evt);}, false); | ||
249 | this.cancelButton.addEventListener("click", function(evt){that.handleCancelButtonAction(evt);}, false); | ||
250 | |||
247 | //ready to show picker now | 251 | //ready to show picker now |
248 | this.element.style.visibility = "visible"; | 252 | this.element.style.visibility = "visible"; |
249 | } | 253 | } |
@@ -263,11 +267,11 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
263 | } | 267 | } |
264 | }, | 268 | }, |
265 | 269 | ||
266 | //TODO: add uri pattern validation | 270 | cleanupUri:{ |
267 | validateUri:{ | ||
268 | writable: false, | 271 | writable: false, |
269 | enumerable:true, | 272 | enumerable:true, |
270 | value: function(folderUri){ | 273 | value: function(folderUri){ |
274 | 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 | 275 | //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 !== "/")){ | 276 | if(((folderUri.charAt(folderUri.length - 1) === "/") || (folderUri.charAt(folderUri.length - 1) === "\\")) && (folderUri !== "/")){ |
273 | folderUri = folderUri.substring(0, (folderUri.length - 1)); | 277 | folderUri = folderUri.substring(0, (folderUri.length - 1)); |
@@ -324,7 +328,7 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
324 | writable:false, | 328 | writable:false, |
325 | enumerable:true, | 329 | enumerable:true, |
326 | value:function(uri){ | 330 | value:function(uri){ |
327 | uri = this.validateUri(uri); | 331 | uri = this.cleanupUri(uri); |
328 | var arr = []; | 332 | var arr = []; |
329 | var temp = new String(uri); | 333 | var temp = new String(uri); |
330 | while(temp.indexOf("/") != -1){ | 334 | while(temp.indexOf("/") != -1){ |
@@ -532,8 +536,6 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
532 | this.refreshButton.identifier = "refreshButton"; | 536 | this.refreshButton.identifier = "refreshButton"; |
533 | this.backArrow.identifier = "backArrow"; | 537 | this.backArrow.identifier = "backArrow"; |
534 | this.forwardArrow.identifier = "forwardArrow"; | 538 | this.forwardArrow.identifier = "forwardArrow"; |
535 | this.okButton.identifier = "okButton"; | ||
536 | this.cancelButton.identifier = "cancelButton"; | ||
537 | this.iconView.identifier = "iconView"; | 539 | this.iconView.identifier = "iconView"; |
538 | this.treeView.identifier = "treeView"; | 540 | this.treeView.identifier = "treeView"; |
539 | this.resultsArea.identifier = "resultsArea"; | 541 | this.resultsArea.identifier = "resultsArea"; |
@@ -622,6 +624,16 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
622 | this.currentSelectedNode = evt.target; | 624 | this.currentSelectedNode = evt.target; |
623 | 625 | ||
624 | }else{ | 626 | }else{ |
627 | |||
628 | |||
629 | //test: highlight non-selectable icons too | ||
630 | if(!evt.target.classList.contains("selected")){ | ||
631 | evt.target.classList.add("selected"); | ||
632 | } | ||
633 | this.currentSelectedNode = evt.target; | ||
634 | //end- test | ||
635 | |||
636 | |||
625 | //disable OK | 637 | //disable OK |
626 | if(!this.okButton.hasAttribute("disabled")){ | 638 | if(!this.okButton.hasAttribute("disabled")){ |
627 | this.okButton.setAttribute("disabled", "true"); | 639 | this.okButton.setAttribute("disabled", "true"); |
@@ -651,7 +663,7 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
651 | 663 | ||
652 | if(this.addressBarUri.value !== ""){ | 664 | if(this.addressBarUri.value !== ""){ |
653 | var uri = this.addressBarUri.value; | 665 | var uri = this.addressBarUri.value; |
654 | uri = this.validateUri(uri); | 666 | uri = this.cleanupUri(uri); |
655 | 667 | ||
656 | this.currentURI = uri; | 668 | this.currentURI = uri; |
657 | var status = this.pickerViews()[this.selectedPickerView].call(this, uri);//dynamically calls the update function of the current picker view | 669 | var status = this.pickerViews()[this.selectedPickerView].call(this, uri);//dynamically calls the update function of the current picker view |
@@ -676,7 +688,7 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
676 | value: function(evt){ | 688 | value: function(evt){ |
677 | if(evt.keyCode === 13 ){ | 689 | if(evt.keyCode === 13 ){ |
678 | var uri = this.addressBarUri.value; | 690 | var uri = this.addressBarUri.value; |
679 | uri = this.validateUri(uri); | 691 | uri = this.cleanupUri(uri); |
680 | 692 | ||
681 | this.currentURI = uri; | 693 | this.currentURI = uri; |
682 | 694 | ||
@@ -699,7 +711,7 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
699 | handleRefreshButtonClick:{ | 711 | handleRefreshButtonClick:{ |
700 | value:function(evt){ | 712 | value:function(evt){ |
701 | var uri = this.addressBarUri.value; | 713 | var uri = this.addressBarUri.value; |
702 | uri = this.validateUri(uri); | 714 | uri = this.cleanupUri(uri); |
703 | 715 | ||
704 | var status = this.pickerViews()[this.selectedPickerView].call(this, uri, false);//dynamically calls the update function of the current picker view | 716 | var status = this.pickerViews()[this.selectedPickerView].call(this, uri, false);//dynamically calls the update function of the current picker view |
705 | 717 | ||
@@ -768,22 +780,23 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
768 | } | 780 | } |
769 | }, | 781 | }, |
770 | 782 | ||
771 | handleOkButtonClick : { | 783 | handleOkButtonAction : { |
772 | value: function(evt){ | 784 | value: function(evt){ |
773 | alert("selected "+ this.selectedItems.toString()); | 785 | console.log("$$$ File Picker : selected "+ this.selectedItems.toString()); |
774 | var success = true; | 786 | var success = true; |
775 | if(!!this.pickerModel.callback && (this.selectedItems.length > 0)){//call the callback if it is available | 787 | if(!!this.pickerModel.callback && !!this.pickerModel.callbackScope && (this.selectedItems.length > 0)){//call the callback if it is available |
776 | try{ | 788 | try{ |
777 | this.pickerModel.callback({"uri":this.selectedItems}); | 789 | this.pickerModel.callback.call(this.pickerModel.callbackScope, {"uri":this.selectedItems}); |
778 | }catch(e){ | 790 | }catch(e){ |
779 | success = false; | 791 | success = false; |
780 | console.log("[ERROR] File IO failed to open URIs: "+ this.selectedItems.toString()); | 792 | console.log("[Error] Failed to open "+ this.selectedItems.toString()); |
793 | console.log(e.stack); | ||
781 | } | 794 | } |
782 | }else{//else send an event with the selected files | 795 | }else{//else send an event with the selected files |
783 | var pickerSelectionEvent = document.createEvent("Events"); | 796 | var pickerSelectionEvent = document.createEvent("Events"); |
784 |