Kaynağa Gözat

completely rerender BasicView's table every time. mainly for dayRender

Adam Shaw 13 yıl önce
ebeveyn
işleme
86dfa81edf
3 değiştirilmiş dosya ile 96 ekleme ve 104 silme
  1. 1 1
      src/basic/BasicDayView.js
  2. 94 102
      src/basic/BasicView.js
  3. 1 1
      src/basic/MonthView.js

+ 1 - 1
src/basic/BasicDayView.js

@@ -30,7 +30,7 @@ function BasicDayView(element, calendar) {
 		t.title = formatDate(date, opt('titleFormat'));
 		t.start = t.visStart = cloneDate(date, true);
 		t.end = t.visEnd = addDays(cloneDate(t.start), 1);
-		renderBasic(1, 1, 1, false);
+		renderBasic(1, 1, false);
 	}
 	
 	

+ 94 - 102
src/basic/BasicView.js

@@ -51,6 +51,7 @@ function BasicView(element, calendar, viewName) {
 	
 	// locals
 	
+	var table;
 	var head;
 	var headCells;
 	var body;
@@ -88,17 +89,17 @@ function BasicView(element, calendar, viewName) {
 	disableTextSelection(element.addClass('fc-grid'));
 	
 	
-	function renderBasic(maxr, r, c, showNumbers) {
+	function renderBasic(r, c, showNumbers) {
 		rowCnt = r;
 		colCnt = c;
 		updateOptions();
 		var firstTime = !body;
 		if (firstTime) {
-			buildSkeleton(maxr, showNumbers);
+			buildEventContainer();
 		}else{
 			clearEvents();
 		}
-		updateCells(firstTime);
+		buildTable(showNumbers);
 	}
 	
 	
@@ -130,142 +131,119 @@ function BasicView(element, calendar, viewName) {
 	
 	
 	
-	function buildSkeleton(maxRowCnt, showNumbers) {
-		var s;
+	function buildEventContainer() {
+		daySegmentContainer =
+			$("<div style='position:absolute;z-index:8;top:0;left:0'/>")
+				.appendTo(element);
+	}
+	
+	
+	
+	function buildTable(showNumbers) {
+		var html = '';
+		var i, j;
 		var headerClass = tm + "-widget-header";
 		var contentClass = tm + "-widget-content";
-		var i, j;
-		var table;
-		
-		s =
-			"<table class='fc-border-separate' style='width:100%' cellspacing='0'>" +
-			"<thead>" +
-			"<tr>";
+		var month = t.start.getMonth();
+		var today = clearTime(new Date());
+		var cell;
+		var date;
+
+		html += "<table class='fc-border-separate' style='width:100%' cellspacing='0'>" +
+		        "<thead>" +
+		        "<tr>";
 		if (showWeekNumbers) {
-			s +=
-				"<th class='fc-week-number " + headerClass + "'/>";
+			html += "<th class='fc-week-number " + headerClass + "'/>";
 		}
 		for (i=0; i<colCnt; i++) {
-			s +=
-				"<th class='fc- " + headerClass + "'/>"; // need fc- for setDayID
+			html += "<th class='fc- fc-day-header " + headerClass + "'/>"; // need fc- for setDayID
 		}
-		s +=
-			"</tr>" +
-			"</thead>" +
-			"<tbody>";
-		for (i=0; i<maxRowCnt; i++) {
-			s +=
-				"<tr class='fc-week" + i + "'>";
+		html += "</tr>" +
+		        "</thead>" +
+		        "<tbody>";
+		for (i=0; i<rowCnt; i++) {
+			html += "<tr class='fc-week" + i + "'>";
 			if (showWeekNumbers) {
-				s +=
-					"<td class='fc-week-number " + contentClass + "'><div></div></td>";
+				html += "<td class='fc-week-number " + contentClass + "'>" +
+				        "<div/>" +
+				        "</td>";
 			}
 			for (j=0; j<colCnt; j++) {
-				s +=
-					"<td class='fc- " + contentClass + " fc-day" + (i*colCnt+j) + "'>" + // need fc- for setDayID
-					"<div>" +
-					(showNumbers ?
-						"<div class='fc-day-number'/>" :
-						''
-						) +
-					"<div class='fc-day-content'>" +
-					"<div style='position:relative'>&nbsp;</div>" +
-					"</div>" +
-					"</div>" +
-					"</td>";
+				html += "<td class='fc- fc-day fc-day" + (i*colCnt+j) + " " + contentClass + "'>" + // need fc- for setDayID
+				        "<div>";
+				if (showNumbers) {
+					html += "<div class='fc-day-number'/>";
+				}
+				html += "<div class='fc-day-content'>" +
+				        "<div style='position:relative'>&nbsp;</div>" +
+				        "</div>" +
+				        "</div>" +
+				        "</td>";
 			}
-			s +=
-				"</tr>";
+			html += "</tr>";
 		}
-		s +=
-			"</tbody>" +
-			"</table>";
-		table = $(s).appendTo(element);
-		
+		html += "</tbody>" +
+		        "</table>";
+
+		lockHeight(); // the unlock happens later, in setHeight()...
+		if (table) {
+			table.remove();
+		}
+		table = $(html).appendTo(element);
+
 		head = table.find('thead');
-		headCells = head.find('th:not(.fc-week-number)');
+		headCells = head.find('.fc-day-header');
 		body = table.find('tbody');
 		bodyRows = body.find('tr');
-		bodyCells = body.find('td').filter(':not(.fc-week-number)');
-		bodyFirstCells = bodyCells.filter(':first-child, td.fc-week-number + *'); // either first cell in each row, or immediately following week #
-		bodyCellTopInners = bodyRows.eq(0).find('div.fc-day-content div');
+		bodyCells = body.find('.fc-day');
+		bodyFirstCells = bodyRows.find('td:first-child');
+		bodyCellTopInners = bodyRows.eq(0).find('.fc-day-content > div');
 		
 		markFirstLast(head.add(head.find('tr'))); // marks first+last tr/th's
 		markFirstLast(bodyRows); // marks first+last td's
-		bodyRows.eq(0).addClass('fc-first'); // fc-last is done in updateCells
+		bodyRows.eq(0).addClass('fc-first');
+		bodyRows.filter(':last').addClass('fc-last');
 		
 		dayBind(bodyCells);
-		
-		daySegmentContainer =
-			$("<div style='position:absolute;z-index:8;top:0;left:0'/>")
-				.appendTo(element);
-	}
-	
-	
-	
-	function updateCells(firstTime) {
-		var dowDirty = firstTime || rowCnt == 1; // could the cells' day-of-weeks need updating?
-		var month = t.start.getMonth();
-		var today = clearTime(new Date());
-		var cell;
-		var date;
-		var row;
+
+		// update head cells
 	
 		if (showWeekNumbers) {
 			head.find('.fc-week-number').text(weekNumberTitle);
 		}
 
-		if (dowDirty) {
-			headCells.each(function(i, _cell) {
-				cell = $(_cell);
-				date = indexDate(i);
-				cell.html(formatDate(date, colFormat));
-				setDayID(cell, date);
+		headCells.each(function(i, _cell) {
+			cell = $(_cell);
+			date = indexDate(i);
+			cell.text(formatDate(date, colFormat));
+			setDayID(cell, date);
+		});
+
+		// update body cells (we should maybe move this into the HTML generation above)
+
+		if (showWeekNumbers) {
+			bodyRows.each(function(i, _row) {
+				var weekStartDate = _cellDate(i, 0);
+				$(_row).find('.fc-week-number > div').text(
+					formatDate(weekStartDate, weekNumberFormat)
+				);
 			});
 		}
 		
 		bodyCells.each(function(i, _cell) {
 			cell = $(_cell);
 			date = indexDate(i);
-			if (date.getMonth() == month) {
-				cell.removeClass('fc-other-month');
-			}else{
+			if (date.getMonth() != month) {
 				cell.addClass('fc-other-month');
 			}
 			if (+date == +today) {
 				cell.addClass(tm + '-state-highlight fc-today');
-			}else{
-				cell.removeClass(tm + '-state-highlight fc-today');
 			}
-			cell.find('div.fc-day-number').text(date.getDate());
+			cell.find('.fc-day-number').text(date.getDate());
 			cell.attr('data-date', $.fullCalendar.formatDate(date, "yyyyMMdd"));
-			if (dowDirty) {
-				setDayID(cell, date);
-			}
+			setDayID(cell, date);
 			trigger('dayRender', t, date, cell);
 		});
-		
-		bodyRows.each(function(i, _row) {
-			row = $(_row);
-			if (i < rowCnt) {
-
-				if (showWeekNumbers) {
-					var weekStartDate = indexDate(i*7);
-					row.find('.fc-week-number > div').text(
-						formatDate(weekStartDate, weekNumberFormat)
-					);
-				}
-
-				row.show();
-				if (i == rowCnt-1) {
-					row.addClass('fc-last');
-				}else{
-					row.removeClass('fc-last');
-				}
-			}else{
-				row.hide();
-			}
-		});
 	}
 	
 	
@@ -295,6 +273,7 @@ function BasicView(element, calendar, viewName) {
 			}
 		});
 		
+		unlockHeight();
 	}
 	
 	
@@ -526,6 +505,19 @@ function BasicView(element, calendar, viewName) {
 			right: viewWidth
 		};
 	}
-	
+
+
+
+	// makes sure height doesn't collapse while we destroy/render new cells
+	// (this causes a bad end-user scrollbar jump)
+	// TODO: generalize this for all view rendering. (also in Calendar.js)
+
+	function lockHeight() {
+		setMinHeight(element, element.height());
+	}
+
+	function unlockHeight() {
+		setMinHeight(element, 1);
+	}
 	
 }

+ 1 - 1
src/basic/MonthView.js

@@ -45,7 +45,7 @@ function MonthView(element, calendar) {
 		t.end = end;
 		t.visStart = visStart;
 		t.visEnd = visEnd;
-		renderBasic(6, rowCnt, nwe ? 5 : 7, true);
+		renderBasic(rowCnt, nwe ? 5 : 7, true);
 	}