jQuery-3, Bootstrap-4, FontAwesome-4.7, Select2-4, remove popup windows

1 files changed, 175 insertions, 188 deletions

diff --git a/pedigree.php b/pedigree.php
index 4ae8fac881..8ec573c928 100644
--- a/pedigree.php
+++ b/pedigree.php
@@ -15,221 +15,208 @@
  */
 namespace Fisharebest\Webtrees;
 
-/**
- * Defined in session.php
- *
- * @global Tree $WT_TREE
- */
-global $WT_TREE;
-
 use Fisharebest\Webtrees\Controller\PedigreeController;
 use Fisharebest\Webtrees\Functions\FunctionsEdit;
 use Fisharebest\Webtrees\Functions\FunctionsPrint;
 
-define('WT_SCRIPT_NAME', 'pedigree.php');
-require './includes/session.php';
+require 'includes/session.php';
 
 $controller = new PedigreeController;
-$controller
-	->restrictAccess(Module::isActiveChart($WT_TREE, 'pedigree_chart'))
-	->pageHeader()
-	->addExternalJavascript(WT_AUTOCOMPLETE_JS_URL)
-	->addInlineJavascript('
-	(function() {
-		autocomplete();
+$controller->restrictAccess(Module::isActiveChart($controller->tree(), 'pedigree_chart'));
 
-		jQuery("#childarrow").on("click", ".menuselect", function(e) {
-			e.preventDefault();
-			jQuery("#childbox").slideToggle("fast");
-		});
+// Only generate the content for interactive users (not search robots).
+if (Filter::getBool('ajax') && Session::has('initiated')) {
+	$posn         = I18N::direction() === 'rtl' ? 'right' : 'left';
+	$lastgenStart = (int) floor($controller->treesize / 2);
 
-		jQuery("#pedigree_chart")
-			.width('  . $controller->chartsize['x'] . ')
-			.height(' . $controller->chartsize['y'] . ');
+	echo '<div id="pedigree_chart" class="layout', $controller->orientation, '">';
 
-		// Set variables
-		var p0, p1, p2,  // Holds the ids of the boxes used in the join calculations
-			canvas       = jQuery("#pedigree_canvas"),
-			ctx          = canvas[0].getContext("2d"),
-			nodes        = jQuery(".shadow").length,
-			gen1Start    = Math.ceil(nodes / 2),
-			boxWidth     = jQuery(".person_box_template").first().outerWidth(),
-			boxHeight    = jQuery(".person_box_template").first().outerHeight(),
-			useOffset    = true,
-			extraOffsetX = Math.floor(boxWidth / 15), // set offsets to be sensible fractions of the box size
-			extraOffsetY = Math.floor(boxHeight / 10),
-			addOffset;
+	//Output the chart
+	foreach ($controller->nodes as $i => $node) {
+		// -- draw the box
+		printf('<div id="sosa_%s" class="shadow" style="%s:%spx; top:%spx; position:absolute;">', $i + 1, $posn, $node['x'], $node['y']);
 
-		// Draw joining lines on the <canvas>
-		function drawLines(context, x1, y1, x2, y2) {
-		    x1 = Math.floor(x1);
-	        y1 = Math.floor(y1);
-		    x2 = Math.floor(x2);
-		    y2 = Math.floor(y2);
-			if (' . json_encode($controller->orientation < $controller::OLDEST_AT_TOP) . ') {
-				context.moveTo(x1, y1);
-				context.lineTo(x2, y1);
-				context.lineTo(x2, y2);
-				context.lineTo(x1, y2);
-			} else {
-				context.moveTo(x1, y1);
-				context.lineTo(x1, y2);
-				context.lineTo(x2, y2);
-				context.lineTo(x2, y1);
+		if ($controller->orientation === $controller::OLDEST_AT_TOP) {
+			if ($i >= $lastgenStart) {
+				echo $controller->gotoPreviousGen($i);
+			}
+		} else {
+			if (!$i) {
+				echo $controller->getMenu();
 			}
 		}
 
-		//Plot the lines
-		switch (' . $controller->orientation . ') {
-		case ' . $controller::PORTRAIT . ':
-			useOffset = false;
-			// Drop through
-		case ' . $controller::LANDSCAPE . ':
-			for (var i = 2; i < nodes; i+=2) {
-				p0 = jQuery("#sosa_" + i);
-				p1 = jQuery("#sosa_" + (i+1));
-				// change line y position if within 10% of box top/bottom
-				addOffset = boxHeight / (p1.position().top - p0.position().top) > 0.9 ? extraOffsetY: 0;
-				if (' . json_encode(I18N::direction() === 'rtl') . ') {
-					drawLines(
-						ctx,
-						p0.position().left + p0.width(),
-						p0.position().top + (boxHeight / 2) + addOffset,
-						p0.position().left + p0.width() + extraOffsetX,
-						p1.position().top + (boxHeight / 2) - addOffset
-					);
+		FunctionsPrint::printPedigreePerson($controller->nodes[$i]['indi']);
+
+		if ($controller->orientation === $controller::OLDEST_AT_TOP) {
+			if (!$i) {
+				echo $controller->getMenu();
+			}
+		} else {
+			if ($i >= $lastgenStart) {
+				echo $controller->gotoPreviousGen($i);
+			}
+		}
+		echo '</div>';
+	}
+
+	echo '<canvas id="pedigree_canvas" width="' . $controller->chartsize['x'] . '" height="' . $controller->chartsize['y'] . '"></canvas>';
+	echo '</div>';
+
+	echo '
+		<script>
+		(function() {
+			$("#childarrow").on("click", ".menuselect", function(e) {
+				e.preventDefault();
+				$("#childbox").slideToggle("fast");
+			});
+	
+			$("#pedigree_chart")
+				.width('  . $controller->chartsize['x'] . ')
+				.height(' . $controller->chartsize['y'] . ');
+	
+			// Set variables
+			var p0, p1, p2,  // Holds the ids of the boxes used in the join calculations
+				canvas       = $("#pedigree_canvas"),
+				ctx          = canvas[0].getContext("2d"),
+				nodes        = $(".shadow").length,
+				gen1Start    = Math.ceil(nodes / 2),
+				boxWidth     = $(".person_box_template").first().outerWidth(),
+				boxHeight    = $(".person_box_template").first().outerHeight(),
+				useOffset    = true,
+				extraOffsetX = Math.floor(boxWidth / 15), // set offsets to be sensible fractions of the box size
+				extraOffsetY = Math.floor(boxHeight / 10),
+				addOffset;
+	
+			// Draw joining lines on the <canvas>
+			function drawLines(context, x1, y1, x2, y2) {
+					x1 = Math.floor(x1);
+						y1 = Math.floor(y1);
+					x2 = Math.floor(x2);
+					y2 = Math.floor(y2);
+				if (' . json_encode($controller->orientation < $controller::OLDEST_AT_TOP) . ') {
+					context.moveTo(x1, y1);
+					context.lineTo(x2, y1);
+					context.lineTo(x2, y2);
+					context.lineTo(x1, y2);
 				} else {
-					drawLines(
-						ctx,
-						p0.position().left,
-						p0.position().top + (boxHeight / 2) + addOffset,
-						p0.position().left - extraOffsetX,
-						p1.position().top + (boxHeight / 2) - addOffset
-					);
+					context.moveTo(x1, y1);
+					context.lineTo(x1, y2);
+					context.lineTo(x2, y2);
+					context.lineTo(x2, y1);
 				}
 			}
-			break;
-		case ' . $controller::OLDEST_AT_TOP . ':
+	
+			//Plot the lines
+			switch (' . $controller->orientation . ') {
+			case ' . $controller::PORTRAIT . ':
 				useOffset = false;
 				// Drop through
-		case ' . $controller::OLDEST_AT_BOTTOM . ':
-			for (var i = 1; i < gen1Start; i++) {
-				p0 = jQuery("#sosa_" + i);
-				p1 = jQuery("#sosa_" + (i*2));
-				p2 = jQuery("#sosa_" + (i*2+1));
-				addOffset = i*2 >= gen1Start ? extraOffsetX : 0;
-				var templateHeight = p0.children(".person_box_template").outerHeight(),
-					// bHeight taks account of offset when root person has a menu icon
-					bHeight = useOffset ? (p0.outerHeight() - templateHeight) + (templateHeight / 2) : templateHeight / 2;
-				drawLines(
-					ctx,
-					p1.position().left + (boxWidth / 2) + addOffset,
-					p1.position().top + boxHeight,
-					p2.position().left + (boxWidth / 2) - addOffset,
-					p0.position().top + bHeight
-				);
+			case ' . $controller::LANDSCAPE . ':
+				for (var i = 2; i < nodes; i+=2) {
+					p0 = $("#sosa_" + i);
+					p1 = $("#sosa_" + (i+1));
+					// change line y position if within 10% of box top/bottom
+					addOffset = boxHeight / (p1.position().top - p0.position().top) > 0.9 ? extraOffsetY: 0;
+					if (' . json_encode(I18N::direction() === 'rtl') . ') {
+						drawLines(
+							ctx,
+							p0.position().left + p0.width(),
+							p0.position().top + (boxHeight / 2) + addOffset,
+							p0.position().left + p0.width() + extraOffsetX,
+							p1.position().top + (boxHeight / 2) - addOffset
+						);
+					} else {
+						drawLines(
+							ctx,
+							p0.position().left,
+							p0.position().top + (boxHeight / 2) + addOffset,
+							p0.position().left - extraOffsetX,
+							p1.position().top + (boxHeight / 2) - addOffset
+						);
+					}
+				}
+				break;
+			case ' . $controller::OLDEST_AT_TOP . ':
+					useOffset = false;
+					// Drop through
+			case ' . $controller::OLDEST_AT_BOTTOM . ':
+				for (var i = 1; i < gen1Start; i++) {
+					p0 = $("#sosa_" + i);
+					p1 = $("#sosa_" + (i*2));
+					p2 = $("#sosa_" + (i*2+1));
+					addOffset = i*2 >= gen1Start ? extraOffsetX : 0;
+					var templateHeight = p0.children(".person_box_template").outerHeight(),
+						// bHeight taks account of offset when root person has a menu icon
+						bHeight = useOffset ? (p0.outerHeight() - templateHeight) + (templateHeight / 2) : templateHeight / 2;
+					drawLines(
+						ctx,
+						p1.position().left + (boxWidth / 2) + addOffset,
+						p1.position().top + boxHeight,
+						p2.position().left + (boxWidth / 2) - addOffset,
+						p0.position().top + bHeight
+					);
+				}
+				break;
 			}
-			break;
-		}
-
-		// Set line styles & draw them
-		ctx.strokeStyle   = canvas.css("color");
-		ctx.lineWidth     = ' . Theme::theme()->parameter('line-width') . ';
-		ctx.shadowColor   = ' . json_encode(Theme::theme()->parameter('shadow-color')) . ';
-		ctx.shadowBlur    = ' . Theme::theme()->parameter('shadow-blur') . ';
-		ctx.shadowOffsetX = ' . Theme::theme()->parameter('shadow-offset-x') . ';
-		ctx.shadowOffsetY = ' . Theme::theme()->parameter('shadow-offset-y') . ';
-		ctx.stroke();
-	})();
-	');
-
-?>
-<div id="pedigree-page">
-	<h2><?php echo $controller->getPageTitle(); ?></h2>
-
-	<form name="people" id="people" method="get" action="?">
-		<input type="hidden" name="ged" value="<?php echo $WT_TREE->getNameHtml(); ?>">
-		<input type="hidden" name="show_full" value="<?php echo $controller->showFull(); ?>">
-		<table class="list_table">
-			<tbody>
-				<tr>
-					<th class="descriptionbox wrap">
-						<?php echo I18N::translate('Individual'); ?>
-					</th>
-					<th class="descriptionbox wrap">
-						<?php echo I18N::translate('Generations'); ?>
-					</th>
-					<th class="descriptionbox wrap">
-						<?php echo I18N::translate('Layout'); ?>
-					</th>
-					<th class="descriptionbox wrap">
-						<?php echo I18N::translate('Show details'); ?>
-					</th>
-					<th rowspan="2" class="facts_label03">
-						<input type="submit" value="<?php echo /* I18N: A button label. */ I18N::translate('view'); ?>">
-					</th>
-				</tr>
-				<tr>
-					<td class="optionbox">
-						<input class="pedigree_form" data-autocomplete-type="INDI" type="text" id="rootid" name="rootid"
-							size="3" value="<?php echo $controller->root->getXref(); ?>">
-						<?php echo FunctionsPrint::printFindIndividualLink('rootid'); ?>
-					</td>
-					<td class="optionbox center">
-						<?php echo FunctionsEdit::editFieldInteger('PEDIGREE_GENERATIONS', $controller->generations, 3, $WT_TREE->getPreference('MAX_PEDIGREE_GENERATIONS')); ?>
-					</td>
-					<td class="optionbox center">
-						<?php echo FunctionsEdit::selectEditControl('orientation', [0 => I18N::translate('Portrait'), 1 => I18N::translate('Landscape'), 2 => I18N::translate('Oldest at top'), 3 => I18N::translate('Oldest at bottom')], null, $controller->orientation); ?>
-					</td>
-					<td class="optionbox center">
-						<?php echo FunctionsEdit::twoStateCheckbox('show_full', $controller->showFull()); ?>
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</form>
-<?php
-if ($controller->error_message) {
-	echo '<p class="ui-state-error">', $controller->error_message, '</p>';
+	
+			// Set line styles & draw them
+			ctx.strokeStyle   = canvas.css("color");
+			ctx.lineWidth     = ' . Theme::theme()->parameter('line-width') . ';
+			ctx.shadowColor   = ' . json_encode(Theme::theme()->parameter('shadow-color')) . ';
+			ctx.shadowBlur    = ' . Theme::theme()->parameter('shadow-blur') . ';
+			ctx.shadowOffsetX = ' . Theme::theme()->parameter('shadow-offset-x') . ';
+			ctx.shadowOffsetY = ' . Theme::theme()->parameter('shadow-offset-y') . ';
+			ctx.stroke();
+		})();
+		</script>';
 
 	return;
 }
 
-$posn         = I18N::direction() === 'rtl' ? 'right' : 'left';
-$lastgenStart = (int) floor($controller->treesize / 2);
+$controller
+	->addInlineJavascript('$(".wt-page-content").load(document.location + "&ajax=1");')
+	->pageHeader();
 
-echo '<div id="pedigree_chart" class="layout', $controller->orientation, '">';
+?>
+<h2 class="wt-page-title"><?= $controller->getPageTitle() ?></h2>
 
-//Output the chart
-foreach ($controller->nodes as $i => $node) {
+<form class="wt-page-options wt-page-options-pedigree-chart hidden-print">
+	<input type="hidden" name="ged" value="<?= $controller->tree()->getNameHtml() ?>">
 
-	// -- draw the box
-	printf('<div id="sosa_%s" class="shadow" style="%s:%spx; top:%spx">', $i + 1, $posn, $node['x'], $node['y']);
+	<div class="row form-group">
+		<label class="col-sm-3 col-form-label wt-page-options-label" for="rootid">
+			<?= I18N::translate('Individual') ?>
+		</label>
+		<div class="col-sm-9 wt-page-options-value">
+			<?= FunctionsEdit::formControlIndividual($controller->root, ['id' => 'rootid', 'name' => 'rootid']) ?>
+		</div>
+	</div>
 
-	if ($controller->orientation === $controller::OLDEST_AT_TOP) {
-		if ($i >= $lastgenStart) {
-			echo $controller->gotoPreviousGen($i);
-		}
-	} else {
-		if (!$i) {
-			echo $controller->getMenu();
-		}
-	}
+	<div class="row form-group">
+		<label class="col-sm-3 col-form-label wt-page-options-label" for="PEDIGREE_GENERATIONS">
+			<?= I18N::translate('Generations') ?>
+		</label>
+		<div class="col-sm-9 wt-page-options-value">
+			<?= Bootstrap4::select(FunctionsEdit::numericOptions(range(2, $controller->tree()->getPreference('MAX_PEDIGREE_GENERATIONS'))), $controller->generations, ['id' => 'PEDIGREE_GENERATIONS', 'name' => 'PEDIGREE_GENERATIONS']) ?>
+		</div>
+	</div>
 
-	FunctionsPrint::printPedigreePerson($controller->nodes[$i]['indi'], $controller->showFull());
+	<div class="row form-group">
+		<label class="col-sm-3 col-form-label wt-page-options-label" for="orientation">
+			<?= I18N::translate('Layout') ?>
+		</label>
+		<div class="col-sm-9 wt-page-options-value">
+			<?= Bootstrap4::select([0 => I18N::translate('Portrait'), 1 => I18N::translate('Landscape'), 2 => I18N::translate('Oldest at top'), 3 => I18N::translate('Oldest at bottom')], $controller->orientation, ['id' => 'orientation', 'name' => 'orientation']) ?>
+		</div>
+	</div>
 
-	if ($controller->orientation === $controller::OLDEST_AT_TOP) {
-		if (!$i) {
-			echo $controller->getMenu();
-		}
-	} else {
-		if ($i >= $lastgenStart) {
-			echo $controller->gotoPreviousGen($i);
-		}
-	}
-	echo '</div>';
-}
+	<div class="row form-group">
+		<div class="col-sm-3 wt-page-options-label"></div>
+		<div class="col-sm-9 wt-page-options-value">
+			<input class="btn btn-primary" type="submit" value="<?= /* I18N: A button label. */ I18N::translate('view') ?>">
+		</div>
+	</div>
+</form>
 
-echo '<canvas id="pedigree_canvas" width="' . $controller->chartsize['x'] . '" height="' . $controller->chartsize['y'] . '"><p>No lines between boxes? Unfortunately your browser does not support the HTML5 canvas feature.</p></canvas>';
-echo '</div>'; //close #pedigree_chart
-echo '</div>'; //close #pedigree-page
+<div class="wt-ajax-load wt-page-content wt-chart wt-pedigree-chart"></div>