Nemcio/Grav-Admin-Plugin
1
0
Fork 0
mirror of https://github.com/getgrav/grav-plugin-admin.git synced 2026-02-01 04:10:00 +01:00
Code Issues Packages Projects Releases Activity

Mobile.js changed for accurate menu toggles

Browse Source
This commit is contained in:
unknown
2015-09-03 19:49:31 -04:00
parent e5e77bf472
commit 46ab221e41
5 changed files with 101 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
themes/grav/css-compiled/template.css
View File

@@ -1462,6 +1462,15 @@ tr {
#latest .last-modified {
padding-left: 10px; }
#overlay {
position: fixed;
width: 25%;
height: 100%;
z-index: 999999;
left: 75%;
top: 0;
display: none; }
.pages-list {
list-style: none;
margin: 0;

6
themes/grav/css-compiled/template.css.map
View File

File diff suppressed because one or more lines are too long

126
themes/grav/js/mobile.js
View File

@@ -4,56 +4,92 @@ $(document).ready(function(){
var tablet_container= 48.000;
var large_mobile_container= 30.000;
var mobile_only= large_desktop_container - 0.062;
var mobile_only= tablet_container - 0.062;
var no_mobile= tablet_container;
var small_mobile_range= large_mobile_container;
var menu_state = "closed";
var media_mobile = window.matchMedia('(max-width:' + mobile_only + 'em)');
var admin_sidebar = document.getElementById("admin-sidebar");
var overlay = document.createElement("div");
overlay.id = "overlay";
overlay.style.position = 'fixed';
overlay.style.width = '25%';
overlay.style.height = '100%';
overlay.style.zIndex = 999999;
overlay.style.left = '75%';
document.body.getElementsByClassName('remodal-bg')[0].appendChild(overlay);
document.getElementById('overlay').style.display = 'none';
var selected = admin_sidebar.getElementsByClassName("selected")[0].getElementsByTagName("a");
//add listener to titlebar to acivate sidebar
document.getElementById("titlebar").addEventListener("click",function(){
if($(window).width() / parseFloat($("body").css("font-size"))<mobile_only && menu_state=="closed") {
//open sidebar
console.log(menu_state);
$(admin_sidebar).toggle("slide");
document.getElementById('overlay').style.display = 'inherit';
selected[0].href="javascript:void(0)";
menu_state = "open";
console.log(menu_state);
}
});
var titlebar = document.getElementById("titlebar");
var sidebar = document.getElementById("admin-sidebar");
var overlay = document.getElementById("overlay");
//enable sidebar closing;
admin_sidebar.addEventListener("click", function(event){
if($(window).width() / parseFloat($("body").css("font-size"))<mobile_only && menu_state == "open") {
if(event.target == admin_sidebar || event.target == selected[0]){
console.log(menu_state);
$(admin_sidebar).toggle("slide");
document.getElementById('overlay').style.display = 'none';
menu_state = "closed";
console.log(menu_state);
}
var selected = sidebar.getElementsByClassName('selected')[0].getElementsByTagName('a');
var mobile = {
setup: function() {
//selected[0].href = 'javascript:void(0)';
//actions here please;
console.log("Mobile setup");
//event listener to titlebar
titlebar.addEventListener('click',mobile.titlebar_click);
//event listener to admin-sidebar
sidebar.addEventListener('click',mobile.sidebar_click);
//event listener to overlay
overlay.addEventListener('click',mobile.overlay_click);
},
teardown: function() {
//teardown actions here please
console.log("Mobile teardown");
//remove event listeners
titlebar.removeEventListener('click',mobile.titlebar_click);
sidebar.removeEventListener('click',mobile.sidebar_click);
overlay.removeEventListener('click',mobile.overlay_click);
},
titlebar_click: function(){
//onclick event stuff here;
console.log("Mobile onClick");
$(sidebar).toggle('slide');
overlay.style.display = "inherit";
},
sidebar_click: function(){
//onclick event stuff here;
console.log("Sidebar Clicked");
if(event.target == sidebar || event.target == selected[0]) {
$(sidebar).toggle('slide');
overlay.style.display = "none";
}
});
document.getElementById('overlay').addEventListener("click", function(event){
if($(window).width() / parseFloat($("body").css("font-size"))<mobile_only && menu_state == "open") {
console.log(menu_state);
$(admin_sidebar).toggle("slide");
document.getElementById('overlay').style.display = 'none';
menu_state = "closed";
console.log(menu_state);
},
overlay_click: function(){
//onclick event stuff here;
console.log("Overlay Clicked");
$(sidebar).toggle('slide');
overlay.style.display = "none";
}
};
var other = {
setup: function() {
//actions here please;
console.log("Other setup");
//make sure menu is visible
if(sidebar.style.display == 'none') {
sidebar.style.display = 'block';
}
});
},
teardown: function() {
//teardown actions here please
console.log("Other teardown");
},
onClick: function(){
//onclick event stuff here;
console.log("Other onClick");
}
};
media_mobile.addListener(function(data) {
if(data.matches) {
other.teardown();
mobile.setup();
} else {
mobile.teardown();
other.setup();
}
});
if (media_mobile.matches) {
mobile.setup();
} else {
other.setup();
}
});

9
themes/grav/scss/template/_admin.scss
View File

@@ -652,3 +652,12 @@ $update-height: 3rem;
}
#overlay {
position: fixed;
width: 25%;
height: 100%;
z-index: 999999;
left: 75%;
top: 0;
display: none;
}

1
themes/grav/templates/partials/base.html.twig
View File

@@ -102,6 +102,7 @@
</div>
</section>
<div id='overlay'></div>
</div>
{% endblock page %}
</body>