Fix Mobile Nav not open when cliecked
This commit is contained in:
Ibnu Maksum
parent
6033901886
commit
e477bc90cc
@ -1,21 +1,21 @@
|
||||
jQuery(function(){
|
||||
jQuery(function () {
|
||||
"use strict";
|
||||
var MateriaApp=function(){
|
||||
this.isMobile=null,
|
||||
this.navHorizontal=!1,
|
||||
this.fixedHeader=!0,
|
||||
this.themeActive="theme-zero",
|
||||
this.navFull=!1,
|
||||
this.navOffCanvas=!1,
|
||||
this.mainContainer=$(".main-container"),
|
||||
this.siteHead=$(".site-head"),
|
||||
this.siteSettings=$(".site-settings"),
|
||||
this.app=$(".app"),
|
||||
this.navWrap=$(".nav-wrap"),
|
||||
this.contentContainer=$(".content-container"),
|
||||
this._init()
|
||||
var MateriaApp = function () {
|
||||
(this.isMobile = null),
|
||||
(this.navHorizontal = !1),
|
||||
(this.fixedHeader = !0),
|
||||
(this.themeActive = "theme-zero"),
|
||||
(this.navFull = !1),
|
||||
(this.navOffCanvas = !1),
|
||||
(this.mainContainer = $(".main-container")),
|
||||
(this.siteHead = $(".site-head")),
|
||||
(this.siteSettings = $(".site-settings")),
|
||||
(this.app = $(".app")),
|
||||
(this.navWrap = $(".nav-wrap")),
|
||||
(this.contentContainer = $(".content-container")),
|
||||
this._init();
|
||||
};
|
||||
MateriaApp.prototype._init=function(){
|
||||
(MateriaApp.prototype._init = function () {
|
||||
this._checkMobile(),
|
||||
this.toggleSiteNav(),
|
||||
this.initDefaultSettings(),
|
||||
@ -24,137 +24,215 @@ jQuery(function(){
|
||||
this.initPerfectScrollbars(),
|
||||
this.toggleFullScreen(),
|
||||
this.toggleFloatingSidebar(),
|
||||
this.initNavAccordion()
|
||||
},
|
||||
MateriaApp.prototype.initDefaultSettings=function(){
|
||||
function onNavHorizontal(){
|
||||
this.checked?(that.navHorizontal=!0,
|
||||
that.mainContainer.addClass("nav-horizontal")):(that.navHorizontal=!1,
|
||||
this.initNavAccordion();
|
||||
}),
|
||||
(MateriaApp.prototype.initDefaultSettings = function () {
|
||||
function onNavHorizontal() {
|
||||
this.checked
|
||||
? ((that.navHorizontal = !0),
|
||||
that.mainContainer.addClass("nav-horizontal"))
|
||||
: ((that.navHorizontal = !1),
|
||||
that.mainContainer.removeClass("nav-horizontal")),
|
||||
setTimeout(function(){
|
||||
sQuery.navHorizontal=that.navHorizontal,
|
||||
statesQuery.put(sQuery)})
|
||||
setTimeout(function () {
|
||||
(sQuery.navHorizontal = that.navHorizontal),
|
||||
statesQuery.put(sQuery);
|
||||
});
|
||||
}
|
||||
function onFixedHeader(){
|
||||
this.checked?(that.fixedHeader=!0,that.siteHead.addClass("fixedHeader"),
|
||||
that.contentContainer.addClass("fixedHeader")):(that.fixedHeader=!1,
|
||||
function onFixedHeader() {
|
||||
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)
|
||||
})
|
||||
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 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");
|
||||
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,
|
||||
(that.themeActive = $t.data("theme")),
|
||||
(sQuery.themeActive = that.themeActive),
|
||||
statesQuery.put(sQuery),
|
||||
that.app.addClass(that.themeActive),
|
||||
e.preventDefault()
|
||||
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),
|
||||
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.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.navHorizontal &&
|
||||
((this.siteSettings.find("#navHorizontal")[0].checked = !0),
|
||||
this.mainContainer.addClass("nav-horizontal")),
|
||||
this.fixedHeader&&(this.siteSettings.find("#fixedHeader")[0].checked=!0,
|
||||
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(){
|
||||
this.navOffCanvas && this.navWrap.addClass("nav-offcanvas");
|
||||
}),
|
||||
(MateriaApp.prototype.initRipple = function () {
|
||||
Waves.attach(".btn"),
|
||||
Waves.init({duration:900,delay:300}),
|
||||
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");
|
||||
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
|
||||
(stopClick = e.timeStamp);
|
||||
}
|
||||
e.preventDefault()
|
||||
e.preventDefault();
|
||||
}
|
||||
e.stopPropagation(),
|
||||
e.stopImmediatePropagation()
|
||||
e.stopPropagation(), e.stopImmediatePropagation();
|
||||
}),
|
||||
aul.on("touchend",function(e){
|
||||
that.isMobile&&that.navWrap.toggleClass("nav-offcanvas"),
|
||||
aul.on("touchend", function (e) {
|
||||
if (!that.navHorizontal) {
|
||||
var parent = aRest.parent("li");
|
||||
lists.not(parent).removeClass("open");
|
||||
}
|
||||
that.isMobile && that.navWrap.toggleClass("nav-offcanvas"),
|
||||
e.stopPropagation(),
|
||||
e.stopImmediatePropagation()
|
||||
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()})
|
||||
};
|
||||
window.MateriaApp=new MateriaApp
|
||||
aRest.on("touchend", function () {
|
||||
if (!that.navHorizontal) {
|
||||
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
2364
ui/ui/scripts/bootstrap.js
vendored
File diff suppressed because one or more lines are too long
@ -133,7 +133,7 @@
|
||||
{$_MENU_AFTER_DASHBOARD}
|
||||
{if $_admin['user_type'] eq 'Admin' || $_admin['user_type'] eq 'Sales'}
|
||||
<li {if $_system_menu eq 'customers'}class="open"{/if}>
|
||||
<a href="#" onClick="toggleDropdownMobile(this)">
|
||||
<a href="#">
|
||||
<i class="ion ion-android-contacts"></i>
|
||||
<span class="text">{$_L['Customers']}</span>
|
||||
<i class="arrow ion-chevron-left"></i>
|
||||
@ -146,7 +146,7 @@
|
||||
</li>
|
||||
{$_MENU_AFTER_CUSTOMERS}
|
||||
<li {if $_system_menu eq 'prepaid'}class="open"{/if}>
|
||||
<a href="#" onClick="toggleDropdownMobile(this)">
|
||||
<a href="#">
|
||||
<i class="ion ion-card"></i>
|
||||
<span class="text">{$_L['Prepaid']}</span>
|
||||
<i class="arrow ion-chevron-left"></i>
|
||||
@ -161,7 +161,7 @@
|
||||
</li>
|
||||
{$_MENU_AFTER_PREPAID}
|
||||
<li {if $_system_menu eq 'services'}class="open"{/if}>
|
||||
<a href="#" onClick="toggleDropdownMobile(this)">
|
||||
<a href="#">
|
||||
<i class="ion ion-cube"></i>
|
||||
<span class="text">{$_L['Services']}</span>
|
||||
<i class="arrow ion-chevron-left"></i>
|
||||
@ -175,7 +175,7 @@
|
||||
</li>
|
||||
{$_MENU_AFTER_SERVICES}
|
||||
<li {if $_system_menu eq 'reports'}class="open"{/if}>
|
||||
<a href="#" onClick="toggleDropdownMobile(this)">
|
||||
<a href="#">
|
||||
<i class="ion ion-clipboard"></i>
|
||||
<span class="text">{$_L['Reports']}</span>
|
||||
<i class="arrow ion-chevron-left"></i>
|
||||
@ -190,7 +190,7 @@
|
||||
{/if}
|
||||
{if $_admin['user_type'] eq 'Admin'}
|
||||
<li {if $_system_menu eq 'network'}class="open"{/if}>
|
||||
<a href="#" onClick="toggleDropdownMobile(this)">
|
||||
<a href="#">
|
||||
<i class="ion ion-network"></i>
|
||||
<span class="text">{$_L['Network']}</span>
|
||||
<i class="arrow ion-chevron-left"></i>
|
||||
@ -203,7 +203,7 @@
|
||||
</li>
|
||||
{$_MENU_AFTER_NETWORKS}
|
||||
<li {if $_system_menu eq 'pages'}class="open"{/if}>
|
||||
<a href="#" onClick="toggleDropdownMobile(this)">
|
||||
<a href="#">
|
||||
<i class="ion ion-document"></i>
|
||||
<span class="text">{$_L['Static_Pages']}</span>
|
||||
<i class="arrow ion-chevron-left"></i>
|
||||
@ -218,7 +218,7 @@
|
||||
</li>
|
||||
{$_MENU_AFTER_PAGES}
|
||||
<li {if $_system_menu eq 'settings'}class="open"{/if}>
|
||||
<a href="#" onClick="toggleDropdownMobile(this)">
|
||||
<a href="#">
|
||||
<i class="ion ion-gear-a"></i>
|
||||
<span class="text">{$_L['Settings']}</span>
|
||||
<i class="arrow ion-chevron-left"></i>
|
||||
@ -254,18 +254,6 @@
|
||||
<p>{date('Y')} © <span>{$_c['CompanyName']}</span></p>
|
||||
</footer>
|
||||
</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="page {if $_system_menu eq 'dashboard'}page-dashboard{/if}{if $_system_menu eq 'reports'}page-invoice{/if}">
|
||||
|
||||
|
||||
@ -107,7 +107,7 @@
|
||||
</li>
|
||||
{$_MENU_AFTER_DASHBOARD}
|
||||
<li {if $_system_menu eq 'order'}class="open"{/if}>
|
||||
<a href="#" onClick="toggleDropdownMobile(this)">
|
||||
<a href="#" >
|
||||
<i class="ion ion-ios-cart"></i>
|
||||
<span class="text">{Lang::T('ORDER')}</span>
|
||||
<i class="arrow ion-chevron-left"></i>
|
||||
@ -130,7 +130,7 @@
|
||||
</li>
|
||||
{$_MENU_AFTER_HISTORY}
|
||||
<li {if $_system_menu eq 'accounts'}class="open"{/if}>
|
||||
<a href="#" onClick="toggleDropdownMobile(this)">
|
||||
<a href="#" >
|
||||
<i class="ion ion-gear-a"></i>
|
||||
<span class="text">{$_L['My_Account']}</span>
|
||||
<i class="arrow ion-chevron-left"></i>
|
||||
@ -150,18 +150,6 @@
|
||||
<p>{date('Y')} © <span>{$_c['CompanyName']}</span></p>
|
||||
</footer>
|
||||
</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="page {if $_system_menu eq 'dashboard'}page-dashboard{/if}">
|
||||
|
||||
|
||||
5746
ui/ui/styles/bootstrap.min.css
vendored
5746
ui/ui/styles/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user