manager (add) add preview to image TVs

Author: Ser1ous

manager/actions/mutate_content.dynamic.php

@@ -153,6 +153,11 @@
 $lockElementType = 7;
 require_once(MODX_MANAGER_PATH . 'includes/active_user_locks.inc.php');
 ?>
+    <style>
+        .image_for_field[data-image] { display: block; content: ""; width: 120px; height: 120px; margin: .1rem .1rem 0 0; border: 1px #ccc solid; background: #fff 50% 50% no-repeat; background-size: contain; cursor: pointer }
+        .image_for_field[data-image=""] { display: none }
+
+    </style>
 	<script type="text/javascript">
 		/* <![CDATA[ */
 
@@ -542,6 +547,17 @@ function SetUrl(url, width, height, alt) {
 		<?php $ResourceManagerLoaded = true; } ?>
 		/* ]]> */
 	</script>
+    <script>
+        function evoRenderTvImageCheck(a) {
+            var b = document.getElementById('image_for_' + a.target.id),
+                c = new Image;
+            a.target.value ? (c.src = "<?php echo EvolutionCMS()->getConfig('site_url')?>" + a.target.value, c.onerror = function () {
+                b.style.backgroundImage = '', b.setAttribute('data-image', '');
+            }, c.onload = function () {
+                b.style.backgroundImage = 'url(\'' + this.src + '\')', b.setAttribute('data-image', this.src);
+            }) : (b.style.backgroundImage = '', b.setAttribute('data-image', ''));
+        }
+    </script>
 
 	<form name="mutate" method="post" action="index.php" enctype="multipart/form-data" id="mutate" class="content" onsubmit="documentDirty=false;">
 		<?php

manager/includes/tmplvars.inc.php

@@ -226,7 +226,11 @@ function SetUrl(url, width, height, alt) {
 						</script>";
 					$ResourceManagerLoaded = true;
 				}
-				$field_html .= '<input type="text" id="tv' . $field_id . '" name="tv' . $field_id . '"  value="' . $field_value . '" ' . $field_style . ' onchange="documentDirty=true;" /><input type="button" value="' . $_lang['insert'] . '" onclick="BrowseServer(\'tv' . $field_id . '\')" />';
+				$field_html .= '<input type="text" id="tv' . $field_id . '" name="tv' . $field_id . '"  value="' . $field_value . '" ' . $field_style . ' onchange="documentDirty=true;" /><input type="button" value="' . $_lang['insert'] . '" onclick="BrowseServer(\'tv' . $field_id . '\')" />
+                    <div class="col-12" style="padding-left: 0px;">
+                        <div id="image_for_tv' . $field_id . '" class="image_for_field" data-image="' . $field_value . '" onclick="BrowseServer(\'tv' . $field_id . '\')" style="background-image: url(\'' . EvolutionCMS()->getConfig('site_url') . $field_value . '\');"></div>
+                        <script>document.getElementById(\'tv' . $field_id . '\').addEventListener(\'change\', evoRenderTvImageCheck, false);</script>
+                    </div>';
 				break;
 			case "file": // handles the input of file uploads
 				/* Modified by Timon for use with resource browser */