Added auto reloading preview window as an option, Converted showing and hiding of loading icon to jquery, Reformatted system settings page.

components/filemanager/init.js

@@ -16,13 +16,14 @@
 
     codiad.filemanager = {
 		
+		auto_reload: false,
         clipboard: '',
-        
         controller: 'components/filemanager/controller.php',
         dialog: 'components/filemanager/dialog.php',
         dialogUpload: 'components/filemanager/dialog_upload.php',
+		preview: null,
 		
-        init: function() {
+        init: async function() {
         	
         	this.noAudio = [
 				//Audio
@@ -58,6 +59,33 @@
 	        
             // Initialize node listener
             this.nodeListener();
+            this.auto_reload = ( await codiad.settings.get_option( "codiad.filemanager.auto_reload_preview" ) == "true" );
+            
+            console.log( this.auto_reload );
+            
+            amplify.subscribe( 'settings.save', async function() {
+            
+	            let option = ( await codiad.settings.get_option( "codiad.filemanager.auto_reload_preview" ) == "true" );
+	            if( option != codiad.filemanager.auto_reload ) {
+	                
+	                //codiad.auto_save.reload_interval();
+	                window.location.reload();
+	            }
+			});
+            
+            /* Subscribe to know when a file become active. */
+			amplify.subscribe( 'active.onFocus', async function( path ) {
+				
+				let _this = codiad.filemanager;
+				let editor = codiad.editor.getActive();
+
+				if( _this.auto_reload && editor !== null ) {
+                   	
+                   _this.preview.addEventListener( "beforeunload", _this.closePreview );
+                   codiad.editor.getActive().addEventListener( "change", _this.refreshPreview );
+               }
+			});
+            
             // Load uploader
             $.loadScript("components/filemanager/upload_scripts/jquery.ui.widget.js", true);
             $.loadScript("components/filemanager/upload_scripts/jquery.iframe-transport.js", true);
@@ -440,17 +468,50 @@
         //////////////////////////////////////////////////////////////////
 
         openInBrowser: function(path) {
+        	
+        	let _this = this;
+
             $.ajax({
                 url: this.controller + '?action=open_in_browser&path=' + encodeURIComponent(path),
                 success: function(data) {
                     var openIBResponse = codiad.jsend.parse(data);
                     if (openIBResponse != 'error') {
-                        window.open(openIBResponse.url, '_newtab');
+                    	
+                       _this.preview = window.open( openIBResponse.url, '_newtab' );
+                       
+                       let editor = codiad.editor.getActive();
+                       
+                       if( _this.auto_reload && editor !== null ) {
+	                       	
+	                       _this.preview.addEventListener( "beforeunload", _this.closePreview );
+	                       codiad.editor.getActive().addEventListener( "change", _this.refreshPreview );
+                       }
+                       
+                       
                     }
                 },
                 async: false
             });
         },
+        
+        closePreview: function( event ) {
+        	
+        	_this = codiad.filemanager;
+        	_this.preview = null;
+        },
+        
+        refreshPreview: function( event ) {
+        	
+        	_this = codiad.filemanager;
+        	
+        	if( _this.preview == null ) {
+        		
+        		return;
+        	}
+        	
+        	_this.preview.location.reload();
+        },
+        
         openInModal: function(path) {
         	
         	let type = "";

components/settings/dialog.php

@@ -139,6 +139,9 @@
                                 break;
                                 case "codiad.settings.autosave":
                                     var bool_val = (val == "true");
+                                break;
+                        		case "codiad.filemanager.auto_reload_preview":
+                                    var bool_val = (val == "true");
                                 break;
                             }
                         }
@@ -161,7 +164,6 @@
                     /* Notify listeners */
                     amplify.publish( 'settings.dialog.save', null );
                     codiad.settings.save( settings );
-                    codiad.modal.unload();
                 }
             </script>
 			<?php

components/settings/init.js

@@ -65,8 +65,11 @@
 			var systemRegex = /^codiad/;
 			var pluginRegex = /^codiad.plugin/;
 			
-			$.post( this.controller + '?action=save', {settings: JSON.stringify( settings )}, function( data ) {
+			$.ajax({
-				
+				type: 'POST',
+				url: this.controller + '?action=save',
+				data: {settings: JSON.stringify( settings )},
+				success: function( data ) {
 					data = data.replace(/},/gi, ",").split(",");
 					length = data.length;
 					
@@ -74,6 +77,8 @@
 						
 						parsed = codiad.jsend.parse( data );
 					}
+					codiad.modal.unload();
+				},
 			});
 			
 			/* Notify listeners */

components/settings/settings.system.php

@@ -5,9 +5,7 @@
 <hr>
 <label></label>
 <table class="settings">
-	
 	<tr>
-	
 		<td><?php i18n("Auto Save"); ?></td>
 		<td>
 			<select class="setting" data-setting="codiad.settings.autosave">
@@ -15,11 +13,17 @@
 				<option value="false" default><?php i18n("False") ?></option>
 			</select>
 		</td>
-	
 	</tr>
-    
 	<tr>
-    
+		<td><?php i18n("Auto Reload Preview"); ?></td>
+		<td>
+			<select class="setting" data-setting="codiad.filemanager.auto_reload_preview">
+				<option value="false" default><?php i18n("False") ?></option>
+				<option value="true"><?php i18n("True") ?></option>
+			</select>
+		</td>
+	</tr>
+	<tr>
 		<td><?php i18n("Right Sidebar Trigger"); ?></td>
 		<td>
 			<select class="setting" data-setting="codiad.editor.rightSidebarTrigger">
@@ -27,11 +31,8 @@
 				<option value="true"><?php i18n("Click") ?></option>
 			</select>
 		</td>
-
 	</tr>
-    
 	<tr>
-    
 		<td><?php i18n("Filemanager Trigger"); ?></td>
 		<td>
 			<select class="setting" data-setting="codiad.editor.fileManagerTrigger">
@@ -39,11 +40,8 @@
 				<option value="true"><?php i18n("Single Click") ?></option>
 			</select>
 		</td>
-
 	</tr>
-    
 	<tr>
-    
 		<td><?php i18n("Persistent Modal"); ?></td>
 		<td>
 			<select class="setting" data-setting="codiad.editor.persistentModal">
@@ -51,6 +49,5 @@
 				<option value="false"><?php i18n("No") ?></option>
 			</select>
 		</td>
-
 	</tr>
 </table>

js/modal.js

@@ -10,8 +10,7 @@
 		
 		hide_loading: function() {
 			
-			let loading = document.getElementById( 'modal' ).getElementsByClassName( 'loading' )[0];
+			$('#modal-content .loading').css( "display", "none" );
-			loading.style.display = "none";
 		},
 		
 		hideOverlay: function() {
@@ -55,8 +54,7 @@
 		
 		show_loading: function() {
 			
-			let loading = document.getElementById( 'modal' ).getElementsByClassName( 'loading' )[0];
+			$('#modal-content .loading').css( "display", "inline-block" );
-			loading.style.display = "inline-block";
 		},
 		
 		unload: function() {