Page Comparison

by Boon-Hau Teh (boonhau .teh at utoronto.caat gmail dot com)
July 25, 2008

ATutor
http://www.atutor.ca/
________________________________________________________

Overview

...

...

$fluid_dir = 'jscripts/fluid-components/';
$current_path = AT_CONTENT_DIR.$_SESSION['course_id'].'/';
$pathext = urldecode($_GET['pathext']);
$_custom_head .= '
    <link href="'.$fluid_dir.'css/infusion-theme.css" rel="stylesheet" type="text/css" />
    <link href="'.$fluid_dir.'css/Uploader.css" rel="stylesheet" type="text/css" />

    <script src="'.$fluid_dir.'js/jquery/jquery-1.2.3.js" type="text/javascript"></script>
    <script src="'.$fluid_dir.'js/jquery/jquery.tabindex.js" type="text/javascript"></script>
    <script src="'.$fluid_dir.'js/jquery/jARIA.js" type="text/javascript"></script>
    <script src="'.$fluid_dir.'js/jquery/jquery.dimensions.js" type="text/javascript"></script>
    <script src="'.$fluid_dir.'js/jquery/ui.base.js" type="text/javascript"></script>
    <script src="'.$fluid_dir.'js/jquery/jquery.keyboard-a11y.js" type="text/javascript"></script>
    <script src="'.$fluid_dir.'js/swfupload/swfupload.js" type="text/javascript"></script>
    <script src="'.$fluid_dir.'js/fluid/Fluid.js" type="text/javascript"></script>
    <script src="'.$fluid_dir.'js/fluid/Uploader.js" type="text/javascript"></script>

    <script language="JavaScript" type="text/javascript">
        var uploadURL = "include/lib/upload.php?path='.urlencode($current_path.$pathext).'";
        var flashURL = "jscripts/fluid-components/swfupload/swfupload_f9.swf";
       
        var settings =   {
            whenDone: "'.$_SERVER['PHP_SELF'].'?pathext='.urlencode($pathext)
                        .SEP.'popup='.$popup.SEP.'framed='.$framed.SEP.'msg=FILEUPLOAD_DONE",
            whenCancel: function(){},
            continueAfterUpload: true,
            debug: false
        };
       
        var myUpload;
        $(document).ready(function() {
            myUpload = new fluid.Uploader("single-inline-fluid-uploader", uploadURL, flashURL, settings);
        });
    </script>

    <style type="text/css">
        .fluid-uploader {
            margin-top: 2em;
            padding: 1em 2em;
            display: block;
            clear: both;
        }
    </style>
';

The Uploader calls a Flash script (swfupload_f9.swf), which handles most of the functionality.  The URL to the swf file is specified by "flashURL".

var flashURL = "jscripts/fluid-components/swfupload/swfupload_f9.swf";

Whenever a file gets uploaded, the swfupload_f9.swf calls a file handler (/include/lib/upload.php) which saves the file to its proper location.  Therefore, the URL of the file handler (specified by "uploadURL") must be relative to swfupload_f9.swf

var uploadURL = "include/lib/upload.php?path='.urlencode($current_path.$pathext).'";

The code for the file handler itself is borrowed from the sample code provided in the Fluid Package (/sample-code/uploader.php) with a few alterations, namely the save path of the uploaded files:

$save_path = urldecode($_GET['path']);

The remaining settings for the Uploader can be configured through the "settings" variable.  In the current implementation, the Uploader is configured to automatically reload the page (specified by "whenDone") when all the files are done uploading (specified by "continueAfterUpload").  Functionality for the "Cancel" button (specified by "whenCancel") is disabled so that it can be used by a toggle function in ATutor's File Manager (refer to Display section below).

For a more detailed reference of settings that can be configured for the Uploader, please refer to the Uploader API

...

page.  

Display

After initializing the Fluid scripts, the Uploader gets displayed through /include/html/filemanager_display.inc.php.  Most of the HTML code being used is borrowed from the sample-code provided by the Fluid Package in /sample-code/uploader/inline/uploader.html

Upon opening the File Manager, the Uploader itself is initially hidden in order to save space and keep the page simple.  When needed, the user can click on the "Upload Files" button to display Fluid's Uploader interface.

Image Modified

From the Uploader, the "Cancel" button can be clicked to hide the interface and toggle back to the original view of the File Manager.

Image Modified

This toggle feature is a simple Javascript function defined in /include/html/filemanager.inc.php that gets called through the "onclick" attribute of the "Uploade Files" and "Cancel" button.

function toggleform(id, link) {
    var obj = document.getElementById(id);
    var btn = document.getElementById(link);

    if (obj.style.display == "none") {
        //show object
        obj.style.display='';   
        obj.focus();
        //hide button
        btn.style.display = 'none';
    } else {
        //hide object
        obj.style.display='none';
        //show button
        btn.style.display = '';
    }
}

For information on the Uploader interface itself, please refer to the Uploader Wireframes Wiki.

Flash Detection

The current Uploader of the Fluid Package (v0.4beta1) relies on the use of Flash, where swfupload_f9.swf is called by a Javascript wrapper.  This poses a problem for an ATutor user who may not have Flash installed.  Therefore, it is necessary to provide an alternative method for uploading files when Flash cannot be detected from the user's browser.  The current implementation in ATutor does so by providing a simple single-file uploader.

Image Modified

Note that the current Flash detection handler will most likely be improved at a later time.  If a later version of the Fluid Package implements its own Flash detector and non-Flash script, the current handler in ATutor can be easily removed.  For now, the Flash detection takes place outside of the Fluid scripts in /include/vitals.inc.php

if(isset($_COOKIE["flash"])) {
    $_SESSION['flash'] = $_COOKIE["flash"];

    //delete the cookie
    setcookie("flash",'',time()-3600);
}

if (!isset($_SESSION["flash"])) {
    $_custom_head .= '
        <script type="text/javascript">
        <!--
            //VB-Script for InternetExplorer
            function iExploreCheck()
            {
                document.writeln("<scr" + "ipt language=\'VBscript\'>");
                //document.writeln("\'Test to see if VBScripting works");
                document.writeln("detectableWithVB = False");
                document.writeln("If ScriptEngineMajorVersion >= 2 then");
                document.writeln("   detectableWithVB = True");
                document.writeln("End If");
                //document.writeln("\'This will check for the plugin");
                document.writeln("Function detectActiveXControl(activeXControlName)");
                document.writeln("   on error resume next");
                document.writeln("   detectActiveXControl = False");
                document.writeln("   If detectableWithVB Then");
                document.writeln("      detectActiveXControl = IsObject(CreateObject(activeXControlName))");
                document.writeln("   End If");
                document.writeln("End Function");
                document.writeln("</scr" + "ipt>");
                return detectActiveXControl("ShockwaveFlash.ShockwaveFlash.1");
            }

            var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ?
                          navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : false;
            if(!(plugin) && (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0
                         && (navigator.appVersion.indexOf("Win") != -1))) {
                if (iExploreCheck()) {
                    flash_detect = "flash=yes";
                } else {
                    flash_detect = "flash=no";
                }
            } else if(plugin) {
                flash_detect = "flash=yes";
            } else {
                flash_detect = "flash=no";
            }

            writeCookie(flash_detect);

            function writeCookie(value)
            {
                var today = new Date();
                var the_date = new Date("December 31, 2099");
                var the_cookie_date = the_date.toGMTString();
                var the_cookie = value + ";expires=" + the_cookie_date;
                document.cookie = the_cookie;
            }
        //-->
        </script>
';
}

In the current implementation, a Flash detection script gets inserted into the header when a user initially accesses any page on ATutor.  The script returns a value of "yes" or "no", which gets saved in a cookie ($_COOKIE[fluid:"flash"]) then sent to the server to be saved as a session variable ($_SESSION[fluid:'flash']).  Once the session variable is set, the cookie is removed and the Flash detection script no longer gets called for the remainder of the session.  When accessing the filemanager, the php script (/include/html/filemanager_display.inc.php) generates the appropriate uploader depending on the value of the session variable.

if (isset($_SESSION['flash']) && $_SESSION['flash'] == "yes") {
    /*
           Display Fluid Uploader
     */
} else {
    /*
           Display non-Flash single file uploader
     */

}

Developer's To Do List

• Improving Flash detection
• Internationalizing text in the Fluid Uploader, as the current ATutor is used in different languages
• Update File Manager list of files as new files get uploaded on the fly (may require Ajax)
• Save as a personal setting for choosing to display the Fluid Uploader or the simple single-file uploader (similar to how preferences are saved in ATutor for switching between the visual and text editor)
• Make the Fluid Uploader available for the File Storage section (this requires being able to input descriptions that associate with the files being uploaded)

Demo

A working demo of the current Fluid Uploader integrated into ATutor is available at:

http://www.atutor.ca/atutor/fluidtest/
login: fluid
password: fluid

...

Screenshots

Image Removed