1 files changed, 442 insertions, 0 deletions

diff --git a/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.js b/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.js
new file mode 100644
index 00000000..11b322fe
--- /dev/null
+++ b/js/io/ui/new-file-dialog/new-file-options-navigator.reel/new-file-options-navigator.js
@@ -0,0 +1,442 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+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"),
+    newFileLocationSelectionModule = require("js/io/ui/new-file-dialog/new-file-workflow-controller");
+
+var NewFileOptionsNavigator = exports.NewFileOptionsNavigator = Montage.create(Component, {
+
+    newFileModel: {
+        writable: true,
+        enumerable:false,
+        value:null
+    },
+    selectedProjectType:{
+        writable: true,
+        enumerable:false,
+        value:null
+    },
+    selectedTemplate:{
+        writable: true,
+        enumerable:false,
+        value:null
+    },
+    newFileName:{
+        writable:true,
+        enumerable:false,
+        value:""
+    },
+    newFileDirectory:{
+        writable:true,
+        enumerable:false,
+        value:""
+    },
+    templateWidth:{
+        writable:true,
+        enumerable:false,
+        value:"0 px"
+    },
+    templateHeight:{
+        writable:true,
+        enumerable:false,
+        value:"0 px"
+    },
+    willDraw: {
+        enumerable: false,
+        value: function() {}
+    },
+    draw: {
+        enumerable: false,
+        value: function() {}
+    },
+    didDraw: {
+        enumerable: false,
+        value: function() {
+            var that = this;
+
+            this.templateList = null;
+
+            //draw left nav project type tree
+            var tree = treeModule.Tree.create();
+            tree.showIcons = false;
+            tree.expandTreeAfterDraw = true;
+            tree.directoryBold = true;
+            tree.highlightedUri = this.newFileModel.defaultProjectType;
+            tree.treeViewDataObject = this.newFileModel.prepareContents("categories");
+            tree.element = this.projectTypeTree;
+            tree.needsDraw = true;
+
+            //highlight defaultProjectType
+
+            this.addIdentifiers();
+
+            this.element.addEventListener("drawTree", function(evt){that.handleNewFileNavDrawTree(evt);}, false);
+            this.element.addEventListener("selectedItem", function(evt){that.handleNewFileNavSelectedItem(evt);}, false);//for single selection only
+            this.eventManager.addEventListener("newFileDirectorySet", function(evt){that.handleNewFileDirectorySet(evt);}, false);
+            this.eventManager.addEventListener("newFileNameSet", function(evt){that.handleNewFileNameSet(evt);}, false);
+
+            this.okButton.addEventListener("click", function(evt){that.handleOkButtonAction(evt);}, false);
+            this.cancelButton.addEventListener("click", function(evt){that.handleCancelButtonAction(evt);}, false);
+
+            if(!!this.newFileModel.defaultProjectType){
+                var templates = this.newFileModel.prepareContents(this.newFileModel.defaultProjectType);
+                this.templateList = iconsListModule.IconsList.create();
+                this.templateList.iconsViewDataObject = templates;
+                if(templates.length >0){
+                    this.templateList.selected = templates[0].uri;
+                }
+                this.templateList.element = this.templateIcons;
+                this.templateList.needsDraw = true;
+
+
+                this.selectedProjectType = {"uri":this.newFileModel.defaultProjectType, "element":null};
+            }
+
+            //update file Extension
+            if(!!this.newFileModel.projectTypeData[this.newFileModel.defaultProjectType].fileExtension){
+                var fileExtensionEl = this.element.querySelector(".fileExtension");
+                if(!!fileExtensionEl){
+                    fileExtensionEl.innerHTML = ""+this.newFileModel.projectTypeData[this.newFileModel.defaultProjectType].fileExtension;
+                }
+            }
+        }
+
+    },
+
+    /**
+     * Event Listners
+     */
+
+    addIdentifiers:{
+        value: function(){
+            this.element.identifier = "newFileNav";
+        }
+    },
+
+    handleNewFileNavDrawTree:{
+        value: function(evt){
+                //toggle open or close for directory
+                if((evt.uriType === "directory") && (!!evt.subTreeContainer)){
+                    var tree = treeModule.Tree.create();
+                    tree.showIcons = false;
+                    tree.highlightedUri = this.newFileModel.defaultProjectType;
+                    tree.treeViewDataObject = this.newFileModel.prepareContents(evt.uri);
+                    tree.element = evt.subTreeContainer;
+                    tree.needsDraw = true;
+                }
+            }
+    },
+
+    handleNewFileNavSelectedItem:{
+        value: function(evt){
+            var selectionType =  this.newFileModel.projectTypeData[evt.uri].type;
+            if(evt.target.classList.contains("atreeItemContent") && (selectionType === "file")){//populate templates for project type selection
+                this.highlightSelection(evt.target, "projectType", evt.uri);
+
+                //clear current template selection
+                if((!!this.selectedTemplate) && (this.selectedTemplate.element.classList.contains("selected"))){
+                    this.selectedTemplate.element.classList.remove("selected");
+                }
+
+                //update file Extension
+                if(!!this.newFileModel.projectTypeData[evt.uri].fileExtension){
+                    var fileExtensionEl = this.element.querySelector(".fileExtension");
+                    if(!!fileExtensionEl){
+                        fileExtensionEl.innerHTML = ""+this.newFileModel.projectTypeData[evt.uri].fileExtension;
+                    }
+                }
+
+                //disable ok
+                if(!this.okButton.hasAttribute("disabled")){
+                    this.okButton.setAttribute("disabled", "true");
+                }
+
+                //save project type selection
+                this.selectedProjectType = {"uri":evt.uri, "element":evt.target};
+
+                //render templates
+                var templates = this.newFileModel.prepareContents(evt.uri);
+                if(this.templatesContainer.querySelectorAll(".list").length > 0){
+                    this.templateList.iconsViewDataObject = templates;
+                    if(templates.length >0){
+                        this.templateList.selected = templates[0].uri;
+                    }
+                }else{
+                    this.templateList = iconsListModule.IconsList.create();
+                    this.templateList.iconsViewDataObject = templates;
+                    if(templates.length >0){
+                        this.templateList.selected = templates[0].uri;
+                    }
+                    this.templateList.element = this.templateIcons;
+                    this.templateList.needsDraw = true;
+                }
+
+
+            }
+
+            if(evt.target.classList.contains("icon")){
+                this.highlightSelection(evt.target, "template", evt.uri);
+
+                //save template selection
+                this.selectedTemplate = {"uri":evt.uri, "element":evt.target};
+
+                this.enableOk();
+
+            }