fix image loading for tab edit

remove option for performance since not needed

api/classes/organizr.class.php

@@ -1096,6 +1096,36 @@ class Organizr
 		return $allIcons;
 	}
 	
+	public function getImagesSelect()
+	{
+		$term = $_GET['search'] ?? null;
+		$page = $_GET['page'] ?? 1;
+		$limit = $_GET['limit'] ?? 20;
+		$offset = ($page * $limit) - $limit;
+		$goodIcons['results'] = [];
+		$goodIcons['limit'] = $limit;
+		$goodIcons['page'] = $page;
+		$goodIcons['term'] = $term;
+		$imageListing = $this->getImages();
+		$newImageListing = [];
+		foreach ($imageListing as $image) {
+			$newImageListing[] = [
+				'id' => $image,
+				'text' => basename($image)
+			];
+		}
+		foreach ($newImageListing as $k => $v) {
+			if (stripos($v['text'], $term) !== false || !$term) {
+				$goodIcons['results'][] = $v;
+			}
+		}
+		$total = count($goodIcons['results']);
+		$goodIcons['total'] = $total;
+		$goodIcons['results'] = array_slice($goodIcons['results'], $offset, $limit);
+		$goodIcons['pagination']['more'] = $page < (ceil($total / $limit));
+		return $goodIcons;
+	}
+	
 	public function removeImage($image = null)
 	{
 		if (!$image) {

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

@@ -11,7 +11,7 @@ function get_page_settings_tab_editor_tabs($Organizr)
 	if (!$Organizr->qualifyRequest(1, true)) {
 		return false;
 	}
-	$pageSettingsTabEditorTabsPerformanceIcon = $Organizr->config['performanceDisableIconDropdown'] ? '' : '
+	$iconSelectors = '
 
 	    $(".tabIconIconList").select2({
 	        ajax: {
@@ -36,21 +36,34 @@ function get_page_settings_tab_editor_tabs($Organizr)
 			},
 			placeholder: \'Search for an icon\',
 			templateResult: formatIcon,
-			templateSelection: formatIcon,
-			allowClear: true
+			templateSelection: formatIcon
+		});
+		
+		$(".tabIconImageList").select2({
+			 ajax: {
+			    url: \'api/v2/image/select\',
+			    data: function (params) {
+					var query = {
+						search: params.term,
+						page: params.page || 1
+					}
+					return query;
+			    },
+				processResults: function (data, params) {
+					params.page = params.page || 1;
+					return {
+						results: data.response.data.results,
+						pagination: {
+							more: (params.page * 20) < data.response.data.total
+						}
+					};
+				},
+			    //cache: true
+			},
+			placeholder: \'Search for an image\',
+			templateResult: formatImage,
+			templateSelection: formatImage
 		});
-	
-	
-	$(".tabIconImageList").select2({
-		templateResult: formatImage,
-		templateSelection: formatImage,
-	});
-	';
-	$pageSettingsTabEditorTabsPerformanceImage = $Organizr->config['performanceDisableImageDropdown'] ? '' : '
-	$(".tabIconImageList").select2({
-		templateResult: formatImage,
-		templateSelection: formatImage,
-	});
 	';
 	return '
 	<script>
@@ -68,7 +81,7 @@ function get_page_settings_tab_editor_tabs($Organizr)
 	    }
 	});
 	$( \'#tabEditorTable\' ).disableSelection();
-	' . $pageSettingsTabEditorTabsPerformanceImage . $pageSettingsTabEditorTabsPerformanceIcon . '
+	' . $iconSelectors . '
 	</script>
 	<div class="panel bg-org panel-info">
 	    <div class="panel-heading">
@@ -147,7 +160,7 @@ function get_page_settings_tab_editor_tabs($Organizr)
 	        <div class="row">
 		        <div class="form-group col-lg-6">
 		            <label class="control-label" for="new-tab-form-chooseImage" lang="en">Choose Image</label>
-		            ' . $Organizr->imageSelect("new-tab-form") . '
+		            <select class="form-control tabIconImageList" id="new-tab-form-chooseImage" name="chooseImage"><option lang="en">Select or type Image</option></select>
 		        </div>
 		        <div class="form-group col-lg-6">
 		            <label class="control-label" for="new-tab-form-chooseIcon" lang="en">Choose Icon</label>
@@ -209,7 +222,7 @@ function get_page_settings_tab_editor_tabs($Organizr)
 	        <div class="row">
 		        <div class="form-group col-lg-6">
 		            <label class="control-label" for="edit-tab-form-chooseImage" lang="en">Choose Image</label>
-		            ' . $Organizr->imageSelect("edit-tab-form") . '
+		            <select class="form-control tabIconImageList" id="edit-tab-form-chooseImage" name="chooseImage"><option lang="en">Select or type Image</option></select>
 		        </div>
 		        <div class="form-group col-lg-6">
 		            <label class="control-label" for="edit-tab-form-chooseIcon" lang="en">Choose Icon</label>

api/v2/routes/image.php

@@ -9,6 +9,17 @@ $app->get('/image', function ($request, $response, $args) {
 		->withHeader('Content-Type', 'application/json;charset=UTF-8')
 		->withStatus($GLOBALS['responseCode']);
 	
+});
+$app->get('/image/select', function ($request, $response, $args) {
+	$Organizr = ($request->getAttribute('Organizr')) ?? new Organizr();
+	if ($Organizr->qualifyRequest(1, true)) {
+		$GLOBALS['api']['response']['data'] = $Organizr->getImagesSelect();
+	}
+	$response->getBody()->write(jsonE($GLOBALS['api']));
+	return $response
+		->withHeader('Content-Type', 'application/json;charset=UTF-8')
+		->withStatus($GLOBALS['responseCode']);
+	
 });
 $app->delete('/image/{image}', function ($request, $response, $args) {
 	$Organizr = ($request->getAttribute('Organizr')) ?? new Organizr();

js/functions.js

@@ -516,12 +516,12 @@ function noTabs(arrayItems){
 	}
 }
 function formatImage (icon) {
-    if (!icon.id || icon.text == 'Select or type Icon') {
+    if (!icon.id || icon.text == 'Select or type Image') {
         return icon.text;
     }
     var baseUrl = "/user/pages/images/flags";
     var $icon = $(
-        '<span><img src="' + icon.element.value + '" class="img-chooser" /> ' + icon.text + '</span>'
+        '<span><img src="' + icon.id + '" class="img-chooser" /> ' + icon.text + '</span>'
     );
     return $icon;
 }
@@ -1700,11 +1700,7 @@ function editHomepageItem(item){
 			$("#editHomepageItemCall").animatedModal({
 				top: '40px',
 				left: '0px',
-				zIndexIn: '9999',
-				zIndexOut: '-9999',
 				color: '#000000eb',
-				opacityIn: '1',
-				opacityOut: '0',
 				animatedIn: 'bounceInUp',
 				animatedOut: 'bounceOutDown',
 				afterClose: function() {