[LON-CAPA-cvs] cvs: loncom /interface loncommon.pm londocs.pm

raeburn raeburn at source.lon-capa.org
Fri Sep 9 16:13:18 EDT 2011


raeburn		Fri Sep  9 20:13:18 2011 EDT

  Modified files:              
    /loncom/interface	londocs.pm loncommon.pm 
  Log:
  - Course Editor.
    - scrollbox width resized dynamically onload and resize.
    - tools tab moved to location immediately below Content breadcrumbs in
      editor.
    - Tested successfully on FF, and Chrome.  
    - IE needs modifications.
  
  
-------------- next part --------------
Index: loncom/interface/londocs.pm
diff -u loncom/interface/londocs.pm:1.457 loncom/interface/londocs.pm:1.458
--- loncom/interface/londocs.pm:1.457	Mon Aug 15 16:31:55 2011
+++ loncom/interface/londocs.pm	Fri Sep  9 20:13:17 2011
@@ -1,7 +1,7 @@
 # The LearningOnline Network
 # Documents
 #
-# $Id: londocs.pm,v 1.457 2011/08/15 16:31:55 raeburn Exp $
+# $Id: londocs.pm,v 1.458 2011/09/09 20:13:17 raeburn Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -1613,7 +1613,8 @@
 }
 
 sub editor {
-    my ($r,$coursenum,$coursedom,$folder,$allowed,$upload_output,$crstype)=@_;
+    my ($r,$coursenum,$coursedom,$folder,$allowed,$upload_output,$crstype,
+        $supplementalflag,$orderhash)=@_;
     my $container= ($env{'form.pagepath'}) ? 'page'
 		                           : 'sequence';
 
@@ -1742,7 +1743,7 @@
         $r->print('</div>');
     }
 
-    my $output;  
+    my ($to_show,$output);
 
     &Apache::loncommon::start_data_table_count(); #setup a row counter 
     foreach my $res (@LONCAPA::map::order) {
@@ -1759,28 +1760,34 @@
     &Apache::loncommon::end_data_table_count();
     
     if ($shown) {
-        $r->print(&Apache::loncommon::start_scrollbox('900px','880px','400px','contentscroll')
-                 .&Apache::loncommon::start_data_table(undef,'contentlist'));
+        $to_show = &Apache::loncommon::start_scrollbox('900px','880px','400px','contentscroll')
+                  .&Apache::loncommon::start_data_table(undef,'contentlist');
         if ($allowed) {
-            $r->print(&Apache::loncommon::start_data_table_header_row()
+            $to_show .= &Apache::loncommon::start_data_table_header_row()
                      .'<th colspan="2">'.&mt('Move').'</th>'
                      .'<th>'.&mt('Actions').'</th>'
-                     .'<th colspan="2">'.&mt('Document').'</th>');
+                     .'<th colspan="2">'.&mt('Document').'</th>';
             if ($folder !~ /^supplemental/) {
-                $r->print('<th colspan="4">'.&mt('Settings').'</th>');
+                $to_show .= '<th colspan="4">'.&mt('Settings').'</th>';
             }
-            $r->print(&Apache::loncommon::end_data_table_header_row());
+            $to_show .= &Apache::loncommon::end_data_table_header_row();
         }
-        $r->print($output
+        $to_show .= $output.' '
                  .&Apache::loncommon::end_data_table()
-                 .&Apache::loncommon::end_scrollbox()
-        );
+                 .'<br style="line-height:2px;" />'
+                 .&Apache::loncommon::end_scrollbox();
     } else {
-        $r->print('<p class="LC_info">'
+        $to_show .= &Apache::loncommon::start_scrollbox('400px','380px','200px','contentscroll')
+                 .'<div class="LC_info" id="contentlist">'
                  .&mt('Currently no documents.')
-                 .'</p>'
-        );
+                 .'</div>'
+                 .&Apache::loncommon::end_scrollbox();
     }
+    my $tid = 1;
+    if ($supplementalflag) {
+        $tid = 2;
+    }
+    $r-print(&generate_edit_table($tid,$orderhash,$to_show));
     if ($allowed) {
         &print_paste_buffer($r,$container);
     }
@@ -2211,14 +2218,13 @@
     $form_start
     <label><input type="checkbox" name="hiddenresource_$orderidx" onclick="this.form.changeparms.value='hiddenresource';this.form.submit()" $hidtext /> $lt{'hd'}</label>
     $form_end
-  </td>
-  <td class="LC_docs_entry_parameter">
+    <br />
     $form_start
     <label><input type="checkbox" name="encrypturl_$orderidx" onclick="this.form.changeparms.value='encrypturl';this.form.submit()" $enctext /> $lt{'ec'}</label>
     $form_end
   </td>
-  <td class="LC_docs_entry_parameter">$form_start $rand_order_text $form_end</td>
-  <td class="LC_docs_entry_parameter">$form_start $parameterset $form_end</td>
+  <td class="LC_docs_entry_parameter">$form_start $parameterset $form_end<br />
+                                      $form_start $rand_order_text $form_end</td>
 ENDPARMS
     }
     $line.=&Apache::loncommon::end_data_table_row();
@@ -2760,8 +2766,8 @@
     $r->print('<li '.(($mode eq 'supdocs')?' class="active"':'').
            '><a href="/adm/coursedocs?forcesupplement=1"><b>'.&mt('Supplemental Documents').'</b></a></li>');
     $r->print('</ul>');
-    $r->print('<div class="LC_Box" style="clear:both;margin:0;" id="contenteditor">'
-             .'<div id="maincoursedoc" style="margin:0 0;padding:0 0;">');
+    $r->print('<div class="LC_DocsBox" style="clear:both;margin:0;" id="contenteditor">'
+             .'<div id="maincoursedoc" style="margin:0 0;padding:0 0">');
     $r->print('<div class="LC_ContentBox" id="mainCourseDocuments" style="display: block;">');
 }
 
@@ -2961,11 +2967,21 @@
     $iconpath = &Apache::loncommon::lonhttpdurl($r->dir_config('lonIconsURL') . "/");
 
     if ($allowed) {
+        my @tabids;
+        if ($supplementalflag) {
+            @tabids = ('002','ee2','ff2');
+        } else {
+            @tabids = ('aa1','bb1','cc1','ff1');
+            unless ($env{'form.pagepath'}) {
+                unshift(@tabids,'001');
+                push(@tabids,('dd1','ee1'));
+            }
+        }
+        my $tabidstr = join("','", at tabids);
 	$script .= &editing_js($udom,$uname).
-                   &resize_contentdiv_js();
+                   &resize_contentdiv_js($tabidstr);
         $addentries = {
-                        onload   => "javascript:resize_contentdiv('contentscroll');",
-                        onresize => "javascript:resize_contentdiv('contentscroll');",
+                        onload   => "javascript:resize_contentdiv('contentscroll','1','1');",
                       };
     }
 # -------------------------------------------------------------------- Body tag
@@ -3093,22 +3109,23 @@
 	</label>
 CHBO
 
-    my $fileuploada = "<input type='submit' value='".$lt{'upld'}."' /> $help{'Uploading_From_Harddrive'}";
+    my $fileuploada = "<br clear='all' /><input type='submit' value='".$lt{'upld'}."' /> $help{'Uploading_From_Harddrive'}";
 	my $fileuploadform=(<<FUFORM);
+        <div style="float:left">
 	<form name="uploaddocument" action="/adm/coursedocs" method="post" enctype="multipart/form-data">
 	<input type="hidden" name="active" value="aa" />
 	$fileupload
 	<br />
 	$lt{'title'}:<br />
-	<input type="text" size="80" name="comment" />
+	<input type="text" size="60" name="comment" />
 	$uploadtag
 	<input type="hidden" name="cmd" value="upload_default" />
 	<br />
-	<span class="LC_nobreak">
+	<span class="LC_nobreak" style="float:left">
 	$checkbox
 	</span>
 FUFORM
-    $fileuploadform .= &create_form_ul(&Apache::lonhtmlcommon::htmltag('li',$fileuploada,{class => 'LC_menubuttons_inline_text'})).'</form>';
+    $fileuploadform .= $fileuploada.'</form></div>';
 
 	my $simpleeditdefaultform=(<<SEDFFORM);
 	<form action="/adm/coursedocs" method="post" name="simpleeditdefault">
@@ -3124,7 +3141,7 @@
 	<hr />
 	$lt{'copm'}<br />
 	<input type="text" size="40" name="importmap" /><br />
-	<span class="LC_nobreak"><input type="button"
+	<span class="LC_nobreak" style="float:left"><input type="button"
 	onclick="javascript:openbrowser('simpleeditdefault','importmap','sequence,page','')"
 	value="$lt{'selm'}" /> <input type="submit" name="loadmap" value="$lt{'load'}" />
 	$help{'Load_Map'}</span>
@@ -3415,7 +3432,8 @@
 
  $hadchanges=0;
        unless ($supplementalflag) {
-          my $error = &editor($r,$coursenum,$coursedom,$folder,$allowed,'',$crstype);
+          my $error = &editor($r,$coursenum,$coursedom,$folder,$allowed,'',$crstype,
+                              $supplementalflag,\%orderhash);
           if ($error) {
              $r->print('<p><span class="LC_error">'.$error.'</span></p>');
           }
@@ -3424,10 +3442,8 @@
           }
 
           &changewarning($r,'');
-          $r->print(&generate_edit_table('1',\%orderhash));
         }
-
-	}
+    }
 
 # Supplemental documents start here
 
@@ -3528,14 +3544,15 @@
                 'ff' => ['Special Documents',&create_form_ul(&create_list_elements(@specialdocs))]
                 );
         if ($supplementalflag) {
-           my $error = &editor($r,$coursenum,$coursedom,$folder,$allowed,'',$crstype);
+           my $error = &editor($r,$coursenum,$coursedom,$folder,$allowed,'',$crstype,
+                               $supplementalflag,\%suporderhash);
            if ($error) {
               $r->print('<p><span class="LC_error">'.$error.'</span></p>');
            }
-           $r->print(&generate_edit_table('2',\%suporderhash));
         }
     } elsif ($supplementalflag) {
-        my $error = &editor($r,$coursenum,$coursedom,$folder,$allowed,'',$crstype);
+        my $error = &editor($r,$coursenum,$coursedom,$folder,$allowed,'',$crstype,
+                            $supplementalflag);
         if ($error) {
             $r->print('<p><span class="LC_error">'.$error.'</span></p>');
         }
@@ -3638,7 +3655,7 @@
 
 
 sub generate_edit_table {
-    my ($tid,$orderhash_ref) = @_;
+    my ($tid,$orderhash_ref,$to_show) = @_;
     return unless(ref($orderhash_ref) eq 'HASH');
     my %orderhash = %{$orderhash_ref};
     my $form;
@@ -3647,31 +3664,35 @@
     if($env{'form.active'} ne ''){
         $activetab = $env{'form.active'};
     }
-    $form = '<div class="LC_Box" style="margin-right:0">';
-    $form .= '<ul id="navigation'.$tid.'" class="LC_TabContent">';
-    foreach my $name (sort(keys(%orderhash))){
+    $form = '<div class="LC_Box" style="margin:0;">'.
+             '<ul id="navigation'.$tid.'" class="LC_TabContent">';
+    foreach my $name (reverse(sort(keys(%orderhash)))) {
         if($name ne '00'){
             if($activetab eq '' || $activetab ne $name){
                $active = '';
             }elsif($activetab eq $name){
                $active = 'class="active"';
             }
-            $form .= '<li '.$active
+            $form .= '<li style="float:right" '.$active
                 .' onmouseover="javascript:showPage(this, \''.$name.$tid.'\', \'navigation'.$tid.'\',\'content'.$tid.'\');"'
                 .' onclick="javascript:showPage(this, \''.$name.$tid.'\', \'navigation'.$tid.'\',\'content'.$tid.'\');"><a href="javascript:;"><b>'.&mt(${$orderhash{$name}}[0]).'</b></a></li>';
         } else {
-	    $form .= '<li '.$active.'>'.${$orderhash{$name}}[1].'</li>';
+	    $form .= '<li '.$active.' style="float:right">'.${$orderhash{$name}}[1].'</li>';
 
 	}
     }
     $form .= '</ul>';
-    $form .= '<div id="content'.$tid.'" style="padding: 0 0; margin: 0 0; clear: both;">';
+    $form .= '<div id="content'.$tid.'" style="padding: 0 0; margin: 0 0; overflow: hidden; clear:right">';
+
+    if ($to_show ne '') {
+        $form .= '<div style="padding:0;margin:0;float:left">'.$to_show.'</div>';
+    }
     foreach my $field (keys(%orderhash)){
 	if($field ne '00'){
             if($activetab eq '' || $activetab ne $field){
-                $active = 'style="display: none;"';
+                $active = 'style="display: none;float:left"';
             }elsif($activetab eq $field){
-                $active = 'style="display:block;"';
+                $active = 'style="display:block;float:left"';
             }
             $form .= '<div id="'.$field.$tid.'"'
                     .' class="LC_ContentBox" '.$active.'>'.${$orderhash{$field}}[1]
@@ -3950,7 +3971,7 @@
 	current.className = 'active';
 	currentData = document.getElementById(pageId);
 	currentData.style.display = 'block';
-        resize_contentdiv('contentscroll');
+        activeTab = pageId;
         if (nav == 'mainnav') {
             var storedpath = "$docs_folderpath";
             if (storedpath == '') {
@@ -3985,6 +4006,7 @@
                 }
             }
         }
+        resize_contentdiv('contentscroll','1','0');
 	return false;
 }
 
@@ -3999,66 +4021,171 @@
 }
 
 sub resize_contentdiv_js {
+    my ($tabidstr) = @_;
     my $viewport_js = &Apache::loncommon::viewport_geometry_js();
     return <<ENDRESIZESCRIPT;
 
+window.onresize=resizeContentEditor;
+
+var activeTab;
+
 $viewport_js
 
-function resize_contentdiv(scrollboxid) {
+function resize_contentdiv(scrollboxname,chkw,chkh) {
+    var scrollboxid = 'div_'+scrollboxname;
+    var scrolltableid = 'table_'+scrollboxname;
+    var scrollbox;
+    var scrolltable;
+
     if (document.getElementById("contenteditor") == null) {
         return;
     }
+
+    if (document.getElementById(scrollboxid) == null) {
+        return;
+    } else {
+        scrollbox = document.getElementById(scrollboxid);
+    }
+
+    if (document.getElementById(scrolltableid) == null) {
+        return;
+    } else {
+        scrolltable = document.getElementById(scrolltableid);
+    }
+
     init_geometry();
     var vph = Geometry.getViewportHeight();
+    var vpw = Geometry.getViewportWidth();
+
+    var alltabs = ['$tabidstr'];
+    var listwchange;
+    if (chkw == 1) {
+        var contenteditorw = document.getElementById("contenteditor").offsetWidth;
+        var contentlistw;
+        var contentlistid = document.getElementById("contentlist");
+        if (contentlistid != null) {
+            contentlistw = document.getElementById("contentlist").offsetWidth;
+        }
+        var contentlistwstart = contentlistw;
+
+        var scrollboxw = scrollbox.offsetWidth;
+        var scrollboxscrollw = scrollbox.scrollWidth;
+
+        var offsetw = parseInt(vpw * 0.015);
+        var paddingw = parseInt(vpw * 0.09);
+
+        var minscrollboxw = 250;
+
+        var maxtabw = 0;
+        for (var i=0; i<alltabs.length; i++) {
+            if (activeTab == alltabs[i]) {
+                var tabw = document.getElementById(alltabs[i]).offsetWidth;
+                if (tabw > maxtabw) {
+                    maxtabw = tabw;
+                }
+            } else {
+                if (document.getElementById(alltabs[i]) != null) {
+                    var thistab = document.getElementById(alltabs[i]);
+                    thistab.style.visibility = 'hidden';
+                    thistab.style.display = 'block';
+                    var tabw = document.getElementById(alltabs[i]).offsetWidth;
+                    thistab.style.display = 'none';
+                    thistab.style.visibility = '';
+                    if (tabw > maxtabw) {
+                        maxtabw = tabw;
+                    }
+                }
+            }
+        }
 
-    var primaryheight = document.getElementById("LC_nav_bar").offsetHeight;
-    var secondaryheight = document.getElementById("LC_secondary_menu").offsetHeight;
-    var crumbsheight = document.getElementById("LC_breadcrumbs").offsetHeight;
-    var dccidheight = document.getElementById("dccid").offsetHeight;
-
-    var uploadresultheight = 0;
-    if (document.getElementById("uploadfileresult") != null) {
-        uploadresultheight = document.getElementById("uploadfileresult").offsetHeight;
-    }
-    var tabbedheight = document.getElementById("tabbededitor").offsetHeight;
-    var contenteditorheight = document.getElementById("contenteditor").offsetHeight;
-    if (document.getElementById(scrollboxid) != null) {
-        var scrollbox =  document.getElementById(scrollboxid);
+        if (maxtabw > 0) {
+            var newscrollboxw;
+            if (maxtabw+paddingw+scrollboxscrollw<contenteditorw) {
+                newscrollboxw = contenteditorw-paddingw-maxtabw;
+                if (newscrollboxw < minscrollboxw) {
+                    newscrollboxw = minscrollboxw;
+                }
+                scrollbox.style.width = newscrollboxw+"px";
+                if (newscrollboxw != scrollboxw) {
+                    var newcontentlistw = newscrollboxw-offsetw;
+                    contentlistid.style.width = newcontentlistw+"px";
+                }
+            } else {
+                newscrollboxw = contenteditorw-paddingw-maxtabw;
+                if (newscrollboxw < minscrollboxw) {
+                    newscrollboxw = minscrollboxw;
+                }
+                scrollbox.style.width = newscrollboxw+"px";
+                if (newscrollboxw != scrollboxw) {
+                    var newcontentlistw = newscrollboxw-offsetw;
+                    contentlistid.style.width = newcontentlistw+"px";
+                }
+            }
+
+            if (newscrollboxw != scrollboxw) {
+                var newscrolltablew = newscrollboxw+offsetw;
+                scrolltable.style.width = newscrolltablew+"px";
+            }
+        }
+
+        if (contentlistid.offsetWidth != contentlistwstart) {
+            listwchange = 1;
+        }
+
+    }
+    if ((chkh == 1) || (listwchange)) {
+        var primaryheight = document.getElementById("LC_nav_bar").offsetHeight;
+        var secondaryheight = document.getElementById("LC_secondary_menu").offsetHeight;
+        var crumbsheight = document.getElementById("LC_breadcrumbs").offsetHeight;
+        var dccidheight = document.getElementById("dccid").offsetHeight;
+
+        var uploadresultheight = 0;
+        if (document.getElementById("uploadfileresult") != null) {
+            uploadresultheight = document.getElementById("uploadfileresult").offsetHeight;
+        }
+        var tabbedheight = document.getElementById("tabbededitor").offsetHeight;
+        var contenteditorheight = document.getElementById("contenteditor").offsetHeight;
         var scrollboxheight = scrollbox.offsetHeight;
         var scrollboxscrollheight = scrollbox.scrollHeight;
+        var freevspace = vph-(primaryheight+secondaryheight+crumbsheight+dccidheight+uploadresultheight+tabbedheight+contenteditorheight);
 
-        var freespace = vph-(primaryheight+secondaryheight+crumbsheight+dccidheight+uploadresultheight+tabbedheight+contenteditorheight);
-
-        var minscrollbox = 60;
-        var offset = 20;
+        var minvscrollbox = 200;
+        var offsetv = 20;
         var newscrollboxheight;
-        if (freespace < 0) {
-            newscrollboxheight = scrollboxheight+freespace-offset;
-            if (newscrollboxheight < minscrollbox) {
-                newscrollboxheight = minscrollbox;
+        if (freevspace < 0) {
+            newscrollboxheight = scrollboxheight+freevspace-offsetv;
+            if (newscrollboxheight < minvscrollbox) {
+                newscrollboxheight = minvscrollbox;
             }
             scrollbox.style.height = newscrollboxheight + "px";
         } else {
             if (scrollboxscrollheight > scrollboxheight) {
-                if (freespace > offset) {
-                    newscrollboxheight = scrollboxheight+freespace-offset;
-                    if (newscrollboxheight < minscrollbox) {
-                        newscrollboxheight = minscrollbox;
+                if (freevspace > offsetv) {
+                    newscrollboxheight = scrollboxheight+freevspace-offsetv;
+                    if (newscrollboxheight < minvscrollbox) {
+                        newscrollboxheight = minvscrollbox;
                     }
                     scrollbox.style.height = newscrollboxheight+"px";
                 }
             }
         }
         scrollboxheight = scrollbox.offsetHeight;
+        var contentlistheight = document.getElementById("contentlist").offsetHeight;
 
         if (scrollboxscrollheight <= scrollboxheight) {
-            var contentlistheight = document.getElementById("contentlist").offsetHeight;
-            if ((contentlistheight+offset)<scrollboxheight) {
-                newscrollheight = contentlistheight;
+            if ((contentlistheight+offsetv)<scrollboxheight) {
+                newscrollheight = contentlistheight+offsetv;
                 scrollbox.style.height = newscrollheight+"px";
             }
         }
     }
+    return;
+}
+
+function resizeContentEditor() {
+    var timer;
+    clearTimeout(timer)
+    timer=setTimeout('resize_contentdiv("contentscroll","1","1")',500);
 }
 
 ENDRESIZESCRIPT
Index: loncom/interface/loncommon.pm
diff -u loncom/interface/loncommon.pm:1.1019 loncom/interface/loncommon.pm:1.1020
--- loncom/interface/loncommon.pm:1.1019	Thu Sep  1 02:32:50 2011
+++ loncom/interface/loncommon.pm	Fri Sep  9 20:13:18 2011
@@ -1,7 +1,7 @@
 # The LearningOnline Network with CAPA
 # a pile of common routines
 #
-# $Id: loncommon.pm,v 1.1019 2011/09/01 02:32:50 raeburn Exp $
+# $Id: loncommon.pm,v 1.1020 2011/09/09 20:13:18 raeburn Exp $
 #
 # Copyright Michigan State University Board of Trustees
 #
@@ -6228,7 +6228,7 @@
   background: $sidebg;
   border-bottom: solid 1px $lg_border_color;
   list-style:none;
-  margin: 0 -10px;
+  margin: -1px -10px 0 -10px;
   padding: 0;
 }
 
@@ -6251,7 +6251,7 @@
   padding: 0 16px 0 10px;
   background-color:$tabbg;
   border-bottom:solid 1px $lg_border_color;
-  border-right: solid 1px $font;
+  border-left: solid 1px $font;
 }
 
 ul.LC_TabContent .right {
@@ -6350,11 +6350,10 @@
 
 ul.LC_CourseBreadcrumbs {
   background: $sidebg;
-  line-height: 32px;
+  height: 2em;
   padding-left: 10px;
-  margin: 0 0 10px 0;
+  margin: 0;
   list-style-position: inside;
-
 }
 
 ol#LC_MenuBreadcrumbs,
@@ -6396,6 +6395,11 @@
   padding: 0 10px 10px 10px;
 }
 
+.LC_DocsBox {
+  border: solid 1px $lg_border_color;
+  padding: 0 0 10px 10px;
+}
+
 .LC_AboutMe_Image {
   float:left;
   margin-right:10px;
@@ -6947,11 +6951,12 @@
     unless ($outerwidth) { $outerwidth='520px'; }
     unless ($width) { $width='500px'; }
     unless ($height) { $height='200px'; }
-    my $div_id;
+    my ($table_id,$div_id);
     if ($id ne '') {
-        $div_id = " id='$id'";
+        $table_id = " id='table_$id'";
+        $div_id = " id='div_$id'";
     }
-    return "<table style='width: $outerwidth; border: 1px solid black;'><tr><td style='width: $width;' bgcolor='#FFFFFF'><div style='overflow:auto; width:$width; height: $height;'$div_id>";
+    return "<table style='width: $outerwidth; border: 1px solid none;'$table_id><tr><td style='width: $width;' bgcolor='#FFFFFF'><div style='overflow:auto; width:$width; height: $height;'$div_id>";
 }
 
 sub end_scrollbox {


More information about the LON-CAPA-cvs mailing list