Use hash part of URL for IE8 in files app

Before this fix, the URL wasn't updated in IE8 when navigating into
folders.

This fix makes use of the hash part of URLs to make this work in IE8,
since IE8 doesn't support the history API nor changing the URL without
redirecting.

From now, both the regular query URL "?dir=somedir" and "#?dir=somedir"
will work in both IE8 and non-IE8 browsers.

In IE8, query based URLs are automatically converted to hash URLs upon
page load. The conversion is done on the server side by redirecting the
user to the updated URL.

When loading a page directly using a hash URL in the form
"#?dir=somedir" in IE8, the server doesn't get the hash, so it will not
return any results in that case and rely on ajax to load the first page.

diff --git a/apps/files/index.php b/apps/files/index.php
index 4b930f89024afc5c7442088361ff8c2fa0cbb865..d46d8e32eefcce1cc08cd502a4b016bde1a63418 100644 (file)
--- a/apps/files/index.php
+++ b/apps/files/index.php
@@ -41,13 +41,40 @@ if (!\OC\Files\Filesystem::is_dir($dir . '/')) {
        exit();
 }
 
+$isIE8 = false;
+preg_match('/MSIE (.*?);/', $_SERVER['HTTP_USER_AGENT'], $matches);
+if (count($matches) > 0 && $matches[1] <= 8){
+       $isIE8 = true;
+}
+
+// if IE8 and "?dir=path" was specified, reformat the URL to use a hash like "#?dir=path"
+if ($isIE8 && isset($_GET['dir'])){
+       if ($dir === ''){
+               $dir = '/';
+       }
+       header('Location: ' . OCP\Util::linkTo('files', 'index.php') . '#?dir=' . \OCP\Util::encodePath($dir));
+       exit();
+}
+
+$ajaxLoad = false;
 $files = array();
 $user = OC_User::getUser();
 if (\OC\Files\Cache\Upgrade::needUpgrade($user)) { //dont load anything if we need to upgrade the cache
        $needUpgrade = true;
        $freeSpace = 0;
 } else {
-       $files = \OCA\files\lib\Helper::getFiles($dir);
+       if ($isIE8){
+               // after the redirect above, the URL will have a format
+               // like "files#?dir=path" which means that no path was given
+               // (dir is not set). In that specific case, we don't return any
+               // files because the client will take care of switching the dir
+               // to the one from the hash, then ajax-load the initial file list
+               $files = array();
+               $ajaxLoad = true;
+       }
+       else{
+               $files = \OCA\files\lib\Helper::getFiles($dir);
+       }
        $freeSpace = \OC\Files\Filesystem::free_space($dir);
        $needUpgrade = false;
 }
@@ -106,5 +133,6 @@ if ($needUpgrade) {
        $tmpl->assign('publicUploadEnabled', $publicUploadEnabled);
        $tmpl->assign("encryptedFiles", \OCP\Util::encryptedFiles());
        $tmpl->assign('disableSharing', false);
+       $tmpl->assign('ajaxLoad', $ajaxLoad);
        $tmpl->printPage();
 }

diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 07605a7d8912be7b35aa880a6b0b1e8198040f3e..b50d46c98d3072ef0fffcaa7e3bb23166266e93d 100644 (file)
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -160,23 +160,31 @@ var FileList={
         * @param targetDir target directory (non URL encoded)
         * @param changeUrl false if the URL must not be changed (defaults to true)
         */
-       changeDirectory: function(targetDir, changeUrl){
+       changeDirectory: function(targetDir, changeUrl, force){
                var $dir = $('#dir'),
                        url,
                        currentDir = $dir.val() || '/';
                targetDir = targetDir || '/';
-               if (currentDir === targetDir){
+               if (!force && currentDir === targetDir){
                        return;
                }
                FileList.setCurrentDir(targetDir, changeUrl);
                FileList.reload();
        },
+       linkTo: function(dir){
+               return OC.linkTo('files', 'index.php')+"?dir="+ encodeURIComponent(dir).replace(/%2F/g, '/');
+       },
        setCurrentDir: function(targetDir, changeUrl){
                $('#dir').val(targetDir);
-               // Note: IE8 handling ignored for now
-               if (window.history.pushState && changeUrl !== false){
-                       url = OC.linkTo('files', 'index.php')+"?dir="+ encodeURIComponent(targetDir).replace(/%2F/g, '/'),
-                       window.history.pushState({dir: targetDir}, '', url);
+               if (changeUrl !== false){
+                       if (window.history.pushState && changeUrl !== false){
+                               url = FileList.linkTo(targetDir);
+                               window.history.pushState({dir: targetDir}, '', url);
+                       }
+                       // use URL hash for IE8
+                       else{
+                               window.location.hash = '?dir='+ encodeURIComponent(targetDir).replace(/%2F/g, '/');
+                       }
                }
        },
        /**
@@ -837,6 +845,37 @@ $(document).ready(function(){
                $(window).trigger('beforeunload');
        });
 
+       function parseHashQuery(){
+               var hash = window.location.hash,
+                       pos = hash.indexOf('?'),
+                       query;
+               if (pos >= 0){
+                       return hash.substr(pos + 1);
+               }
+               return '';
+       }
+
+       function parseCurrentDirFromUrl(){
+               var query = parseHashQuery(),
+                       params,
+                       dir = '/';
+               // try and parse from URL hash first
+               if (query){
+                       params = OC.parseQueryString(query);
+               }
+               // else read from query attributes
+               if (!params){
+                       params = OC.parseQueryString(location.search);
+               }
+               return (params && params.dir) || '/';
+       }
+
+       // fallback to hashchange when no history support
+       if (!window.history.pushState){
+               $(window).on('hashchange', function(){
+                       FileList.changeDirectory(parseCurrentDirFromUrl(), false);
+               });
+       }
        window.onpopstate = function(e){
                var targetDir;
                if (e.state && e.state.dir){
@@ -844,12 +883,17 @@ $(document).ready(function(){
                }
                else{
                        // read from URL
-                       targetDir = (OC.parseQueryString(location.search) || {dir: '/'}).dir || '/';
+                       targetDir = parseCurrentDirFromUrl();
                }
                if (targetDir){
                        FileList.changeDirectory(targetDir, false);
                }
        }
 
+       if (parseInt($('#ajaxLoad').val(), 10) === 1){
+               // need to initially switch the dir to the one from the hash (IE8)
+               FileList.changeDirectory(parseCurrentDirFromUrl(), false, true);
+       }
+
        FileList.createFileSummary();
 });

diff --git a/apps/files/templates/index.php b/apps/files/templates/index.php
index 0105f4370e509dc59755973a4cf18faf5cd02dcc..09e351d4ea83b2fba1a8faec9c9bb9c0b5c3916f 100644 (file)
--- a/apps/files/templates/index.php
+++ b/apps/files/templates/index.php
@@ -55,7 +55,7 @@
        <input type="hidden" name="permissions" value="<?php p($_['permissions']); ?>" id="permissions">
 </div>
 
-<div id="emptycontent" <?php if (!isset($_['files']) or !$_['isCreatable'] or count($_['files']) > 0):?>class="hidden"<?php endif; ?>><?php p($l->t('Nothing in here. Upload something!'))?></div>
+<div id="emptycontent" <?php if (!isset($_['files']) or !$_['isCreatable'] or count($_['files']) > 0 or !$_['ajaxLoad']):?>class="hidden"<?php endif; ?>><?php p($l->t('Nothing in here. Upload something!'))?></div>
 
 <input type="hidden" id="disableSharing" data-status="<?php p($_['disableSharing']); ?>"></input>
 
@@ -120,6 +120,7 @@
 </div>
 
 <!-- config hints for javascript -->
+<input type="hidden" name="ajaxLoad" id="ajaxLoad" value="<?php p($_['ajaxLoad']); ?>" />
 <input type="hidden" name="allowZipDownload" id="allowZipDownload" value="<?php p($_['allowZipDownload']); ?>" />
 <input type="hidden" name="usedSpacePercent" id="usedSpacePercent" value="<?php p($_['usedSpacePercent']); ?>" />
 <input type="hidden" name="encryptedFiles" id="encryptedFiles" value="<?php $_['encryptedFiles'] ? p('1') : p('0'); ?>" />

diff --git a/apps/files_trashbin/js/filelist.js b/apps/files_trashbin/js/filelist.js
index ff3a846d860852c9f8df914efa450eaff99c690c..cd5a67ddfe002d502d013074b1baf496a948cbbf 100644 (file)
--- a/apps/files_trashbin/js/filelist.js
+++ b/apps/files_trashbin/js/filelist.js
@@ -19,11 +19,6 @@ FileList.reload = function(){
        });
 }
 
-FileList.setCurrentDir = function(targetDir, changeUrl){
-       $('#dir').val(targetDir);
-       // Note: IE8 handling ignored for now
-       if (window.history.pushState && changeUrl !== false){
-               url = OC.linkTo('files_trashbin', 'index.php')+"?dir="+ encodeURIComponent(targetDir).replace(/%2F/g, '/'),
-               window.history.pushState({dir: targetDir}, '', url);
-       }
+FileList.linkTo = function(dir){
+       return OC.linkTo('files_trashbin', 'index.php')+"?dir="+ encodeURIComponent(dir).replace(/%2F/g, '/');
 }