From 3a754133dbc138390503341fd2e9beba3e43aa4b Mon Sep 17 00:00:00 2001 From: Jose Antonio Marquez Date: Fri, 27 Jan 2012 12:05:17 -0800 Subject: Merged old FileIO --- .../new-file-options-navigator.css | 107 ++++-- .../new-file-options-navigator.html | 45 ++- .../new-file-options-navigator.js | 375 +++++++++++++++++---- 3 files changed, 439 insertions(+), 88 deletions(-) mode change 100644 => 100755 js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.css mode change 100644 => 100755 js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.html mode change 100644 => 100755 js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.js (limited to 'js/io/workflow/newFileDialog/new-file-options-navigator.reel') diff --git a/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.css b/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.css old mode 100644 new mode 100755 index 01f0885e..7ef6d2ce --- a/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.css +++ b/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.css @@ -6,11 +6,21 @@ .newfile{ font-size:12px; - width:510px; - height:500px; + width:650px; + height:350px; padding-left: 15px; - padding-top: 15px; + padding-bottom:25px; background-color:#313131; + color:#ffffff; +} + +.newfile .title{ + font-size:14px; + height:15px; + padding:5px; + text-align: center; + font-weight: bold; + color: #C1C1C1; } .newfile .container{ @@ -23,7 +33,7 @@ float:left; width:27%; height:90%; - overflow-x:hidden; + overflow-x:auto; overflow-y:auto } @@ -38,24 +48,16 @@ border: 1px groove #000000; overflow: auto; min-height:150px; - height:55%; + height:58%; width:auto; + padding:5px; } .newfile .right-bottom{ border: 1px groove #000000; overflow: auto; - height:45%; - padding: 10px; -} - -.newfile .driversList{ - padding: 3px; - text-align: center; -} - -.newfile .driversList:hover{ - cursor:pointer; + height:42%; + padding: 15px; } .newfile .projectTypeHeader{ @@ -65,18 +67,18 @@ font-weight: bold; } - - -.newfile .highlighted{ - background-color: #343434; -} - - .newfile .buttons{ float:right; margin-top: 7px; } +.newfile .errorMsg{ + float:left; + margin-top: 7px; +} +.newfile .errorMsg span{ + color: #BF3B3B; +} .newfile .disable{ color:#5f5f5f; @@ -91,5 +93,64 @@ font-weight: bold; } +.newfile .atreeItem .name{ + padding: 3px; +} + +.newfile .atreeItem .selected{ + background-color: #3f3f3f; +} +.newfile .icon .selected{ + background-color: #7f7f7f; +} +.newfile .icon{ + height:90px; +} + +.newfile .icon .iconLabel{ + margin-top:4px; + max-width:90%; + white-space: normal; + padding-bottom:4px; + overflow: visible; +} + +.newfile .icon .iconImg{ + margin-left:25px; +} + +.newfile .okButton{ + 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; +} + +.newfile .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; +} + +.newfile input[type="button"]:disabled{ + background-color: #a1a1a1; + border:2px solid #a1a1a1; + background-image:none; + cursor:auto; +} \ No newline at end of file diff --git a/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.html b/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.html old mode 100644 new mode 100755 index a022f841..36e937e0 --- a/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.html +++ b/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.html @@ -10,6 +10,43 @@ - - -
-
Create New File
-
-
File Type
-
-
-
-
-
-
-
-
templateIcon
-
selections
-
-
-
-
- - -
-
- - \ No newline at end of file diff --git a/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.js b/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.js deleted file mode 100644 index 7702b1a2..00000000 --- a/js/io/workflow/newFileDialog/new-file-options-navigator.reel/new-file-options-navigator.js +++ /dev/null @@ -1,378 +0,0 @@ -/* -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"), - newFileLocationSelectionModule = require("js/io/workflow/newFileDialog/new-file-workflow-controller"), - fileUtils = require("js/io/utils/file-utils").FileUtils; - -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); - - if(!!this.newFileModel.defaultProjectType){ - var templates = this.newFileModel.prepareContents(this.newFileModel.defaultProjectType); - this.templateList = iconsListModule.IconsList.create(); - this.templateList.iconsViewDataObject = templates; - this.templateList.element = this.templateIcons; - this.templateList.needsDraw = true; - - - this.selectedProjectType = {"uri":this.newFileModel.defaultProjectType, "element":null}; - } - } - - }, - - /** - * 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"); - } - - //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; - }else{ - this.templateList = iconsListModule.IconsList.create(); - this.templateList.iconsViewDataObject = templates; - 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(); - - } - } - }, - - handleCancelButtonAction :{ - value:function(evt){ - //clean up memory - this.cleanup(); - - if(this.popup){ - this.popup.hide(); - } - - } - }, - - handleOkButtonAction:{ - value: function(evt){ - var selectedProjectTypeID = this.selectedProjectType.uri, - templateID = this.selectedTemplate.uri, - projectName = this.newFileLocation.newFileName.value, - projectDirectory = this.newFileLocation.fileInputField.newFileDirectory.value, - projectWidth = this.newFileLocation.templateWidth, - projectHeight = this.newFileLocation.templateHeight, - - - selectionlog= "selectedProjectTypeID="+selectedProjectTypeID +"\n"+ - "templateID="+templateID+ "\n"+ - "projectName="+projectName+"\n"+ - "projectDirectory="+projectDirectory+"\n"+ - "projectWidth="+projectWidth+"\n"+ - "projectHeight="+projectHeight; - - if(!!this.selectedProjectType && !!this.selectedTemplate - && this.isValidFileName(projectName) && this.isValidUri(projectDirectory) - && !this.checkFileExists(projectName, projectDirectory, this.selectedProjectType) - ){ - this.error.innerHTML=""; - console.log("$$$ new file selections: \n" + selectionlog); - if(!!this.newFileModel.callback && !!this.newFileModel.callbackScope){//inform document-controller if save successful - this.newFileModel.callback.call(this.newFileModel.callbackScope, {"selectedProjectTypeID":selectedProjectTypeID, - "templateID":templateID, - "projectName": projectName, - "projectDirectory":projectDirectory, - "projectWidth":projectWidth, - "projectHeight":projectHeight});//document-controller api - }else{ - //send selection event - var newFileSelectionEvent = document.createEvent("Events"); - newFileSelectionEvent.initEvent("createNewFile", false, false); - newFileSelectionEvent.newFileOptions = {"selectedProjectTypeID":selectedProjectTypeID, - "templateID":templateID, - "projectName": projectName, - "projectDirectory":projectDirectory, - "projectWidth":projectWidth, - "projectHeight":projectHeight}; - this.eventManager.dispatchEvent(newFileSelectionEvent); - } - //store last selected project type - var dataStore = window.sessionStorage; - try { - dataStore.setItem('lastSelectedProjectType',escape(""+selectedProjectTypeID)); - } - catch(e){ - if(e.code == 22){ - dataStore.clear(); - } - } - - this.cleanup();//clear up any unnecessary memory - - if(this.popup){ - this.popup.hide(); - } - }else{ - if(this.error.innerHTML !== ""){ - this.showError("! Project Template, Name and Directory should be valid."); - } - //disable ok - if(!this.okButton.hasAttribute("disabled")){ - this.okButton.setAttribute("disabled", "true"); - } - } - } - }, - - handleNewFileDirectorySet:{ - value:function(evt){ - if(!!evt._event.newFileDirectory){ - this.newFileDirectory = evt._event.newFileDirectory; - if(this.isValidUri(this.newFileDirectory)){ - this.enableOk(); - } - } - } - }, - - handleNewFileNameSet:{ - value:function(evt){ - if(!!evt._event.newFileName){ - this.newFileName = evt._event.newFileName; - if(this.isValidFileName(this.newFileName)){ - this.enableOk(); - } - } - } - }, - - highlightSelection:{ - value: function(el, selectionType, uri){ - var elem; - //clear previous selection - if(selectionType === "projectType"){ - if((!!this.selectedProjectType) && (uri !== this.selectedProjectType.uri)){ - if(!!this.selectedProjectType.element){ - this.selectedProjectType.element.classList.remove("selected"); - }else{ - //find the selected element - elem = document.querySelector(".projectTypeTree").querySelector(".selected"); - if(!!elem){ - elem.classList.remove("selected"); - } - } - el.classList.add("selected"); - }else if(this.selectedProjectType === null){ - el.classList.add("selected"); - } - }else if(selectionType === "template"){ - if((!!this.selectedTemplate) && (uri !== this.selectedTemplate.element)){ - if(!!this.selectedTemplate.element){this.selectedTemplate.element.classList.remove("selected");} - el.classList.add("selected"); - }else if(this.selectedTemplate === null){ - el.classList.add("selected"); - } - } - - } - }, - - enableOk:{ - value: function(){ - var status = false; - - if(!!this.selectedProjectType && !!this.selectedTemplate - && this.isValidFileName(this.newFileName) && this.isValidUri(this.newFileDirectory) - && !this.checkFileExists(this.newFileName, this.newFileDirectory, this.selectedProjectType) - ){ - status = true; - this.okButton.removeAttribute("disabled"); - this.error.innerHTML=""; - } - return status; - } - }, - - cleanup:{ - value:function(){ - var that = this; - - this.newFileName = ""; - this.newFileDirectory = ""; - this.selectedProjectType = null; - this.selectedTemplate = null; - - //remove event listeners - this.element.removeEventListener("drawTree", function(evt){that.handleNewFileNavDrawTree(evt);}, false); - this.element.removeEventListener("selectedItem", function(evt){that.handleNewFileNavSelectedItem(evt);}, false);//for single selection only - this.eventManager.removeEventListener("newFileDirectorySet", function(evt){that.handleNewFileDirectorySet(evt);}, false); - this.eventManager.removeEventListener("newFileNameSet", function(evt){that.handleNewFileNameSet(evt);}, false); - } - }, - - isValidUri:{ - value: function(uri){ - var status= fileUtils.isValidUri(uri); - if(uri !== ""){ - if(!status){ - this.showError("! Invalid directory."); - } - } - return status; - } - }, - isValidFileName:{ - value: function(fileName){ - var status = fileUtils.isValidFileName(fileName); - if(fileName !== ""){ - if(!status){ - this.showError("! Invalid file name."); - } - } - return status; - } - }, - checkFileExists:{ - value: function(fileUri, folderUri, fileType){ - var status= fileUtils.checkFileExists(fileUri, folderUri, fileType); - if(status){ - this.showError("! File already exists."); - } - return status; - } - }, - showError:{ - value:function(errorString){ - this.error.innerHTML = ""; - this.error.innerHTML=errorString; - //disable ok - if(!this.okButton.hasAttribute("disabled")){ - this.okButton.setAttribute("disabled", "true"); - } - } - } - -}); \ No newline at end of file -- cgit v1.2.3