#4145 - Uploader's enhancement (studio)

studio/template/form_ghost_template.html

@@ -0,0 +1,12 @@
+<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost mt-2 flex items-start">
+    <div class="bx-uploader-ghost-cnt">
+        <a class="bx-anchor-invisible" name="album-media-{file_id}"></a>
+        <input type="hidden" name="__name__[]" value="{file_id}" />
+        <div class="bx-base-general-icon-wrapper">
+            <img src="{file_icon}" class="bx-def-round-corners bx-base-general-icon bx-base-general-icon-{file_id}" />
+        </div>
+        <span class="bx-base-general-uploader-ghost">
+            <a class="bx-btn bx-btn-small" href="javascript:void(0);" title="<bx_text:_sys_txt_form_entry_input_picture_delete />" onclick="javascript: {js_instance_name}.deleteGhost('{file_id}');"><i class="sys-icon times"></i></a>
+        </span>
+    </div>
+</div>

studio/template/scripts/BxBaseStudioBuilderPage.php

@@ -1162,9 +1162,7 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
                     'uploaders' => $this->aUploadersCover,
                     'multiple' => false,
                     'content_id' => isset($aPage['id']) ? $aPage['id'] : 0,
-                    'ghost_template' => BxDolStudioTemplate::getInstance()->parseHtmlByName('uploader_fgt_cover.html', array(
-                        'name' => 'cover_image',
-                    )),
+                    'ghost_template' => BxTemplStudioFunctions::getInstance()->getDefaultGhostTemplate('cover_image'),
                     'caption' => _t('_adm_bp_txt_page_cover_image'),
                     'db' => array (
                         'pass' => 'Int',

studio/template/scripts/BxBaseStudioDesigner.php

@@ -275,7 +275,7 @@ class BxBaseStudioDesigner extends BxDolStudioDesigner
                 ), 
             );
         }
-
+        
         $aForm = array(
             'form_attrs' => array(
                 'id' => $this->sIconFormId,
@@ -322,9 +322,7 @@ class BxBaseStudioDesigner extends BxDolStudioDesigner
                     'uploaders' => ['sys_html5'],
                     'multiple' => false,
                     'content_id' => $this->aIcons['icon_apple']['id'],
-                    'ghost_template' => $oTemplate->parseHtmlByName('uploader_fgt_icon.html', array(
-                        'name' => 'icon_apple',
-                    )),
+                    'ghost_template' => BxTemplStudioFunctions::getInstance()->getDefaultGhostTemplate('icon_apple'),
                     'caption' => _t('_adm_dsg_txt_upload_icon_apple'),
                     'info' => _t('_adm_dsg_txt_upload_icon_apple_inf'),
                 ),
@@ -336,9 +334,7 @@ class BxBaseStudioDesigner extends BxDolStudioDesigner
                     'uploaders' => ['sys_html5'],
                     'multiple' => false,
                     'content_id' => $this->aIcons['icon_android']['id'],
-                    'ghost_template' => $oTemplate->parseHtmlByName('uploader_fgt_icon.html', array(
-                        'name' => 'icon_android',
-                    )),
+                    'ghost_template' => BxTemplStudioFunctions::getInstance()->getDefaultGhostTemplate('icon_android'),
                     'caption' => _t('_adm_dsg_txt_upload_icon_android'),
                     'info' => _t('_adm_dsg_txt_upload_icon_android_inf'),
                 ),
@@ -350,9 +346,7 @@ class BxBaseStudioDesigner extends BxDolStudioDesigner
                     'uploaders' => ['sys_html5'],
                     'multiple' => false,
                     'content_id' => $this->aIcons['icon_android_splash']['id'],
-                    'ghost_template' => $oTemplate->parseHtmlByName('uploader_fgt_icon.html', array(
-                        'name' => 'icon_android_splash',
-                    )),
+                    'ghost_template' => BxTemplStudioFunctions::getInstance()->getDefaultGhostTemplate('icon_android_splash'),
                     'caption' => _t('_adm_dsg_txt_upload_icon_android_splash'),
                     'info' => _t('_adm_dsg_txt_upload_icon_android_splash_inf'),
                 ),
@@ -405,9 +399,7 @@ class BxBaseStudioDesigner extends BxDolStudioDesigner
                     'uploaders' => array('sys_std_crop_cover'),
                     'multiple' => false,
                     'content_id' => $aSetting['id'],
-                    'ghost_template' => BxDolStudioTemplate::getInstance()->parseHtmlByName('uploader_fgt_cover.html', array(
-                        'name' => $sCover,
-                    )),
+                    'ghost_template' => BxTemplStudioFunctions::getInstance()->getDefaultGhostTemplate($sCover),
                     'caption' => _t('_adm_dsg_txt_upload_' . $sCover),
                     'db' => array (
                     'pass' => 'Int',

studio/template/scripts/BxBaseStudioFormsField.php

@@ -1576,7 +1576,6 @@ class BxBaseStudioFormsFieldFiles extends BxBaseStudioFormsFieldFile
         );
 
         $aUploaders = array(
-            'sys_simple' => '_sys_uploader_simple_title', 
             'sys_html5' => '_sys_uploader_html5_title'
         );
         foreach($aUploaders as $sObject => $sTitle) {

studio/template/scripts/BxBaseStudioFunctions.php

@@ -176,6 +176,15 @@ class BxBaseStudioFunctions extends BxBaseFunctions implements iBxDolSingleton
         ));
     }
 
+        
+    public function getDefaultGhostTemplate($mParams, $sTemplateName = 'form_ghost_template.html') 
+    {
+        if (!is_array($mParams))
+            $mParams = ['name' => $mParams];
+        
+        return BxDolStudioTemplate::getInstance()->parseHtmlByName($sTemplateName, $mParams);
+    }
+    
     protected function getInjHeadLiveUpdates() 
     {
         return '';

studio/template/scripts/BxBaseStudioGridStorages.php

@@ -154,9 +154,7 @@ class BxBaseStudioGridStorages extends BxDolStudioGridStorages
 					'uploaders' => $this->_aUploaders,
 					'multiple' => true,
 					'content_id' => 0,
-					'ghost_template' => BxDolStudioTemplate::getInstance()->parseHtmlByName('strg_fgt_' . $this->_sType . '.html', array(
-						'name' => $this->_sType . '[]'
-					)),
+					'ghost_template' => BxTemplStudioFunctions::getInstance()->getDefaultGhostTemplate($this->_sType . '[]'),
 					'caption' => ''
                 ),
                 'submit' => array(
@@ -172,3 +170,5 @@ class BxBaseStudioGridStorages extends BxDolStudioGridStorages
 }
 
 /** @} */
+
+

studio/template/scripts/BxBaseStudioOptions.php

@@ -621,7 +621,7 @@ class BxBaseStudioOptions extends BxDolStudioOptions
                     'upload_buttons_titles' => ['HTML5' => _t('_sys_uploader_button_name_single')],
                     'multiple' => false,
                     'content_id' => $iContentId,
-                    'ghost_template' => ['inputs' => []],
+                    'ghost_template' => BxTemplStudioFunctions::getInstance()->getDefaultGhostTemplate($aItem['name']),
                     'caption' => _t($aItem['caption']),
                     'value' => $mixedValue,
                     'attrs' => $aAttributes,

studio/template/strg_fgt_files.html

@@ -1,12 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__" value="{file_id}" />
-    <div class="bx-ug-icon bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-text-icon bx-base-text-icon-{file_id}" />
-    </div>
-    <div class="bx-ug-content">
-    	<div class="bx-uploader-ghost-form-filename bx-def-font-grayed">{file_name}</div>
-        <div class="bx-def-padding-top">
-	        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="javascript: {js_instance_name}.deleteGhost('{file_id}');"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-		</div>
-    </div>
-</div>

studio/template/strg_fgt_images.html

@@ -1,12 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__" value="{file_id}" />
-    <div class="bx-ug-icon bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-text-icon bx-base-text-icon-{file_id}" />
-    </div>
-    <div class="bx-ug-content">
-    	<div class="bx-uploader-ghost-form-filename bx-def-font-grayed">{file_name}</div>
-        <div class="bx-def-padding-top">
-	        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="javascript: {js_instance_name}.deleteGhost('{file_id}');"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-		</div>
-    </div>
-</div>

studio/template/uploader_fgt_cover.html

@@ -1,11 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__" value="{file_id}" />
-    <div class="bx-ug-icon bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-text-icon bx-base-text-icon-{file_id}" />
-    </div>
-    <div class="bx-ug-content">
-		<div>
-	        <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="javascript: {js_instance_name}.deleteGhost('{file_id}');"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-		</div>
-    </div>
-</div>

studio/template/uploader_fgt_icon.html

@@ -1,11 +0,0 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost bx-def-margin-sec-top bx-clearfix">
-    <input type="hidden" name="__name__" value="{file_id}" />
-    <div class="bx-ug-icon bx-def-margin-sec-right">
-        <img src="{file_icon}" class="bx-def-round-corners bx-base-text-icon bx-base-text-icon-{file_id}" />
-    </div>
-    <div class="bx-ug-content">
-        <div>
-            <a class="bx-btn bx-btn-small bx-def-margin-sec-right" href="javascript:void(0);" onclick="javascript: {js_instance_name}.deleteGhost('{file_id}');"><bx_text:_sys_txt_form_entry_input_picture_delete /></a>
-        </div>
-    </div>
-</div>

template/css/uploaders.css

@@ -3,7 +3,7 @@
     color:#900;
 }
 .bx-uploader-ghost{
-    width: 290px;
+    max-width: 290px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -57,11 +57,6 @@
     -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
 }
 
-.bx-uploader-ghost-form {
-    width:500px; 
-    float:left;
-}
-
 .bx-uploader-ghost-form-filename {
 
 }

template/uploader_nested_form_wrapper.html

@@ -1,11 +1,11 @@
-<div id="bx-uploader-file-{storage_object}-{file_id}" class="bx-uploader-ghost">
+<div id="bx-uploader-file-{storage_object}-{file_id}">
     <div class="bx-uploader-ghost-preview bx-def-padding-right bx-def-padding-top">
         <img src="{file_icon}" class="bx-def-border" onload="$(this).css('background-image', 'url()')" />
     </div>
     <div class="bx-uploader-ghost-form ">
         <div class="bx-uploader-ghost-form-filename bx-def-padding-top bx-def-padding-bottom bx-def-font-grayed">{file_name}</div>
         __nested_form__
-        <div class="bx-uploader-ghost-form-actions bx-def-margin-top bx-clearfix"><a class="bx-btn bx-btn-small" href="javascript:void(0);" onclick="{js_instance_name}.deleteGhost('{file_id}')"><bx_text:_Delete /></a></div>
+        <div class="bx-uploader-ghost-form-actions bx-clearfix"><a class="bx-btn bx-btn-small" href="javascript:void(0);" onclick="{js_instance_name}.deleteGhost('{file_id}')"><bx_text:_Delete /></a></div>
     </div>
     <div class="bx-clear"></div>
 </div>