Ticket #3635 - Uploaders refactoring. Usage of bx_get_scripts and bx_get_style for dynamic loading.

inc/classes/BxDolTemplate.php

@@ -1904,7 +1904,7 @@ class BxDolTemplate extends BxDolFactory implements iBxDolSingleton
         $sMaskCondition = "if(%s) {%s}";
         $sMaskConditionWithElse = "if(%s) {%s} else {setTimeout(function() {%s}, 10);}";
 
-        $iRev = (int)getParam('sys_revision');
+        $iRev = $this->_getRevision();
 
         $aFilesLocated = [];
         foreach($aFiles as $sFile) {
@@ -2081,7 +2081,7 @@ class BxDolTemplate extends BxDolFactory implements iBxDolSingleton
      */
     function _wrapInTagJsCode($sCode)
     {
-        return "<script language=\"javascript\">\n<!--\n" . $sCode . "\n-->\n</script>";
+        return "<script language=\"javascript\">\n" . $sCode . "\n</script>";
     }
 
     /**
@@ -2093,7 +2093,46 @@ class BxDolTemplate extends BxDolFactory implements iBxDolSingleton
      */
     function addCss($mixedFiles, $bDynamic = false)
     {
-        return $this->_processFiles('css', 'add', $mixedFiles, $bDynamic);
+        if($bDynamic)
+            return $this->addCssPreloadedWrapped($mixedFiles);
+        else
+            return $this->_processFiles('css', 'add', $mixedFiles, $bDynamic);
+    }
+
+    function addCssPreloaded($aFiles)
+    {
+        if(!$aFiles)
+            return '';
+
+        if(!is_array($aFiles))
+            $aFiles = [$aFiles];
+
+        $sMaskLoad = "bx_get_style(%s);";
+
+        $iRev = $this->_getRevision();
+
+        $aFilesLocated = [];
+        foreach($aFiles as $sFile) {
+            $mixedFile = $this->_locateFile('css', $sFile);
+            if($mixedFile === false)
+                continue;
+
+            list($sUrl) = $mixedFile;
+
+            $aFilesLocated[] = bx_append_url_params($sUrl, ['rev' => $iRev]);
+        }
+        $sFilesLocated = json_encode($aFilesLocated);
+
+        return sprintf($sMaskLoad, $sFilesLocated);
+    }
+
+    function addCssPreloadedWrapped($aFiles)
+    {
+        $sCode = $this->addCssPreloaded($aFiles);
+        if(!$sCode)
+            return '';
+
+        return $this->_wrapInTagJsCode($sCode);
     }
 
     /**
@@ -2440,7 +2479,7 @@ class BxDolTemplate extends BxDolFactory implements iBxDolSingleton
      */
     function _includeFiles($sType, &$aFiles)
     {
-        $iRev = (int)getParam('sys_revision');
+        $iRev = $this->_getRevision();
         $sUpcaseType = ucfirst($sType);
 
         $sMethodWrap = '_wrapInTag' . $sUpcaseType;
@@ -2478,7 +2517,7 @@ class BxDolTemplate extends BxDolFactory implements iBxDolSingleton
         if(is_string($mixedFiles))
             $mixedFiles = array($mixedFiles);
 
-        $iRev = (int)getParam('sys_revision');
+        $iRev = $this->_getRevision();
 
         $sUpcaseType = ucfirst($sType);
         $sMethodLocate = '_getAbsoluteLocation' . $sUpcaseType;
@@ -3068,6 +3107,16 @@ class BxDolTemplate extends BxDolFactory implements iBxDolSingleton
         return BX_DOL_URL_ROOT . 'gzip_loader.php?file=' . $sName . '.' . $sType;
     }
 
+    /**
+     * Get current revision number.
+     * 
+     * @return integer number
+     */
+    function _getRevision()
+    {
+        return (int)getParam('sys_revision');
+    }
+
     /**
      *
      * Functions to display pages with errors, messages and so on.

inc/classes/BxDolUploader.php

@@ -115,6 +115,11 @@ abstract class BxDolUploader extends BxDolFactory
     protected $_sUploadErrorMessages; ///< upload error message
 
     protected $_sButtonTemplate; ///< template name for displaying upload button
+    protected $_sJsTemplate; ///< template name for displaying upload JS
+    protected $_sUploaderFormTemplate; ///< template name for displaying uploader form
+
+    protected $_aJs;
+    protected $_aCss;
 
     /**
      * constructor
@@ -136,6 +141,9 @@ abstract class BxDolUploader extends BxDolFactory
         $this->_sResultContainerId = 'bx-form-input-files-' . $sUniqId . '-upload-result';
         $this->_sErrorsContainerId = 'bx-form-input-files-' . $sUniqId . '-errors';
         $this->_sFormContainerId = 'bx-form-input-files-' . $sUniqId . '-form-cont';
+
+        $this->_aJs = ['BxDolUploader.js'];
+        $this->_aCss = ['uploaders.css'];
     }
 
     static public function getObjectInstance($sObject, $sStorageObject, $sResultContainerId, $oTemplate = false)
@@ -160,7 +168,7 @@ abstract class BxDolUploader extends BxDolFactory
      * Is uploader available?
      * @return boolean
      */
-    function isAvailable()
+    public function isAvailable()
     {
         return $this->_aObject['active'] ? true : false;
     }
@@ -239,22 +247,26 @@ abstract class BxDolUploader extends BxDolFactory
      * Show uploader button.
      * @return HTML string
      */
-    public function getUploaderButton($mixedGhostTemplate, $isMultiple = true, $aParams = array(), $bDynamic = false)
+    public function getUploaderButton($aParams = array())
+    {
+        return $this->_oTemplate->parseHtmlByName($this->_sButtonTemplate, $aParams);
+    }
+
+    /**
+     * Show uploader JS.
+     * @return HTML string
+     */
+    public function getUploaderJs($mixedGhostTemplate, $isMultiple = true, $aParams = array(), $bDynamic = false)
     {
         $sJsValue = '';
-        if (is_array($mixedGhostTemplate)) {
-            $sJsValue = "{\n";
-            foreach ($mixedGhostTemplate as $iFileId => $s) {
-                $sJsValue .= $iFileId . ':' . "'" . bx_js_string($s, BX_ESCAPE_STR_APOS) . "',\n";
-            }
-            $sJsValue = substr($sJsValue, 0, -2);
-            $sJsValue .= "}\n";
-        } else {
+        if(is_array($mixedGhostTemplate))
+            $sJsValue = json_encode($mixedGhostTemplate);
+        else
             $sJsValue = "'" . bx_js_string($mixedGhostTemplate, BX_ESCAPE_STR_APOS) . "'";
-        }
 
-        $aParamsDefault = array (
-            'uploader_instance_name' => $this->getNameJsInstanceUploader(),
+        $sJsObject = $this->getNameJsInstanceUploader();
+        $sJsCode = $this->_oTemplate->parseHtmlByName($this->_sJsTemplate, array_merge([
+            'uploader_instance_name' => $sJsObject,
             'engine' => $this->_aObject['object'],
             'storage_object' => $this->_sStorageObject,
             'images_transcoder' => '',
@@ -262,27 +274,60 @@ abstract class BxDolUploader extends BxDolFactory
             'template_ghost' => $sJsValue,
             'multiple' => $isMultiple ? 1 : 0,
             'storage_private' => isset($aParams['storage_private']) ? $aParams['storage_private'] : 1,
-        );
-        $aParams = array_merge($aParamsDefault, $aParams);
-        return $this->addCssJs ($bDynamic) . $this->_oTemplate->parseHtmlByName($this->_sButtonTemplate, $aParams);
+            'bx_if:restore_ghosts' => [
+                'condition' => isset($aParams['is_init_ghosts']) ? $aParams['is_init_ghosts'] : 1,
+                'content' => [
+                    'uploader_instance_name' => $sJsObject,
+                    'is_init_reordering' => isset($aParams['is_init_reordering']) ? $aParams['is_init_reordering'] : 0,
+                ]
+            ]
+        ], $aParams));
+
+        if(!$bDynamic) {
+            $this->_oTemplate->addJs($this->_aJs);
+            $sJsCode = $this->_oTemplate->addJsCodeOnLoadWrapped($sJsCode);
+        }
+        else 
+            $sJsCode = $this->_oTemplate->addJsPreloadedWrapped($this->_aJs, $sJsCode);
+
+        return $this->addCssJs($bDynamic) . $sJsCode;
     }
 
     /**
      * add necessary js, css files and js translations
      */ 
-    public function addCssJs ($bDynamic = false)
+    public function addCssJs($bDynamic = false)
     {
         $s = '';
-        $s .= $this->_oTemplate->addCss('uploaders.css', $bDynamic);
-        $s .= $this->_oTemplate->addJs('BxDolUploader.js', $bDynamic);
-        $s .= $this->_oTemplate->addJsTranslation(array(
+        $s .= $this->_oTemplate->addCss($this->_aCss, $bDynamic);
+        $s .= $this->_oTemplate->addJsTranslation([
             '_sys_uploader_confirm_leaving_page',
             '_sys_uploader_confirm_close_popup',
             '_sys_uploader_upload_canceled',
-        ), $bDynamic);
+        ], $bDynamic);
         return $bDynamic ? $s : '';
     }
 
+    public function addJs($mixedFile)
+    {
+        if(!is_array($mixedFile))
+            $mixedFile = [$mixedFile];
+
+        foreach($mixedFile as $sFile)
+            if(!in_array($sFile, $this->_aJs))
+                $this->_aJs[] = $sFile;
+    }
+
+    public function addCss($mixedFile)
+    {
+        if(!is_array($mixedFile))
+            $mixedFile = [$mixedFile];
+
+        foreach($mixedFile as $sFile)
+            if(!in_array($sFile, $this->_aCss))
+                $this->_aCss[] = $sFile;
+    }
+
     /**
      * Get uploader button title
      */
@@ -467,7 +512,7 @@ abstract class BxDolUploader extends BxDolFactory
             return null;
         return $oStorage->getAllowedExtensions();
     }
-    
+
     protected function getGhostTemplateVars($aFile, $iProfileId, $iContentId, $oStorage, $oImagesTranscoder)
     {
         return array();

inc/js/classes/BxDolUploader.js

@@ -435,9 +435,7 @@ function BxDolUploaderHTML5 (sUploaderObject, sStorageObject, sUniqId, options)
             this._uploader = null;
 
         var $this = this;
-        
-        console.log(o);
-        
+
         var _options = {
             allowProcess: false,
             allowRevert: false,

inc/js/functions.js

@@ -1094,11 +1094,6 @@ function bx_activate_anim_icons(sColor)
     });
 }
 
-function bx_get_style(sUrl)
-{
-	$("head").append($("<link rel='stylesheet' href='" + sUrl + "' type='text/css' />"));
-}
-
 function bx_get_param(s) {
     if (!window.aDolOptions || !aDolOptions[s])
         return false;
@@ -1214,12 +1209,28 @@ function bx_check_mq()
     return window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, "");
 }
 
+/**
+ * This function loads the passed list of CSS files. In case when this function is called for dynamic loading 
+ * of the same file but many times it allows to avoid multiply loadings of the same file.
+ */
+function bx_get_style(mixedUrl)
+{
+    if(typeof(mixedUrl) === 'string')
+        mixedUrl = new Array(mixedUrl);
+
+    for(let i = 0; i < mixedUrl.length; i++) {
+        if(mixedUrl[i] === undefined || !mixedUrl[i].length || $("link[href = '" + mixedUrl[i] + "']").length > 0)
+            continue;
+
+        $("head").append($("<link rel='stylesheet' href='" + mixedUrl[i] + "' type='text/css' />"));
+    }
+}
+
 /**
  * This function loads the passed list of js files and executes callback function when the all files are loaded.
  * In case when this function is called for dynamic loading of the same file but many times (like Plyr video init)
  * it allows to avoid multiply loadings of the same file.
  */
-
 function bx_get_scripts (aFiles, fCallback)
 {
     let iCounter = 0;

modules/base/text/template/css/forms.css

@@ -1,9 +1,9 @@
 @import url(../../../general/template/css/forms.css);
 
 /*-- Entry Form: Attachments custom elements --*/
-.bx-base-text-attachment-item {
+.bx-form-advanced-wrapper .bx-base-text-attachment-item {
     margin-top: 0;
 }
-.bx-base-text-attachment-item .bx-form-input-files-uploaders {
+.bx-form-advanced-wrapper .bx-base-text-attachment-item .bx-form-input-files-uploaders {
     margin-top: 0;
 }

modules/base/text/template/uploader_button_html5_attach.html

@@ -1 +0,0 @@
-<bx_include_auto:uploader_button_html5_js.html />

modules/base/text/template/uploader_button_record_video_attach.html

@@ -1 +0,0 @@
-<bx_include_auto:uploader_button_record_video_js.html />

modules/base/text/template/uploader_button_simple_attach.html

@@ -1 +0,0 @@
-<bx_include_auto:uploader_button_simple_js.html />

modules/boonex/files/classes/BxFilesSearchResult.php

@@ -409,19 +409,14 @@ class BxFilesSearchResult extends BxBaseModTextSearchResult
             $sUniqId = genRndPwd (8, false);
             $oUploader = BxDolUploader::getObjectInstance('bx_files_html5', $this->oModule->_oConfig->CNF['OBJECT_STORAGE'], $sUniqId, $this->oModule->_oTemplate);
 
-            $aUploaderParams = array(
-                'button_title' => '',
-                'storage_private' => '0',
-                'images_transcoder' => 'bx_files_preview',
-                'content_id' => 0,
-                'attrs' => bx_convert_array2attrs(['style' => 'display:none;']),
-                'btn_class' => '',
-            );
-
             $iMaxNestingLevel = intval(getParam($this->oModule->_oConfig->CNF['PARAM_MAX_NESTING_LEVEL']));
             $aUploadButtonParams = [
                 'js_object' => $sJsObject,
-                'uploader_code' => $oUploader->getUploaderButton('', true, $aUploaderParams, true),
+                'uploader_code' => $oUploader->getUploaderJs('', true, [
+                    'storage_private' => '0',
+                    'images_transcoder' => 'bx_files_preview',
+                    'content_id' => 0,
+                ], true),
                 'uploader_js_object' => $oUploader->getNameJsInstanceUploader(),
                 'uploader_click_handler' => $oUploader->getNameJsInstanceUploader() . '.showUploaderForm();',
                 'bx_if:create_folder_allowed' => [

template/form_field_uploader.html

@@ -6,9 +6,4 @@ __info__
 __error__
 <div id="__id_container_errors__" class="bx-form-input-files-errors"></div>
 <div id="__id_container_result__" class="bx-form-input-files-result bx-clearfix"></div>
-<script>
-    $(document).ready(function() {
-        if (__is_init_ghosts__)
-            __uploader_instance_name__.restoreGhosts(__is_init_reordering__);
-    });
-</script>
+__uploaders_js__

template/scripts/BxBaseFormView.php

@@ -1402,51 +1402,60 @@ BLAH;
             return '';
 
         $sUniqId = !empty($aInput['uploaders_id']) ? $aInput['uploaders_id'] : genRndPwd (8, false);
+        $bInitGhosts = isset($aInput['init_ghosts']) && !$aInput['init_ghosts'] ? 0 : 1;
+        $bInitReordering = empty($aInput['init_reordering']) ? 0 : 1;
 
-        $sUploaders = '';
         $oUploader = null;
+        $sUploadersButtons = $sUploadersJs = '';
         foreach ($aInput['uploaders'] as $sUploaderObject) {
             $oUploader = BxDolUploader::getObjectInstance($sUploaderObject, $aInput['storage_object'], $sUniqId, $this->oTemplate);
-            if (!$oUploader)
+            if(!$oUploader)
                 continue;
 
-            $sGhostTemplate = $this->genGhostTemplate($aInput);
-
+            //--- Get Button code.
             $aAttrs = !empty($aInput['attrs']) ? $aInput['attrs'] : array();
-            if (empty($aInput['attrs']['disabled']))
+            if(empty($aInput['attrs']['disabled']))
                 $aAttrs = array_merge($aAttrs, array('onclick' => $oUploader->getNameJsInstanceUploader() . '.showUploaderForm();'));
-                
-            $aParams = array(
+
+            $aParamsButtons = [
+                'attrs' => bx_convert_array2attrs($aAttrs),
+                'btn_class' => !empty($aInput['attrs']['disabled']) ? 'bx-btn-disabled' : '',
                 'button_title' => bx_js_string($oUploader->getUploaderButtonTitle(isset($aInput['upload_buttons_titles']) ? $aInput['upload_buttons_titles'] : false)),
+            ];
+
+            $sUploadersButtons .= $oUploader->getUploaderButton($aParamsButtons);
+
+            //--- Get JS code.
+            $sGhostTemplate = $this->genGhostTemplate($aInput);
+
+            $aParamsJs = [
                 'content_id' => isset($aInput['content_id']) ? $aInput['content_id'] : '',
                 'storage_private' => isset($aInput['storage_private']) ? $aInput['storage_private'] : '1',
-                'attrs' => bx_convert_array2attrs($aAttrs),
-                'btn_class' => !empty($aInput['attrs']['disabled']) ? 'bx-btn-disabled' : '',
-            );
-            if (isset($aInput['images_transcoder']) && $aInput['images_transcoder'])
-                $aParams['images_transcoder'] = bx_js_string($aInput['images_transcoder']);
+                'is_init_ghosts' => $bInitGhosts,
+                'is_init_reordering' => $bInitReordering
+            ];
+            if(isset($aInput['images_transcoder']) && $aInput['images_transcoder'])
+                $aParamsJs['images_transcoder'] = bx_js_string($aInput['images_transcoder']);
 
-            $sUploaders .= $oUploader->getUploaderButton($sGhostTemplate, isset($aInput['multiple']) ? $aInput['multiple'] : true, $aParams, $this->_bDynamicMode);
+            $sUploadersJs .= $oUploader->getUploaderJs($sGhostTemplate, isset($aInput['multiple']) ? $aInput['multiple'] : true, $aParamsJs, $this->_bDynamicMode);
         }
-        
+
         if(!$oUploader)
             return '';
 
-        $bInitReordering = !empty($aInput['init_reordering']);
         if($bInitReordering) {
             $this->addCssJsUi();
             $this->addCssJsUiSortable();
         }
 
         return $this->oTemplate->parseHtmlByName('form_field_uploader.html', array(
-            'uploaders_buttons' => $sUploaders,
+            'uploaders_buttons' => $sUploadersButtons,
             'info' => $sInfo,
             'error' => $sError,
             'id_container_errors' => $oUploader ? $oUploader->getIdContainerErrors() : '',
             'id_container_result' => $oUploader ? $oUploader->getIdContainerResult() : '',
             'uploader_instance_name' => $oUploader ? $oUploader->getNameJsInstanceUploader() : '',
-            'is_init_ghosts' => isset($aInput['init_ghosts']) && !$aInput['init_ghosts'] ? 0 : 1,
-            'is_init_reordering' => !$bInitReordering ? 0 : 1
+            'uploaders_js' => $sUploadersJs,
         ));
     }
 

template/scripts/BxBaseUploaderCrop.php

@@ -13,12 +13,21 @@
  */
 class BxBaseUploaderCrop extends BxDolUploader
 {
-    protected $_sUploaderFormTemplate = 'uploader_form_crop.html';
-    
-    function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
+    public function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
     {
         parent::__construct($aObject, $sStorageObject, $sUniqId, $oTemplate);
+
         $this->_sButtonTemplate = 'uploader_button_crop.html';
+        $this->_sJsTemplate = 'uploader_button_crop_js.html';
+        $this->_sUploaderFormTemplate = 'uploader_form_crop.html';
+
+        $this->addJs([
+            'croppie/croppie.min.js'
+        ]);
+
+        $this->addCss([
+            BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'croppie/|croppie.css'
+        ]);
     }
 
     /**
@@ -37,12 +46,13 @@ class BxBaseUploaderCrop extends BxDolUploader
     /**
      * add necessary js, css files and js translations
      */ 
-    public function addCssJs ($bDynamic = false)
+    public function addCssJs($bDynamic = false)
     {
-        $s = parent::addCssJs ($bDynamic);
-        $s .= $this->_oTemplate->addCss(BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'croppie/|croppie.css', $bDynamic);
-        $s .= $this->_oTemplate->addJs('croppie/croppie.min.js', $bDynamic);
-        $s .= $this->_oTemplate->addJsTranslation(array('_sys_uploader_crop_err_upload', '_sys_uploader_crop_wrong_ext'), $bDynamic);
+        $s = parent::addCssJs($bDynamic);
+        $s .= $this->_oTemplate->addJsTranslation([
+            '_sys_uploader_crop_err_upload', 
+            '_sys_uploader_crop_wrong_ext'
+        ], $bDynamic);
         return $bDynamic ? $s : '';
     }
     

template/scripts/BxBaseUploaderHTML5.php

@@ -15,25 +15,20 @@
 class BxBaseUploaderHTML5 extends BxDolUploader
 {
     protected $_sDivId; ///< div id where upload button will be placed
-    protected $_sUploaderFormTemplate = 'uploader_form_html5.html';
+    protected $_sFocusDivId;
 
-    function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
+    public function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
     {
         parent::__construct($aObject, $sStorageObject, $sUniqId, $oTemplate);
 
         $this->_sDivId = 'bx-form-input-files-' . $sUniqId . '-div-' . $this->_aObject['object'];
         $this->_sFocusDivId = 'bx-form-input-files-' . $sUniqId . '-focus-' . $this->_aObject['object'];
-        $this->_sButtonTemplate = 'uploader_button_html5.html';
-    }
 
-    /**
-     * add necessary js, css files and js translations
-     */ 
-    public function addCssJs ($bDynamic = false)
-    {
-        $s = parent::addCssJs ($bDynamic);
+        $this->_sButtonTemplate = 'uploader_button_html5.html';
+        $this->_sJsTemplate = 'uploader_button_html5_js.html';
+        $this->_sUploaderFormTemplate = 'uploader_form_html5.html';
 
-        $aJs = [
+        $this->addJs([
             'filepond/filepond.min.js',
             'filepond/filepond-plugin-image-preview.min.js',
             'filepond/filepond-plugin-image-transform.min.js',
@@ -41,19 +36,12 @@ class BxBaseUploaderHTML5 extends BxDolUploader
             'filepond/filepond-plugin-image-resize.min.js',
             'filepond/filepond-plugin-file-validate-size.min.js',
             'filepond/filepond-plugin-file-validate-type.js',
-        ];
-
-        if($bDynamic)
-            $s .= $this->_oTemplate->addJsPreloadedWrapped($aJs);
-        else
-            $this->_oTemplate->addJs($aJs);
-        
-        $s .= $this->_oTemplate->addCss([
-                BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'filepond/|filepond.min.css',
-                BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'filepond/|filepond-plugin-image-preview.min.css',
-            ], $bDynamic);
+        ]);
 
-        return $bDynamic ? $s : '';
+        $this->addCss([
+            BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'filepond/|filepond.min.css',
+            BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'filepond/|filepond-plugin-image-preview.min.css',
+        ]);
     }
 
     /**

template/scripts/BxBaseUploaderRecordVideo.php

@@ -16,19 +16,17 @@ define('BX_UPLOADER_VIDEO_BITRATE', 1000000); //1Mbit for video
 
 class BxBaseUploaderRecordVideo extends BxBaseUploaderSimple
 {
-    protected $_sUploaderFormTemplate = 'uploader_form_record_video.html';
-
-    function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
+    public function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
     {
         parent::__construct($aObject, $sStorageObject, $sUniqId, $oTemplate);
+
         $this->_sButtonTemplate = 'uploader_button_record_video.html';
-    }
+        $this->_sJsTemplate = 'uploader_button_record_video_js.html';
+        $this->_sUploaderFormTemplate = 'uploader_form_record_video.html';
 
-    public function getUploaderButton($mixedGhostTemplate, $isMultiple = true, $aParams = array(), $bDynamic = false) {
-        if (!$aParams) $aParams = [];
-        $aParams['audio_bitrate'] = BX_UPLOADER_AUDIO_BITRATE;
-        $aParams['video_bitrate'] = BX_UPLOADER_VIDEO_BITRATE;
-        return parent::getUploaderButton($mixedGhostTemplate, $isMultiple, $aParams, $bDynamic);
+        $this->addJs([
+            'RecordRTC.min.js'
+        ]);
     }
 
     public function getUploaderButtonTitle($mixed = false)
@@ -36,14 +34,26 @@ class BxBaseUploaderRecordVideo extends BxBaseUploaderSimple
         return _t('_sys_uploader_record_video_button_name');
     }
 
-    public function addCssJs ($bDynamic = false) {
-        $sAddon = $this->_oTemplate->addJs('RecordRTC.min.js', $bDynamic);
-        $sAddon .= $this->_oTemplate->addJsTranslation([
+    public function getUploaderJs($mixedGhostTemplate, $isMultiple = true, $aParams = array(), $bDynamic = false)
+    {
+        if(!$aParams) 
+            $aParams = [];
+
+        return parent::getUploaderJs($mixedGhostTemplate, $isMultiple, array_merge($aParams, [
+            'audio_bitrate' => BX_UPLOADER_AUDIO_BITRATE,
+            'video_bitrate' => BX_UPLOADER_VIDEO_BITRATE
+        ]), $bDynamic);
+    }
+
+    public function addCssJs ($bDynamic = false)
+    {
+        $s = parent::addCssJs($bDynamic);
+        $s .= $this->_oTemplate->addJsTranslation([
             '_sys_uploader_camera_capture_failed',
             '_sys_uploader_record_video_mb',
             '_sys_uploader_unsupported_browser',
         ], $bDynamic);
-        return parent::addCssJs($bDynamic).($bDynamic ? $sAddon : '');
+        return $bDynamic ? $s : '';
     }
 
     protected function getRestrictionsText ()

template/scripts/BxBaseUploaderSimple.php

@@ -14,13 +14,15 @@
 class BxBaseUploaderSimple extends BxDolUploader
 {
     protected $_sIframeId;
-    protected $_sUploaderFormTemplate = 'uploader_form_simple.html';
 
-    function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
+    public function __construct ($aObject, $sStorageObject, $sUniqId, $oTemplate)
     {
         parent::__construct($aObject, $sStorageObject, $sUniqId, $oTemplate);
+
         $this->_sIframeId = 'bx-form-input-files-' . $sUniqId . '-iframe';
         $this->_sButtonTemplate = 'uploader_button_simple.html';
+        $this->_sJsTemplate = 'uploader_button_simple_js.html';
+        $this->_sUploaderFormTemplate = 'uploader_form_simple.html';
     }
 
     /**
@@ -56,7 +58,6 @@ class BxBaseUploaderSimple extends BxDolUploader
             'storage_private' => $isPrivate,
         ));
     }
-
 }
 
 /** @} */

template/uploader_button_crop.html

@@ -1,2 +1 @@
-<a __attrs__ href="javascript:void(0);" class="bx-btn bx-def-margin-sec-right __btn_class__">__button_title__</a>
-<bx_include_auto:uploader_button_crop_js.html />
+<a __attrs__ href="javascript:void(0);" class="bx-btn bx-def-margin-sec-right __btn_class__">__button_title__</a>

template/uploader_button_crop_js.html

@@ -1,12 +1,9 @@
-<script>
-    $(document).ready(function(){
-        __uploader_instance_name__ = new BxDolUploaderCrop('__engine__', '__storage_object__', '__uniq_id__', {
-            'multiple': __multiple__,
-            'content_id': '__content_id__',
-            'images_transcoder' : '__images_transcoder__',
-            'storage_private' : '__storage_private__',
-            'template_error_msg': '<div class="bx-uploader-msg-err">{error}</div>',
-            'template_ghost': __template_ghost__
-        });
-    });
-</script>
+__uploader_instance_name__ = new BxDolUploaderCrop('__engine__', '__storage_object__', '__uniq_id__', {
+    'multiple': __multiple__,
+    'content_id': '__content_id__',
+    'images_transcoder' : '__images_transcoder__',
+    'storage_private' : '__storage_private__',
+    'template_error_msg': '<div class="bx-uploader-msg-err">{error}</div>',
+    'template_ghost': __template_ghost__
+});
+<bx_if:restore_ghosts>__uploader_instance_name__.restoreGhosts(__is_init_reordering__);</bx_if:restore_ghosts>

template/uploader_button_html5.html

@@ -1,2 +1 @@
-<a __attrs__ href="javascript:void(0);" class="bx-btn bx-def-margin-sec-right __btn_class__">__button_title__</a>
-<bx_include_auto:uploader_button_html5_js.html />
+<a __attrs__ href="javascript:void(0);" class="bx-btn bx-def-margin-sec-right __btn_class__">__button_title__</a>

template/uploader_button_html5_js.html

@@ -1,12 +1,9 @@
-<script>
-    $(document).ready(function(){
-        __uploader_instance_name__ = new BxDolUploaderHTML5('__engine__', '__storage_object__', '__uniq_id__', {
-            'multiple': __multiple__,
-            'content_id': '__content_id__',
-            'images_transcoder' : '__images_transcoder__',
-            'storage_private' : '__storage_private__',
-            'template_error_msg': '<div class="bx-uploader-msg-err">{error}</div>',
-            'template_ghost': __template_ghost__
-        });
-    });
-</script>
+__uploader_instance_name__ = new BxDolUploaderHTML5('__engine__', '__storage_object__', '__uniq_id__', {
+    'multiple': __multiple__,
+    'content_id': '__content_id__',
+    'images_transcoder' : '__images_transcoder__',
+    'storage_private' : '__storage_private__',
+    'template_error_msg': '<div class="bx-uploader-msg-err">{error}</div>',
+    'template_ghost': __template_ghost__
+});
+<bx_if:restore_ghosts>__uploader_instance_name__.restoreGhosts(__is_init_reordering__);</bx_if:restore_ghosts>

template/uploader_button_record_video.html

@@ -1,2 +1 @@
-<a __attrs__ href="javascript:void(0);" class="bx-btn bx-def-margin-sec-right __btn_class__"><i class="sys-icon fas circle col-red1 sys-colored"></i> __button_title__</a>
-<bx_include_auto:uploader_button_record_video_js.html />
+<a __attrs__ href="javascript:void(0);" class="bx-btn bx-def-margin-sec-right __btn_class__"><i class="sys-icon fas circle col-red1 sys-colored"></i> __button_title__</a>

template/uploader_button_record_video_js.html

@@ -1,14 +1,11 @@
-<script>
-    $(document).ready(function(){
-        __uploader_instance_name__ = new BxDolUploaderRecordVideo('__engine__', '__storage_object__', '__uniq_id__', {
-            'multiple': __multiple__,
-            'content_id': '__content_id__',
-            'images_transcoder' : '__images_transcoder__',
-            'storage_private' : '__storage_private__',
-            'template_error_msg': '<div class="bx-uploader-msg-err">{error}</div>',
-            'template_ghost': __template_ghost__,
-            'audio_bitrate': __audio_bitrate__,
-            'video_bitrate': __video_bitrate__,
-        });
-    });                
-</script>
+__uploader_instance_name__ = new BxDolUploaderRecordVideo('__engine__', '__storage_object__', '__uniq_id__', {
+    'multiple': __multiple__,
+    'content_id': '__content_id__',
+    'images_transcoder' : '__images_transcoder__',
+    'storage_private' : '__storage_private__',
+    'template_error_msg': '<div class="bx-uploader-msg-err">{error}</div>',
+    'template_ghost': __template_ghost__,
+    'audio_bitrate': __audio_bitrate__,
+    'video_bitrate': __video_bitrate__,
+});
+<bx_if:restore_ghosts>__uploader_instance_name__.restoreGhosts(__is_init_reordering__);</bx_if:restore_ghosts>

template/uploader_button_simple.html

@@ -1,2 +1 @@
-<a __attrs__ href="javascript:void(0);" class="bx-btn bx-def-margin-sec-right __btn_class__">__button_title__</a>
-<bx_include_auto:uploader_button_simple_js.html />
+<a __attrs__ href="javascript:void(0);" class="bx-btn bx-def-margin-sec-right __btn_class__">__button_title__</a>

template/uploader_button_simple_js.html

@@ -1,12 +1,9 @@
-<script>
-    $(document).ready(function(){
-        __uploader_instance_name__ = new BxDolUploaderSimple('__engine__', '__storage_object__', '__uniq_id__', {
-            'multiple': __multiple__,
-            'content_id': '__content_id__',
-            'images_transcoder' : '__images_transcoder__',
-            'storage_private' : '__storage_private__',
-            'template_error_msg': '<div class="bx-uploader-msg-err">{error}</div>',
-            'template_ghost': __template_ghost__
-        });
-    });                
-</script>
+__uploader_instance_name__ = new BxDolUploaderSimple('__engine__', '__storage_object__', '__uniq_id__', {
+    'multiple': __multiple__,
+    'content_id': '__content_id__',
+    'images_transcoder' : '__images_transcoder__',
+    'storage_private' : '__storage_private__',
+    'template_error_msg': '<div class="bx-uploader-msg-err">{error}</div>',
+    'template_ghost': __template_ghost__
+});
+<bx_if:restore_ghosts>__uploader_instance_name__.restoreGhosts(__is_init_reordering__);</bx_if:restore_ghosts>