// TODO: GOLIVE
var naviman_domain = 'https://chipmunk-factual-mildly.ngrok-free.app/';
var naviman_css = naviman_domain + "uigen/uigen.css?v=" + Math.random();
var UIGEN_ENV = "DEVELOPMENT";
/*var naviman_domain = 'https://naviman.shopifas.com/';
var naviman_css = 'https://naviplus.b-cdn.net/naviplus/golive/uigen-v2.2.css';
var UIGEN_ENV = "DEPLOYMENT"; */
var naviman_json_cdn = "https://naviplus.b-cdn.net/naviplus/data/json";
var naviman_json_files = "https://naviplus.b-cdn.net/naviplus/data/";
if (typeof naviman === 'undefined') {
console.log("Navi+ is AIO toolkit to create navigations: Sticky navbar, Bottom & Tab bar, Mega Menu, Float support button.. | Website: https://apps.shopify.com/pronavi-navigation-design");
}
/**********************************************************************************************************************
Functions.
**********************************************************************************************************************/
var naviman = (function(){
var VERTICAL_CHILDREN_WIDTH = 200;
var DESKTOP_MAX_WIDTH = 400;
var SCROLL_TO_HIDE = 58;
var BOX_SHADOW = 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);';
var shop = '';
var embed_id = '';
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var cartCount = 0;
var BADGE_HIDE = 0;
var BADGE_DOT = 1;
var BADGE_ISCART_WITHCOUNT = 2;
// Gom toàn bộ những SF-1234567 data vào 1 biến để dùng
var navimanData = [];
/** Khởi tạo các biến dùng chung **************************/
/** uigen/init.js ****************************************/
if (typeof NAVIGLOBAL === 'undefined') {
NAVIGLOBAL = [];
NAVIGLOBAL['ITEM_KINDS'] = [];
NAVIGLOBAL['MENU_KINDS'] = [];
NAVIGLOBAL['ITEM_KINDS'] = {
ICON_IMAGE_TEXT: 1,
GROUP_TITLE: 2,
BLANK_SPACE: 3,
BIG_IMAGE_TEXT: 4,
CUSTOM_HTML: 5,
BUTTON: 6
};
// TODO
NAVIGLOBAL['ITEM_DISPLAY_LAYOUT'] = {
TOP_DOWN: 1,
LEFT_RIGHT: 2,
ICON_IMAGE_ONLY: 3,
TEXT_ONLY: 4,
EMPTY: 5,
};
NAVIGLOBAL['MENU_KINDS'] = {
STICKY_MOBILE_TABBAR: 1,
STICKY_MOBILE_HEADER: 2,
STICKY_FAB_SUPPORT: 11,
SECTION_MOBILE_HEADER: 20,
SECTION_MOBILE_MEGAMENU: 31,
SECTION_MOBILE_GRID: 41,
SECTION_MOBILE_BANNER: 42,
/*******************************/
SECTION_MEGAMENU: 131
}
NAVIGLOBAL['MOBILE_POSITION'] = {
BOTTOM: 1,
TOP: 2,
RIGHT_CENTER: 3,
LEFT_CENTER: 4,
RIGHT_BOTTOM: 5,
LEFT_BOTTOM: 6
}
NAVIGLOBAL['DESKTOP_POSITION'] = {
BOTTOM_CENTER: 1,
BOTTOM_RIGHT: 2,
BOTTOM_LEFT: 3,
BOTTOM_FULL: 4,
RIGHT_TOP: 5,
LEFT_TOP: 6,
LEFT_FULL_TOP: 7,
LEFT_FULL_CENTER: 8,
RIGHT_FULL_TOP: 9,
RIGHT_FULL_CENTER: 10,
}
NAVIGLOBAL['LAYOUT'] = {
DEFAULT: 1,
HIGHLIGHT: 2,
FLOATING: 3,
FAB: 4
}
}
/** uigen/init.js END ****************************************/
/** Khởi tạo các hàm dùng chung **************************/
/** uigen/libs.js ****************************************/
var clearCSS_JS = function (css) {
if (typeof css == 'undefined')
return "";
css = css.trim();
css = css.strReplace('', '');
css = css.strReplace('', '');
return css;
};
var addStyleToHeader = function(styles) {
var css = document.createElement('style');
css.type = 'text/css';
if (css.styleSheet)
css.styleSheet.cssText = styles;
else
css.appendChild(document.createTextNode(styles));
document.getElementsByTagName("head")[0].appendChild(css);
}
var isHadValue = function(checkVar) {
if (typeof (checkVar) == 'undefined')
return false;
if (checkVar.toString().trim() == "")
return false;
return true;
};
var defaultValue = function( str, defaultValue ) {
if (typeof str == 'undefined')
return defaultValue;
if( str.toString().trim() == "" )
return defaultValue;
return str;
};
var standardizeCSS = function(rules, className){
if( rules == "" ) return rules;
if( rules.length >= className.length + 1 )
if( rules.substring(0, className.length + 1) == '.' + className )
return rules;
var classLen = className.length,
char, nextChar, isAt, isIn;
// makes sure the className will not concatenate the selector
className = '#' + className + ' ';
// removes comments
rules = rules.replace( /\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/g, '' );
// makes sure nextChar will not target a space
rules = rules.replace( /}(\s*)@/g, '}@' );
rules = rules.replace( /}(\s*)}/g, '}}' );
for (var i = 0; i < rules.length-2; i++) {
char = rules[i];
nextChar = rules[i+1];
if (char === '@' && nextChar !== 'f') isAt = true;
if (!isAt && char === '{') isIn = true;
if (isIn && char === '}') isIn = false;
if (
!isIn &&
nextChar !== '@' &&
nextChar !== '}' &&
(
char === '}' ||
char === ',' ||
((char === '{' || char === ';') && isAt)
)
) {
rules = rules.slice(0, i+1) + className + rules.slice(i+1);
i += classLen;
isAt = false;
}
};
// prefix the first select if it is not `@media` and if it is not yet prefixed
if (rules.indexOf(className) !== 0 && rules.indexOf('@') !== 0) rules = className+rules;
return rules;
};
var isMobileMode = function () {
if (windowWidth <= 768)
return true;
return false;
};
var getCurrentTemplate = function () {
let path = window.location.pathname.toUpperCase().trim();
if (path == '/' || path == '')
return "index";
if (path.includes('PRODUCTS'))
return "products";
if (path.includes('COLLECTIONS'))
return "collections";
if (path.includes('PAGES'))
return "pages";
if (path.includes('BLOGS'))
return "blogs";
return "others";
};
var jsonp = function(uri) {
return new Promise(function(resolve, reject) {
var id = '_' + Math.round(10000 * Math.random());
var callbackName = 'jsonp_callback_' + id;
window[callbackName] = function(data) {
delete window[callbackName];
var ele = document.getElementById(id);
ele.parentNode.removeChild(ele);
resolve(data);
}
var src = uri + '&callback=' + callbackName;
var script = document.createElement('script');
script.src = src;
script.id = id;
script.addEventListener('error', reject);
(document.getElementsByTagName('head')[0] || document.body || document.documentElement).appendChild(script)
});
};
var displayElement = function( el, display ) {
if( isNull(el)) return;
if( isNull(el.style)) return;
if( display )
el.style.display = "block";
else
el.style.display = "none";
};
var isNull = function( object ) {
if ( object == null ) return true;
if ( typeof object == "undefined" ) return true;
return false;
};
String.prototype.strReplace = function(strR, strWith) {
var esc = strR.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
var reg = new RegExp(esc, 'ig');
return this.replace(reg, strWith);
};
var debugConsole = function ( object ) {
if( UIGEN_ENV == "DEVELOPMENT" )
console.log( object );
};
// Kiểm tra xem nếu là icon thì trả về icon, nếu có ảnh thì chỉ hiện thị ảnh thôi
var itemMedia = function(icon, image, naviman_domain, style='', iconBoxPaddingTop = 0, itemExtIconSize = '', itemExtAlign = '')
{
let isHadImage = true;
if (typeof (image) === 'undefined')
isHadImage = false;
else if (image.trim() == "")
isHadImage = false;
var iconStyle = "";
if( iconBoxPaddingTop != 0 ) {
iconStyle += 'margin-bottom:' + ( iconBoxPaddingTop - 2 ) + 'px; padding-top: ' + iconBoxPaddingTop + 'px;';
}
var styleImageHeight = '';
if( itemExtIconSize != '' )
styleImageHeight += ' style="height:'+ itemExtIconSize +'px" ';
if (!isHadImage) {
return '' + '' + '';
} else
return '
' + '' + ' ';
};
var defaultMarginPadding = function( marginPadding ) {
if( marginPadding == null ) marginPadding = {
'top' : 0, 'right' : 0, 'bottom' : 0, 'left' : 0
};
if(marginPadding['top'] == '') marginPadding['top'] = 0;
if(marginPadding['right'] == '') marginPadding['right'] = 0;
if(marginPadding['bottom'] == '') marginPadding['bottom'] = 0;
if(marginPadding['left'] == '') marginPadding['left'] = 0;
return marginPadding;
};
function encodeBody( url ) {
var output = url;
const words = output.split('body=');
if( words.length == 2 ) {
//console.log( words );
var body = encodeURIComponent(words[1]);
output = words[0] + 'body=' + body;
}
return output;
}
function isUrlContain(keywordsSetting) {
var url = window.location.pathname + window.location.search; //window.location.href.toLowerCase();
url = url.toLowerCase()
var keywords = keywordsSetting.split(',');
for (let i = 0; i < keywords.length; i++) {
keywords[i] = keywords[i].trim().toLowerCase();
if( keywords[i] != '' ) {
if( url.includes( keywords[i] ) )
return true;
}
}
return false;
}
function isUserLoggedIn() {
try {
if (window.ShopifyAnalytics.meta.page.customerId == null)
return false;
}catch({ name, message }) {
return false;
}
return true;
}
var hexToRgba = function(hex, alpha = 1) {
// Remove the leading #
hex = hex.replace('#', '');
// Parse the red, green, and blue values
let red = parseInt(hex.substring(0, 2), 16);
let green = parseInt(hex.substring(2, 4), 16);
let blue = parseInt(hex.substring(4, 6), 16);
// Return the rgba string
return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
}
var isSettingBeTrue = function( checkVar, defaultValue = false ) {
if (isHadValue(checkVar))
if( checkVar == true || checkVar == "true" )
return true;
else
return false;
return defaultValue;
}
var removeExtraSpaces = function(str) {
// Sử dụng biểu thức chính quy để thay thế nhiều khoảng trắng bằng một khoảng trắng duy nhất
return str.replace(/\s+/g, ' ').trim();
}
var menuPositionClass = function ( data ) {
var menuPosition = '';
switch (parseInt(data["setting"]["mobilePosition"])) {
case NAVIGLOBAL['MOBILE_POSITION']['BOTTOM']:
menuPosition += " mobile-" + "bottom ";
break;
case NAVIGLOBAL['MOBILE_POSITION']['TOP']:
menuPosition += " mobile-" + "top ";
break;
case NAVIGLOBAL['MOBILE_POSITION']['RIGHT_CENTER']:
menuPosition += " mobile-" + "right-center ";
break;
case NAVIGLOBAL['MOBILE_POSITION']['LEFT_CENTER']:
menuPosition += " mobile-" + "left-center ";
break;
case NAVIGLOBAL['MOBILE_POSITION']['RIGHT_BOTTOM']:
menuPosition += " mobile-" + "right-bottom ";
break;
case NAVIGLOBAL['MOBILE_POSITION']['LEFT_BOTTOM']:
menuPosition += " mobile-" + "left-button ";
break;
}
switch (parseInt(data["setting"]["desktopPosition"])) {
case NAVIGLOBAL['DESKTOP_POSITION']['BOTTOM_CENTER']:
menuPosition += " desktop-" + "bottom-center ";
break;
case NAVIGLOBAL['DESKTOP_POSITION']['BOTTOM_RIGHT']:
menuPosition += " desktop-" + "bottom-right ";
break;
case NAVIGLOBAL['DESKTOP_POSITION']['BOTTOM_RIGHT']:
menuPosition += " desktop-" + "bottom-right ";
break;
case NAVIGLOBAL['DESKTOP_POSITION']['BOTTOM_LEFT']:
menuPosition += " desktop-" + "bottom-left ";
break;
case NAVIGLOBAL['DESKTOP_POSITION']['BOTTOM_FULL']:
menuPosition += " desktop-" + "bottom-full ";
break;
case NAVIGLOBAL['DESKTOP_POSITION']['RIGHT_TOP']:
menuPosition += " desktop-" + "right-top ";
break;
case NAVIGLOBAL['DESKTOP_POSITION']['LEFT_TOP']:
menuPosition += " desktop-" + "left-top ";
break;
case NAVIGLOBAL['DESKTOP_POSITION']['LEFT_FULL_TOP']:
menuPosition += " desktop-" + "left-full-top ";
break;
case NAVIGLOBAL['DESKTOP_POSITION']['LEFT_FULL_CENTER']:
menuPosition += " desktop-" + "left-full-center ";
break;
case NAVIGLOBAL['DESKTOP_POSITION']['RIGHT_FULL_TOP']:
menuPosition += " desktop-" + "right-full-top ";
break;
case NAVIGLOBAL['DESKTOP_POSITION']['RIGHT_FULL_CENTER']:
menuPosition += " desktop-" + "right-full-center ";
break;
}
return menuPosition;
}
var showNaviOverlay = function () {
if( document.getElementsByClassName("naviman_app_overlay") == null )
return;
if( document.getElementsByClassName("naviman_app_overlay").length == 0 )
return;
document.getElementsByClassName("naviman_app_overlay")[0].style.display = 'block';
/* var body = document.getElementsByTagName('body')[0];
body.style.overflow = 'hidden';
*/
}
var hideNaviOverlay = function () {
if( document.getElementsByClassName("naviman_app_overlay") == null )
return;
if( document.getElementsByClassName("naviman_app_overlay").length == 0 )
return;
document.getElementsByClassName("naviman_app_overlay")[0].style.display = 'none';
}
/** uigen/libs.js END ****************************************/
var generateCSS_init = function ( setting ) {
//debugConsole("1.generateCSS_init");
setting['submenuWidth'] = defaultValue(setting['submenuWidth'], 200);
setting['textSize'] = defaultValue( setting['textSize'], 10);
setting['spaceTextIcon'] = defaultValue(setting['spaceTextIcon'], 2);
setting['iconSize'] = defaultValue(setting['iconSize'], 22);
setting['height'] = defaultValue(setting['height'], 54);
setting['borderRadius'] = defaultValue(setting['borderRadius'], 0);
setting['opacity'] = defaultValue(setting['opacity'], 100);
setting['bottomMargin'] = defaultValue(setting['bottomMargin'], "");
setting['settingMargin'] = defaultMarginPadding( setting['settingMargin'] );
setting['settingPadding'] = defaultMarginPadding( setting['settingPadding'] );
};
var generateCSS_paddingMargin = function ( setting, cssNaviPrefix, section_setting ) {
//debugConsole("4.generateCSS_paddingMargin");
var addHtml = "";
addHtml += cssNaviPrefix + ' { margin: ' +
setting['settingMargin']['top'] + 'px ' +
setting['settingMargin']['right'] + 'px ' +
setting['settingMargin']['bottom'] + 'px ' +
setting['settingMargin']['left'] + 'px ' +
' } ';
addHtml += cssNaviPrefix + ' { padding: ' +
setting['settingPadding']['top'] + 'px ' +
setting['settingPadding']['right'] + 'px ' +
setting['settingPadding']['bottom'] + 'px ' +
setting['settingPadding']['left'] + 'px ' +
' } ';
return addHtml;
};
var generateCSS_UI_Level1_Menuitems = function ( setting, cssNaviPrefix, naviman_appItem, dragdrop, section_setting ) {
//debugConsole("2.generateCSS_UI_Level1_Menuitems");
var addHtml = "";
if (isHadValue(setting['textColor']))
addHtml += cssNaviPrefix + ' ul li.item .name { color: ' + setting['textColor'] + '; } ';
// TODO: Cho chọn không chọn font và một font tự chọn tên.
if (isHadValue(setting['fontFamily'])) {
let fontFamily_css = '';
naviman_appItem.insertAdjacentHTML('beforebegin', fontFamily_css);
addHtml += cssNaviPrefix + ' {font-family: "' + setting['fontFamily'].strReplace('+', ' ') + '", "Roboto"} ';
}
if (isHadValue(setting['textSize'])) {
addHtml += cssNaviPrefix + ' ul li.item > .inner .name { font-size: ' + setting['textSize'] + 'px; } ';
addHtml += cssNaviPrefix + ' ul li.item > .inner .name > { font-size: ' + setting['textSize'] + 'px; } '; // Sửa chỗ này để overwrite các ông khác.
}
/* if (isHadValue(setting['spaceTextIcon']))*/
/* addHtml += cssNaviPrefix + ' ul li.item .icon, ' + cssNaviPrefix + ' ul li.item .image { height: ' + (21 + (setting['spaceTextIcon'] - 2)) + 'px; } ';*/
if (isHadValue(setting['dividerColor']))
addHtml += cssNaviPrefix + ' ul li.item_divider { border-color: ' + setting['dividerColor'] + '; } ';
if (isHadValue(setting['badgeColor']))
addHtml += cssNaviPrefix + 'ul li.item_badge .inner .icon::before, ' + cssNaviPrefix + ' ul li.item_badge .inner .image::before { color: ' + setting['badgeColor'] + '; } ';
if (isHadValue(setting['iconColor']))
addHtml += cssNaviPrefix + 'ul li.item .icon i { color: ' + setting['iconColor'] + '; } ';
if (isHadValue(setting['iconSize'])) {
/*
Login của đoạn này như sau (Chỉ áp dụng cho icon/Small image):
1. Nếu setting chung icon size thì áp dụng cho cả icon và image
2. Đối với level 2: Thì đặt chiều cao của icon và image bằng nhau và bằng iconSize + 4
*/
addHtml += cssNaviPrefix + 'ul li.item .icon i { font-size: ' + setting['iconSize'] + 'px; } ';
addHtml += cssNaviPrefix + 'ul li.item ul li.child .icon i { font-size: ' + setting['iconSize'] + 'px; } ';
addHtml += cssNaviPrefix + 'ul li.item ul li.child .icon { height: ' + ( parseInt(setting['iconSize']) + 4) + 'px; } ';
addHtml += cssNaviPrefix + 'ul li.item .image img { height: ' + setting['iconSize'] + 'px; } ';
addHtml += cssNaviPrefix + 'ul li.item ul li.child .image img { height: ' + setting['iconSize'] + 'px; } ';
addHtml += cssNaviPrefix + 'ul li.item ul li.child .image { height: ' + ( parseInt(setting['iconSize']) + 4) + 'px; } ';
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['HIGHLIGHT'])
addHtml += cssNaviPrefix + ' ul li.item_primary > .inner { left: calc(50% - 26px); position: absolute; padding-top: ' + (16 - (setting['iconSize'] - 12) / 2) + 'px; } ';
}
// Don't display text ---------------------------------------------------------
if (setting['textHide'] == "true" || setting['textHide'] == true) {
addHtml += cssNaviPrefix + ' ul li.item > .inner .name { display:none; } ';
addHtml += cssNaviPrefix + ' ul li.item > .inner .description { display:none; } ';
/* if (setting['layout'] != NAVIGLOBAL['LAYOUT']['FAB'])
addHtml += cssNaviPrefix + 'ul li.item .inner { padding-top: ' + ((setting['height'] - 50) / 2 + 8 + (setting['textSize'] / 2)) + 'px } ';
*/
if (setting['layout'] != NAVIGLOBAL['LAYOUT']['FAB']) {
let isVertical = false;
if (isMobileMode())
if (setting['mobilePosition'] == NAVIGLOBAL['MOBILE_POSITION']['RIGHT_CENTER']
|| setting['mobilePosition'] == NAVIGLOBAL['MOBILE_POSITION']['LEFT_CENTER']
|| setting['mobilePosition'] == NAVIGLOBAL['MOBILE_POSITION']['RIGHT_BOTTOM']
|| setting['mobilePosition'] == NAVIGLOBAL['MOBILE_POSITION']['LEFT_BOTTOM']
)
isVertical = true;
if (!isMobileMode()) // Desktop mode
if (setting['desktopPosition'] == NAVIGLOBAL['DESKTOP_POSITION']['RIGHT_TOP']
|| setting['desktopPosition'] == NAVIGLOBAL['DESKTOP_POSITION']['LEFT_TOP']
|| setting['desktopPosition'] == NAVIGLOBAL['DESKTOP_POSITION']['LEFT_FULL_TOP']
|| setting['desktopPosition'] == NAVIGLOBAL['DESKTOP_POSITION']['LEFT_FULL_CENTER']
)
isVertical = true;
if (isVertical) {
let itemHeight = (parseInt(setting['height']) - setting['textSize']);
/* TODO: Cần chỉnh chỗ này, nếu như có padding thì phải phình to ra chứ? */
addHtml += cssNaviPrefix + ' ul li.item { height: ' + itemHeight + 'px } ';
addHtml += cssNaviPrefix + '{ height: ' + itemHeight * dragdrop.length + 'px } ';
}
}
}
return addHtml;
}
var generateCSS_UI_Level1_Background = function ( setting, cssNaviPrefix, section_setting ) {
//debugConsole("3.generateCSS_UI_Level1_Background");
var addHtml = "";
// Background ---------------------------------------------------------------
if (isSettingBeTrue(setting['level1BackgroundHide'])) { // Nếu không có nền thì bỏ nền và bỏ bóng.
addHtml += cssNaviPrefix + '{ background: initial; } ';
addHtml += cssNaviPrefix + '{ box-shadow: none !important; } ';
}else {
if (isHadValue(setting['backgroundImage'])) {
if (setting['backgroundImage'].includes("?")) {
// Xử lý duy nhất trường hợp có opacity cho background Image
var bg = setting['backgroundImage'].split("?");
var bgImage = bg[0];
var bgOpacity = parseInt(bg[1]);
if (bgOpacity != 0) {
addHtml += cssNaviPrefix + '{ background-image: url("' + bgImage + '"); background-size: cover; } ';
addHtml += cssNaviPrefix + '{ background-color: ' + hexToRgba(setting['backgroundColor'], 1 - (bgOpacity / 100)) + '; background-blend-mode: hue; } ';
} else {
addHtml += cssNaviPrefix + '{ background: ' + setting['backgroundColor'] + ' } ';
addHtml += cssNaviPrefix + '{ background-image: url("' + bgImage + '"); background-size: cover; } ';
}
} else {
addHtml += cssNaviPrefix + '{ background: ' + setting['backgroundColor'] + ' } ';
}
} else { // Nếu ko có background thì dùng màu bình thường.
if (isHadValue(setting['backgroundColor']))
addHtml += cssNaviPrefix + '{ background: ' + setting['backgroundColor'] + ' } ';
}
}
if (! isSettingBeTrue(setting['level1Dropshadow'], true)) { // Nếu không có nền thì bỏ nền và bỏ bóng.
addHtml += cssNaviPrefix + ' { box-shadow: none !important; } ';
}
// Height
addHtml += cssNaviPrefix + 'ul li.item { height: ' + setting['height'] + 'px } ';
// Curve (Border-radius)
if (isHadValue(setting['layout'])) {
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['DEFAULT'] || setting['layout'] == NAVIGLOBAL['LAYOUT']['HIGHLIGHT']) {
addHtml += cssNaviPrefix + '{ border-radius: ' + setting['borderRadius'] + 'px ' + setting['borderRadius'] + 'px 0px 0px } ';
addHtml += cssNaviPrefix + ' ul li ul.children { border-radius: ' + setting['borderRadius'] + 'px; } ';
}
else
addHtml += cssNaviPrefix + '{ border-radius: ' + setting['borderRadius'] + 'px } ';
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['FLOATING'])
addHtml += cssNaviPrefix + ' ul li ul.children { border-radius: ' + setting['borderRadius'] + 'px; } ';
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['FAB']) {
addHtml += cssNaviPrefix + ' ul li.item { border-radius: ' + setting['borderRadius'] + 'px; } ';
// Nếu là float button thì level có border-radius: 1/2
addHtml += cssNaviPrefix + ' ul li ul.children { border-radius: ' + (setting['borderRadius'] / 2) + 'px;} ';
}
}
if (isHadValue(setting['opacity']))
addHtml += cssNaviPrefix + '{ opacity: ' + (setting['opacity'] / 100) + ' } ';
return addHtml;
};
var generateCSS_UI_Level2 = function ( setting, cssNaviPrefix, naviman_appItem, dragdrop, section_setting ) {
//debugConsole("5.generateCSS_UI_Level2");
var addHtml = "";
if (isHadValue(setting['submenuTextColor'])) {
addHtml += cssNaviPrefix + ' ul li.item ul li.child .name { color: ' + setting['submenuTextColor'] + '; } ';
addHtml += cssNaviPrefix + ' ul li.item a { color: ' + setting['submenuTextColor'] + '; } ';
addHtml += cssNaviPrefix + ' ul li.item ul li.child .description { color: ' + setting['submenuTextColor'] + '; } ';
}
if (isHadValue(setting['submenuIconColor']))
addHtml += cssNaviPrefix + ' ul li.item ul li.child .icon i { color: ' + setting['submenuIconColor'] + '; } ';
if (isSettingBeTrue(setting['level2BackgroundHide'])) { // Nếu không có nền thì bỏ nền và bỏ bóng.
addHtml += cssNaviPrefix + ' ul li ul.children { background: initial; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { box-shadow: none !important; } ';
}else {
if (isHadValue(setting['submenuBackgroundColor']))
addHtml += cssNaviPrefix + ' ul li ul.children { background: ' + setting['submenuBackgroundColor'] + ' } ';
}
if (! isSettingBeTrue(setting['level2Dropshadow'], true)) { // Nếu không có nền thì bỏ nền và bỏ bóng.
addHtml += cssNaviPrefix + ' ul li ul.children { box-shadow: none !important; } ';
}
if (isHadValue(setting['submenuDividerColor']))
addHtml += cssNaviPrefix + ' ul li.child_divider { border-color: ' + setting['submenuDividerColor'] + '; } ';
return addHtml;
};
var generateCSS_Publish = function (setting, cssNaviPrefix, section_setting) {
//debugConsole("7.generateCSS_Publish");
var addHtml = "";
addHtml += ' @media only screen and (max-width: 768px) { ';
if (setting['mobileDisplay'] == "false" || setting['mobileDisplay'] == false)
addHtml += cssNaviPrefix + ' { display: none !important; } ';
if( !isMobileMode() )
addHtml += cssNaviPrefix + ' { display: none !important; } ';
addHtml += ' } ';
addHtml += ' @media only screen and (min-width: 769px) { ';
if (setting['desktopDisplay'] == "false" || setting['desktopDisplay'] == false) {
addHtml += cssNaviPrefix + ' { display: none !important; } ';
}
if( isMobileMode() )
addHtml += cssNaviPrefix + ' { display: none !important; } ';
addHtml += ' } ';
return addHtml;
};
var generateCSS_Position = function (setting, cssNaviPrefix, section_setting) {
//debugConsole("8.generateCSS_Position");
var addHtml = "";
addHtml += ' @media only screen and (max-width: 768px) {';
if (setting['mobileAutoHide'] == "true" || setting['mobileAutoHide'] == true) {
if (setting['mobileDisplay'] == "true" || setting['mobileDisplay'] == true)
scrollToHide("mobile", cssNaviPrefix);
}
addHtml += '} ';
addHtml += ' @media only screen and (min-width: 769px) {';
if (setting['desktopAutoHide'] == "true" || setting['desktopAutoHide'] == true) {
if( setting['desktopDisplay'] == "true" || setting['desktopDisplay'] == true )
if (setting['desktopPosition'] != NAVIGLOBAL['DESKTOP_POSITION']['LEFT_FULL_TOP']
&& setting['desktopPosition'] != NAVIGLOBAL['DESKTOP_POSITION']['LEFT_FULL_CENTER']
&& setting['desktopPosition'] != NAVIGLOBAL['DESKTOP_POSITION']['RIGHT_FULL_TOP']
&& setting['desktopPosition'] != NAVIGLOBAL['DESKTOP_POSITION']['RIGHT_FULL_CENTER']
)
scrollToHide("desktop", cssNaviPrefix);
}
addHtml += '} ';
return addHtml;
};
var generateCSS_Advance = function (setting, cssNaviPrefix, naviman_appItem, embed_id, section_setting) {
//debugConsole("9.generateCSS_Advance");
var addHtml = "";
// JS / jQuery ---------------------------------------------------------
var jsScript = document.createElement('script');
jsScript.textContent = clearCSS_JS(setting['jsCode']);
document.body.appendChild(jsScript);
// CSS ---------------------------------------------------------
naviman_appItem.insertAdjacentHTML('beforebegin', '');
naviman_appItem.insertAdjacentHTML('beforebegin', '');
// zIndex ------------------------------------------------------
if (isHadValue(setting['zIndex']))
addHtml += cssNaviPrefix + ' { z-index: '+ setting['zIndex'] +'; } ';
return addHtml;
};
var generateCSS_FixByLayout = function (setting, cssNaviPrefix, dragdrop, section_setting) {
//debugConsole("6.generateCSS_FixByLayout");
var addHtml = "";
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['HIGHLIGHT']) {
if (setting['highlightColor'].trim() != "")
addHtml += cssNaviPrefix + ' ul li.item_primary > .inner { background: ' + setting['highlightColor'] + '; } ';
if (setting['highlightIconColor'].trim() != "")
addHtml += cssNaviPrefix + ' ul li.item_primary > .inner i { color: ' + setting['highlightIconColor'] + '; } ';
}
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['FLOATING']) {
if (setting['bottomMargin'] != "") {
addHtml += cssNaviPrefix + ' { bottom: ' + setting['bottomMargin'] + 'px; } ';
}
}
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['FAB']) {
addHtml += cssNaviPrefix + ' { width: ' + setting['height'] + 'px; left: initial; right: 16px; height: ' + parseInt(setting['height']) + 'px; width: ' + (parseInt(setting['height']) * dragdrop.length) + 'px; } ';
//addHtml += cssNaviPrefix + ' ul li.item .inner { padding: 8px 0px 0px 0px; } ';
//addHtml += cssNaviPrefix + 'ul li.item .inner { padding-top: ' + ((setting['height'] - 50) / 2 + 8 + (setting['textSize'] / 2)) + 'px } ';
addHtml += cssNaviPrefix + ' ul li ul.children { left: initial; right: 0px; bottom: 4px; width: ' + setting['submenuWidth'] + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { ' + BOX_SHADOW + ';} ';
if (setting['bottomMargin'] != "")
addHtml += cssNaviPrefix + ' { bottom: ' + (parseInt(setting['bottomMargin'])) + 'px; } ';
}
return addHtml;
}
var generateCSS_UI_Common = function ( setting, cssNaviPrefix, naviman_appItem, dragdrop, section_setting ) {
var addHtml = "";
// Logic: Nếu set height và kiểu left-right thì sẽ đặt một cái padding-top để nó căn vào giữa cho nó đẹp.
//addHtml += cssNaviPrefix + ' ul > li.item .inner { padding-top: ' + ((setting['height'] - 50) / 2 + 7) + 'px } ';
//addHtml += cssNaviPrefix + ' ul > li.left-right .inner { padding-top: 0px } ';
// TODO: Chỗ này chưa ngon do nếu gap < 0 thì chỉ sống với top-down
if (isHadValue(setting['spaceTextIcon'])) {
if( setting['spaceTextIcon'] < 0 ) {
addHtml += cssNaviPrefix + ' ul li.item .inner { gap: 0px }';
addHtml += cssNaviPrefix + ' ul li.item .inner .info { margin-top: '+ setting['spaceTextIcon'] +'px }';
}else
addHtml += cssNaviPrefix + ' ul li.item .inner { gap: '+ setting['spaceTextIcon'] +'px }';
}
if( isUserLoggedIn() ) {
addHtml += cssNaviPrefix + ' ul li.publish-show-logined { display: initial }';
addHtml += cssNaviPrefix + ' ul li.publish-hide-logined { display: none }';
}else {
addHtml += cssNaviPrefix + ' ul li.publish-show-logined { display: none }';
addHtml += cssNaviPrefix + ' ul li.publish-hide-logined { display: initial }';
}
return addHtml;
}
var getItemValue = function( item, keyName, defaultVal ) {
if( item[keyName] != null )
return item[keyName];
return defaultVal;
}
var generateCSS_Level1_Width = function (setting, cssNaviPrefix, naviman_appItem, dragdrop, section_setting) {
var addHtml = "";
var fixPx = 0;
var fixPercent = 0;
var automationCount = 0;
var maxAutomationCount = 0;
dragdrop.forEach((item) => {
var itemIsPublished = getItemValue(item, "ispublished", 1);
var itemHideWhenLogined = getItemValue(item, "hidewhenlogined", 0);
var itemShowWhenLogined = getItemValue(item, "showwhenlogined", 0);
var itemWidthLayout = getItemValue(item, "widthlayout", 1);
if( itemIsPublished == 0 )
return;
if( itemHideWhenLogined == 1 ) {
if( isUserLoggedIn() )
return;
}
if( itemShowWhenLogined == 1 ) {
if( !(isUserLoggedIn()) )
return;
}
if( itemWidthLayout == 14 )
fixPx += parseInt( item["widthfix"] );
if( itemWidthLayout == 2 ) fixPercent += 8.3333333333;
if( itemWidthLayout == 3 ) fixPercent += 16.6666666666;
if( itemWidthLayout == 4 ) fixPercent += 25;
if( itemWidthLayout == 5 ) fixPercent += 33.3333333333;
if( itemWidthLayout == 6 ) fixPercent += 41.6666666666;
if( itemWidthLayout == 7 ) fixPercent += 50;
if( itemWidthLayout == 8 ) fixPercent += 58.3333333333;
if( itemWidthLayout == 9 ) fixPercent += 66.6666666666;
if( itemWidthLayout == 10 ) fixPercent += 75;
if( itemWidthLayout == 11 ) fixPercent += 83.3333333333;
if( itemWidthLayout == 12 ) fixPercent += 91.6666666666;
if( itemWidthLayout == 13 ) fixPercent += 100;
if( itemWidthLayout == 15 ) fixPercent += 10;
if( itemWidthLayout == 16 ) fixPercent += 20;
if( itemWidthLayout == 17 ) fixPercent += 50;
if( itemWidthLayout == 18 ) fixPercent += 100;
if( itemWidthLayout == 1 )
automationCount ++;
if( fixPercent == 100 ) { // Nếu gặp một item tràn màn hình thì ngắt, lấy max để làm lưới cơ sở.
if( automationCount > maxAutomationCount) {
maxAutomationCount = automationCount;
automationCount = 0;
}
}
});
if( automationCount == 0 && maxAutomationCount == 0 ) return "";
if( maxAutomationCount > 0 ) automationCount = maxAutomationCount;
if( fixPercent >= 100 ) fixPercent = 0;
addHtml += cssNaviPrefix + ' ul li.item { width: calc( calc( '+ (100 - fixPercent ) +'% - '+ fixPx +'px) / '+ automationCount +') } ';
return addHtml;
}
var generateCSS = function(naviman_appItem, embed_id, setting, dragdrop, isNaviSection, section_setting) {
generateCSS_init(setting);
let html = '';
naviman_appItem.insertAdjacentHTML('beforebegin', html);
/*debugConsole("R:Setting ----------------------------");
debugConsole(setting);*/
};
var generateCSS_FixForMobile = function(cssNaviPrefix, setting, dragdrop, section_setting) {
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['FAB'])
return "";
if (!isMobileMode())
return "";
var fixPositionBottom = function (setting, cssNaviPrefix, dragdrop, section_setting) {
var addHtml = "";
if (setting['mobilePosition'] == NAVIGLOBAL['MOBILE_POSITION']['BOTTOM']) { // Thêm footer padding-bottom
// Fix: Thêm một khoảng trống ở dưới body, (nhưng nếu auto hide thì bỏ qua)
if (setting['mobileAutoHide'] != "true" && setting['mobileAutoHide'] != true) {
addHtml += ' body { padding-bottom: ' + (parseInt(setting['height']) + 0) + 'px; }';
}
// Fix: Hất bóng shadow lên.
addHtml += cssNaviPrefix + ' { box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.05); } ';
// Fix: Nếu padding-left, right được set, thì sub menu (level 2) vẫn phải full screen
if( parseInt(setting['settingPadding']['left']) + parseInt(setting['settingPadding']['right']) > 0 ) {
addHtml += cssNaviPrefix + 'ul li ul.children { width: calc( 100% + ' + (parseInt(setting['settingPadding']['left']) + parseInt(setting['settingPadding']['right'])) + 'px ); } ';
if (parseInt(setting['settingPadding']['left']) > 0)
addHtml += cssNaviPrefix + 'ul li ul.children { left: -' + parseInt(setting['settingPadding']['left']) + 'px; } ';
}
// Fix: Nếu margin-left, right được set, set width của menu để không bị tràn
if (setting['settingMargin']['left'] != 0 || setting['settingMargin']['right'] != 0) {
addHtml += cssNaviPrefix + ' { width: calc( 100% - ' + (parseInt(setting['settingMargin']['left']) + parseInt(setting['settingMargin']['right'])) + 'px) }; ';
}
}
return addHtml;
};
var fixPositionTop = function (setting, cssNaviPrefix, dragdrop, section_setting) {
var addHtml = "";
if (setting['mobilePosition'] == NAVIGLOBAL['MOBILE_POSITION']['TOP']) {
addHtml += cssNaviPrefix + ' { bottom: initial; top:0px; } ';
if(section_setting['not_sticky'] == false || section_setting['not_sticky'] == "false" ) // Nếu là loại sticky thì mới + thêm padding-top cho boddy
addHtml += ' body {padding-top: ' + setting['height'] + 'px;} ';
addHtml += cssNaviPrefix + ' ul li ul.children { bottom: initial; top: ' + (parseInt(setting['height']) + 0) + 'px; ' + BOX_SHADOW + ' } ';
addHtml += cssNaviPrefix + ' { border-radius: 0px 0px ' + setting['borderRadius'] + 'px ' + setting['borderRadius'] + 'px } ';
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['HIGHLIGHT'])
addHtml += cssNaviPrefix + ' ul li.item_primary > .inner { margin-top: 0px } ';
// Fix: Float là loại thứ 3, ko phải FAB
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['FLOATING']) {
if (setting['bottomMargin'] != 0) {
addHtml += cssNaviPrefix + ' { bottom: initial; top: ' + (parseInt(setting['bottomMargin'])) + 'px; } ';
addHtml += cssNaviPrefix + ' { border-radius: ' + setting['borderRadius'] + 'px } ';
addHtml += ' body {padding-top: ' + (parseInt(setting['height']) + parseInt(setting['bottomMargin']) + 8) + 'px} ';
}
}
// Thêm cái line ở giữa level 1 và 2
addHtml += cssNaviPrefix + ' ul li ul.children { border-top: solid 1px rgba(0,0,0,0.05); border-bottom:0px; } ';
// Fix: Nếu padding-left, right được set, thì sub menu (level 2) vẫn phải full screen
if( parseInt(setting['settingPadding']['left']) + parseInt(setting['settingPadding']['right']) > 0 ) {
addHtml += cssNaviPrefix + 'ul li ul.children { width: calc( 100% + ' + (parseInt(setting['settingPadding']['left']) + parseInt(setting['settingPadding']['right'])) + 'px ); } ';
if (parseInt(setting['settingPadding']['left']) > 0)
addHtml += cssNaviPrefix + 'ul li ul.children { left: -' + parseInt(setting['settingPadding']['left']) + 'px; } ';
}
// Fix: Nếu margin-left, right được set, set width của menu để không bị tràn
if (setting['settingMargin']['left'] != 0 || setting['settingMargin']['right'] != 0) {
addHtml += cssNaviPrefix + ' { width: calc( 100% - ' + (parseInt(setting['settingMargin']['left']) + parseInt(setting['settingMargin']['right'])) + 'px) }; ';
}
}
return addHtml;
};
var fixPositionRightCenter = function (setting, cssNaviPrefix, dragdrop, section_setting) {
var addHtml = "";
if (setting['mobilePosition'] == NAVIGLOBAL['MOBILE_POSITION']['RIGHT_CENTER']) {
addHtml += cssNaviPrefix + ' { width: ' + setting['height'] + 'px; left: initial; right: 0px; height: ' + ((parseInt(setting['height']) + 8) * dragdrop.length) + 'px } ';
addHtml += cssNaviPrefix + ' ul li.item { width: ' + setting['height'] + 'px; height: ' + (parseInt(setting['height']) + 8) + 'px; } ';
addHtml += cssNaviPrefix + ' { top: ' + ((windowHeight - ((parseInt(setting['height']) + 8) * dragdrop.length)) / 2) + 'px; }';
addHtml += cssNaviPrefix + ' { border-radius: ' + setting['borderRadius'] + 'px 0px 0px ' + setting['borderRadius'] + 'px } ';
addHtml += cssNaviPrefix + ' ul li ul.children { left: -201px; bottom: initial; margin-top: -' + (parseInt(setting['height']) + 8) + 'px; width: ' + VERTICAL_CHILDREN_WIDTH + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10); } ';
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['HIGHLIGHT'])
addHtml += cssNaviPrefix + ' ul li.item_primary > .inner { margin-top: 0px; margin-left: -8px } ';
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['FLOATING']) {
if (setting['bottomMargin'] != "") {
addHtml += cssNaviPrefix + ' { right: ' + (parseInt(setting['bottomMargin'])) + 'px; } ';
addHtml += cssNaviPrefix + ' { border-radius: ' + setting['borderRadius'] + 'px } ';
}
}
if (isHadValue(setting['dividerColor']))
addHtml += cssNaviPrefix + ' ul li.item_divider { border-right: 0px; margin-right: 0px; border-bottom: solid 1px ' + setting['dividerColor'] + '; margin-bottom: -1px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children {width: ' + setting['submenuWidth'] + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children {left: ' + (-(setting['submenuWidth']) - 1) + 'px; } ';
/*if (setting['layout'] != NAVIGLOBAL['LAYOUT']['HIGHLIGHT'])
addHtml += cssNaviPrefix + ' ul li.item .inner { padding: 8px 0px 0px 0px; } ';*/
}
return addHtml;
};
var fixPositionRightBottom = function (setting, cssNaviPrefix, dragdrop, section_setting) {
var addHtml = "";
if ( setting['mobilePosition'] == NAVIGLOBAL['MOBILE_POSITION']['RIGHT_BOTTOM'] )
{
addHtml += cssNaviPrefix + ' { width: ' + setting['height'] + 'px; left: initial; right: 0px; height: ' + ((parseInt(setting['height']) + 8) * dragdrop.length) + 'px } ';
addHtml += cssNaviPrefix + ' ul li.item { width: ' + setting['height'] + 'px; height: ' + (parseInt(setting['height']) + 8) + 'px; } ';
addHtml += cssNaviPrefix + ' { top: ' + ((windowHeight - ((parseInt(setting['height']) + 8) * dragdrop.length)) / 2) + 'px; }';
addHtml += cssNaviPrefix + ' { border-radius: ' + setting['borderRadius'] + 'px 0px 0px ' + setting['borderRadius'] + 'px } ';
addHtml += cssNaviPrefix + ' ul li ul.children { left: -201px; bottom: initial; margin-top: -' + (parseInt(setting['height']) + 8) + 'px; width: ' + VERTICAL_CHILDREN_WIDTH + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10); } ';
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['HIGHLIGHT'])
addHtml += cssNaviPrefix + ' ul li.item_primary > .inner { margin-top: 0px; margin-left: -8px } ';
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['FLOATING']) {
if (setting['bottomMargin'] != "") {
addHtml += cssNaviPrefix + ' { right: ' + (parseInt(setting['bottomMargin'])) + 'px; } ';
addHtml += cssNaviPrefix + ' { border-radius: ' + setting['borderRadius'] + 'px } ';
}
}
addHtml += cssNaviPrefix + ' { top: initial; bottom: 24px; } ';
if (isHadValue(setting['dividerColor']))
addHtml += cssNaviPrefix + ' ul li.item_divider { border-right: 0px; margin-right: 0px; border-bottom: solid 1px ' + setting['dividerColor'] + '; margin-bottom: -1px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children {width: ' + setting['submenuWidth'] + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children {left: ' + (-(setting['submenuWidth']) - 1) + 'px; } ';
addHtml += cssNaviPrefix + ' ul li.item { position: relative; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { margin-top: initial; bottom: 0px; top: initial; } ';
/*if (setting['layout'] != NAVIGLOBAL['LAYOUT']['HIGHLIGHT'])
addHtml += cssNaviPrefix + ' ul li.item .inner { padding: 8px 0px 0px 0px; } ';*/
}
return addHtml;
};
var fixPositionLeftCenter = function (setting, cssNaviPrefix, dragdrop, section_setting) {
var addHtml = "";
if (setting['mobilePosition'] == NAVIGLOBAL['MOBILE_POSITION']['LEFT_CENTER']) {
addHtml += cssNaviPrefix + ' { width: ' + setting['height'] + 'px; right: initial; left: 0px; height: ' + ((parseInt(setting['height']) + 8) * dragdrop.length) + 'px } ';
addHtml += cssNaviPrefix + ' ul li.item { width: ' + setting['height'] + 'px; height: ' + (parseInt(setting['height']) + 8) + 'px; } ';
addHtml += cssNaviPrefix + ' { top: ' + ((windowHeight - ((parseInt(setting['height']) + 8) * dragdrop.length)) / 2) + 'px; }';
addHtml += cssNaviPrefix + ' { border-radius: 0px ' + setting['borderRadius'] + 'px ' + setting['borderRadius'] + 'px 0px } ';
addHtml += cssNaviPrefix + ' ul li ul.children { left: ' + (parseInt(setting['height']) + 1) + 'px; bottom: initial; margin-top: -' + (parseInt(setting['height']) + 8) + 'px; width: ' + VERTICAL_CHILDREN_WIDTH + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10); } ';
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['HIGHLIGHT'])
addHtml += cssNaviPrefix + ' ul li.item_primary > .inner { margin-top: 0px; margin-left: 1px } ';
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['FLOATING']) {
if (setting['bottomMargin'] != "") {
addHtml += cssNaviPrefix + ' { left: ' + (parseInt(setting['bottomMargin'])) + 'px; } ';
addHtml += cssNaviPrefix + ' { border-radius: ' + setting['borderRadius'] + 'px } ';
}
}
if (isHadValue(setting['dividerColor']))
addHtml += cssNaviPrefix + ' ul li.item_divider { border-right: 0px; margin-right: 0px; border-bottom: solid 1px ' + setting['dividerColor'] + '; margin-bottom: -1px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children {width: ' + setting['submenuWidth'] + 'px; } ';
/*if (setting['layout'] != NAVIGLOBAL['LAYOUT']['HIGHLIGHT'])
addHtml += cssNaviPrefix + ' ul li.item .inner { padding: 8px 0px 0px 0px; } ';*/
}
return addHtml;
};
var fixPositionLeftBottom = function (setting, cssNaviPrefix, dragdrop, section_setting) {
var addHtml = "";
if (setting['mobilePosition'] == NAVIGLOBAL['MOBILE_POSITION']['LEFT_BOTTOM']) {
addHtml += cssNaviPrefix + ' { width: ' + setting['height'] + 'px; right: initial; left: 0px; height: ' + ((parseInt(setting['height']) + 8) * dragdrop.length) + 'px } ';
addHtml += cssNaviPrefix + ' ul li.item { width: ' + setting['height'] + 'px; height: ' + (parseInt(setting['height']) + 8) + 'px; } ';
addHtml += cssNaviPrefix + ' { top: ' + ((windowHeight - ((parseInt(setting['height']) + 8) * dragdrop.length)) / 2) + 'px; }';
addHtml += cssNaviPrefix + ' { border-radius: 0px ' + setting['borderRadius'] + 'px ' + setting['borderRadius'] + 'px 0px } ';
addHtml += cssNaviPrefix + ' ul li ul.children { left: ' + (parseInt(setting['height']) + 1) + 'px; bottom: initial; margin-top: -' + (parseInt(setting['height']) + 8) + 'px; width: ' + VERTICAL_CHILDREN_WIDTH + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10); } ';
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['HIGHLIGHT'])
addHtml += cssNaviPrefix + ' ul li.item_primary > .inner { margin-top: 0px; margin-left: 1px } ';
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['FLOATING']) {
if (setting['bottomMargin'] != "") {
addHtml += cssNaviPrefix + ' { left: ' + (parseInt(setting['bottomMargin'])) + 'px; } ';
addHtml += cssNaviPrefix + ' { border-radius: ' + setting['borderRadius'] + 'px } ';
}
}
addHtml += cssNaviPrefix + ' { top: initial; bottom: 24px; } ';
if (isHadValue(setting['dividerColor']))
addHtml += cssNaviPrefix + ' ul li.item_divider { border-right: 0px; margin-right: 0px; border-bottom: solid 1px ' + setting['dividerColor'] + '; margin-bottom: -1px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children {width: ' + setting['submenuWidth'] + 'px; } ';
/*if (setting['layout'] != NAVIGLOBAL['LAYOUT']['HIGHLIGHT'])
addHtml += cssNaviPrefix + ' ul li.item .inner { padding: 8px 0px 0px 0px; } ';*/
addHtml += cssNaviPrefix + ' ul li.item { position: relative; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { margin-top: initial; bottom: 0px; top: initial; } ';
}
return addHtml;
};
let html = ' @media only screen and (max-width: 768px) {';
html += fixPositionBottom(setting, cssNaviPrefix, dragdrop, section_setting);
html += fixPositionTop(setting, cssNaviPrefix, dragdrop, section_setting);
html += fixPositionRightCenter(setting, cssNaviPrefix, dragdrop, section_setting);
html += fixPositionRightBottom(setting, cssNaviPrefix, dragdrop, section_setting);
html += fixPositionLeftCenter(setting, cssNaviPrefix, dragdrop, section_setting);
html += fixPositionLeftBottom(setting, cssNaviPrefix, dragdrop, section_setting);
html += '}';
return html;
};
var generateCSS_FixForDesktop = function (cssNaviPrefix, setting, dragdrop, isNaviSection, section_setting) {
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['FAB'])
return "";
if (isMobileMode())
return "";
var fixPositionBottomCenter = function (setting, cssNaviPrefix, dragdrop) {
var addHtml = "";
if (setting['desktopPosition'] == NAVIGLOBAL['DESKTOP_POSITION']['BOTTOM_CENTER']) {
addHtml += cssNaviPrefix + ' { width: ' + DESKTOP_MAX_WIDTH + 'px; left: ' + ((windowWidth - DESKTOP_MAX_WIDTH) / 2) + 'px; } ';
addHtml += cssNaviPrefix + ' ul li.item{ position: relative; } ';
addHtml += cssNaviPrefix + ' ul li ul.children{ left: initial; right: 0px; bottom: ' + (parseInt(setting['height']) + 1) + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children {width: ' + setting['submenuWidth'] + 'px; } ';
}
return addHtml;
};
var fixPositionBottomRight = function (setting, cssNaviPrefix, dragdrop) {
var addHtml = "";
if (setting['desktopPosition'] == NAVIGLOBAL['DESKTOP_POSITION']['BOTTOM_RIGHT']) {
addHtml += cssNaviPrefix + ' { width: ' + DESKTOP_MAX_WIDTH + 'px; left: initial; right: 16px; } ';
addHtml += cssNaviPrefix + ' ul li.item{ position: relative; } ';
addHtml += cssNaviPrefix + ' ul li ul.children{ left: initial; right: 0px; bottom: ' + (parseInt(setting['height']) + 1) + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children {width: ' + setting['submenuWidth'] + 'px; } ';
}
return addHtml;
};
var fixPositionBottomLeft = function (setting, cssNaviPrefix, dragdrop) {
var addHtml = "";
if (setting['desktopPosition'] == NAVIGLOBAL['DESKTOP_POSITION']['BOTTOM_LEFT']) {
addHtml += cssNaviPrefix + ' { width: ' + DESKTOP_MAX_WIDTH + 'px; left: 16px; } ';
addHtml += cssNaviPrefix + ' ul li.item{ position: relative; } ';
addHtml += cssNaviPrefix + ' ul li ul.children{ left: initial; right: 0px; bottom: ' + (parseInt(setting['height']) + 1) + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children {width: ' + setting['submenuWidth'] + 'px; } ';
}
return addHtml;
};
var fixPositionBottomFull = function (setting, cssNaviPrefix, dragdrop) {
var addHtml = "";
if (setting['desktopPosition'] == NAVIGLOBAL['DESKTOP_POSITION']['BOTTOM_FULL']) {
addHtml += cssNaviPrefix + ' .navigation { width: ' + (DESKTOP_MAX_WIDTH * 2) + 'px; left: ' + ((windowWidth - DESKTOP_MAX_WIDTH * 2) / 2) + 'px } ';
addHtml += cssNaviPrefix + ' ul li.item{ position: relative; } ';
addHtml += cssNaviPrefix + ' ul li ul.children{ left: initial; right: 0px; bottom: ' + (parseInt(setting['height']) + 1) + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children {width: ' + setting['submenuWidth'] + 'px; } ';
}
return addHtml;
};
var fixPositionRightTop = function (setting, cssNaviPrefix, dragdrop) {
var addHtml = "";
if (setting['desktopPosition'] == NAVIGLOBAL['DESKTOP_POSITION']['RIGHT_TOP']) {
addHtml += cssNaviPrefix + ' { width: ' + setting['height'] + 'px; left: initial; right: 0px; height: ' + ((parseInt(setting['height']) + 8) * dragdrop.length) + 'px } ';
addHtml += cssNaviPrefix + ' ul li.item { width: ' + setting['height'] + 'px; height: ' + (parseInt(setting['height']) + 8) + 'px; } ';
addHtml += cssNaviPrefix + ' { top: ' + ((windowHeight - ((parseInt(setting['height']) + 8) * dragdrop.length)) / 2) + 'px; }';
addHtml += cssNaviPrefix + ' { border-radius: ' + setting['borderRadius'] + 'px 0px 0px ' + setting['borderRadius'] + 'px } ';
addHtml += cssNaviPrefix + ' ul li ul.children { left: -201px; bottom: initial; margin-top: -' + (parseInt(setting['height']) + 8) + 'px; width: ' + VERTICAL_CHILDREN_WIDTH + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { ' + BOX_SHADOW + ' } ';
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['HIGHLIGHT'])
addHtml += cssNaviPrefix + ' ul li.item_primary > .inner { margin-top: 0px; margin-left: -8px } ';
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['FLOATING']) {
if (setting['bottomMargin'] != "") {
addHtml += cssNaviPrefix + ' { right: ' + (parseInt(setting['bottomMargin'])) + 'px; } ';
addHtml += cssNaviPrefix + ' { border-radius: ' + setting['borderRadius'] + 'px } ';
}
}
if (isHadValue(setting['dividerColor']))
addHtml += cssNaviPrefix + ' ul li.item_divider { border-right: 0px; margin-right: 0px; border-bottom: solid 1px ' + setting['dividerColor'] + '; margin-bottom: -1px; } ';
if (setting['layout'] != NAVIGLOBAL['LAYOUT']['HIGHLIGHT']) // Nếu là layout 2 thì ko làm việc này.
addHtml += cssNaviPrefix + ' ul li.item .inner {width: initial; } ';
let submenuWidth = (-setting['submenuWidth'] - 1);
addHtml += cssNaviPrefix + ' ul li ul.children {width: ' + setting['submenuWidth'] + 'px; left: ' + submenuWidth + 'px; } ';
addHtml += cssNaviPrefix + ' ul li.item { width: 100%; } ';
}
return addHtml;
};
var fixPositionLeftTop = function (setting, cssNaviPrefix, dragdrop) {
var addHtml = "";
if (setting['desktopPosition'] == NAVIGLOBAL['DESKTOP_POSITION']['LEFT_TOP']) {
addHtml += cssNaviPrefix + ' { width: ' + setting['height'] + 'px; right: initial; left: 0px; height: ' + ((parseInt(setting['height']) + 8) * dragdrop.length) + 'px } ';
addHtml += cssNaviPrefix + ' ul li.item { width: ' + setting['height'] + 'px; height: ' + (parseInt(setting['height']) + 8) + 'px; } ';
addHtml += cssNaviPrefix + ' { top: ' + ((windowHeight - ((parseInt(setting['height']) + 8) * dragdrop.length)) / 2) + 'px; }';
addHtml += cssNaviPrefix + ' { border-radius: 0px ' + setting['borderRadius'] + 'px ' + setting['borderRadius'] + 'px 0px } ';
addHtml += cssNaviPrefix + ' ul li ul.children { left: ' + (parseInt(setting['height']) + 1) + 'px; bottom: initial; margin-top: -' + (parseInt(setting['height']) + 8) + 'px; width: ' + VERTICAL_CHILDREN_WIDTH + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { ' + BOX_SHADOW + ' } ';
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['HIGHLIGHT'])
addHtml += cssNaviPrefix + ' ul li.item_primary > .inner { margin-top: 0px; margin-left: 1px } ';
if (setting['layout'] == NAVIGLOBAL['LAYOUT']['FLOATING']) {
if (setting['bottomMargin'] != "") {
addHtml += cssNaviPrefix + ' { left: ' + (parseInt(setting['bottomMargin'])) + 'px; } ';
addHtml += cssNaviPrefix + ' { border-radius: ' + setting['borderRadius'] + 'px } ';
}
}
if (isHadValue(setting['dividerColor']))
addHtml += cssNaviPrefix + ' ul li.item_divider { border-right: 0px; margin-right: 0px; border-bottom: solid 1px ' + setting['dividerColor'] + '; margin-bottom: -1px; } ';
if (setting['layout'] != NAVIGLOBAL['LAYOUT']['HIGHLIGHT']) // Nếu là layout 2 thì ko làm việc này.
addHtml += cssNaviPrefix + ' ul li.item .inner {width: initial; } ';
let submenuWidth = (-setting['submenuWidth'] - 1);
submenuWidth = (parseInt(setting['height']) + 1);
addHtml += cssNaviPrefix + ' ul li ul.children {width: ' + setting['submenuWidth'] + 'px; left: ' + submenuWidth + 'px; } ';
addHtml += cssNaviPrefix + ' ul li.item { width: 100%; } ';
}
return addHtml;
};
var fixPositionLeftFullTop = function (setting, cssNaviPrefix, dragdrop) {
var addHtml = "";
if (setting['desktopPosition'] == NAVIGLOBAL['DESKTOP_POSITION']['LEFT_FULL_TOP']) {
if (isHadValue(setting['dividerColor']))
addHtml += cssNaviPrefix + ' ul li.item_divider { border-right: 0px; margin-right: 0px; border-bottom: solid 1px ' + setting['dividerColor'] + '; margin-bottom: -1px; } ';
if (setting['layout'] != NAVIGLOBAL['LAYOUT']['HIGHLIGHT']) // Nếu là layout 2 thì ko làm việc này.
addHtml += cssNaviPrefix + ' ul li.item .inner {width: initial; } ';
let submenuWidth = (-setting['submenuWidth'] - 1);
//if (setting['desktopPosition'] == NAVIGLOBAL['DESKTOP_POSITION']['LEFT_TOP']) submenuWidth = (parseInt(setting['height']) + 1);
addHtml += cssNaviPrefix + ' ul li ul.children {width: ' + setting['submenuWidth'] + 'px; left: ' + submenuWidth + 'px; } ';
addHtml += cssNaviPrefix + ' ul li.item { width: 100%; } ';
addHtml += ' body {width: calc(100% - ' + setting['height'] + 'px); margin-left: ' + setting['height'] + 'px; } ';
addHtml += cssNaviPrefix + ' { width: ' + setting['height'] + 'px; right: initial; left: 0px; top: 0px; height: 100vh; padding-top: 16px; } ';
addHtml += cssNaviPrefix + ' ul li.item { width: ' + setting['height'] + 'px; height: ' + (parseInt(setting['height']) + 8) + 'px; } ';
addHtml += cssNaviPrefix + ' { border-radius: 0px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { left: ' + (parseInt(setting['height']) + 1) + 'px; bottom: initial; margin-top: -' + (parseInt(setting['height']) + 8) + 'px; width: ' + VERTICAL_CHILDREN_WIDTH + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { ' + BOX_SHADOW + ' } ';
addHtml += cssNaviPrefix + ' { padding-top: 16px; } ';
addHtml += cssNaviPrefix + ' ul li.item { width: 100%; min-width: 24px; } '; // Fix lỗi nếu padding quá lớn thì bị dồn cục
}
return addHtml;
};
var fixPositionLeftFullCenter = function (setting, cssNaviPrefix, dragdrop) {
var addHtml = "";
if (setting['desktopPosition'] == NAVIGLOBAL['DESKTOP_POSITION']['LEFT_FULL_CENTER']) {
if (isHadValue(setting['dividerColor']))
addHtml += cssNaviPrefix + ' ul li.item_divider { border-right: 0px; margin-right: 0px; border-bottom: solid 1px ' + setting['dividerColor'] + '; margin-bottom: -1px; } ';
if (setting['layout'] != NAVIGLOBAL['LAYOUT']['HIGHLIGHT']) // Nếu là layout 2 thì ko làm việc này.
addHtml += cssNaviPrefix + ' ul li.item .inner {width: initial; } ';
let submenuWidth = (-setting['submenuWidth'] - 1);
addHtml += cssNaviPrefix + ' ul li ul.children {width: ' + setting['submenuWidth'] + 'px; left: ' + submenuWidth + 'px; } ';
addHtml += cssNaviPrefix + ' ul li.item { width: 100%; } ';
addHtml += ' body {width: calc(100% - ' + setting['height'] + 'px); margin-left: ' + setting['height'] + 'px; } ';
addHtml += cssNaviPrefix + ' { width: ' + setting['height'] + 'px; right: initial; left: 0px; top: 0px; height: 100vh; padding-top: 16px; } ';
addHtml += cssNaviPrefix + ' ul li.item { width: ' + setting['height'] + 'px; height: ' + (parseInt(setting['height']) + 8) + 'px; } ';
addHtml += cssNaviPrefix + ' { border-radius: 0px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { left: ' + (parseInt(setting['height']) + 1) + 'px; bottom: initial; margin-top: -' + (parseInt(setting['height']) + 8) + 'px; width: ' + VERTICAL_CHILDREN_WIDTH + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { ' + BOX_SHADOW + ' } ';
let bodyPaddingTop = (window.innerHeight - (parseInt(setting['height']) + 8) * dragdrop.length) / 2;
addHtml += cssNaviPrefix + ' { padding-top: ' + bodyPaddingTop + 'px; } ';
addHtml += cssNaviPrefix + ' ul li.item { width: 100%; min-width: 24px; } '; // Fix lỗi nếu padding quá lớn thì bị dồn cục
}
return addHtml;
};
var fixPositionRightFullTop = function (setting, cssNaviPrefix, dragdrop) {
var addHtml = "";
if (setting['desktopPosition'] == NAVIGLOBAL['DESKTOP_POSITION']['RIGHT_FULL_TOP']) {
if (isHadValue(setting['dividerColor']))
addHtml += cssNaviPrefix + ' ul li.item_divider { border-right: 0px; margin-right: 0px; border-bottom: solid 1px ' + setting['dividerColor'] + '; margin-bottom: -1px; } ';
if (setting['layout'] != NAVIGLOBAL['LAYOUT']['HIGHLIGHT']) // Nếu là layout 2 thì ko làm việc này.
addHtml += cssNaviPrefix + ' ul li.item .inner {width: initial; } ';
let submenuWidth = (-setting['submenuWidth'] - 1);
addHtml += cssNaviPrefix + ' ul li ul.children {width: ' + setting['submenuWidth'] + 'px; left: ' + submenuWidth + 'px; } ';
addHtml += cssNaviPrefix + ' ul li.item { width: 100%; } ';
addHtml += ' body {width: calc(100% - ' + setting['height'] + 'px); margin-right: ' + setting['height'] + 'px; } ';
addHtml += cssNaviPrefix + ' { width: ' + setting['height'] + 'px; right: 0; left: initial; top: 0px; height: 100vh; padding-top: 16px; } ';
addHtml += cssNaviPrefix + ' ul li.item { width: ' + setting['height'] + 'px; height: ' + (parseInt(setting['height']) + 8) + 'px; } ';
addHtml += cssNaviPrefix + ' { border-radius: 0px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { right: ' + (parseInt(setting['height']) + 1) + 'px; bottom: initial; margin-top: -' + (parseInt(setting['height']) + 8) + 'px; width: ' + VERTICAL_CHILDREN_WIDTH + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { ' + BOX_SHADOW + ' } ';
addHtml += cssNaviPrefix + ' ul li ul.children {width: ' + setting['submenuWidth'] + 'px; left: ' + submenuWidth + 'px; } ';
addHtml += cssNaviPrefix + ' { padding-top: 16px; } ';
addHtml += cssNaviPrefix + ' ul li.item { width: 100%; min-width: 24px; } '; // Fix lỗi nếu padding quá lớn thì bị dồn cục
}
return addHtml;
};
var fixPositionRightFullCenter = function (setting, cssNaviPrefix, dragdrop) {
var addHtml = "";
if (setting['desktopPosition'] == NAVIGLOBAL['DESKTOP_POSITION']['RIGHT_FULL_CENTER']) {
if (isHadValue(setting['dividerColor']))
addHtml += cssNaviPrefix + ' ul li.item_divider { border-right: 0px; margin-right: 0px; border-bottom: solid 1px ' + setting['dividerColor'] + '; margin-bottom: -1px; } ';
if (setting['layout'] != NAVIGLOBAL['LAYOUT']['HIGHLIGHT']) // Nếu là layout 2 thì ko làm việc này.
addHtml += cssNaviPrefix + ' ul li.item .inner {width: initial; } ';
let submenuWidth = (-setting['submenuWidth'] - 1);
addHtml += cssNaviPrefix + ' ul li ul.children {width: ' + setting['submenuWidth'] + 'px; left: ' + submenuWidth + 'px; } ';
addHtml += cssNaviPrefix + ' ul li.item { width: 100%; } ';
addHtml += ' body {width: calc(100% - ' + setting['height'] + 'px); margin-right: ' + setting['height'] + 'px; } ';
addHtml += cssNaviPrefix + ' { width: ' + setting['height'] + 'px; right: 0; left: initial; top: 0px; height: 100vh; padding-top: 16px; } ';
addHtml += cssNaviPrefix + ' ul li.item { width: ' + setting['height'] + 'px; height: ' + (parseInt(setting['height']) + 8) + 'px; } ';
addHtml += cssNaviPrefix + ' { border-radius: 0px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { right: ' + (parseInt(setting['height']) + 1) + 'px; bottom: initial; margin-top: -' + (parseInt(setting['height']) + 8) + 'px; width: ' + VERTICAL_CHILDREN_WIDTH + 'px; } ';
addHtml += cssNaviPrefix + ' ul li ul.children { ' + BOX_SHADOW + ' } ';
addHtml += cssNaviPrefix + ' ul li ul.children {width: ' + setting['submenuWidth'] + 'px; left: ' + submenuWidth + 'px; } ';
if (setting['desktopPosition'] == NAVIGLOBAL['DESKTOP_POSITION']['RIGHT_FULL_TOP'])
addHtml += cssNaviPrefix + ' { padding-top: 16px; } ';
else if (setting['desktopPosition'] == 10) {
let bodyPaddingTop = (window.innerHeight - (parseInt(setting['height']) + 8) * dragdrop.length) / 2;
addHtml += cssNaviPrefix + ' { padding-top: ' + bodyPaddingTop + 'px; } ';
}
addHtml += cssNaviPrefix + ' ul li.item { width: 100%; min-width: 24px; } '; // Fix lỗi nếu padding quá lớn thì bị dồn cục
}
return addHtml;
};
var fixPositionNaviSection = function (setting, cssNaviPrefix, dragdrop) {
var addHtml = "";
if (true) {
addHtml += cssNaviPrefix + ' { bottom: initial; top:0px; } ';
//if(section_setting['not_sticky'] == false || section_setting['not_sticky'] == "false" ) // Nếu là loại sticky thì mới + thêm padding-top cho boddy
// addHtml += ' body {padding-top: ' + setting['height'] + 'px;} ';
addHtml += cssNaviPrefix + ' ul li ul.children { bottom: initial; top: ' + (parseInt(setting['height']) + 0) + 'px; ' + BOX_SHADOW + ' } ';
//addHtml += cssNaviPrefix + ' { border-radius: 0px 0px ' + setting['borderRadius'] + 'px ' + setting['borderRadius'] + 'px } ';
// Thêm cái line ở giữa level 1 và 2
addHtml += cssNaviPrefix + ' ul li ul.children { border-top: solid 1px rgba(0,0,0,0.05); border-bottom:0px; } ';
}
return addHtml;
};
let html = ' @media only screen and (min-width: 769px) {';
//--------------------------------------------------------
if( !isNaviSection ) {
html += fixPositionBottomCenter(setting, cssNaviPrefix, dragdrop);
html += fixPositionBottomRight(setting, cssNaviPrefix, dragdrop);
html += fixPositionBottomLeft(setting, cssNaviPrefix, dragdrop);
html += fixPositionBottomFull(setting, cssNaviPrefix, dragdrop);
html += fixPositionRightTop(setting, cssNaviPrefix, dragdrop);
html += fixPositionLeftTop(setting, cssNaviPrefix, dragdrop);
html += fixPositionLeftFullTop(setting, cssNaviPrefix, dragdrop);
html += fixPositionLeftFullCenter(setting, cssNaviPrefix, dragdrop);
html += fixPositionRightFullTop(setting, cssNaviPrefix, dragdrop);
html += fixPositionRightFullCenter(setting, cssNaviPrefix, dragdrop);
}else
html += fixPositionNaviSection(setting, cssNaviPrefix, dragdrop);
//--------------------------------------------------------
html += '}';
return html;
};
var init = function () {
// debugConsole(NAVIGLOBAL);
};
var fixNotStickyMenu = function (naviman_appItem, shop, embed_id, section_setting) {
if(section_setting.length === 0 ) return;
if(section_setting['embed_id'] == '') return;
if(section_setting['not_sticky'] == false || section_setting['not_sticky'] == "false" ) return;
let html = '';
naviman_appItem.insertAdjacentHTML('beforebegin', html);
}
var fixNotStickyParents = function (naviman_app, naviItem, embed_id, section_setting) {
var getSessionParent = function(session_parent) {
var limitCount = 0;
while( true ) {
limitCount ++;
if( limitCount >= 30 ) return null;
if( session_parent.nodeName == "SECTION" )
return session_parent;
if( session_parent.nodeName == "MAIN" )
return null;
if( session_parent == document.body)
return null;
session_parent = session_parent.parentElement;
}
}
var getBlockParent = function(session_parent) {
var limitCount = 0;
while( true ) {
limitCount ++;
if( limitCount >= 30 ) return null;
if( session_parent.className.includes("shopify-block") )
return session_parent;
if( session_parent.nodeName == "MAIN" )
return null;
if( session_parent == document.body)
return null;
session_parent = session_parent.parentElement;
}
}
var getPageWidthParent = function(session_parent) {
var limitCount = 0;
while( true ) {
limitCount ++;
if( limitCount >= 30 ) return null;
if( session_parent.className.includes("page-width") )
return session_parent;
if( session_parent.nodeName == "MAIN" )
return null;
if( session_parent == document.body)
return null;
session_parent = session_parent.parentElement;
}
}
var getMenuKind = function( naviman_shopinfo, embed_id ) {
if( typeof naviman_shopinfo != "undefined" ) {
if (typeof naviman_shopinfo["bottombars"] != "undefined") {
if (typeof naviman_shopinfo["bottombars"][embed_id] != "undefined") {
return naviman_shopinfo["bottombars"][embed_id];
}
}
}
return -1;
}
var setting = naviItem["data"]["setting"];
var session = getSessionParent(naviman_app);
if( session != null ) {
session.style.position = "relative";
menuKind = getMenuKind(window.naviman_shopinfo, embed_id);
/* Fix cho phần header trên desktop *****/
if( menuKind == NAVIGLOBAL['MENU_KINDS']['SECTION_MEGAMENU'] ) {
session.style.backgroundColor = setting['backgroundColor'];
if( setting['level1BackgroundHide'] == false ) {
session.style.boxShadow = "0px 4px 8px 0px rgba(0, 0, 0, 0.05)";
document.getElementById(embed_id).style.boxShadow = "initial";
}
}
/* Fix việc không bị đè các item này lên item khác *****/
var zIndex = (50 - 1);
if (isHadValue(setting['zIndex'])) zIndex = setting['zIndex'] - 1;
session.style.zIndex = zIndex;
if( setting['fixedTopScrolling'] == true || setting['fixedTopScrolling'] == "true" ) {
session.style.position = "sticky";
session.style.top = 0;
if( setting["level1Dropshadow"] == false || setting["level1Dropshadow"] == 'false' ) {
var stickyPageYOffset = session.offsetTop;
window.onscroll = function () {
if (window.pageYOffset > stickyPageYOffset) {
session.style.boxShadow = "0px 4px 8px 0px rgba(0, 0, 0, 0.05)";
} else {
session.style.boxShadow = "initial";
}
};
}
}
}
var shopify_block = getBlockParent(naviman_app);
if( shopify_block != null ) {
shopify_block.style.display = "flex";
}
// Nếu full width thì bỏ padding 2 bên đi
if( section_setting['embed_is_full'] == true || section_setting['embed_is_full'] == "true" ) {
var page_width = getPageWidthParent(naviman_app);
if (page_width != null) {
page_width.style.padding = "0px";
}
}
}
var drawBottomNav = function (response, naviman_domain, var_shop, var_embed_id, section_setting = []) {
var shop = var_shop;
var embed_id = var_embed_id;
var naviman_app = document.getElementById("naviman_app");
if( embed_id != "" && (section_setting['not_sticky'] == true || section_setting['not_sticky'] == "true" ) ) {
naviman_app = document.getElementById(embed_id + "-container");
}
var generateMenu_Children = function(children, naviItem, data, extSubmenu, isNaviSection, section_setting) {
var index = 0;
var html = '