https://github.com/WWBN/AVideo/issues/8634

objects/functionCroppie.js.php

@@ -0,0 +1,171 @@
+<?php
+global $croppieFilesAdded;
+if (empty($croppieFilesAdded)) {
+?>
+    <link href="<?php echo getURL('node_modules/croppie/croppie.css'); ?>" rel="stylesheet" type="text/css" />
+    <script src="<?php echo getURL('node_modules/croppie/croppie.min.js'); ?>" type="text/javascript"></script>
+    <script>
+        function getCroppie(uploadCropObject, callback, width, height) {
+
+            function proceedWithCroppie() {
+                //console.log('getCroppie 1', uploadCropObject);
+                var ret = uploadCropObject.croppie('result', {
+                    type: 'base64',
+                    size: {
+                        width: width,
+                        height: height
+                    },
+                    format: 'png'
+                }).then(function(resp) {
+                    //console.log('getCroppie 2 ' + callback, resp);
+                    eval(callback + "(resp);");
+                }).catch(function(err) {
+                    //console.log('cropieError getCroppie => ' + callback, err);
+                    eval(callback + "(null);");
+                });
+                //console.log('getCroppie 3', ret);
+            }
+
+            // Check if the element is visible before proceeding
+            var elementId = '#' + $(uploadCropObject).attr('id');
+            if (isVisibleAndInViewport(elementId)) {
+                proceedWithCroppie();
+            } else {
+                $(elementId).closest('.tab-pane').addClass('active').addClass('in');
+                var checkVisibilityInterval = setInterval(function() {
+                    if (isVisibleAndInViewport(elementId)) {
+                        clearInterval(checkVisibilityInterval);
+                        proceedWithCroppie();
+                    }
+                }, 500); 
+            }
+        }
+    </script>
+<?php
+}
+$croppieFilesAdded = 1;
+?>
+<div class="croppieDiv" objectName="uploadCrop<?php echo $uid; ?>">
+    <div class="col-md-12 ">
+        <div id="croppie<?php echo $uid; ?>" style="min-height: <?php echo $boundaryHeight + 40; ?>px;"></div>
+        <div class="clearfix"></div>
+        <small class="text-muted text-center" style="display: block;"><?php echo __('Width'); ?>: <?php echo $resultWidth; ?>px | <?php echo __('Height'); ?>: <?php echo $resultHeight; ?>px</small>
+        <div class="clearfix"></div>
+        <div class="btn-group btn-group-justified" role="group">
+            <a id="upload-btn<?php echo $uid; ?>" class="btn btn-primary"><i class="fa fa-upload"></i> <?php echo $buttonTitle; ?></a>
+            <a id="delete-btn<?php echo $uid; ?>" class="btn btn-danger"><i class="fa fa-trash"></i> <?php echo __('Delete'); ?></a>
+        </div>
+    </div>
+    <div class="col-md-12 ">
+        <input type="file" id="upload<?php echo $uid; ?>" value="Choose a file" accept="image/*" style="display:none;" />
+    </div>
+</div>
+<script>
+    var uploadCrop<?php echo $uid; ?>;
+    var createCroppie<?php echo $uid; ?>Timeout;
+
+    function createCroppie<?php echo $uid; ?>(imageURL) {
+        clearTimeout(createCroppie<?php echo $uid; ?>Timeout);
+        if ($('#croppie<?php echo $uid; ?>').is(":hidden")) {
+            createCroppie<?php echo $uid; ?>Timeout = setTimeout(function() {
+                createCroppie<?php echo $uid; ?>(imageURL);
+            }, 1000);
+            return false;
+        }
+        var viewportWidth = <?php echo $viewportWidth; ?>;
+        var viewportHeight = <?php echo $viewportHeight; ?>;
+        var boundaryWidth = <?php echo $boundaryWidth; ?>;
+        var boundaryHeight = <?php echo $boundaryHeight; ?>;
+
+        var parentWidth = $('#croppie<?php echo $uid; ?>').parent().width();
+        var totalWidth = viewportWidth + (boundaryWidth - viewportWidth);
+
+        if (parentWidth <= totalWidth) {
+            var factor = (parentWidth / (totalWidth));
+            console.log('createCroppie parent and factor ', parentWidth, totalWidth, factor, viewportWidth, viewportHeight, boundaryWidth, boundaryHeight);
+
+            viewportWidth = parseInt(viewportWidth * factor);
+            viewportHeight = parseInt(viewportHeight * factor);
+            boundaryWidth = viewportWidth;
+            boundaryHeight = viewportHeight;
+            console.log('createCroppie make size smaller ', viewportWidth, viewportHeight, boundaryWidth, boundaryHeight);
+            $('#croppie<?php echo $uid; ?>').css("min-height", (boundaryHeight + 10) + "px");
+        } else {
+            console.log('createCroppie ', viewportWidth, viewportHeight, boundaryWidth, boundaryHeight);
+        }
+
+        var paddingTop = 25;
+        var saveButton = 55;
+        var slider = 25;
+        var uploadDeleteButtons = 40;
+        var parentHeight = $('body').height();
+
+        var totalHeight = viewportHeight + (boundaryHeight - viewportHeight) + paddingTop + saveButton + slider + uploadDeleteButtons;
+
+        if (parentHeight <= totalHeight) {
+            var factor = (parentHeight / (totalHeight));
+            console.log('createCroppie height parent and factor parentHeight, totalHeight', parentHeight, totalHeight);
+            console.log('createCroppie height parent and factor factor, viewportWidth, viewportHeight', factor, viewportWidth, viewportHeight);
+
+            viewportWidth = parseInt(viewportWidth * factor);
+            viewportHeight = parseInt(viewportHeight * factor);
+            boundaryWidth = viewportWidth;
+            boundaryHeight = viewportHeight;
+            console.log('createCroppie height make size smaller parentHeight, totalHeight, boundaryWidth, boundaryHeight', parentHeight, totalHeight, boundaryWidth, boundaryHeight);
+            $('#croppie<?php echo $uid; ?>').css("min-height", (boundaryHeight + 10) + "px");
+        } else {
+            console.log('createCroppie height', parentHeight, totalHeight, viewportHeight, boundaryWidth, boundaryHeight);
+        }
+
+
+        uploadCrop<?php echo $uid; ?> = $('#croppie<?php echo $uid; ?>').croppie({
+            //url: imageURL,
+            //enableExif: true,
+            enforceBoundary: <?php echo json_encode($enforceBoundary); ?>,
+            enableResizeboolean: true,
+            mouseWheelZoom: false,
+            viewport: {
+                width: viewportWidth,
+                height: viewportHeight
+            },
+            boundary: {
+                width: boundaryWidth,
+                height: boundaryHeight
+            }
+        });
+        $('#upload<?php echo $uid; ?>').off('change');
+        $('#upload<?php echo $uid; ?>').on('change', function() {
+            readFileCroppie(this, uploadCrop<?php echo $uid; ?>);
+        });
+
+        $('#upload-btn<?php echo $uid; ?>').off('click');
+        $('#upload-btn<?php echo $uid; ?>').on('click', function(ev) {
+            $('#upload<?php echo $uid; ?>').trigger("click");
+        });
+
+        $('#delete-btn<?php echo $uid; ?>').off('click');
+        $('#delete-btn<?php echo $uid; ?>').on('click', function(ev) {
+            restartCroppie<?php echo $uid; ?>('<?php echo getImageTransparent1pxURL(); ?>');
+        });
+
+        $('#croppie<?php echo $uid; ?>').croppie('bind', {
+            url: addGetParam(imageURL, 'cache', Math.random())
+        }).then(function() {
+            <?php
+            if ($enforceBoundary) {
+            ?>
+                $('#croppie<?php echo $uid; ?>').croppie('setZoom', <?php echo $zoom; ?>);
+            <?php
+            }
+            ?>
+        });
+    }
+
+    function restartCroppie<?php echo $uid; ?>(imageURL) {
+        console.log("restartCroppie<?php echo $uid; ?>", imageURL);
+        $('#croppie<?php echo $uid; ?>').croppie('destroy');
+        setTimeout(function() {
+            createCroppie<?php echo $uid; ?>(imageURL);
+        }, 1000);
+    }
+</script>

objects/functionCroppie.php

@@ -1,131 +1,98 @@
 <?php
-global $croppieFilesAdded;
+
-if (empty($croppieFilesAdded)) {
+function getCroppieElement(
-    ?>
+    $buttonTitle,
-    <link href="<?php echo getCDN(); ?>node_modules/croppie/croppie.css" rel="stylesheet" type="text/css"/>
+    $callBackJSFunction,
-    <script src="<?php echo getCDN(); ?>node_modules/croppie/croppie.min.js" type="text/javascript"></script>
+    $resultWidth = 0,
-    <?php
+    $resultHeight = 0,
+    $viewportWidth = 0,
+    $boundary = 25,
+    $viewportHeight = 0,
+    $enforceBoundary = true
+) {
+    global $global;
+
+    if (empty($resultWidth) && empty($resultHeight)) {
+        if (isMobile()) {
+            $viewportWidth = 250;
+        } else {
+            $viewportWidth = 800;
+        }
+
+        if (defaultIsPortrait()) {
+            $resultWidth = 540;
+            $resultHeight = 800;
+        } else {
+            $resultWidth = 1280;
+            $resultHeight = 720;
+        }
+    }
+
+    if (empty($viewportWidth)) {
+        $viewportWidth = $resultWidth;
+    }
+    $zoom = 0;
+    if (empty($viewportHeight)) {
+        $zoom = ($viewportWidth / $resultWidth);
+        $viewportHeight = $zoom * $resultHeight;
+    }
+    if (empty($enforceBoundary)) {
+        $boundary = 0;
+    }
+    $boundaryWidth = $viewportWidth + $boundary;
+    $boundaryHeight = $viewportHeight + $boundary;
+    $uid = uniqid();
+
+    $varsArray = [
+        'buttonTitle' => $buttonTitle,
+        'callBackJSFunction' => $callBackJSFunction,
+        'resultWidth' => $resultWidth,
+        'resultHeight' => $resultHeight,
+        'viewportWidth' => $viewportWidth,
+        'boundary' => $boundary,
+        'viewportHeight' => $viewportHeight,
+        'enforceBoundary' => $enforceBoundary,
+        'zoom' => $zoom,
+        'boundaryWidth' => $boundaryWidth,
+        'boundaryHeight' => $boundaryHeight,
+        'uid' => $uid,
+    ];
+
+    $contents = getIncludeFileContent($global['systemRootPath'] . 'objects/functionCroppie.js.php', $varsArray);
+
+    $callBackJSFunction = addcslashes($callBackJSFunction, "'");
+    return [
+        "html" => $contents,
+        "id" => "croppie{$uid}",
+        "uploadCropObject" => "uploadCrop{$uid}",
+        "getCroppieFunction" => "getCroppie(uploadCrop{$uid}, '{$callBackJSFunction}', {$resultWidth}, {$resultHeight});",
+        "createCroppie" => "createCroppie{$uid}",
+        "restartCroppie" => "restartCroppie{$uid}",
+    ];
 }
-$croppieFilesAdded = 1;
-?>
-<div class="croppieDiv" objectName="uploadCrop<?php echo $uid; ?>">
-    <div class="col-md-12 " >
-        <div id="croppie<?php echo $uid; ?>" style="min-height: <?php echo $boundaryHeight+40; ?>px;"></div>
-        <div class="clearfix"></div>
-        <small class="text-muted text-center" style="display: block;"><?php echo __('Width'); ?>: <?php echo $resultWidth; ?>px | <?php echo __('Height'); ?>: <?php echo $resultHeight; ?>px</small>
-        <div class="clearfix"></div>
-        <div class="btn-group btn-group-justified" role="group">
-            <a id="upload-btn<?php echo $uid; ?>" class="btn btn-primary"><i class="fa fa-upload"></i> <?php echo $buttonTitle; ?></a>
-            <a id="delete-btn<?php echo $uid; ?>" class="btn btn-danger"><i class="fa fa-trash"></i> <?php echo __('Delete'); ?></a>
-        </div>
-    </div>
-    <div class="col-md-12 ">
-        <input type="file" id="upload<?php echo $uid; ?>" value="Choose a file" accept="image/*" style="display:none;" />
-    </div>
-</div>
-<script>
-    var uploadCrop<?php echo $uid; ?>;
-    var createCroppie<?php echo $uid; ?>Timeout;
-    function createCroppie<?php echo $uid; ?>(imageURL) {
-        clearTimeout(createCroppie<?php echo $uid; ?>Timeout);
-        if($('#croppie<?php echo $uid; ?>').is(":hidden")){
-            createCroppie<?php echo $uid; ?>Timeout = setTimeout(function(){
-                createCroppie<?php echo $uid; ?>(imageURL);
-            },1000);
-            return false;
-        }
-        var viewportWidth = <?php echo $viewportWidth; ?>;
-        var viewportHeight = <?php echo $viewportHeight; ?>;
-        var boundaryWidth = <?php echo $boundaryWidth; ?>;
-        var boundaryHeight = <?php echo $boundaryHeight; ?>;
 
-        var parentWidth = $('#croppie<?php echo $uid; ?>').parent().width();
+function saveCroppieImageElement($destination, $postIndex = "imgBase64")
-        var totalWidth = viewportWidth+(boundaryWidth-viewportWidth);
+{
+    if (empty($destination) || empty($_POST[$postIndex])) {
+        return false;
+    }
+    $fileData = base64DataToImage($_POST[$postIndex]);
 
-        if(parentWidth <= totalWidth){
+    $path_parts = pathinfo($destination);
-            var factor = (parentWidth/(totalWidth));
+    $tmpDestination = $destination;
-            console.log('createCroppie parent and factor ', parentWidth, totalWidth, factor, viewportWidth, viewportHeight, boundaryWidth, boundaryHeight);
+    $extension = mb_strtolower($path_parts['extension']);
-
+    if ($extension !== 'png') {
-            viewportWidth = parseInt(viewportWidth * factor);
+        $tmpDestination = $destination . '.png';
-            viewportHeight = parseInt(viewportHeight * factor);
-            boundaryWidth = viewportWidth;
-            boundaryHeight = viewportHeight;
-            console.log('createCroppie make size smaller ', viewportWidth, viewportHeight, boundaryWidth, boundaryHeight);
-            $('#croppie<?php echo $uid; ?>').css("min-height", (boundaryHeight+10)+"px");
-        }else{
-            console.log('createCroppie ', viewportWidth, viewportHeight, boundaryWidth, boundaryHeight);
-        }
-
-        var paddingTop = 25;
-        var saveButton = 55;
-        var slider = 25;
-        var uploadDeleteButtons = 40;
-        var parentHeight = $('body').height();
-
-        var totalHeight = viewportHeight+(boundaryHeight-viewportHeight)+paddingTop+saveButton+slider+uploadDeleteButtons;
-
-        if(parentHeight <= totalHeight){
-            var factor = (parentHeight/(totalHeight));
-            console.log('createCroppie height parent and factor parentHeight, totalHeight', parentHeight, totalHeight);
-            console.log('createCroppie height parent and factor factor, viewportWidth, viewportHeight', factor, viewportWidth, viewportHeight);
-
-            viewportWidth = parseInt(viewportWidth * factor);
-            viewportHeight = parseInt(viewportHeight * factor);
-            boundaryWidth = viewportWidth;
-            boundaryHeight = viewportHeight;
-            console.log('createCroppie height make size smaller parentHeight, totalHeight, boundaryWidth, boundaryHeight', parentHeight, totalHeight, boundaryWidth, boundaryHeight);
-            $('#croppie<?php echo $uid; ?>').css("min-height", (boundaryHeight+10)+"px");
-        }else{
-            console.log('createCroppie height', parentHeight, totalHeight, viewportHeight, boundaryWidth, boundaryHeight);
-        }
-
-
-        uploadCrop<?php echo $uid; ?> = $('#croppie<?php echo $uid; ?>').croppie({
-            //url: imageURL,
-            //enableExif: true,
-            enforceBoundary: <?php echo json_encode($enforceBoundary); ?>,
-            enableResizeboolean: true,
-            mouseWheelZoom: false,
-            viewport: {
-                width: viewportWidth,
-                height: viewportHeight
-            },
-            boundary: {
-                width: boundaryWidth,
-                height: boundaryHeight
-            }
-        });
-        $('#upload<?php echo $uid; ?>').off('change');
-        $('#upload<?php echo $uid; ?>').on('change', function () {
-            readFileCroppie(this, uploadCrop<?php echo $uid; ?>);
-        });
-
-        $('#upload-btn<?php echo $uid; ?>').off('click');
-        $('#upload-btn<?php echo $uid; ?>').on('click', function (ev) {
-            $('#upload<?php echo $uid; ?>').trigger("click");
-        });
-
-        $('#delete-btn<?php echo $uid; ?>').off('click');
-        $('#delete-btn<?php echo $uid; ?>').on('click', function (ev) {
-            restartCroppie<?php echo $uid; ?>('<?php echo getImageTransparent1pxURL(); ?>');
-        });
-
-        $('#croppie<?php echo $uid; ?>').croppie('bind', {url: addGetParam(imageURL, 'cache', Math.random())}).then(function () {
-            <?php
-            if($enforceBoundary){
-                ?>
-                $('#croppie<?php echo $uid; ?>').croppie('setZoom', <?php echo $zoom; ?>);
-                <?php
-            }
-            ?>
-        });
     }
 
-    function restartCroppie<?php echo $uid; ?>(imageURL) {
+    $saved = _file_put_contents($tmpDestination, $fileData);
-        console.log("restartCroppie<?php echo $uid; ?>", imageURL);
+
-        $('#croppie<?php echo $uid; ?>').croppie('destroy');
+    if ($saved) {
-        setTimeout(function () {
+        if ($extension !== 'png') {
-            createCroppie<?php echo $uid; ?>(imageURL);
+            convertImage($tmpDestination, $destination, 100);
-        }, 1000);
+            unlink($tmpDestination);
+        }
     }
-</script>
+    //var_dump($saved, $tmpDestination, $destination, $extension);exit;
+    return $saved;
+}

objects/functions.php

@@ -8184,90 +8184,23 @@ function getCroppie(
     $enforceBoundary = true
 ) {
     global $global;
-
+    require_once $global['systemRootPath'] . 'objects/functionCroppie.php';
-    if (empty($resultWidth) && empty($resultHeight)) {
+    return getCroppieElement(
-        if (isMobile()) {
+        $buttonTitle,
-            $viewportWidth = 250;
+        $callBackJSFunction,
-        } else {
+        $resultWidth ,
-            $viewportWidth = 800;
+        $resultHeight ,
-        }
+        $viewportWidth,
-
+        $boundary ,
-        if (defaultIsPortrait()) {
+        $viewportHeight,
-            $resultWidth = 540;
+        $enforceBoundary );
-            $resultHeight = 800;
-        } else {
-            $resultWidth = 1280;
-            $resultHeight = 720;
-        }
-    }
-
-    if (empty($viewportWidth)) {
-        $viewportWidth = $resultWidth;
-    }
-    $zoom = 0;
-    if (empty($viewportHeight)) {
-        $zoom = ($viewportWidth / $resultWidth);
-        $viewportHeight = $zoom * $resultHeight;
-    }
-    if (empty($enforceBoundary)) {
-        $boundary = 0;
-    }
-    $boundaryWidth = $viewportWidth + $boundary;
-    $boundaryHeight = $viewportHeight + $boundary;
-    $uid = uniqid();
-
-    $varsArray = [
-        'buttonTitle' => $buttonTitle,
-        'callBackJSFunction' => $callBackJSFunction,
-        'resultWidth' => $resultWidth,
-        'resultHeight' => $resultHeight,
-        'viewportWidth' => $viewportWidth,
-        'boundary' => $boundary,
-        'viewportHeight' => $viewportHeight,
-        'enforceBoundary' => $enforceBoundary,
-        'zoom' => $zoom,
-        'boundaryWidth' => $boundaryWidth,
-        'boundaryHeight' => $boundaryHeight,
-        'uid' => $uid,
-    ];
-
-    $contents = getIncludeFileContent($global['systemRootPath'] . 'objects/functionCroppie.php', $varsArray);
-
-    $callBackJSFunction = addcslashes($callBackJSFunction, "'");
-    return [
-        "html" => $contents,
-        "id" => "croppie{$uid}",
-        "uploadCropObject" => "uploadCrop{$uid}",
-        "getCroppieFunction" => "getCroppie(uploadCrop{$uid}, '{$callBackJSFunction}', {$resultWidth}, {$resultHeight});",
-        "createCroppie" => "createCroppie{$uid}",
-        "restartCroppie" => "restartCroppie{$uid}",
-    ];
 }
 
 function saveCroppieImage($destination, $postIndex = "imgBase64")
 {
-    if (empty($destination) || empty($_POST[$postIndex])) {
+    global $global;
-        return false;
+    require_once $global['systemRootPath'] . 'objects/functionCroppie.php';
-    }
+    return saveCroppieImageElement($destination, $postIndex);
-    $fileData = base64DataToImage($_POST[$postIndex]);
-
-    $path_parts = pathinfo($destination);
-    $tmpDestination = $destination;
-    $extension = mb_strtolower($path_parts['extension']);
-    if ($extension !== 'png') {
-        $tmpDestination = $destination . '.png';
-    }
-
-    $saved = _file_put_contents($tmpDestination, $fileData);
-
-    if ($saved) {
-        if ($extension !== 'png') {
-            convertImage($tmpDestination, $destination, 100);
-            unlink($tmpDestination);
-        }
-    }
-    //var_dump($saved, $tmpDestination, $destination, $extension);exit;
-    return $saved;
 }
 
 function get_ffmpeg($ignoreGPU = false)

view/js/script.js

@@ -2163,18 +2163,6 @@ function readFileCroppie(input, crop) {
     }
 }
 
-function getCroppie(uploadCropObject, callback, width, height) {
-    //console.log('getCroppie 1', uploadCropObject);
-    var ret = uploadCropObject.croppie('result', { type: 'base64', size: { width: width, height: height }, format: 'png' }).then(function (resp) {
-        ////console.log('getCroppie 2 ' + callback, resp);
-        eval(callback + "(resp);");
-    }).catch(function (err) {
-        //console.log('cropieError getCroppie => ' + callback, err);
-        eval(callback + "(null);");
-    });
-    //console.log('getCroppie 3', ret);
-}
-
 let tooltipTimeout = null;
 let isExecutingTooltip = false;
 

view/managerCategories_body.php

@@ -451,7 +451,7 @@ echo $croppie2['restartCroppie'] . "(getCategoryBackgroundPath(0));";
 echo $croppie1['getCroppieFunction'];
 ?>
 
-            }, 500);
+            }, 1000);
 
             return false;
         });