Migration of emby-buttton, paper-icon-button-light, emby-collapse, emby-imput to ES6 modules

This commit is contained in:
Cameron 2020-07-15 11:41:59 +01:00
parent fd853a180a
commit 9e2d289265
5 changed files with 67 additions and 39 deletions

View file

@ -1,18 +1,22 @@
define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], function (browser) {
'use strict';
import browser from 'browser';
import 'css!./emby-collapse';
import 'registerElement';
import 'emby-button';
var EmbyButtonPrototype = Object.create(HTMLDivElement.prototype);
/* eslint-disable indent */
const EmbyButtonPrototype = Object.create(HTMLDivElement.prototype);
function slideDownToShow(button, elem) {
elem.classList.remove('hide');
elem.classList.add('expanded');
elem.style.height = 'auto';
var height = elem.offsetHeight + 'px';
const height = elem.offsetHeight + 'px';
elem.style.height = '0';
// trigger reflow
var newHeight = elem.offsetHeight;
const newHeight = elem.offsetHeight;
elem.style.height = height;
setTimeout(function () {
@ -24,7 +28,7 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
elem.style.height = 'auto';
}, 300);
var icon = button.querySelector('.material-icons');
const icon = button.querySelector('.material-icons');
//icon.innerHTML = 'expand_less';
icon.classList.add('emby-collapse-expandIconExpanded');
}
@ -33,7 +37,7 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
elem.style.height = elem.offsetHeight + 'px';
// trigger reflow
var newHeight = elem.offsetHeight;
const newHeight = elem.offsetHeight;
elem.classList.remove('expanded');
elem.style.height = '0';
@ -46,15 +50,15 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
}
}, 300);
var icon = button.querySelector('.material-icons');
const icon = button.querySelector('.material-icons');
//icon.innerHTML = 'expand_more';
icon.classList.remove('emby-collapse-expandIconExpanded');
}
function onButtonClick(e) {
var button = this;
var collapseContent = button.parentNode.querySelector('.collapseContent');
const button = this;
const collapseContent = button.parentNode.querySelector('.collapseContent');
if (collapseContent.expanded) {
collapseContent.expanded = false;
@ -73,18 +77,18 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
this.classList.add('emby-collapse');
var collapseContent = this.querySelector('.collapseContent');
const collapseContent = this.querySelector('.collapseContent');
if (collapseContent) {
collapseContent.classList.add('hide');
}
var title = this.getAttribute('title');
const title = this.getAttribute('title');
var html = '<button is="emby-button" type="button" on-click="toggleExpand" id="expandButton" class="emby-collapsible-button iconRight"><h3 class="emby-collapsible-title" title="' + title + '">' + title + '</h3><span class="material-icons emby-collapse-expandIcon expand_more"></span></button>';
const html = '<button is="emby-button" type="button" on-click="toggleExpand" id="expandButton" class="emby-collapsible-button iconRight"><h3 class="emby-collapsible-title" title="' + title + '">' + title + '</h3><span class="material-icons emby-collapse-expandIcon expand_more"></span></button>';
this.insertAdjacentHTML('afterbegin', html);
var button = this.querySelector('.emby-collapsible-button');
const button = this.querySelector('.emby-collapsible-button');
button.addEventListener('click', onButtonClick);
@ -97,4 +101,5 @@ define(['browser', 'css!./emby-collapse', 'registerElement', 'emby-button'], fun
prototype: EmbyButtonPrototype,
extends: 'div'
});
});
/* eslint-enable indent */