temp change to edit homepage modal

index.php

@@ -38,8 +38,9 @@ $Organizr = new Organizr();
     <link href="plugins/bower_components/jsgrid/dist/jsgrid-theme.min.css" rel="stylesheet" type="text/css"/>
     <link href="plugins/bower_components/gallery/css/animated-masonry-gallery.css" rel="stylesheet" type="text/css"/>
     <link href="css/animate.css" rel="stylesheet">
-    <link href="plugins/bower_components/overlayScrollbars/OverlayScrollbars.min.css" rel="stylesheet">
-    <link href="css/plyr.css" rel="stylesheet">
+    <link href='plugins/bower_components/overlayScrollbars/OverlayScrollbars.min.css' rel='stylesheet'>
+    <link href='plugins/bower_components/custombox/dist/custombox.min.css' rel='stylesheet'>
+    <link href='css/plyr.css' rel='stylesheet'>
     <link id="style" href="css/dark.min.css?v=<?php echo $Organizr->fileHash; ?>" rel="stylesheet">
     <link href="css/organizr.min.css?v=<?php echo $Organizr->fileHash; ?>" rel="stylesheet">
 	<?php echo $Organizr->pluginFiles('css'); ?>
@@ -230,7 +231,8 @@ $Organizr = new Organizr();
 <script src="js/jquery.mousewheel.min.js"></script>
 <script src="js/ua-parser.min.js"></script>
 <script src="js/plyr.js"></script>
-<script src="plugins/bower_components/overlayScrollbars/jquery.overlayScrollbars.min.js"></script>
+<script src='plugins/bower_components/overlayScrollbars/jquery.overlayScrollbars.min.js'></script>
+<script src='plugins/bower_components/custombox/dist/custombox.min.js'></script>
 <script src="js/arrive.min.js"></script>
 <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
 <script src="js/functions.js?v=<?php echo $Organizr->fileHash; ?>"></script>

js/custom.js

@@ -1815,8 +1815,9 @@ $(document).on('click', '.imageManagerItem', function() {
 });
 
 $(document).on('click', '.close-editHomepageItemDiv',function () {
-	$('body').removeAttr('style');
-	$('html').removeAttr('style');
+	//$('body').removeAttr('style');
+	//$('html').removeAttr('style');
+	Custombox.modal.closeAll()
 })
 // Control init of custom plex JSON editor
 $(document).on('click', '#homepage-Plex-form li a[aria-controls="Misc Options"]', function() {

js/functions.js

@@ -1685,6 +1685,34 @@ function homepageItemFormHTML(v){
 	</form>
 	`;
 }
+function clearHomepageOriginal(){
+	$('#editHomepageItem').html('');
+}
+function completeHomepageLoad(item){
+	if(item == 'CustomHTML-1'){
+		customHTMLoneEditor = ace.edit("customHTMLoneEditor");
+		let HTMLMode = ace.require("ace/mode/html").Mode;
+		customHTMLoneEditor.session.setMode(new HTMLMode());
+		customHTMLoneEditor.setTheme("ace/theme/idle_fingers");
+		customHTMLoneEditor.setShowPrintMargin(false);
+		customHTMLoneEditor.session.on('change', function(delta) {
+			$('.customHTMLoneTextarea').val(customHTMLoneEditor.getValue());
+			$('#homepage-CustomHTML-1-form-save').removeClass('hidden');
+		});
+	}
+	if(item == 'CustomHTML-2'){
+		customHTMLtwoEditor = ace.edit("customHTMLtwoEditor");
+		let HTMLMode = ace.require("ace/mode/html").Mode;
+		customHTMLtwoEditor.session.setMode(new HTMLMode());
+		customHTMLtwoEditor.setTheme("ace/theme/idle_fingers");
+		customHTMLtwoEditor.setShowPrintMargin(false);
+		customHTMLtwoEditor.session.on('change', function(delta) {
+			$('.customHTMLtwoTextarea').val(customHTMLtwoEditor.getValue());
+			$('#homepage-CustomHTML-2-form-save').removeClass('hidden');
+		});
+	}
+	pageLoad();
+}
 function editHomepageItem(item){
 	ajaxloader('.editHomepageItemBox-' + item, 'in');
 	organizrAPI2('GET','api/v2/settings/homepage/'+item).success(function(data) {
@@ -1692,7 +1720,7 @@ function editHomepageItem(item){
 			let response = data.response;
 			let html = homepageItemFormHTML(response.data);
 			$('#editHomepageItem').html(html);
-			$("#editHomepageItemCall").animatedModal({
+			/*$("#editHomepageItemCall").animatedModal({
 				top: '40px',
 				left: '0px',
 				color: '#000000eb',
@@ -1702,30 +1730,23 @@ function editHomepageItem(item){
 				afterClose: function() {
 					$('body, html').css({'overflow':'hidden'});
 				}
-			});
-			$('#editHomepageItemCall').click();
-			if(item == 'CustomHTML-1'){
-				customHTMLoneEditor = ace.edit("customHTMLoneEditor");
-				let HTMLMode = ace.require("ace/mode/html").Mode;
-				customHTMLoneEditor.session.setMode(new HTMLMode());
-				customHTMLoneEditor.setTheme("ace/theme/idle_fingers");
-				customHTMLoneEditor.setShowPrintMargin(false);
-				customHTMLoneEditor.session.on('change', function(delta) {
-					$('.customHTMLoneTextarea').val(customHTMLoneEditor.getValue());
-					$('#homepage-CustomHTML-1-form-save').removeClass('hidden');
-				});
-			}
-			if(item == 'CustomHTML-2'){
-				customHTMLtwoEditor = ace.edit("customHTMLtwoEditor");
-				let HTMLMode = ace.require("ace/mode/html").Mode;
-				customHTMLtwoEditor.session.setMode(new HTMLMode());
-				customHTMLtwoEditor.setTheme("ace/theme/idle_fingers");
-				customHTMLtwoEditor.setShowPrintMargin(false);
-				customHTMLtwoEditor.session.on('change', function(delta) {
-					$('.customHTMLtwoTextarea').val(customHTMLtwoEditor.getValue());
-					$('#homepage-CustomHTML-2-form-save').removeClass('hidden');
-				});
-			}
+			});*/
+			new Custombox.modal({
+				content: {
+					effect:"flip",
+					animateFrom:"left",
+					animateTo:"left",
+					target: '#editHomepageItemDiv',
+					width: '100%',
+					delay: 0,
+					fullscreen: true,
+					clone: false,
+					onComplete: completeHomepageLoad(item),
+					onClose: clearHomepageOriginal
+				},loader:{active:true}
+			}).open();
+			//$('#editHomepageItemCall').click();
+
 		}catch(e) {
 			organizrCatchError(e,data);
 		}