https://utdanning.no/themes/custom/utdanning/dist/js/global.js?tltyvs

1/**
2 * @file
3 * Global utilities.
4 */
5
6(function (Drupal, $, once) {
7
8  'use strict';
9
10  Drupal.behaviors.utdanningSections = {
11    attach: function (context, settings) {
12
13      once('uno', 'article').forEach((article) => {
14        const matcher = matchMedia('(min-width: 768px)');
15
16        const updateSections = () => {
17          $(article).find('.expandable').each(function () {
18            const details = $(this).find('details')[0];
19            if (matcher.matches) {
20              this.oldOpen = details.open;
21              details.open = true;
22            }
23            else {
24              details.open = this.oldOpen;
25            }
26          });
27        };
28
29        matcher.addEventListener('change', updateSections);
30        updateSections();
31      });
32    }
33  };
34
35  Drupal.behaviors.popover2 = {
36    attach: function (context, settings) {
37      once('popovers2', '[data-toggle="popover"], [data-bs-toggle="popover"]', context).forEach(function(popoverTrigger) {
38
39        // Lukke-knapp i popover: Sett aria-controls og aktiver click-handler for å lukke popover
40        popoverTrigger.addEventListener('shown.bs.popover', function(event) {
41          const describedByElements = event.target.ariaDescribedByElements;
42          describedByElements.forEach(function(describedBy) {
43            const toggles = describedBy.querySelectorAll(".toggle");
44            toggles.forEach(function(toggle) {
45              if (!toggle.getAttribute("aria-controls") && describedBy.id) {
46                toggle.setAttribute("aria-controls", describedBy.id);
47              }
48              toggle.addEventListener('click', function(event) {
49                if (toggle.getAttribute("aria-controls")) {
50                  const popover = bootstrap.Popover.getInstance(popoverTrigger);
51                  popover.hide();
52                }
53              });
54            });
55          });
56        });
57
58        // Lukk popover ved klikk utenfor popover+trigger
59        document.body.addEventListener('click', function(event) {
60          const popover = bootstrap.Popover.getInstance(popoverTrigger);
61          const describedByElements = popoverTrigger.ariaDescribedByElements || [];
62          describedByElements.forEach(function(describedBy) {
63            if (describedBy.contains(event.target)) {
64              // Klikk er fra innenfor widget. Overse.
65              return;
66            } else if (popoverTrigger.contains(event.target)) {
67              // Klikk er fra popoverTrigger. Overse, den håndterer dette selv.
68              return;
69            } else {
70              popover.hide();
71            }
72          });
73        });
74
75        const popTemplate = '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><a class="toggle close" role="button" aria-label="Lukk">X</a><div class="popover-body"></div></div>';
76        return new bootstrap.Popover(popoverTrigger, {
77          template: popTemplate
78        });
79
80      });
81    }
82  }
83
84  Drupal.behaviors.hbarrio_sass_inherited = {
85    attach: function (context, settings) {
86      // Don't run on script context.
87      if (context !== document) {
88        return;
89      }
90
91      // @fixme Unused element?
92      var ele = document.createElement("span");
93      $(window).scroll(function () {
94        if ($(this).scrollTop() > 50) {
95          $('body').addClass("scrolled");
96        }
97        else {
98          $('body').removeClass("scrolled");
99        }
100      });
101
102      /*$(function () {
103        const _stopPropagation = function(event) {
104          event.stopPropagation();
105        }
106        const vuihlu = document.querySelector('.view-utdannninger-i-hele-landet-uh');
107        if (vuihlu) {
108          vuihlu.addEventListener('click', event => {
109            const currentTarget = event.currentTarget;
110            setTimeout(function () {
111              $(currentTarget).find('[data-toggle="popover"]').popover(
112                {'placement': 'bottom'}
113              );
114            }, 1000)
115          }, true);
116        }
117      });*/
118
119      if ($('body').hasClass('node--type-utdanningsbeskrivelse')) {
120        $(once('utdanning-theme', '#fullBody', context)).each(function () {
121          $(this).on('hide.bs.collapse', function () {
122            var btn = $(this).parent().find('.btn');
123            btn.text(Drupal.t('Les mer'));
124          });
125          $(this).on('show.bs.collapse', function () {
126            var btn = $(this).parent().find('.btn');
127            btn.text(Drupal.t('Lukk'));
128          });
129        });
130      }
131
132      // Dispatch a resize event to render the svg because at first its hidden.
133      $('a[data-toggle="collapse"]').on('click', function () {
134        if ($(this).parent().siblings('.collapse').children('.job-market-visuals').length) {
135          setTimeout(function() {
136            window.dispatchEvent(new Event('resize'))
137          }, 100);
138        }
139      });
140    }
141  };
142
143  Drupal.behaviors.oembedIFrames = {
144    attach: function (context, settings) {
145      $(once('oembed-iframe', '.field_media_oembed_video', context)).each(function () {
146        const iframe = $(this).find('iframe')[0];
147        if (iframe) {
148          iframe.contentWindow.addEventListener('load', function() {
149            const body = iframe.contentWindow.document.body;
150            iframe.height = body.scrollHeight;
151            iframe.width = body.scrollWidth;
152          });
153        }
154      });
155    }
156  };
157
158  Drupal.behaviors.dialogFrame = {
159    attach: function (context, settings) {
160      // Close dialog popup when click outside the frame.
161      $('.ui-widget-overlay').on('click', function () {
162        $('.ui-dialog-titlebar .ui-dialog-titlebar-close').trigger('click');
163      })
164    }
165  };
166
167  Drupal.behaviors.linkAdvancedSearch = {
168    attach: function(context) {
169      $(once('link-avansert-sok', '.search-autocomplete-form .link_avansert_sok a', context)).each(function () {
170        $(this).click(function(event) {
171          event.preventDefault();
172          // $(event.target).parent().parent()[0].submit();
173          let searchVal = $('.form-control').val();
174          if (searchVal){
175            window.location.href = '/sok/#query_value=' + searchVal;
176          } else {
177            window.location.href = '/sok/';
178          }
179        });
180      });
181    }
182  };
183
184  // https://stackoverflow.com/a/44493771
185  $.fn.offsetRelative = function (top) {
186    var $this = $(this);
187    var $parent = $this.offsetParent();
188    var offset = $this.position();
189    if (!top) {
190      return offset;
191    }
192    // Didn't pass a 'top' element.
193    else if ($parent.get(0).tagName === "BODY") {
194      return offset;
195    }
196    // Reached top of document.
197    else if ($(top, $parent).length) {
198      return offset;
199    }
200    // Parent element contains the 'top' element we want the offset to be
201    // relative to.
202    else if ($parent[0] === $(top)[0]) {
203      return offset;
204    }
205    // Reached the 'top' element we want the offset to be relative to
206    else { // Get parent's relative offset.
207      var parent_offset = $parent.offsetRelative(top);
208      offset.top += parent_offset.top;
209      offset.left += parent_offset.left;
210      return offset;
211    }
212  };
213  $.fn.positionRelative = function (top) {
214    return $(this).offsetRelative(top);
215  };
216
217  $(function () {
218
219    var $sticky_menu = $('.page-navigation-wrapper');
220
221    if (($sticky_menu).length) {
222      function sticky_menu_relocate() {
223        var div_top = $sticky_menu.offset().top;
224        var window_top = $(window).scrollTop();
225        var id = '';
226
227        if (window_top > div_top) {
228          $sticky_menu.addClass('stick');
229          $sticky_menu.height(div_height);
230        }
231        else {
232          $sticky_menu.removeClass('stick');
233        }
234
235        $(".scroll-target").each(function () {
236          var offset = $(this).offsetRelative('body').top;
237
238          // @fixme Magic number.
239          if (window_top + 70 > offset) {
240            id = $(this).attr('id');
241          }
242
243        });
244        if (id !== '') {
245          $(".sticky-menu a").removeClass("active-item");
246          $('a[href="#' + id + '"]').addClass("active-item");
247        }
248      }
249
250      var div_height = $sticky_menu.height();
251
252      $(window).scroll(sticky_menu_relocate);
253      sticky_menu_relocate();
254    }
255
256    $('.page-laerested, article.yrke, article.article, article.page-tilbud, article.page-niva, article.intervju').each(function() {
257      $(this).fitVids({customSelector: ".media-oembed-content, iframe[src^='https://www.uio.no']"});
258    });
259
260
261
262    /*$('.page-laerested').each(function() {
263      $(this).fitVids({
264        customSelector: '.media-oembed-content',
265      });
266    });
267    $('article.yrke').each(function() {
268      $(this).fitVids();
269    });
270    $('article.page-tilbud').each(function() {
271      console.log("Fant tilbud");
272      $(this).fitVids({customSelector: "iframe[src^='https://www.uio.no']"});
273    });*/
274
275    var updateToTopLink = function() {
276      var opacity = scrollY < 200 ? 0 : 1;

277      $(".to-top-link").css("opacity", opacity);
278    };
279
280    $(window).scroll(updateToTopLink);
281    updateToTopLink();
282
283    $(".to-top-link a").click(function(event) {
284      event.preventDefault();
285      scrollTo({
286        left: 0,
287        top: 0,
288        behavior: "smooth",
289      });
290    });
291
292    var mainMenu = $(".main-menu");
293    var mainMenuLink = $(".main-menu-trigger");
294    mainMenu.on("hidden.bs.collapse", function() {
295      mainMenuLink.text("Meny");
296      mainMenuLink.removeClass("icon-cross");
297      mainMenuLink.addClass("icon-utda-menu");
298    });
299    mainMenu.on("shown.bs.collapse", function() {
300      mainMenuLink.text("Lukk");
301      mainMenuLink.removeClass("icon-utda-menu");
302      mainMenuLink.addClass("icon-cross");
303    });
304  });
305
306  // Click-scrolling code from https://css-tricks.com/snippets/jquery/smooth-scrolling/ .
307  // Select all links with hashes.
308  $('a[data-scroll]')
309    // Remove links that don't actually link to anything.
310  .click(function (event) {
311    // On-page links.
312    if (
313      location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '')
314      &&
315      location.hostname === this.hostname
316    ) {
317      const offsetTopStr = $('html').css('--drupal-displace-offset-top') ?? '0px';
318      const matches = /^(\d+)px$/.exec(offsetTopStr);
319      const offsetTop = parseInt(matches[1]);
320      // Figure out element to scroll to.
321      var target = $(this.hash);
322      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
323      // Does a scroll target exist?
324      if (target.length) {
325        // Only prevent default if animation is actually gonna happen.
326        event.preventDefault();
327        $('html, body').animate({
328          scrollTop: target.offset().top - 65 - offsetTop
329        }, 1000, function () {
330          // Callback after animation. Must change focus!
331          var $target = $(target);
332          $target.focus();
333          if ($target.is(":focus")) { // Checking if the target was focused.
334            return false;
335          }
336          else {
337            $target.attr('tabindex','-1'); // Adding tabindex. for elements not focusable
338            $target.focus(); // Set focus again.
339          }
340        });
341      }
342    }
343  });
344
345  var $samarbeidsavtalerContent = $('#samarbeidsavtaler-content');
346  if ($samarbeidsavtalerContent.length) {
347    var $wrapper = $samarbeidsavtalerContent.closest('.section-samarbeidsavtaler');
348    $samarbeidsavtalerContent.on('show.bs.collapse', function () {
349      $wrapper.removeClass('collapsed').addClass('expanded');
350    });
351    $samarbeidsavtalerContent.on('hide.bs.collapse', function () {
352      $wrapper.removeClass('expanded').addClass('collapsed');
353    });
354  }
355
356  $(".main-menu-trigger").click(function() {
357    let karriereveiledning = $("#karriereveiledning");
358    let search = $("#search-box");
359    let mobileContent = $("#karriereveiledning-mobile");
360    if (karriereveiledning && search && mobileContent) {
361      if (karriereveiledning.hasClass("visible")){
362        karriereveiledning.removeClass("visible");
363        mobileContent.addClass("hidden");
364      } else if (search.css("display") === "block"){
365        search.css("display","");
366      }
367    }
368  });
369
370  // UTDTEK-2104 --> stop carousel when playing video
371  $('.carousel').on('mouseover hover play', function (e) {
372    $('.carousel').carousel('pause');
373  });
374  $('.carousel').on('stop pause ended', function (e) {
375    $('.carousel').carousel();
376  });
377
378  // UTDTEK-1447 --> stop playing video when sliding
379  $('.carousel-control-next, .carousel-control-prev').on('click', function() {
380    jQuery(".carousel-item.active iframe").attr('src', jQuery(".carousel-item.active iframe").attr('src'));
381  });
382
383  $('.field_opptakskrav ul').each(function () {
384    const $list = $(this);
385    const items = $list.find('li');
386    if (items.length > 16) {
387      $list.css('column-count', 3);
388    }
389    else if (items.length > 8) {
390      $list.css('column-count', 2);
391    }
392  });
393
394})(Drupal, jQuery, once);