<div class="m-cookie-disclaimer js-cookie-disclaimer">
    <div role="alert" class="m-cookie-disclaimer__wrapper m-alert m-alert--info m-alert--dismissable js-dismiss-alert">
        <div class="m-cookie-disclaimer__inner">
            <div class="m-cookie-disclaimer__inner-first">
                <p class="m-cookie-disclaimer__text">På internetstiftelsen.se använder vi kakor (cookies) för att löpande förbättra webbplatsen. <a href="https://internetstiftelsen.se/om-webbplatsen/cookies/">Läs mer om hur Internetstiftelsen använder kakor</a>.</p>
            </div>
            <div class="m-cookie-disclaimer__inner-second">
                <button id="js-accept-cookies" class="a-button a-button--is-static">
                    <span class="a-button__text">Jag förstår</span>
                </button>
            </div>
        </div>
    </div>
</div>
<div class="m-cookie-disclaimer js-cookie-disclaimer">
	<div{{#if role}} role="{{role}}"{{/if}} class="m-cookie-disclaimer__wrapper m-alert m-alert--{{type}}{{#if is_dismissable}} m-alert--dismissable{{/if}}{{#if js_class}} {{js_class}}{{/if}}">
		<div class="m-cookie-disclaimer__inner">
			<div class="m-cookie-disclaimer__inner-first">
				<p class="m-cookie-disclaimer__text">{{{text}}}</p>
			</div>
			{{#if is_dismissable}}
			<div class="m-cookie-disclaimer__inner-second">
				{{> @button el="button" modifiers="is-static" text="Jag förstår" id="js-accept-cookies"}}
			</div>
			{{/if}}
		</div>
	</div>
</div>
{
  "name": "Cookies",
  "type": "info",
  "role": "alert",
  "text": "På internetstiftelsen.se använder vi kakor (cookies) för att löpande förbättra webbplatsen. <a href=\"https://internetstiftelsen.se/om-webbplatsen/cookies/\">Läs mer om hur Internetstiftelsen använder kakor</a>.",
  "js_class": "js-dismiss-alert",
  "is_dismissable": true
}
  • Content:
    const cookieBar = document.querySelector('.js-cookie-disclaimer');
    const visibleClass = 'is-visible';
    const cookieName = 'internetstiftelsen-cookie-consent';
    // const testCookieSupport = 'Cookies are enabled';
    const acceptButton = document.getElementById('js-accept-cookies');
    const currentProtocol = document.location.protocol;
    // const { cookieEnabled } = navigator.cookieEnabled;
    
    // Cookies are disabled
    // function showCookieFail() {
    // 	console.warn('Cookies are disabled.');
    // }
    
    // Check for cookie support
    // (function checkCookieSupport() {
    // 	if (!cookieEnabled) {
    // 		if (currentProtocol === 'https:') {
    // 			document.cookie = `${testCookieSupport}=Yes;path=/;SameSite=Strict;Secure;`;
    // 		} else {
    // 			document.cookie = `${testCookieSupport}=Yes;path=/;SameSite=Strict;`;
    // 		}
    //
    // 		cookieEnabled = document.cookie.indexOf(testCookieSupport) !== -1;
    // 	}
    // 	return cookieEnabled || showCookieFail();
    // }());
    
    // Set cookie
    function setCookie(name, value, days) {
    	const d = new Date();
    	d.setTime(d.getTime() + 24 * 60 * 60 * 1000 * days);
    
    	if (currentProtocol === 'https:') {
    		document.cookie = `${name}=${value};path=/;SameSite=Strict;Secure;expires=${d.toGMTString()}`;
    	} else {
    		document.cookie = `${name}=${value};path=/;SameSite=Strict;expires=${d.toGMTString()}`;
    	}
    }
    
    // Get cookie
    function getCookie(name) {
    	const v = document.cookie.match(`(^|;) ?${name}=([^;]*)(;|$)`);
    	return v ? v[2] : null;
    }
    
    // No cookie set? Show cookie disclaimer bar
    // if (!getCookie(cookieName) && cookieEnabled) {
    if (!getCookie(cookieName)) {
    	if (cookieBar) {
    		cookieBar.classList.add(visibleClass);
    	}
    }
    
    // Cookies accepted
    function acceptCookies() {
    	setCookie(cookieName, 'YES', 365);
    	if (cookieBar) {
    		cookieBar.classList.remove(visibleClass);
    	}
    }
    
    // Button click
    if (acceptButton) {
    	acceptButton.addEventListener('click', acceptCookies);
    }
    
  • URL: /components/raw/cookie-disclaimer/cookie-disclaimer.js
  • Filesystem Path: src/molecules/cookie-disclaimer/cookie-disclaimer.js
  • Size: 1.9 KB
  • Content:
    @charset 'UTF-8';
    
    @include molecule(cookie-disclaimer) {
    	display: none;
    	position: relative;
    	z-index: z_index(foreground);
    
    	&.is-visible {
    		display: block;
    	}
    
    	@include bp-up(lg) {
    		position: fixed;
    		right: 0;
    		bottom: 0;
    		left: 0;
    	}
    
    	@include e(wrapper) {
    		width: 100%;
    		margin-bottom: 0 !important;
    		padding: rhythm(2) 0;
    	}
    
    	@include e(inner) {
    		display: flex;
    		flex-wrap: wrap;
    		margin-right: auto;
    		margin-left: auto;
    
    		@include make-container-max-widths();
    
    		@include bp-down(xl) {
    			padding-right: $grid-gutter-width;
    			padding-left: $grid-gutter-width;
    		}
    	}
    
    	@include e(inner-first) {
    		display: flex;
    		align-items: center;
    		width: 100%;
    
    		a {
    			padding: 0 0.25rem;
    			border-bottom: 0.11111rem solid $color-peacock;
    			color: $color-black;
    			text-decoration: none;
    
    			&:hover,
    			&:focus {
    				text-decoration: none;
    			}
    		}
    
    		@include bp-up(md) {
    			@include make-col(12);
    
    			padding-right: rhythm(3);
    		}
    	}
    
    	@include e(inner-second) {
    		display: flex;
    		align-items: center;
    		justify-content: flex-end;
    		width: 100%;
    		padding-top: rhythm(2);
    
    		button {
    			font-size: 18px;
    		}
    
    		@include bp-up(md) {
    			@include make-col(6);
    
    			padding-top: 0;
    		}
    	}
    
    	@include e(text) {
    		margin-bottom: 0;
    	}
    }
    
  • URL: /components/raw/cookie-disclaimer/cookie-disclaimer.scss
  • Filesystem Path: src/molecules/cookie-disclaimer/cookie-disclaimer.scss
  • Size: 1.3 KB

No notes defined.