--- loncom/interface/lonhtmlcommon.pm 2012/04/18 14:13:29 1.310 +++ loncom/interface/lonhtmlcommon.pm 2012/11/27 23:45:08 1.332 @@ -1,7 +1,7 @@ # The LearningOnline Network with CAPA # a pile of common html routines # -# $Id: lonhtmlcommon.pm,v 1.310 2012/04/18 14:13:29 raeburn Exp $ +# $Id: lonhtmlcommon.pm,v 1.332 2012/11/27 23:45:08 raeburn Exp $ # # Copyright Michigan State University Board of Trustees # @@ -61,7 +61,7 @@ use Time::HiRes; use Apache::lonlocal; use Apache::lonnet; use HTML::Entities(); -use LONCAPA; +use LONCAPA qw(:DEFAULT :match); sub java_not_enabled { return "\n".'<span class="LC_error">'. @@ -95,7 +95,7 @@ sub direct_parm_link { $filter=&entity_encode($filter); $part=&entity_encode($part); if (($symb) && (&Apache::lonnet::allowed('opa')) && ($target ne 'tex')) { - return "<a target='_top' href='/adm/parmset?symb=$symb&filter=$filter&part=$part'><span class='LC_setting'>$linktext</span></a>"; + return "<a target='_top' href='/adm/parmset?symb=$symb&filter=$filter&part=$part'><span class='LC_setting'>$linktext</span></a>"; } else { return $linktext; } @@ -209,9 +209,10 @@ dependencies for a web page uploaded dir =cut sub dependencycheck_js { - my ($symb,$title) = @_; + my ($symb,$title,$url) = @_; my $link = '/adm/dependencies?symb='.&HTML::Entities::encode($symb,'<>&"'). - '&title='.&HTML::Entities::encode($title,'<>&"'); + '&title='.&HTML::Entities::encode($title,'<>&"'). + '&url='.&HTML::Entities::encode($url,'<>&"'); return <<ENDJS; <script type="text/javascript"> // <![CDATA[ @@ -951,21 +952,8 @@ Inputs =item $r Apache request -=item $title The title of the progress window - -=item $heading A description (usually 1 line) of the process being initiated. - =item $number_to_do The total number of items being processed. -=item $type Either 'popup' or 'inline' (popup is assumed if nothing is - specified) - -=item $width Specify the width in charaters of the input field. - -=item $formname Only useful in the inline case, if a form already exists, this needs to be used and specfiy the name of the form, otherwise the Progress line will be created in a new form of it's own - -=item $inputname Only useful in the inline case, if a form and an input of type text exists, use this to specify the name of the input field - =back Returns a hash containing the progress state data structure. @@ -1113,6 +1101,7 @@ sub Close_PrgWin { undef(%$prog_state); } + # ------------------------------------------------------- Puts directory header sub crumbs { @@ -1223,6 +1212,10 @@ ENDEDITOR <link rel="stylesheet" type="text/css" href="/adm/jpicker/css/jPicker-1.1.6.min.css" /> <script type="text/javascript" src="/adm/countdown/js/jquery.countdown.js"></script> <link rel="stylesheet" type="text/css" href="/adm/countdown/css/jquery.countdown.css" /> + +<script type="text/javascript" src="/adm/spellchecker/js/jquery.spellchecker.min.js"></script> +<link rel="stylesheet" type="text/css" href="/adm/spellchecker/css/spellchecker.css" /> + ENDJQUERY return $s; } @@ -1238,6 +1231,17 @@ sub htmlarea_lang { return $lang; } +# return javacsript to activate elements of .colorchooser with jpicker: +# Caller is responsible for enclosing this in <script> tags: +# +sub color_picker { + return ' +$(document).ready(function(){ + $.fn.jPicker.defaults.images.clientPath="/adm/jpicker/images/"; + $(".colorchooser").jPicker({window: { position: {x: "screenCenter", y: "bottom"}}}); +});'; +} + # ----------------------------------------- Script to activate only some fields sub htmlareaselectactive { @@ -1351,12 +1355,12 @@ sub htmlareaselectactive { $(this).before("<div><a href=\"#\" id=\"LC_rt_"+id+"\" title=\"Enable rich text formatting (bold, italic, etc.)\" class=\"LC_enable_rt\"><b>Rich formatting »</b></a></div>"); $("#LC_rt_"+id).click(editorHandler); }); - $.fn.jPicker.defaults.images.clientPath="/adm/jpicker/images/"; - $(".colorchooser").jPicker(); }); '; + $output .= &color_picker; + # Code to put a due date countdown in 'duedatecountdown' span. # This is currently located in the breadcrumb headers. # note that the dueDateLayout is internatinoalized below. @@ -1383,7 +1387,9 @@ sub htmlareaselectactive { # is used to determine when the countdown timer turns red to warn the user # to think about submitting. - my $dueDateLayout = '<b>' . &mt('Due in: {dn} {dl} {hnn}{sep}{mnn}{sep}{snn} - Submit early!') . '</b>'; + my $dueDateLayout = &mt('Due in: {dn} {dl} {hnn}{sep}{mnn}{sep}{snn} [_1]',"<span id='submitearly'></span>"); + my $early = '- <b>'.&mt('Submit Early').'</b>'; + my $pastdue = '- <b>'.&mt('Past Due').'</b>'; $output .= <<JAVASCRIPT; var documentReadyTime; @@ -1395,6 +1401,12 @@ sub htmlareaselectactive { layout: "$dueDateLayout", onTick: function (periods) { var latencyEstimate = (documentReadyTime - clientTime) * 2; + if(\$.countdown.periodsToSeconds(periods) < (300 + latencyEstimate)) { + \$("#submitearly").html("$early"); + if (\$.countdown.periodsToSeconds(periods) < 1) { + \$("#submitearly").html("$pastdue"); + } + } if(\$.countdown.periodsToSeconds(periods) < (60 + latencyEstimate)) { \$(this).css("color", "red"); //Highlight last minute. } @@ -1402,6 +1414,40 @@ sub htmlareaselectactive { }); } }); + + /* This code describes the spellcheck options that will be used for + items with class 'spellchecked'. It is necessary for those objects' + to explicitly request checking (e.g. onblur is a nice event for that). + */ + \$(document).ready(function() { + \$(".spellchecked").spellchecker({ + url: "/ajax/spellcheck", + lang: "en", + engine: "pspell", + suggestionBoxPosition: "below", + innerDocument: true + }); + \$("textarea.spellchecked").spellchecker({ + url: "/ajax/spellcheck", + lang: "en", + engine: "pspell", + suggestionBoxPosition: "below", + innerDocument: true + }); + + }); + + /* the muli colored editor can generate spellcheck with language 'none' + to disable spellcheck as well + */ + function doSpellcheck(element, lang) { + if (lang != 'none') { + \$(element).spellchecker('option', {lang: lang}); + \$(element).spellchecker('check'); + } + } + + JAVASCRIPT if ($dragmath_prefix ne '') { $output .= ' @@ -1458,7 +1504,8 @@ sub show_return_link { unless ($env{'request.course.id'}) { return 0; } if ($env{'request.noversionuri'}=~m{^/priv/} || - $env{'request.uri'}=~m{^/~}) { return 1; } + $env{'request.uri'}=~m{^/priv/}) { return 1; } + return if ($env{'request.noversionuri'} eq '/adm/supplemental'); if (($env{'request.noversionuri'} =~ m{^/adm/(viewclasslist|navmaps)($|\?)}) || ($env{'request.noversionuri'} =~ m{^/adm/.*/aboutme($|\?)})) { @@ -1497,8 +1544,9 @@ sub set_due_date { # The code should correct for gross differences between the server # and client's time setting - my $js = " -<script type='text/javascript'> + return <<"END"; + +<script type="text/javascript"> //<![CDATA[ var serverDueDate = $duems; var serverTime = $now; @@ -1507,9 +1555,8 @@ var dueDate = new Date(serverDueDa //]]> </script> -"; - return $js; +END } ## # Sets the time at which the problem finished computing. @@ -1521,17 +1568,16 @@ var dueDate = new Date(serverDueDa sub set_compute_end_time { my $now = time()*1000; # Javascript times are in ms. - my $js = " -<script type='text/javascript'> + return <<"END"; + +<script type="text/javascript"> //<![CDATA[ serverTime = $now; clientTime = (new Date()).getTime(); //]]> </script> -"; - return $js; - +END } ############################################################ @@ -1581,7 +1627,8 @@ returns: nothing my %tools = (); sub breadcrumbs { - my ($component,$component_help,$menulink,$helplink,$css_class,$no_mt, $CourseBreadcrumbs) = @_; + my ($component,$component_help,$menulink,$helplink,$css_class,$no_mt, + $CourseBreadcrumbs) = @_; # $css_class ||= 'LC_breadcrumbs'; @@ -1605,6 +1652,14 @@ returns: nothing $description = $env{'course.'.$env{'request.course.id'}.'.description'}; $no_mt_descr = 1; + if ($env{'request.noversionuri'} =~ + m{^/public/($match_domain)/($match_courseid)/syllabus$}) { + unless (($env{'course.'.$env{'request.course.id'}.'.domain'} eq $1) && + ($env{'course.'.$env{'request.course.id'}.'.num'} eq $2)) { + $description = 'Menu'; + $no_mt_descr = 0; + } + } } $menulink = { href =>'/adm/menu', title =>'Go to main menu', @@ -1620,11 +1675,13 @@ returns: nothing } } my $links; - if ((&show_return_link) && (!$CourseBreadcrumbs)) { + if ((&show_return_link) && (!$CourseBreadcrumbs) && (ref($last) eq 'HASH')) { my $alttext = &mt('Go Back'); - $links=&htmltag( 'a',"<img src='/res/adm/pages/reload.png' border='0' style='vertical-align:middle;' alt='$alttext' />", + $links=&htmltag( 'a','<img src="/res/adm/pages/tolastloc.png" alt="'.$alttext.'" class="LC_icon" />', { href => '/adm/flip?postdata=return:', - title => &mt("Back to most recent content resource") }); + title => &mt('Back to most recent content resource'), + class => 'LC_menubuttons_link', + }); $links=&htmltag('li',$links); } $links.= join "", @@ -1653,10 +1710,10 @@ returns: nothing # last breadcrumb is the first order heading of a page # for course breadcrumbs it's just bold - $links .= &htmltag( 'li', htmltag($CourseBreadcrumbs ? 'b' : 'h1', - $lasttext), {title => $lasttext}); - - $links .= '<li> <span id="duedatecountdown"></span></li>'; + if ($lasttext ne '') { + $links .= &htmltag( 'li', htmltag($CourseBreadcrumbs ? 'b' : 'h1', + $lasttext), {title => $lasttext}); + } my $icons = ''; $faq = $last->{'faq'} if (exists($last->{'faq'})); @@ -1677,11 +1734,12 @@ returns: nothing # - - unless ($CourseBreadcrumbs) { - $links = &htmltag('ol', $links, { id => "LC_MenuBreadcrumbs" }); - } else { - $links = &htmltag('ul', $links, { class => "LC_CourseBreadcrumbs" }); + if ($links ne '') { + unless ($CourseBreadcrumbs) { + $links = &htmltag('ol', $links, { id => "LC_MenuBreadcrumbs" }); + } else { + $links = &htmltag('ul', $links, { class => "LC_CourseBreadcrumbs" }); + } } @@ -1735,7 +1793,7 @@ Currently there are 3 possible values fo left of breadcrumbs line =item tools -right of breadcrumbs line +remaining items in right of breadcrumbs line =item advtools advanced tools shown in a separate box below breadcrumbs line @@ -1825,6 +1883,80 @@ returns: nothing } # End of scope for @Crumbs +sub docs_breadcrumbs { + my ($allowed,$crstype,$contenteditor,$title,$precleared)=@_; + my ($folderpath,@folders); + if ($env{'form.pagepath'}) { + @folders = split('&',$env{'form.pagepath'}); + } else { + @folders = split('&',$env{'form.folderpath'}); + } + my $plain=''; + my ($randompick,$isencrypted,$ishidden,$is_random_order) = (-1,0,0,0); + my @docs_crumbs; + while (@folders) { + my $folder=shift(@folders); + my $foldername=shift(@folders); + if ($folderpath) {$folderpath.='&';} + $folderpath.=$folder.'&'.$foldername; + my $url; + if ($allowed) { + $url = '/adm/coursedocs?folderpath='; + } else { + $url = '/adm/supplemental?folderpath='; + } + $url .= &escape($folderpath); + my $name=&unescape($foldername); +# each of randompick number, hidden, encrypted, random order are +# appended with ":"s to the foldername + $name=~s/\:(\d*)\:(\w*)\:(\w*):(\d*)$//; + if ($contenteditor) { + if ($1 ne '') { + $randompick=$1; + } else { + $randompick=-1; + } + if ($2) { $ishidden=1; } + if ($3) { $isencrypted=1; } + if ($4 ne '') { $is_random_order = 1; } + } + if ($folder eq 'supplemental') { + $name = &mt('Supplemental '.$crstype.' Contents'); + } + if ($contenteditor) { + $plain.=$name.' > '; + } + push(@docs_crumbs, + {'href' => $url, + 'title' => $name, + 'text' => $name, + 'no_mt' => 1, + }); + } + if (wantarray) { + unless ($precleared) { + &clear_breadcrumbs(); + } + &add_breadcrumb(@docs_crumbs); + if ($title) { + &add_breadcrumb({text => $title}); + } + if ($contenteditor) { + $plain=~s/\>\;\s*$//; + } + my $menulink = 0; + if (!$allowed && !$contenteditor) { + $menulink = 1; + } + return (&breadcrumbs(undef,undef,$menulink,'nohelp',undef,undef, + $contenteditor), + $randompick,$ishidden,$isencrypted,$plain, + $is_random_order); + } else { + return \@docs_crumbs; + } +} + ############################################################ ############################################################ @@ -1885,15 +2017,19 @@ returns: nothing my @row_count; sub start_pick_box { - my ($css_class) = @_; + my ($css_class,$id) = @_; if (defined($css_class)) { $css_class = 'class="'.$css_class.'"'; } else { $css_class= 'class="LC_pick_box"'; } + my $table_id; + if (defined($id)) { + $table_id = ' id="'.$id.'"'; + } unshift(@row_count,0); my $output = <<"END"; - <table $css_class> + <table $css_class $table_id> END return $output; } @@ -2225,15 +2361,19 @@ sub resource_info_box { # 1. number to display. # If input for number is empty only the title will be displayed. # 2. title text to display. +# 3. optional id for the <div> # Outputs - a scalar containing html mark-up for the div. sub topic_bar { - my ($num,$title) = @_; + my ($num,$title,$id) = @_; my $number = ''; if ($num ne '') { $number = '<span>'.$num.'</span>'; } - return '<div class="LC_topic_bar">'.$number.$title.'</div>'; + if ($id ne '') { + $id = 'id="'.$id.'"'; + } + return '<div class="LC_topic_bar" '.$id.'>'.$number.$title.'</div>'; } ############################################## @@ -2695,6 +2835,327 @@ ENDSCRIPT } ############################################## +############################################## + +sub resize_scrollbox_js { + my ($context,$tabidstr) = @_; + my (%names,$paddingwfrac,$offsetwfrac,$offsetv,$minw,$minv); + if ($context eq 'docs') { + %names = ( + boxw => 'contenteditor', + item => 'contentlist', + header => 'uploadfileresult', + scroll => 'contentscroll', + boxh => 'contenteditor', + ); + $paddingwfrac = 0.09; + $offsetwfrac = 0.015; + $offsetv = 20; + $minw = 250; + $minv = 200; + } elsif ($context eq 'params') { + %names = ( + boxw => 'parameditor', + item => 'mapmenuinner', + header => 'parmstep1', + scroll => 'mapmenuscroll', + boxh => 'parmlevel', + ); + $paddingwfrac = 0.2; + $offsetwfrac = 0.015; + $offsetv = 80; + $minw = 100; + $minv = 100; + } + my $viewport_js = &Apache::loncommon::viewport_geometry_js(); + my $output = ' + +window.onresize=callResize; + +'; + if ($context eq 'docs') { + $output .= ' +var activeTab; +'; + } + $output .= <<"FIRST"; + +$viewport_js + +function resize_scrollbox(scrollboxname,chkw,chkh) { + var scrollboxid = 'div_'+scrollboxname; + var scrolltableid = 'table_'+scrollboxname; + var scrollbox; + var scrolltable; + + if (document.getElementById("$names{'boxw'}") == 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(); + +FIRST + if ($context eq 'docs') { + $output .= " + var alltabs = ['$tabidstr']; +"; + } elsif ($context eq 'params') { + $output .= " + if (document.getElementById('$names{'boxh'}') == null) { + return; + } +"; + } + $output .= <<"SECOND"; + var listwchange; + if (chkw == 1) { + var boxw = document.getElementById("$names{'boxw'}").offsetWidth; + var itemw; + var itemid = document.getElementById("$names{'item'}"); + if (itemid != null) { + itemw = itemid.offsetWidth; + } + var itemwstart = itemw; + + var scrollboxw = scrollbox.offsetWidth; + var scrollboxscrollw = scrollbox.scrollWidth; + + var offsetw = parseInt(vpw * $offsetwfrac); + var paddingw = parseInt(vpw * $paddingwfrac); + + var minscrollboxw = $minw; + var maxcolw = 0; +SECOND + if ($context eq 'docs') { + $output .= <<"DOCSONE"; + var actabw = 0; + for (var i=0; i<alltabs.length; i++) { + if (activeTab == alltabs[i]) { + actabw = document.getElementById(alltabs[i]).offsetWidth; + if (actabw > maxcolw) { + maxcolw = actabw; + } + } 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 > maxcolw) { + maxcolw = tabw; + } + } + } + } +DOCSONE + } elsif ($context eq 'params') { + $output .= <<"PARAMSONE"; + var parmlevelrows = new Array(); + var mapmenucells = new Array(); + parmlevelrows = document.getElementById("$names{'boxh'}").rows; + var numrows = parmlevelrows.length; + if (numrows > 1) { + mapmenucells = parmlevelrows[2].getElementsByTagName('td'); + } + maxcolw = mapmenucells[0].offsetWidth; +PARAMSONE + } + $output .= <<"THIRD"; + if (maxcolw > 0) { + var newscrollboxw; + if (maxcolw+paddingw+scrollboxscrollw<boxw) { + newscrollboxw = boxw-paddingw-maxcolw; + if (newscrollboxw < minscrollboxw) { + newscrollboxw = minscrollboxw; + } + scrollbox.style.width = newscrollboxw+"px"; + if (newscrollboxw != scrollboxw) { + var newitemw = newscrollboxw-offsetw; + itemid.style.width = newitemw+"px"; + } + } else { + newscrollboxw = boxw-paddingw-maxcolw; + if (newscrollboxw < minscrollboxw) { + newscrollboxw = minscrollboxw; + } + scrollbox.style.width = newscrollboxw+"px"; + if (newscrollboxw != scrollboxw) { + var newitemw = newscrollboxw-offsetw; + itemid.style.width = newitemw+"px"; + } + } + + if (newscrollboxw != scrollboxw) { + var newscrolltablew = newscrollboxw+offsetw; + scrolltable.style.width = newscrolltablew+"px"; + } + } + + if (itemid.offsetWidth != itemwstart) { + 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 = 0; + if (document.getElementById('dccid') != null) { + dccidheight = document.getElementById('dccid').offsetHeight; + } + var headerheight = 0; + if (document.getElementById("$names{'header'}") != null) { + headerheight = document.getElementById("$names{'header'}").offsetHeight; + } + var tabbedheight = document.getElementById("tabbededitor").offsetHeight; + var boxheight = document.getElementById("$names{'boxh'}").offsetHeight; + var freevspace = vph-(primaryheight+secondaryheight+crumbsheight+dccidheight+headerheight+tabbedheight+boxheight); + + var scrollboxheight = scrollbox.offsetHeight; + var scrollboxscrollheight = scrollbox.scrollHeight; + + var minvscrollbox = $minv; + var offsetv = $offsetv; + var newscrollboxheight; + if (freevspace < 0) { + newscrollboxheight = scrollboxheight+freevspace-offsetv; + if (newscrollboxheight < minvscrollbox) { + newscrollboxheight = minvscrollbox; + } + scrollbox.style.height = newscrollboxheight + "px"; + } else { + if (scrollboxscrollheight > scrollboxheight) { + if (freevspace > offsetv) { + newscrollboxheight = scrollboxheight+freevspace-offsetv; + if (newscrollboxheight < minvscrollbox) { + newscrollboxheight = minvscrollbox; + } + scrollbox.style.height = newscrollboxheight+"px"; + } + } + } + scrollboxheight = scrollbox.offsetHeight; + var itemh = document.getElementById("$names{'item'}").offsetHeight; + + if (scrollboxscrollheight <= scrollboxheight) { + if ((itemh+offsetv)<scrollboxheight) { + newscrollheight = itemh+offsetv; + scrollbox.style.height = newscrollheight+"px"; + } + } + } + return; +} + +function callResize() { + var timer; + clearTimeout(timer); + timer=setTimeout('resize_scrollbox("$names{'scroll'}","1","1")',500); +} + +THIRD + return $output; +} + +############################################## +############################################## + +sub javascript_jumpto_resource { + my $confirm_switch = &mt("Editing requires switching to the resource's home server.").'\n'. + &mt('Switch server?'); + return (<<ENDUTILITY) + +function go(url) { + if (url!='' && url!= null) { + currentURL = null; + currentSymb= null; + window.location.href=url; + } +} + +function need_switchserver(url) { + if (url!='' && url!= null) { + if (confirm("$confirm_switch")) { + go(url); + } + } + return; +} + +ENDUTILITY + +} + +sub jump_to_editres { + my ($cfile,$home,$switchserver,$forceedit,$forcereg,$symb,$folderpath, + $title,$idx,$suppurl) = @_; + my $jscall; + if ($switchserver) { + if ($home) { + $cfile = '/adm/switchserver?otherserver='.$home.'&role='. + &HTML::Entities::encode($env{'request.role'},'"<>&'); + if ($symb) { + $cfile .= '&symb='.&HTML::Entities::encode($symb,'"<>&'); + } elsif ($folderpath) { + $cfile .= '&folderpath='.&HTML::Entities::encode($folderpath,'"<>&'); + } + if ($forceedit) { + $cfile .= '&forceedit=1'; + } + if ($forcereg) { + $cfile .= '&register=1'; + } + $jscall = "need_switchserver('$cfile');"; + } + } else { + unless ($cfile =~ m{^/priv/}) { + if ($symb) { + $cfile .= (($cfile=~/\?/)?'&':'?')."symb=$symb"; + } elsif ($folderpath) { + $cfile .= (($cfile=~/\?/)?'&':'?'). + 'folderpath='.&HTML::Entities::encode(&escape($folderpath),'"<>&'); + if ($title) { + $cfile .= (($cfile=~/\?/)?'&':'?'). + 'title='.&HTML::Entities::encode(&escape($title),'"<>&'); + } + if ($idx) { + $cfile .= (($cfile=~/\?/)?'&':'?').'idx='.$idx; + } + if ($suppurl) { + $cfile .= (($cfile=~/\?/)?'&':'?'). + 'suppurl='.&HTML::Entities::encode(&escape($suppurl)); + } + } + if ($forceedit) { + $cfile .= (($cfile=~/\?/)?'&':'?').'forceedit=1'; + } + if ($forcereg) { + $cfile .= (($cfile=~/\?/)?'&':'?').'register=1'; + } + } + $jscall = "go('$cfile')"; + } + return $jscall; +} + +############################################## ############################################## # javascript_valid_email