ableplayer/demos/translations.html at develop · ableplayer/ableplayer

Repository navigation

History

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

<!DOCTYPE html>

<head>

<title>View translations | Able Player Demos</title>

$(document).ready(function() {

let player = new AblePlayer('#video1');

let media = document.querySelector( '#video1' );

let header = document.querySelector( 'header' );

let nav = document.querySelector( 'nav' );

let content = document.querySelector( '.content' );

let button = document.querySelector( '#select_lang' );

let translations = player.getSupportedLangs();

let select = document.querySelector( '#lang_selector' );

let html = document.querySelector( 'html' );

let notification = document.querySelector( '.notification' );

for( const [key,value] of Object.entries(translations) ) {

let option = document.createElement( 'option' );

option.setAttribute( 'value', key );

option.innerText = value;

select.insertAdjacentElement( 'beforeend', option );

};

button.addEventListener( 'click', function() {

let value = select.value;

let langName = select.options[select.selectedIndex].text;

const langCodePattern = /^[a-z]{2,3}(?:-[A-Z]{2})?$/;

let safeValue = langCodePattern.test(value) ? value : 'en';

if ( value === '' ) {

safeValue = 'en';

html.setAttribute( 'lang', 'en' );

header.removeAttribute( 'lang' );

nav.removeAttribute( 'lang' );

content.removeAttribute( 'lang' );

let wrapper = media.closest( '.able-wrapper' );

wrapper.replaceWith( player.media );

player = new AblePlayer( '#video1' );

} else {

html.setAttribute( 'lang', safeValue );

header.setAttribute( 'lang', 'en' );

nav.setAttribute( 'lang', 'en' );

content.setAttribute( 'lang', 'en' );

let wrapper = media.closest( '.able-wrapper' );

wrapper.replaceWith( player.media );

player = new AblePlayer( '#video1' );

}

notification.innerHTML = '<p>Player refreshed in your selected language: <strong>' + langName + '</strong>.</p>';

fetch( '../translations/' + safeValue + '.json' )

.then(response => response.json())

.then(data => {

const emptyKeys = Object.keys(data).filter( key => ! data[key] );

let emptyCount = emptyKeys.length;

let link = 'https://github.com/ableplayer/ableplayer/blob/main/translations/' + safeValue + '.json';

let p = document.createElement('p');

p.textContent = 'The ' + langName + ' translation has ' + emptyCount + ' untranslated strings: ' + emptyKeys.join(', ') + '. ';

let a = document.createElement('a');

a.href = link;

a.textContent = 'Help translate it!';

p.appendChild(a);

notification.appendChild(p);

})

.catch(error => console.error('Translations not loaded.', error));

})

});

</script>

</head>

<body>

<div class="title">Able Player Demos</div>

</header>

</nav>

<main>

<h1>View translations</h1>

<p>Use this view to check translations of Able Player.</p>

<p>

<label for="lang_selector">Select language</label><br />

<option value="">Default Language</option>

</select>

</p>

<button type="button" id="select_lang">Switch Language</button>

</div>

</div>

</video>

</div>

</main>

</div>

</body>

</html>

FilesExpand file tree

translations.html

Latest commit

History

translations.html

File metadata and controls