<div class="m-continue-video-guide js-guide-continue ">
    <div class="m-continue-video-guide__inner">
        <a href="/components/detail/video-guide.html" class="m-continue-video-guide__continue js-guide-continue-link" data-alt-text="Fortsätt den guidade turen">
            <span class="u-visuallyhidden">Guidad tur</span>
            <div class="m-continue-video-guide__arrow"></div>
        </a>
        <progress-ring class="m-continue-video-guide__progressbar" stroke="4" radius="50" progress="70"></progress-ring>
        <img class="m-continue-video-guide__image js-guide-continue-image" src="/assets/images/sticky-guide.png" alt="Fortsätt den guidade turen">
    </div>
</div>
<div class="m-continue-video-guide js-guide-continue {{#if additional_classes}}{{additional_classes}}{{/if}}">
	<div class="m-continue-video-guide__inner">
		<a href="/components/detail/video-guide.html" class="m-continue-video-guide__continue js-guide-continue-link" data-alt-text="Fortsätt den guidade turen">
			<span class="u-visuallyhidden">Guidad tur</span>
			<div class="m-continue-video-guide__arrow"></div>
		</a>
		<progress-ring class="m-continue-video-guide__progressbar" stroke="4" radius="50" progress="70"></progress-ring>
		<img class="m-continue-video-guide__image js-guide-continue-image" src="/assets/images/sticky-guide.png" alt="Fortsätt den guidade turen">
	</div>
</div>
{
  "additional_classes": false
}
  • Content:
    import className from '../../assets/js/className';
    
    class ProgressRing extends HTMLElement {
    	constructor() {
    		super();
    		const stroke = this.getAttribute('stroke');
    		const radius = this.getAttribute('radius');
    		const normalizedRadius = radius - stroke * 2;
    		this.circumference = normalizedRadius * 2 * Math.PI;
    
    		this.root = this.attachShadow({ mode: 'open' });
    		this.root.innerHTML = `
    		<svg
    		height="${radius * 2}"
    		width="${radius * 2}"
    		>
    		<circle
    		stroke="white"
    		stroke-dasharray="${this.circumference} ${this.circumference}"
    		style="stroke-dashoffset:${this.circumference}"
    		stroke-width="${stroke}"
    		fill="transparent"
    		r="${normalizedRadius}"
    		cx="${radius}"
    		cy="${radius}"
    		/>
    		</svg>
    
    		<style>
    		circle {
    			transition: stroke-dashoffset 0.35s;
    			transform: rotate(-90deg);
    			transform-origin: 50% 50%;
    		}
    		</style>
    		`;
    	}
    
    	setProgress(percent) {
    		const offset = this.circumference - ((percent / 100) * this.circumference);
    		const circle = this.root.querySelector('circle');
    		circle.style.strokeDashoffset = offset;
    	}
    
    	static get observedAttributes() {
    		return ['progress'];
    	}
    
    	attributeChangedCallback(name, oldValue, newValue) {
    		if (name === 'progress') {
    			this.setProgress(newValue);
    		}
    	}
    }
    
    window.customElements.define('progress-ring', ProgressRing);
    
    // Get value from sessionStorage if present
    if (sessionStorage.getItem('InmsCurrentTime')) {
    	const videoCurrentTime = sessionStorage.getItem('InmsCurrentTime');
    	const videoDuration = sessionStorage.getItem('InmsDuration');
    	const continueElement = document.querySelector('.js-guide-continue');
    	const progressRing = document.querySelector('progress-ring');
    	const continueLink = document.querySelector('.js-guide-continue-link');
    	const guideURL = sessionStorage.getItem('InmsCurrentGuideURL');
    	const guideImage = sessionStorage.getItem('InmsCurrentGuideImage');
    
    	if ((videoCurrentTime > 0)
    		&& progressRing
    		&& continueElement
    		&& guideImage
    		&& continueLink) {
    		const alternativeText = continueLink.dataset.altText;
    		const currentProgress = videoCurrentTime / videoDuration;
    		const currentGuideImage = document.querySelector('.js-guide-continue-image');
    
    		continueElement.classList.add(className('m-continue-video-guide--has-progress'));
    		continueLink.setAttribute('href', guideURL);
    		currentGuideImage.src = guideImage;
    		continueLink.querySelector('span').innerText = alternativeText;
    		// Calculate percentage played
    		progressRing.setAttribute('progress', Math.floor(currentProgress * 100));
    	}
    }
    
  • URL: /components/raw/continue-video-guide/continue-video-guide.js
  • Filesystem Path: src/molecules/continue-video-guide/continue-video-guide.js
  • Size: 2.5 KB
  • Content:
    @charset "UTF-8";
    
    @include molecule(continue-video-guide) {
    	position: fixed;
    	bottom: 0;
    	right: 0;
    	z-index: z_index(middlegroundImportant);
    	width: 100px;
    	height: calc(100px + 23px + rhythm(1));
    	transform: scale(0.7);
    
    	@include bp-up(md) {
    		transform: scale(1);
    		bottom: rhythm(2);
    		right: rhythm(2);
    	}
    
    	@include e(inner) {
    		position: relative;
    	}
    
    	@include e(progressbar) {
    		display: none;
    	}
    
    	@include e(continue) {
    		position: absolute;
    		z-index: 3;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		width: 100px;
    		height: 100px;
    		border-color: $color-snow;
    
    		&::after {
    			content: 'Guidad tur';
    			display: block;
    			position: absolute;
    			left: auto;
    			right: auto;
    			bottom: 0;
    			transform: translateY(calc(100% + rhythm(1)));
    			text-align: center;
    			background-color: $color-peacock-light;
    			font-size: $size-medium;
    			font-family: $font-family-headings;
    			border-radius: $border-radius;
    			color: $color-cyberspace;
    			padding: rhythm(0.5) rhythm(1);
    			line-height: 1;
    		}
    	}
    
    	@include m(has-progress) {
    		@include e(continue) {
    			&::after {
    				content: 'Fortsätt';
    			}
    
    			@include e(arrow) {
    				width: 0;
    				height: 0;
    				border-style: solid;
    				border-width: 15px 0 15px 20px;
    				transition: border-width 0.25s ease-out;
    				border-bottom: 15px solid transparent;
    				border-left-color: inherit;
    				border-left-style: solid;
    				border-left-width: 20px;
    				border-right: 0 solid transparent;
        border-top: 15px solid transparent;
    			}
    
    			&:hover,
    			&:focus {
    				> div {
    					border-width: 20px 0 20px 30px;
    				}
    			}
    		}
    
    		@include e(progressbar) {
    			display: block;
    			position: absolute;
    			z-index: 2;
    			border-radius: 50%;
    
    			&::after {
    				position: absolute;
    				top: 6px;
    				left: 6px;
    				width: 88px;
    				height: 88px;
    				border-radius: 50%;
    				content: '';
    				display: block;
    				border: 4px solid rgba($color-snow, 0.5);
    			}
    		}
    	}
    
    	@include e(image) {
    		position: absolute;
    		z-index: 1;
    		width: 100px;
    		height: 100px;
    		border-radius: 50%;
    	}
    }
  • URL: /components/raw/continue-video-guide/continue-video-guide.scss
  • Filesystem Path: src/molecules/continue-video-guide/continue-video-guide.scss
  • Size: 2 KB

Continue Video Guide

This component is dependent on the Video Guide Component. Continuing a guided tour is only possible if the video player has a saved timestamp in sessionStorage