Ticket #5528 - Studio: Unify selectors. Advanced dropdown boxes.

studio/js/builder_page.js

@@ -23,6 +23,15 @@ function BxDolStudioBuilderPage(oOptions) {
         placeholder: 'adm-bp-block adm-bp-block-empty'
     };
 
+    $('div.bx-std-pt-bp-types select').select2({
+        templateSelection: d => d.text
+    });
+
+    $('div.bx-std-pt-bp-pages select').select2({
+        templateResult: this.formatItemPage,
+        templateSelection: d => d.text
+    });
+
     var $this = this;
     $(document).ready(function() {
     	$($this.aSortingConf.parent).sortable({
@@ -41,6 +50,25 @@ function BxDolStudioBuilderPage(oOptions) {
     });
 }
 
+BxDolStudioBuilderPage.prototype.formatItemPage = function(oItem) {
+    if(!oItem.id) 
+        return oItem.text;
+
+    const sUrl = $(oItem.element).data('url');
+    const iBlocks = $(oItem.element).data('blocks');
+    const sBlocks = parseInt(iBlocks) >= 0 ? iBlocks : _t('_sys_not_available');
+
+    return $(`
+    <div class="adm-bp-page">
+        <div>
+            <div class="adm-bpp-ttl">${oItem.text}</div>
+            <div class="adm-bpp-inf bx-def-font-meta">${sUrl || ''}</div>
+        </div>
+        <div class="adm-bpp-cnt">${sBlocks}</div>
+    </div>
+    `);
+};
+
 /**
  * Main page methods.
  */

studio/template/bp_block_panel_top.html

@@ -1,11 +1,11 @@
 <div class="bx-std-pt-cnt flex justify-between items-center">
-    <div class="bx-std-pt-selects flex flex-wrap">
+    <div class="bx-std-pt-bp-selects flex flex-wrap">
         <bx_if:show_selector_types>
-            <div class="bx-std-pt-types m-1">__selector_types__</div>
+            <div class="bx-std-pt-bp-types m-1">__selector_types__</div>
         </bx_if:show_selector_types>
-        <div class="bx-std-pt-pages m-1">__selector_pages__</div>
+        <div class="bx-std-pt-bp-pages m-1">__selector_pages__</div>
     </div>
-    <div class="bx-std-pt-buttons flex flex-wrap -m-1">
+    <div class="bx-std-pt-bp-buttons flex flex-wrap -m-1">
         <button class="bx-btn bx-btn-primary m-1" onclick="javascript:__js_object__.performAction('__action_page_create__');"><bx_text:_adm_bp_btn_create_new /></button>
         <bx_if:show_actions>
             <bx_if:can_view>

studio/template/css/builder_page.css

@@ -1,8 +1,30 @@
 /*--- Panel Top style ---*/
-div.bx-std-pt-types div.bx-form-element-wrapper,
-div.bx-std-pt-pages div.bx-form-element-wrapper {
+div.bx-std-pt-bp-types div.bx-form-element-wrapper {
     width: 10rem;
 }
+div.bx-std-pt-bp-pages div.bx-form-element-wrapper {
+    width: 20rem;
+}
+div.bx-std-pt-bp-selects .select2-container .select2-selection--single {
+    height: 2.5rem;
+    border-radius: 0.375rem;
+    opacity: 0.9;
+}
+div.bx-std-pt-bp-selects .select2-container .select2-selection--single .select2-selection__rendered {
+    padding-left: 0;
+    line-height: 2.375rem;
+}
+div.bx-std-pt-bp-selects .select2-container .select2-selection--single .select2-selection__arrow {
+    height: 2.375rem;
+}
+.adm-bp-page {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.adm-bp-page .adm-bpp-cnt {
+    font-weight: 600;
+}
 
 /*--- Main section style ---*/
 .bx-std .bx-layout-wrapper {

studio/template/scripts/BxBaseStudioBuilderPage.php

@@ -85,29 +85,31 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
                 $oUploader->addCssJs();
         }
 
-        return array_merge(parent::getPageCss(), array(
+        return array_merge(parent::getPageCss(), [
             BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'codemirror/|codemirror.css',
             BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'grapesjs/|grapes.min.css',
+            BX_DIRECTORY_PATH_PLUGINS_PUBLIC . 'select2/css/|select2.min.css',
             'page_layouts.css', 
             'builder_page.css'
-        ));
+        ]);
     }
 
     function getPageJs()
     {
-        return array_merge(parent::getPageJs(), array(
+        return array_merge(parent::getPageJs(), [
             'codemirror/codemirror.min.js',
             'grapesjs/grapes.min.js',
             'grapesjs/grapesjs-blocks-basic.js',
             'grapesjs/grapesjs-style-bg.js',
             'grapesjs/grapesjs-preset-webpage.min.js',
+            'select2/js/select2.min.js',
             'jquery-ui/jquery-ui.min.js',
             'jquery.ui.touch-punch.min.js',
             'jquery.easing.js',
             'jquery.form.min.js',
             'functions.js',
             'builder_page.js'
-        ));
+        ]);
     }
 
     function getPageJsObject()
@@ -240,10 +242,11 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
             ))
         );
 
-        $oTemplate->addJsTranslation(array(
+        $oTemplate->addJsTranslation([
+            '_sys_not_available',
             '_adm_bp_wrn_page_delete',
             '_adm_bp_wrn_page_block_delete'
-        ));
+        ]);
         return $sResult . $oTemplate->parseHtmlByName('builder_page.html', $aTmplVars);
     }
 
@@ -1964,6 +1967,7 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
 
     protected function _getTmplVarsBlockPanelTop()
     {
+        $oPermalink = BxDolPermalinks::getInstance();
         $sJsObject = $this->getPageJsObject();
 
         $aInputTypes = [];
@@ -2009,7 +2013,11 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
 
             $aInputPagesValues[] = [
                 'key' => $aPage['object'], 
-                'value' => $sTitle . " (" . (isset($aCounter[$aPage['object']]) ? $aCounter[$aPage['object']] : "0") . ")"
+                'value' => $sTitle,
+                'attrs' => [
+                    'data-url' => $aPage['url'] ? $oPermalink->permalink($aPage['url']) : '',
+                    'data-blocks' => $aCounter[$aPage['object']] ?? 0
+                ]
             ];
         }
 
@@ -2026,8 +2034,8 @@ class BxBaseStudioBuilderPage extends BxDolStudioBuilderPage
             'value' => $this->sPage,
             'values' => array_merge([[
                 'key' => '', 
-                'value' => _t('_adm_bp_txt_select_page')]
-            ], $aInputPagesValues)
+                'value' => _t('_adm_bp_txt_select_page')
+            ]], $aInputPagesValues)
         ];
 
         $aTmplVarsActions = [];