STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 3 Actions 1 Packages Projects Releases 3 Wiki Activity

updated image library selector

Browse Source
This commit is contained in:
James Collins
2023-03-28 20:25:48 +10:00
parent b0a1197e22
commit 22c3b5800d
1 changed files with 124 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
resources/js/components/SMEditor.vue
View File

@@ -249,6 +249,8 @@ const imageBrowser = (callback, value, meta) => {
var libraryPage = 1; var libraryPage = 1;
var libraryMax = 1; var libraryMax = 1;
var selected = value; var selected = value;
var title = "";
var itemsFound = 0;
console.log(selected); console.log(selected);
@@ -289,6 +291,17 @@ const imageBrowser = (callback, value, meta) => {
const updateLibrary = () => { const updateLibrary = () => {
const limit = 24; const limit = 24;
const searchFunc = function () {
title = (
document.getElementById(
"image-library-search-input"
) as HTMLInputElement
).value;
updateLibrary();
console.log("here");
};
document.getElementById("image-library-pagination-current").innerHTML = document.getElementById("image-library-pagination-current").innerHTML =
libraryPage.toString(); libraryPage.toString();
@@ -308,22 +321,40 @@ const imageBrowser = (callback, value, meta) => {
} }
}; };
document.getElementById("image-library-search-button").onclick =
searchFunc;
document.getElementById("image-library-search-input").onkeydown =
function (event) {
if (event.key === "Enter") {
searchFunc();
}
};
console.log(title);
api.get({ api.get({
url: "/media", url: "/media",
params: { params: {
limit: limit, limit: limit,
page: libraryPage, page: libraryPage,
mime: "image/", mime: "image/",
title: title,
}, },
}) })
.then((result) => { .then((result) => {
const data = result.data as MediaCollection; const data = result.data as MediaCollection;
libraryMax = Math.ceil(data.total / limit); libraryMax = Math.ceil(data.total / limit);
itemsFound = data.total;
document.getElementById( document.getElementById(
"image-library-pagination-max" "image-library-pagination-max"
).innerHTML = libraryMax.toString(); ).innerHTML = libraryMax.toString();
document.getElementById(
"image-library-item-count"
).innerHTML = `${itemsFound.toString()} image${
itemsFound == 1 ? "" : "s"
} found`;
const libraryContainer = document.getElementById( const libraryContainer = document.getElementById(
"image-library-content" "image-library-content"
); );
@@ -337,35 +368,43 @@ const imageBrowser = (callback, value, meta) => {
// add new items // add new items
data.media.forEach((medium) => { data.media.forEach((medium) => {
const img = document.createElement("div"); const item = document.createElement("div");
img.classList.add("image-library-content-image"); item.classList.add("image-library-content-item");
if (urlMatches(medium.url, selected)) { if (urlMatches(medium.url, selected)) {
img.classList.add( item.classList.add(
"image-library-content-image-selected" "image-library-content-item-selected"
); );
} }
img.style.backgroundImage = `url('${medium.url}?w=200')`;
img.style.cursor = "pointer"; item.onclick = function () {
img.onclick = function () { const items = libraryContainer.querySelectorAll(
// Remove the "image-library-content-image-selected" class from all the image elements ".image-library-content-item"
const images = libraryContainer.querySelectorAll(
".image-library-content-image"
); );
images.forEach((image) => { items.forEach((item) => {
image.classList.remove( item.classList.remove(
"image-library-content-image-selected" "image-library-content-item-selected"
); );
}); });
// Add the "image-library-content-image-selected" class to the clicked image element item.classList.add(
img.classList.add( "image-library-content-item-selected"
"image-library-content-image-selected"
); );
selected = medium.url; selected = medium.url;
}; };
libraryContainer.appendChild(img); const image = document.createElement("div");
image.classList.add("image-library-content-item-image");
image.style.backgroundImage = `url('${medium.url}?w=200')`;
const title = document.createElement("div");
title.classList.add("image-library-content-item-title");
title.innerHTML = medium.title;
item.appendChild(image);
item.appendChild(title);
libraryContainer.appendChild(item);
}); });
} }
}) })
@@ -403,7 +442,7 @@ const imageBrowser = (callback, value, meta) => {
<div id="image-library-toolbar"> <div id="image-library-toolbar">
<div class="image-library-search-group"> <div class="image-library-search-group">
<input type="text" id="image-library-search-input" placeholder="search" class="tox-textfield" /> <input type="text" id="image-library-search-input" placeholder="search" class="tox-textfield" />
<button id="image-library-search-button"><svg width="24" height="24" focusable="false"><path d="M16 17.3a8 8 0 1 1 1.4-1.4l4.3 4.4a1 1 0 0 1-1.4 1.4l-4.4-4.3Zm-5-.3a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z" fill-rule="nonzero"/></svg></button> <button id="image-library-search-button"><svg width="20" height="20" focusable="false"><path d="M14 15.7a6 6 0 1 1 1.06-1.06l3.54 3.54a1 1 0 0 1-1.06 1.06l-3.54-3.54Zm-4-.4a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z" fill-rule="nonzero"/></svg></button>
</div> </div>
<div class="image-library-pagination"> <div class="image-library-pagination">
<button id="image-library-pagination-prev"><svg width="24" height="24" focusable="false"><path d="M15.5 5.5l-7 7 7 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></button> <button id="image-library-pagination-prev"><svg width="24" height="24" focusable="false"><path d="M15.5 5.5l-7 7 7 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
@@ -411,7 +450,11 @@ const imageBrowser = (callback, value, meta) => {
<button id="image-library-pagination-next"><svg width="24" height="24" focusable="false"><path d="M8.5 18.5l7-7-7-7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></button> <button id="image-library-pagination-next"><svg width="24" height="24" focusable="false"><path d="M8.5 18.5l7-7-7-7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
</div> </div>
</div> </div>
<div id="image-library-content"><div>loading...</div></div>`, <div id="image-library-content">
<div>loading...</div>
</div>
<div id="image-library-item-count">x</div>
</div>`,
}, },
], ],
}, },
@@ -483,12 +526,19 @@ const imageBrowser = (callback, value, meta) => {
.image-library-search-group { .image-library-search-group {
display: flex; display: flex;
flex: 1;
align-content: center; align-content: center;
justify-content: flex-end;
margin-right: 12px;
#image-library-search-input { #image-library-search-input {
width: auto; width: auto;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
padding: 4px 8px;
font-size: 90%;
min-height: auto;
line-height: normal;
} }
#image-library-search-button { #image-library-search-button {
@@ -508,7 +558,6 @@ const imageBrowser = (callback, value, meta) => {
.image-library-pagination { .image-library-pagination {
display: flex; display: flex;
flex: 1;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
@@ -539,27 +588,25 @@ const imageBrowser = (callback, value, meta) => {
gap: 1rem; gap: 1rem;
overflow-y: auto; overflow-y: auto;
padding: 0.5rem; padding: 0.5rem;
max-height: 460px; height: 440px;
.image-library-content-image { .image-library-content-item {
width: 18vw; width: 18vw;
height: 14vh; height: 18vh;
min-height: 113px;
min-width: 200px; min-width: 200px;
background-repeat: no-repeat; min-height: 150px;
background-size: cover;
background-position: center;
border: 3px solid #fff; border: 3px solid #fff;
padding: 2px; padding: 2px;
background-clip: content-box; background-clip: content-box;
&:hover, &:hover,
&.image-library-content-image-selected { &.image-library-content-item-selected {
border: 3px solid #0060ce; border: 3px solid #0060ce;
position: relative; position: relative;
cursor: pointer;
} }
&.image-library-content-image-selected::before { &.image-library-content-item-selected::before {
content: "\2713"; content: "\2713";
position: absolute; position: absolute;
top: -10px; top: -10px;
@@ -578,18 +625,60 @@ const imageBrowser = (callback, value, meta) => {
background-position: center; background-position: center;
background-color: #0060ce; background-color: #0060ce;
} }
.image-library-content-item-image {
width: 100%;
height: 14vh;
min-height: 113px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-clip: content-box;
}
.image-library-content-item-title {
margin-top: 8px;
text-align: center;
font-size: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }
} }
@media only screen and (max-height: 600px) { #image-library-item-count {
#tinymce-library { font-size: 90%;
max-height: 428px; margin-top: 8px;
color: #999;
text-align: right;
}
@media only screen and (max-width: 767px) {
#image-library-content {
height: 408px;
} }
} }
@media only screen and (max-height: 570px) { @media only screen and (max-width: 450px) {
#tinymce-library { #image-library-toolbar {
height: 60vh; flex-direction: column;
.image-library-search-group {
margin-bottom: 8px;
#image-library-search-input {
width: 100%;
}
}
.image-library-pagination {
justify-content: center;
}
}
#image-library-content {
height: 380px;
} }
} }
</style> </style>