[BACK]Return to lonhtmlcommon.pm CVS log [TXT] [DIR] Up to [LON-CAPA] / loncom / interface

Diff for /loncom/interface/lonhtmlcommon.pm between versions 1.390 and 1.391

version 1.390, 2017/11/16 13:31:29 version 1.391, 2017/12/18 16:36:34
Line 1344  $(document).ready(function(){ Line 1344  $(document).ready(function(){
 });';  });';
 }  }
   
   sub countdown {
   
       # 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.
       # Here document is used to support the substitution into the javascript below.
       # ..which unforunately necessitates escaping the $'s in the javascript.
       # There are several times of importance
       #
       # serverDueDate -  The absolute time at which the problem expires.
       # serverTime    -  The server's time when the problem finished computing.
       # clientTime    -  The client's time...as close to serverTime as possible.
       #                  The clientTime will be slightly later due to
       #                  1. The latency between problem computation and
       #                     the first network action.
       #                  2. The time required between the page load-start and the actual
       #                     initial javascript execution that got clientTime.
       # These are used as follows:
       #   The difference between clientTime and serverTime are used to
       #   correct for differences in clock settings between the browser's system and the
       #   server's.
       #
       #   The difference between clientTime and the time at which the ready() method
       #   starts executing is used to estimate latencies for page load and submission.
       #   Since this is an estimate, it is doubled.  The latency estimate + one minute
       #   is used to determine when the countdown timer turns red to warn the user
       #   to think about submitting.
   
   
       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>';
       return <<"JAVASCRIPT";
   
       var documentReadyTime;
   
   \$(document).ready(function() {
      if (typeof(dueDate) != "undefined") {
          documentReadyTime = (new Date()).getTime();
         \$("#duedatecountdown").countdown({until: dueDate, compact: true,
            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.
               }
            }
         });
      }
   });
   
   JAVASCRIPT
   
   }
   
 # ----------------------------------------- Script to activate only some fields  # ----------------------------------------- Script to activate only some fields
   
 sub htmlareaselectactive {  sub htmlareaselectactive {
Line 1567  sub htmlareaselectactive { Line 1629  sub htmlareaselectactive {
   
  });   });
 ';  ';
     $output .= &color_picker;      $output .= &color_picker();
   
     # Code to put a due date countdown in 'duedatecountdown' span.      $output .= &countdown();
     # This is currently located in the breadcrumb headers.  
     # note that the dueDateLayout is internatinoalized below.  
     # Here document is used to support the substitution into the javascript below.  
     # ..which unforunately necessitates escaping the $'s in the javascript.  
     # There are several times of importance  
     #  
     # serverDueDate -  The absolute time at which the problem expires.  
     # serverTime    -  The server's time when the problem finished computing.  
     # clientTime    -  The client's time...as close to serverTime as possible.  
     #                  The clientTime will be slightly later due to  
     #                  1. The latency between problem computation and   
     #                     the first network action.  
     #                  2. The time required between the page load-start and the actual  
     #                     initial javascript execution that got clientTime.  
     # These are used as follows:  
     #   The difference between clientTime and serverTime are used to   
     #   correct for differences in clock settings between the browser's system and the  
     #   server's.  
     #  
     #   The difference between clientTime and the time at which the ready() method  
     #   starts executing is used to estimate latencies for page load and submission.  
     #   Since this is an estimate, it is doubled.  The latency estimate + one minute  
     #   is used to determine when the countdown timer turns red to warn the user  
     #   to think about submitting.  
   
     my $dueDateLayout = &mt('Due in: {dn} {dl} {hnn}{sep}{mnn}{sep}{snn} [_1]',      $output .= <<"JAVASCRIPT";
                             "<span id='submitearly'></span>");  
     my $early = '- <b>'.&mt('Submit Early').'</b>';  
     my $pastdue = '- <b>'.&mt('Past Due').'</b>';  
     $output .= <<JAVASCRIPT;  
   
     var documentReadyTime;  
   
 \$(document).ready(function() {  
    if (typeof(dueDate) != "undefined") {  
        documentReadyTime = (new Date()).getTime();  
       \$("#duedatecountdown").countdown({until: dueDate, compact: true,   
          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.  
             }  
          }  
       });  
    }  
 });  
   
     /* This code describes the spellcheck options that will be used for      /* This code describes the spellcheck options that will be used for
        items with class 'spellchecked'.  It is necessary for those objects'         items with class 'spellchecked'.  It is necessary for those objects'
Removed from v.1.390  
changed lines
  Added in v.1.391

FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>