Add missing arrows to hourglass chart

3 files changed, 48 insertions, 25 deletions

diff --git a/app/Controller/HourglassController.php b/app/Controller/HourglassController.php
index 010083d574..0d487201f9 100755
--- a/app/Controller/HourglassController.php
+++ b/app/Controller/HourglassController.php
@@ -38,13 +38,6 @@ class HourglassController extends ChartController {
 	/** @var int Half height of personbox. */
 	public $bhalfheight;
 
-	/** @var string An arrow that points to the start of the line */
-	private $left_arrow;
-
-	/** @var string An arrow that points to the end of the line. */
-	private $right_arrow;
-
-	const LINK        = "<a class='%s' href='%s' data-parms='%s-%s'></a>";
 	const SWITCH_LINK = "<a href='hourglass.php?rootid=%s&amp;show_spouse=%s&amp;generations=%s' class='name1'>%s</a>";
 
 	/**
@@ -59,15 +52,6 @@ class HourglassController extends ChartController {
 		$this->show_spouse = Filter::getInteger('show_spouse', 0, 1, 0);
 		$this->generations = Filter::getInteger('generations', 2, $this->tree()->getPreference('MAX_DESCENDANCY_GENERATIONS'), 3);
 
-		//-- flip the arrows for RTL languages
-		if (I18N::direction() === 'ltr') {
-			$this->left_arrow  = 'icon-larrow';
-			$this->right_arrow = 'icon-rarrow';
-		} else {
-			$this->left_arrow  = 'icon-rarrow';
-			$this->right_arrow = 'icon-larrow';
-		}
-
 		$this->bhalfheight = (int) ($this->getBoxDimensions()->height / 2);
 
 		//Checks how many generations of descendency is for the person for formatting purposes
@@ -124,7 +108,12 @@ class HourglassController extends ChartController {
 
 				//-- print an Ajax arrow on the last generation of the adult male
 				if ($count == $this->generations - 1 && $family->getHusband()->getChildFamilies()) {
-					printf(self::LINK, $this->right_arrow, $ARID, 'asc', $this->show_spouse);
+					echo FontAwesome::linkIcon('arrow-end', I18N::translate('Parents'), [
+						'href'           => '#',
+						'data-direction' => 'asc',
+						'data-xref'      => $ARID,
+						'data-spouses'   => $this->show_spouse,
+					]);
 				}
 				//-- recursively get the father’s family
 				$this->printPersonPedigree($family->getHusband(), $count + 1);
@@ -156,7 +145,12 @@ class HourglassController extends ChartController {
 
 				//-- print an ajax arrow on the last generation of the adult female
 				if ($count == $this->generations - 1 && $family->getWife()->getChildFamilies()) {
-					printf(self::LINK, $this->right_arrow, $ARID, 'asc', $this->show_spouse);
+					echo FontAwesome::linkIcon('arrow-end', I18N::translate('Parents'), [
+						'href'           => '#',
+						'data-direction' => 'asc',
+						'data-xref'      => $ARID,
+						'data-spouses'   => $this->show_spouse,
+					]);
 				}
 				//-- recursively print the mother’s family
 				$this->printPersonPedigree($family->getWife(), $count + 1);
@@ -270,7 +264,13 @@ class HourglassController extends ChartController {
 			if ($kcount == 0) {
 				echo "</td><td style='width:", $this->getBoxDimensions()->width, "px'>";
 			} else {
-				printf(self::LINK, $this->left_arrow, $pid, 'desc', $this->show_spouse);
+				echo FontAwesome::linkIcon('arrow-start', I18N::translate('Children'), [
+					'href'           => '#',
+					'data-direction' => 'desc',
+					'data-xref'      => $pid,
+					'data-spouses'   => $this->show_spouse,
+				]);
+
 				//-- move the arrow up to line up with the correct box
 				if ($this->show_spouse) {
 					echo str_repeat('<br><br><br>', count($families));
@@ -427,13 +427,15 @@ class HourglassController extends ChartController {
 					e.preventDefault();
 					$('#childbox').slideToggle('fast');
 				})
-				$('.hourglassChart').on('click', '.icon-larrow, .icon-rarrow', function(e){
+				$('.hourglassChart').on('click', '.wt-icon-arrow-start, .wt-icon-arrow-end', function (e) {
 					e.preventDefault();
 					e.stopPropagation();
-					var self = $(this),
-						parms = self.data('parms').split('-'),
-						id = self.attr('href');
-					$('#td_'+id).load('hourglass_ajax.php?rootid='+ id +'&generations=1&type='+parms[0]+'&show_spouse='+(parseInt(parms[1]) ? 1:0), function(){
+
+					var direction = this.parentNode.dataset.direction;
+					var xref      = this.parentNode.dataset.xref;
+					var spouses   = this.parentNode.dataset.spouses;
+					
+					$('#td_' + xref).load('hourglass_ajax.php?rootid='+ xref +'&generations=1&type=' + direction + '&show_spouse=' + spouses, function() {
 						sizeLines();
 					});
 				});
diff --git a/app/Module/InteractiveTree/TreeView.php b/app/Module/InteractiveTree/TreeView.php
index b637a70ba1..3dc99e65d8 100644
--- a/app/Module/InteractiveTree/TreeView.php
+++ b/app/Module/InteractiveTree/TreeView.php
@@ -67,7 +67,7 @@ class TreeView {
 					</ul>
 				</div>
 				<h2 id="tree-title">' . I18N::translate('Interactive tree of %s', $root_person->getFullName()) . '</h2>
-				<div id="' . $this->name . '_in" class="tv_in" dir="ltr">
+				<div id="' . $this->name . '_in" class="tv_in" dir="ltr"">
 					' . $this->drawPerson($root_person, $generations, 0, null, null, true) . '
 				</div>
 			</div>
diff --git a/modules_v3/tree/js/treeview.js b/modules_v3/tree/js/treeview.js
index d19712d620..a3808eb779 100644
--- a/modules_v3/tree/js/treeview.js
+++ b/modules_v3/tree/js/treeview.js
@@ -44,6 +44,27 @@ function TreeViewHandler(treeview_instance) {
 	//	}
 	//});
 
+	function drag_start(event) {
+		var style = window.getComputedStyle(event.target, null);
+		event.dataTransfer.setData("text/plain",
+			(parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
+	}
+	function drag_over(event) {
+		event.preventDefault();
+		return false;
+	}
+	function drop(event) {
+		var offset    = event.dataTransfer.getData("text/plain").split(',');
+		var dm        = document.getElementById('dragme');
+		dm.style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
+		dm.style.top  = (event.clientY + parseInt(offset[1], 10)) + 'px';
+		event.preventDefault();
+
+		tv.updateTree();
+
+		return false;
+	}
+
 	// Add click handlers to buttons
 	tv.toolbox.find("#tvbCompact").each(function (index, tvCompact) {
 		tvCompact.onclick = function () {