From 1533757add6042f66578b3e7d715a5613874d585 Mon Sep 17 00:00:00 2001 From: Anna Date: Thu, 11 Jan 2024 15:12:40 +0100 Subject: [PATCH 01/37] start with catalog page --- .gitignore | 1 + docs/catalog.html | 213 ++++++++++++++++++++++++++++++++++++++++++++ docs/css/styles.css | 2 +- docs/index.html | 1 + package-lock.json | 27 ++++++ package.json | 5 ++ 6 files changed, 248 insertions(+), 1 deletion(-) create mode 100644 .gitignore create mode 100644 docs/catalog.html create mode 100644 package-lock.json create mode 100644 package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c2658d7 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ diff --git a/docs/catalog.html b/docs/catalog.html new file mode 100644 index 0000000..852b07f --- /dev/null +++ b/docs/catalog.html @@ -0,0 +1,213 @@ + + + + + + + + Comixplain + + + + + + + + + + + + + + + + + + + +
+
+
+
+

Categories

+
+

Templates

+

Characters

+

Speech Bubbles

+

Scenes

+

Annotations

+
+
+
+

Column 2

+

This is the content of column 2.

+
+
+

Column 3

+

This is the content of column 3.

+
+
+
+
+

Row 2

+

This is the content of column 1.

+
+
+
+
+ + + + + + + + + + + + + + + + + + diff --git a/docs/css/styles.css b/docs/css/styles.css index cd0f4f6..8926fbe 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -6451,7 +6451,7 @@ textarea.form-control-lg { } .link-secondary { - color: #9f1ae2; + color: #9f1ae2 !important; } .link-secondary:hover, .link-secondary:focus { color: #7f15b5; diff --git a/docs/index.html b/docs/index.html index ec8eb28..7e20717 100644 --- a/docs/index.html +++ b/docs/index.html @@ -32,6 +32,7 @@ + -
-
-
-
-

Categories

-
-

Templates

-

Characters

-

Speech Bubbles

-

Scenes

-

Annotations

-
-
-
-

Column 2

-

This is the content of column 2.

-
-
-

Column 3

-

This is the content of column 3.

-
-
-
-
-

Row 2

-

This is the content of column 1.

-
+
+
+
+

Categories

+
+
+
+ +
+
+
Templates
+
+
+ +
+
+ +
+
+
Characters
+
+
+ +
+
+ +
+
+
Speech Bubbles
+
+
+ +
+
+ +
+
+
Scenes
+
+
+ +
+
+ +
+
+
Annotations
+
+
+ +
+
+
+

Column 2

+

This is the content of column 2.

+
+
+

Column 3

+

This is the content of column 3.

+
+
+
+
+

Row 2

+

This is the content of column 1.

+
+
-
- @@ -123,9 +122,8 @@

Categories

@@ -136,11 +134,11 @@

Categories

+ class="bi bi-chevron-right">Annotation Elements
@@ -169,26 +167,6 @@

Categories

-

Images go here

-

Images go here

-

Images go here

-

Images go here

-

Images go here

-

Images go here

-

Images go here

-

Images go here

-

Images go here

-

Images go here

-

Images go here

-

Images go here

-

Images go here

-

Images go here

-

Images go here

-

Images go here

-

Images go here

-

Images go here

-

Images go here

-

Images go here

diff --git a/docs/js/catalog_scripts.js b/docs/js/catalog_scripts.js index a65df88..cd9475a 100644 --- a/docs/js/catalog_scripts.js +++ b/docs/js/catalog_scripts.js @@ -5,34 +5,49 @@ console.log(typeof imageData); // filter json data by category and subcategory function filterDataByCategory(category, subcategory) { - const filteredData = imageData[category].filter( - (item) => item.subcategory === subcategory - ); - return filteredData; + return imageData[category][subcategory]; } // function to create the image card function renderImages(filteredData) { - // Example: Rendering images + // get the image container const imageContainer = document.getElementById("image-container"); - imageContainer.innerHTML = ""; // Clear previous content + // Create a document fragment to hold the images + const fragment = document.createDocumentFragment(); + + // Clear previous content + imageContainer.innerHTML = ""; + + // Iterate over each item in the filtered data filteredData.forEach((item) => { const imgElement = document.createElement("img"); imgElement.src = item.file_location; imgElement.alt = item.name; - imgElement.height = 100; + imgElement.height = 150; + imgElement.classList.add("p-2"); + imgElement.classList.add("bg-white"); + imgElement.classList.add("rounded"); + imgElement.classList.add("m-2"); + imgElement.addEventListener("click", () => { - console.log("Clicked image" + item.name) + console.log("Clicked image " + item.name); }); - imageContainer.appendChild(imgElement); + + // Append the image to the document fragment + fragment.appendChild(imgElement); }); + + // Append the entire document fragment to the container in one go + imageContainer.appendChild(fragment); } let activeCategory = "Templates"; let activeSubCategory = "Frames"; -let defaultImages = filterDataByCategory(activeCategory, activeSubCategory); +let defaultImages = filterDataByCategory(activeCategory, activeSubCategory); + +console.log(defaultImages); renderImages(defaultImages); From 1aec33f6457d915a52c66dc1f8c2572c850dfed4 Mon Sep 17 00:00:00 2001 From: Anna Date: Tue, 23 Jan 2024 15:38:13 +0100 Subject: [PATCH 12/37] rework navigation bar categories, svg changes, start selection --- Comixplain_Editions/fonts.svg | 4 ++- docs/assets.json | 57 +++++++++++++++++++++++++++-------- docs/catalog.html | 5 +-- docs/js/catalog_scripts.js | 38 ++++++++++++++++++++--- 4 files changed, 84 insertions(+), 20 deletions(-) diff --git a/Comixplain_Editions/fonts.svg b/Comixplain_Editions/fonts.svg index 5e1f3c3..1c5ca09 100644 --- a/Comixplain_Editions/fonts.svg +++ b/Comixplain_Editions/fonts.svg @@ -1,3 +1,5 @@ - + + + Your Text Here \ No newline at end of file diff --git a/docs/assets.json b/docs/assets.json index bbcb1f2..eeff707 100644 --- a/docs/assets.json +++ b/docs/assets.json @@ -1563,7 +1563,7 @@ ] }, "Speech Bubbles": { - "Standalone": [ + "Full Bubbles": [ { "name": "Speechbubble12.png", "keywords": ["speech bubble", "standalone", "balloon"], @@ -1595,24 +1595,18 @@ "file_location": "https://github.com/Annacc211018/comixplain/blob/main/Comixplain_Editions/Speechbubble%20Assets/Speechbubble1.png?raw=true" } ], - "Paneltop": [ + "Half Bubbles": [ { - "name": "Paneltop_Caption6.png", - "keywords": ["speech bubble", "panel top", "paneltop", "balloon"], - "created_by": "Magdalena Boucher & Alena Ertl", - "file_location": "https://github.com/Annacc211018/comixplain/blob/main/Comixplain_Editions/Speechbubble%20Assets/Paneltop_Caption6.png?raw=true" - }, - { - "name": "Paneltop_Caption7.png", + "name": "Paneltop_Bubble1.png", "keywords": ["speech bubble", "panel top", "paneltop", "balloon"], "created_by": "Magdalena Boucher & Alena Ertl", - "file_location": "https://github.com/Annacc211018/comixplain/blob/main/Comixplain_Editions/Speechbubble%20Assets/Paneltop_Caption7.png?raw=true" + "file_location": "https://github.com/Annacc211018/comixplain/blob/main/Comixplain_Editions/Speechbubble%20Assets/Paneltop_Bubble1.png?raw=true" }, { - "name": "Paneltop_Bubble1.png", + "name": "Paneltop_Bubble3.png", "keywords": ["speech bubble", "panel top", "paneltop", "balloon"], "created_by": "Magdalena Boucher & Alena Ertl", - "file_location": "https://github.com/Annacc211018/comixplain/blob/main/Comixplain_Editions/Speechbubble%20Assets/Paneltop_Bubble1.png?raw=true" + "file_location": "https://github.com/Annacc211018/comixplain/blob/main/Comixplain_Editions/Speechbubble%20Assets/Paneltop_Bubble3.png?raw=true" }, { "name": "Paneltop_Bubble11.png", @@ -1625,6 +1619,45 @@ "keywords": ["speech bubble", "panel top", "paneltop", "balloon"], "created_by": "Magdalena Boucher & Alena Ertl", "file_location": "https://github.com/Annacc211018/comixplain/blob/main/Comixplain_Editions/Speechbubble%20Assets/Paneltop_Bubble10.png?raw=true" + }, + { + "name": "Paneltop_Bubble2.png", + "keywords": ["speech bubble", "panel top", "paneltop", "balloon"], + "created_by": "Magdalena Boucher & Alena Ertl", + "file_location": "https://github.com/Annacc211018/comixplain/blob/main/Comixplain_Editions/Speechbubble%20Assets/Paneltop_Bubble2.png?raw=true" + } + ], + "Caption Boxes": [ + { + "name": "Paneltop_Caption6.png", + "keywords": ["caption", "caption box", "panel top", "paneltop"], + "created_by": "Magdalena Boucher & Alena Ertl", + "file_location": "https://github.com/Annacc211018/comixplain/blob/main/Comixplain_Editions/Speechbubble%20Assets/Paneltop_Caption6.png?raw=true" + }, + { + "name": "Paneltop_Caption7.png", + "keywords": ["caption", "caption box", "panel top", "paneltop"], + "created_by": "Magdalena Boucher & Alena Ertl", + "file_location": "https://github.com/Annacc211018/comixplain/blob/main/Comixplain_Editions/Speechbubble%20Assets/Paneltop_Caption7.png?raw=true" + }, + { + "name": "Paneltop_Caption1.png", + "keywords": ["caption", "caption box", "panel top", "paneltop"], + "created_by": "Magdalena Boucher & Alena Ertl", + "file_location": "https://github.com/Annacc211018/comixplain/blob/main/Comixplain_Editions/Speechbubble%20Assets/Paneltop_Caption1.png?raw=true" + } + , + { + "name": "Paneltop_Caption2.png", + "keywords": ["caption", "caption box", "panel top", "paneltop"], + "created_by": "Magdalena Boucher & Alena Ertl", + "file_location": "https://github.com/Annacc211018/comixplain/blob/main/Comixplain_Editions/Speechbubble%20Assets/Paneltop_Caption2.png?raw=true" + }, + { + "name": "Paneltop_Caption3.png", + "keywords": ["caption", "caption box", "panel top", "paneltop"], + "created_by": "Magdalena Boucher & Alena Ertl", + "file_location": "https://github.com/Annacc211018/comixplain/blob/main/Comixplain_Editions/Speechbubble%20Assets/Paneltop_Caption3.png?raw=true" } ] }, diff --git a/docs/catalog.html b/docs/catalog.html index 9fb5ea6..c1a8ba4 100644 --- a/docs/catalog.html +++ b/docs/catalog.html @@ -108,8 +108,9 @@

Categories

diff --git a/docs/js/catalog_scripts.js b/docs/js/catalog_scripts.js index cd9475a..bade8be 100644 --- a/docs/js/catalog_scripts.js +++ b/docs/js/catalog_scripts.js @@ -1,7 +1,8 @@ // function to access the json file and get the data import imageData from "../assets.json" assert { type: "json" }; -console.log(typeof imageData); +// global variables +let selectedAsset = []; // filter json data by category and subcategory function filterDataByCategory(category, subcategory) { @@ -24,21 +25,50 @@ function renderImages(filteredData) { const imgElement = document.createElement("img"); imgElement.src = item.file_location; imgElement.alt = item.name; - imgElement.height = 150; + imgElement.style.minHeight = "100px"; + imgElement.style.maxHeight = "150px"; + imgElement.style.maxWidth = "300px"; + imgElement.style.verticalAlign = "bottom"; + imgElement.classList.add("p-2"); + imgElement.classList.add("pt-4"); imgElement.classList.add("bg-white"); imgElement.classList.add("rounded"); imgElement.classList.add("m-2"); + imgElement.classList.add("shadow"); + + let isSelected = false; + + // COMMENT: SELECTION STILL NEEDS TO BE REFINED WITH KEEPING SELECTIONS WHEN SWITCHING CATEGORIES imgElement.addEventListener("click", () => { console.log("Clicked image " + item.name); + + if (!isSelected) { + isSelected = true; + imgElement.classList.toggle("border"); + imgElement.classList.toggle("border-secondary"); + selectedAsset.push(item.name); + } else { + isSelected = false; + imgElement.classList.toggle("border"); + imgElement.classList.toggle("border-secondary"); + selectedAsset.splice(selectedAsset.indexOf(item.name), 1); + } + + console.log(selectedAsset); }); // Append the image to the document fragment fragment.appendChild(imgElement); }); - // Append the entire document fragment to the container in one go + // Delay the append operation by 2 seconds + // setTimeout(() => { + // // Append the entire document fragment to the container after the delay + // imageContainer.appendChild(fragment); + // }, 500); + imageContainer.appendChild(fragment); } @@ -51,8 +81,6 @@ console.log(defaultImages); renderImages(defaultImages); -console.log(filterDataByCategory(activeCategory, activeSubCategory)); - // add event listener to the DOMContentLoaded event // this handles sidebar functionality window.addEventListener("DOMContentLoaded", (event) => { From 835456f8f0f4b6a51315a209213b1b669291075f Mon Sep 17 00:00:00 2001 From: Anna Date: Wed, 24 Jan 2024 12:54:25 +0100 Subject: [PATCH 13/37] add catalog styles css --- Comixplain_Editions/fonts.svg | 2 -- docs/catalog.html | 12 ++++++------ docs/css/catalog_styles.css | 25 +++++++++++++++++++++++++ docs/js/catalog_scripts.js | 24 +++++++++++++----------- 4 files changed, 44 insertions(+), 19 deletions(-) create mode 100644 docs/css/catalog_styles.css diff --git a/Comixplain_Editions/fonts.svg b/Comixplain_Editions/fonts.svg index 1c5ca09..7b3aa17 100644 --- a/Comixplain_Editions/fonts.svg +++ b/Comixplain_Editions/fonts.svg @@ -1,5 +1,3 @@ - - Your Text Here \ No newline at end of file diff --git a/docs/catalog.html b/docs/catalog.html index c1a8ba4..60e6b2a 100644 --- a/docs/catalog.html +++ b/docs/catalog.html @@ -21,7 +21,7 @@ rel="stylesheet" /> - + @@ -147,7 +147,7 @@

Categories


-
+
@@ -167,23 +167,23 @@

Categories

-
+
-
+

Meta Data

will be here

-
+

Selected Assets

No Assets selected yet.

-
+
-
- - - - - - - - +
diff --git a/docs/js/catalog_scripts.js b/docs/js/catalog_scripts.js index 0947859..6504ee7 100644 --- a/docs/js/catalog_scripts.js +++ b/docs/js/catalog_scripts.js @@ -3,12 +3,29 @@ import imageData from "../assets.json" assert { type: "json" }; // global variables let selectedAsset = []; +let filteredImagesByCategory = []; +let activeFilter = []; // filter json data by category and subcategory -function filterDataByCategory(category, subcategory) { - return imageData[category][subcategory]; +function filterAssetsByCategory(category, subcategory) { + return imageData[category][subcategory]["assets"]; } +// filter json data by filter options +function filterAssetsByActiveFilter(imageData, activeFilter) { + let filteredData = []; + activeFilter.forEach((filter) => { + imageData.forEach((item) => { + if (item.keywords.includes(filter) && !filteredData.includes(item)) { + filteredData.push(item); + } + }); + }); + renderImages(filteredData); +} + +// console.log(filterAssetsByActiveFilter("old")); + // function to create the image card function renderImages(filteredData) { // get the image container @@ -77,12 +94,70 @@ function renderImages(filteredData) { let activeCategory = "Templates"; let activeSubCategory = "Frames"; -let defaultImages = filterDataByCategory(activeCategory, activeSubCategory); +let defaultImages = filterAssetsByCategory(activeCategory, activeSubCategory); -console.log(defaultImages); +// console.log(defaultImages); renderImages(defaultImages); +// + +// get filter-options from JSON +function createFilter(category, subcategory) { + const filterOptions = imageData[category][subcategory]["filter-options"]; + const filterContainer = document.getElementById("filter-container"); + + // Create a document fragment to hold the filter options + const fragment = document.createDocumentFragment(); + + // Clear previous content + filterContainer.innerHTML = ""; + + // Iterate over each item in the filter options + filterOptions.forEach((item) => { + const filterElement = document.createElement("button"); + filterElement.innerText = item; + filterElement.type = "button"; + filterElement.style.marginRight = "0.5rem"; + filterElement.style.marginBottom = "0.5rem"; + + // add classes to the filter element + filterElement.classList.add("btn", "btn-outline-secondary", "btn-sm"); + + // Append the filter to the document fragment + fragment.appendChild(filterElement); + + let isActive = false; + + // add a click event listener to each filter + filterElement.addEventListener("click", () => { + if (!isActive) { + isActive = true; + filterElement.classList.toggle("btn-outline-secondary"); + filterElement.classList.toggle("btn-secondary"); + + activeFilter.push(item); + } else { + isActive = false; + filterElement.classList.toggle("btn-outline-secondary"); + filterElement.classList.toggle("btn-secondary"); + + activeFilter.splice(activeFilter.indexOf(item), 1); + } + + // filter the images + filterAssetsByActiveFilter(filteredImagesByCategory, activeFilter); + + console.log(activeFilter); + }); + }); + + // Append the entire document fragment to the container + filterContainer.appendChild(fragment); +} + +createFilter(activeCategory, activeSubCategory); + // add event listener to the DOMContentLoaded event // this handles sidebar functionality window.addEventListener("DOMContentLoaded", (event) => { @@ -170,12 +245,17 @@ window.addEventListener("DOMContentLoaded", (event) => { // remove the "link-secondary" class subCategory.classList.toggle("link-secondary"); - const filteredImagesByCategory = filterDataByCategory( + filteredImagesByCategory = filterAssetsByCategory( activeCategory, activeSubCategory ); + // render the images and create the filter renderImages(filteredImagesByCategory); + createFilter(activeCategory, activeSubCategory); + + // clear the active filter array + activeFilter = []; }); }); } From 3643c1f2a784cec2aa972c8a8867457a4a10a388 Mon Sep 17 00:00:00 2001 From: Anna Date: Wed, 24 Jan 2024 15:33:54 +0100 Subject: [PATCH 15/37] change filter logic --- docs/js/catalog_scripts.js | 30 ++++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/docs/js/catalog_scripts.js b/docs/js/catalog_scripts.js index 6504ee7..7479bf4 100644 --- a/docs/js/catalog_scripts.js +++ b/docs/js/catalog_scripts.js @@ -13,13 +13,17 @@ function filterAssetsByCategory(category, subcategory) { // filter json data by filter options function filterAssetsByActiveFilter(imageData, activeFilter) { - let filteredData = []; - activeFilter.forEach((filter) => { - imageData.forEach((item) => { - if (item.keywords.includes(filter) && !filteredData.includes(item)) { - filteredData.push(item); - } - }); + // let filteredData = []; + // activeFilter.forEach((filter) => { + // imageData.forEach((item) => { + // if (item.keywords.includes(filter) && !filteredData.includes(item)) { + // filteredData.push(item); + // } + // }); + // }); + + let filteredData = imageData.filter((item) => { + return activeFilter.every(keyword => item.keywords.includes(keyword)); }); renderImages(filteredData); } @@ -82,11 +86,13 @@ function renderImages(filteredData) { fragment.appendChild(imgElement); }); - // Delay the append operation by 2 seconds - // setTimeout(() => { - // // Append the entire document fragment to the container after the delay - // imageContainer.appendChild(fragment); - // }, 500); + // handle case when filteredData is empty + if (filteredData.length === 0) { + const noImagesElement = document.createElement("p"); + noImagesElement.innerText = "No images found for the currently selected filters."; + noImagesElement.classList.add("text-center", "text-muted", "mt-5"); + fragment.appendChild(noImagesElement); + } imageContainer.appendChild(fragment); } From a6eaa00cafc2599b47f77e3f15ea0f945963f649 Mon Sep 17 00:00:00 2001 From: Anna Date: Thu, 25 Jan 2024 11:46:10 +0100 Subject: [PATCH 16/37] start meta-data --- docs/catalog.html | 30 +++++++++++++-- docs/css/catalog_styles.css | 16 ++++++++ docs/js/catalog_scripts.js | 74 ++++++++++++++++++++++++++++++------- 3 files changed, 103 insertions(+), 17 deletions(-) diff --git a/docs/catalog.html b/docs/catalog.html index 13ef7ad..f4f6042 100644 --- a/docs/catalog.html +++ b/docs/catalog.html @@ -163,9 +163,33 @@

Categories

-
-

Meta Data

-

will be here

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
Details
CategoryRow 1, Cell 2
KeywordsRow 2, Cell 2
Created byRow 3, Cell 2
File LocationRow 4, Cell 2
diff --git a/docs/css/catalog_styles.css b/docs/css/catalog_styles.css index 7338b18..8c3122c 100644 --- a/docs/css/catalog_styles.css +++ b/docs/css/catalog_styles.css @@ -22,4 +22,20 @@ display: flex; flex-direction: column; justify-content: flex-end; +} + +/* Meta Data */ +#metaData-Container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.5rem; +} + +#metaData-Image { + display: flex; + flex-direction: column; + text-align: center; + gap: 0.5rem; } \ No newline at end of file diff --git a/docs/js/catalog_scripts.js b/docs/js/catalog_scripts.js index 7479bf4..c8a422c 100644 --- a/docs/js/catalog_scripts.js +++ b/docs/js/catalog_scripts.js @@ -5,6 +5,8 @@ import imageData from "../assets.json" assert { type: "json" }; let selectedAsset = []; let filteredImagesByCategory = []; let activeFilter = []; +let activeCategory = "Templates"; +let activeSubCategory = "Frames"; // filter json data by category and subcategory function filterAssetsByCategory(category, subcategory) { @@ -23,13 +25,11 @@ function filterAssetsByActiveFilter(imageData, activeFilter) { // }); let filteredData = imageData.filter((item) => { - return activeFilter.every(keyword => item.keywords.includes(keyword)); + return activeFilter.every((keyword) => item.keywords.includes(keyword)); }); renderImages(filteredData); } -// console.log(filterAssetsByActiveFilter("old")); - // function to create the image card function renderImages(filteredData) { // get the image container @@ -70,16 +70,18 @@ function renderImages(filteredData) { isSelected = true; imgElement.classList.toggle("border"); imgElement.classList.toggle("border-secondary"); - selectedAsset.push(item.name); + selectedAsset.push(item); } else { // remove styling and remove from selectedAsset array isSelected = false; imgElement.classList.toggle("border"); imgElement.classList.toggle("border-secondary"); - selectedAsset.splice(selectedAsset.indexOf(item.name), 1); + selectedAsset.splice(selectedAsset.indexOf(item), 1); } console.log(selectedAsset); + + displayMetaData(selectedAsset); }); // Append the image to the document fragment @@ -89,7 +91,8 @@ function renderImages(filteredData) { // handle case when filteredData is empty if (filteredData.length === 0) { const noImagesElement = document.createElement("p"); - noImagesElement.innerText = "No images found for the currently selected filters."; + noImagesElement.innerText = + "No images found for the currently selected filters."; noImagesElement.classList.add("text-center", "text-muted", "mt-5"); fragment.appendChild(noImagesElement); } @@ -97,17 +100,10 @@ function renderImages(filteredData) { imageContainer.appendChild(fragment); } -let activeCategory = "Templates"; -let activeSubCategory = "Frames"; - +// Render the fist images on page load let defaultImages = filterAssetsByCategory(activeCategory, activeSubCategory); - -// console.log(defaultImages); - renderImages(defaultImages); -// - // get filter-options from JSON function createFilter(category, subcategory) { const filterOptions = imageData[category][subcategory]["filter-options"]; @@ -164,6 +160,56 @@ function createFilter(category, subcategory) { createFilter(activeCategory, activeSubCategory); +// display metadata +function displayMetaData(selectedAsset) { + const metaDataContainer = document.getElementById("metaData-Image"); + metaDataContainer.innerHTML = ""; + + // check if only one image is selected + if (selectedAsset.length === 1) { + const fragment = document.createDocumentFragment(); + let asset = selectedAsset[0]; + + // image + const imgElement = document.createElement("img"); + imgElement.src = asset.file_location; + imgElement.alt = asset.name; + + imgElement.classList.add( + "catalog-image", + "p-2", + "pt-4", + "bg-white", + "rounded", + "m-2", + "shadow" + ); + + // name + const name = document.createElement("h6"); + name.innerText = `${asset.name}`; + + // attach elements + fragment.appendChild(imgElement); + fragment.appendChild(name); + metaDataContainer.appendChild(fragment); + + } else if (selectedAsset.length === 0) { + const placeHolderText = document.createElement("p"); + placeHolderText.innerText = "Select an Asset to see details."; + + metaDataContainer.appendChild(placeHolderText); + } else { + // show how many assets are selected + const assetCount = document.createElement("p"); + assetCount.innerText = `${selectedAsset.length} Assets selected`; + + metaDataContainer.appendChild(assetCount); + } +} + +displayMetaData(selectedAsset); + // add event listener to the DOMContentLoaded event // this handles sidebar functionality window.addEventListener("DOMContentLoaded", (event) => { From 292718ba2365cd15f62bd54bd394d9a1b7952c8f Mon Sep 17 00:00:00 2001 From: Anna Date: Thu, 25 Jan 2024 13:43:32 +0100 Subject: [PATCH 17/37] display metaData correctly or count of images --- docs/catalog.html | 18 ++++------ docs/css/catalog_styles.css | 72 ++++++++++++++++++++++++++----------- docs/js/catalog_scripts.js | 27 ++++++++++++-- 3 files changed, 83 insertions(+), 34 deletions(-) diff --git a/docs/catalog.html b/docs/catalog.html index f4f6042..f27f92f 100644 --- a/docs/catalog.html +++ b/docs/catalog.html @@ -165,7 +165,7 @@

Categories

- +
@@ -173,20 +173,16 @@

Categories

- - + + - - + + - - - - - - + +
Details
CategoryRow 1, Cell 2Keywords
KeywordsRow 2, Cell 2Created by
Created byRow 3, Cell 2
File LocationRow 4, Cell 2File Location
diff --git a/docs/css/catalog_styles.css b/docs/css/catalog_styles.css index 8c3122c..95e11ba 100644 --- a/docs/css/catalog_styles.css +++ b/docs/css/catalog_styles.css @@ -2,40 +2,72 @@ /* Images */ .catalog-image { - min-height: 100px; - max-height: 150px; - max-width: 300px; - vertical-align: bottom; + min-height: 100px; + max-height: 150px; + max-width: 300px; + vertical-align: bottom; } #image-container { - overflow-y: scroll; - height: 500px; + overflow-y: scroll; + height: 500px; } /* Catalog */ #selection { - height: 200px; + height: 200px; } #buttons { - display: flex; - flex-direction: column; - justify-content: flex-end; + display: flex; + flex-direction: column; + justify-content: flex-end; } /* Meta Data */ #metaData-Container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 0.5rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.5rem; } #metaData-Image { - display: flex; - flex-direction: column; - text-align: center; - gap: 0.5rem; -} \ No newline at end of file + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + gap: 0.5rem; +} + +#details-Table { + width: 100%; + overflow: hidden; + display: none; +} + +th, +td { + font-size: small; +} + +td { + padding-bottom: 0.5rem; +} + +.td-left { + vertical-align: top; + padding-right: 2rem; +} + +.td-right { + max-width: 11rem; + padding-right: 2rem; +} + +#td-Location { + overflow: hidden; + white-space: nowrap; +} diff --git a/docs/js/catalog_scripts.js b/docs/js/catalog_scripts.js index c8a422c..2994b23 100644 --- a/docs/js/catalog_scripts.js +++ b/docs/js/catalog_scripts.js @@ -164,9 +164,13 @@ createFilter(activeCategory, activeSubCategory); function displayMetaData(selectedAsset) { const metaDataContainer = document.getElementById("metaData-Image"); metaDataContainer.innerHTML = ""; + const metaDataTable = document.getElementById("details-Table"); // check if only one image is selected if (selectedAsset.length === 1) { + // hide table + metaDataTable.style.display = "none"; + const fragment = document.createDocumentFragment(); let asset = selectedAsset[0]; @@ -189,19 +193,36 @@ function displayMetaData(selectedAsset) { const name = document.createElement("h6"); name.innerText = `${asset.name}`; + // metadata table + metaDataTable.style.display = "block"; + + const keywords = document.getElementById("td-Keywords"); + keywords.innerText = asset.keywords.join(', '); + + const createdBy = document.getElementById("td-Created"); + createdBy.innerText = `${asset.created_by}`; + + const fileLocation = document.getElementById("td-Location"); + fileLocation.innerText = `${asset.file_location}`; + fileLocation.href = asset.file_location; + // attach elements fragment.appendChild(imgElement); fragment.appendChild(name); metaDataContainer.appendChild(fragment); - } else if (selectedAsset.length === 0) { - const placeHolderText = document.createElement("p"); + // hide table + metaDataTable.style.display = "none"; + + const placeHolderText = document.createElement("h6"); placeHolderText.innerText = "Select an Asset to see details."; metaDataContainer.appendChild(placeHolderText); } else { + // hide table + metaDataTable.style.display = "none"; // show how many assets are selected - const assetCount = document.createElement("p"); + const assetCount = document.createElement("h6"); assetCount.innerText = `${selectedAsset.length} Assets selected`; metaDataContainer.appendChild(assetCount); From 4d7896af9faf9d2fe3a24099b9d258d341edb203 Mon Sep 17 00:00:00 2001 From: Anna Date: Wed, 31 Jan 2024 09:37:03 +0100 Subject: [PATCH 18/37] start selection --- docs/catalog.html | 14 ++++--- docs/css/catalog_styles.css | 16 +++++++- docs/js/catalog_scripts.js | 78 ++++++++++++++++++++++++++++++++++--- 3 files changed, 95 insertions(+), 13 deletions(-) diff --git a/docs/catalog.html b/docs/catalog.html index f27f92f..efbfc86 100644 --- a/docs/catalog.html +++ b/docs/catalog.html @@ -188,23 +188,25 @@

Categories

-
+
-
-

Selected Assets

-

No Assets selected yet.

+

Selected Assets

+
+ +
+

No Assets selected yet.

-
-
-
@@ -275,6 +277,9 @@