javascript modules

build.gradle

@@ -99,12 +99,14 @@ processResources {
 }
 
 jsOptions {  
-  inputPath = file("./src/main/resources/static/js/")  
-  outputPath = file("${buildDir}/js/")  
-  compilationLevel = "WHITESPACE_ONLY"  
+  inputPath = file("./src/main/javascript/")
+  outputPath = file("${buildDir}/js/main.min.js")
+  // advanced optimizations would be possible if externs could be declared with this plugin (for jquery $)
+  // see https://developers.google.com/closure/compiler/docs/api-tutorial3?csw=1#externs
+  compilationLevel = "SIMPLE_OPTIMIZATIONS"
   jsVersionIn = 'ECMASCRIPT_2020'  
   jsVersionOut = 'ECMASCRIPT5'  
-  combineAllFiles = false
+  combineAllFiles = true
   keepSameName = false  
 }
 

src/main/javascript/advanced-search.js

+
+export function setupAdvancedSearch() {
+
+  $('form.advanced-search').submit(function(e) {
+    e.preventDefault();
+
+    var query = "";
+
+    /**
+     * serialize form for accessing fulltext, contentType and wordDistance params
+     */
+    var formArray = $("form.advanced-search").serializeArray();
+
+    var fulltext;
+    var ctypeArr = [];
+    var wordDistance;
+    var wordDistanceActive = false;
+    var mdSearchActive = false;
+    var contentSearchActive = false;
+
+    $(formArray).each(function(id, val) {
+      if(val.name === 'fulltext') {
+        fulltext = val.value;
+      }
+      if(val.name === 'contenttype') {
+        contentSearchActive = true;
+        ctypeArr.push(val.value);
+      }
+      if(val.name === 'wordDistanceSel') {
+        wordDistanceActive = val.value === 'true';
+      }
+      if(val.name === 'wordDistance') {
+        wordDistance = val.value;
+      }
+      if(val.name === 'metadata-term') {
+        if (val.value.length > 0 ) {
+          mdSearchActive = true;
+        }
+      }
+    });
+
+    /**
+     * handle metadata query
+     */	
+    if(mdSearchActive) {
+      $.each($('.metadata-searchgroup'), function(id, val) {
+
+        var field = $(val).find('[name="metadata-field"]').val();
+        query += '(';
+
+        $.each($(val).find('[name="metadata-term"]'), function(termIndex, termInput) {	
+
+          var term = $(termInput).val();
+
+          if(term !== '' && term !== true) {
+            query += field + ':"' + term + '" OR ';
+          }
+        });
+
+        /* cut the last "OR" */
+        query = query.substring(0, query.length-4);
+
+        query += ')';
+        query += ' AND ';
+      });
+
+      /* cut the last "AND" */
+      query = query.substring(0, query.length-5);
+    }
+
+    /**
+     * handle content type query
+     */
+    if(ctypeArr.length > 0) {
+
+      if(query !== "") query += ' AND ';
+      if(ctypeArr.length > 1) {
+        query += '(';
+      }
+      $.each(ctypeArr, function() {
+        query += 'format:"'+this+'" OR ';
+      });
+
+      /* cut the last "OR" */
+      query = query.substring(0, query.length-4);
+
+      if(ctypeArr.length > 1) {
+        query += ")";
+      }
+    }
+
+
+    /**
+     * fulltext
+     */
+    if(fulltext !== "") {
+      if(! $.isEmptyObject(fulltext)) {
+        if(query !== "") {
+          query += ' AND ';
+        }
+
+        if( wordDistanceActive ) {
+          query += '"'+fulltext+'"~'+wordDistance;
+        } else {
+          query += fulltext;
+
+        }
+      }
+    }
+
+    location.href="/search?query="+query;
+  });
+
+}
\ No newline at end of file

src/main/javascript/main.js

+import { setupTheme } from './theme.js';
+import { setupSearchResultsPage } from './search.js';
+import { setupAdvancedSearch } from './advanced-search.js';
+import { setShelfCount, setupShelf, setupShelfButtons } from './shelf.js';
+
+document.addEventListener("DOMContentLoaded", function(event) {
+
+  /* setup for all pages */
+  /* retrieve number of basket items on page load to set number display */
+  $.ajax("/service/shelf/count").done(response => setShelfCount(response));
+  setupTheme();
+  
+  /* page specific setup 
+     find out which page we are on to apply page specific functionality (if needed)
+     the body should have a class with this info
+  */
+  const bodyClasses = document.querySelector('body').classList;
+  if(bodyClasses.contains('basket')) {
+  	setupShelf();
+  } 
+  if(bodyClasses.contains('browse')) {
+  	setupShelfButtons(false);
+  	// the browse.jsp has an iframe when showing html directly loaded from tgcrud
+  	$("#htmlIframe").contents().find("body").attr("style","margin-left: 0");
+  }
+  if(bodyClasses.contains('search')) {
+    setupShelfButtons(false);
+    setupSearchResultsPage();
+  }
+  
+  if(bodyClasses.contains('advanced-search')) {
+    setupAdvancedSearch();
+  }
+
+});
\ No newline at end of file

src/main/javascript/search.js

+
+export function setupSearchResultsPage() {
+  
+  var filters = [];
+  // get the filters from the left sidebar to append them to the search form
+  $('.tgrep.sidebar_item.-filter').each((id, elem) => {
+    filters.push(elem.dataset.filter);
+  });
+  
+  $('#search-filters-active').change(function() {
+    if($('#search-filters-active').is(':checked')){
+      addFiltersToSearchForm(filters);
+    } else {
+      removeFiltersFromSearchForm();
+    }
+  });
+  
+  addFiltersToSearchForm(filters);
+}
+
+function addFiltersToSearchForm(filters) {
+  $(filters).each(function(id, filter) {
+    $('form.search').append($('<input type="hidden" class="hiddenFilterInput" name="filter" value="'+filter+'" />'));
+  });
+}
+
+function removeFiltersFromSearchForm() {
+  $('.hiddenFilterInput').remove();
+}

src/main/javascript/shelf.js

+/* functions for interacting with the shelf */
+
+/* show number of items on shelf */
+export function setShelfCount(num) {
+  $('.topbox_shelf-count').each((id, elem) => {
+    elem.textContent = num;
+  })
+}
+
+export function setupShelfButtons(isShelf) {
+
+  const removeLabel = document.querySelector('#i18n-remove-from-shelf-label').dataset.value;
+  const addLabel = document.querySelector('#i18n-add-to-shelf-label').dataset.value;
+
+  $(document).on('click', '.-remove-from-shelf', function(e) {
+    var $this = $(this);
+    var tgObjectUri = $this.attr('data-textgrid-targeturi');
+
+    $.ajax({
+      url: '/service/shelf/remove' ,
+      type: 'POST',
+      dataType:'json',
+      data: {
+        uri: tgObjectUri
+      },
+      success: function(data) {
+        if(isShelf) {
+          // if this remove button is on the shelf, the whole item is removed
+          $this.closest('li.tgrep.result').remove();
+          $this.closest('li.tgrep.gallery-item').remove();
+          $('.tgrep.header_count').html(data);
+          removeFromAggregatorItemString(tgObjectUri)
+        } else {
+          $this.removeClass('-remove-from-shelf');
+          $this.addClass('-add-to-shelf');
+          $this.html(addLabel);
+        }
+        setShelfCount(data);
+      }
+    });
+  });
+
+  // the shelf has no add buttons
+  if(!isShelf) {
+    $(document).on('click', '.-add-to-shelf', function(e) {
+      var $this = $(this);
+      $.ajax({
+        url: "/service/shelf/add" ,
+        type: 'POST',
+        dataType:'json',
+        data: {
+          uri: $this.attr('data-textgrid-targeturi')
+        },
+        success: function(data) {
+          $this.removeClass('-add-to-shelf');
+          $this.addClass('-remove-from-shelf');
+          $this.html(removeLabel);
+          setShelfCount(data);
+        }
+      });
+    });
+  }
+}
+
+export function setupShelf() {
+  
+  setupShelfButtons(true);
+  
+  $(document).on('click', '.tgrep.header_button.-clear', function(e) {
+    $.ajax({
+      url: '/service/shelf/clear' ,
+      type: 'POST',
+      dataType:'json',
+      data: {
+        empty: 'empty'
+      },
+      success: function(data) {
+        $('.tgrep.results_list').empty();
+        $('.tgrep.results_gallery').empty();
+        $('.tgrep.header_count').html(0);
+        setShelfCount(data);
+        removeUselessActionsFromEmptyShelf();
+      }
+    });
+  });
+  
+  if(document.querySelector('#basketItemString') !== null) {
+    basketItemString = document.querySelector('#basketItemString').dataset.value;
+  }
+}
+
+//set by jsp
+var basketItemString;
+
+// removes the tguri from aggregatorUrl
+function removeFromAggregatorItemString(tgObjectUri) {
+
+  var basketItemStringOld = basketItemString;
+  var itemArr = basketItemString.split(',');
+  itemArr.splice(itemArr.indexOf(tgObjectUri),1);
+
+  // are there any objects left on the shelf?
+  if(itemArr.length > 0) {
+    basketItemString = itemArr.join(',');
+    $('.aggregator-items').each((id, elem) => {
+        elem.href = elem.href.replace(basketItemStringOld, basketItemString);
+    });
+  } else {
+    removeUselessActionsFromEmptyShelf();
+  }
+}
+
+// disable download and voyant links if shelf is empty
+function removeUselessActionsFromEmptyShelf() {
+  $('.remove_on_shelf_empty').each((id, elem) => {
+    elem.remove();
+  });
+}
+
+
+
+
+/* localstorage */
+export function hasLocalStorage() {
+  const item = "tgrep"
+    try {
+      window.localStorage.setItem(item, item);
+      window.localStorage.removeItem(item);
+      return true;
+    } catch(e) {
+      return false;
+    }
+}

src/main/resources/static/js/theme.js → src/main/javascript/theme.js

-// Set default animation duration to 300 ms
-$.fx.speeds._default = 300
 
-$( function() {
+export function setupTheme() {
+  
+  // Set default animation duration to 300 ms
+  $.fx.speeds._default = 300
 
 	// Drowdown handlers
 	$('.tg.dropdown_menu a').attr('tabindex', -1)
@@ -79,7 +80,7 @@ $( function() {
 	})
 
 	$('.tgrep.advanced-search_button.-select').click( function() {
-		checked = $(this).hasClass('-all')
+		const checked = $(this).hasClass('-all')
 		$( '#' + $(this).data('target') ).find(':checkbox').prop('checked', checked)
 	})
 
@@ -87,8 +88,8 @@ $( function() {
 	$('.tgrep.advanced-search_button.-item').click( function() {
 		var $container = $(this).closest('.tgrep.advanced-search_grow-group')
 		if ( $(this).hasClass('-add') ) {
-			$template = $(this).closest('.tgrep.advanced-search_grow-item')
-			$clone = $template.clone(true)
+			let $template = $(this).closest('.tgrep.advanced-search_grow-item')
+			let $clone = $template.clone(true)
 			$clone.find(':input').val('')
 			$clone.find('select').each( function() {
 				$(this).val( $(this).find('option:first').val() )
@@ -115,105 +116,5 @@ $( function() {
 		return false
 	})
 
-})
-
-
-/* for the basket */
-
-/* retrieve number of basket items on page load to set number display */
-document.addEventListener("DOMContentLoaded", event => {
-  $.ajax("/service/shelf/count")
-   .done(response => setBasketCount(response));
-});
-/* show number of items in basket */
-function setBasketCount(num) {
-  $('.topbox_shelf-count').each((id, elem) => {
-    elem.textContent = num;
-  })
 }
 
-/* the javascript for the shelf buttons, needed on browse and search-result and shelf pages */
-document.addEventListener("DOMContentLoaded", function(event) {
-
-	const removeLabel = document.querySelector('#i18n-remove-from-shelf-label').dataset.value;
-	const addLabel = document.querySelector('#i18n-add-to-shelf-label').dataset.value;
-
-	/* the buttons */
-	$(document).on('click', '.-add-to-shelf', function(e) {
-		var $this = $(this);
-		$.ajax({
-				url: "/service/shelf/add" ,
-				type: 'POST',
-				dataType:'json',
-				data: {
-					uri: $this.attr('data-textgrid-targeturi')
-				},
-				success: function(data) {
-					$this.removeClass('-add-to-shelf');
-					$this.addClass('-remove-from-shelf');
-					$this.html(removeLabel);
-					setBasketCount(data);
-				}
-			 });
-	});
-
-	$(document).on('click', '.-remove-from-shelf', function(e) {
-		var $this = $(this);
-		$.ajax({
-				url: "/service/shelf/remove" ,
-				type: 'POST',
-				dataType:'json',
-				data: {
-					uri: $this.attr('data-textgrid-targeturi')
-				},
-				success: function(data) {
-					$this.removeClass('-remove-from-shelf');
-					$this.addClass('-add-to-shelf');
-					$this.html(addLabel);
-					setBasketCount(data);
-				}
-		});
-	});
- });
-
-
-/* the browse.jsp has an iframe when showing html directly loaded from tgcrud */
-document.addEventListener("DOMContentLoaded", function(event) {
-	$("#htmlIframe").contents().find("body").attr("style","margin-left: 0");
-});
-
-/* add/remove filters in search jsp */
-document.addEventListener("DOMContentLoaded", function(event) {
-
-  var filters = [];
-  // get the filters from the left sidebar to append them to the search form
-  $('.tgrep.sidebar_item.-filter').each((id, elem) => {
-	  filters.push(elem.dataset.filter);
-  });
-
-  function addFiltersToSearchForm(filters) {
-    $(filters).each(function(id, filter) {
-      $('form.search').append($('<input type="hidden" class="hiddenFilterInput" name="filter" value="'+filter+'" />'));
-    });
-  }
-
-  function removeFiltersFromSearchForm() {
-    $('.hiddenFilterInput').remove();
-  }
-
-  addFiltersToSearchForm(filters);
-
-  //$('form.search').append($('<input type="hidden" name="order" value="${order}" />'));
-  //$('form.search').append($('<input type="hidden" name="limit" value="${limit}" />'));
-
-  $('#search-filters-active').change(function() {
-    if($('#search-filters-active').is(':checked')){
-      addFiltersToSearchForm(filters);
-    } else {
-      removeFiltersFromSearchForm();
-    }
-  });
-
-});
-
-

src/main/resources/static/js/advanced-search.js

-document.addEventListener("DOMContentLoaded", function(event) {
-
-
-	$('form.advanced-search').submit(function(e) {
-		e.preventDefault();
-		
-		var query = "";
-		
-		/**
-		* serialize form for accessing fulltext, contentType and wordDistance params
-		*/
-		var formArray = $("form.advanced-search").serializeArray();
-		
-		var fulltext;
-		var ctypeArr = [];
-		var wordDistance;
-		var wordDistanceActive = false;
-		var mdSearchActive = false;
-		var contentSearchActive = false;
-		
-		$(formArray).each(function(id, val) {
-			if(val.name === 'fulltext') {
-				fulltext = val.value;
-			}
-			if(val.name === 'contenttype') {
-				contentSearchActive = true;
-				ctypeArr.push(val.value);
-			}
-			if(val.name === 'wordDistanceSel') {
-				wordDistanceActive = val.value === 'true';
-			}
-			if(val.name === 'wordDistance') {
-				wordDistance = val.value;
-			}
-			if(val.name === 'metadata-term') {
-				if (val.value.length > 0 ) {
-					mdSearchActive = true;
-				}
-			}
-		});
-
-		/**
-		 * handle metadata query
-		 */	
-		if(mdSearchActive) {
-			$.each($('.metadata-searchgroup'), function(id, val) {
-				
-				var field = $(val).find('[name="metadata-field"]').val();
-				query += '(';
-				
-				$.each($(val).find('[name="metadata-term"]'), function(termIndex, termInput) {	
-				
-					var term = $(termInput).val();
-					
-					if(term !== '' && term !== true) {
-						query += field + ':"' + term + '" OR ';
-					}
-				});
-				
-				/* cut the last "OR" */
-				query = query.substring(0, query.length-4);
-
-				query += ')';
-				query += ' AND ';
-			});
-			
-			/* cut the last "AND" */
-			query = query.substring(0, query.length-5);
-		}
-		
-		/**
-		 * handle content type query
-		 */
-		if(ctypeArr.length > 0) {
-			
-			if(query !== "") query += ' AND ';
-			if(ctypeArr.length > 1) {
-				query += '(';
-			}
-			$.each(ctypeArr, function() {
-				 query += 'format:"'+this+'" OR ';
-			});
-			
-			/* cut the last "OR" */
-			query = query.substring(0, query.length-4);
-
-			if(ctypeArr.length > 1) {
-				query += ")";
-			}
-		}
-		
-		
-		/**
-		 * fulltext
-		 */
-		if(fulltext !== "") {
-			if(! $.isEmptyObject(fulltext)) {
-				if(query !== "") {
-					query += ' AND ';
-				}
-				
-		        if( wordDistanceActive ) {
-                    query += '"'+fulltext+'"~'+wordDistance;
-		        } else {
-                    query += fulltext;
-
-                }
-			}
-		}
-		
-		location.href="/search?query="+query;
-	});	
-	
-});
\ No newline at end of file

src/main/resources/static/js/basket.js

-document.addEventListener("DOMContentLoaded", function(event) {
-
-	// TODO: does this overload the binding from theme.js?
-	$(document).on('click', '.-remove-from-shelf', function(e) {
-		var $this = $(this);
-		var tgObjectUri = $this.attr('data-textgrid-targeturi');