Home page and news page are finished

public/js/functions.js

@@ -0,0 +1,134 @@
+(function ($) {
+   /**
+   * @param {object} _options
+   */
+  $.fn.loadMoreNews = function (_options) {
+    var nextPage = 2;
+    var isLoading = false;
+    var page = 1;
+    var options = {
+      loadingElementId: '#loading',
+      container: '',
+      url: document.location.pathname
+    };
+
+    $.extend(options, _options);
+    var $isLoading = $(options.loadingElementId, this);
+    $isLoading.hide();
+
+    this.click(function (e) {
+      e.preventDefault();
+      if (!isLoading) {
+        // Set flag and update UI
+        isLoading = 1;
+        $isLoading.show();
+        var $button = $(this).attr("disabled", "disabled");
+        var $container = $(options.container)
+
+        // Fire request for the next page
+        $.ajax({url: options.url + (options.url.indexOf('?') >= 0 ? '&' : '?') + 'pagina=' + nextPage})
+          .always(function () {
+            // Whether success or failure, update the UI again
+            isLoading = 0;
+            $isLoading.hide();
+            $button.removeAttr("disabled");
+          })
+          .done(function (data) {
+            if (!data) {
+              // When no data was returned, disable the button permanently
+              page = -1;
+              $button.attr("disabled", "disabled").text("Geen nieuws meer.");
+              return;
+            }
+
+            $container.each(function () {
+              var id = this.toString();
+              $(id).append($('<div>'+data+'</div>').find(id).length ? $('<div>'+data+'</div>').find(id).children() : $(data));
+            });
+            ++nextPage;
+          });
+      }
+    });
+  };
+
+}(jQuery));
+
+$(function () {
+  $('[data-loadmorenews]').each(function () {
+    $(this).loadMoreNews($(this).data('loadmorenews'));
+  });
+});
+
+(function ($) {
+
+  /**
+   * @param {object} _options
+   */
+  $.fn.menu = function (_options) {
+    var options = {
+      menuSubmenuClass: 'has_submenu'
+    };
+    $.extend(options, _options);
+    var $menus = $(this).children('.' + options.menuSubmenuClass);
+    var $container = $(this);
+
+    $menus.on( "mouseenter", function () {
+      var $menuItem = $(this);
+      $('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()});
+      $('.hover', $container).removeClass('hover');
+      $menuItem.addClass('hover');
+      var submenu = $('<div style="width: ' + $menuItem.outerWidth() + 'px"><a href="' + $menuItem.find('a').attr('href') + '" style="width: ' + $menuItem.outerWidth() + 'px"></a></div>').append($menuItem.children('ul.submenu').clone());
+      var pos = $menuItem.offset();
+      submenu.addClass('menu-submenu').css({top: pos.top, left: pos.left});
+      submenu.on( "mouseleave", function(){
+        $('.menu-submenu > ul.submenu').slideUp(400, function(){$(this).closest('.menu-submenu').remove()});
+        $menuItem.removeClass('hover');
+      } );
+      $('body').append(submenu);
+      submenu.children('ul.submenu').slideDown();
+
+      submenu.find('ul.submenu li.has_submenu').click(function(){
+        $(this).find('ul.submenu').slideToggle();
+        $(this).toggleClass('opened');
+      });
+      openPlayerInNewScreen();
+    });
+  };
+
+}(jQuery));
+
+$(function () {
+  $('.menu, .mobile-menu').menu({});
+});
+
+(function ($) {
+
+  /**
+   * @param {object} _options
+   */
+  $.fn.tabs = function (_options) {
+    var options = {
+      tabClass: 'box_header',
+      activeClass: 'active',
+      contentClass: 'tab_content'
+    };
+    $.extend(options, _options);
+    var $tabs = $(this).find('.' + options.tabClass);
+    var $container = $(this);
+
+    $tabs.click(function (e) {
+      e.preventDefault();
+      $tabs.removeClass(options.activeClass);
+      $container.find('.' + options.contentClass).removeClass(options.activeClass);
+      $container.find('#' + $(this).data('tab-content-id')).addClass(options.activeClass);
+      $(this).addClass(options.activeClass);
+    });
+  };
+
+}(jQuery));
+
+$(function () {
+  $('[data-tabs]').each(function () {
+    $(this).tabs($(this).data('tabs') ?? {});
+  });
+});

public/js/functions.min.js

@@ -0,0 +1,2 @@
+/*!  2024-03-13 */
+!function(o){o.fn.loadMoreNews=function(e){var a=2,n=!1,i={loadingElementId:"#loading",container:"",url:document.location.pathname},u=(o.extend(i,e),o(i.loadingElementId,this));u.hide(),this.click(function(e){var t,s;e.preventDefault(),n||(n=1,u.show(),t=o(this).attr("disabled","disabled"),s=o(i.container),o.ajax({url:i.url+(0<=i.url.indexOf("?")?"&":"?")+"pagina="+a}).always(function(){n=0,u.hide(),t.removeAttr("disabled")}).done(function(n){n?(s.each(function(){var e=this.toString();o(e).append(o("<div>"+n+"</div>").find(e).length?o("<div>"+n+"</div>").find(e).children():o(n))}),++a):t.attr("disabled","disabled").text("Geen nieuws meer.")}))})}}(jQuery),$(function(){$("[data-loadmorenews]").each(function(){$(this).loadMoreNews($(this).data("loadmorenews"))})}),function(a){a.fn.menu=function(e){var n={menuSubmenuClass:"has_submenu"},e=(a.extend(n,e),a(this).children("."+n.menuSubmenuClass)),s=a(this);e.on("mouseenter",function(){var e=a(this),n=(a(".menu-submenu > ul.submenu").slideUp(400,function(){a(this).closest(".menu-submenu").remove()}),a(".hover",s).removeClass("hover"),e.addClass("hover"),a('<div style="width: '+e.outerWidth()+'px"><a href="'+e.find("a").attr("href")+'" style="width: '+e.outerWidth()+'px"></a></div>').append(e.children("ul.submenu").clone())),t=e.offset();n.addClass("menu-submenu").css({top:t.top,left:t.left}),n.on("mouseleave",function(){a(".menu-submenu > ul.submenu").slideUp(400,function(){a(this).closest(".menu-submenu").remove()}),e.removeClass("hover")}),a("body").append(n),n.children("ul.submenu").slideDown(),n.find("ul.submenu li.has_submenu").click(function(){a(this).find("ul.submenu").slideToggle(),a(this).toggleClass("opened")}),openPlayerInNewScreen()})}}(jQuery),$(function(){$(".menu, .mobile-menu").menu({})}),function(a){a.fn.tabs=function(e){var n={tabClass:"box_header",activeClass:"active",contentClass:"tab_content"},t=(a.extend(n,e),a(this).find("."+n.tabClass)),s=a(this);t.click(function(e){e.preventDefault(),t.removeClass(n.activeClass),s.find("."+n.contentClass).removeClass(n.activeClass),s.find("#"+a(this).data("tab-content-id")).addClass(n.activeClass),a(this).addClass(n.activeClass)})}}(jQuery),$(function(){$("[data-tabs]").each(function(){$(this).tabs($(this).data("tabs")??{})})});

public/js/main.js

@@ -0,0 +1,41 @@
+function loadMoreNews(e, _options) {
+  var options = $.extend( {
+    loadingElementId: '#loading'
+  }, _options );
+  window.loadMoreNews = window.loadMoreNewsSettings ?? {}
+  var nextPage = window.loadMoreNewsSettings.nextPage ?? 2;
+  var isLoading = window.loadMoreNewsSettings.isLoading ?? false;
+  var $isLoading = $(options.loadingElementId).hide();
+
+  e.preventDefault();
+
+  if (!isLoading) {
+    // Set flag and update UI
+    isLoading = 1;
+    $isLoading.show();
+    var $button = $(this).attr("disabled", "disabled");
+
+    // Fire request for the next page
+    $.ajax({url: document.location.pathname + '?pagina=' + nextPage})
+      .always(function () {
+        // Whether success or failure, update the UI again
+        isLoading = 0;
+        $isLoading.hide();
+        $button.removeAttr("disabled");
+      })
+      .done(function (data) {
+        if (!data) {
+          // When no data was returned, disable the button permanently
+          page = -1;
+          $button.attr("disabled", "disabled").text("Geen nieuws meer.");
+          return;
+        }
+        console.log($(data));
+        console.log($(data).find('#items-more-news'));
+
+        $('#items-more-news').append($(data).find('#items-more-news'));
+        $('#items-most-read').append($(data).find('#items-most-read'));
+        ++nextPage;
+      });
+  }
+}