Explorar el Código

Adding the course/access per course timeline (not finished yet)

jmontoya hace 13 años
padre
commit
3cc034fce3

+ 46 - 2
main/auth/my_progress.php

@@ -23,9 +23,14 @@ $nameTools = get_lang('MyProgress');
 api_block_anonymous_users();
 
 $htmlHeadXtra[] = api_get_jquery_ui_js();
+$htmlHeadXtra[] = api_get_js('jquery.timelinr-0.9.5.js');
+
 $htmlHeadXtra[] = '
 <script language="javascript">
 $(function() {
+    
+    $().timelinr();
+
     $(".dialog").dialog("destroy");        
     $(".dialog").dialog({
             autoOpen: false,
@@ -45,16 +50,55 @@ $(function() {
 });
 </script>';
 
-$content = Tracking::show_user_progress(api_get_user_id());
+
+
+require_once api_get_path(SYS_CODE_PATH).'mySpace/myspace.lib.php';
+
+
+
+$user_id = api_get_user_id();
+
+// Code to 
+$course_user_list = CourseManager::get_courses_list_by_user_id($user_id);
+$dates = $issues = '';
+foreach($course_user_list as $course) {    
+    $items = MySpace::get_connections_to_course($user_id, $course['code']);
+    foreach($items as $result) {
+        $login = $result['login']; 
+        $course_info = api_get_course_info($course['code']);
+        $course_image = '<img src="'.$course_info['course_image'].'">';
+        $dates .= '<li><a href="#'.$login.'">'.  api_get_utc_datetime($login).'</a></li>';
+        $issues .= '<li id ="'.$login.'"><div class="row"><div class="span1">'.$course_image.'</div>
+                <div class="span3">Has ingresado al curso <b>'.$course['code'].'</b> el
+            '.  api_convert_and_format_date($login, DATE_FORMAT_LONG).'</div></li>';
+    }    
+}
+
+$content .= Tracking::show_user_progress(api_get_user_id());
 if (!empty($content)) {
     $content .= '<br /><br />';
 }
+$content .= '<div class="span12"><h2>'.get_lang('Timeline').'</h2></span>';
+
+$content .= '<div id="timeline">
+   <ul id="dates">
+    '.$dates.'  
+    </ul>
+   <ul id="issues">
+      '.$issues.'
+   </ul>
+   <a href="#" id="next">+</a> <!-- optional -->
+   <a href="#" id="prev">-</a> <!-- optional -->
+   </div>';
+
 $content .= Tracking::show_course_detail(api_get_user_id(), $_GET['course'], $_GET['session_id']);
 
 if (empty($content)) {
     $message = Display::return_message(get_lang('NoDataAvailable'), 'warning');
 }
-    
+
+
+
 $tpl = new Template($tool_name);
 
 //$tpl->assign('actions', $actions);

+ 64 - 0
main/css/base.css

@@ -3481,3 +3481,67 @@ a:active{
 .lt-ie7 #chatmain {
     display:none;
 }
+
+
+
+#timeline {
+    
+    background: url("dot.gif") repeat-x scroll left 45px;
+    height: 350px;
+    margin: 0px auto;
+    overflow: hidden;
+    position: relative;
+    width: 600px;
+}
+
+#dates {
+    
+    /* height: 60px; */
+    overflow: hidden;
+    width: 800px;
+}
+
+
+#dates .selected {
+    font-size: 22px;
+    font-weight: bold;
+    font-color: #E06B04;
+}
+
+#dates li {
+    background: url("biggerdot.png") no-repeat scroll center bottom transparent;
+    float: left;
+    font-size: 14px;
+    height: 50px;
+    list-style: none outside none;
+    text-align: center;
+    width: 130px;
+}
+
+#issues {
+    height: 350px;
+    overflow: hidden;
+    width: 800px;
+}
+
+#issues li {
+    float: left;
+    height: 350px;
+    list-style: none outside none;
+    width: 800px;
+}
+
+#issues li h3 {
+    color: #FFCC00;
+    font-size: 48px;
+    margin: 0px;
+    text-shadow: 1px 1px 2px #000000;
+}
+
+#issues li p {
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 22px;
+    margin-right: 70px;
+    text-shadow: 1px 1px 2px #000000;
+}

BIN
main/css/biggerdot.png


BIN
main/css/dot.gif


+ 215 - 0
main/inc/lib/javascript/jquery.timelinr-0.9.5.js

@@ -0,0 +1,215 @@
+/* ----------------------------------
+jQuery Timelinr 0.9.5
+tested with jQuery v1.6+
+
+Copyright 2011, CSSLab.cl
+Free under the MIT license.
+http://www.opensource.org/licenses/mit-license.php
+
+instructions: http://www.csslab.cl/2011/08/18/jquery-timelinr/
+---------------------------------- */
+
+jQuery.fn.timelinr = function(options){
+	// default plugin settings
+	settings = jQuery.extend({
+		orientation: 				'horizontal',		// value: horizontal | vertical, default to horizontal
+		containerDiv: 				'#timeline',		// value: any HTML tag or #id, default to #timeline
+		datesDiv: 					'#dates',			// value: any HTML tag or #id, default to #dates
+		datesSelectedClass: 		'selected',			// value: any class, default to selected
+		datesSpeed: 				'normal',			// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
+		issuesDiv: 					'#issues',			// value: any HTML tag or #id, default to #issues
+		issuesSelectedClass: 		'selected',			// value: any class, default to selected
+		issuesSpeed: 				'fast',				// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
+		issuesTransparency: 		0.2,				// value: integer between 0 and 1 (recommended), default to 0.2
+		issuesTransparencySpeed: 	500,				// value: integer between 100 and 1000 (recommended), default to 500 (normal)
+		prevButton: 				'#prev',			// value: any HTML tag or #id, default to #prev
+		nextButton: 				'#next',			// value: any HTML tag or #id, default to #next
+		arrowKeys: 					'false',			// value: true | false, default to false
+		startAt: 					1,					// value: integer, default to 1 (first)
+		autoPlay: 					'false',			// value: true | false, default to false
+		autoPlayDirection: 			'forward',			// value: forward | backward, default to forward
+		autoPlayPause: 				2000				// value: integer (1000 = 1 seg), default to 2000 (2segs)
+		
+	}, options);
+
+	$(function(){
+		// setting variables... many of them
+		var howManyDates = $(settings.datesDiv+' li').length;
+		var howManyIssues = $(settings.issuesDiv+' li').length;
+		var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
+		var currentIssue = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass);
+		var widthContainer = $(settings.containerDiv).width();
+		var heightContainer = $(settings.containerDiv).height();
+		var widthIssues = $(settings.issuesDiv).width();
+		var heightIssues = $(settings.issuesDiv).height();
+		var widthIssue = $(settings.issuesDiv+' li').width();
+		var heightIssue = $(settings.issuesDiv+' li').height();
+		var widthDates = $(settings.datesDiv).width();
+		var heightDates = $(settings.datesDiv).height();
+		var widthDate = $(settings.datesDiv+' li').width();
+		var heightDate = $(settings.datesDiv+' li').height();
+		
+		// set positions!
+		if(settings.orientation == 'horizontal') {	
+			$(settings.issuesDiv).width(widthIssue*howManyIssues);
+			$(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2);
+			var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
+		} else if(settings.orientation == 'vertical') {
+			$(settings.issuesDiv).height(heightIssue*howManyIssues);
+			$(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2);
+			var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
+		}
+		
+		$(settings.datesDiv+' a').click(function(event){
+			event.preventDefault();
+			// first vars
+			var whichIssue = $(this).text();
+			var currentIndex = $(this).parent().prevAll().length;
+
+			// moving the elements
+			if(settings.orientation == 'horizontal') {
+				$(settings.issuesDiv).animate({'marginLeft':-widthIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
+			} else if(settings.orientation == 'vertical') {
+				$(settings.issuesDiv).animate({'marginTop':-heightIssue*currentIndex},{queue:false, duration:settings.issuesSpeed});
+			}
+			$(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1);
+			
+			// now moving the dates
+			$(settings.datesDiv+' a').removeClass(settings.datesSelectedClass);
+			$(this).addClass(settings.datesSelectedClass);
+			if(settings.orientation == 'horizontal') {
+				$(settings.datesDiv).animate({'marginLeft':defaultPositionDates-(widthDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'});
+			} else if(settings.orientation == 'vertical') {
+				$(settings.datesDiv).animate({'marginTop':defaultPositionDates-(heightDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'});
+			}
+		});
+
+		$(settings.nextButton).bind('click', function(event){
+			event.preventDefault();
+			if(settings.orientation == 'horizontal') {
+				var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
+				var currentIssueIndex = currentPositionIssues/widthIssue;
+				var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
+				var currentIssueDate = currentPositionDates-widthDate;
+				if(currentPositionIssues <= -(widthIssue*howManyIssues-(widthIssue))) {
+					$(settings.issuesDiv).stop();
+					$(settings.datesDiv+' li:last-child a').click();
+				} else {
+					if (!$(settings.issuesDiv).is(':animated')) {
+						$(settings.issuesDiv).animate({'marginLeft':currentPositionIssues-widthIssue},{queue:false, duration:settings.issuesSpeed});
+						$(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed});
+						$(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass);
+						$(settings.datesDiv).animate({'marginLeft':currentIssueDate},{queue:false, duration:'settings.datesSpeed'});
+						$(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass);
+					}
+				}
+			} else if(settings.orientation == 'vertical') {
+				var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
+				var currentIssueIndex = currentPositionIssues/heightIssue;
+				var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
+				var currentIssueDate = currentPositionDates-heightDate;
+				if(currentPositionIssues <= -(heightIssue*howManyIssues-(heightIssue))) {
+					$(settings.issuesDiv).stop();
+					$(settings.datesDiv+' li:last-child a').click();
+				} else {
+					if (!$(settings.issuesDiv).is(':animated')) {
+						$(settings.issuesDiv).animate({'marginTop':currentPositionIssues-heightIssue},{queue:false, duration:settings.issuesSpeed});
+						$(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed});
+						$(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass);
+						$(settings.datesDiv).animate({'marginTop':currentIssueDate},{queue:false, duration:'settings.datesSpeed'});
+						$(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass);
+					}
+				}
+			}
+		});
+
+		$(settings.prevButton).click(function(event){
+			event.preventDefault();
+			if(settings.orientation == 'horizontal') {
+				var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px')));
+				var currentIssueIndex = currentPositionIssues/widthIssue;
+				var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px')));
+				var currentIssueDate = currentPositionDates+widthDate;
+				if(currentPositionIssues >= 0) {
+					$(settings.issuesDiv).stop();
+					$(settings.datesDiv+' li:first-child a').click();
+				} else {
+					if (!$(settings.issuesDiv).is(':animated')) {
+						$(settings.issuesDiv).animate({'marginLeft':currentPositionIssues+widthIssue},{queue:false, duration:settings.issuesSpeed});
+						$(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed});
+						$(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).prev().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass);
+						$(settings.datesDiv).animate({'marginLeft':currentIssueDate},{queue:false, duration:'settings.datesSpeed'});
+						$(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass);
+					}
+				}
+			} else if(settings.orientation == 'vertical') {
+				var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px')));
+				var currentIssueIndex = currentPositionIssues/heightIssue;
+				var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px')));
+				var currentIssueDate = currentPositionDates+heightDate;
+				if(currentPositionIssues >= 0) {
+					$(settings.issuesDiv).stop();
+					$(settings.datesDiv+' li:first-child a').click();
+				} else {
+					if (!$(settings.issuesDiv).is(':animated')) {
+						$(settings.issuesDiv).animate({'marginTop':currentPositionIssues+heightIssue},{queue:false, duration:settings.issuesSpeed});
+						$(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed});
+						$(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).prev().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass);
+						$(settings.datesDiv).animate({'marginTop':currentIssueDate},{queue:false, duration:'settings.datesSpeed'},{queue:false, duration:settings.issuesSpeed});
+						$(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass);
+					}
+				}
+			}
+		});
+		
+		// keyboard navigation, added since 0.9.1
+		if(settings.arrowKeys=='true') {
+			if(settings.orientation=='horizontal') {
+				$(document).keydown(function(event){
+					if (event.keyCode == 39) { 
+				       $(settings.nextButton).click();
+				    }
+					if (event.keyCode == 37) { 
+				       $(settings.prevButton).click();
+				    }
+				});
+			} else if(settings.orientation=='vertical') {
+				$(document).keydown(function(event){
+					if (event.keyCode == 40) { 
+				       $(settings.nextButton).click();
+				    }
+					if (event.keyCode == 38) { 
+				       $(settings.prevButton).click();
+				    }
+				});
+			}
+		}
+		
+		// default position startAt, added since 0.9.3
+		$(settings.datesDiv+' li').eq(settings.startAt-1).find('a').trigger('click');
+		
+		// autoPlay, added since 0.9.4
+		if(settings.autoPlay == 'true') { 
+			setInterval("autoPlay()", settings.autoPlayPause);
+		}
+	});
+
+};
+
+// autoPlay, added since 0.9.4
+function autoPlay(){
+	var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass);
+	if(settings.autoPlayDirection == 'forward') {
+		if(currentDate.parent().is('li:last-child')) {
+			$(settings.datesDiv+' li:first-child').find('a').trigger('click');
+		} else {
+			currentDate.parent().next().find('a').trigger('click');
+		}
+	} else if(settings.autoPlayDirection == 'backward') {
+		if(currentDate.parent().is('li:first-child')) {
+			$(settings.datesDiv+' li:last-child').find('a').trigger('click');
+		} else {
+			currentDate.parent().prev().find('a').trigger('click');
+		}
+	}
+}

+ 3 - 1
main/mySpace/index.php

@@ -730,4 +730,6 @@ if (!$export_csv) {
 function get_number_of_courses() {
 	global $courses;
 	return count($courses);
-}
+}
+
+