Merge branch 'feature_rewriteJs' into 'master'

[FEATURE] remove static JS includes and rewrite all JS to ES6 modules

See merge request !18

Configuration/TypoScript/Frontend/setup.typoscript

-# include the endless scrolling javascript code
-page.includeJSFooterlibs {
-	sg_news_scrollbrowser = EXT:sg_news/Resources/Public/JavaScript/ScrollBrowser.js
-	sg_news_likes = EXT:sg_news/Resources/Public/JavaScript/Likes.js
-}
-
 # news feed as own page type
 newsFeed = PAGE
 newsFeed {

Resources/Public/JavaScript/CategoryFilter.js

@@ -24,8 +24,6 @@
 
 'use strict';
 
-import $ from 'jquery';
-
 /**
  * javascript for submitting the form when filtering
  */
@@ -34,8 +32,17 @@ export default class CategoryFilter {
 	/**
 	 * Kicks things off
 	 */
-	constructor() {
-		$('#tx-sgnews-newslist').on('change', '.tx-sgnews-select', this._filterNewslist);
+	constructor(_newsList) {
+		this._newsList = _newsList;
+		this._form = this._newsList.querySelector('form');
+		this._setupEventListeners();
+	}
+
+	/**
+	 * Adds all EventListener
+	 */
+	_setupEventListeners() {
+		this._newsList.addEventListener('change', this._filterNewslist.bind(this));
 	}
 
 	/**
@@ -44,6 +51,6 @@ export default class CategoryFilter {
 	 * @private
 	 */
 	_filterNewslist() {
-		$('#tx-sgnews-filter').submit();
+		this._form.submit();
 	}
 }

Resources/Public/JavaScript/Likes.js

 'use strict';
 
-// We rely on a global jQuery instance here, so don't initialize the module if none is found
-if (window.hasOwnProperty('$')) {
-	var $likeContainer = $('#tx-sgnews-likes'),
-		$likeButton = $likeContainer.find('.btn'),
-		$numberOfLikes = $likeButton.find('.tx-sgnews-number-of-likes-value'),
-		newsId = $likeContainer.data('uid');
+export default class Likes {
 
-	$likeButton.on('click', addLike);
-	checkButtonStatus();
+	constructor(_container) {
+		this._container = _container;
+		this._likeButton = this._container.querySelector('.btn');
+		this._numberOfLikes = this._likeButton.querySelector('.tx-sgnews-number-of-likes-value')
+		this._newsId = this._container.dataset.uid;
+		this._setupEventListener();
+		this._checkButtonsStatus();
+	}
+
+	_setupEventListener() {
+		this._likeButton.addEventListener('click', this._addLike.bind(this));
+	}
 
 	/**
 	 * Fires the Ajax-Call to add a new Like
 	 * Won't do anything if the user already committed a like
 	 */
-	function addLike() {
-		if (!window.localStorage.getItem('sg-news-like-' + newsId)) {
-			$likeButton.addClass('tx-sgnews-loading');
-			$.post('?eID=sgAjax&extensionName=SgNews&controller=Ajax\\Like&action=addLike&format=json', {
-				parameters: { newsPid: newsId }
-			}).then(function(data) {
-				data = JSON.parse(data);
-				$likeButton.removeClass('tx-sgnews-loading');
-				if (data.success) {
-					window.localStorage.setItem('sg-news-like-' + newsId, true);
-					updateButton(true);
+	_addLike() {
+		if (!window.localStorage.getItem('sg-news-like-' + this._newsId)) {
+			this._likeButton.classList.add('tx-sgnews-loading');
+			const request = new XMLHttpRequest();
+			request.onreadystatechange = () => {
+				if (request.readyState === XMLHttpRequest.DONE) {
+					if (request.status === 200) {
+						const data = JSON.parse(request.responseText);
+						this._likeButton.classList.remove('tx-sgnews-loading');
+						if (data.success) {
+							window.localStorage.setItem('sg-news-like-' + this._newsId, true);
+							this._updateButton(true);
+						}
+					}
 				}
-			});
+			};
+			request.open(
+				'POST',
+				'?eID=sgAjax&extensionName=SgNews&controller=Ajax\\Like&action=addLike&format=json'
+			);
+			request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+			request.send(`parameters[newsPid]=${this._newsId }`);
 		}
 	}
 
 	/**
 	 * Checks if the user already committed a like and updates the button accordingly
 	 */
-	function checkButtonStatus() {
-		if (window.localStorage.getItem('sg-news-like-' + newsId)) {
-			updateButton(false);
+	_checkButtonsStatus() {
+		if (window.localStorage.getItem('sg-news-like-' + this._newsId)) {
+			this._updateButton(false);
 		}
 	}
 
@@ -44,16 +58,16 @@ if (window.hasOwnProperty('$')) {
 	 *
 	 * @param {bool} addedLike If set to true, the like-count will also be increased
 	 */
-	function updateButton(addedLike) {
-		$likeButton.removeClass('btn-info').addClass('btn-success');
-		$likeButton.find('.fa-star-o').removeClass('fa-star-o').addClass('fa-star');
-		$likeButton.blur();
+	_updateButton(addedLike) {
+		this._likeButton.classList.remove('btn-info');
+		this._likeButton.classList.add('btn-success');
+		const star = this._likeButton.querySelector('.fa-star-o');
+		star.classList.remove('fa-star-o');
+		star.classList.add('fa-star');
+		this._likeButton.blur();
 		if (addedLike) {
-			var currentValue = parseInt($numberOfLikes.text());
-			$numberOfLikes.text(currentValue + 1);
+			const currentValue = parseInt(this._numberOfLikes.textContent);
+			this._numberOfLikes.textContent = currentValue + 1;
 		}
 	}
-
-} else {
-	console.warn('The sg_news like feature requires an instance of jQuery to be present!');
 }

Resources/Public/JavaScript/ScrollBrowser.js

-/***************************************************************
- *  Copyright notice
- *
- *  (c) sgalinski Internet Services (https://www.sgalinski.de)
- *
- *  All rights reserved
- *
- *  This script is part of the TYPO3 project. The TYPO3 project is
- *  free software; you can redistribute it and/or modify
- *  it under the terms of the GNU General Public License as published by
- *  the Free Software Foundation; either version 3 of the License, or
- *  (at your option) any later version.
- *
- *  The GNU General Public License can be found at
- *  http://www.gnu.org/copyleft/gpl.html.
- *
- *  This script is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *  GNU General Public License for more details.
- *
- *  This copyright notice MUST APPEAR in all copies of the script!
- ***************************************************************/
-
-var SG = SG || {};
-
-SG.ElementScrollBrowser = function() {
-	this.initialize();
-};
-
-SG.ElementScrollBrowser.prototype = {
-	/**
-	 * @var int
-	 */
-	lastPage: 1,
-
-	/**
-	 * @var boolean
-	 */
-	lock: false,
-
-	/**
-	 * @var string|null
-	 */
-	url: null,
-
-	/**
-	 * @var string|null
-	 */
-	lastUrl: null,
+export default class ScrollBrowser {
 
 	/**
-	 * @var object
-	 */
-	loadIndicator: null,
-
-	/**
-	 * Initializes the class members and adds the necessary scroll events
+	 * Kick things off
 	 *
-	 * @return {void}
+	 * @param {Node} _element The scrollbrowser root element
 	 */
-	initialize: function() {
-		$('.tx-sgnews-pagebrowser').css('display', 'none');
-		this.loadIndicator = $('.tx-sgnews-list').children(':last');
-		if (!this.loadIndicator.length) {
-			return;
+	constructor(_element) {
+		this._element = _element;
+		this._element.style.display = 'none';
+		this._loadingIndicator = this._element.lastElementChild;
+		if (!this._loadingIndicator) {
+		    return;
 		}
 
-		this.url = $('.tx-pagebrowse-next a').attr('href');
-		$(window).on('scroll', this.checkAndLoad.bind(this));
+		this.url = document.querySelector('.tx-pagebrowse-next a').getAttribute('href');
+		window.addEventListener('scroll', this.checkAndLoad.bind(this));
 
-		// initial check
+		// Initial check
 		this.checkAndLoad();
-	},
+    }
 
 	/**
 	 * Checks and loads the next page if required
 	 */
-	checkAndLoad: function() {
-		var recordLockedOrNotInPosition = this.lock || !this.checkPosition();
-		var urlIsInvalid = typeof this.url === 'undefined' || this.url === this.lastUrl;
+    checkAndLoad() {
+		const recordLockedOrNotInPosition = this.lock || !this.checkPosition();
+		const urlIsInvalid = typeof this.url === 'undefined' || this.url === null || this.url === this.lastUrl;
 		if (recordLockedOrNotInPosition || urlIsInvalid) {
 			return;
 		}
 
 		this.lock = true;
-		$.ajax(
-			{
-				url: this.url,
-
-				success: function(response) {
-					var results = $(response).find('.tx-sgnews-list');
-					results.each(function(index, result) {
-						var $result = $(result);
-						var children = $result.children();
-
-						if (!children.length) {
-							return;
-						}
+		this.fetchContent().then(this.displayNewData.bind(this));
+	}
 
-						var $resultList = $('.tx-sgnews-list-' + $result.data('record'));
-						if (!$resultList.length) {
-							$resultList = $('.tx-sgnews-list');
-						}
-						$resultList.append(children);
+	/**
+	 * Fetches the content of the next page via Ajax
+	 */
+    fetchContent() {
+		return new Promise((resolve) => {
+		    const request = new XMLHttpRequest();
+			request.onreadystatechange = () => {
+				if (request.readyState === XMLHttpRequest.DONE) {
+					if (request.status === 200) {
+						resolve(request.responseText);
+					}
+				}
+			};
+			request.open(
+				'GET',
+				this.url
+			);
+			request.send();
+		});
+    }
 
-						this.loadIndicator = $resultList.children(':last');
-					});
+	/**
+	 * Adds fetched DOM nodes to the list
+	 *
+	 * @param {String} response The HTML of the AJAX response
+	 */
+    displayNewData(response) {
+		const parser = new DOMParser();
+		const doc = parser.parseFromString(response, 'text/html');
+		const results = Array.from(doc.querySelectorAll('.tx-sgnews-list'));
+		results.forEach((result) => {
+			const children = Array.from(result.childNodes);
+			if (!children.length) {
+				return;
+			}
 
-					this.lastUrl = this.url;
-					this.url = $(response).find('.tx-pagebrowse-next a').attr('href');
-					this.lock = false;
-				}.bind(this)
+			let resultList = document.querySelector(`.tx-sgnews-list-${result.dataset.record}`);
+			if (!resultList.length) {
+				resultList = document.querySelector('.tx-sgnews-list');
 			}
-		);
-	},
+			children.forEach((child) => {
+				console.log(child);
+				resultList.appendChild(child);
+			});
+			this._loadingIndicator = resultList.lastElementChild;
+		});
+
+		this.lastUrl = this.url;
+		this.url = doc.querySelector('.tx-pagebrowse-next a').getAttribute('href');
+		this.lock = false;
+    }
 
 	/**
 	 * Checks the current position of the scrollbar in relation to the position of the load indicator.
 	 *
 	 * @return boolean
 	 */
-	checkPosition: function() {
-		var loadIndicatorPosition = this.loadIndicator.position(),
-			windowScrollPosition = $(document).scrollTop();
-		return (windowScrollPosition > (loadIndicatorPosition.top - 6000));
-	}
-};
 
-$(document).ready(function() {
-	(new SG.ElementScrollBrowser());
-});
+    checkPosition() {
+		const loadingIndicatorPosition = this._loadingIndicator.getBoundingClientRect();
+		const windowScrollPosition = window.scrollY;
+		return (windowScrollPosition > (loadingIndicatorPosition.top - 6000));
+    }
+}

Resources/Public/JavaScript/sgnews.js

+import CategoryFilter from './CategoryFilter';
+import Likes from './Likes';
+import ScrollBrowser from './ScrollBrowser';
+
+export default class SgNews {
+
+	constructor() {
+		const newsList = document.querySelector('#tx-sgnews-newslist');
+		if (newsList) {
+			new CategoryFilter(newsList);
+		}
+
+		const likesContainer = document.querySelector('#tx-sgnews-likes');
+		if (likesContainer) {
+			new Likes(likesContainer);
+		}
+
+		const scrollBrowserElement = document.querySelector('.tx-sgnews-pagebrowser');
+		if (scrollBrowserElement) {
+			new ScrollBrowser(scrollBrowserElement);
+		}
+	}
+}

Upgrade.md

+# Upgrade from ```6.x.x``` to ```7.x.x```
+
+In Version 7, we rewrote all included JavaScript to ES6 modules. This means that they won't be included in your site automatically when you install the extension.
+
+## Importing the sgnews bundle in your main project
+
+sg_news offers a front-package that imports all sub modules and initilaizes them correctly. You can import this in your bundle like that:
+
+```js
+import SgNews from 'sgnews';
+new SgNews();
+```
+
+### Mapping ```sgnews``` to the extension JavaScript
+
+In order for your module bundler to find the ```sgnews``` package, you need to add the path to your configuration. If you are using the SGC, you can add the following to your ```.sgc-config.json```
+
+```js
+{
+	"js": {
+		"libraryPaths": [
+			...
+			"./web/typo3conf/ext/sg_news/Resources/Public/JavaScript/"
+		]
+	}
+}
+```