kevinowino869/mitrobill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Mobile Nav not open when cliecked

Browse Source
This commit is contained in:
Ibnu Maksum 2022-10-09 19:43:48 +07:00
parent 6033901886
commit e477bc90cc
No known key found for this signature in database
GPG Key ID: 7FC82848810579E5
5 changed files with 252 additions and 8288 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

388
ui/ui/scripts/app.js
View File

@ -1,160 +1,238 @@
jQuery(function(){ jQuery(function () {
"use strict"; "use strict";
var MateriaApp=function(){ var MateriaApp = function () {
this.isMobile=null, (this.isMobile = null),
this.navHorizontal=!1, (this.navHorizontal = !1),
this.fixedHeader=!0, (this.fixedHeader = !0),
this.themeActive="theme-zero", (this.themeActive = "theme-zero"),
this.navFull=!1, (this.navFull = !1),
this.navOffCanvas=!1, (this.navOffCanvas = !1),
this.mainContainer=$(".main-container"), (this.mainContainer = $(".main-container")),
this.siteHead=$(".site-head"), (this.siteHead = $(".site-head")),
this.siteSettings=$(".site-settings"), (this.siteSettings = $(".site-settings")),
this.app=$(".app"), (this.app = $(".app")),
this.navWrap=$(".nav-wrap"), (this.navWrap = $(".nav-wrap")),
this.contentContainer=$(".content-container"), (this.contentContainer = $(".content-container")),
this._init() this._init();
}; };
MateriaApp.prototype._init=function(){ (MateriaApp.prototype._init = function () {
this._checkMobile(), this._checkMobile(),
this.toggleSiteNav(), this.toggleSiteNav(),
this.initDefaultSettings(), this.initDefaultSettings(),
this.initRipple(), this.initRipple(),
this.toggleSettingsBox(), this.toggleSettingsBox(),
this.initPerfectScrollbars(), this.initPerfectScrollbars(),
this.toggleFullScreen(), this.toggleFullScreen(),
this.toggleFloatingSidebar(), this.toggleFloatingSidebar(),
this.initNavAccordion() this.initNavAccordion();
}, }),
MateriaApp.prototype.initDefaultSettings=function(){ (MateriaApp.prototype.initDefaultSettings = function () {
function onNavHorizontal(){ function onNavHorizontal() {
this.checked?(that.navHorizontal=!0, this.checked
that.mainContainer.addClass("nav-horizontal")):(that.navHorizontal=!1, ? ((that.navHorizontal = !0),
that.mainContainer.removeClass("nav-horizontal")), that.mainContainer.addClass("nav-horizontal"))
setTimeout(function(){ : ((that.navHorizontal = !1),
sQuery.navHorizontal=that.navHorizontal, that.mainContainer.removeClass("nav-horizontal")),
statesQuery.put(sQuery)}) setTimeout(function () {
} (sQuery.navHorizontal = that.navHorizontal),
function onFixedHeader(){ statesQuery.put(sQuery);
this.checked?(that.fixedHeader=!0,that.siteHead.addClass("fixedHeader"), });
that.contentContainer.addClass("fixedHeader")):(that.fixedHeader=!1,
that.siteHead.removeClass("fixedHeader"),
that.contentContainer.removeClass("fixedHeader")),
setTimeout(function(){
sQuery.fixedHeader=that.fixedHeader,
statesQuery.put(sQuery)
})
}
function onNavFull(){
var elems=["body",".main-container",".nav-wrap",".content-container"];
this.checked?(that.navFull=!0,elems.forEach(
function(el){$(el).addClass("nav-expand")})):(that.navFull=!1,
elems.forEach(function(el){$(el).removeClass("nav-expand")})),
setTimeout(function(){sQuery.navFull=that.navFull,statesQuery.put(sQuery)})
}
function onThemeChange(e){
var $t=$(this),
$list=that.siteSettings.find("#themeColor li");
$list.removeClass("active"),
$t.addClass("active"),
that.app.removeClass(that.themeActive),
that.themeActive=$t.data("theme"),
sQuery.themeActive=that.themeActive,
statesQuery.put(sQuery),
that.app.addClass(that.themeActive),
e.preventDefault()
}
var that=this,
SETTINGS_STATES="_setting-states",
statesQuery={get:function(){return JSON.parse(localStorage.getItem(SETTINGS_STATES))},
put:function(states){localStorage.setItem(SETTINGS_STATES,JSON.stringify(states))}},
sQuery=statesQuery.get()||{navHorizontal:that.navHorizontal,fixedHeader:that.fixedHeader,navFull:that.navFull,themeActive:that.themeActive};
if(sQuery&&(this.navHorizontal=sQuery.navHorizontal,
this.fixedHeader=sQuery.fixedHeader,
this.navFull=sQuery.navFull,
this.themeActive=sQuery.themeActive),
this.siteSettings.find("#navHorizontal").on("change",onNavHorizontal),
this.siteSettings.find("#fixedHeader").on("change",onFixedHeader),
this.siteSettings.find("#navFull").on("change",onNavFull),
this.siteSettings.find("#themeColor li").on("click touchstart",onThemeChange),
this.app.addClass(this.themeActive),
this.navFull){
this.siteSettings.find("#navFull")[0].checked=!0;
var elems=["body",".main-container",".nav-wrap",".content-container"];
elems.forEach(function(el){$(el).addClass("nav-expand")})
} }
this.navHorizontal&&(this.siteSettings.find("#navHorizontal")[0].checked=!0, function onFixedHeader() {
this.mainContainer.addClass("nav-horizontal")), this.checked
this.fixedHeader&&(this.siteSettings.find("#fixedHeader")[0].checked=!0, ? ((that.fixedHeader = !0),
this.siteHead.addClass("fixedHeader"), that.siteHead.addClass("fixedHeader"),
this.contentContainer.addClass("fixedHeader")), that.contentContainer.addClass("fixedHeader"))
this.navOffCanvas&&this.navWrap.addClass("nav-offcanvas") : ((that.fixedHeader = !1),
}, that.siteHead.removeClass("fixedHeader"),
MateriaApp.prototype.initRipple=function(){ that.contentContainer.removeClass("fixedHeader")),
Waves.attach(".btn"), setTimeout(function () {
Waves.init({duration:900,delay:300}), (sQuery.fixedHeader = that.fixedHeader), statesQuery.put(sQuery);
Waves.attach(".nav-wrap .site-nav .nav-list li"), });
Waves.attach(".md-button:not(.md-no-ink)") }
}, function onNavFull() {
MateriaApp.prototype._checkMobile=function(){ var elems = [
var mm=window.matchMedia("(max-width: 767px)"); "body",
this.isMobile=mm.matches?!0:!1; ".main-container",
var that=this;mm.addListener(function(m){that.isMobile=m.matches?!0:!1}) ".nav-wrap",
}, ".content-container",
MateriaApp.prototype.toggleSiteNav=function(){ ];
this.siteHead.find(".nav-trigger").on("click touchstart",function(e){ this.checked
var elems=["body",".main-container",".nav-wrap",".content-container"]; ? ((that.navFull = !0),
elems.forEach(function(el){ elems.forEach(function (el) {
$(el).toggleClass("nav-expand"),".nav-wrap"==el&&$(el).toggleClass("nav-offcanvas") $(el).addClass("nav-expand");
}),e.preventDefault() }))
}) : ((that.navFull = !1),
}, elems.forEach(function (el) {
MateriaApp.prototype.toggleSettingsBox=function(){ $(el).removeClass("nav-expand");
this.siteSettings.find(".trigger").on("click touchstart", })),
function(e){$(".site-settings").toggleClass("open"),e.preventDefault()}) setTimeout(function () {
}, (sQuery.navFull = that.navFull), statesQuery.put(sQuery);
MateriaApp.prototype.initPerfectScrollbars=function(){ });
var $el=$("[data-perfect-scrollbar]"); }
$el.each(function(){ function onThemeChange(e) {
var $t=$(this); var $t = $(this),
$t.perfectScrollbar({suppressScrollX:!0}), $list = that.siteSettings.find("#themeColor li");
setInterval(function(){ $list.removeClass("active"),
$t[0].scrollHeight>=$t[0].clientHeight&&$t.perfectScrollbar("update") $t.addClass("active"),
},400) that.app.removeClass(that.themeActive),
}) (that.themeActive = $t.data("theme")),
}, (sQuery.themeActive = that.themeActive),
MateriaApp.prototype.toggleFullScreen=function(){ statesQuery.put(sQuery),
$(".site-head .fullscreen").on("click",function(e){screenfull.toggle(),e.preventDefault()}) that.app.addClass(that.themeActive),
}, e.preventDefault();
MateriaApp.prototype.toggleFloatingSidebar=function(){ }
$(".site-head .floating-sidebar > a").on("click",function(e){$(this).parent().toggleClass("open"),e.preventDefault()}) var that = this,
}, SETTINGS_STATES = "_setting-states",
MateriaApp.prototype.initNavAccordion=function(){ statesQuery = {
var el=$(".site-nav .nav-list"),lists=el.find("ul").parent("li"), get: function () {
a=lists.children("a"),aul=lists.find("ul a"), return JSON.parse(localStorage.getItem(SETTINGS_STATES));
listsRest=el.children("li").not(lists), },
aRest=listsRest.children("a"), put: function (states) {
stopClick=0,that=this;a.on("click",function(e){ localStorage.setItem(SETTINGS_STATES, JSON.stringify(states));
if(!that.navHorizontal){ },
if(e.timeStamp-stopClick>300){ },
var self=$(this), sQuery = statesQuery.get() || {
parent=self.parent("li"); navHorizontal: that.navHorizontal,
lists.not(parent).removeClass("open"), fixedHeader: that.fixedHeader,
parent.toggleClass("open"), navFull: that.navFull,
stopClick=e.timeStamp themeActive: that.themeActive,
};
if (
(sQuery &&
((this.navHorizontal = sQuery.navHorizontal),
(this.fixedHeader = sQuery.fixedHeader),
(this.navFull = sQuery.navFull),
(this.themeActive = sQuery.themeActive)),
this.siteSettings.find("#navHorizontal").on("change", onNavHorizontal),
this.siteSettings.find("#fixedHeader").on("change", onFixedHeader),
this.siteSettings.find("#navFull").on("change", onNavFull),
this.siteSettings
.find("#themeColor li")
.on("click touchstart", onThemeChange),
this.app.addClass(this.themeActive),
this.navFull)
) {
this.siteSettings.find("#navFull")[0].checked = !0;
var elems = [
"body",
".main-container",
".nav-wrap",
".content-container",
];
elems.forEach(function (el) {
$(el).addClass("nav-expand");
});
}
this.navHorizontal &&
((this.siteSettings.find("#navHorizontal")[0].checked = !0),
this.mainContainer.addClass("nav-horizontal")),
this.fixedHeader &&
((this.siteSettings.find("#fixedHeader")[0].checked = !0),
this.siteHead.addClass("fixedHeader"),
this.contentContainer.addClass("fixedHeader")),
this.navOffCanvas && this.navWrap.addClass("nav-offcanvas");
}),
(MateriaApp.prototype.initRipple = function () {
Waves.attach(".btn"),
Waves.init({ duration: 900, delay: 300 }),
Waves.attach(".nav-wrap .site-nav .nav-list li"),
Waves.attach(".md-button:not(.md-no-ink)");
}),
(MateriaApp.prototype._checkMobile = function () {
var mm = window.matchMedia("(max-width: 767px)");
this.isMobile = mm.matches ? !0 : !1;
var that = this;
mm.addListener(function (m) {
that.isMobile = m.matches ? !0 : !1;
});
}),
(MateriaApp.prototype.toggleSiteNav = function () {
this.siteHead.find(".nav-trigger").on("click touchstart", function (e) {
var elems = [
"body",
".main-container",
".nav-wrap",
".content-container",
];
elems.forEach(function (el) {
$(el).toggleClass("nav-expand"),
".nav-wrap" == el && $(el).toggleClass("nav-offcanvas");
}),
e.preventDefault();
});
}),
(MateriaApp.prototype.toggleSettingsBox = function () {
this.siteSettings.find(".trigger").on("click touchstart", function (e) {
$(".site-settings").toggleClass("open"), e.preventDefault();
});
}),
(MateriaApp.prototype.initPerfectScrollbars = function () {
var $el = $("[data-perfect-scrollbar]");
$el.each(function () {
var $t = $(this);
$t.perfectScrollbar({ suppressScrollX: !0 }),
setInterval(function () {
$t[0].scrollHeight >= $t[0].clientHeight &&
$t.perfectScrollbar("update");
}, 400);
});
}),
(MateriaApp.prototype.toggleFullScreen = function () {
$(".site-head .fullscreen").on("click", function (e) {
screenfull.toggle(), e.preventDefault();
});
}),
(MateriaApp.prototype.toggleFloatingSidebar = function () {
$(".site-head .floating-sidebar > a").on("click", function (e) {
$(this).parent().toggleClass("open"), e.preventDefault();
});
}),
(MateriaApp.prototype.initNavAccordion = function () {
var el = $(".site-nav .nav-list"),
lists = el.find("ul").parent("li"),
a = lists.children("a"),
aul = lists.find("ul a"),
listsRest = el.children("li").not(lists),
aRest = listsRest.children("a"),
stopClick = 0,
that = this;
a.on("click", function (e) {
if (!that.navHorizontal) {
if (e.timeStamp - stopClick > 300) {
var self = $(this),
parent = self.parent("li");
lists.not(parent).removeClass("open"),
parent.toggleClass("open"),
(stopClick = e.timeStamp);
}
e.preventDefault();
} }
e.preventDefault() e.stopPropagation(), e.stopImmediatePropagation();
} }),
e.stopPropagation(), aul.on("touchend", function (e) {
e.stopImmediatePropagation() if (!that.navHorizontal) {
}), var parent = aRest.parent("li");
aul.on("touchend",function(e){ lists.not(parent).removeClass("open");
that.isMobile&&that.navWrap.toggleClass("nav-offcanvas"), }
e.stopPropagation(), that.isMobile && that.navWrap.toggleClass("nav-offcanvas"),
e.stopImmediatePropagation() e.stopPropagation(),
}), e.stopImmediatePropagation();
aRest.on("touchend",function(){that.isMobile&&that.navWrap.toggleClass("nav-offcanvas")}), }),
aRest.on("click",function(e){if(!that.navHorizontal){var parent=aRest.parent("li");lists.not(parent).removeClass("open")}e.stopPropagation(),e.stopImmediatePropagation()}) aRest.on("touchend", function () {
}; if (!that.navHorizontal) {
window.MateriaApp=new MateriaApp var parent = aRest.parent("li");
}); lists.not(parent).removeClass("open");
}
that.isMobile && that.navWrap.toggleClass("nav-offcanvas");
}),
aRest.on("click", function (e) {
if (!that.navHorizontal) {
var parent = aRest.parent("li");
lists.not(parent).removeClass("open");
}
e.stopPropagation(), e.stopImmediatePropagation();
});
});
window.MateriaApp = new MateriaApp();
});

2364
ui/ui/scripts/bootstrap.js vendored
View File

File diff suppressed because one or more lines are too long

26
ui/ui/sections/header.tpl
View File

@ -133,7 +133,7 @@
{$_MENU_AFTER_DASHBOARD} {$_MENU_AFTER_DASHBOARD}
{if $_admin['user_type'] eq 'Admin' || $_admin['user_type'] eq 'Sales'} {if $_admin['user_type'] eq 'Admin' || $_admin['user_type'] eq 'Sales'}
<li {if $_system_menu eq 'customers'}class="open"{/if}> <li {if $_system_menu eq 'customers'}class="open"{/if}>
<a href="#" onClick="toggleDropdownMobile(this)"> <a href="#">
<i class="ion ion-android-contacts"></i> <i class="ion ion-android-contacts"></i>
<span class="text">{$_L['Customers']}</span> <span class="text">{$_L['Customers']}</span>
<i class="arrow ion-chevron-left"></i> <i class="arrow ion-chevron-left"></i>
@ -146,7 +146,7 @@
</li> </li>
{$_MENU_AFTER_CUSTOMERS} {$_MENU_AFTER_CUSTOMERS}
<li {if $_system_menu eq 'prepaid'}class="open"{/if}> <li {if $_system_menu eq 'prepaid'}class="open"{/if}>
<a href="#" onClick="toggleDropdownMobile(this)"> <a href="#">
<i class="ion ion-card"></i> <i class="ion ion-card"></i>
<span class="text">{$_L['Prepaid']}</span> <span class="text">{$_L['Prepaid']}</span>
<i class="arrow ion-chevron-left"></i> <i class="arrow ion-chevron-left"></i>
@ -161,7 +161,7 @@
</li> </li>
{$_MENU_AFTER_PREPAID} {$_MENU_AFTER_PREPAID}
<li {if $_system_menu eq 'services'}class="open"{/if}> <li {if $_system_menu eq 'services'}class="open"{/if}>
<a href="#" onClick="toggleDropdownMobile(this)"> <a href="#">
<i class="ion ion-cube"></i> <i class="ion ion-cube"></i>
<span class="text">{$_L['Services']}</span> <span class="text">{$_L['Services']}</span>
<i class="arrow ion-chevron-left"></i> <i class="arrow ion-chevron-left"></i>
@ -175,7 +175,7 @@
</li> </li>
{$_MENU_AFTER_SERVICES} {$_MENU_AFTER_SERVICES}
<li {if $_system_menu eq 'reports'}class="open"{/if}> <li {if $_system_menu eq 'reports'}class="open"{/if}>
<a href="#" onClick="toggleDropdownMobile(this)"> <a href="#">
<i class="ion ion-clipboard"></i> <i class="ion ion-clipboard"></i>
<span class="text">{$_L['Reports']}</span> <span class="text">{$_L['Reports']}</span>
<i class="arrow ion-chevron-left"></i> <i class="arrow ion-chevron-left"></i>
@ -190,7 +190,7 @@
{/if} {/if}
{if $_admin['user_type'] eq 'Admin'} {if $_admin['user_type'] eq 'Admin'}
<li {if $_system_menu eq 'network'}class="open"{/if}> <li {if $_system_menu eq 'network'}class="open"{/if}>
<a href="#" onClick="toggleDropdownMobile(this)"> <a href="#">
<i class="ion ion-network"></i> <i class="ion ion-network"></i>
<span class="text">{$_L['Network']}</span> <span class="text">{$_L['Network']}</span>
<i class="arrow ion-chevron-left"></i> <i class="arrow ion-chevron-left"></i>
@ -203,7 +203,7 @@
</li> </li>
{$_MENU_AFTER_NETWORKS} {$_MENU_AFTER_NETWORKS}
<li {if $_system_menu eq 'pages'}class="open"{/if}> <li {if $_system_menu eq 'pages'}class="open"{/if}>
<a href="#" onClick="toggleDropdownMobile(this)"> <a href="#">
<i class="ion ion-document"></i> <i class="ion ion-document"></i>
<span class="text">{$_L['Static_Pages']}</span> <span class="text">{$_L['Static_Pages']}</span>
<i class="arrow ion-chevron-left"></i> <i class="arrow ion-chevron-left"></i>
@ -218,7 +218,7 @@
</li> </li>
{$_MENU_AFTER_PAGES} {$_MENU_AFTER_PAGES}
<li {if $_system_menu eq 'settings'}class="open"{/if}> <li {if $_system_menu eq 'settings'}class="open"{/if}>
<a href="#" onClick="toggleDropdownMobile(this)"> <a href="#">
<i class="ion ion-gear-a"></i> <i class="ion ion-gear-a"></i>
<span class="text">{$_L['Settings']}</span> <span class="text">{$_L['Settings']}</span>
<i class="arrow ion-chevron-left"></i> <i class="arrow ion-chevron-left"></i>
@ -254,18 +254,6 @@
<p>{date('Y')} &copy; <span>{$_c['CompanyName']}</span></p> <p>{date('Y')} &copy; <span>{$_c['CompanyName']}</span></p>
</footer> </footer>
</aside> </aside>
<script>
// i find bug that dropdown menu in mobile browser doesnt active, so i force to show all
var mobile = false;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
mobile = true;
}
function toggleDropdownMobile(node){
if(mobile){
$(node).parent('li').addClass('open');
}
}
</script>
<div class="content-container" id="content"> <div class="content-container" id="content">
<div class="page {if $_system_menu eq 'dashboard'}page-dashboard{/if}{if $_system_menu eq 'reports'}page-invoice{/if}"> <div class="page {if $_system_menu eq 'dashboard'}page-dashboard{/if}{if $_system_menu eq 'reports'}page-invoice{/if}">

16
ui/ui/sections/user-header.tpl
View File

@ -107,7 +107,7 @@
</li> </li>
{$_MENU_AFTER_DASHBOARD} {$_MENU_AFTER_DASHBOARD}
<li {if $_system_menu eq 'order'}class="open"{/if}> <li {if $_system_menu eq 'order'}class="open"{/if}>
<a href="#" onClick="toggleDropdownMobile(this)"> <a href="#" >
<i class="ion ion-ios-cart"></i> <i class="ion ion-ios-cart"></i>
<span class="text">{Lang::T('ORDER')}</span> <span class="text">{Lang::T('ORDER')}</span>
<i class="arrow ion-chevron-left"></i> <i class="arrow ion-chevron-left"></i>
@ -130,7 +130,7 @@
</li> </li>
{$_MENU_AFTER_HISTORY} {$_MENU_AFTER_HISTORY}
<li {if $_system_menu eq 'accounts'}class="open"{/if}> <li {if $_system_menu eq 'accounts'}class="open"{/if}>
<a href="#" onClick="toggleDropdownMobile(this)"> <a href="#" >
<i class="ion ion-gear-a"></i> <i class="ion ion-gear-a"></i>
<span class="text">{$_L['My_Account']}</span> <span class="text">{$_L['My_Account']}</span>
<i class="arrow ion-chevron-left"></i> <i class="arrow ion-chevron-left"></i>
@ -150,18 +150,6 @@
<p>{date('Y')} &copy; <span>{$_c['CompanyName']}</span></p> <p>{date('Y')} &copy; <span>{$_c['CompanyName']}</span></p>
</footer> </footer>
</aside> </aside>
<script>
// i find bug that dropdown menu in mobile browser doesnt active, so i force to show all
var mobile = false;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
mobile = true;
}
function toggleDropdownMobile(node){
if(mobile){
$(node).parent('li').addClass('open');
}
}
</script>
<div class="content-container" id="content"> <div class="content-container" id="content">
<div class="page {if $_system_menu eq 'dashboard'}page-dashboard{/if}"> <div class="page {if $_system_menu eq 'dashboard'}page-dashboard{/if}">

5746
ui/ui/styles/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long