[TASK] Use vanilla js and repair count

Classes/Eid/Count.php

@@ -16,12 +16,15 @@ namespace T3o\Randombanners\Eid;
 
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 
-$gp = \TYPO3\CMS\Core\Utility\GeneralUtility::_POST();
+$banner = \TYPO3\CMS\Core\Utility\GeneralUtility::_GP('banner');
 
 /* @var \TYPO3\CMS\Core\Database\Query\QueryBuilder $queryBuilder */
-$queryBuilder = GeneralUtility::makeInstance(\TYPO3\CMS\Core\Database\ConnectionPool::class)->getQueryBuilderForTable('tx_randombanners_domain_model_banner');
+$queryBuilder = GeneralUtility::makeInstance(\TYPO3\CMS\Core\Database\ConnectionPool::class)
+    ->getQueryBuilderForTable('tx_randombanners_domain_model_banner');
 $queryBuilder
     ->update('tx_randombanners_domain_model_banner')
-    ->where($queryBuilder->expr()->eq('uid', (int)$gp['banner']))
-    ->set('clicked_this_month', 'clicked_this_month + 1', FALSE)
-    ->execute();
\ No newline at end of file
+    ->where(
+        $queryBuilder->expr()->eq('uid', (int)$banner)
+    )
+    ->set('clicked_this_month', 'clicked_this_month + 1', false)
+    ->execute();

Resources/Private/Templates/Banner/Index.html

 <f:layout name="Default" />
 
 <f:section name="content">
-    <f:for each="{banners}" as="banner">
-        <f:link.external uri="{f:uri.external(uri: banner.link)}" target="_blank" additionalAttributes="{data-uid: banner.uid, rel: settings.linkAttributeRel}">
-            <f:for each="{banner.logo}" as="logo">
-                <f:image image="{logo}" alt="{banner.name}" />
-            </f:for>
-        </f:link.external>
-    </f:for>
+    <ul class="t3o-banners t3js-banners">
+        <f:for each="{banners}" as="banner">
+            <li>
+                <f:link.external class="t3js-banner" uri="{f:uri.external(uri: banner.link)}" target="_blank" additionalAttributes="{data-uid: banner.uid, rel: settings.linkAttributeRel}">
+                    <f:for each="{banner.logo}" as="logo">
+                        <f:image image="{logo}" alt="{banner.name}" />
+                    </f:for>
+                </f:link.external>
+            </li>
+        </f:for>
+    </ul>
 </f:section>
\ No newline at end of file

Resources/Public/Javascript/randombanners.js

-$(document).ready(function() {
-    $('.tx-randombanners').randomize();
-    $('.tx-randombanners a').on('click', function(){
-        $.ajax({
-            type: 'POST',
-            url: 'index.php',
-            data:  {
-                'eID': 'randombanners',
-                'banner': $(this).attr('data-uid')
-            },
-            success: function() {
-                return true;
-            }
-        });
-    });
-});
+var randombanners = {} || window.randombanners;
 
 /**
- * Rearrange child elements in random order
+ * Mix banner
  *
- * @see http://jsfiddle.net/C6LPY/2/
+ * @param {string} element
  */
-(function($) {
-    $.fn.randomize = function() {
-        return this.each(function() {
-            var parent = $(this);
-            var children = parent.children();
-            while(children.length) {
-                parent.append(children.splice(Math.floor(Math.random() * children.length), 1)[0]);
-            }
-        });
+randombanners.shuffle = function (element) {
+    $element = document.querySelector(element);
+    for (var i = $element.children.length; i >= 0; i--) {
+        $element.appendChild($element.children[Math.random() * i | 0]);
     }
-})(jQuery);
\ No newline at end of file
+};
+
+/**
+ * Count click
+ *
+ * @param {string} bannerId
+ * @param {function} callback
+ */
+randombanners.countClick = function (bannerId, callback) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('POST', 'index.php?eID=randombanners&banner=' + bannerId, true);
+    xhr.onreadystatechange = callback(xhr);
+    xhr.send();
+};
+
+
+(function () {
+    randombanners.shuffle('.t3js-banners');
+
+    var banners = document.querySelectorAll('.t3js-banner');
+    banners.forEach(function (banner) {
+        banner.addEventListener('click', function () {
+            randombanners.countClick(banner.dataset.uid, function (request) {
+                if (request.readyState !== 4 || request.status !== 200) {
+                    console.log(':)')
+                } else {
+                    console.log(':(')
+                }
+            })
+        })
+    });
+})();
+