Préparer à embed

2023-05-05 19:50:43 -04:00 · 2023-05-05 19:50:43 -04:00 · b68859f90b
commit b68859f90b
parent d84f7bb7b6
6 changed files with 11 additions and 1 deletions
--- a/public/embed.go
+++ b/public/embed.go
@ -0,0 +1,10 @@
+package public
+
+import "embed"
+
+//go:embed static/*
+var embedFS embed.FS
+
+func GetEmbedFS() embed.FS {
+	return embedFS
+}
--- a/public/static/index.html
+++ b/public/static/index.html
@ -0,0 +1,43 @@
+<html>
+
+  <head>
+    <title>AGECEM | slider</title>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+
+    <script src="slider.js"></script>
+
+    <!-- BROKEN, brise slider.js quand inclu
+    <script src="text.js"></script>
+    !-->
+
+    <link rel="stylesheet" href="style.css">
+  </head>
+
+  <body>
+    <p id="debug"></p>
+
+    <div id="contenu">
+      <embed id="image"/>
+    </div>
+
+    <!-- BROKEN
+    <div id="bar">
+
+      <div id="date-time">
+          <div id="time"></div>
+          <div id="date"></div>
+      </div>
+
+      <div id="text-container">
+          <div id="text-content">
+            <div>Ce texte sera remplacé par jQuery!</div>
+          </div>
+      </div>
+
+  </div>
+  --!>
+
+  </body>
+
+</html>
--- a/public/static/slider.js
+++ b/public/static/slider.js
@ -0,0 +1,45 @@
+var images = [];
+var indexImages = 0;
+
+function afficherIndex() {
+  $('#debug').text(indexImages);
+}
+
+function afficherImage() {
+  $('#image').attr('src', "api/contenu/"+images[indexImages]);
+}
+
+function augmenterIndex() {
+  if (indexImages >= images.length - 1) {
+    indexImages = 0;
+  } else {
+    indexImages ++;
+  }
+}
+
+function executionLoop(){
+  //afficherIndex();
+  afficherImage();
+  augmenterIndex();
+}
+
+function obtenirContenu(){
+  var response = '';
+  $.ajax({
+    type: "GET",
+    url: window.location.origin + "/api/contenu",
+    async: false,
+    success: function(text) {
+      response = text;
+    }
+  });
+
+  console.log(response);
+  images = response.split(';');
+  console.log(images);
+}
+
+$(function(){
+  obtenirContenu();
+  var executionInterval = setInterval(executionLoop, 10000);
+});
--- a/public/static/style.css
+++ b/public/static/style.css
@ -0,0 +1,79 @@
+body {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    display: flex;
+    flex-flow: column;
+    height: 100vh;
+}
+
+embed {
+    max-width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+#contenu {
+    background-color: black;
+    text-align: center;
+    width: 100%;
+    flex: 1;
+    min-height: 0;
+}
+
+#bar {
+    width: 100%;
+    background-image: linear-gradient(to right, #033ead, #3093d1);
+    color: white;
+    font-family: 'Roboto', sans-serif;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    min-height: 75px;
+}
+
+img#bar-bg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}
+
+#time {
+    font-size: 300%;
+    height: 53px;
+}
+
+#text-content {
+    white-space: nowrap;
+    z-index: 1;
+    display: block;
+    height: 100%;
+    padding-top: 55px;
+    position: relative;
+}
+
+#text-container {
+    height: 100%;
+    background-image: linear-gradient(to right, #033ead, #3093d1);
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+    flex-grow: 1;
+}
+
+#text-content div {
+    display: block;
+    position: fixed;
+    height: 100%;
+}
+
+#date-time {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    height: 100%;
+    background-color: #033ead;
+    z-index: 1;
+    width: 225px;
+}
--- a/public/static/text.js
+++ b/public/static/text.js
@ -0,0 +1,65 @@
+// VARS
+// Vitesses
+var vitesseTexte =  4000; // En millisecondes
+
+// Coordonnées
+var pointInitial = '100%';
+var pointDestination = '-=2000px';
+
+// Messages
+var messageDiv = '#text-content div'
+var messages = [];
+var indexMessages = 0;
+
+var fontSize;
+var fontSizeLength;
+
+// FUNCS
+function animerTexte(){
+  // Diriger le texte vers la droite jusqu'à `pointDestination'.
+  // Récursivement reset la position du texte.
+  $(messageDiv).animate({left: pointDestination}, vitesseTexte, 'linear', resetTexte);
+}
+
+function resetTexte(){
+  // Remettre le texte au point initial
+  $(messageDiv).css('left', pointInitial);
+
+  // Récursivement animer le texte
+  animerTexte();
+}
+
+function updateTexte(){
+  var message = messages[indexMessages];
+
+  $(messageDiv).text(message);
+
+  augmenterIndex();
+}
+
+function augmenterIndex() {
+  if (indexMessages >= messages.length - 1) {
+    indexMessages = 0;
+  } else {
+    indexMessages ++;
+  }
+}
+
+function initialiserMessages(){
+  fontSize = $(messageDiv).css('fontSize');
+  fontSizeLength = fontSize.length;
+
+  // TODO Importer messages
+  messages = ['hello, world!'];
+
+
+  // TODO pointDestination = -1 * longueurMessage
+  //pointDestination = messages[0].width * fontSize.substring(fontSize.length-2);
+  pointDestination = messages[indexMessages].width;
+}
+
+// EXEC
+$(function(){
+  //initialiserMessages();
+  resetTexte();
+});