diff --git a/src/main/resources/kinosearch/webapp/static/js/ksplayer.js b/src/main/resources/kinosearch/webapp/static/js/ksplayer.js index fa062d3..0cc0b3a 100644 --- a/src/main/resources/kinosearch/webapp/static/js/ksplayer.js +++ b/src/main/resources/kinosearch/webapp/static/js/ksplayer.js @@ -1,11 +1,91 @@ const KSPlayer = function(containerId) { /* --- FIELDS -------------- */ - var videoType = 'unknown'; - var isShowTitle = false; + let videoType = 'unknown'; + let isShowTitle = false; /* --- PRIVATE FUNCTIONS --- */ + function createSerialMenuElement() { + let div = document.createElement('div'); + div.id = 'pl-serial'; + div.className = 'dropdown'; + div.style = 'display: inline-block'; + + let button = document.createElement('button'); + button.className = 'btn btn-default dropdown-toggle'; + button.type = 'button'; + button.id = 'dropdownSerial'; + button.setAttribute('data-toggle', 'dropdown'); + button.setAttribute('aria-haspopup', 'true'); + button.setAttribute('aria-expanded', 'true'); + + let text = document.createTextNode('Serials'); + + let span = document.createElement('span'); + span.className = 'caret'; + span.style = 'margin-left: .5em'; + + let ul = document.createElement('ul'); + ul.id = 'pl-serial-menu'; + ul.className = 'dropdown-menu'; + ul.setAttribute('aria-labelledby', 'dropdownSerial'); + + let li = document.createElement('li'); + let a = document.createElement('a'); + a.href = '#'; + a.innerText = 'Serial'; + + li.appendChild(a); + ul.appendChild(li); + button.appendChild(text); + button.appendChild(span); + div.appendChild(button); + div.appendChild(ul); + + return div; + } + + function createSeasonMenuElement() { + let div = document.createElement('div'); + div.id = 'pl-season'; + div.className = 'dropdown'; + div.style = 'display: inline-block'; + + let button = document.createElement('button'); + button.className = 'btn btn-default dropdown-toggle'; + button.type = 'button'; + button.id = 'dropdownSeason'; + button.setAttribute('data-toggle', 'dropdown'); + button.setAttribute('aria-haspopup', 'true'); + button.setAttribute('aria-expanded', 'true'); + + let text = document.createTextNode('Seasons'); + + let span = document.createElement('span'); + span.className = 'caret'; + span.style = 'margin-left: .5em'; + + let ul = document.createElement('ul'); + ul.id = 'pl-season-menu'; + ul.className = 'dropdown-menu'; + ul.setAttribute('aria-labelledby', 'dropdownSeason'); + + let li = document.createElement('li'); + let a = document.createElement('a'); + a.href = '#'; + a.innerText = 'Season'; + + li.appendChild(a); + ul.appendChild(li); + button.appendChild(text); + button.appendChild(span); + div.appendChild(button); + div.appendChild(ul); + + return div; + } + /* --- CONSTRUCTOR --------- */ const containerElement = document.getElementById(containerId); @@ -19,9 +99,16 @@ const KSPlayer = function(containerId) { videoElement.setAttribute('controls', 'controls'); videoElement.setAttribute('preload', 'none'); - var titleElement = document.createElement('h2'); + let titleElement = document.createElement('h2'); titleElement.id = 'title'; + let seasonMenu = createSeasonMenuElement(); + let serialMenu = createSerialMenuElement(); + + containerElement.appendChild(seasonMenu); + containerElement.appendChild(serialMenu); + containerElement.appendChild(document.createElement('br')); + containerElement.appendChild(document.createElement('br')); containerElement.appendChild(videoElement); /* --- FUNCTIONS ----------- */