#9073 added preview tip

pandora_console/include/class/TipsWindow.class.php

@@ -178,12 +178,21 @@ class TipsWindow
         $text = get_parameter('text', '');
         $url = get_parameter('url', '');
         $files = get_parameter('files', '');
-        if (empty($files) === false) {
-            $files = explode(',', $files);
+        $totalFiles64 = get_parameter('totalFiles64', '');
+        $files64 = false;
+
+        if ($totalFiles64 > 0) {
+            $files64 = [];
+            for ($i = 0; $i < $totalFiles64; $i++) {
+                $files64[] = get_parameter('file64_'.$i, '');
+            }
         }
 
-        foreach ($files as $key => $value) {
-            $files[$key] = str_replace(ui_get_full_url('/'), '', $value);
+        if (empty($files) === false) {
+            $files = explode(',', $files);
+            foreach ($files as $key => $value) {
+                $files[$key] = str_replace(ui_get_full_url('/'), '', $value);
+            }
         }
 
         View::render(
@@ -193,7 +202,8 @@ class TipsWindow
                 'text'    => $text,
                 'url'     => $url,
                 'preview' => true,
-                'files'   => $files,
+                'files'   => (empty($files) === false) ? $files : false,
+                'files64' => (empty($files64) === false) ? $files64 : false,
             ]
         );
     }

pandora_console/include/javascript/tipsWindow.js

@@ -298,23 +298,52 @@ function previewTip() {
   var extradata = {
     title: $("input[name=title]").val(),
     text: $("textarea[name=text]").val(),
-    url: $("input[name=url]").val()
+    url: $("input[name=url]").val(),
+    files: []
   };
 
-  //first images that can delete
+  //images in server
   if ($(".image_tip img").length > 0) {
-    extradata["files"] = [];
     $(".image_tip img").each(function(index) {
       extradata["files"].push($(".image_tip img")[index].src);
     });
   }
-  load_tips_modal({
-    target: $("#tips_window_modal_preview"),
-    url: url,
-    onshow: {
-      page: page,
-      method: "renderPreview"
-    },
-    extradata //Receive json
-  });
+
+  //Images in client
+  var totalInputsFiles = $("input[type=file]").length;
+  if (totalInputsFiles > 0) {
+    extradata["totalFiles64"] = totalInputsFiles;
+    $("input[type=file]").each(function(index) {
+      var reader = new FileReader();
+      reader.readAsDataURL(this.files[0]);
+      reader.onload = function(e) {
+        var img = new Image();
+        img.src = e.target.result;
+        img.onload = function() {
+          extradata[`file64_${index}`] = this.currentSrc;
+          if (totalInputsFiles - 1 === index) {
+            load_tips_modal({
+              target: $("#tips_window_modal_preview"),
+              url: url,
+              onshow: {
+                page: page,
+                method: "renderPreview"
+              },
+              extradata //Receive json
+            });
+          }
+        };
+      };
+    });
+  } else {
+    load_tips_modal({
+      target: $("#tips_window_modal_preview"),
+      url: url,
+      onshow: {
+        page: page,
+        method: "renderPreview"
+      },
+      extradata //Receive json
+    });
+  }
 }

pandora_console/include/styles/tips_window.css

@@ -29,7 +29,7 @@
   font-size: 15px;
 }
 .description {
-  padding: 20px;
+  padding: 0px 20px 20px 20px;
   text-align: center;
 }
 .actions {
@@ -41,7 +41,7 @@
   overflow: hidden;
   position: relative;
   width: 100%;
-  height: 280px;
+  height: 300px;
   max-width: 464px;
   text-align: center;
   margin: 0 auto;
@@ -79,6 +79,8 @@
 }
 .carousel .images img {
   width: 100%;
+  height: 100%;
+  max-height: 260px;
 }
 .dialog_tips .ui-dialog-buttonset {
   display: flex;
@@ -163,7 +165,7 @@ span.count-round-tip.active {
   margin: 0px 5px;
 }
 .bx-viewport {
-  height: fit-content !important;
+  height: 260px !important;
 }
 .action_image {
   margin: 10px 0px;

pandora_console/views/dashboard/tipsWindow.php

@@ -42,7 +42,7 @@ $output .= '<p>'.html_print_checkbox(
     ($preview === true) ? '' : 'checkbox_tips_startup'
 ).__('Show usage tips at startup').'</p>';
 $output .= '</div>';
-$output .= '<div class="carousel '.(($files === false) ? 'invisible' : '').'">';
+$output .= '<div class="carousel '.(($files === false && $files64 === false) ? 'invisible' : '').'">';
 $output .= '<div class="images">';
 
 if ($files !== false) {
@@ -57,6 +57,12 @@ if ($files !== false) {
     }
 }
 
+if ($files64 !== false) {
+    foreach ($files64 as $key => $file) {
+        $output .= '<img src="'.$file.'" />';
+    }
+}
+
 $output .= '</div>';
 $output .= '</div>';