[LON-CAPA-cvs] cvs: loncom(bz6209) /interface lonsyllabus.pm lontemplate.pm
faziophi
faziophi@source.lon-capa.org
Mon, 15 Feb 2010 20:28:51 -0000
This is a MIME encoded message
--faziophi1266265731
Content-Type: text/plain
faziophi Mon Feb 15 20:28:51 2010 EDT
Modified files: (Branch: bz6209)
/loncom/interface lonsyllabus.pm lontemplate.pm
Log:
Work-in-progress commit for bug 6209.
Features the beginnings of a jQuery-based interface that meshes
with the old interface for the time being. There are a lot of things
to be prettied and improved, but this is a good stopping place for now.
--faziophi1266265731
Content-Type: text/plain
Content-Disposition: attachment; filename="faziophi-20100215202851.txt"
Index: loncom/interface/lonsyllabus.pm
diff -u loncom/interface/lonsyllabus.pm:1.106.2.2 loncom/interface/lonsyllabus.pm:1.106.2.3
--- loncom/interface/lonsyllabus.pm:1.106.2.2 Mon Feb 15 16:05:32 2010
+++ loncom/interface/lonsyllabus.pm Mon Feb 15 20:28:51 2010
@@ -1,7 +1,7 @@
# The LearningOnline Network
# Syllabus
#
-# $Id: lonsyllabus.pm,v 1.106.2.2 2010/02/15 16:05:32 faziophi Exp $
+# $Id: lonsyllabus.pm,v 1.106.2.3 2010/02/15 20:28:51 faziophi Exp $
#
# Copyright Michigan State University Board of Trustees
#
@@ -147,6 +147,102 @@
ENDSCRIPT
}
+ $js .= <<'ENDSCRIPT';
+
+<style type="text/css">
+ .LC_Sortable ul { list-style-type: none; margin: 0px; padding: 0px}
+ .LC_Sortable li { list-style-type: none; margin: 0px 5px 5px 5px; padding: 5px; padding-left: 1.5em; width: 175px; font-size:90% }
+ .LC_Sortable li span { float: left; margin-left: -1.5em; }
+ .LC_EllipseOverflow { overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; }
+ #scrollable-fields-container {float: left; background-color: white; width: 235px; border: 1px solid grey; margin: 0px}
+ #syllabus-fields {position:relative; top: 0;}
+ #syllabus-fields-container {padding: 0 0 0 0}
+ #syllabus-content {margin-left: 245px}
+</style>
+
+<script type="text/javascript">
+ // public domain code to emulate text-overflow:ellipsis in Firefox using jQuery
+ (function($) {
+ $.fn.ellipsis = function(enableUpdating){
+ var s = document.documentElement.style;
+ if (!('textOverflow' in s || 'OTextOverflow' in s)) {
+ return this.each(function(){
+ var el = $(this);
+ if(el.css("overflow") == "hidden"){
+ var originalText = el.html();
+ var w = el.width();
+
+ var t = $(this.cloneNode(true)).hide().css({
+ 'position': 'absolute',
+ 'width': 'auto',
+ 'overflow': 'visible',
+ 'max-width': 'inherit'
+ });
+ el.after(t);
+
+ var text = originalText;
+ while(text.length > 0 && t.width() > el.width()){
+ text = text.substr(0, text.length - 1);
+ t.html(text + "...");
+ }
+ el.html(t.html());
+
+ t.remove();
+
+ if(enableUpdating == true){
+ var oldW = el.width();
+ setInterval(function(){
+ if(el.width() != oldW){
+ oldW = el.width();
+ el.html(originalText);
+ el.ellipsis();
+ }
+ }, 200);
+ }
+ }
+ });
+ } else return this;
+ };
+ })(jQuery);
+
+
+ jQuery(document).ready(function() {
+ jQuery('.LC_EllipseOverflow').ellipsis();
+ jQuery('#syllabus-fields').sortable({
+ revert: true,
+ start: function(event, ui) {
+ jQuery(ui.item).css('font-style', 'italic');
+ },
+ stop: function(event, ui) {
+ var order = [];
+ jQuery(ui.item).parent().children('li').each(function() {
+ var id = /title-([0-9_]+)/i.exec(jQuery(this).attr('id'));
+ order.push(id[1]);
+ });
+ }
+ });
+ jQuery('#syllabus-fields li').click(function() {
+ jQuery(this).parent().children('li').removeClass('ui-state-highlight');
+ jQuery(this).addClass('ui-state-highlight');
+ var id = /title-([0-9_]+)/i.exec(jQuery(this).attr('id'));
+ jQuery('#syllabus-form .LC_Box').hide();
+ jQuery('#box-'+id[1]).show();
+ });
+ jQuery('#syllabus-fields ui, li').disableSelection();
+ jQuery('#syllabus-fields-container').height('500px');
+ jQuery('#syllabus-fields-container').css('overflow-x', 'hidden');
+ jQuery('#syllabus-fields-container').css('overflow-y', 'auto');
+ jQuery('#syllabus-fields-container').css('position', 'relative');
+ jQuery('#syllabus-fields').css('position', 'relative');
+ jQuery('#syllabus-fields').css('top', '0px');
+ jQuery('#syllabus-fields').css('display','block');
+ jQuery('#syllabus-fields-container').scroll(function() {
+ jQuery('#syllabus-fields').sortable('refreshPositions');
+ });
+ jQuery('#syllabus-form .LC_Box').hide();
+ });
+</script>
+ENDSCRIPT
my $start_page =
&Apache::loncommon::start_page("Syllabus", $rss_link.$js,
{'function' => undef,
@@ -195,14 +291,14 @@
$r->print("Flushed syllabus DB file.<br />");
$r->print("Syllabus conflict: ".$syllabus{'properties.v2_conflict'}."<br />");
}
- $r->print("Existing fields: ".$syllabus{'data.fields'}."<br />");
- $r->print("Old-new map: ".$syllabus{'data.old_new_map'}."<br />");
- $r->print("Deleted fields: ".$syllabus{'data.deleted_fields'}."<br />");
+ #$r->print("Existing fields: ".$syllabus{'data.fields'}."<br />");
+ #$r->print("Old-new map: ".$syllabus{'data.old_new_map'}."<br />");
+ #$r->print("Deleted fields: ".$syllabus{'data.deleted_fields'}."<br />");
if (!exists($syllabus{'data.fields'})) {
# convert existing 2.x data to new DB fields
# which become new primary data source for document
%data = %{convert_from_v2($r, \%syllabus, \%syllabusfields, 0)};
- $r->print("New fields order: ".$data{'data.fields'}."<br />");
+ #$r->print("New fields order: ".$data{'data.fields'}."<br />");
&Apache::lonnet::put('syllabus',\%data,$cdom,$cnum);
} elsif ( !exists($syllabus{'properties.v2_converted'}) &&
exists($syllabus{'uploaded.lastmodified'}) &&
@@ -244,12 +340,12 @@
#do not delete if file in v2 conversion mode
if (exists($data{'data.field.'.$field}) &&
!exists($data{'properties.v2_converted'})) {
- $r->print("Field '$field' can be deleted.<br />");
+ #$r->print("Field '$field' can be deleted.<br />");
# linearly parse "data.fields" and remove it
for (my $i = 0; $i < length(@fields); $i++) {
if ($fields[$i] eq $field) {
splice(@fields, $i, 1);
- $r->print("Removed entry $i from 'data.fields'<br />");
+ #$r->print("Removed entry $i from 'data.fields'<br />");
}
}
# if "data.deleted" does not exist, create it
@@ -286,7 +382,7 @@
if (exists($data{'data.field.'.$field}) &&
!exists($data{'properties.v2_converted'})) {
#sanitize HTML content
- $r->print("Rename -- field found.<br />");
+ #$r->print("Rename -- field found.<br />");
my %db_entry = %{thaw($data{'data.field.'.$field})};
$new_title = &Apache::lonfeedback::clear_out_html($new_title, 1);
$db_entry{title} = $new_title;
@@ -301,7 +397,7 @@
my %field_hash;
# only update a field if it already exists!
if (exists($data{'data.field.'.$syl_field})) {
- $r->print("Creating/updated field ".$syl_field."<br />");
+ #$r->print("Creating/updated field ".$syl_field."<br />");
%field_hash = exists($data{'data.field.'.$syl_field}) ?
%{thaw($data{'data.field.'.$syl_field})} : ();
$type = exists($field_hash{type}) ? $field_hash{type} : TYPE_TEXT_HTML;
@@ -359,9 +455,9 @@
#2.x compatibility: write to old fields with new mapped fields
my %old_new_map = %{thaw($data{'data.old_new_map'})};
foreach my $old_field (keys(%old_new_map)) {
- $r->print("Looking for: ".$old_field." at ".$old_new_map{$old_field}."<br />");
+ #$r->print("Looking for: ".$old_field." at ".$old_new_map{$old_field}."<br />");
if (exists($data{'data.field.'.$old_new_map{$old_field}})) {
- $r->print("updating old field ".$old_field."<br />");
+ #$r->print("updating old field ".$old_field."<br />");
my %new_field = %{thaw($data{'data.field.'.$old_new_map{$old_field}})};
$data{$old_field} = $new_field{content};
}
@@ -514,17 +610,11 @@
my $day = &Apache::lonannounce::showday(time,2,
&Apache::lonannounce::readcalendar($cdom.'_'.$cnum));
if ($target ne 'tex') {
- if ($allowed) {
- &Apache::lontemplate::print_start_template($r,'RSS Feeds and Blogs','LC_Box');
- $r->print(&Apache::lonrss::advertisefeeds($cnum,$cdom,$forceedit));
- my $editurl= &Apache::lonnet::absolute_url().'/adm/'.$cdom.'/'.$cnum.'/_rss.html';
- $r->print( '<a href="'.$editurl.'">'.&mt('New RSS Feed or Blog').'</a>');
- &Apache::lontemplate::print_end_template($r);
- } elsif (&Apache::lonrss::advertisefeeds($cnum,$cdom) ne '') {
- &Apache::lontemplate::print_start_template($r,'RSS Feeds and Blogs','LC_Box');
- $r->print(&Apache::lonrss::advertisefeeds($cnum,$cdom,$forceedit));
- &Apache::lontemplate::print_end_template($r);
+ if (($syllabus{'uploaded.lastmodified'}) || ($allowed)) {
+ $r->print("<br />");
+ &print_field_sortable($r, \%data, $target, $allowed, Apache::lontemplate->RICH_TEXT_DETECT_HTML);
}
+ $r->print("<div id='syllabus-content'>\n");
} else {
$r->print(&Apache::lonxml::xmlparse($r,'tex',$day));
@@ -533,7 +623,7 @@
# ---------------------------------------------------------------- Get syllabus
if (($syllabus{'uploaded.lastmodified'}) || ($allowed)) {
if ($allowed) {
- $r->print('<form method="post" action="">'.
+ $r->print('<form id="syllabus-form" method="post" action="">'.
'<input type="hidden" name="forceedit" value="edit" />');
}
my @htmlids=();
@@ -584,6 +674,18 @@
$r->print('</form>'.
&Apache::lonhtmlcommon::htmlareaselectactive(@htmlids));
}
+ if ($target ne 'tex') {$r->print('</div><p style="clear:both"> </p>');}
+ if ($allowed) {
+ &Apache::lontemplate::print_start_template($r,'RSS Feeds and Blogs','LC_Box');
+ $r->print(&Apache::lonrss::advertisefeeds($cnum,$cdom,$forceedit));
+ my $editurl= &Apache::lonnet::absolute_url().'/adm/'.$cdom.'/'.$cnum.'/_rss.html';
+ $r->print( '<a href="'.$editurl.'">'.&mt('New RSS Feed or Blog').'</a>');
+ &Apache::lontemplate::print_end_template($r);
+ } elsif (&Apache::lonrss::advertisefeeds($cnum,$cdom) ne '') {
+ &Apache::lontemplate::print_start_template($r,'RSS Feeds and Blogs','LC_Box');
+ $r->print(&Apache::lonrss::advertisefeeds($cnum,$cdom,$forceedit));
+ &Apache::lontemplate::print_end_template($r);
+ }
} else {
if ($target ne 'tex') {$r->print('<p>');} else {$r->print('\par ');}
$r->print(&mt('No syllabus information provided.'));
@@ -602,6 +704,25 @@
return OK;
}
+sub print_field_sortable {
+ my ($r, $data_ref, $target, $allowed, $default_rich_text, $group) = @_;
+ my %data = %{$data_ref};
+ my @fields = @{thaw($data{'data.fields'})};
+ $r->print("<div id='scrollable-fields-container'>
+<!--<div id='syllabus-fields-up' class='ui-state-default' style='text-align:center'>Up</div>-->
+<div id='syllabus-fields-container'>
+<ui id='syllabus-fields' class='LC_Sortable LC_SyllabusFields'>\n");
+ foreach my $key (@fields) {
+ my %field = %{thaw($data{'data.field.'.$key})};
+ $r->print("<li id='title-$key' class='ui-state-default LC_EllipseOverflow' title='$field{title}'><span class='ui-icon ui-icon-arrowthick-2-n-s'></span>$field{title}</li>\n");
+ }
+ $r->print("
+</ui>
+</div>
+<!--<div id='syllabus-fields-down' class='ui-state-default' style='text-align:center'>Down</div>-->
+</div>\n");
+}
+
sub print_template_new_fields {
my ($r, $data_ref, $target, $allowed, $default_rich_text, $custom_handlers_ref, $group) = @_;
my @html_ids = ();
@@ -631,7 +752,7 @@
$message=&Apache::lontexconvert::msgtexconverted($message);
if ($target ne 'tex') {
#output of syllabusfields will be generated here.
- &Apache::lontemplate::print_start_template($r,$title,'LC_Box');
+ &Apache::lontemplate::print_start_template($r,$title,'LC_Box', 'box-'.$key);
$r->print($message);
if ($allowed) {
$r->print("<br /><div>");
Index: loncom/interface/lontemplate.pm
diff -u loncom/interface/lontemplate.pm:1.43 loncom/interface/lontemplate.pm:1.43.2.1
--- loncom/interface/lontemplate.pm:1.43 Sun Jan 31 06:03:55 2010
+++ loncom/interface/lontemplate.pm Mon Feb 15 20:28:51 2010
@@ -1,7 +1,7 @@
# The LearningOnline Network
# "Template" Functions to generate html output
#
-# $Id: lontemplate.pm,v 1.43 2010/01/31 06:03:55 faziophi Exp $
+# $Id: lontemplate.pm,v 1.43.2.1 2010/02/15 20:28:51 faziophi Exp $
#
# Copyright Michigan State University Board of Trustees
#
@@ -114,9 +114,12 @@
}
sub print_start_template {
- my ($r,$topic,$boxclass) = @_;
- $r->print('<div class="'.$boxclass.'">');
- $r->print('<h4 class="LC_hcell">'.$topic.'</h4>');
+ my ($r,$topic,$boxclass, $id) = @_;
+ $r->print('<div class="'.$boxclass.'"');
+ if ($id) {
+ $r->print(' id="'.$id.'"');
+ }
+ $r->print('><h4 class="LC_hcell">'.$topic.'</h4>');
}
sub print_end_template {
--faziophi1266265731--