Skip to content

Commit

Permalink
Merge pull request #13 from TRMSC/template-hub-integration
Browse files Browse the repository at this point in the history 
Template-hub-integration #5
  • Loading branch information
@TRMSC
TRMSC authored Nov 8, 2023
2 parents 0c51f0b + e583a23 commit 58a9378
Show file tree
Hide file tree
Showing 4 changed files with 128 additions and 28 deletions.
23 changes: 14 additions & 9 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ <h2>
</p>
<p>
<u>Der Imagescene Generator befindet sich derzeit noch in einer Beta-Phase.</u>
Die grundlegenden Funktionen sind weitestgehend stabil, während jedoch für die nächsten Schritten zentrale visuelle sowie funktionelle Anpassungen vorgesehen sind.
Die grundlegenden Funktionen sind weitestgehend stabil, während für die nächsten Schritte noch visuelle sowie funktionelle Anpassungen vorgesehen sind.
</p>
<p>
<a href="https://github.com/TRMSC/imagescene-generator/issues" target="_blank"><input type="button" value="Issues aufrufen"></a>
Expand Down Expand Up @@ -148,13 +148,6 @@ <h3>
</sub>
</div>
<div class="select-container">
<div>
<label for="imagescene-template" class="miniheading">Stil:</label>
<select id="imagescene-template" name="imagescene-template">
<option value="indian-summer">Indian Summer</option>
<option value="bubbles">Bubbles</option>
</select>
</div>
<div>
<label for="imagescene-w">Breite:</label>
<input type="number" id="imagescene-w" name="imagescene-w" min="0">
Expand All @@ -166,7 +159,19 @@ <h3>
</div>
<div class="input-container">
<sub>
Breite und Höhe beziehen sich auf die Maße des verwendeten Bildes. Entscheidend ist das Seitenverhältnis, sodass die Einheit nicht beachtet werden muss.
Breite und Höhe beziehen sich auf die Ausgangsmaße des verwendeten Bildes. Entscheidend ist das Seitenverhältnis, sodass die Einheit nicht beachtet werden muss.
</sub>
</div>
<div class="select-container">
<div>
<label for="imagescene-template" class="miniheading">Stil:</label>
<select id="imagescene-template" name="imagescene-template">
</select>
</div>
</div>
<div class="input-container">
<sub>
<span id="template-name" class="ic-bold"></span><span> ist eine Vorlage von </span><span id="template-author" class="ic-bold"></span> <span id="template-description"></span>
</sub>
</div>
<div class="input-container">
Expand Down
106 changes: 90 additions & 16 deletions docs/src/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,20 @@
------------------------------------------------------------------------------------------------*/

/**
* Define const variables
* Define global variables
*
* @param {array} templatesData Empty array for the templates.json content
* @param {array} templatePath Path to the template directory depending on github or server adress
* @param {array} shareData Site information for share method
*
*/
let templatesData = [];
let templatesPath;
const shareData = {
title: 'Imagescene Generator | TRMSC',
text: 'Create dynamic scenes from images | TRMSC',
url: window.location
}
};


/**
Expand All @@ -34,6 +38,7 @@ window.onload = function() {

// Call functions
addYear();
loadTemplates();
listenEvents();

// Return
Expand Down Expand Up @@ -107,7 +112,10 @@ listenEvents = () => {

// Update status when template was changed
let templateSelect = document.getElementById('imagescene-template');
templateSelect.addEventListener('change', changeStatus);
templateSelect.addEventListener('change', function () {
selectTemplates();
changeStatus();
});

// Update status when width input was changes
let width = document.getElementById('imagescene-w');
Expand Down Expand Up @@ -216,6 +224,75 @@ changeStatus = () => {
};


/**
* Load templates from templates.json
*
* @function loadTemplates
* @returns {void}
*
*/
loadTemplates = () => {

// Build path
const baseUrl = window.location.href;
const originPath = 'https://raw.githubusercontent.com/TRMSC/imagescene-generator/main/templates/';
const relativePath = '../templates/';
templatesPath = baseUrl.includes('github.io') ? originPath : relativePath;
let json = templatesPath + 'templates.json';

// Fetch data
fetch(json)
.then(response => response.json())
.then(data => {
// Handle template data
templatesData = data.templates;
let templatesSelect = document.getElementById('imagescene-template');

// Create options
templatesData.forEach((template, index) => {
const option = document.createElement('option');
option.textContent = template.name;
option.value = template.filename;
if (template.default === true) option.selected = 'selected';
templatesSelect.appendChild(option);
});

// Handle template selection
selectTemplates();

})
.catch(error => {
console.error('Error when loading templates.json: ' + error);
});

};


/**
* Handle template selection
*
* @function selectTemplates
* @returns {void}
*
*/
selectTemplates = () => {

// Get selection
let templatesSelect = document.getElementById('imagescene-template');
const selectedFilename = templatesSelect.value;
const selectedTemplate = templatesData.find(template => template.filename === selectedFilename);

// Adjust details
const templatesName = document.getElementById('template-name');
const templatesAuthor = document.getElementById('template-author');
const templatesDescription = document.getElementById('template-description');
templatesName.textContent = selectedTemplate.name;
templatesAuthor.textContent = selectedTemplate.author;
templatesDescription.textContent = selectedTemplate.description;

};


/**
* Start generating the scene
*
Expand Down Expand Up @@ -277,17 +354,11 @@ generateScene = () => {

// Get template
let templateName = document.getElementById('imagescene-template').value;

// Build path
const baseUrl = window.location.href;
const originPath = 'https://raw.githubusercontent.com/TRMSC/imagescene-generator/main/templates/';
const relativePath = '../templates/';
let templatePath = baseUrl.includes('github.io') ? originPath : relativePath;
templatePath = templatePath + templateName + '.raw';
let template = templatesPath + templateName;

// Fetch template content
let templateContent = '';
fetch(templatePath)
fetch(template)
.then(response => {
// Check
if (!response.ok) {
Expand Down Expand Up @@ -436,7 +507,7 @@ showInfo = (content) => {


/**
* Download code as HTML
* Download file as HTML or SVG
*
* @function downloadFile
* @param {string} type - Includes the file type (html or svg)
Expand All @@ -445,14 +516,17 @@ showInfo = (content) => {
downloadFile = (type) => {
// Get values
let html = document.getElementById('imagescene-result').value;
let template = document.getElementById('imagescene-template').value;
let template = document.getElementById('imagescene-template').value.replace("raw", type);

// Get date for filename
// Get date and time for filename
const date = new Date();
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const currentDate = `${year}-${month}-${day}`;
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
const currentDate = `${year}-${month}-${day}-${hours}-${minutes}-${seconds}`;

// Add XML declaration for SVG type
if (type === 'svg') html = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>\n${html}`;
Expand All @@ -464,7 +538,7 @@ downloadFile = (type) => {
// Download
const a = document.createElement('a');
a.href = url;
a.download = currentDate + '-' + 'imagescene-' + template + '.' + type;
a.download = currentDate + '-' + 'imagescene-' + template;
a.click();

// Release URL resource
Expand Down
9 changes: 6 additions & 3 deletions docs/src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@ h3 {
text-decoration: underline;
margin-block-end: 0.5em;
}
.ic-bold {
font-weight: bold;
}
input[type="button"] {
cursor: pointer;
border-radius: 3px;
Expand Down Expand Up @@ -130,9 +133,6 @@ footer {
svg {
border-radius: 8px;
}
.select-container {
flex-direction: column;
}
}
@media (max-width: 568px) {
html {
Expand All @@ -141,6 +141,9 @@ footer {
svg {
border-radius: 6px;
}
.select-container {
flex-direction: column;
}
#result-container {
display: flex;
flex-direction: column;
Expand Down
18 changes: 18 additions & 0 deletions templates/templates.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"templates": [
{
"name": "Bubbles",
"filename": "bubbles.raw",
"author": "Florian Dagner",
"description": "mit aufploppenden Blasen in unterschiedlicher Größe und Geschwindigkeit, die nach oben aufsteigend langsam verschwinden."
},
{
"name": "Indian Summer",
"filename": "indian-summer.raw",
"author": "TRMSC",
"description": "mit langsam nach unten schwebenden Staubpartikeln und wandernden Sonnenreflexen.",
"default": true
}
]
}

0 comments on commit 58a9378

Please sign in to comment.