MDL-33056 Course dnd upload - improved status box styling and added fade in/out

course/dndupload.js

@@ -53,7 +53,7 @@ M.course_dndupload = {
     // The classes that an element must have to be identified as a course section
     sectionclasses: ['section', 'main'],
     // The ID of the main content area of the page (for adding the 'status' div)
-    pagecontentid: 'page-content',
+    pagecontentid: 'page',
     // The selector identifying the list of modules within a section (note changing this may require
     // changes to the get_mods_element function)
     modslistselector: 'ul.section',
@@ -92,7 +92,9 @@ M.course_dndupload = {
             this.init_events(el);
         }, this);
 
-        this.add_status_div();
+        if (options.showstatus) {
+            this.add_status_div();
+        }
     },
 
     /**
@@ -100,14 +102,18 @@ M.course_dndupload = {
      * is available (or to explain why it is not available)
      */
     add_status_div: function() {
+        var coursecontents = document.getElementById(this.pagecontentid);
+        if (!coursecontents) {
+            return;
+        }
+
         var div = document.createElement('div');
         div.id = 'dndupload-status';
-        var coursecontents = document.getElementById(this.pagecontentid);
-        if (coursecontents) {
-            coursecontents.insertBefore(div, coursecontents.firstChild);
-        }
-        div = this.Y.one(div);
+        div.style.opacity = 0.0;
+        coursecontents.insertBefore(div, coursecontents.firstChild);
 
+        var Y = this.Y;
+        div = Y.one(div);
         var handlefile = (this.handlers.filehandlers.length > 0);
         var handletext = false;
         var handlelink = false;
@@ -134,6 +140,25 @@ M.course_dndupload = {
             $msgident += 'link';
         }
         div.setContent(M.util.get_string($msgident, 'moodle'));
+
+        var fadeanim = new Y.Anim({
+            node: '#dndupload-status',
+            from: {
+                opacity: 0.0,
+                top: '-30px'
+            },
+
+            to: {
+                opacity: 1.0,
+                top: '0px'
+            },
+            duration: 0.5
+        });
+        fadeanim.once('end', function(e) {
+            this.set('reverse', 1);
+            Y.later(3000, this, 'run', null, false);
+        });
+        fadeanim.run();
     },
 
     /**

course/dnduploadlib.php

@@ -39,6 +39,8 @@ require_once($CFG->dirroot.'/course/lib.php');
 function dndupload_add_to_course($course, $modnames) {
     global $CFG, $PAGE;
 
+    $showstatus = optional_param('editingenabled', false, PARAM_BOOL);
+
     // Get all handlers.
     $handler = new dndupload_handler($course, $modnames);
     $jsdata = $handler->get_js_data();
@@ -65,12 +67,13 @@ function dndupload_add_to_course($course, $modnames) {
             array('upload', 'moodle'),
             array('cancel', 'moodle')
         ),
-        'requires' => array('node', 'event', 'panel', 'json')
+        'requires' => array('node', 'event', 'panel', 'json', 'anim')
     );
     $vars = array(
         array('courseid' => $course->id,
               'maxbytes' => get_max_upload_file_size($CFG->maxbytes, $course->maxbytes),
-              'handlers' => $handler->get_js_data())
+              'handlers' => $handler->get_js_data(),
+              'showstatus' => $showstatus)
     );
 
     $PAGE->requires->js_init_call('M.course_dndupload.init', $vars, true, $jsmodule);

course/view.php

@@ -115,7 +115,8 @@
             if ($course->id == SITEID) {
                 redirect($CFG->wwwroot .'/?redirect=0');
             } else {
-                redirect($PAGE->url);
+                $url = new moodle_url($PAGE->url, array('editingenabled' => 1));
+                redirect($url);
             }
         } else if (($edit == 0) and confirm_sesskey()) {
             $USER->editing = 0;

theme/base/style/course.css

@@ -159,7 +159,7 @@ input.titleeditor {
 }
 
 /* Course drag and drop upload styles */
-#dndupload-status {width:60%;margin:0 auto;padding:2px;border:1px solid #ddd;text-align:center;background:#ffc}
+#dndupload-status {width:40%;margin:0 30%;padding:6px;border:1px solid #ddd;text-align:center;background:#ffc;position:absolute;z-index:9999;box-shadow:2px 2px 5px 1px #ccc;border-radius:0px 0px 8px 8px;}
 .dndupload-preview {color:#909090;border:1px dashed #909090;}
 .dndupload-progress-outer {width:70px;border:solid black 1px;height:10px;display:inline-block;margin:0;padding:0;overflow:hidden;position:relative;}
 .dndupload-progress-inner {width:0%;height:100%;background-color:green;display:inline-block;margin:0;padding:0;float:left;}