Skip to content

Commit 5ff4cdd

Browse files
devvaannshdevvaannsh
committed
feat: make unsplash calls for images
1 parent d84096b commit 5ff4cdd

File tree

1 file changed

+172
-107
lines changed

1 file changed

+172
-107
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 172 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1924,132 +1924,197 @@ function RemoteFunctions(config = {}) {
19241924
ImageRibbonGallery.prototype = {
19251925
_style: function () {
19261926
this.body = window.document.createElement("div");
1927-
this._shadow = this.body.attachShadow({ mode: "closed" });
1927+
this._shadow = this.body.attachShadow({mode: 'closed'});
19281928

19291929
this._shadow.innerHTML = `
1930-
<style>
1931-
.phoenix-image-ribbon {
1932-
position: fixed !important;
1933-
bottom: 0 !important;
1934-
left: 0 !important;
1935-
right: 0 !important;
1936-
width: 100vw !important;
1937-
height: 150px !important;
1938-
background: linear-gradient(180deg, rgba(12,14,20,0.0), rgba(12,14,20,0.7)) !important;
1939-
z-index: 999999 !important;
1940-
display: flex !important;
1941-
align-items: center !important;
1942-
justify-content: center !important;
1943-
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial !important;
1944-
pointer-events: auto !important;
1945-
}
1930+
<style>
1931+
.phoenix-image-ribbon {
1932+
position: fixed !important;
1933+
bottom: 0 !important;
1934+
left: 0 !important;
1935+
right: 0 !important;
1936+
width: 100vw !important;
1937+
height: 150px !important;
1938+
background: linear-gradient(180deg, rgba(12,14,20,0.0), rgba(12,14,20,0.7)) !important;
1939+
z-index: 999999 !important;
1940+
display: flex !important;
1941+
align-items: center !important;
1942+
justify-content: center !important;
1943+
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial !important;
1944+
pointer-events: auto !important;
1945+
}
19461946
1947-
.phoenix-ribbon-container {
1948-
width: min(1200px, 96vw) !important;
1949-
height: 132px !important;
1950-
border-radius: 16px !important;
1951-
background: rgba(21,25,36,0.55) !important;
1952-
backdrop-filter: blur(8px) !important;
1953-
border: 1px solid rgba(255,255,255,0.08) !important;
1954-
overflow: hidden !important;
1955-
position: relative !important;
1956-
}
1947+
.phoenix-ribbon-container {
1948+
width: min(1200px, 96vw) !important;
1949+
height: 132px !important;
1950+
border-radius: 16px !important;
1951+
background: rgba(21,25,36,0.55) !important;
1952+
backdrop-filter: blur(8px) !important;
1953+
border: 1px solid rgba(255,255,255,0.08) !important;
1954+
overflow: hidden !important;
1955+
position: relative !important;
1956+
}
19571957
1958-
.phoenix-ribbon-strip {
1959-
position: absolute !important;
1960-
inset: 0 !important;
1961-
overflow: auto hidden !important;
1962-
scroll-behavior: smooth !important;
1963-
padding: 8px !important;
1964-
}
1958+
.phoenix-ribbon-strip {
1959+
position: absolute !important;
1960+
inset: 0 !important;
1961+
overflow: auto hidden !important;
1962+
scroll-behavior: smooth !important;
1963+
padding: 8px !important;
1964+
}
19651965
1966-
.phoenix-ribbon-row {
1967-
display: flex !important;
1968-
gap: 12px !important;
1969-
align-items: center !important;
1970-
height: 100% !important;
1971-
}
1966+
.phoenix-ribbon-row {
1967+
display: flex !important;
1968+
gap: 12px !important;
1969+
align-items: center !important;
1970+
height: 100% !important;
1971+
}
19721972
1973-
.phoenix-ribbon-thumb {
1974-
flex: 0 0 auto !important;
1975-
width: 112px !important;
1976-
height: 112px !important;
1977-
border-radius: 14px !important;
1978-
overflow: hidden !important;
1979-
position: relative !important;
1980-
cursor: pointer !important;
1981-
outline: 1px solid rgba(255,255,255,0.08) !important;
1982-
transition: transform 0.15s ease, outline-color 0.15s ease, box-shadow 0.15s ease !important;
1983-
background: #0b0e14 !important;
1984-
}
1973+
.phoenix-ribbon-thumb {
1974+
flex: 0 0 auto !important;
1975+
width: 112px !important;
1976+
height: 112px !important;
1977+
border-radius: 14px !important;
1978+
overflow: hidden !important;
1979+
position: relative !important;
1980+
cursor: pointer !important;
1981+
outline: 1px solid rgba(255,255,255,0.08) !important;
1982+
transition: transform 0.15s ease, outline-color 0.15s ease, box-shadow 0.15s ease !important;
1983+
background: #0b0e14 !important;
1984+
}
19851985
1986-
.phoenix-ribbon-thumb img {
1987-
width: 100% !important;
1988-
height: 100% !important;
1989-
object-fit: cover !important;
1990-
display: block !important;
1991-
}
1986+
.phoenix-ribbon-thumb img {
1987+
width: 100% !important;
1988+
height: 100% !important;
1989+
object-fit: cover !important;
1990+
display: block !important;
1991+
}
19921992
1993-
.phoenix-ribbon-thumb:hover {
1994-
transform: translateY(-2px) scale(1.02) !important;
1995-
outline-color: rgba(255,255,255,0.25) !important;
1996-
box-shadow: 0 8px 18px rgba(0,0,0,0.36) !important;
1997-
}
1993+
.phoenix-ribbon-thumb:hover {
1994+
transform: translateY(-2px) scale(1.02) !important;
1995+
outline-color: rgba(255,255,255,0.25) !important;
1996+
box-shadow: 0 8px 18px rgba(0,0,0,0.36) !important;
1997+
}
19981998
1999-
.phoenix-ribbon-nav {
2000-
position: absolute !important;
2001-
top: 50% !important;
2002-
transform: translateY(-50%) !important;
2003-
width: 40px !important;
2004-
height: 40px !important;
2005-
border-radius: 12px !important;
2006-
border: 1px solid rgba(255,255,255,0.14) !important;
2007-
display: flex !important;
2008-
align-items: center !important;
2009-
justify-content: center !important;
2010-
color: #eaeaf0 !important;
2011-
background: rgba(21,25,36,0.65) !important;
2012-
cursor: pointer !important;
2013-
backdrop-filter: blur(8px) !important;
2014-
font-size: 14px !important;
2015-
}
1999+
.phoenix-ribbon-nav {
2000+
position: absolute !important;
2001+
top: 50% !important;
2002+
transform: translateY(-50%) !important;
2003+
width: 40px !important;
2004+
height: 40px !important;
2005+
border-radius: 12px !important;
2006+
border: 1px solid rgba(255,255,255,0.14) !important;
2007+
display: flex !important;
2008+
align-items: center !important;
2009+
justify-content: center !important;
2010+
color: #eaeaf0 !important;
2011+
background: rgba(21,25,36,0.65) !important;
2012+
cursor: pointer !important;
2013+
backdrop-filter: blur(8px) !important;
2014+
font-size: 14px !important;
2015+
}
20162016
2017-
.phoenix-ribbon-nav.left {
2018-
left: 18px !important;
2019-
}
2017+
.phoenix-ribbon-nav.left {
2018+
left: 18px !important;
2019+
}
20202020
2021-
.phoenix-ribbon-nav.right {
2022-
right: 18px !important;
2023-
}
2024-
</style>
2025-
<div class="phoenix-image-ribbon">
2026-
<div class="phoenix-ribbon-nav left">&#8249;</div>
2027-
<div class="phoenix-ribbon-container">
2028-
<div class="phoenix-ribbon-strip">
2029-
<div class="phoenix-ribbon-row">
2030-
<div class="phoenix-ribbon-thumb"><img src="https://picsum.photos/id/10/400/400" /></div>
2031-
<div class="phoenix-ribbon-thumb"><img src="https://picsum.photos/id/12/400/400" /></div>
2032-
<div class="phoenix-ribbon-thumb"><img src="https://picsum.photos/id/14/400/400" /></div>
2033-
<div class="phoenix-ribbon-thumb"><img src="https://picsum.photos/id/16/400/400" /></div>
2034-
<div class="phoenix-ribbon-thumb"><img src="https://picsum.photos/id/22/400/400" /></div>
2035-
<div class="phoenix-ribbon-thumb"><img src="https://picsum.photos/id/24/400/400" /></div>
2036-
<div class="phoenix-ribbon-thumb"><img src="https://picsum.photos/id/29/400/400" /></div>
2037-
<div class="phoenix-ribbon-thumb"><img src="https://picsum.photos/id/32/400/400" /></div>
2038-
<div class="phoenix-ribbon-thumb"><img src="https://picsum.photos/id/35/400/400" /></div>
2039-
<div class="phoenix-ribbon-thumb"><img src="https://picsum.photos/id/40/400/400" /></div>
2040-
</div>
2021+
.phoenix-ribbon-nav.right {
2022+
right: 18px !important;
2023+
}
2024+
2025+
.phoenix-ribbon-loading {
2026+
display: flex !important;
2027+
align-items: center !important;
2028+
justify-content: center !important;
2029+
height: 100% !important;
2030+
color: #eaeaf0 !important;
2031+
font-size: 14px !important;
2032+
}
2033+
2034+
.phoenix-ribbon-error {
2035+
display: flex !important;
2036+
align-items: center !important;
2037+
justify-content: center !important;
2038+
height: 100% !important;
2039+
color: #ff6b6b !important;
2040+
font-size: 14px !important;
2041+
}
2042+
</style>
2043+
<div class="phoenix-image-ribbon">
2044+
<div class="phoenix-ribbon-nav left">&#8249;</div>
2045+
<div class="phoenix-ribbon-container">
2046+
<div class="phoenix-ribbon-strip">
2047+
<div class="phoenix-ribbon-row phoenix-ribbon-loading">
2048+
Loading images...
20412049
</div>
20422050
</div>
2043-
<div class="phoenix-ribbon-nav right">&#8250;</div>
20442051
</div>
2045-
`;
2052+
<div class="phoenix-ribbon-nav right">&#8250;</div>
2053+
</div>
2054+
`;
2055+
},
2056+
2057+
_fetchImages: function() {
2058+
const apiUrl = 'https://images.phcode.dev/api/images/search?q=sunshine&per_page=10';
2059+
2060+
fetch(apiUrl)
2061+
.then(response => {
2062+
if (!response.ok) {
2063+
throw new Error(`API request failed: ${response.status}`);
2064+
}
2065+
return response.json();
2066+
})
2067+
.then(data => {
2068+
if (data.results && data.results.length > 0) {
2069+
this._renderImages(data.results);
2070+
} else {
2071+
this._showError('No images found');
2072+
}
2073+
})
2074+
.catch(error => {
2075+
console.error('Failed to fetch images:', error);
2076+
this._showError('Failed to load images');
2077+
});
20462078
},
20472079

2048-
create: function () {
2080+
_renderImages: function(images) {
2081+
const rowElement = this._shadow.querySelector('.phoenix-ribbon-row');
2082+
if (!rowElement) { return; }
2083+
2084+
// remove the loading state
2085+
rowElement.innerHTML = '';
2086+
rowElement.className = 'phoenix-ribbon-row';
2087+
2088+
// Create thumbnails from API data
2089+
images.forEach(image => {
2090+
const thumbDiv = window.document.createElement('div');
2091+
thumbDiv.className = 'phoenix-ribbon-thumb';
2092+
2093+
const img = window.document.createElement('img');
2094+
img.src = image.thumb_url || image.url;
2095+
img.alt = image.alt_text || 'Unsplash image';
2096+
img.loading = 'lazy';
2097+
2098+
thumbDiv.appendChild(img);
2099+
rowElement.appendChild(thumbDiv);
2100+
});
2101+
},
2102+
2103+
_showError: function(message) {
2104+
const rowElement = this._shadow.querySelector('.phoenix-ribbon-row');
2105+
if (!rowElement) { return; }
2106+
2107+
rowElement.innerHTML = message;
2108+
rowElement.className = 'phoenix-ribbon-row phoenix-ribbon-error';
2109+
},
2110+
2111+
create: function() {
20492112
this.remove(); // remove existing ribbon if already present
20502113

2051-
this._style(); // style the ribbon
2114+
this._style();
20522115
window.document.body.appendChild(this.body);
2116+
2117+
this._fetchImages();
20532118
},
20542119

20552120
remove: function () {

0 commit comments

Comments
 (0)