#98 - responsive trans popups + toolbar remake

inc/classes/BxDolTemplate.php

@@ -1018,10 +1018,18 @@ class BxDolTemplate extends BxDol implements iBxDolSingleton
                     $sRet = bx_process_output($this->aPage['header_text']);
                 break;
             case 'popup_loading':
-                $sContent = $this->parsePageByName('popup_loading.html', array());
-
                 bx_import('BxTemplFunctions');
-                $sRet = BxTemplFunctions::getInstance()->transBox('bx-popup-loading', $sContent, true);
+                $s = $this->parsePageByName('popup_loading.html', array());
+                $sRet = BxTemplFunctions::getInstance()->transBox('bx-popup-loading', $s, true);
+
+                bx_import('BxTemplSearch');
+                $oSearch = new BxTemplSearch();
+                $oSearch->setLiveSearch(true);
+                $s = $this->parsePageByName('search.html', array(
+                    'search_form' => $oSearch->getForm(BX_DB_CONTENT_ONLY),
+                    'results' => $oSearch->getResultsContainer(),
+                ));
+                $sRet .= BxTemplFunctions::getInstance()->transBox('bx-popup-search', $s, true);
                 break;
             case 'lang':
                 $sRet = bx_lang_name();

inc/js/functions.js

@@ -276,6 +276,8 @@ function bx_menu_popup (o, e, options, vars) {
     var options = options || {};
     var vars = vars || {};
     var o = $.extend({}, $.fn.dolPopupDefaultOptions, options, {id: o, url: bx_append_url_params('menu.php', $.extend({o:o}, vars))});
+    if ('undefined' == typeof(e))
+        e = window;
     $(e).dolPopupAjax(o);
 }
 

inc/js/jquery.dolPopup.js

@@ -72,6 +72,9 @@
                 return true;
             } 
 
+            if (false != o.pointer) // all popups without pointer are responsive
+                $el.removeClass('bx-popup-responsive').addClass('bx-popup-with-pointer');
+
             // default style for correct positioning
             $el.css({
                 display: 'block',
@@ -84,8 +87,10 @@
 
             setTimeout(function() { // timeout is needed for some browsers to render element
 
-                $el.removeClass('bx-popup-transitions bx-popup-inactive');
+                // remove any transitions before setting popup position
+                $el.removeClass('bx-popup-transitions bx-popup-inactive'); 
 
+                // set popup position
                 $el._dolPopupSetPosition(o);
 
                 if (!$el.hasClass('bx-popup-applied')) { // do this only once
@@ -124,26 +129,25 @@
 
                 o.onBeforeShow();
 
+                // transition effect
                 $el.addClass('bx-popup-inactive');
-
                 setTimeout(function () {
                     $el.addClass('bx-popup-transitions bx-popup-active');
                 }, 10);
     
-                if (o.speed > 0) {
-
-                    $el.css({display: 'block', visibility: 'visible'});
-
-                    if (o.fog)
+                // show popup
+                $el.css({display: 'block', visibility: 'visible'});
+                if (o.fog) {
+                    if (o.speed > 0)
                         $('#bx-popup-fog').fadeIn(o.speed);
-
-                } else {
-
-                    $el.css({display: 'block', visibility: 'visible'});
-
-                    if (o.fog)
-                        $('#bx-popup-fog').show(o.onShow);
-                }                
+                    else
+                        $('#bx-popup-fog').show();
+                }
+                
+                setTimeout(function () {
+                    o.onShow();                    
+                    $el.find('input').focus(); // put cursor to the first input element
+                }, o.speed);
 
             }, 10);
         });
@@ -271,6 +275,8 @@
 
                 $('<div id="' + sPopupId + '" style="display:none;">' + $('#bx-popup-loading').html() + '</div>').appendTo('body').find(options.container).hide();
 
+                $('#' + sPopupId).addClass($('#bx-popup-loading').attr('class'));
+
                 var oLoading = $('#' + sPopupId + ' .bx-popup-loading-wrapped');
                 bx_loading_content(oLoading, true, true);
 

install/sql/system.sql

@@ -2594,7 +2594,7 @@ CREATE TABLE IF NOT EXISTS `sys_objects_menu` (
 ) ENGINE=MyISAM  DEFAULT CHARSET=utf8;
 
 INSERT INTO `sys_objects_menu` (`object`, `title`, `set_name`, `module`, `template_id`, `deletable`, `active`, `override_class_name`, `override_class_file`) VALUES
-('sys_site', '_sys_menu_title_main', 'sys_site', 'system', 7, 0, 1, 'BxTemplMenuSite', ''),
+('sys_site', '_sys_menu_title_main', 'sys_site', 'system', 14, 0, 1, 'BxTemplMenuSite', ''),
 ('sys_site_submenu', '_sys_menu_title_submenu', 'sys_site', 'system', 1, 0, 1, 'BxTemplMenuSubmenu', ''),
 ('sys_site_submenu_main', '_sys_menu_title_submenu_main', 'sys_site', 'system', 8, 0, 1, '', ''),
 ('sys_footer', '_sys_menu_title_footer', 'sys_footer', 'system', 2, 0, 1, 'BxTemplMenuFooter', ''),
@@ -2678,13 +2678,15 @@ INSERT INTO `sys_menu_items` (`set_name`, `module`, `name`, `title_system`, `tit
 ('sys_footer', 'system', 'switch_template', '_sys_menu_item_title_system_switch_template', '_sys_menu_item_title_switch_template', 'javascript:void(0);', 'bx_menu_popup(''sys_switch_template'', window);', '', '', '', 2147483647, 1, 1, 3);
 
 -- site toolbar menu
-INSERT INTO `sys_menu_items` (`set_name`, `module`, `name`, `title_system`, `title`, `link`, `onclick`, `target`, `icon`, `submenu_object`, `visible_for_levels`, `active`, `copyable`, `order`) VALUES
-('sys_toolbar_site', 'system', 'main-menu', '_sys_menu_item_title_system_main_menu', '', 'javascript:void(0);', 'bx_menu_popup(''sys_site'', this, {pointer:{align:''left''}});', '', 'reorder', '', 2147483647, 1, 1, 1);
+INSERT INTO `sys_menu_items`(`set_name`, `module`, `name`, `title_system`, `title`, `link`, `onclick`, `target`, `icon`, `submenu_object`, `visible_for_levels`, `active`, `copyable`, `order`) VALUES 
+('sys_toolbar_site', 'system', 'main-menu', '_sys_menu_item_title_system_main_menu', '', 'javascript:void(0);', 'bx_menu_popup(\'sys_site\');', '', 'reorder', '', 2147483647, 1, 1, 1),
+('sys_toolbar_site', 'system', 'search', '_sys_menu_item_title_system_search', '', 'javascript:void(0);', '$(\'#bx-popup-search\').dolPopup();', '', 'search', '', 2147483647, 1, 1, 2);
 
 -- member toolbar menu
-INSERT INTO `sys_menu_items` (`set_name`, `module`, `name`, `title_system`, `title`, `link`, `onclick`, `target`, `icon`, `addon`, `submenu_object`, `visible_for_levels`, `active`, `copyable`, `order`) VALUES
-('sys_toolbar_member', 'system', 'account', '_sys_menu_item_title_system_account_menu', '_sys_menu_item_title_account_menu', 'javascript:void(0);', 'bx_menu_popup(''sys_account_popup'', this, {pointer:{align:''right''}});', '', 'user', 'a:3:{s:6:"module";s:6:"system";s:6:"method";s:21:"profile_notifications";s:5:"class";s:20:"TemplServiceProfiles";}', 'sys_account_popup', 510, 1, 0, 1),
-('sys_toolbar_member', 'system', 'login', '_sys_menu_item_title_system_login', '', 'page.php?i=login', '', '', 'user', '', '', 1, 1, 0, 2);
+INSERT INTO `sys_menu_items`(`set_name`, `module`, `name`, `title_system`, `title`, `link`, `onclick`, `target`, `icon`, `submenu_object`, `visible_for_levels`, `active`, `copyable`, `order`) VALUES 
+('sys_toolbar_member', 'system', 'add-content', '_sys_menu_item_title_system_add_content', '', 'javascript:void(0);', 'bx_menu_popup(\'sys_add_content\');', '', 'plus', '', 510, 1, 1, 0),
+('sys_toolbar_member', 'system', 'account', '_sys_menu_item_title_system_account_menu', '_sys_menu_item_title_account_menu', 'javascript:void(0);', 'bx_menu_popup(\'sys_account_popup\');', '', 'user', 'sys_account_popup', 510, 1, 0, 1),
+('sys_toolbar_member', 'system', 'login', '_sys_menu_item_title_system_login', '', 'page.php?i=login', '', '', 'user', '', 1, 1, 0, 2);
 
 -- simple menu in account popup
 INSERT INTO `sys_menu_items` (`set_name`, `module`, `name`, `title_system`, `title`, `link`, `onclick`, `target`, `icon`, `submenu_object`, `visible_for_levels`, `active`, `copyable`, `order`) VALUES

modules/boonex/english/data/langs/system.xml

@@ -1781,6 +1781,7 @@ If it is not enabled then please consider implement this optimization, since it
 	<string name="_sys_menu_item_title_system_main_menu"><![CDATA[Main Menu]]></string>
 	<string name="_sys_menu_item_title_system_more"><![CDATA[More]]></string>
 	<string name="_sys_menu_item_title_system_profile"><![CDATA[Profile]]></string>
+	<string name="_sys_menu_item_title_system_search"><![CDATA[Search]]></string>
 	<string name="_sys_menu_item_title_system_set_acl_level"><![CDATA[Set membership]]></string>
 	<string name="_sys_menu_set_title_account"><![CDATA[Account]]></string>
 	<string name="_sys_menu_set_title_account_dashboard"><![CDATA[Account Dashboard]]></string>

template/css/common.css

@@ -66,6 +66,12 @@ blockquote {
     height:1.5rem;    
 }
 
+.bx-search-site {
+    width:20rem;
+    margin-left:auto;
+    margin-right:auto;
+}
+
 /* --------------- design boxes */
 
 .bx-db-container {
@@ -214,6 +220,13 @@ blockquote {
     text-align:right;
 }
 
+.bx-popup-image-wrapper .bx-popup-close-wrapper,
+.bx-popup-image-wrapper .bx-popup-element-close,
+.bx-popup-with-pointer .bx-popup-close-wrapper,
+.bx-popup-with-pointer .bx-popup-element-close {
+    display:none;
+}
+
 /* --------------- message box */
 
 .bx-msg-box-container {

template/css/media-phone.css

@@ -42,8 +42,10 @@ html {
 
 /* common.css */
 
-.bx-popup-box-wrapper,
-.bx-popup-box {
+.bx-popup-responsive.bx-popup-trans-wrapper:not(.bx-popup-image-wrapper),
+.bx-popup-responsive:not(.bx-popup-image-wrapper) .bx-popup-trans,
+.bx-popup-responsive.bx-popup-box-wrapper,
+.bx-popup-responsive .bx-popup-box {
     position:fixed !important;
     width:100%;
 	width:100vw;
@@ -52,19 +54,22 @@ html {
     overflow:scroll;
 }
 
-.bx-popup-box > div {
+.bx-popup-responsive .bx-popup-trans > div,
+.bx-popup-responsive .bx-popup-box > div {
 	border-radius:0;
 	-moz-border-radius:0;
 	-webkit-border-radius:0;
 }
 
-.bx-popup-image-wrapper .bx-popup-border,
-.bx-popup-box-wrapper .bx-popup-border {
+.bx-popup-responsive.bx-popup-image-wrapper .bx-popup-border,
+.bx-popup-responsive.bx-popup-trans-wrapper .bx-popup-border,
+.bx-popup-responsive.bx-popup-box-wrapper .bx-popup-border {
     border:none;
 }
 
-.bx-popup-image-wrapper .bx-popup,
-.bx-popup-box-wrapper .bx-popup {
+.bx-popup-responsive.bx-popup-image-wrapper .bx-popup,
+.bx-popup-responsive.bx-popup-trans-wrapper .bx-popup,
+.bx-popup-responsive.bx-popup-box-wrapper .bx-popup {
 	-moz-box-shadow:none;
 	-webkit-box-shadow:none;
     box-shadow:none;

template/css/menu.css

@@ -288,10 +288,10 @@ ul.bx-menu-floating-blocks {
     height:4rem;
 }
 .bx-menu-floating-blocks-big li {
-    width:256px;
-    width:16rem;
-    height:256px;
-    height:16rem;
+    width:192px;
+    width:12rem;
+    height:192px;
+    height:12rem;
 }
 
 .bx-menu-floating-blocks-big li:hover,
@@ -330,10 +330,10 @@ ul.bx-menu-floating-blocks {
 .bx-menu-floating-blocks-big li img,
 .bx-menu-floating-blocks-big li .sys-icon {
     display:block;
-    width:192px;
-    width:12rem;
-    height:192px;
-    height:12rem;
+    width:128px;
+    width:8rem;
+    height:128px;
+    height:8rem;
     margin:16px 32px 8px 32px;
     margin:1rem 2rem 0.5rem 2rem;
 }
@@ -354,10 +354,10 @@ ul.bx-menu-floating-blocks {
     font-size:2rem;
 }
 .bx-menu-floating-blocks-big li .sys-icon {
-    line-height:192px;
-    line-height:12rem;
-    font-size:192px;
-    font-size:12rem;
+    line-height:128px;
+    line-height:8rem;
+    font-size:128px;
+    font-size:8rem;
 }
 
 .bx-menu-floating-blocks-big li .bx-menu-floating-blocks-title,

template/menu_site.html

@@ -1,5 +0,0 @@
-<div id="bx-menu-site">
-    <div id="bx-menu-site-search">__search__</div>
-    <div class="bx-def-color-bg-sec bx-def-margin-top bx-def-margin-bottom" style="height:0.5em; margin-left:-3em; margin-right:-3em;"></div>
-    <div id="bx-menu-site-menu">__menu__</div>
-</div>

template/menu_toolbar.html

@@ -1,7 +1,7 @@
 <ul class="bx-menu-toolbar bx-menu-object-__object__">
     <bx_repeat:menu_items>
         <li class="bx-menu-toolbar-item bx-def-color-bg-hl-hover __class_add__">
-            <a href="__link__" target="__target__" onclick="__onclick__" class="bx-def-margin-sec-left bx-def-font-contrasted"><bx_if:title><span class="bx-menu-toolbar-item-title bx-def-margin-sec-leftright">__title__</span></bx_if:title><bx_if:icon><i class="sys-icon __icon__ bx-def-margin-sec-leftright"></i></bx_if:icon><bx_if:image><img class="bx-def-thumb bx-def-thumb-size bx-def-margin-sec-leftright" src="__icon_url__" /></bx_if:image></a>
+            <a href="__link__" target="__target__" onclick="__onclick__" class="bx-def-font-contrasted"><bx_if:title><span class="bx-menu-toolbar-item-title bx-def-margin-sec-leftright">__title__</span></bx_if:title><bx_if:icon><i class="sys-icon __icon__ bx-def-margin-sec-leftright"></i></bx_if:icon><bx_if:image><img class="bx-def-thumb bx-def-thumb-size bx-def-margin-sec-leftright" src="__icon_url__" /></bx_if:image></a>
             <bx_if:addon><span class="bx-menu-toolbar-item-addon bx-def-unit-alert-middle bg-col-blue2-dark">__addon__</span></bx_if:addon>
         </li>
     </bx_repeat:menu_items>

template/popup_box.html

@@ -1,10 +1,10 @@
-<div id="__id__" class="bx-popup-wrapper bx-popup-box-wrapper" style="__wrapper_style__" role="dialog" aria-describedby="__id___title">
+<div id="__id__" class="bx-popup-wrapper bx-popup-responsive bx-popup-box-wrapper" style="__wrapper_style__" role="dialog" aria-describedby="__id___title">
     <div class="bx-popup-box-pointer"><i class="bx-popup-border"></i></div>
     <div class="bx-popup bx-popup-box bx-popup-width bx-popup-color-bg bx-popup-border bx-def-round-corners">
     <div class="bx-def-round-corners" style="overflow:hidden;">
         <div class="bx-popup-header bx-popup-color-bg bx-def-padding bx-def-font-contrasted">
             <h2 id="__id___title">__title__</h2>
-            <a href="javascript:void(0);" class="bx-popup-element-close bx-def-font-h2 bx-def-font-contrasted bx-def-margin bx-def-media-tablet-hide bx-def-media-desktop-hide"><i class="sys-icon remove"></i></a>
+            <a href="javascript:void(0);" class="bx-popup-element-close bx-def-font-h1 bx-def-font-contrasted bx-def-margin bx-def-media-tablet-hide bx-def-media-desktop-hide"><i class="sys-icon remove"></i></a>
         </div>
         <div class="bx-popup-content bx-def-padding">__content__</div>
     </div>

template/popup_loading.html

@@ -1,4 +1,4 @@
 <div class="bx-popup-content-indent bx-def-padding">
 	<div class="bx-popup-content-wrapped"></div>
 	<div class="bx-popup-loading-wrapped"></div>
-</div>
+</div>

template/popup_trans.html

@@ -1,6 +1,9 @@
-<div  id="__id__" class="bx-popup-wrapper bx-popup-trans-wrapper" style="__wrapper_style__" role="alert">
+<div  id="__id__" class="bx-popup-wrapper bx-popup-responsive bx-popup-trans-wrapper" style="__wrapper_style__" role="alert">
     <div class="bx-popup-box-pointer"><i class="bx-popup-border"></i></div>
     <div class="bx-popup bx-popup-trans bx-popup-border bx-popup-color-bg bx-def-round-corners">
+        <div class="bx-popup-close-wrapper bx-def-media-tablet-hide bx-def-media-desktop-hide bx-def-padding">
+            <a href="javascript:void(0);" class="bx-popup-element-close bx-def-font-h1 bx-def-margin"><i class="sys-icon remove"></i></a>
+        </div>
         <div class="bx-popup-content" style="">__content__</div>
     </div>
 </div>

template/scripts/BxBaseMenuSite.php

@@ -14,28 +14,10 @@ bx_import('BxTemplMenu');
  */
 class BxBaseMenuSite extends BxTemplMenu
 {
-
-    protected $_sObjectSubmenu = false;
-    protected $_mixedMainMenuItemSelected = false;
-
     public function __construct ($aObject, $oTemplate)
     {
         parent::__construct ($aObject, $oTemplate);
     }
-
-    public function getCode ()
-    {
-        bx_import('BxTemplSearch');
-        $oSearch = new BxTemplSearch();
-        $oSearch->setLiveSearch(true);
-
-        $aVars = array (
-            'menu' => parent::getCode (),
-            'search' => $oSearch->getForm(BX_DB_CONTENT_ONLY) . $oSearch->getResultsContainer(),
-        );
-        return $this->_oTemplate->parseHtmlByName('menu_site.html', $aVars);
-    }
-
 }
 
 /** @} */

template/search.html

@@ -0,0 +1,4 @@
+<div class="bx-search-site bx-def-padding">
+    __search_form__
+    __results__
+</div>