diff options
Diffstat (limited to 'js/components/ui/FilePicker/pickerNavigator.reel')
-rwxr-xr-x[-rw-r--r--] | js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css | 30 | ||||
-rwxr-xr-x[-rw-r--r--] | js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html | 31 | ||||
-rwxr-xr-x[-rw-r--r--] | js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js | 67 |
3 files changed, 92 insertions, 36 deletions
diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css index 2d9f1189..61328ce0 100644..100755 --- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css +++ b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.css | |||
@@ -195,6 +195,36 @@ | |||
195 | 195 | ||
196 | .picker .okButton{ | 196 | .picker .okButton{ |
197 | margin-right:25px; | 197 | margin-right:25px; |
198 | -webkit-box-align: center; | ||
199 | text-align: center; | ||
200 | cursor: default; | ||
201 | padding: 0px 6px 0px; | ||
202 | border:2px solid #d1d1d1; | ||
203 | background-color: #e1e1e1; | ||
204 | box-sizing: border-box; | ||
205 | border-radius:10px; | ||
206 | background-image: -webkit-linear-gradient(bottom, #e1e1e1 13%, #d1d1d1 58%, #e1e1e1 40%); | ||
207 | cursor:pointer; | ||
208 | } | ||
209 | |||
210 | .picker .cancelButton{ | ||
211 | -webkit-box-align: center; | ||
212 | text-align: center; | ||
213 | cursor: default; | ||
214 | padding: 0px 6px 0px; | ||
215 | border:2px solid #d1d1d1; | ||
216 | background-color: #e1e1e1; | ||
217 | box-sizing: border-box; | ||
218 | border-radius:10px; | ||
219 | background-image: -webkit-linear-gradient(bottom, #e1e1e1 13%, #d1d1d1 58%, #e1e1e1 40%); | ||
220 | cursor:pointer; | ||
221 | } | ||
222 | |||
223 | .picker input[type="button"]:disabled{ | ||
224 | background-color: #a1a1a1; | ||
225 | border:2px solid #a1a1a1; | ||
226 | background-image:none; | ||
227 | cursor:auto; | ||
198 | } | 228 | } |
199 | 229 | ||
200 | 230 | ||
diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html index bf421247..b4aee4b2 100644..100755 --- a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html +++ b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.html | |||
@@ -10,6 +10,35 @@ | |||
10 | <link rel="stylesheet" type="text/css" href="pickerNavigator.css"> | 10 | <link rel="stylesheet" type="text/css" href="pickerNavigator.css"> |
11 | <script type="text/montage-serialization"> | 11 | <script type="text/montage-serialization"> |
12 | { | 12 | { |
13 | "okButton": { | ||
14 | "module": "montage/ui/button.reel", | ||
15 | "name": "Button", | ||
16 | "properties": { | ||
17 | "element": {"#": "okButton"}, | ||
18 | "identifier": "okButton" | ||
19 | }, | ||
20 | "listeners": [ | ||
21 | { | ||
22 | "type": "action", | ||
23 | "listener": {"@": "owner"} | ||
24 | } | ||
25 | ] | ||
26 | }, | ||
27 | |||
28 | "cancelButton": { | ||
29 | "module": "montage/ui/button.reel", | ||
30 | "name": "Button", | ||
31 | "properties": { | ||
32 | "element": {"#": "cancelButton"}, | ||
33 | "identifier": "cancelButton" | ||
34 | }, | ||
35 | "listeners": [ | ||
36 | { | ||
37 | "type": "action", | ||
38 | "listener": {"@": "owner"} | ||
39 | } | ||
40 | ] | ||
41 | }, | ||
13 | 42 | ||
14 | "owner":{ | 43 | "owner":{ |
15 | "module": "js/components/ui/FilePicker/pickerNavigator.reel", | 44 | "module": "js/components/ui/FilePicker/pickerNavigator.reel", |
@@ -71,7 +100,7 @@ | |||
71 | <input id="cancelButton" type="button" value="CANCEL" class="cancelButton" /> | 100 | <input id="cancelButton" type="button" value="CANCEL" class="cancelButton" /> |
72 | <input id="okButton" disabled="true" type="button" value="OK" class="okButton" /> | 101 | <input id="okButton" disabled="true" type="button" value="OK" class="okButton" /> |
73 | </div> | 102 | </div> |
74 | <div id="filters" class="filters"> | 103 | <div id="filters" class="filters" style="display:block;"> |
75 | <div class="dropdown hide"></div> | 104 | <div class="dropdown hide"></div> |
76 | <span class="dropdownArrow">▼</span> | 105 | <span class="dropdownArrow">▼</span> |
77 | <span id="filterVal" class="filterVal">*.*</span> | 106 | <span id="filterVal" class="filterVal">*.*</span> |
diff --git a/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js b/js/components/ui/FilePicker/pickerNavigator.reel/pickerNavigator.js index 299d44f5..eec7c8e8 100644..100755 --- 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"; |
@@ -651,7 +650,7 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, { | |||
651 | 650 | ||
652 | if(this.addressBarUri.value !== ""){ | 651 | if(this.addressBarUri.value !== ""){ |
653 | var uri = this.addressBarUri.value; | 652 | var uri = this.addressBarUri.value; |
654 | uri = this.validateUri(uri); |