Enable mobile view. Use local storage to remember whether you chose mobile or desktop view. Mobile device detection needs to be replaced with a better solution.

This commit is contained in:
Neil Lalonde 2013-09-10 16:43:51 -04:00
parent 2319924206
commit cc2acafc9a
6 changed files with 63 additions and 19 deletions

View File

@ -143,8 +143,7 @@ Discourse = Ember.Application.createWithMixins(Discourse.Ajax, {
bootbox.animate(false); bootbox.animate(false);
bootbox.backdrop(true); // clicking outside a bootbox modal closes it bootbox.backdrop(true); // clicking outside a bootbox modal closes it
Discourse.Session.currentProp('mobileDevice', $html.hasClass('mobile-device')); Discourse.Mobile.init();
Discourse.Session.currentProp('mobileView', $html.hasClass('mobile-view'));
setInterval(function(){ setInterval(function(){
Discourse.Formatter.updateRelativeAge($('.relative-date')); Discourse.Formatter.updateRelativeAge($('.relative-date'));

View File

@ -0,0 +1,36 @@
/**
A class that is responsible for logic related to mobile devices.
@class Mobile
@namespace Discourse
@module Discourse
**/
Discourse.Mobile = {
isMobileDevice: false,
mobileView: false,
init: function() {
var $html = $('html');
this.isMobileDevice = $html.hasClass('mobile-device');
this.mobileView = $html.hasClass('mobile-view');
if (localStorage && localStorage.mobileView) {
var savedValue = (localStorage.mobileView === 'true' ? true : false);
if (savedValue !== this.mobileView) {
this.reloadPage(savedValue);
}
}
},
toggleMobileView: function() {
if (localStorage) {
localStorage.mobileView = !this.mobileView;
}
this.reloadPage(!this.mobileView);
},
reloadPage: function(mobile) {
window.location.assign(window.location.pathname + '?mobile_view=' + (mobile ? '1' : '0'));
}
};

View File

@ -25,15 +25,15 @@ Discourse.HeaderController = Discourse.Controller.extend({
}.property('currentUser', 'topic.isPrivateMessage'), }.property('currentUser', 'topic.isPrivateMessage'),
mobileDevice: function() { mobileDevice: function() {
return Discourse.Session.currentProp('mobileDevice'); return Discourse.Mobile.isMobileDevice;
}.property(), }.property(),
mobileView: function() { mobileView: function() {
return Discourse.Session.currentProp('mobileView'); return Discourse.Mobile.mobileView;
}.property(), }.property(),
toggleMobileView: function() { toggleMobileView: function() {
window.location.assign(window.location.pathname + '?mobile_view=' + (Discourse.Session.currentProp('mobileView') ? '0' : '1')); Discourse.Mobile.toggleMobileView();
} }
}); });

View File

@ -98,7 +98,7 @@ Discourse.HeaderView = Discourse.View.extend({
**/ **/
logoHTML: function() { logoHTML: function() {
var result = "<div class='title'><a href='" + Discourse.getURL("/") + "'>"; var result = "<div class='title'><a href='" + Discourse.getURL("/") + "'>";
if (!Discourse.Session.currentProp('mobileView') && this.get('controller.showExtraInfo')) { if (!Discourse.Mobile.mobileView && this.get('controller.showExtraInfo')) {
var logoSmall = Discourse.SiteSettings.logo_small_url; var logoSmall = Discourse.SiteSettings.logo_small_url;
if (logoSmall && logoSmall.length > 1) { if (logoSmall && logoSmall.length > 1) {
result += "<img class='logo-small' src='" + logoSmall + "' width='33' height='33'>"; result += "<img class='logo-small' src='" + logoSmall + "' width='33' height='33'>";

View File

@ -117,8 +117,7 @@ module ApplicationHelper
end end
def mobile_device? def mobile_device?
# For now, don't show mobile view unless you put ?mobile_view=1 in the URL. # TODO: this is dumb. user agent matching is a doomed approach. a better solution is coming.
# request.user_agent =~ /Mobile|webOS/ request.user_agent =~ /Mobile|webOS/ and !(request.user_agent =~ /iPad/)
false
end end
end end

View File

@ -13,18 +13,28 @@ describe ApplicationHelper do
helper.mobile_view?.should be_false helper.mobile_view?.should be_false
end end
it "is false if mobile_view is not set and user agent is not mobile" do context "mobile_view is not set" do
controller.request.stubs(:user_agent).returns('Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.17 Safari/537.36') it "is false if user agent is not mobile" do
helper.mobile_view?.should be_false controller.request.stubs(:user_agent).returns('Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.17 Safari/537.36')
end helper.mobile_view?.should be_false
end
#it "is true if mobile_view is not set and user agent is mobile" do it "is true for iPhone" do
it "is always false, even if user agent is for mobile device... for now..." do controller.request.stubs(:user_agent).returns('Mozilla/5.0 (iPhone; U; ru; CPU iPhone OS 4_2_1 like Mac OS X; ru) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148a Safari/6533.18.5')
controller.request.stubs(:user_agent).returns('Mozilla/5.0 (iPhone; U; ru; CPU iPhone OS 4_2_1 like Mac OS X; ru) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148a Safari/6533.18.5') helper.mobile_view?.should be_true
#helper.mobile_view?.should be_true end
# TODO: It's always false for now
helper.mobile_view?.should be_false it "is false for iPad" do
controller.request.stubs(:user_agent).returns("Mozilla/5.0 (iPad; CPU OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3")
helper.mobile_view?.should be_false
end
it "is false for Android tablet" do
controller.request.stubs(:user_agent).returns("Mozilla/5.0 (Linux; Android 4.1.2; Nexus 7 Build/JZ054K) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Safari/535.19")
helper.mobile_view?.should be_false
end
end end
end end
end end