Skip to content

Commit fa2e25f

Browse files
devvaannshdevvaannsh
committed
fix: nav buttons not disappearing when on error or loading state
1 parent 543aea2 commit fa2e25f

File tree

1 file changed

+43
-47
lines changed

1 file changed

+43
-47
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 43 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -2466,7 +2466,7 @@ function RemoteFunctions(config = {}) {
24662466
transition: all 0.2s ease !important;
24672467
z-index: 2147483647 !important;
24682468
padding: 4px 12px 8px 12px !important;
2469-
display: flex !important;
2469+
display: none !important;
24702470
align-items: center !important;
24712471
justify-content: center !important;
24722472
line-height: 1 !important;
@@ -2666,7 +2666,7 @@ function RemoteFunctions(config = {}) {
26662666
26672667
<div class='phoenix-image-gallery-upload-container'>
26682668
<button title="${config.strings.imageGallerySelectFromComputer}">${ICONS.selectImageFromComputer} ${config.strings.imageGalleryUpload}</button>
2669-
<input type="file" class="phoenix-file-input" accept="image/*" style="display: none;">
2669+
<input type="file" class="phoenix-file-input" accept="image/*" style="display: none !important;">
26702670
</div>
26712671
26722672
<div class='phoenix-image-gallery-right-buttons'>
@@ -2752,7 +2752,7 @@ function RemoteFunctions(config = {}) {
27522752
}
27532753
this.totalPages = data.total_pages || 1;
27542754
this.currentPage = page;
2755-
this._updateNavButtons();
2755+
this._handleNavButtonsDisplay('visible');
27562756
this._updateSearchInput(searchQuery);
27572757
this._updateCache(searchQuery, data, append);
27582758
} else if (!append) {
@@ -2782,7 +2782,7 @@ function RemoteFunctions(config = {}) {
27822782
_imageGalleryCache.currentPage = this.currentPage;
27832783

27842784
if (append) {
2785-
const currentImages = _imageGalleryCache.allImages;
2785+
const currentImages = _imageGalleryCache.allImages || [];
27862786
const newImages = currentImages.concat(data.results);
27872787

27882788
if (newImages.length > CACHE_MAX_IMAGES) {
@@ -2814,30 +2814,32 @@ function RemoteFunctions(config = {}) {
28142814
},
28152815

28162816
_loadFromCache: function(searchQuery) {
2817-
if (searchQuery === _imageGalleryCache.currentQuery && _imageGalleryCache.allImages.length > 0) {
2818-
this.allImages = _imageGalleryCache.allImages;
2817+
const cachedImages = _imageGalleryCache.allImages;
2818+
if (searchQuery === _imageGalleryCache.currentQuery && cachedImages && cachedImages.length > 0) {
2819+
this.allImages = cachedImages;
28192820
this.totalPages = _imageGalleryCache.totalPages;
28202821
this.currentPage = _imageGalleryCache.currentPage;
28212822

28222823
this._renderImages(this.allImages, false);
2823-
this._updateNavButtons();
2824+
this._handleNavButtonsDisplay('visible');
28242825
this._updateSearchInput(searchQuery);
28252826
return true;
28262827
}
28272828
return false;
28282829
},
28292830

28302831
_loadPageFromCache: function(searchQuery, page) {
2831-
if (searchQuery === _imageGalleryCache.currentQuery && page <= Math.ceil(_imageGalleryCache.allImages.length / 10)) {
2832+
const cachedImages = _imageGalleryCache.allImages;
2833+
if (searchQuery === _imageGalleryCache.currentQuery && cachedImages && page <= Math.ceil(cachedImages.length / 10)) {
28322834
const startIdx = (page - 1) * 10;
28332835
const endIdx = startIdx + 10;
2834-
const pageImages = _imageGalleryCache.allImages.slice(startIdx, endIdx);
2836+
const pageImages = cachedImages.slice(startIdx, endIdx);
28352837

28362838
if (pageImages.length > 0) {
28372839
this.allImages = this.allImages.concat(pageImages);
28382840
this._renderImages(pageImages, true);
28392841
this.currentPage = page;
2840-
this._updateNavButtons();
2842+
this._handleNavButtonsDisplay('visible');
28412843
this._isLoadingMore = false;
28422844
this._hideLoadingMore();
28432845
return true;
@@ -2862,7 +2864,7 @@ function RemoteFunctions(config = {}) {
28622864

28632865
this.scrollPosition = Math.max(0, this.scrollPosition - scrollAmount);
28642866
container.scrollTo({ left: this.scrollPosition, behavior: 'smooth' });
2865-
this._updateNavButtons();
2867+
this._handleNavButtonsDisplay('visible');
28662868
},
28672869

28682870
_handleNavRight: function() {
@@ -2890,48 +2892,43 @@ function RemoteFunctions(config = {}) {
28902892

28912893
this.scrollPosition = Math.min(totalWidth - containerWidth, this.scrollPosition + scrollAmount);
28922894
container.scrollTo({ left: this.scrollPosition, behavior: 'smooth' });
2893-
this._updateNavButtons();
2895+
this._handleNavButtonsDisplay('visible');
28942896
},
28952897

2896-
_setNavButtonsVisibility: function(visible) {
2897-
const navLeft = this._shadow.querySelector('.phoenix-image-gallery-nav.left');
2898-
const navRight = this._shadow.querySelector('.phoenix-image-gallery-nav.right');
2899-
2900-
if (navLeft) {
2901-
navLeft.style.display = visible ? 'block' : 'none';
2902-
}
2903-
if (navRight) {
2904-
navRight.style.display = visible ? 'block' : 'none';
2905-
}
2906-
},
2907-
2908-
_updateNavButtons: function() {
2909-
// this function is responsible to update the nav buttons
2910-
// when we're at the very left, we hide the nav-left button completely
2911-
// when we're at the very right and no more pages available, we hide the nav-right button
2898+
_handleNavButtonsDisplay: function(state) { // state can be 'visible' or 'hidden'
29122899
const navLeft = this._shadow.querySelector('.phoenix-image-gallery-nav.left');
29132900
const navRight = this._shadow.querySelector('.phoenix-image-gallery-nav.right');
29142901
const container = this._shadow.querySelector('.phoenix-image-gallery-strip');
29152902

2916-
if (!navLeft || !navRight || !container) { return; }
2903+
if (!navLeft || !navRight) { return; }
29172904

2918-
// show/hide left button
2919-
if (this.scrollPosition <= 0) {
2920-
navLeft.style.display = 'none';
2921-
} else {
2922-
navLeft.style.display = 'block';
2905+
if (state === 'hidden') {
2906+
navLeft.style.setProperty('display', 'none', 'important');
2907+
navRight.style.setProperty('display', 'none', 'important');
2908+
return;
29232909
}
29242910

2925-
// show/hide right button
2926-
const containerWidth = container.clientWidth;
2927-
const totalWidth = container.scrollWidth;
2928-
const atEnd = (this.scrollPosition + containerWidth) >= totalWidth - 10;
2929-
const hasMorePages = this.currentPage < this.totalPages;
2911+
if (state === 'visible') {
2912+
if (!container) { return; }
29302913

2931-
if (atEnd && !hasMorePages) {
2932-
navRight.style.display = 'none';
2933-
} else {
2934-
navRight.style.display = 'block';
2914+
// show/hide the nav-left button
2915+
if (this.scrollPosition <= 0) {
2916+
navLeft.style.setProperty('display', 'none', 'important');
2917+
} else {
2918+
navLeft.style.setProperty('display', 'flex', 'important');
2919+
}
2920+
2921+
// show/hide the nav-right button
2922+
const containerWidth = container.clientWidth;
2923+
const totalWidth = container.scrollWidth;
2924+
const atEnd = (this.scrollPosition + containerWidth) >= totalWidth - 10;
2925+
const hasMorePages = this.currentPage < this.totalPages;
2926+
2927+
if (atEnd && !hasMorePages) {
2928+
navRight.style.setProperty('display', 'none', 'important');
2929+
} else {
2930+
navRight.style.setProperty('display', 'flex', 'important');
2931+
}
29352932
}
29362933
},
29372934

@@ -2942,7 +2939,7 @@ function RemoteFunctions(config = {}) {
29422939
rowElement.innerHTML = config.strings.imageGalleryLoadingInitial;
29432940
rowElement.className = 'phoenix-image-gallery-row phoenix-image-gallery-loading';
29442941

2945-
this._setNavButtonsVisibility(false);
2942+
this._handleNavButtonsDisplay('hidden');
29462943
},
29472944

29482945
_showLoadingMore: function() {
@@ -3191,7 +3188,7 @@ function RemoteFunctions(config = {}) {
31913188
}, 0);
31923189
}
31933190

3194-
this._setNavButtonsVisibility(true);
3191+
this._handleNavButtonsDisplay('visible');
31953192
},
31963193

31973194
_showError: function(message) {
@@ -3201,7 +3198,7 @@ function RemoteFunctions(config = {}) {
32013198
rowElement.innerHTML = message;
32023199
rowElement.className = 'phoenix-image-gallery-row phoenix-ribbon-error';
32033200

3204-
this._setNavButtonsVisibility(false);
3201+
this._handleNavButtonsDisplay('hidden');
32053202
},
32063203

32073204
// file name with which we need to save the image
@@ -3303,7 +3300,6 @@ function RemoteFunctions(config = {}) {
33033300

33043301
const queryToUse = _imageGalleryCache.currentQuery || this._getDefaultQuery();
33053302
this._fetchImages(queryToUse);
3306-
setTimeout(() => this._updateNavButtons(), 0);
33073303
},
33083304

33093305
remove: function () {

0 commit comments

Comments
 (0)