Skip to content

Commit a9308b2

Browse files
devvaannshdevvaannsh
committed
feat: show image ribbon gallery when an image element is called with random images
1 parent 938f91f commit a9308b2

File tree

1 file changed

+169
-0
lines changed

1 file changed

+169
-0
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1911,6 +1911,155 @@ function RemoteFunctions(config = {}) {
19111911
}
19121912
};
19131913

1914+
/**
1915+
* when user clicks on an image we call this,
1916+
* this creates a image ribbon gallery at the bottom of the live preview
1917+
*/
1918+
function ImageRibbonGallery(element) {
1919+
this.element = element;
1920+
this.remove = this.remove.bind(this);
1921+
this.create();
1922+
}
1923+
1924+
ImageRibbonGallery.prototype = {
1925+
_style: function () {
1926+
this.body = window.document.createElement("div");
1927+
this._shadow = this.body.attachShadow({ mode: "closed" });
1928+
1929+
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+
}
1946+
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+
}
1957+
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+
}
1965+
1966+
.phoenix-ribbon-row {
1967+
display: flex !important;
1968+
gap: 12px !important;
1969+
align-items: center !important;
1970+
height: 100% !important;
1971+
}
1972+
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+
}
1985+
1986+
.phoenix-ribbon-thumb img {
1987+
width: 100% !important;
1988+
height: 100% !important;
1989+
object-fit: cover !important;
1990+
display: block !important;
1991+
}
1992+
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+
}
1998+
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+
}
2016+
2017+
.phoenix-ribbon-nav.left {
2018+
left: 18px !important;
2019+
}
2020+
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>
2041+
</div>
2042+
</div>
2043+
<div class="phoenix-ribbon-nav right">&#8250;</div>
2044+
</div>
2045+
`;
2046+
},
2047+
2048+
create: function () {
2049+
this.remove(); // remove existing ribbon if already present
2050+
2051+
this._style(); // style the ribbon
2052+
window.document.body.appendChild(this.body);
2053+
},
2054+
2055+
remove: function () {
2056+
if (this.body && this.body.parentNode && this.body.parentNode === window.document.body) {
2057+
window.document.body.removeChild(this.body);
2058+
this.body = null;
2059+
}
2060+
}
2061+
};
2062+
19142063
function Highlight(color, trigger) {
19152064
this.color = color;
19162065
this.trigger = !!trigger;
@@ -2219,6 +2368,7 @@ function RemoteFunctions(config = {}) {
22192368
var _nodeInfoBox;
22202369
var _nodeMoreOptionsBox;
22212370
var _aiPromptBox;
2371+
var _imageRibbonGallery;
22222372
var _setup = false;
22232373

22242374
function onMouseOver(event) {
@@ -2371,6 +2521,13 @@ function RemoteFunctions(config = {}) {
23712521

23722522
_selectElement(element);
23732523
}
2524+
2525+
// if the image is an element we show the image ribbon gallery
2526+
if(element && element.tagName.toLowerCase() === 'img') {
2527+
_imageRibbonGallery = new ImageRibbonGallery(element);
2528+
} else { // when any other element is clicked we close the ribbon
2529+
dismissImageRibbonGallery();
2530+
}
23742531
}
23752532

23762533
/**
@@ -2934,6 +3091,18 @@ function RemoteFunctions(config = {}) {
29343091
return false;
29353092
}
29363093

3094+
/**
3095+
* to dismiss the image ribbon gallery if its available
3096+
*/
3097+
function dismissImageRibbonGallery() {
3098+
if (_imageRibbonGallery) {
3099+
_imageRibbonGallery.remove();
3100+
_imageRibbonGallery = null;
3101+
return true;
3102+
}
3103+
return false;
3104+
}
3105+
29373106
/**
29383107
* Helper function to dismiss all UI boxes at once
29393108
* @return {boolean} true if any boxes were dismissed, false otherwise

0 commit comments

Comments
 (0)