https://www.iol.pt/js/iol.js

1//EVENT FUNCTIONS
2
3// Menu
4function toggleMenu() {
5    document.getElementById("menu-drawer").classList.toggle("is-drawer-expanded");
6    document.getElementById("menu-backdrop").classList.toggle("is-backdrop-visible");
7}
8
9// Ligth/dark mode
10function toggleLightMode(elem) {
11    //24h
12    let expirationDate = new Date();
13    expirationDate.setTime(expirationDate.getTime() + 24 * 3600 * 1000);
14
15    if (elem.checked) {
16        document.body.classList.remove("darkMode");
17        document.body.classList.add("liteMode");
18        IOLCookiesUtilsModule.createCookie("iol-mode", "liteMode", expirationDate, "/", "iol.pt");
19        dataLayer.push({'eventCategory': 'Enable Light Mode',
20            'eventLabel': 'Toggle Switch',
21            'eventAction': 'Click Button',
22            'event': 'gaEvent',
23            'eventValue': 1
24        });
25    } else {
26        document.body.classList.remove("liteMode");
27        document.body.classList.add("darkMode");
28        IOLCookiesUtilsModule.createCookie("iol-mode", "darkMode", expirationDate, "/", "iol.pt");
29        dataLayer.push({'eventCategory': 'Enable Dark Mode',
30            'eventLabel': 'Toggle Switch',
31            'eventAction': 'Click Button',
32            'event': 'gaEvent',
33            'eventValue': 1
34        });
35    }
36}
37
38// Header sticky
39
40const header = document.querySelector("#header_fixed")
41
42const observerHeader = new IntersectionObserver( 
43  ([e]) => e.target.classList.toggle("sticky", e.intersectionRatio < 1),
44  { threshold: [1] }
45);
46
47if(header)
48    observerHeader.observe(header);
49
50
51
52/* older
53let header = document.querySelector("#header_fixed");
54let origOffsetY = header.offsetTop;
55
56document.addEventListener("scroll", () => {
57    if (window.scrollY > origOffsetY)
58        header.classList.add("sticky");
59    else
60        header.classList.remove("sticky");
61});
62*/
63
64
65// BT Share
66function cleanUp(e) {
67    if (!e.target.classList.contains("ico-more"))
68        closeOpenedShareModal();
69}
70
71function closeOpenedShareModal() {
72    document.querySelectorAll(".ico-more.ico-more-close").forEach((element) => {
73        element.classList.remove("ico-more-close");
74        element.getElementsByClassName("modal-box")[0].classList.remove("active")
75    });
76}
77
78function toogleShareModel(elementID) {
79    let shareElement = document.getElementById(elementID);
80    let isOpen = shareElement.classList.contains("ico-more-close");
81    closeOpenedShareModal();
82
83    if (!isOpen) {
84        shareElement.classList.add("ico-more-close");
85        shareElement.getElementsByClassName("modal-box")[0].classList.add("active")
86    }
87}
88
89function changePlayerItem(event, index, changePlayer) {
90    if (event != null && event.target) {
91        if (event.target.classList.contains("ico-more") || event.target.parentElement.classList.contains("modal-box")) {
92            return;
93        }
94    }
95
96    document.querySelectorAll(".card_rect.selected").forEach((element) => {
97        element.classList.remove("selected");
98    });
99
100    var playlist = document.querySelectorAll('#playlist .card_rect');
101    playlist[index].classList.add("selected");
102
103    let title = playlist[index].querySelector(`.card_title`).innerText;
104    let lead = playlist[index].querySelector(`.card_lead`).innerText;
105    let date = playlist[index].querySelector(`.date`) != null ? playlist[index].querySelector(`.date`).innerHTML : '';
106    let social = playlist[index].querySelector(` .modal-box`).innerHTML;
107    let photo = playlist[index].querySelector(`.time_card_photo .picture16x9`).style.backgroundImage;
108    
109    
110    document.querySelector("#player-content .title").innerText = title;
111    document.querySelector("#player-content .lead").innerText = lead;
112    document.querySelector("#player-content .date").innerHTML = date;
113    document.querySelector("#player-content .box_social").innerHTML = social;
114    document.getElementById("player-shadow").style.backgroundImage = photo;
115    
116    if (changePlayer) {
117        $('#player').iolplayer("change", index);
118
119//        if(!FIRST_PLAYER_CLICK){
120//            window.scrollTo({ top: 0, behavior: 'smooth' });

121//            FIRST_PLAYER_CLICK = true;
122//        }
123    }
124}
125
126function scrollToCapa(index) {
127	let capaIdName = "capa-";
128	if(index) {
129		let anchor = capaIdName+index;
130		let capa = document.getElementById(anchor)
131		//window.location.href = "#"+anchor;
132                capa.scrollIntoView({block: "end", behavior: "smooth"});
133                //capa.focus({preventScroll: true});
134		console.log("Loaded - " + index);
135	}
136}
137
138
139function addReadMoreButton() {
140    var body = document.getElementsByTagName('body')[0];
141
142    if(body.classList.contains('nopub')){
143        articleContent.style.height = 'unset';
144        showMoreArticleDiv.style.display = 'none';
145    }else{
146        var MAX_HEIGHT_OF_ARTICLE_SHOWN = window.innerWidth < 1024 ? 500 : 1100;
147        var articleHeight = articleContent.offsetHeight;
148        var defaultHeight = MAX_HEIGHT_OF_ARTICLE_SHOWN;
149
150        if(articleHeight <= MAX_HEIGHT_OF_ARTICLE_SHOWN){
151            articleContent.style.height = 'unset';
152            showMoreArticleDiv.style.display = 'none';
153        }else{
154            articleContent.style.height = defaultHeight + 'px';
155            showMoreArticleDiv.style.display = 'block';
156        }
157    }
158}
159
160function addVirtualPageViewToNetscopeAndGoogleAnalytics(url) {
161    var urlPath = url === undefined ? location.pathname : url;
162    var data = {'virtualPageURL': urlPath, 'virtualPageTitle': document.title, 'event': 'VirtualPageview'};
163    dataLayer.push(data);
164}
165
166/*
167*   On Click ReadMore Button
168*/
169function clickReadMore(){
170    articleContent.style.height = 'unset';
171    showMoreArticleDiv.style.display = 'none';
172    addVirtualPageViewToNetscopeAndGoogleAnalytics();
173}
174
175function isIOSDevice(){
176   return !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
177}
178if(isIOSDevice()){
179    var btFs = document.querySelector('.bt-fs');
180    btFs.style.display = "none"
181    console.log("I am an IOS device!");
182} else {
183    console.log("I am not an IOS device!");
184}
185
186
187document.addEventListener("DOMContentLoaded", function () {
188
189    const body = document.body;
190    let lastScroll = 1000;
191    window.addEventListener("scroll", () => {
192        const widgetSelector = document.querySelector('header');
193        const distanceFromTop = widgetSelector ? widgetSelector.getBoundingClientRect().top + window.scrollY : 0;
194        const currentScroll = window.pageYOffset;
195        if (currentScroll <= distanceFromTop) {
196            body.classList.remove("scroll-up");
197            return;
198        }
199
200        if (currentScroll > lastScroll && !body.classList.contains("scroll-down")) {
201            body.classList.remove("scroll-up");
202            body.classList.add("scroll-down");
203        } else if (currentScroll < lastScroll && body.classList.contains("scroll-down")) {
204            body.classList.remove("scroll-down");
205            body.classList.add("scroll-up");
206        }
207        lastScroll = currentScroll;
208    });
209
210});
211
212
213
214document.addEventListener("DOMContentLoaded", () => {
215  const openBtn = document.querySelector(".opensearch");

216  const closeBtn = document.querySelector(".closesearch");
217  const searchDiv = document.querySelector(".search-top");
218
219  // Alterna (abre/fecha) ao clicar no link .opensearch
220  openBtn.addEventListener("click", (e) => {
221    e.preventDefault();
222    searchDiv.classList.toggle("active");
223  });
224
225  // Mantém o botão de fechar a funcionar individualmente (caso o utilizador clique nele)
226  if (closeBtn) {
227    closeBtn.addEventListener("click", (e) => {
228      e.preventDefault();
229      searchDiv.classList.remove("active");
230    });
231  }
232});