diff --git a/public/css/style.less b/public/css/style.less
index 5b5216cba7..5903c56a7d 100644
--- a/public/css/style.less
+++ b/public/css/style.less
@@ -41,6 +41,10 @@ body {
}
}
+button, a {
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
.none {
display: none !important;
}
@@ -583,15 +587,15 @@ body .navbar .nodebb-inline-block {
}
#mobile-menu {
- #mobile-menu-btn {
+ button {
color: #eee;
padding: 10px;
text-shadow: none;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
}
}
#mobile-menu-overlay {
- display: none;
background: rgba(0, 0, 0, 0.85);
position: fixed;
@@ -608,9 +612,9 @@ body .navbar .nodebb-inline-block {
-ms-transition: opacity 150ms ease;
-o-transition: opacity 150ms ease;
transition: opacity 150ms ease;
-
+ z-index: -1;
&.menu-visible {
- display: block;
+ z-index: 99;
opacity: 1;
}
@@ -643,4 +647,16 @@ body .navbar .nodebb-inline-block {
}
}
+}
+
+
+
+
+#mobile-sidebar {
+ height: 100%;
+ position: absolute;
+ left: 100%;
+ top: 0px;
+ overflow: hidden;
+ margin-top: 60px;
}
\ No newline at end of file
diff --git a/public/src/ajaxify.js b/public/src/ajaxify.js
index 1aa52e16de..d5daa8d907 100644
--- a/public/src/ajaxify.js
+++ b/public/src/ajaxify.js
@@ -48,6 +48,7 @@ var ajaxify = {};
jQuery('#footer, #content').fadeOut(100);
+ templates.flush();
templates.load_template(function() {
exec_body_scripts(content);
diff --git a/public/src/app.js b/public/src/app.js
index eb35b16652..6002156e4c 100644
--- a/public/src/app.js
+++ b/public/src/app.js
@@ -191,9 +191,17 @@ var socket,
socket.emit('api:user.get_online_users', uids);
}
+ // here is where all modules' onNavigate should be called, I think.
+ require(['mobileMenu'], function(mobileMenu) {
+ mobileMenu.onNavigate();
+ });
+
populate_online_users();
+ setTimeout(function() {
+ window.scrollTo(0, 1); // rehide address bar on mobile after page load completes.
+ }, 100);
}
socket.on('api:user.get_online_users', function(users) {
@@ -232,5 +240,64 @@ var socket,
}
}
}, false);
+
+
+ addTouchEvents();
});
+
+
+
+
+ function addTouchEvents() {
+ return; // later.
+
+
+ // click simulation just for testing/sanity purposes.
+
+ var el = jQuery("#content"),
+ sidebar = jQuery('#mobile-sidebar'),
+ width = el.width();
+
+ function onTouchMove(ev) {
+ var coordinates = window.event ? window.event.touches[0] : ev.touches[0];
+
+ el.css({
+ marginLeft: -parseInt(width - coordinates.pageX) + 'px',
+ paddingRight: parseInt(width - coordinates.pageX) + 'px'});
+
+ sidebar.css({
+ marginLeft: -parseInt(width - coordinates.pageX) + 'px',
+ width: parseInt(width - coordinates.pageX) + 'px'
+ });
+ }
+
+ function onMouseMove(ev) {
+ ev.touches = [{pageX: ev.pageX, pageY: ev.pageY}];
+ onTouchMove(ev);
+ }
+
+ function onTouchEnd() {
+ el.css({
+ marginLeft: '0px',
+ paddingRight: '0px'
+ });
+
+ sidebar.css({
+ marginLeft: '0px',
+ width: '0px'
+ });
+ }
+
+ el.on('touchmove', onTouchMove);
+ el.on('mousedown', function() {
+ el.on('mousemove', onMouseMove);
+ });
+
+ el.on('touchend', onTouchEnd);
+ el.on('mouseup', function() {
+ el.off('mousemove');
+ onTouchEnd();
+ });
+
+ }
}());
diff --git a/public/src/modules/mobileMenu.js b/public/src/modules/mobileMenu.js
index 7f5183348f..c21bc5bed9 100644
--- a/public/src/modules/mobileMenu.js
+++ b/public/src/modules/mobileMenu.js
@@ -4,7 +4,8 @@ define(function() {
var categories = null,
overlay = null,
- menuBtn = null;
+ menuBtn = null,
+ postBtn = null;
function loadCategories(callback) {
@@ -63,9 +64,37 @@ define(function() {
}
+ mobileMenu.onNavigate = function() {
+ var cid = templates.get('category_id'),
+ tid = templates.get('topic_id');
+
+ if (cid) {
+ postBtn.style.display = 'inline-block';
+ postBtn.onclick = function() {
+ require(['composer'], function(cmp) {
+ cmp.push(0, cid);
+ });
+ };
+ postBtn.children[0].className = 'icon-plus icon-2x';
+ } else if (tid) {
+ postBtn.style.display = 'inline-block';
+ postBtn.onclick = function() {
+ require(['composer'], function(cmp) {
+ cmp.push(tid);
+ });
+ };
+ postBtn.children[0].className = 'icon-reply icon-2x'
+ } else {
+ postBtn.style.display = 'none';
+ }
+
+ };
+
+
mobileMenu.init = function() {
overlay = overlay || document.getElementById('mobile-menu-overlay');
menuBtn = menuBtn || document.getElementById('mobile-menu-btn');
+ postBtn = postBtn || document.getElementById('mobile-post-btn');
menuBtn.onclick = function() {
animateIcons();
@@ -73,9 +102,11 @@ define(function() {
loadCategories(displayCategories);
+ mobileMenu.onNavigate();
}
return {
- init: mobileMenu.init
+ init: mobileMenu.init,
+ onNavigate: mobileMenu.onNavigate
}
});
\ No newline at end of file
diff --git a/public/src/templates.js b/public/src/templates.js
index b3ea78105c..4a39277c2b 100644
--- a/public/src/templates.js
+++ b/public/src/templates.js
@@ -169,7 +169,7 @@
if (!templates[tpl_url] || !template_data) return;
document.getElementById('content').innerHTML = templates[tpl_url].parse(JSON.parse(template_data));
-
+
jQuery('#content [template-variable]').each(function(index, element) {
templates.set(element.getAttribute('template-variable'), element.value);
});
@@ -181,6 +181,10 @@
}
+ templates.flush = function() {
+ parsed_variables = {};
+ }
+
templates.get = function(key) {
return parsed_variables[key];
}
diff --git a/public/templates/category.tpl b/public/templates/category.tpl
index 39ccda6c94..e730e33e34 100644
--- a/public/templates/category.tpl
+++ b/public/templates/category.tpl
@@ -45,7 +45,7 @@
- 
posted by