|
|
|
@ -111,7 +111,8 @@ export class LandingPage extends ViewPlugin { |
|
|
|
|
this.verticalIcons = verticalIcons |
|
|
|
|
this.gistHandler = new GistHandler() |
|
|
|
|
const themeQuality = globalRegistry.get('themeModule').api.currentTheme().quality |
|
|
|
|
window.addEventListener('resize', () => this.adjustRightPanel()) |
|
|
|
|
window.addEventListener('resize', () => this.adjustMediaPanel()) |
|
|
|
|
window.addEventListener('click', (e) => this.hideMediaPanel(e)) |
|
|
|
|
this.twitterFrame = yo` |
|
|
|
|
<div class="px-2 ${css.media}"> |
|
|
|
|
<a class="twitter-timeline" |
|
|
|
@ -158,18 +159,29 @@ export class LandingPage extends ViewPlugin { |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
` |
|
|
|
|
this.adjustRightPanel() |
|
|
|
|
this.adjustMediaPanel() |
|
|
|
|
globalRegistry.get('themeModule').api.events.on('themeChanged', (theme) => { |
|
|
|
|
console.log("theme is ", theme.quality) |
|
|
|
|
this.onThemeChanged(theme.quality) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
adjustRightPanel () { |
|
|
|
|
adjustMediaPanel () { |
|
|
|
|
this.twitterPanel.style.maxHeight = Math.max(window.innerHeight - 150, 200) + 'px' |
|
|
|
|
this.mediumPanel.style.maxHeight = Math.max(window.innerHeight - 150, 200) + 'px' |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
hideMediaPanel (e) { |
|
|
|
|
const mediaPanelsTitle = document.getElementById('remixIDEMediaPanelsTitle') |
|
|
|
|
const mediaPanels = document.getElementById('remixIDEMediaPanels') |
|
|
|
|
if (!mediaPanelsTitle.contains(e.target) && !mediaPanels.contains(e.target)) { |
|
|
|
|
this.mediumPanel.classList.remove('d-block') |
|
|
|
|
this.mediumPanel.classList.add('d-none') |
|
|
|
|
this.twitterPanel.classList.remove('d-block') |
|
|
|
|
this.twitterPanel.classList.add('d-none') |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
onThemeChanged (themeQuality) { |
|
|
|
|
console.log("themes in listener is", themeQuality) |
|
|
|
|
let twitterFrame = yo` |
|
|
|
@ -411,11 +423,11 @@ export class LandingPage extends ViewPlugin { |
|
|
|
|
</div><!-- end of hpSections --> |
|
|
|
|
</div> |
|
|
|
|
<div class="d-flex flex-column ${css.rightPanel}"> |
|
|
|
|
<div class="d-flex pr-2 py-2 align-self-end"> |
|
|
|
|
<div class="d-flex pr-2 py-2 align-self-end" id="remixIDEMediaPanelsTitle"> |
|
|
|
|
${this.badgeTwitter} |
|
|
|
|
${this.badgeMedium} |
|
|
|
|
</div> |
|
|
|
|
<div class="mr-3 d-flex bg-light ${css.panels}"> |
|
|
|
|
<div class="mr-3 d-flex bg-light ${css.panels}" id="remixIDEMediaPanels"> |
|
|
|
|
${this.mediumPanel} |
|
|
|
|
${this.twitterPanel} |
|
|
|
|
</div> |
|
|
|
|