file manager: added new page functionality, added option to open html file in new tab

src/allplatforms/classes/FileManager.js

@@ -133,6 +133,37 @@ SC.loadPackage({ 'FileManager': {
                 }
                 
             
+            }
+        },
+
+
+        newPage: {
+            comment: 'I open myWindow as a newPage dialog.',
+            code: function(){
+                
+                if ( this.get('activeFileManagerWindow') ) {
+
+                    this.get('activeFileManagerWindow').set({
+                        context: 'newPage',
+                        hasOKandCancelButton: true
+                    });
+
+                } else {
+
+                    SuperGlue.get('windowManager').do('createWindow', {
+                        class: 'FileManagerWindow',
+                        context: 'newPage',
+                        top:    100,
+                        left:   100,
+                        width:  400,
+                        height: 410,
+                        hasOKandCancelButton: true
+                    });
+
+
+                }
+                
+            
             }
         }
 

src/allplatforms/classes/FileManagerWindow.js

@@ -9,10 +9,10 @@ SC.loadPackage({ 'FileManagerWindow': {
         fileManager:  { comment: 'I hold the fileManager to which I am the window.' },
         
         context: { 
-        	comment: 'I hold the context from which I was called ("","saveAs","chooseFile")',
+        	comment: 'I hold the context from which I was called ("","saveAs","chooseFile", "newPage")',
         	transform: function(context) {
 
-        		if ( context == 'saveAs' ) {
+        		if ( context == 'saveAs' || context == 'newPage' ) {
         			
         			this.get('content').querySelector('.sg-filemanager-directory-container').classList.add('nameInput');
 
@@ -21,7 +21,13 @@ SC.loadPackage({ 'FileManagerWindow': {
         			var modalNameInput = document.createElement('input');
         				modalNameInput.setAttribute('type', 'text');
         				modalNameInput.classList.add('sg-modal-name-input');
-        				modalNameInput.setAttribute('value', self.get('originalFileName') );
+        				
+                        if ( context == 'saveAs' ) {
+                            modalNameInput.setAttribute('value', self.get('originalFileName') );
+                        } else if ( context == 'newPage' ) {
+                            modalNameInput.setAttribute('value', 'NewPage.html' );
+                        }
+
         				modalNameInput.addEventListener('keyup', function(evt) {
         					if ( evt.target.value.length >= 1 ) {
                         		self.set({ confirmPath: self.get('basePath') +'/'+ evt.target.value });
@@ -154,7 +160,7 @@ SC.loadPackage({ 'FileManagerWindow': {
 
                     if ( this.get('selectedType') == 'file' ) {
 
-                    	if ( this.get('hasOKandCancelButton') && this.get('context') != 'saveAs' ) {
+                    	if ( this.get('hasOKandCancelButton') && this.get('context') == 'chooseFile' ) {
 	                        this.get('content').querySelector('button.confirm').classList.add('active');
 	                        this.set({ confirmPath: this.get('basePath') +'/'+ this.get('selectedName') });
 	                    }
@@ -168,7 +174,7 @@ SC.loadPackage({ 'FileManagerWindow': {
 
                     } else {
                     	
-                    	if ( this.get('hasOKandCancelButton') && this.get('context') != 'saveAs' ) {
+                    	if ( this.get('hasOKandCancelButton') && this.get('context') == 'chooseFile' ) {
 	                        this.get('content').querySelector('button.confirm').classList.remove('active');
 	                    }
 
@@ -186,7 +192,7 @@ SC.loadPackage({ 'FileManagerWindow': {
                     }
 
                     if ( this.get('selectedType') == 'file' ) {
-                    	if ( this.get('hasOKandCancelButton') && this.get('context') != 'saveAs' ) {
+                    	if ( this.get('hasOKandCancelButton') && this.get('context') == 'chooseFile' ) {
 	                        this.get('content').querySelector('button.confirm').classList.remove('active');
 	                    }
 	                }
@@ -221,7 +227,7 @@ SC.loadPackage({ 'FileManagerWindow': {
                     	activeButtons[i].classList.remove('active');
                     }
                     
-                    if ( this.get('hasOKandCancelButton') && this.get('context') != 'saveAs' ) {
+                    if ( this.get('hasOKandCancelButton') && this.get('context') != 'saveAs' && this.get('context') != 'newPage' ) {
                         this.get('content').querySelector('button.confirm').classList.remove('active');
                     }
 
@@ -262,10 +268,22 @@ SC.loadPackage({ 'FileManagerWindow': {
                             modalButtonConfirm.addEventListener('click', function() {
                                 
                                 if ( this.classList.contains('active') ) {
-                                    // Send Callback Path and Close
-                                    // TODO: Close only if not opened before
-                                    self.get('callback').call({ path: self.get('confirmPath') });
-                                    SuperGlue.get('windowManager').do('closeWindow', self);
+                                    
+                                    if ( self.get('context') == 'newPage' ) {
+
+                                        self.do('createNewPageAtAvailableLocation', { name: self.get('content').querySelector('.sg-modal-name-input').value });
+                                        //SuperGlue.get('windowManager').do('closeWindow', self);
+
+                                    } else {
+
+                                        // Send Callback Path and Close
+                                        // TODO: Close only if not opened before
+                                        self.get('callback').call({ path: self.get('confirmPath') });
+                                        SuperGlue.get('windowManager').do('closeWindow', self);
+
+                                    }
+
+                                    
                                 }
 
                             });
@@ -749,6 +767,8 @@ SC.loadPackage({ 'FileManagerWindow': {
                             var fileType;
                             if ( (/\.(gif|jpg|jpeg|tiff|png)$/i).test(files[f].name) ) {
                                 fileType = 'image';
+                            } else if ( (/\.(html)$/i).test(files[f].name) ) {
+                                fileType = 'html';
                             } else {
                             	fileType = undefined;
                             }
@@ -762,8 +782,13 @@ SC.loadPackage({ 'FileManagerWindow': {
 	                            resultElem.setAttribute('data-path', files[f].name);
 	                            resultElem.setAttribute('data-name', name);
 	                            resultElem.setAttribute('data-type', type);
-	                            resultElem.innerHTML = name + '<span class="size">'+ size +'</span>';
 
+                                if ( fileType == 'html' ) {
+                                    resultElem.innerHTML = name + '<a href="'+ files[f].name +'" target="_blank"></a><span class="size">'+ size +'</span>';
+                                } else {
+                                    resultElem.innerHTML = name + '<span class="size">'+ size +'</span>';
+                                }
+	                            
 	                            resultElem.addEventListener('click', function(evt) {
 	                                
 	                                var selectedFiles = self.get('directoryListing').querySelectorAll('.active');
@@ -1182,6 +1207,79 @@ SC.loadPackage({ 'FileManagerWindow': {
                     }
                 });
 
+            }
+        },
+
+        createNewPageAtAvailableLocation: {
+            comment:    'I create a new file at an available and valid location in the current directory. Params: name, (increment)',
+            code:       function(arg) {
+
+                var self = this;
+
+                self.set({ isWorking: true });
+
+                var increment;
+                if (!arg.increment) {
+                    increment = 1;
+                } else {
+                    increment = parseInt(arg.increment)+1;
+                }
+                
+                var cleanedName = self.do('checkName', { name: arg.name });
+                
+                var destination;
+                if (increment == 1) {
+                    destination = self.get('basePath') +'/'+ cleanedName;
+                } else {
+                    destination = self.get('basePath') +'/'+ cleanedName.substr(0, (cleanedName.lastIndexOf('.')) || cleanedName) + '-' + increment + cleanedName.substring(cleanedName.lastIndexOf('.'));
+                }
+
+                SuperGlue.get('server').do('doesFileExist', {
+                    path: destination,
+                    onerror: function() {
+                        alert('Checking if path already exists threw an error.\nError Message:\n\n' + this);
+                    },
+                    onsuccess: function(aBoolean) {
+
+                        if (aBoolean) {
+                            var newIncrement = increment++;
+                            self.do('createNewPageAtAvailableLocation', { name: arg.name, increment: newIncrement });
+                        
+                        } else {
+                            
+                            var destination;
+                            if (increment == 1) {
+                                destination = self.get('basePath') +'/'+ cleanedName;
+                            } else {
+                                destination = self.get('basePath') +'/'+ cleanedName.substr(0, (cleanedName.lastIndexOf('.')) || cleanedName) + '-' + increment + cleanedName.substring(cleanedName.lastIndexOf('.'));
+                            }                            
+                            
+                            SuperGlue.get('server').do('copyFile', {
+                                sourcePath:   '/resources/empty.html',
+                                targetPath:   destination,
+                                onerror: function() {
+                                    alert('File / Directory could not be copied.\nError Message:\n\n' + this);
+                                },
+                                onprogress: function(evt){
+                                    //
+                                },
+                                onsuccess:   function(){
+
+                                    self.do('listDirectory', { path: self.get('currentPath'), selectPath: destination });                                    
+                                    self.set({ isWorking: false });
+
+                                    self.set({ context: undefined });
+                                    self.set({ hasOKandCancelButton: false });
+                                    
+                                }
+                            });
+                            
+                        }
+                        
+
+                    }
+                });
+
             }
         }
 

src/allplatforms/css/FileManagerWindow.css

@@ -156,7 +156,6 @@
 
 .sg-filemanager-directory-container .sg-filemanager-directory-listing li:hover, .sg-filemanager-directory-container .sg-filemanager-directory-listing li.active {
 	background-color:	rgb(183, 12, 29);
-	cursor:				pointer;
 }
 
 .sg-filemanager-directory-container .sg-filemanager-directory-listing li:hover:after, .sg-filemanager-directory-container .sg-filemanager-directory-listing li.active:after, .sg-filemanager-directory-container .sg-filemanager-directory-listing li.new:after {
@@ -204,6 +203,26 @@
 	background-image:	url(./icons/resourceFile.svg);
 }
 
+.sg-filemanager-directory-container .sg-filemanager-directory-listing li.sg-resource-file.html a {
+	position: 			absolute;
+	top: 				4px;
+	right: 				64px;
+	width: 				22px;
+	height:				22px;
+	background-size:	22px auto;
+	background-repeat:	no-repeat;
+	background-position: center;
+	background-image: 	url(./icons/resourceFileOpen.svg);
+	background-color:	rgb(183, 12, 29);
+	z-index:			1;
+	cursor:				pointer;
+	display: 			none;
+}
+
+.sg-filemanager-directory-container .sg-filemanager-directory-listing li.sg-resource-file.html.active a {
+	display: 			block;
+}
+
 .sg-filemanager-directory-container .sg-filemanager-directory-listing li.new, .sg-filemanager-directory-container .sg-filemanager-directory-listing li.edit {
 	background-color:	rgb(183, 12, 29);
 }

src/allplatforms/css/icons/resourceFileOpen.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="22px" height="22px" viewBox="0 0 22 22" enable-background="new 0 0 22 22" xml:space="preserve">
+<g>
+	<path fill="none" d="M14.5,11.5c0.146,0,0.317,0,0.5,0v-4c-0.167,0-0.333,0-0.5,0c0.167,0,0.333,0,0.5,0V5h-2.5
+		c0,0.167,0,0.333,0,0.5c0-0.167,0-0.333,0-0.5h-2c0,0.167,0,0.333,0,0.5c0-0.167,0-0.333,0-0.5H9.414L7,7.414V17h8v-5.5
+		C14.817,11.5,14.646,11.5,14.5,11.5z"/>
+	<g>
+		<path fill="#FFFFFF" d="M15,9.25V17H7V7.414L9.414,5H10.5c0-0.667,0-1.333,0-2H8.586L5,6.586V19h12V9.25
+			C16.312,9.25,15.582,9.25,15,9.25z"/>
+		<path fill="#FFFFFF" d="M17,3h-4.5c0,0.667,0,1.333,0,2H15v2.5c0.667,0,1.333,0,2,0V3z"/>
+	</g>
+</g>
+<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="15.459" y1="4.25" x2="8.875" y2="10.834"/>
+</svg>