Add option to disable device detection

Also add a few theme changes that allow some more
features on small devices.
- Printing links
- Settings link in top right corner
- Create/copy page/collection link
- Edit/delete buttons
- Remove group members button
- Help icons
- Administration link

Also made the admin link show in full

The items that are disabled when device detection is on
and user is on a mobile device are:
- TinyMCE editor
- Adding new blocks to pages, this is now a non-js version
- Dropdown menu's
- Export functionality

Bug #1052060

Change-Id: I5a8fe3cf136bb0c3e76e50a2b3bc48179c675b6a
Signed-off-by: Hugh Davenport <hugh@catalyst.net.nz>

htdocs/admin/site/options.php

@@ -197,6 +197,13 @@ $siteoptionform = array(
                     'defaultvalue' => get_config('staffstats'),
                     'disabled'     => in_array('staffstats', $OVERRIDDEN),
                 ),
+                'userscandisabledevicedetection' => array(
+                    'type'         => 'checkbox',
+                    'title'        => get_string('userscandisabledevicedetection', 'admin'),
+                    'description'  => get_string('userscandisabledevicedetectiondescription', 'admin'),
+                    'defaultvalue' => get_config('userscandisabledevicedetection'),
+                    'disabled'     => in_array('userscandisabledevicedetection', $OVERRIDDEN),
+                ),
             ),
         ),
         'searchsettings' => array(
@@ -622,7 +629,7 @@ function siteoptions_submit(Pieform $form, $values) {
         'proxyaddress', 'proxyauthmodel', 'proxyauthcredentials', 'smtphosts', 'smtpport', 'smtpuser', 'smtppass', 'smtpsecure',
         'noreplyaddress', 'defaultnotificationmethod', 'homepageinfo', 'showonlineuserssideblock', 'onlineuserssideblockmaxusers',
         'registerterms', 'allowmobileuploads', 'creategroups', 'createpublicgroups', 'allowgroupcategories', 'wysiwyg',
-        'staffreports', 'staffstats',
+        'staffreports', 'staffstats', 'userscandisabledevicedetection',
     );
 
     // if public views are disabled, sitemap generation must also be disabled.

htdocs/init.php

@@ -350,12 +350,18 @@ if (defined('JSON') && !defined('NOSESSKEY')) {
 }
 
 // Device detection
-require_once(get_config('libroot') . 'mobile_detect/Mobile_Detect.php');
-
-$detect = new Mobile_Detect();
-$SESSION->set('handheld_device', ($detect->isMobile() || $detect->isTablet()));
-$SESSION->set('mobile', $detect->isMobile());
-$SESSION->set('tablet', $detect->isTablet());
+if (get_account_preference($USER->get('id'), 'devicedetection')) {
+    require_once(get_config('libroot') . 'mobile_detect/Mobile_Detect.php');
+    $detect = new Mobile_Detect();
+    $SESSION->set('handheld_device', $detect->isMobile());
+    $SESSION->set('mobile', $detect->isTablet() ? false : $detect->isMobile());
+    $SESSION->set('tablet', $detect->isTablet());
+}
+else {
+    $SESSION->set('handheld_device', false);
+    $SESSION->set('mobile', false);
+    $SESSION->set('tablet', false);
+}
 
 /*
  * Initializes our performance info early.

htdocs/js/mahara.js

@@ -416,6 +416,16 @@ function contextualHelp(formName, helpName, pluginType, pluginName, page, sectio
         // Left of the screen - there's enough room for it
         position.x += 15;
     }
+    else if (position.x - dimensions.w < 0) {
+        if (dimensions.w >= screenDimensions.w) {
+            // Very small screen, let them scroll
+            position.x = 0;
+        }
+        else {
+            // Otherwise center it
+            position.x = (screenDimensions.w / 2) - (dimensions.w / 2);
+        }
+    }
     else {
         position.x -= dimensions.w;
     }

htdocs/js/views.js

@@ -25,6 +25,7 @@ function ViewManager() {
     var self = this;
 
     this.init = function () {
+        self.topPane = $('top-pane');
         self.bottomPane = $('bottom-pane');
         self.viewThemeSelect = $('viewtheme-select');
 
@@ -33,7 +34,7 @@ function ViewManager() {
             // base for positioned elements inside it
             self.columnContainer = $('column-container');
             makePositioned(self.columnContainer);
-            if (self.isIE7) {
+            if (self.isIE7 && self.topPane) {
                 // Stop blocktypes being dragged from disappearing underneath the content area
                 setStyle('top-pane', {'z-index': 1});
             }
@@ -90,7 +91,7 @@ function ViewManager() {
             self.rewriteViewThemeSelector();
 
             // Make the top pane a dropzone for cancelling adding block types
-            if (!self.isIE6) {
+            if (!self.isIE6 && self.topPane) {
                 var count = 0;
                 new Droppable('top-pane', {
                     'onhover': function() {
@@ -104,7 +105,7 @@ function ViewManager() {
             }
         }
         // Unhide the radio button if the browser is iPhone, IPad or IPod
-        else if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
+        else if (config['handheld_device'] || (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) && self.topPane) {
             forEach(getElementsByTagAndClassName('input', 'blocktype-radio', 'top-pane'), function(i) {
                     setNodeAttribute(i, 'style', 'display:inline');
                 });
@@ -365,7 +366,7 @@ function ViewManager() {
 
 
     this.showMediaPlayers = function () {
-        if (tinyMCE && tinyMCE.activeEditor && tinyMCE.activeEditor.editorId) {
+        if (!config['handheld_device'] && tinyMCE && tinyMCE.activeEditor && tinyMCE.activeEditor.editorId) {
             tinyMCE.execCommand('mceRemoveControl', false, tinyMCE.activeEditor.editorId);
         }
         var cols = $('column-container');
@@ -1211,8 +1212,8 @@ function ViewManager() {
     // Whether the browser is IE6
     this.isIE6 = !this.isIE7 && document.all && !window.opera;
 
-    // Whether the brower is iPhone, IPad or IPod
-    if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
+    // Whether the brower is iPhone, IPad or IPod, and mobile devices
+    if (config['handheld_device'] || (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
         this.isIE6 = true; // work-around for broken drag-and-drop
     }
 

htdocs/lang/en.utf8/account.php

@@ -97,3 +97,6 @@ $string['accountdeleted']  = 'Your account has been deleted.';
 
 $string['resizeonuploaduserdefault1'] = 'Resize large images on upload';
 $string['resizeonuploaduserdefaultdescription1'] = 'If checked, the option "Automatic resizing of images" will be enabled by default, and images larger than the maximum dimensions will be resized when they are uploaded. You can disable this default setting for each image upload individually.';
+
+$string['devicedetection'] = 'Device detection';
+$string['devicedetectiondescription'] = 'Enable mobile device detection when browsing this site.';

htdocs/lang/en.utf8/admin.php

@@ -992,3 +992,6 @@ $string['groupmanage'] = 'Manage';
 $string['groupdelete'] = 'Delete';
 $string['managegroupquotadescription'] = 'Use the form below to change the group file quota for this group.';
 $string['managegroupdescription'] = 'Use the form below to promote and demote administrators for this group. If you remove a group administrator they will remain a group member.';
+
+$string['userscandisabledevicedetection'] = 'Users can disable device detection';
+$string['userscandisabledevicedetectiondescription'] = 'If checked, users will be allowed to disable mobile device detection when they are browsing this site.';

htdocs/lib/mahara.php

@@ -3033,7 +3033,7 @@ function mahara_log($logname, $string) {
 function is_html_editor_enabled () {
     global $USER, $SESSION;
     return ((!get_config('wysiwyg') && ($USER->get_account_preference('wysiwyg') || defined('PUBLIC'))) ||
-        get_config('wysiwyg') == 'enable') && $SESSION->get('mobile') == false;
+        get_config('wysiwyg') == 'enable') && $SESSION->get('handheld_device') == false;
 }
 
 /**

htdocs/lib/user.php

@@ -214,6 +214,7 @@ function expected_account_preferences() {
                  'mobileuploadtoken' => '',
                  'theme' => '',
                  'resizeonuploaduserdefault' => 1,
+                 'devicedetection' => 1,
                  );
 }
 
@@ -376,6 +377,15 @@ function general_account_prefs_form_elements($prefs) {
         );
     }
 
+    if (get_config('userscandisabledevicedetection')) {
+        $elements['devicedetection'] = array(
+            'type'         => 'checkbox',
+            'title'        => get_string('devicedetection', 'account'),
+            'description'  => get_string('devicedetectiondescription', 'account'),
+            'defaultvalue' => $prefs->devicedetection,
+        );
+    }
+
     return $elements;
 }
 

htdocs/lib/web.php

@@ -116,7 +116,7 @@ function smarty($javascript = array(), $headers = array(), $pagestrings = array(
     // Note: we do not display tinyMCE for mobile devices
     // as it doesn't work on some of them and can
     // disable the editing of a textarea field
-    if ($SESSION->get('mobile') == false) {
+    if ($SESSION->get('handheld_device') == false) {
         $checkarray = array(&$javascript, &$headers);
         $found_tinymce = false;
         foreach ($checkarray as &$check) {
@@ -241,6 +241,14 @@ EOF;
             }
         }
     }
+    else {
+        if (($key = array_search('tinymce', $javascript)) !== false || ($key = array_search('tinytinymce', $javascript)) !== false) {
+            unset($javascript[$key]);
+        }
+        if (($key = array_search('tinymce', $headers)) !== false || ($key = array_search('tinytinymce', $headers)) !== false) {
+            unset($headers[$key]);
+        }
+    }
 
     // Make jQuery accessible with $j (Mochikit has $)
     $javascript_array[] = $jsroot . 'jquery/jquery.js';
@@ -2350,7 +2358,7 @@ function mahara_standard_nav() {
 function main_nav() {
     if (in_admin_section()) {
         global $USER, $SESSION;
-        if ($USER->get('admin') && !$SESSION->get('mobile')) {
+        if ($USER->get('admin')) {
             $menu = admin_nav();
         }
         else if ($USER->is_institutional_admin()) {

htdocs/theme/default/static/style/style.css

@@ -970,12 +970,6 @@ table.mceLayout td.mceToolbar td {
         border-top: 2px solid #d1d1d1;
     }
 }
-/* for 800px or less */
-@media screen and (max-width: 800px) {
-	a.print {
-		display: none;
-	}
-}
 /* for 700px or less */
 @media screen and (max-width: 700px) {
     table#useraccountsettingsleft td {
@@ -1049,9 +1043,6 @@ table.mceLayout td.mceToolbar td {
         display: block;
         font-size: 1em;
     }
-    #right-nav li.settings {
-        display: none;
-    }
     #usf {
         float: none;
         clear: both;
@@ -1076,10 +1067,7 @@ table.mceLayout td.mceToolbar td {
         float: none;
     }
     .pagetabs {
-        display: none;
-    }
-    #createview,  .rbuttons .editview {
-        display: none;
+        float: right;
     }
     .textarea .resizable-textarea,  select#profileform_country,  textarea,  #search_advanced_container select#search_type,  #search_advanced_container select#search_sort,  #resumewrap input.text, input#newblog_tags {
         width: 94% !important;
@@ -1100,9 +1088,6 @@ table.mceLayout td.mceToolbar td {
     #searchviews select {
         width: 26%;
     }
-    #myviews td.btns2,  #forumtopicstable th.right,  #forumtopicstable td.right {
-        display: none;
-    }
     #friendslistcontainer #search #search_query {
         width: 34%;
     }
@@ -1233,9 +1218,6 @@ table.mceLayout td.mceToolbar td {
         width: auto;
         padding: 0 5px 3px 5px;
     }
-    #membersearchresults .removemember {
-        display: none;
-    }
     tr.uploadform th,  tr.uploadform td {
         display: block;
         float: left;
@@ -1620,9 +1602,6 @@ table.mceLayout td.mceToolbar td {
 }
 /* for 480px or less */
 @media screen and (max-width: 480px) {
-    #main-nav li.siteadmin {
-        display: none;
-    }
     .viewlist td {
         float: left;
         width: 98%;
@@ -1651,9 +1630,6 @@ table.mceLayout td.mceToolbar td {
     .profileiconcell img {
         width: 100%;
     }
-    .page-help-icon, .help {
-        display: none;
-    }
     .forumpost td {
         width: 98%;
         padding: 0;

htdocs/theme/default/static/style/views.css

@@ -311,9 +311,6 @@ ul.colnav li a {
         float: none;
         text-align: center;
     }
-    #blocksinstruction {
-        display: none;
-    }
     #feedbacktable .commentleft {
         float: none;
         width: 98%;

htdocs/theme/default/templates/header/head.tpl

@@ -8,7 +8,9 @@
         'sesskey' : '{$SESSKEY}',
         'wwwroot': '{$WWWROOT}',
         'loggedin': {$USER->is_logged_in()|intval},
-        'userid': {$USER->get('id')}
+        'userid': {$USER->get('id')},
+        'mobile': {if $MOBILE}1{else}0{/if},
+        'handheld_device': {if $HANDHELD_DEVICE}1{else}0{/if}
     {literal}}{/literal};
     </script>
     {$STRINGJS|safe}

htdocs/theme/default/templates/header/navigation.tpl

@@ -22,9 +22,9 @@
 {/foreach}
 {if $ADMIN || $INSTITUTIONALADMIN || $STAFF || $INSTITUTIONALSTAFF}
                 <li class="returntosite"><span><a href="{$WWWROOT}" accesskey="h" class="return-site">{str tag="returntosite"}</a></span></li>
-{elseif $USER->get('admin') && !$MOBILE}
+{elseif $USER->get('admin')}
                 <li class="siteadmin"><span><a href="{$WWWROOT}admin/" accesskey="a" class="admin-site">{str tag="administration"}</a></span></li>
-{elseif $USER->is_institutional_admin() && !$MOBILE}
+{elseif $USER->is_institutional_admin()}
                 <li class="instituteadmin"><span><a href="{$WWWROOT}admin/users/search.php" accesskey="a" class="admin-user">{str tag="administration"}</a></span></li>
 {elseif $USER->get('staff')}
                 <li class="siteinfo"><span><a href="{$WWWROOT}admin/users/search.php" accesskey="a" class="admin-user">{str tag="siteinformation"}</a></span></li>

htdocs/theme/default/templates/view/editviewtabs.tpl

 
 <div class="tabswrap"><h3 class="rd-tab-title">TABS<span class="rd-tab"></span></h3><ul class="in-page-tabs edit-view-tabs">
   {if $edittitle}<li {if $selected == 'title'} class="current-tab"{/if}><a{if $selected == 'title'} class="current-tab"{/if} href="{$WWWROOT}view/edit.php?id={$viewid}{if $new}&new=1{/if}">{str tag=edittitleanddescription section=view}</a></li>{/if}
-  {if !$MOBILE}<li {if $selected == 'layout'} class="current-tab"{/if}><a{if $selected == 'layout'} class="current-tab"{/if} href="{$WWWROOT}view/layout.php?id={$viewid}{if $new}&new=1{/if}">{str tag=editlayout section=view}</a></li>{/if}
-  {if !$MOBILE}<li {if $selected == 'content'} class="current-tab"{/if}><a{if $selected == 'content'} class="current-tab"{/if} href="{$WWWROOT}view/blocks.php?id={$viewid}{if $new}&new=1{/if}">{str tag=editcontent section=view}</a></li>{/if}
+  <li {if $selected == 'layout'} class="current-tab"{/if}><a{if $selected == 'layout'} class="current-tab"{/if} href="{$WWWROOT}view/layout.php?id={$viewid}{if $new}&new=1{/if}">{str tag=editlayout section=view}</a></li>
+  <li {if $selected == 'content'} class="current-tab"{/if}><a{if $selected == 'content'} class="current-tab"{/if} href="{$WWWROOT}view/blocks.php?id={$viewid}{if $new}&new=1{/if}">{str tag=editcontent section=view}</a></li>
   <li class="displaypage"><a href="{$displaylink}">{str tag=displayview section=view} &raquo;</a></li>
-  {if ($edittitle || $viewtype == 'profile') && !$MOBILE}<li class="sharepage"><a href="{$WWWROOT}view/access.php?id={$viewid}{if $new}&new=1{/if}">{str tag=shareview section=view} &raquo;</a></li>{/if}
+  {if $edittitle || $viewtype == 'profile'}<li class="sharepage"><a href="{$WWWROOT}view/access.php?id={$viewid}{if $new}&new=1{/if}">{str tag=shareview section=view} &raquo;</a></li>{/if}
 </ul></div>

htdocs/theme/raw/templates/header/head.tpl

@@ -11,7 +11,9 @@
         'sesskey' : '{$SESSKEY}',
         'wwwroot': '{$WWWROOT}',
         'loggedin': {$USER->is_logged_in()|intval},
-        'userid': {$USER->get('id')}
+        'userid': {$USER->get('id')},
+        'mobile': {if $MOBILE}1{else}0{/if},
+        'handheld_device': {if $HANDHELD_DEVICE}1{else}0{/if}
     {literal}}{/literal};
     </script>
     {$STRINGJS|safe}

htdocs/theme/raw/templates/index.tpl

 {include file="header.tpl"}
 {$page_content|clean_html|safe}
-{if get_config('homepageinfo') && (!$USER->is_logged_in() || $USER->get_account_preference('showhomeinfo')) && !$HANDHELD_DEVICE}
+{if get_config('homepageinfo') && (!$USER->is_logged_in() || $USER->get_account_preference('showhomeinfo'))}
     {include file="homeinfo.tpl" url=$url}
 {/if}
 {if $dashboardview}

htdocs/theme/raw/templates/user/view.tpl

@@ -8,7 +8,7 @@
     {$pageheadinghtml|safe}
   {/if}
   </h1>
-  {if $ownprofile && !$MOBILE}
+  {if $ownprofile}
   <div class="userviewrbuttons">
     <a title="{str tag=editthisview section=view}" href="{$WWWROOT}view/blocks.php?profile=1" class="btn">{str tag=editthisview section=view}</a>
   </div>

htdocs/theme/raw/templates/view/editviewtabs.tpl

 
 <div class="tabswrap"><ul class="in-page-tabs edit-view-tabs">
   {if $edittitle}<li {if $selected == 'title'} class="current-tab"{/if}><a{if $selected == 'title'} class="current-tab"{/if} href="{$WWWROOT}view/edit.php?id={$viewid}{if $new}&new=1{/if}">{str tag=edittitleanddescription section=view}</a></li>{/if}
-  {if !$MOBILE}<li {if $selected == 'layout'} class="current-tab"{/if}><a{if $selected == 'layout'} class="current-tab"{/if} href="{$WWWROOT}view/layout.php?id={$viewid}{if $new}&new=1{/if}">{str tag=editlayout section=view}</a></li>{/if}
-  {if !$MOBILE}<li {if $selected == 'content'} class="current-tab"{/if}><a{if $selected == 'content'} class="current-tab"{/if} href="{$WWWROOT}view/blocks.php?id={$viewid}{if $new}&new=1{/if}">{str tag=editcontent section=view}</a></li>{/if}
+  <li {if $selected == 'layout'} class="current-tab"{/if}><a{if $selected == 'layout'} class="current-tab"{/if} href="{$WWWROOT}view/layout.php?id={$viewid}{if $new}&new=1{/if}">{str tag=editlayout section=view}</a></li>
+  <li {if $selected == 'content'} class="current-tab"{/if}><a{if $selected == 'content'} class="current-tab"{/if} href="{$WWWROOT}view/blocks.php?id={$viewid}{if $new}&new=1{/if}">{str tag=editcontent section=view}</a></li>
   <li class="displaypage"><a href="{$displaylink}">{str tag=displayview section=view} &raquo;</a></li>
-  {if ($edittitle || $viewtype == 'profile') && !$MOBILE}<li class="sharepage"><a href="{$WWWROOT}view/access.php?id={$viewid}{if $new}&new=1{/if}">{str tag=shareview section=view} &raquo;</a></li>{/if}
+  {if $edittitle || $viewtype == 'profile'}<li class="sharepage"><a href="{$WWWROOT}view/access.php?id={$viewid}{if $new}&new=1{/if}">{str tag=shareview section=view} &raquo;</a></li>{/if}
 </ul></div>

htdocs/theme/raw/templates/view/index.tpl

@@ -37,10 +37,7 @@
 {/if}
                         </td>
                         <td class="right buttonscell btns2">
-{if 
-   !$view.submittedto && (!$view.locked || $editlocked)
-   && !($MOBILE && ($view.type == 'profile' || $view.type == 'dashboard'))
-}
+{if !$view.submittedto && (!$view.locked || $editlocked)}
                                 <a href="{$WWWROOT}view/blocks.php?id={$view.id}" title="{str tag ="editcontentandlayout" section="view"}"><img src="{theme_url filename='images/edit.gif'}" alt="{str tag=edit}"></a>
 {/if}
 {if !$view.submittedto && $view.removable && (!$view.locked || $editlocked)}

htdocs/theme/raw/templates/view/viewmenu.tpl

@@ -4,9 +4,7 @@
 {if $LOGGEDIN}
   <a id="objection_link" class="objection" href="">{str tag=reportobjectionablematerial section=view}</a>
 {/if}
-{if !$HANDHELD_DEVICE}
-  <a id="print_link" class="print" href="" onclick="window.print(); return false;">{str tag=print section=view}</a>
-{/if}
+<a id="print_link" class="print" href="" onclick="window.print(); return false;">{str tag=print section=view}</a>
 {if $LOGGEDIN}
   <a id="toggle_watchlist_link" class="watchlist" href="">{if $viewbeingwatched}{str tag=removefromwatchlist section=view}{else}{str tag=addtowatchlist section=view}{/if}</a>
   {contextualhelp plugintype='core' pluginname='view' section='viewmenu'}