reworked homepage item settings area

api/classes/organizr.class.php

@@ -4240,6 +4240,18 @@ class Organizr
 		$this->groupOptions = $this->groupSelect();
 	}
 	
+	public function getSettingsHomepageItem($item)
+	{
+		$items = $this->getSettingsHomepage();
+		foreach ($items as $k => $v) {
+			if ($v['name'] === $item) {
+				return $v;
+			}
+		}
+		$this->setAPIResponse('error', 'Homepage item was not found', 404);
+		return null;
+	}
+	
 	public function getSettingsHomepage()
 	{
 		$this->setGroupOptionsVariable();

api/pages/settings-tab-editor-homepage.php

@@ -18,11 +18,12 @@ function get_page_settings_tab_editor_homepage($Organizr)
 <div class="panel bg-org panel-info">
     <div class="panel-heading">
 		<span lang="en">Homepage Items</span>
-        <!-- <button type="button" class="btn btn-success btn-circle pull-right popup-with-form m-r-5" href="#new-image-form" data-effect="mfp-3d-unfold"><i class="fa fa-upload"></i> </button> -->
 	</div>
     <div class="panel-wrapper collapse in" aria-expanded="true">
         <div class="panel-body bg-org" >
-        <div class="row el-element-overlay m-b-40" id="settings-homepage-list"></div>
+        	<div class="row el-element-overlay m-b-40" id="settings-homepage-list">
+        		<div class="text-center"><i class="fa fa-spin fa-spinner fa-3x"></i></div>
+			</div>
         </div>
     </div>
 </div>

api/pages/settings.php

@@ -385,5 +385,6 @@ function get_page_settings($Organizr)
     <div class="clearfix"></div>
     <div id="about-theme-body" class=""></div>
 </form>
+<div id="editHomepageItemDiv"><div id="editHomepageItem" class=""></div></div>
 ';
 }

api/v2/routes/settings.php

@@ -39,3 +39,13 @@ $app->get('/settings/homepage', function ($request, $response, $args) {
 		->withHeader('Content-Type', 'application/json;charset=UTF-8')
 		->withStatus($GLOBALS['responseCode']);
 });
+$app->get('/settings/homepage/{item}', function ($request, $response, $args) {
+	$Organizr = ($request->getAttribute('Organizr')) ?? new Organizr();
+	if ($Organizr->qualifyRequest(1, true)) {
+		$GLOBALS['api']['response']['data'] = $Organizr->getSettingsHomepageItem($args['item']);
+	}
+	$response->getBody()->write(jsonE($GLOBALS['api']));
+	return $response
+		->withHeader('Content-Type', 'application/json;charset=UTF-8')
+		->withStatus($GLOBALS['responseCode']);
+});

css/organizr.css

@@ -2,8 +2,15 @@
     margin-top: 18px !important;
     margin-left: -11px;
 }
-
-/*JSGrid*/
+.editHomepageItemDiv-on {
+    z-index: 9999 !important;
+    opacity: 1 !important;
+    background: #000000eb !important;
+}
+#editHomepageItem {
+    margin-top: 40px;
+}
+    /*JSGrid*/
 .jsgrid-grid-body {
     overflow-x: auto;
     overflow-y: auto;
@@ -4324,9 +4331,12 @@ html {
 
 @keyframes spinner-grow {
     0% {
-        transform: scale(0); }
+        transform: scale(0);
+    }
     50% {
-        opacity: 1; } }
+        opacity: 1;
+    }
+}
 
 .spinner-grow {
     display: inline-block;

index.php

@@ -221,6 +221,7 @@ $Organizr = new Organizr();
 <script src="plugins/bower_components/bootstrap-treeview-master/dist/bootstrap-treeview.min.js"></script>
 <script src="plugins/bower_components/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
 <script src="plugins/bower_components/jsgrid/dist/jsgrid.min.js"></script>
+<script src="plugins/bower_components/animatedModal/animatedModal.min.js"></script>
 <script src="js/gauge.min.js"></script>
 <script src="js/jquery.mousewheel.min.js"></script>
 <script src="js/ua-parser.min.js"></script>

js/functions.js

@@ -1669,6 +1669,81 @@ function themeStatus(name=null,version=null){
         return 'Not Installed';
     }
 }
+function homepageItemFormHTML(v){
+	return `
+	<a id="editHomepageItemCall" href="#editHomepageItemDiv" class="hidden">homepage item</a>
+	<form id="homepage-`+v.name+`-form" class="white-popup mfp-with-anim homepageForm addFormTick">
+		<fieldset style="border:0;" class="col-md-10 col-md-offset-1">
+            <div class="panel bg-org panel-info">
+                <div class="panel-heading">
+                    <span lang="en">`+v.name+`</span>
+                    <button type="button" class="btn bg-org btn-circle close-popup pull-right close-editHomepageItemDiv"><i class="fa fa-times"></i> </button>
+                    <button id="homepage-`+v.name+`-form-save" onclick="submitSettingsForm('homepage-`+v.name+`-form')" class="btn btn-sm btn-info btn-rounded waves-effect waves-light pull-right hidden animated loop-animation rubberBand m-r-20" type="button"><span class="btn-label"><i class="fa fa-save"></i></span><span lang="en">Save</span></button>
+                </div>
+                <div class="panel-wrapper collapse in" aria-expanded="true">
+                    <div class="panel-body bg-org">
+                        `+buildFormGroup(v.settings)+`
+                    </div>
+                </div>
+            </div>
+		</fieldset>
+		<div class="clearfix"></div>
+	</form>
+	`;
+}
+function editHomepageItem(item){
+	organizrAPI2('GET','api/v2/settings/homepage/'+item).success(function(data) {
+		try {
+			let response = data.response;
+			let html = homepageItemFormHTML(response.data);
+			$('#editHomepageItem').html(html);
+			$("#editHomepageItemCall").animatedModal({
+				top: '40px',
+				left: '0px',
+				zIndexIn: '9999',
+				zIndexOut: '-9999',
+				color: '#000000eb',
+				opacityIn: '1',
+				opacityOut: '0',
+				animatedIn: 'bounceInUp',
+				animatedOut: 'bounceOutDown',
+				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');
+				});
+			}
+		}catch(e) {
+			console.log(e + ' error: ' + data);
+			orgErrorAlert('<h4>' + e + '</h4>' + formatDebug(data));
+			return false;
+		}
+
+	}).fail(function(xhr) {
+		console.error("Organizr Function: API Connection Failed");
+	});
+}
 function buildHomepageItem(array){
 	var listing = '';
 	if (Array.isArray(array)) {
@@ -1679,7 +1754,7 @@ function buildHomepageItem(array){
 					<div class="white-box bg-org m-0">
 						<div class="el-card-item p-0">
 							<div class="el-card-avatar el-overlay-1">
-								<a class="popup-with-form" href="#homepage-`+v.name+`-form" data-effect="mfp-3d-unfold"><img class="lazyload tabImages" data-src="`+v.image+`"></a>
+								<a onclick="editHomepageItem('`+v.name+`')"><img class="lazyload tabImages mouse" data-src="`+v.image+`"></a>
 							</div>
 							<div class="el-card-content">
 								<h3 class="box-title">`+v.name+`</h3>
@@ -1688,6 +1763,7 @@ function buildHomepageItem(array){
 						</div>
 					</div>
 				</div>
+				<!--
 				<form id="homepage-`+v.name+`-form" class="mfp-hide white-popup mfp-with-anim homepageForm addFormTick">
 				    <fieldset style="border:0;" class="col-md-10 col-md-offset-1">
                         <div class="panel bg-org panel-info">
@@ -1698,13 +1774,14 @@ function buildHomepageItem(array){
                             </div>
                             <div class="panel-wrapper collapse in" aria-expanded="true">
                                 <div class="panel-body bg-org">
-                                    `+buildFormGroup(v.settings)+`
+                                    +buildFormGroup(v.settings)+
                                 </div>
                             </div>
                         </div>
 					</fieldset>
 				    <div class="clearfix"></div>
 				</form>
+				-->
 				`;
 			}
 		});
@@ -1735,23 +1812,6 @@ function buildHomepage(){
             return false;
         }
 		$('#settings-homepage-list').html(buildHomepageItem(response.data));
-		customHTMLoneEditor = ace.edit("customHTMLoneEditor");
-		var 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');
-		});
-		customHTMLtwoEditor = ace.edit("customHTMLtwoEditor");
-		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');
-		});
 	}).fail(function(xhr) {
 		console.error("Organizr Function: API Connection Failed");
 	});
@@ -2005,11 +2065,7 @@ function buildTabEditor(){
             return false;
         }
 		$('#tabEditorTable').html(buildTabEditorItem(response.data));
-        loadSettingsPage2('api/v2/page/settings_tab_editor_homepage','#settings-tab-editor-homepage','Homepage Items');
-        setTimeout(function(){ sortHomepageItemHrefs() }, 1000);
-        setTimeout(function(){ checkTabHomepageItems(); }, 1500);
-
-
+        checkTabHomepageItems();
 	}).fail(function(xhr) {
 		console.error("Organizr Function: API Connection Failed");
 	});
@@ -2084,18 +2140,9 @@ function checkTabHomepageItem(id, name, url, urlLocal){
     }
 }
 function addEditHomepageItem(id, type){
-    var html = '';
-    var process = false;
-    if(type in window.hrefList){
-        html = '<i class="ti-home"></i>';
-        process = true;
-    }
-    if(html !== ''){
-        $('#'+id).html(html);
-    }
-    if(process){
-        $('#'+id).attr('onclick', "$('.popup-with-form').magnificPopup('open',"+window.hrefList[type]+")");
-    }
+    let html = '<i class="ti-home"></i>';
+    $('#'+id).html(html);
+    $('#'+id).attr('onclick', 'editHomepageItem("'+type+'")');
     return false;
 }
 function buildCategoryEditor(){

plugins/bower_components/animatedModal/animatedModal.js

@@ -0,0 +1,126 @@
+/*=========================================
+ * animatedModal.js: Version 1.0
+ * author: João Pereira
+ * website: https://joaopereira.pt
+ * email: joaopereirawd@gmail.com
+ * Licensed MIT 
+=========================================*/
+
+(function ($) {
+ 
+    $.fn.animatedModal = function(options) {
+        var modal = $(this);
+        
+        //Defaults
+        var settings = $.extend({
+            modalTarget: modal.attr('href').replace('#',''), 
+            position:'fixed', 
+            width:'100%', 
+            height:'100%', 
+            top:'0px', 
+            left:'0px', 
+            zIndexIn: '9999',  
+            zIndexOut: '-9999',  
+            color: '#39BEB9', 
+            opacityIn:'1',  
+            opacityOut:'0', 
+            animatedIn:'zoomIn',
+            animatedOut:'zoomOut',
+            animationDuration:'.6s', 
+            overflow:'auto', 
+            // Callbacks
+            beforeOpen: function() {},           
+            afterOpen: function() {}, 
+            beforeClose: function() {}, 
+            afterClose: function() {}
+ 
+            
+
+        }, options);
+        
+        var closeBt = $('.close-'+settings.modalTarget);
+
+        //console.log(closeBt)
+
+        var href = $(modal).attr('href'),
+            id = $('body').find('#'+settings.modalTarget),
+            idConc = '#'+id.attr('id');
+            //console.log(idConc);
+            // Default Classes
+            id.addClass('animated');
+            id.addClass(settings.modalTarget+'-off');
+
+        //Init styles
+        var initStyles = {
+            'position':settings.position,
+            'width':settings.width,
+            'height':settings.height,
+            'top':settings.top,
+            'left':settings.left,
+            'background-color':settings.color,
+            'overflow-y':settings.overflow,
+            'z-index':settings.zIndexOut,
+            'opacity':settings.opacityOut,
+            '-webkit-animation-duration':settings.animationDuration,
+            '-moz-animation-duration':settings.animationDuration,
+            '-ms-animation-duration':settings.animationDuration,
+            'animation-duration':settings.animationDuration
+        };
+        //Apply stles
+        id.css(initStyles);
+
+        modal.click(function(event) {       
+            event.preventDefault();
+            $('body, html').css({'overflow':'hidden'});
+            if (href == idConc) {
+                if (id.hasClass(settings.modalTarget+'-off')) {
+                    id.removeClass(settings.animatedOut);
+                    id.removeClass(settings.modalTarget+'-off');
+                    id.addClass(settings.modalTarget+'-on');
+                } 
+
+                 if (id.hasClass(settings.modalTarget+'-on')) {
+                    settings.beforeOpen();
+                    id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn});
+                    id.addClass(settings.animatedIn);  
+                    id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterOpen);
+                };  
+            } 
+        });
+
+
+
+        closeBt.click(function(event) {
+            event.preventDefault();
+            $('body, html').css({'overflow':'auto'});
+
+            settings.beforeClose(); //beforeClose
+            if (id.hasClass(settings.modalTarget+'-on')) {
+                id.removeClass(settings.modalTarget+'-on');
+                id.addClass(settings.modalTarget+'-off');
+            } 
+
+            if (id.hasClass(settings.modalTarget+'-off')) {
+                id.removeClass(settings.animatedIn);
+                id.addClass(settings.animatedOut);
+                id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);
+            };
+
+        });
+
+        function afterClose () {       
+            id.css({'z-index':settings.zIndexOut});
+            settings.afterClose(); //afterClose
+        }
+
+        function afterOpen () {       
+            settings.afterOpen(); //afterOpen
+        }
+
+    }; // End animatedModal.js
+
+}(jQuery));
+
+
+
+