Project: Organize: Fixed JS bug and changed formatting

yeastrc · Sep 19, 2018 · 5000466 · 5000466
1 parent 6852b4d
commit 5000466
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 11 deletions.
diff --git a/proxl_web_app/WebRoot/WEB-INF/jsp-includes/projectOrganizeSearches.jsp b/proxl_web_app/WebRoot/WEB-INF/jsp-includes/projectOrganizeSearches.jsp
@@ -31,7 +31,7 @@
 	 <div style="margin-top: 12px;">
 	  <table  id="organize_searches_folder_searches_table" >
 	   <tr>
-	    <td  id="organize_searches_folder_total_block_container" >
+	    <td  id="organize_searches_folder_total_block_container" style=" width: 400px; min-width: 400px; max-width: 400px;" >
 
 	     <div id="organize_searches_folder_total_block">
 
@@ -95,12 +95,19 @@
 	 </div>
 
 	</div>
+
 	<%--  Single Folder Entry HTML Template --%>
 	<script id="organize_searches_single_folder_template"  type="text/x-handlebars-template">
 	 <%--  include the template text  --%>
 	 <%@ include file="/WEB-INF/jsp_template_fragments/For_jsp_includes/srchDsplyOrderAdmin/srchDsplyOrdrFoldrAdminTmpl.jsp" %>
 	</script>
-
+
+	<%--  Single Folder Tooltip Entry HTML Template --%>
+	<script id="organize_searches_single_folder_tooltip_template"  type="text/x-handlebars-template">
+	 <%--  include the template text  --%>
+	 <%@ include file="/WEB-INF/jsp_template_fragments/For_jsp_includes/srchDsplyOrderAdmin/srchDsplyOrdrFoldrTooltipAdminTmpl.jsp" %>
+	</script>
+
 	<%--  Single Search Entry HTML Template --%>
 	<script id="organize_searches_single_search_template"  type="text/x-handlebars-template">
 	 <%--  include the template text  --%>

diff --git a/...p_template_fragments/For_jsp_includes/srchDsplyOrderAdmin/srchDsplyOrdrFoldrAdminTmpl.jsp b/...p_template_fragments/For_jsp_includes/srchDsplyOrderAdmin/srchDsplyOrdrFoldrAdminTmpl.jsp
@@ -31,8 +31,7 @@ Containing element: <script id="organize_searches_single_folder_template"  type=
 		  ><img src="${ contextPath }/images/icon-draggable-small.png" class="folder-row-icon"
 		  ></span>
 	 </div >
-     <div class="item-display-name folder_display_name_jq folder_name_jq tool_tip_attached_jq " 
-     	data-tooltip="Click to view searches in this folder"
+     <div class="item-display-name folder_display_name_jq folder_name_jq " 
 	  	>{{name}}</div>
      <div class="edit-delete-icons">
 		<a href="javascript:" class="folder_rename_button_jq tool_tip_attached_jq" 

diff --git a/...ate_fragments/For_jsp_includes/srchDsplyOrderAdmin/srchDsplyOrdrFoldrTooltipAdminTmpl.jsp b/...ate_fragments/For_jsp_includes/srchDsplyOrderAdmin/srchDsplyOrdrFoldrTooltipAdminTmpl.jsp
@@ -0,0 +1,17 @@
+
+		<%-- !!!   Handlebars template   !!!!!!!!!   --%>
+
+<%--  srchDsplyOrdrFoldrTooltipAdminTmpl.jsp 
+
+  Display order of folders and searches
+
+  Single Folder Tooltip entry
+
+Containing element: <script id="organize_searches_single_folder_tooltip_template"  type="text/x-handlebars-template">
+ --%>
+
+<div >
+	<div style="margin-top: 5px; white-space: nowrap;">Click to view searches in this folder</div>
+	<div style="margin-top: 20px;">Folder Name:</div>
+	<div style="margin-top: 5px;">{{name}}</div>
+</div>   		  
diff --git a/...sp_template_fragments/For_jsp_includes/srchDsplyOrderAdmin/srchDsplyOrdrSrchAdminTmpl.jsp b/...sp_template_fragments/For_jsp_includes/srchDsplyOrderAdmin/srchDsplyOrdrSrchAdminTmpl.jsp
@@ -22,8 +22,7 @@ Containing element: <script id="organize_searches_single_search_template"  type=
 		  ><img src="${ contextPath }/images/icon-draggable-small.png" 
 		  ></span>
 	 </div >
-     <div class="item-display-name search_display_name_jq tool_tip_attached_jq" 
-     	data-tooltip="Drag Search to a folder to move to that folder"
+     <div class="item-display-name search_display_name_jq " 
 	  	>{{name}} ({{ searchId }})</div>
      <div style="clear: both;"></div>
   </div>

diff --git a/...late_fragments/For_jsp_includes/srchDsplyOrderAdmin/srchTooltipDsplyOrdrSrchAdminTmpl.jsp b/...late_fragments/For_jsp_includes/srchDsplyOrderAdmin/srchTooltipDsplyOrdrSrchAdminTmpl.jsp
@@ -12,7 +12,7 @@ Containing element: <script id="organize_searches_single_search_tooltip_template
 
 
 <div style="">
-	<div style="margin-top: 5px; padding-right: 10px; white-space: nowrap;">Drag Search to a folder to move to that folder</div>
+	<div style="margin-top: 5px; white-space: nowrap;">Drag Search to a folder to move to that folder</div>
 	<div style="margin-top: 20px;">Search Name:</div>
 	<div style="margin-top: 5px;">{{name}} ({{ searchId }})</div>
 </div>   		  
diff --git a/proxl_web_app/WebRoot/js/viewProject_OrganizeSearchesAndFoldersAdmin.js b/proxl_web_app/WebRoot/js/viewProject_OrganizeSearchesAndFoldersAdmin.js
@@ -35,6 +35,11 @@ var OrganizeSearches = function() {
 		var objectThis = this;
 		$("#organize_searches_button").click(function(eventObject) {
 			try {
+				var $clickThis = $( this );
+				var qtipApi = $clickThis.qtip('api');
+				if ( qtipApi ) {
+					qtipApi.hide(true);
+				}
 				objectThis.startSearchesOrganize();
 				eventObject.stopPropagation();
 			} catch( e ) {
@@ -233,6 +238,16 @@ var OrganizeSearches = function() {
 		var organize_searches_single_folder_template = Handlebars.compile(organize_searches_single_folder_template_html);
 
 
+		//  Get Folder Tooltip Handlebars template and parse it
+		var organize_searches_single_folder_tooltip_template_html = $("#organize_searches_single_folder_tooltip_template").html();
+		if ( organize_searches_single_folder_tooltip_template_html === undefined ) {
+			throw Error( '$("#organize_searches_single_folder_tooltip_template").html() === undefined' );
+		}
+		if ( organize_searches_single_folder_tooltip_template_html === null ) {
+			throw Error( '$("#organize_searches_single_folder_tooltip_template").html() === null' );
+		}
+		var organize_searches_single_folder_tooltip_template = Handlebars.compile(organize_searches_single_folder_tooltip_template_html);
+
 		var firstSearchesToDisplay = searchesNotInFoldersList;
 		var folderIndex = null;
 
@@ -272,6 +287,20 @@ var OrganizeSearches = function() {
 				var $folder_display_order_inner_item_jq = $addedItem.find(".folder_display_order_inner_item_jq");
 				$folder_display_order_inner_item_jq.addClass("selected-item");
 			}
+
+			var $folder_display_name_jq = $addedItem.find(".folder_display_name_jq");
+
+			var tooltipHTML = organize_searches_single_folder_tooltip_template( folderDataEntry );
+			$folder_display_name_jq.qtip( {
+		        content: {
+		            text: tooltipHTML
+		        },
+				position: {
+					target: 'mouse',
+					adjust: { x: 5, y: 5 }, // Offset it slightly from under the mouse
+		            viewport: $(window)
+		         }
+		    });				
 		}
 
 		//   Add Folder events and handling 
@@ -390,7 +419,9 @@ var OrganizeSearches = function() {
 
 			var tooltipHTML = organize_searches_single_search_tooltip_template( searchDataEntry )
 
-			$addedItem.qtip( {
+			var $search_display_name_jq = $addedItem.find(".search_display_name_jq");
+
+			$search_display_name_jq.qtip( {
 		        content: {
 		            text: tooltipHTML
 		        },
@@ -540,8 +571,8 @@ var OrganizeSearches = function() {
 	    $( "#organize_searches_search_entries_block" ).disableSelection();		
 
 
-		//  Add tooltips - Already added above
-		// addToolTips( $organize_searches_search_entries_block );
+		//  Add tooltips
+		addToolTips( $organize_searches_search_entries_block );
 
 	};
 
@@ -601,13 +632,20 @@ var OrganizeSearches = function() {
 		var $searchItem = params.$searchItem; 
 		var $folder_display_order_item_jq_MouseIsOver = params.$folder_display_order_item_jq_MouseIsOver;
 
+		var qtipApi_OnSearchItem = $searchItem.qtip('api');
+		if ( qtipApi_OnSearchItem ) {
+			qtipApi_OnSearchItem.destroy(true);
+		}
+
 		var $tool_tip_attached_jq_All = $searchItem.find(".tool_tip_attached_jq");
 
 		$tool_tip_attached_jq_All.each( function( index ) {
 			var $tool_tip_attached_jq_One = $( this );
 			// Grab the first element in the $folder_root_jq_One array and access its qTip API
 			var qtipApi = $tool_tip_attached_jq_One.qtip('api');
-			qtipApi.destroy(true);
+			if ( qtipApi ) {
+				qtipApi.destroy(true);
+			}
 		});
 
 		this.showMovedSearchToFolderMessage( { $searchItem : $searchItem, $folder_display_order_item_jq_MouseIsOver : $folder_display_order_item_jq_MouseIsOver } );