Add scroll to top function

Add share buttons to news item
Add logo to footer

package.json

@@ -1,7 +1,10 @@
 {
   "private": true,
   "scripts": {
+    "sass": "sass resources/assets/sass:public/css",
     "sass-watch": "sass --watch resources/assets/sass:public/css",
+    "sass-minify": "sass resources/assets/sass/style.scss:public/css/style.min.css --style compressed",
+    "sass-minify-watch": "sass --watch resources/assets/sass/style.scss:public/css/style.min.css --style compressed",
     "js-watch": "grunt watch"
   },
   "devDependencies": {

public/css/style.css

@@ -70,6 +70,14 @@ body {
   width: fit-content;
   margin: 0 auto;
 }
+.btn.btn_facebook_share {
+  background-image: none;
+  background-color: #0f259d;
+}
+.btn.btn_twitter_x_share {
+  background-image: none;
+  background-color: #5ba8f4;
+}
 
 div.pp_default .pp_content_container .pp_left,
 div.pp_default .pp_content_container .pp_right,
@@ -1079,7 +1087,7 @@ div.pp_default .pp_close:hover {
   padding: 0;
   list-style: none;
   height: 31px;
-  margin-top: 20px;
+  margin: 20px 0;
 }
 .post_container .post_tags li {
   float: left;
@@ -1350,10 +1358,21 @@ div.pp_default .pp_close:hover {
   margin: 0;
   padding: 0;
   list-style: none;
+  float: left;
+  margin-bottom: 20px;
 }
 .footer_container .footer_menu2 li {
   float: left;
   margin-right: 40px;
+  padding: 9px 0;
+}
+.footer_container .footer_menu2 li:first-child {
+  padding: 0;
+}
+.footer_container .footer_menu2 li .logo {
+  display: block;
+  width: 115px;
+  height: 41px;
 }
 .footer_container .footer_menu2 li a {
   text-decoration: underline;

public/js/functions.js

@@ -139,6 +139,62 @@ $(function () {
   });
 });
 
+$(function () {
+  $('.scroll_top').click(function (e) {
+    e.preventDefault();
+    $("html, body").stop().animate({scrollTop: 0}, 500, 'swing');
+  });
+});
+
+(function ($) {
+  /**
+   * @param {object} _options
+   */
+  $.fn.share = function (_options) {
+    var options = {
+      type: '',
+      types: {
+        facebook: {
+          url: 'https://www.facebook.com/sharer/sharer.php?u=',
+          textOption: false
+        },
+        twitter_x: {
+          url: 'https://twitter.com/share?url=',
+          textOption: 'text='
+        },
+      },
+      excerptClass: 'excerpt'
+    };
+
+    $.extend(options, _options);
+
+    this.click(function (e) {
+      e.preventDefault();
+      var type = options.types[options.type];
+      if (type !== undefined) {
+        var extra = '';
+        if (type.textOption) {
+          var text = $('.' + options.excerptClass).text();
+          if (text.length + location.href.length > 278) {
+            text = text.substring(0, 278 - (location.href.length + 3))  + '...';
+          }
+          extra = '&' + type.textOption + encodeURI(text);
+        }
+        window.open(type.url + encodeURI(location.href) + extra, "pop", "width=600, height=400, scrollbars=no");
+      } else {
+        console.error(options.type + ' is unknown');
+      }
+    });
+  };
+
+}(jQuery));
+
+$(function () {
+  $('[data-share]').each(function () {
+    $(this).share({type: $(this).data('share')});
+  });
+});
+
 (function ($) {
 
   /**

public/js/functions.min.js

@@ -1,2 +1,2 @@
 /*!  2024-03-20 */
-!function(u){u.fn.loadMoreNews=function(e){var s=2,n=!1,o={loadingElementId:"#loading",container:"",url:document.location.pathname},a=(u.extend(o,e),u(o.loadingElementId,this));a.hide(),this.click(function(e){var t,i;e.preventDefault(),n||(n=1,a.show(),t=u(this).attr("disabled","disabled"),i=u(o.container),u.ajax({url:o.url+(0<=o.url.indexOf("?")?"&":"?")+"pagina="+s}).always(function(){n=0,a.hide(),t.removeAttr("disabled")}).done(function(n){n?(i.each(function(){var e=this.toString();u(e).append(u("<div>"+n+"</div>").find(e).length?u("<div>"+n+"</div>").find(e).children():u(n))}),++s):t.attr("disabled","disabled").text("Geen nieuws meer.")}))})}}(jQuery),$(function(){$("[data-loadmorenews]").each(function(){$(this).loadMoreNews($(this).data("loadmorenews"))})}),function(s){s.fn.menu=function(e){var n={menuSubmenuClass:"has_submenu"},e=(s.extend(n,e),s(this).children("."+n.menuSubmenuClass)),i=s(this);e.on("mouseenter",function(){var e=s(this),n=(s(".menu-submenu > ul.submenu").slideUp(400,function(){s(this).closest(".menu-submenu").remove()}),s(".hover",i).removeClass("hover"),e.addClass("hover"),s('<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(){s(".menu-submenu > ul.submenu").slideUp(400,function(){s(this).closest(".menu-submenu").remove()}),e.removeClass("hover")}),s("body").append(n),n.children("ul.submenu").slideDown(),n.find("ul.submenu").subMenu({}),openPlayerInNewScreen()})},s.fn.subMenu=function(e){var n={menuSubmenuClass:"has_submenu"};s.extend(n,e),s(this).find("li."+n.menuSubmenuClass+" > a").click(function(e){e.preventDefault();e=s(this).closest("li");e.children("ul.submenu").slideToggle(),e.toggleClass("opened")})}}(jQuery),$(function(){$(".menu").menu({}),$(".mobile-menu").subMenu({}),$(".mobile_menu_button a").click(function(){$(".mobile_menu_container").show()}),$(".mobile_close_menu_button a").click(function(){$(".mobile_menu_container").hide()}),$(".mobile_menu_container").click(function(e){!$(e.target).closest("#mobile_menu_nav").length&&$(".mobile_menu_container").is(":visible")&&$(".mobile_menu_container").hide()})}),$(function(){$(".prettyPhoto[rel^='prettyPhoto']").prettyPhoto({show_title:!1,slideshow:3e3,overlay_gallery:!0,social_tools:""})}),function(l){l.fn.snapTo=function(e){var n={elementClass:"post"},t=(l.extend(n,e),l(this)),i=t.find("."+n.elementClass+":visible"),s=!1,o=null,a=function(){var n;s||(s=!0,n=t.scrollLeft(),i.each(function(){var e=l(this).offset();if(e.left>-window.screen.width/2&&e.left<window.screen.width/2)return t.animate({scrollLeft:Math.round(n+e.left)+"px"},300),!1}),o&&clearTimeout(o),o=setTimeout(function(){s=!1},500))},u=null;t.on("scroll",function(){u&&clearTimeout(u),u=setTimeout(a,300)})}}(jQuery),$(function(){$("[data-snapto]").each(function(){$(this).snapTo($(this).data("snapto"))})}),function(s){s.fn.tabs=function(e){var n={tabClass:"box_header",activeClass:"active",contentClass:"tab_content"},t=(s.extend(n,e),s(this).find("."+n.tabClass)),i=s(this);t.click(function(e){e.preventDefault(),t.removeClass(n.activeClass),i.find("."+n.contentClass).removeClass(n.activeClass),i.find("#"+s(this).data("tab-content-id")).addClass(n.activeClass),s(this).addClass(n.activeClass)})}}(jQuery),$(function(){$("[data-tabs]").each(function(){$(this).tabs($(this).data("tabs")??{})})});
+!function(l){l.fn.loadMoreNews=function(e){var o=2,n=!1,s={loadingElementId:"#loading",container:"",url:document.location.pathname},a=(l.extend(s,e),l(s.loadingElementId,this));a.hide(),this.click(function(e){var t,i;e.preventDefault(),n||(n=1,a.show(),t=l(this).attr("disabled","disabled"),i=l(s.container),l.ajax({url:s.url+(0<=s.url.indexOf("?")?"&":"?")+"pagina="+o}).always(function(){n=0,a.hide(),t.removeAttr("disabled")}).done(function(n){n?(i.each(function(){var e=this.toString();l(e).append(l("<div>"+n+"</div>").find(e).length?l("<div>"+n+"</div>").find(e).children():l(n))}),++o):t.attr("disabled","disabled").text("Geen nieuws meer.")}))})}}(jQuery),$(function(){$("[data-loadmorenews]").each(function(){$(this).loadMoreNews($(this).data("loadmorenews"))})}),function(o){o.fn.menu=function(e){var n={menuSubmenuClass:"has_submenu"},e=(o.extend(n,e),o(this).children("."+n.menuSubmenuClass)),i=o(this);e.on("mouseenter",function(){var e=o(this),n=(o(".menu-submenu > ul.submenu").slideUp(400,function(){o(this).closest(".menu-submenu").remove()}),o(".hover",i).removeClass("hover"),e.addClass("hover"),o('<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(){o(".menu-submenu > ul.submenu").slideUp(400,function(){o(this).closest(".menu-submenu").remove()}),e.removeClass("hover")}),o("body").append(n),n.children("ul.submenu").slideDown(),n.find("ul.submenu").subMenu({}),openPlayerInNewScreen()})},o.fn.subMenu=function(e){var n={menuSubmenuClass:"has_submenu"};o.extend(n,e),o(this).find("li."+n.menuSubmenuClass+" > a").click(function(e){e.preventDefault();e=o(this).closest("li");e.children("ul.submenu").slideToggle(),e.toggleClass("opened")})}}(jQuery),$(function(){$(".menu").menu({}),$(".mobile-menu").subMenu({}),$(".mobile_menu_button a").click(function(){$(".mobile_menu_container").show()}),$(".mobile_close_menu_button a").click(function(){$(".mobile_menu_container").hide()}),$(".mobile_menu_container").click(function(e){!$(e.target).closest("#mobile_menu_nav").length&&$(".mobile_menu_container").is(":visible")&&$(".mobile_menu_container").hide()})}),$(function(){$(".prettyPhoto[rel^='prettyPhoto']").prettyPhoto({show_title:!1,slideshow:3e3,overlay_gallery:!0,social_tools:""})}),$(function(){$(".scroll_top").click(function(e){e.preventDefault(),$("html, body").stop().animate({scrollTop:0},500,"swing")})}),function(o){o.fn.share=function(e){var i={type:"",types:{facebook:{url:"https://www.facebook.com/sharer/sharer.php?u=",textOption:!1},twitter_x:{url:"https://twitter.com/share?url=",textOption:"text="}},excerptClass:"excerpt"};o.extend(i,e),this.click(function(e){e.preventDefault();var n,t,e=i.types[i.type];void 0!==e?(n="",e.textOption&&(278<(t=o("."+i.excerptClass).text()).length+location.href.length&&(t=t.substring(0,278-(location.href.length+3))+"..."),n="&"+e.textOption+encodeURI(t)),window.open(e.url+encodeURI(location.href)+n,"pop","width=600, height=400, scrollbars=no")):console.error(i.type+" is unknown")})}}(jQuery),$(function(){$("[data-share]").each(function(){$(this).share({type:$(this).data("share")})})}),function(u){u.fn.snapTo=function(e){var n={elementClass:"post"},t=(u.extend(n,e),u(this)),i=t.find("."+n.elementClass+":visible"),o=!1,s=null,a=function(){var n;o||(o=!0,n=t.scrollLeft(),i.each(function(){var e=u(this).offset();if(e.left>-window.screen.width/2&&e.left<window.screen.width/2)return t.animate({scrollLeft:Math.round(n+e.left)+"px"},300),!1}),s&&clearTimeout(s),s=setTimeout(function(){o=!1},500))},l=null;t.on("scroll",function(){l&&clearTimeout(l),l=setTimeout(a,300)})}}(jQuery),$(function(){$("[data-snapto]").each(function(){$(this).snapTo($(this).data("snapto"))})}),function(o){o.fn.tabs=function(e){var n={tabClass:"box_header",activeClass:"active",contentClass:"tab_content"},t=(o.extend(n,e),o(this).find("."+n.tabClass)),i=o(this);t.click(function(e){e.preventDefault(),t.removeClass(n.activeClass),i.find("."+n.contentClass).removeClass(n.activeClass),i.find("#"+o(this).data("tab-content-id")).addClass(n.activeClass),o(this).addClass(n.activeClass)})}}(jQuery),$(function(){$("[data-tabs]").each(function(){$(this).tabs($(this).data("tabs")??{})})});

resources/assets/js/functions/scrollToTop.js

@@ -0,0 +1,6 @@
+$(function () {
+  $('.scroll_top').click(function (e) {
+    e.preventDefault();
+    $("html, body").stop().animate({scrollTop: 0}, 500, 'swing');
+  });
+});

resources/assets/js/functions/share.js

@@ -0,0 +1,48 @@
+(function ($) {
+  /**
+   * @param {object} _options
+   */
+  $.fn.share = function (_options) {
+    var options = {
+      type: '',
+      types: {
+        facebook: {
+          url: 'https://www.facebook.com/sharer/sharer.php?u=',
+          textOption: false
+        },
+        twitter_x: {
+          url: 'https://twitter.com/share?url=',
+          textOption: 'text='
+        },
+      },
+      excerptClass: 'excerpt'
+    };
+
+    $.extend(options, _options);
+
+    this.click(function (e) {
+      e.preventDefault();
+      var type = options.types[options.type];
+      if (type !== undefined) {
+        var extra = '';
+        if (type.textOption) {
+          var text = $('.' + options.excerptClass).text();
+          if (text.length + location.href.length > 278) {
+            text = text.substring(0, 278 - (location.href.length + 3))  + '...';
+          }
+          extra = '&' + type.textOption + encodeURI(text);
+        }
+        window.open(type.url + encodeURI(location.href) + extra, "pop", "width=600, height=400, scrollbars=no");
+      } else {
+        console.error(options.type + ' is unknown');
+      }
+    });
+  };
+
+}(jQuery));
+
+$(function () {
+  $('[data-share]').each(function () {
+    $(this).share({type: $(this).data('share')});
+  });
+});

resources/assets/sass/components/_button.scss

@@ -18,4 +18,13 @@
     width: fit-content;
     margin: 0 auto;
   }
-}
+
+  &.btn_facebook_share {
+    background-image: none;
+    background-color: #0f259d;
+  }
+  &.btn_twitter_x_share {
+    background-image: none;
+    background-color: #5ba8f4;
+  }
+}

resources/assets/sass/components/_footer.scss

@@ -69,10 +69,22 @@
 
   .footer_menu2 {
     @include reset-list;
+    float: left;
+    margin-bottom: 20px;
 
     li {
       float: left;
       margin-right: 40px;
+      padding: 9px 0;
+      &:first-child {
+        padding: 0;
+      }
+
+      .logo {
+        display: block;
+        width: 115px;
+        height: 41px;
+      }
 
       a {
         text-decoration: underline;

resources/assets/sass/components/_main_news.scss

@@ -91,6 +91,7 @@
       }
       @media (max-width: 768px) {
         h2 a, h5 a {
+          display: block;
           font-size: 16px;
           line-height: 1.17;
         }

resources/assets/sass/components/_post.scss

@@ -17,7 +17,7 @@
   .post_tags {
     @include reset-list;
     height: 31px;
-    margin-top: 20px;
+    margin: 20px 0;
 
     li {
       float: left;

resources/views/layouts/master.blade.php

@@ -88,8 +88,6 @@
         @yield('page')
     </div><!--/.page-->
 
-    <a class="scroll_top_floater" href="#top" title="Scroll naar boven"></a>
-
     <!-- Footer -->
     <div class="footer_container">
         <div class="footer_menu">
@@ -134,7 +132,7 @@
             <div class="row">
                 <div class="col-12">
                     <ul class="footer_menu2">
-                        <li>Logo</li>
+                        <li><a href="{{url('/')}}" class="logo"><img src="/images/logo-NHGooi-diap.svg"/></a></li>
                         <li><a href="{{url('disclaimer')}}">Disclaimer</a></li>
                         <li><a href="{{url('privacy-verklaring')}}">Privacy verklaring</a></li>
                         <li><a href="{{url('cookie-statement')}}">Cookie statement</a></li>

resources/views/newsitem.blade.php

@@ -133,7 +133,6 @@
 				@include('widgets/share')
 				--}}
 
-				<div class="row page_margin_top">
 				{{--
 					<ul class="taxonomies tags left clearfix">
 						@if($news->keywords)
@@ -145,15 +144,28 @@
 						@endif
 					</ul>
 				--}}
-					<ul class="post_tags clearfix">
+				<ul class="post_tags clearfix">
-						<li>Tags:</li>
+					<li>Tags:</li>
-						<li>
+					<li>
-							<a href="{{route('nieuws.thema', $news->theme->slug)}}" title="Zoek meer nieuws met het thema {{$news->theme->title}}">{{$news->theme->title}}</a>
+						<a href="{{route('nieuws.thema', $news->theme->slug)}}" title="Zoek meer nieuws met het thema {{$news->theme->title}}">{{$news->theme->title}}</a>
-						</li>
+					</li>
-						<li>
+					<li>
-							<a href="{{route('nieuws.regio', $news->region->slug)}}" title="Zoek meer nieuws uit de regio {{$news->region->title}}">{{$news->region->title}}</a>
+						<a href="{{route('nieuws.regio', $news->region->slug)}}" title="Zoek meer nieuws uit de regio {{$news->region->title}}">{{$news->region->title}}</a>
-						</li>
+					</li>
-					</ul>
+				</ul>
+				<div class="share_buttons row">
+					<div class="col-12 col-md-auto">
+						<a data-share="facebook" href="javascript:void(0)" class="btn btn_facebook_share">
+							<i class="fa-brands fa-facebook-f"></i>
+							Deel op Facebook
+						</a>
+					</div>
+					<div class="col-12 col-md-auto">
+						<a data-share="twitter_x" href="javascript:void(0)" class="btn btn_twitter_x_share">
+							<i class="fa-brands fa-twitter"></i>
+							Deel op Twitter
+						</a>
+					</div>
 				</div>
 			</div>
 		</div>