BETA Hej! Denna webbplats är under utveckling. Bidra gärna med feedback!
Stilguide
Bidra

Filmer 

<div class="rh-video">
    <video loop src="https://media.istockphoto.com/videos/in-the-hospital-midwife-gives-newborn-baby-to-a-mother-to-hold-video-id939010064" aria-label='Text som beskriver filmen'>Din webbläsare kan inte visa video</video>
</div>
 
<div class="{{name}}">
    <video loop src="{{link}}" aria-label='Text som beskriver filmen'>Din webbläsare kan inte visa video</video>
</div>
 
{
  "link": "https://media.istockphoto.com/videos/in-the-hospital-midwife-gives-newborn-baby-to-a-mother-to-hold-video-id939010064",
  "name": "rh-video"
}
  • Content: 
    .rh-video {
    position: relative;

    video{
        width: 100%;
    }

    .video-button {
        position: absolute;
        /* top: 35% !important;
        left: 45% !important; */
        top: 35%;
        left: 45%;
        width: 2.5em; //em(40);
        height: 2.5em; //em(40);
        box-sizing: border-box;
        cursor: pointer;
        background: $grey-base;
        border-radius: 50%;

        @include medium {
            width: 5.625em; //em(90);
            height: 5.625em; //em(90);
        }

        .video-button-content {

            .feather {
                color: $white;
                float: left;
                line-height: $line-height--small; //1;
                margin-top: -0.5em;
                padding-top: 50%;
                text-align: center;
                width: 100%;
                //font-family:"feather" !important;
                font-family: $icon--font-family;
                font-size: $font-size--xl; //em(20);
                @include medium { font-size: 3.125em;}
                font-style:normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        }
    }
    .video-button.is-hidden {
        display: none;
    }
}
  • URL: /components/raw/video/_video.scss
  • Filesystem Path: components/Molecules/video/_video.scss
  • Size: 1.3 KB
  • Content: 
    {
    "name": "regionhalland/video",
    "description": "video",
    "type": "styleguide-molecule",
    "license": "GPL-3.0",
    "authors": [
        {
            "name": "Region Halland",
            "email": "webbplatser@regionhalland.se"
        }
    ],
    "require": {}
}
  • URL: /components/raw/video/composer.json
  • Filesystem Path: components/Molecules/video/composer.json
  • Size: 279 Bytes
  • Content: 
    var videoPlayButton,
    videoWrapper = document.getElementsByClassName('rh-video')[0],
    video = document.getElementsByTagName('video')[0],
    videoMethods = {
        renderVideoPlayButton: function() {
            if (videoWrapper !== undefined && videoWrapper.contains(video)) {
                this.formatVideoPlayButton();
                video.classList.add('has-media-controls-hidden');
                videoPlayButton = document.getElementsByClassName('video-button')[0];
                videoPlayButton.addEventListener('click', this.hideVideoPlayButton);
            }
        },

        formatVideoPlayButton: function() {
            videoWrapper.insertAdjacentHTML('beforeend', '\
            <div class="video-button"><div class="video-button-content"> <i class="feather icon-play"></i> </div></div>\
            ');
        },

        hideVideoPlayButton: function() {
            video.play();
            videoPlayButton.classList.add('is-hidden');
            video.classList.remove('has-media-controls-hidden');
            video.setAttribute('controls', 'controls');
        }
    };

videoMethods.renderVideoPlayButton();
  • URL: /components/raw/video/video.js
  • Filesystem Path: components/Molecules/video/video.js
  • Size: 1.1 KB

Molekylen “Video”

Planerad utveckling

  • Bugg: Playknapp renderas bara på första videon.
  • Justera klassnamn enligt BEM.
  • Refaktorera js till jQuery för konsekvent beteende.
  • Använd “circle button”-atomen för playknappen.
  • Analysera hur mycket av nuvarande js som är nödvändig.
  • Settingsfil efter att namngivningen är färdig.

Versionshistorik

  • 1.0.0.20200203 Globala variabler används.
  • 1.0.0.20200110
    • Planerad utveckling listad
    • Linting
  • 1.0.0.20191122 Flyttat till gitrepo