Skip to content

Commit

Permalink
Add dynamic layout for presenter
Browse files Browse the repository at this point in the history
  • Loading branch information
alxlion committed Jun 8, 2024
1 parent 90f5faf commit ad10e0f
Show file tree
Hide file tree
Showing 6 changed files with 177 additions and 123 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
### Features

- Add Dutch translation #91 (@robinaartsma)
- Add dynamic layout for the presenter view

### Fixes and improvements

Expand All @@ -12,6 +13,7 @@
- Fix unknown locales
- Add validation to avoid user to self assign as a facilitator
- Toggle for message reactions is replaced with toggle for message and global reactions
- Improve embed integration in presenter view

## v2.0.0

Expand Down
35 changes: 22 additions & 13 deletions assets/js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,13 @@ Hooks.TourGuide = {
Hooks.Split = {
mounted() {
const type = this.el.dataset.type;
const id = this.el.id;
const gutter = this.el.dataset.gutter;
const forceLayout = this.el.classList.contains("grid-cols-[1fr]");
const columnSlitValue =
localStorage.getItem("column-split") || "1fr 10px 1fr";
const rowSlitValue = localStorage.getItem("row-split") || "1fr 10px 1fr";
localStorage.getItem(`column-split-${id}`) || "1fr 10px 1fr";
const rowSlitValue =
localStorage.getItem(`row-split-${id}`) || "1fr 10px 1fr";

if (type === "column") {
this.columnSplit = Split({
Expand All @@ -101,10 +104,12 @@ Hooks.Split = {
],
onDragEnd: () => {
const currentPosition = this.el.style["grid-template-columns"];
localStorage.setItem("column-split", currentPosition);
localStorage.setItem(`column-split-${id}`, currentPosition);
},
});
this.el.style["grid-template-columns"] = columnSlitValue;
if (!forceLayout) {
this.el.style["grid-template-columns"] = columnSlitValue;
}
} else {
this.rowSplit = Split({
rowGutters: [
Expand All @@ -115,21 +120,22 @@ Hooks.Split = {
],
onDragEnd: () => {
const value = this.el.style["grid-template-rows"];
localStorage.setItem("row-split", value);
localStorage.setItem(`row-split-${id}`, value);
},
});
this.el.style["grid-template-rows"] = rowSlitValue;
if (!forceLayout) {
this.el.style["grid-template-rows"] = rowSlitValue;
}
}
},
updated() {
if (this.columnSplit) {
const value = localStorage.getItem("column-split") || "1fr 10px 1fr";
this.el.style["grid-template-columns"] = value;
}
if (this.rowSplit) {
const value = localStorage.getItem("row-split") || "1fr 10px 1fr";
this.el.style["grid-template-rows"] = value;
const id = this.el.id;
const forceLayout = this.el.classList.contains("grid-cols-[1fr]");
if (forceLayout) {
return;
}

this.mounted();
},
destroyed() {
if (this.columnSplit) {
Expand Down Expand Up @@ -315,6 +321,9 @@ Hooks.Presenter = {
this.presenter = new Presenter(this);
this.presenter.init();
},
updated() {
this.presenter.update();
},
};
Hooks.Manager = {
mounted() {
Expand Down
197 changes: 117 additions & 80 deletions assets/js/presenter.js
Original file line number Diff line number Diff line change
@@ -1,124 +1,161 @@
import { tns } from "tiny-slider"
import { tns } from "tiny-slider";

export class Presenter {

constructor(context) {
this.context = context
this.currentPage = parseInt(context.el.dataset.currentPage)
this.maxPage = parseInt(context.el.dataset.maxPage)
this.hash = context.el.dataset.hash
this.context = context;
this.currentPage = parseInt(context.el.dataset.currentPage);
this.maxPage = parseInt(context.el.dataset.maxPage);
this.hash = context.el.dataset.hash;
}

init() {

init(refresh = false) {
this.slider = tns({
container: '#slider',
container: "#slider",
items: 1,
mode: 'gallery',
slideBy: 'page',
mode: "gallery",
slideBy: "page",
center: true,
autoplay: false,
controls: false,
swipeAngle: false,
startIndex: this.currentPage,
loop: false,
nav: false
nav: false,
});

this.context.handleEvent('page', data => {
if (refresh) {
return;
}

this.context.handleEvent("page", (data) => {
//set current page
this.currentPage = parseInt(data.current_page)
this.slider.goTo(data.current_page)
})
this.currentPage = parseInt(data.current_page);
this.slider.goTo(data.current_page);
});

this.context.handleEvent('chat-visible', data => {
this.context.handleEvent("chat-visible", (data) => {
if (data.value) {
document.getElementById("post-list").classList.remove("animate__animated", "animate__fadeOutLeft")
document.getElementById("post-list").classList.add("animate__animated", "animate__fadeInLeft")

document.getElementById("pinned-post-list").classList.remove("animate__animated", "animate__fadeOutLeft")
document.getElementById("pinned-post-list").classList.add("animate__animated", "animate__fadeInLeft")
document
.getElementById("post-list")
.classList.remove("animate__animated", "animate__fadeOutLeft");
document
.getElementById("post-list")
.classList.add("animate__animated", "animate__fadeInLeft");

document
.getElementById("pinned-post-list")
.classList.remove("animate__animated", "animate__fadeOutLeft");
document
.getElementById("pinned-post-list")
.classList.add("animate__animated", "animate__fadeInLeft");
} else {
document.getElementById("post-list").classList.remove("animate__animated", "animate__fadeInLeft")
document.getElementById("post-list").classList.add("animate__animated", "animate__fadeOutLeft")

document.getElementById("pinned-post-list").classList.remove("animate__animated", "animate__fadeInLeft")
document.getElementById("pinned-post-list").classList.add("animate__animated", "animate__fadeOutLeft")
document
.getElementById("post-list")
.classList.remove("animate__animated", "animate__fadeInLeft");
document
.getElementById("post-list")
.classList.add("animate__animated", "animate__fadeOutLeft");

document
.getElementById("pinned-post-list")
.classList.remove("animate__animated", "animate__fadeInLeft");
document
.getElementById("pinned-post-list")
.classList.add("animate__animated", "animate__fadeOutLeft");
}
})

});

this.context.handleEvent('poll-visible', data => {
this.context.handleEvent("poll-visible", (data) => {
if (data.value) {
document.getElementById("poll").classList.remove("animate__animated", "animate__fadeOut")
document.getElementById("poll").classList.add("animate__animated", "animate__fadeIn")
document
.getElementById("poll")
.classList.remove("animate__animated", "animate__fadeOut");
document
.getElementById("poll")
.classList.add("animate__animated", "animate__fadeIn");
} else {
document.getElementById("poll").classList.remove("animate__animated", "animate__fadeIn")
document.getElementById("poll").classList.add("animate__animated", "animate__fadeOut")
document
.getElementById("poll")
.classList.remove("animate__animated", "animate__fadeIn");
document
.getElementById("poll")
.classList.add("animate__animated", "animate__fadeOut");
}
})
});

this.context.handleEvent('join-screen-visible', data => {
this.context.handleEvent("join-screen-visible", (data) => {
if (data.value) {
document.getElementById("joinScreen").classList.remove("animate__animated", "animate__fadeOut")
document.getElementById("joinScreen").classList.add("animate__animated", "animate__fadeIn")
document
.getElementById("joinScreen")
.classList.remove("animate__animated", "animate__fadeOut");
document
.getElementById("joinScreen")
.classList.add("animate__animated", "animate__fadeIn");
} else {
document.getElementById("joinScreen").classList.remove("animate__animated", "animate__fadeIn")
document.getElementById("joinScreen").classList.add("animate__animated", "animate__fadeOut")
document
.getElementById("joinScreen")
.classList.remove("animate__animated", "animate__fadeIn");
document
.getElementById("joinScreen")
.classList.add("animate__animated", "animate__fadeOut");
}
})
});

window.addEventListener('keyup', (e) => {
window.addEventListener("keyup", (e) => {
if (e.target.tagName.toLowerCase() != "input") {
e.preventDefault()
e.preventDefault();

switch (e.key) {
case 'f': // F
this.fullscreen()
break
case 'ArrowUp':
window.opener.dispatchEvent(new KeyboardEvent('keydown', { 'key': 'ArrowUp' }));
break
case 'ArrowLeft':
window.opener.dispatchEvent(new KeyboardEvent('keydown', { 'key': 'ArrowLeft' }));
break
case 'ArrowRight':
window.opener.dispatchEvent(new KeyboardEvent('keydown', { 'key': 'ArrowRight' }));
break
case 'ArrowDown':
window.opener.dispatchEvent(new KeyboardEvent('keydown', { 'key': 'ArrowDown' }));
break
case "f": // F
this.fullscreen();
break;
case "ArrowUp":
window.opener.dispatchEvent(
new KeyboardEvent("keydown", { key: "ArrowUp" })
);
break;
case "ArrowLeft":
window.opener.dispatchEvent(
new KeyboardEvent("keydown", { key: "ArrowLeft" })
);
break;
case "ArrowRight":
window.opener.dispatchEvent(
new KeyboardEvent("keydown", { key: "ArrowRight" })
);
break;
case "ArrowDown":
window.opener.dispatchEvent(
new KeyboardEvent("keydown", { key: "ArrowDown" })
);
break;
}
}
});
}

fullscreen() {
update() {
this.init(true);
}

var docEl = document.getElementById("presenter")
fullscreen() {
var docEl = document.getElementById("presenter");

try {
docEl.webkitRequestFullscreen()
.then(function () {
})
.catch(function (error) {

});
docEl
.webkitRequestFullscreen()
.then(function () {})
.catch(function (error) {});
} catch (e) {
docEl.requestFullscreen()
.then(function () {
})
.catch(function (error) {
});

docEl.mozRequestFullScreen()
.then(function () {
})
.catch(function (error) {
});
docEl
.requestFullscreen()
.then(function () {})
.catch(function (error) {});

docEl
.mozRequestFullScreen()
.then(function () {})
.catch(function (error) {});
}


}

}
1 change: 0 additions & 1 deletion lib/claper/events/event.ex
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ defmodule Claper.Events.Event do
end

def update_changeset(event, attrs) do

event
|> cast(attrs, [:name, :code, :started_at, :expired_at, :audience_peak])
|> cast_assoc(:presentation_file)
Expand Down
6 changes: 2 additions & 4 deletions lib/claper_web/live/event_live/manager_settings_component.ex
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,9 @@ defmodule ClaperWeb.EventLive.ManagerSettingsComponent do
</span>
</div>
<div class={"#{if !@current_poll, do: 'opacity-50' } flex space-x-2 items-center mt-3"}>
<div class="flex space-x-2 items-center mt-3">
<ClaperWeb.Component.Input.check
key={:poll_visible}
disabled={!@current_poll}
checked={@state.poll_visible}
shortcut={if @create == nil, do: "R", else: nil}
/>
Expand Down Expand Up @@ -137,10 +136,9 @@ defmodule ClaperWeb.EventLive.ManagerSettingsComponent do
</span>
</div>
<div class={"#{if !@current_poll, do: 'opacity-50' } flex space-x-2 items-center mt-3"}>
<div class="flex space-x-2 items-center mt-3">
<ClaperWeb.Component.Input.check
key={:show_poll_results_enabled}
disabled={!@current_poll}
checked={@state.show_poll_results_enabled}
shortcut={if @create == nil, do: "F", else: nil}
/>
Expand Down
Loading

0 comments on commit ad10e0f

Please sign in to comment.