dbxe
/
fusionpbx
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Theme - Fixed Menu: Add new user menu to menu bar.

This commit is contained in:
fusionate 2024-10-07 14:36:55 -06:00
parent 1134341635
commit b498af4cf4
No known key found for this signature in database
4 changed files with 93 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
resources/classes/menu.php
View File

@ -910,6 +910,10 @@ if (!class_exists('menu')) {
*/ */
public function menu_horizontal($menu_array) { public function menu_horizontal($menu_array) {
//add multi-lingual support
$language = new text;
$text = $language->get();
//determine menu behavior //determine menu behavior
$menu_style = !empty($_SESSION['theme']['menu_style']['text']) ? $_SESSION['theme']['menu_style']['text'] : 'fixed'; $menu_style = !empty($_SESSION['theme']['menu_style']['text']) ? $_SESSION['theme']['menu_style']['text'] : 'fixed';
switch ($menu_style) { switch ($menu_style) {
@ -974,7 +978,7 @@ if (!class_exists('menu')) {
$html .= " </div>\n"; $html .= " </div>\n";
$html .= " <button type='button' class='navbar-toggler' data-toggle='collapse' data-target='#main_navbar' aria-expanded='false' aria-controls='main_navbar' aria-label='Toggle Menu'>\n"; $html .= " <button type='button' class='navbar-toggler' data-toggle='collapse' data-target='#main_navbar' aria-expanded='false' aria-controls='main_navbar' aria-label='Toggle Menu' onclick=\"$('#body_header_user_menu').fadeOut(200);\">\n";
$html .= " <span class='fa-solid fa-bars'></span>\n"; $html .= " <span class='fa-solid fa-bars'></span>\n";
$html .= " </button>\n"; $html .= " </button>\n";
@ -1057,16 +1061,33 @@ if (!class_exists('menu')) {
$html .= " </ul>\n"; $html .= " </ul>\n";
$html .= " <ul class='navbar-nav ml-auto'>\n"; $html .= " <ul class='navbar-nav ml-auto'>\n";
//current user //current user (latter condition for backward compatibility)
if (isset($_SESSION['theme']['user_visible']['text']) && $_SESSION['theme']['user_visible']['text'] == 'true') { if (
!empty($_SESSION['username']) &&
(
isset($_SESSION['theme']['header_user_visible']['text']) &&
$_SESSION['theme']['header_user_visible']['text'] == 'true'
) || (
isset($_SESSION['theme']['user_visible']['text']) &&
$_SESSION['theme']['user_visible']['text'] == 'true'
)) {
//set (default) user graphic size and icon
$user_graphic = "<i class='".(!empty($_SESSION['theme']['body_header_icon_user']['text']) ? $_SESSION['theme']['body_header_icon_user']['text'] : 'fa-solid fa-user-circle')."'></i>";
//overwrite user graphic with image from session, if exists
if ($_SESSION['theme']['body_header_user_image']['boolean'] == true && !empty($_SESSION['user']['contact_image']) && is_uuid($_SESSION['user']['contact_image'])) {
$user_graphic = "<span style=\"display: inline-block; vertical-align: middle; width: 15px; height: 15px; border-radius: 50%; margin-top: -2px; background-image: url('".PROJECT_PATH."/app/contacts/contact_attachment.php?id=".$_SESSION['user']['contact_image']."&action=download&sid=".session_id()."'); background-repeat: no-repeat; background-size: cover; background-position: center;\"></span>";
}
$html .= " <li class='nav-item'>\n"; $html .= " <li class='nav-item'>\n";
$html .= " <a class='header_user' href='".PROJECT_PATH."/core/users/user_edit.php?id=user' title=\"".$this->text['theme-label-user']."\"><i class='".(!empty($_SESSION['theme']['body_header_icon_user']['text']) ? $_SESSION['theme']['body_header_icon_user']['text'] : 'fa-solid fa-user-circle')." fa-lg fa-fw' style='margin-top: 6px; margin-right: 5px;'></i>".escape($_SESSION['username'])."</a>"; $html .= " <a class='nav-link header_user d-block d-sm-none' href='show:usermenu' title=\"".$_SESSION['username']."\" style='border-top: 1px solid ".($_SESSION['theme']['menu_sub_background_color']['text'] ?? 'rgba(0,0,0,0.90)')."' data-toggle='collapse' data-target='#main_navbar' onclick=\"event.preventDefault(); $('#body_header_user_menu').toggleFadeSlide();\">".($user_graphic ?? null)."<span style='margin-left: 7px;'>".escape($_SESSION['username'])."</span></a>";
$html .= " <a class='nav-link header_user d-none d-sm-block' href='show:usermenu' title=\"".$_SESSION['username']."\" onclick=\"event.preventDefault(); $('#body_header_user_menu').toggleFadeSlide();\">".($user_graphic ?? null)."<span class='d-none d-md-inline' style='margin-left: 7px;'>".escape($_SESSION['username'])."</span></a>";
$html .= " </li>\n"; $html .= " </li>\n";
} }
//domain name/selector //domain name/selector
if (!empty($_SESSION['username']) && permission_exists('domain_select') && count($_SESSION['domains']) > 1 && $_SESSION['theme']['domain_visible']['text'] == 'true') { if (!empty($_SESSION['username']) && permission_exists('domain_select') && count($_SESSION['domains']) > 1 && $_SESSION['theme']['domain_visible']['text'] == 'true') {
$html .= " <li class='nav-item'>\n"; $html .= " <li class='nav-item'>\n";
$html .= " <a class='header_domain' href='#' id='header_domain_selector_domain' title='".$this->text['theme-label-open_selector']."'><i class='".(!empty($_SESSION['theme']['body_header_icon_domain']['text']) ? $_SESSION['theme']['body_header_icon_domain']['text'] : 'fa-solid fa-earth-americas')." fa-lg fa-fw' style='margin-top: 6px; margin-right: 5px;'></i>".escape($_SESSION['domain_name'])."</a>"; $html .= " <a class='nav-link header_domain header_domain_selector_domain d-block d-sm-none' href='select:domain' onclick='event.preventDefault();' data-toggle='collapse' data-target='#main_navbar' title='".$this->text['theme-label-open_selector']."'><span class='".(!empty($_SESSION['theme']['body_header_icon_domain']['text']) ? $_SESSION['theme']['body_header_icon_domain']['text'] : 'fa-solid fa-earth-americas')."'></span><span style='margin-left: 7px;'>".escape($_SESSION['domain_name'])."</span></a>";
$html .= " <a class='nav-link header_domain header_domain_selector_domain d-none d-sm-block' href='select:domain' onclick='event.preventDefault();' title='".$this->text['theme-label-open_selector']."'><span class='".(!empty($_SESSION['theme']['body_header_icon_domain']['text']) ? $_SESSION['theme']['body_header_icon_domain']['text'] : 'fa-solid fa-earth-americas')."'></span><span class='d-none d-md-inline' style='margin-left: 7px;'>".escape($_SESSION['domain_name'])."</span></a>";
$html .= " </li>\n"; $html .= " </li>\n";
} }
//logout icon //logout icon
@ -1083,6 +1104,42 @@ if (!class_exists('menu')) {
$html .= " </div>\n"; $html .= " </div>\n";
$html .= "</nav>\n"; $html .= "</nav>\n";
//user menu on menu bar
//styles below are defined here to prevent caching (following a permission change, etc)
$html .= "<style>\n";
$html .= "div#body_header_user_menu {\n";
$html .= " right: ".(permission_exists('domain_select') ? '170px' : '30px')." !important;\n";
$html .= " }\n";
$html .= "@media (max-width: 575.98px) {\n";
$html .= " div#body_header_user_menu {\n";
$html .= " right: 10px !important;;\n";
$html .= " }\n";
$html .= " }\n";
$html .= "</style>\n";
$html .= "<div id='body_header_user_menu'>\n";
$html .= " <div class='row m-0'>\n";
if (!empty($_SESSION['user']['contact_image']) && is_uuid($_SESSION['user']['contact_image'])) {
$html .= " <div class='col-5 col-sm-6 p-0' style=\"min-width: 130px; background-image: url('".PROJECT_PATH."/app/contacts/contact_attachment.php?id=".$_SESSION['user']['contact_image']."&action=download&sid=".session_id()."'); background-repeat: no-repeat; background-size: cover; background-position: center;\"></div>\n";
}
$html .= " <div class='".(!empty($_SESSION['user']['contact_image']) && is_uuid($_SESSION['user']['contact_image']) ? 'col-7 col-sm-6 pr-0' : 'col-12 p-0')." ' style='min-width: 130px; text-align: left;'>\n";
if (!empty($_SESSION['user']['contact_name'])) {
$html .= " <div style='line-height: 95%;'><strong>".$_SESSION['user']['contact_name']."</strong></div>\n";
}
if (!empty($_SESSION['user']['contact_organization'])) {
$html .= " <div class='mt-2' style='font-size: 85%; line-height: 95%;'>".$_SESSION['user']['contact_organization']."</div>\n";
}
if (!empty($_SESSION['user']['extension'][0]['destination'])) {
$html .= " <div class='mt-2' style='font-size: 90%;'><i class='fa-solid fa-phone' style='margin-right: 5px; color: #00b043;'></i><strong>".$_SESSION['user']['extension'][0]['destination']."</strong></div>\n";
}
$html .= " <div class='pt-2 mt-3' style='border-top: 1px solid ".color_adjust($_SESSION['theme']['body_header_shadow_color']['text'], 0.05).";'>\n";
$html .= " <a href='".PROJECT_PATH."/core/users/user_edit.php?id=user'>".$text['title-account_settings']."</a><br>\n";
$html .= " <a href='".PROJECT_PATH."/logout.php'>".$text['title-logout']."</a>\n";
$html .= " </div>";
$html .= " </div>";
$html .= " </div>";
$html .= "</div>";
//modal for logout icon (above) //modal for logout icon (above)
if (!empty($_SESSION['username']) && isset($_SESSION['theme']['logout_icon_visible']) && $_SESSION['theme']['logout_icon_visible']['text'] == "true") { if (!empty($_SESSION['username']) && isset($_SESSION['theme']['logout_icon_visible']) && $_SESSION['theme']['logout_icon_visible']['text'] == "true") {
$html .= modal::create(['id'=>'modal-logout','type'=>'general','message'=>$this->text['theme-confirm-logout'],'actions'=>button::create(['type'=>'button','label'=>$this->text['theme-label-logout'],'icon'=>'fa-solid fa-right-from-bracket','id'=>'btn_logout','style'=>'float: right; margin-left: 15px;','collapse'=>'never','link'=>PROJECT_PATH.'/logout.php','onclick'=>"modal_close();"])]); $html .= modal::create(['id'=>'modal-logout','type'=>'general','message'=>$this->text['theme-confirm-logout'],'actions'=>button::create(['type'=>'button','label'=>$this->text['theme-label-logout'],'icon'=>'fa-solid fa-right-from-bracket','id'=>'btn_logout','style'=>'float: right; margin-left: 15px;','collapse'=>'never','link'=>PROJECT_PATH.'/logout.php','onclick'=>"modal_close();"])]);
@ -1239,7 +1296,6 @@ if (!class_exists('menu')) {
//overwrite user graphic with image from session, if exists //overwrite user graphic with image from session, if exists
if ($_SESSION['theme']['body_header_user_image']['boolean'] == true && !empty($_SESSION['user']['contact_image']) && is_uuid($_SESSION['user']['contact_image'])) { if ($_SESSION['theme']['body_header_user_image']['boolean'] == true && !empty($_SESSION['user']['contact_image']) && is_uuid($_SESSION['user']['contact_image'])) {
$user_graphic_size = str_replace(['px','%'], '', ($_SESSION['theme']['body_header_user_image_size']['numeric'] ?? 18)); $user_graphic_size = str_replace(['px','%'], '', ($_SESSION['theme']['body_header_user_image_size']['numeric'] ?? 18));
// $user_graphic = "<span style=\"display: inline-block; vertical-align: middle; width: ".$user_graphic_size."px; height: ".$user_graphic_size."px; border-radius: 50%; margin-right: 7px; margin-top: ".($user_graphic_size > 18 ? '-'.(ceil(($user_graphic_size - 18) / 2) - 4) : '-4')."px; background-image: url('data:".$_SESSION['user']['contact_image']['mime'].";base64,".$_SESSION['user']['contact_image']['content']."'); background-repeat: no-repeat; background-size: cover; background-position: center;\"></span>";
$user_graphic = "<span style=\"display: inline-block; vertical-align: middle; width: ".$user_graphic_size."px; height: ".$user_graphic_size."px; border-radius: 50%; margin-right: 7px; margin-top: ".($user_graphic_size > 18 ? '-'.(ceil(($user_graphic_size - 18) / 2) - 4) : '-4')."px; background-image: url('".PROJECT_PATH."/app/contacts/contact_attachment.php?id=".$_SESSION['user']['contact_image']."&action=download&sid=".session_id()."'); background-repeat: no-repeat; background-size: cover; background-position: center;\"></span>"; $user_graphic = "<span style=\"display: inline-block; vertical-align: middle; width: ".$user_graphic_size."px; height: ".$user_graphic_size."px; border-radius: 50%; margin-right: 7px; margin-top: ".($user_graphic_size > 18 ? '-'.(ceil(($user_graphic_size - 18) / 2) - 4) : '-4')."px; background-image: url('".PROJECT_PATH."/app/contacts/contact_attachment.php?id=".$_SESSION['user']['contact_image']."&action=download&sid=".session_id()."'); background-repeat: no-repeat; background-size: cover; background-position: center;\"></span>";
} }
$html .= "<span style='display: inline-block; padding-right: 20px; font-size: 90%;'>\n"; $html .= "<span style='display: inline-block; padding-right: 20px; font-size: 90%;'>\n";
@ -1248,7 +1304,7 @@ if (!class_exists('menu')) {
//domain name/selector (sm+) //domain name/selector (sm+)
if (!empty($_SESSION['username']) && permission_exists('domain_select') && count($_SESSION['domains']) > 1 && $_SESSION['theme']['domain_visible']['text'] == 'true') { if (!empty($_SESSION['username']) && permission_exists('domain_select') && count($_SESSION['domains']) > 1 && $_SESSION['theme']['domain_visible']['text'] == 'true') {
$html .= "<span style='display: inline-block; padding-right: 10px; font-size: 90%;'>\n"; $html .= "<span style='display: inline-block; padding-right: 10px; font-size: 90%;'>\n";
$html .= " <a href='show:domainselector' id='header_domain_selector_domain' title='".$this->text['theme-label-open_selector']."'><i class='".(!empty($_SESSION['theme']['body_header_icon_domain']['text']) ? $_SESSION['theme']['body_header_icon_domain']['text'] : 'fa-solid fa-earth-americas')." fa-fw' style='vertical-align: middle; font-size: ".($user_graphic_size - 1)."px; margin-top: ".($user_graphic_size > 18 ? '-'.(ceil(($user_graphic_size - 18) / 2) - 4) : '-3')."px; margin-right: 3px; line-height: 40%;'></i><span class='d-none d-sm-inline'>".escape($_SESSION['domain_name'])."</span></a>"; $html .= " <a href='select:domain' onclick='event.preventDefault();' title='".$this->text['theme-label-open_selector']."' class='header_domain_selector_domain'><i class='".(!empty($_SESSION['theme']['body_header_icon_domain']['text']) ? $_SESSION['theme']['body_header_icon_domain']['text'] : 'fa-solid fa-earth-americas')." fa-fw' style='vertical-align: middle; font-size: ".($user_graphic_size - 1)."px; margin-top: ".($user_graphic_size > 18 ? '-'.(ceil(($user_graphic_size - 18) / 2) - 4) : '-3')."px; margin-right: 3px; line-height: 40%;'></i><span class='d-none d-sm-inline'>".escape($_SESSION['domain_name'])."</span></a>";
$html .= "</span>\n"; $html .= "</span>\n";
} }
//logout icon //logout icon

4
themes/default/app_config.php
View File

@ -109,7 +109,7 @@
$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "header_user_color_hover"; $apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "header_user_color_hover";
$apps[$x]['default_settings'][$y]['default_setting_name'] = "text"; $apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
$apps[$x]['default_settings'][$y]['default_setting_value'] = "#fd9c03"; $apps[$x]['default_settings'][$y]['default_setting_value'] = "#fd9c03";
$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true"; $apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the text hover color (and opacity) for header user name."; $apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the text hover color (and opacity) for header user name.";
$y++; $y++;
$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "b999bb99-2224-48f0-8a61-38c4f75c9869"; $apps[$x]['default_settings'][$y]['default_setting_uuid'] = "b999bb99-2224-48f0-8a61-38c4f75c9869";
@ -117,7 +117,7 @@
$apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "header_domain_color_hover"; $apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "header_domain_color_hover";
$apps[$x]['default_settings'][$y]['default_setting_name'] = "text"; $apps[$x]['default_settings'][$y]['default_setting_name'] = "text";
$apps[$x]['default_settings'][$y]['default_setting_value'] = "#fd9c03"; $apps[$x]['default_settings'][$y]['default_setting_value'] = "#fd9c03";
$apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true"; $apps[$x]['default_settings'][$y]['default_setting_enabled'] = "false";
$apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the text hover color (and opacity) for header domain name."; $apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the text hover color (and opacity) for header domain name.";
$y++; $y++;
$apps[$x]['default_settings'][$y]['default_setting_uuid'] = "4a92f422-934f-4ae9-b918-fa932cb1e089"; $apps[$x]['default_settings'][$y]['default_setting_uuid'] = "4a92f422-934f-4ae9-b918-fa932cb1e089";

13
themes/default/css.php
View File

@ -49,8 +49,8 @@ $menu_sub_text_color = $_SESSION['theme']['menu_sub_text_color']['text'] ?? '#ff
$menu_sub_text_size = $_SESSION['theme']['menu_sub_text_size']['text'] ?? '10pt'; $menu_sub_text_size = $_SESSION['theme']['menu_sub_text_size']['text'] ?? '10pt';
$menu_sub_text_color_hover = $_SESSION['theme']['menu_sub_text_color_hover']['text'] ?? '#fd9c03'; $menu_sub_text_color_hover = $_SESSION['theme']['menu_sub_text_color_hover']['text'] ?? '#fd9c03';
$menu_sub_background_color_hover = $_SESSION['theme']['menu_sub_background_color_hover']['text'] ?? '#141414'; $menu_sub_background_color_hover = $_SESSION['theme']['menu_sub_background_color_hover']['text'] ?? '#141414';
$header_user_color_hover = $_SESSION['theme']['header_user_color_hover']['text'] ?? '#1892e6'; $header_user_color_hover = $_SESSION['theme']['header_user_color_hover']['text'] ?? null;
$header_domain_color_hover = $_SESSION['theme']['header_domain_color_hover']['text'] ?? '#1892e6'; $header_domain_color_hover = $_SESSION['theme']['header_domain_color_hover']['text'] ?? null;
$logout_icon_color = $_SESSION['theme']['logout_icon_color']['text'] ?? 'rgba(255,255,255,0.8)'; $logout_icon_color = $_SESSION['theme']['logout_icon_color']['text'] ?? 'rgba(255,255,255,0.8)';
$logout_icon_color_hover = $_SESSION['theme']['logout_icon_color_hover']['text'] ?? 'rgba(255,255,255,1.0)'; $logout_icon_color_hover = $_SESSION['theme']['logout_icon_color_hover']['text'] ?? 'rgba(255,255,255,1.0)';
$menu_main_toggle_color = $_SESSION['theme']['menu_main_toggle_color']['text'] ?? 'rgba(255,255,255,0.8)'; $menu_main_toggle_color = $_SESSION['theme']['menu_main_toggle_color']['text'] ?? 'rgba(255,255,255,0.8)';
@ -653,7 +653,8 @@ else { //default: white
} }
/* main menu item */ /* main menu item */
ul.navbar-nav > li.nav-item > a.nav-link { ul.navbar-nav > li.nav-item > a.nav-link,
ul.navbar-nav.ml-auto > li.nav-item > a.nav-link {
font-family: <?=$menu_main_text_font?>; font-family: <?=$menu_main_text_font?>;
font-size: <?=$menu_main_text_size?>; font-size: <?=$menu_main_text_size?>;
color: <?=$menu_main_text_color?>; color: <?=$menu_main_text_color?>;
@ -768,17 +769,21 @@ else { //default: white
padding: 10px; padding: 10px;
} }
<?php if (!empty($header_user_color_hover)) { ?>
ul.navbar-nav > li.nav-item:hover > a.header_user, ul.navbar-nav > li.nav-item:hover > a.header_user,
ul.navbar-nav > li.nav-item:focus > a.header_user, ul.navbar-nav > li.nav-item:focus > a.header_user,
ul.navbar-nav > li.nav-item:active > a.header_user { ul.navbar-nav > li.nav-item:active > a.header_user {
color: <?=$header_user_color_hover?>; color: <?=$header_user_color_hover?>;
} }
<?php } ?>
<?php if (!empty($header_domain_color_hover)) { ?>
ul.navbar-nav > li.nav-item:hover > a.header_domain, ul.navbar-nav > li.nav-item:hover > a.header_domain,
ul.navbar-nav > li.nav-item:focus > a.header_domain, ul.navbar-nav > li.nav-item:focus > a.header_domain,
ul.navbar-nav > li.nav-item:active > a.header_domain { ul.navbar-nav > li.nav-item:active > a.header_domain {
color: <?=$header_domain_color_hover?>; color: <?=$header_domain_color_hover?>;
} }
<?php } ?>
/* logout icon */ /* logout icon */
a.logout_icon { a.logout_icon {
@ -1045,7 +1050,7 @@ else { //default: white
/* BODY/HEADER BAR *****************************************************************/ /* BODY/HEADER BAR *****************************************************************/
<?php if ($menu_style == 'side') { ?> <?php if ($menu_style == 'side' || $menu_style == 'fixed') { ?>
div#body_header { div#body_header {
position: relative; position: relative;
z-index: 1; z-index: 1;

29
themes/default/template.php
View File

@ -244,10 +244,11 @@
//domain selector controls //domain selector controls
{if $domain_selector_enabled} {if $domain_selector_enabled}
{literal} {literal}
$('#header_domain_selector_domain').on('click', function() { event.preventDefault(); show_domains(); }); $('.header_domain_selector_domain').on('click', function() { event.preventDefault(); show_domains(); });
$('#domains_hide').on('click', function() { hide_domains(); }); $('#domains_hide').on('click', function() { hide_domains(); });
function show_domains() { function show_domains() {
$('#body_header_user_menu').fadeOut(200);
search_domains('domains_list'); search_domains('domains_list');
$('#domains_visible').val(1); $('#domains_visible').val(1);
@ -683,22 +684,30 @@
{literal} {literal}
} }
}); });
{/literal}
{/if}
//hide an open user menu in the body header on scroll //side/fixed menu: hide an open user menu in the body header or menu on scroll
{if $settings.theme.menu_style == 'side' || $settings.theme.menu_style == 'fixed' }
{literal}
$(window).on('scroll', function() { $(window).on('scroll', function() {
$('#body_header_user_menu').fadeOut(200); $('#body_header_user_menu').fadeOut(200);
}); });
$('div#main_content').on('click', function() {
//create function to mimic toggling fade and slide at the same time $('#body_header_user_menu').fadeOut(200);
(function($){ });
$.fn.toggleFadeSlide = function(speed = 200, easing, callback){
return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};
})(jQuery);
{/literal} {/literal}
{/if} {/if}
//create function to mimic toggling fade and slide at the same time
{literal}
(function($){
$.fn.toggleFadeSlide = function(speed = 200, easing, callback){
return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};
})(jQuery);
{/literal}
{literal} {literal}
}); //document ready end }); //document ready end
{/literal} {/literal}