Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

New features to this module #1

Open
wants to merge 6 commits into from

5 participants

@fonsekaean

Hi, I did a new website using the mobile module and had to do some modifications which I think would worth sharing with you.

the problems we had was,

  1. we needed four different themes to our site (Desktop version, iPhone Version, iPad version, and Andriod version)
  2. Needed to show / hide pages for different users from different devices (some pages were only visible for desktop users, we didn't want to have any sub domains or sub sites)

I did some modifications to the module which facilitates these, as I think this will be a good addition to the module, just sending a pull request.

thanks for the good work :)

@wilr
Owner

I love the idea of different themes for different browsers (http://open.silverstripe.org/ticket/6008) however don't you think it would be better to abstract away from 3 specific devices (and hard coding) and make that dynamic. Perhaps a dataobject for the profile and have a checkbox for each of the devices in the mobile detection library?

@fonsekaean

yes, obviously it makes sense, and they can specify any device / theme they need. but logically most sites wont use more than 4 themes? (I can code that up if it you think it helps )

Also I think that access modifier for the devices will be important, cause that was something really helpful with my development.

@fonsekaean

one more thing, I'd like to add the feature to keep home page for different types of devices, basically mobile users and computer users

if we can integrate the functionality of this module https://github.com/fonsekaean/Device-Specific-Home-Pages-for-SilverStripe will be more useful.

@fonsekaean

any updates?

@wilr
Owner

Regarding your last commit you may want to make the fact that an iPad is treated like a mobile theme optional. We have clients who regard the iPad as a full website. The experience on the iPad can be more suited to larger desktop displays.

And like I said in my previous comment, for including this feature in the module I would prefer to have site profiles rather than hardcoded theme for A, theme for B.

Going forward that would be the most sound approach.

@fonsekaean

I will make it using data objects and commit.

Actually detecting iPad has some more advantages rather than just adding a theme.

  1. IPad too has the mobile safari browser
  2. With it's touch capabilities it might need different javascripts and to manage requirements users can call MobileBrowserDetector::is_iPad()

Also this helped me a lot to make responsive web development possible with Silverstripe

And ipad detection will give the facilitate to have a separate theme for ipad

@sminnee
Owner

It seems like it might be better to break things down so that you can have an arbitrary number of device-specific templates, and then a specification of which devices they apply to.

So, you might configure your themes like this:

  • iOS - theme1
  • tablet - theme2
  • default - theme3

Which would mean iPads and iPhones get theme1, android tablets get theme2, and everything else (including both computers and android phones) get theme3.

However, a more usual grouping might be:

  • smartphone - mobile_theme
  • iPad - tablet_theme
  • default - default_theme

Which means that Android phones and iPhones would get your mobile_theme, iPads (but not android tablets) would get your tablet theme, and everyone else (including android tablets) would get your default theme.

So, what device options would you be able to specify?

  • Platforms: iOS, Android, Windows, OSX, Linux
  • Form factors: mobile, tablet, computer
  • Specific devices: iPad, iPhone
  • Maybe even browsers (this goes beyond mobile): IE, Safari, Chrome, Firefox, Webkit, "Modern"

That last option would enable you to set up an IE lte 6 theme. ;-)

Combined with the theme cascading planned for SilverStripe 3 (where you can have a theme that just defines the differences from the default theme) this could be quite powerful.

@wilr
Owner

sminnee - that was what we were thinking with http://open.silverstripe.org/ticket/6008. If you have any other design ideas probably best to post there.

@fonsekaean

sminnee - I think thats a good option, and my last commit enables theme selection more abstract.

I added some new feature for this, which facilitate the users to show / hide pages from different devices. this will be good to have.

@fonsekaean

The template selection is taken to a more abstract level now

@tadeck

Hello, fonsekaean,

Your commits / pull request and posts contain a typo: andriod should be replaced with android (maintaining upper & lower cases appropriately) in every place this string occurs.

@fonsekaean

thanks for pointing it out :)

@tadeck

No problem. Just there is no need for complaints about the lack of android support ;)

@chillu
Owner

Hey Nivanka, I know this might come as a blast from the past - but if you are interested in still merging this pull request, can you please rebase? Otherwise I'll close it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 1, 2011
  1. @fonsekaean
  2. @fonsekaean
  3. @fonsekaean

    MINOR: added new fields to save themes for different devices

    fonsekaean authored
    MINOR: added an extension to the SiteTree to modify access for users viewing the site using different devices.
  4. @fonsekaean
Commits on Mar 2, 2011
  1. @fonsekaean

    MINOR: is_ipad method is more straightforward.

    fonsekaean authored
    MINOR: is_mobile checks for is_ipad
Commits on Mar 9, 2011
  1. @fonsekaean

    MINOR: made theme selection more abstract where users can add themes …

    fonsekaean authored
    …as they wish, hardcoded selection is removed.
This page is out of date. Refresh to see the latest.
View
3  _config.php
@@ -2,4 +2,5 @@
define('MOBILE_DIR', 'mobile');
Object::add_extension('SiteConfig', 'MobileSiteConfigExtension');
-Object::add_extension('ContentController', 'MobileSiteControllerExtension');
+Object::add_extension('ContentController', 'MobileSiteControllerExtension');
+Object::add_extension('SiteTree', 'MobileSiteAccessModifier');
View
11 code/MobileBrowserDetector.php
@@ -19,8 +19,12 @@ public static function is_android() {
return (stripos($_SERVER['HTTP_USER_AGENT'], 'android') !== false) ? true : false;
}
- public static function is_iphone() {
+ public static function is_iphone() {
return (preg_match('/(ipod|iphone)/i', $_SERVER['HTTP_USER_AGENT'])) ? true : false;
+ }
+
+ public static function is_ipad() {
+ return (stripos($_SERVER['HTTP_USER_AGENT'], 'ipad') !== false) ? true : false;
}
public static function is_opera_mini() {
@@ -45,7 +49,7 @@ public static function is_windows() {
*
* @return bool
*/
- public static function is_mobile() {
+ public static function is_mobile() {
$isMobile = false;
$agent = $_SERVER['HTTP_USER_AGENT'];
$accept = isset($_SERVER['HTTP_ACCEPT']) ? $_SERVER['HTTP_ACCEPT'] : '';
@@ -54,6 +58,9 @@ public static function is_mobile() {
case(self::is_iphone()):
$isMobile = true;
break;
+ case(self::is_ipad()):
+ $isMobile = true;
+ break;
case(self::is_android()):
$isMobile = true;
break;
View
46 code/MobileDeviceTheme.php
@@ -0,0 +1,46 @@
+<?php
+
+class MobileDeviceTheme extends DataObject {
+
+ static $db = array(
+ 'Device' => 'Varchar',
+ 'Theme' => 'Varchar'
+ );
+
+ static $has_one = array(
+ 'Configuration' => 'SiteConfig'
+ );
+
+
+ /**
+ *
+ * @return FieldSet
+ */
+ function getPopupFields(){
+
+ $siteConfig = SiteConfig::current_site_config();
+
+ return new FieldSet(
+ new DropdownField('Device', _t('MobileSiteConfig.MOBILETHEME', 'Mobile device'), array(
+ 'android' => 'android',
+ 'iphone' => 'iphone',
+ 'ipad' => 'ipad',
+ 'blackberry' => 'blackberry',
+ 'palm' => 'palm'
+ )),
+ new DropdownField('Theme', _t('MobileSiteConfig.MOBILETHEME', 'Mobile theme'), $siteConfig->getAvailableThemes())
+ );
+ }
+
+ /**
+ *
+ * @return void
+ */
+ function onBeforeWrite(){
+ parent::onBeforeWrite();
+ $siteConfig = SiteConfig::current_site_config();
+ $this->ConfigurationID = $siteConfig->ID;
+ }
+
+
+}
View
72 code/MobileSiteAccessModifier.php
@@ -0,0 +1,72 @@
+<?php
+
+class MobileSiteAccessModifier extends DataObjectDecorator{
+
+ /**
+ * modify the CanViewType field to hold additional viewer options
+ * @return Array
+ */
+ function extraStatics(){
+ return array(
+ "db" => array(
+ "CanViewType" => "Enum('Anyone, LoggedInUsers, OnlyTheseUsers, Inherit,iPhoneUsers,iPadUsers,MobileUsers,AndriodUsers,DesktopUsers', 'Inherit')"
+ )
+ );
+ }
+
+
+
+ function updateCMSFields($fields){
+ $fields->removeFieldFromTab("Root.Access", "CanViewType");
+ $viewersOptionsField = new OptionsetField(
+ "CanViewType",
+ ""
+ );
+ $viewersOptionsSource = array();
+ $viewersOptionsSource["Inherit"] = _t('SiteTree.INHERIT', "Inherit from parent page");
+ $viewersOptionsSource["Anyone"] = _t('SiteTree.ACCESSANYONE', "Anyone");
+ $viewersOptionsSource["LoggedInUsers"] = _t('SiteTree.ACCESSLOGGEDIN', "Logged-in users");
+
+ $viewersOptionsSource["DesktopUsers"] = _t('SiteTree.ACCESSONLYCOMPUTERS', "Users viewing the site using computers");
+ $viewersOptionsSource["MobileUsers"] = _t('SiteTree.ACCESSONLYMOBILES', "Users viewing the site using mobile devices");
+ $viewersOptionsSource["iPhoneUsers"] = _t('SiteTree.ACCESSONLYIPHONES', "Users viewing the site using iPhones");
+ $viewersOptionsSource["iPadUsers"] = _t('SiteTree.ACCESSONLYIPADS', "Users viewing the site using iPads");
+ $viewersOptionsSource["AndriodUsers"] = _t('SiteTree.ACCESSONLYANDRIOD', "Users viewing the site using Android devices");
+
+
+ $viewersOptionsSource["OnlyTheseUsers"] = _t('SiteTree.ACCESSONLYTHESE', "Only these people (choose from list)");
+
+
+
+ $viewersOptionsField->setSource($viewersOptionsSource);
+ $fields->addFieldToTab("Root.Access", $viewersOptionsField, "WhoCanEditHeader");
+ }
+
+
+ /**
+ * check whether the user can view the page with respect to the
+ * device he is using to browse
+ * @return boolean
+ */
+ function canView($member = null){
+ $canView = null;
+ $siteTree = $this->owner;
+ if(0 == strcmp($siteTree->CanViewType, 'DesktopUsers') && !MobileBrowserDetector::is_mobile()){
+ $canView = true;
+ }
+ if(0 == strcmp($siteTree->CanViewType, 'iPhoneUsers') && MobileBrowserDetector::is_iphone()){
+ $canView = true;
+ }
+ if(0 == strcmp($siteTree->CanViewType, 'iPadUsers') && MobileBrowserDetector::is_ipad()){
+ $canView = true;
+ }
+ if(0 == strcmp($siteTree->CanViewType, 'AndriodUsers') && MobileBrowserDetector::is_andriod()){
+ $canView = true;
+ }
+ if(0 == strcmp($siteTree->CanViewType, 'MobileUsers') && MobileBrowserDetector::is_mobile()){
+ $canView = true;
+ }
+ return $canView;
+ }
+
+}
View
12 code/MobileSiteConfigExtension.php
@@ -44,6 +44,9 @@ public function extraStatics() {
'FullSiteDomain' => 'http://' . $_SERVER['HTTP_HOST'],
'MobileTheme' => 'blackcandymobile',
'MobileSiteType' => 'Disabled'
+ ),
+ 'has_many' => array(
+ 'Themes' => 'MobileDeviceTheme'
)
);
}
@@ -155,7 +158,14 @@ public function updateCMSFields(FieldSet $fields) {
new LiteralField('MobileDomainHelpText', '<label class="helpText">' . _t('MobileSiteConfig.MOBILEDOMAINHELP', '(e.g. "mobile.mysite.com"). Please make sure you point the given domain to this site') . '</label>'),
new TextField('FullSiteDomain', _t('MobileSiteConfig.FULLSITEDOMAIN', 'Full site domain')),
new LiteralField('FullSiteDomainHelpText', '<label class="helpText">' . _t('MobileSiteConfig.FULLSITEDOMAINHELP', '(e.g. "mysite.com"). This usually doesn\'t need to be changed') . '</label>'),
- new DropdownField('MobileTheme', _t('MobileSiteConfig.MOBILETHEME', 'Mobile theme'), $this->owner->getAvailableThemes(), '', null, _t('SiteConfig.DEFAULTTHEME', '(Use default theme)'))
+ new DropdownField('MobileTheme', _t('MobileSiteConfig.MOBILETHEME', 'Mobile theme'), $this->owner->getAvailableThemes(), '', null, _t('SiteConfig.DEFAULTTHEME', '(Use default theme)')),
+
+ new LiteralField('MultipleThemes', '<label class="helpText">' . _t('MobileSiteConfig.MULTIPLETHEMES', 'If you want to add themes specifically for different mobile devices, please use the table below. Just leave it if you are using only one mobile theme for every device.') . '</label>'),
+
+ new ComplexTableField($this, 'Themes', 'MobileDeviceTheme', array(
+ 'Device' => 'Device',
+ 'Theme' => 'Theme'
+ ), 'getPopupFields')
)
);
}
View
37 code/MobileSiteControllerExtension.php
@@ -33,21 +33,48 @@ public function onAfterInit() {
} elseif(!empty($_COOKIE['fullSite'])) {
return; // nothing more to be done
}
-
+
// If the user requested the mobile domain, set the right theme
- if($this->onMobileDomain()) {
- SSViewer::set_theme($config->MobileTheme);
+ if($this->onMobileDomain()) {
+ SSViewer::set_theme($this->getSuitableTheme());
}
// User just wants to see a theme, but no redirect occurs
- if(MobileBrowserDetector::is_mobile() && $config->MobileSiteType == 'MobileThemeOnly') {
- SSViewer::set_theme($config->MobileTheme);
+ if(MobileBrowserDetector::is_mobile() && $config->MobileSiteType == 'MobileThemeOnly') {
+ SSViewer::set_theme($this->getSuitableTheme());
}
// If on a mobile device, but not on the mobile domain and has been setup for redirection
if(!$this->onMobileDomain() && MobileBrowserDetector::is_mobile() && $config->MobileSiteType == 'RedirectToDomain') {
return $this->owner->redirect($config->MobileDomain);
}
+ }
+
+ /**
+ * Return the correct theme according to the device
+ * $return string
+ */
+ function getSuitableTheme(){
+ $config = SiteConfig::current_site_config();
+ $device = '';
+ if(MobileBrowserDetector::is_iphone()){
+ $device = 'iphone';
+ }elseif(MobileBrowserDetector::is_ipad()){
+ $device = 'ipad';
+ }elseif(MobileBrowserDetector::is_android()){
+ $device = 'android';
+ }elseif(MobileBrowserDetector::is_blackberry()){
+ $device = 'blackberry';
+ }
+ elseif(MobileBrowserDetector::is_palm()){
+ $device = 'palm';
+ }
+
+ if(0 != strcmp($device, '') && $theme = DataObject::get_one('MobileDeviceTheme', "Device = '{$device}' AND ConfigurationID = {$config->ID}")){
+ return $theme->Theme;
+ }else{
+ return $config->MobileTheme;
+ }
}
/**
Something went wrong with that request. Please try again.