plxdcma_ri_squarefulliconimage 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css.css +137 -0
- package/init.js +34 -0
- package/js.js +101 -0
- package/package.json +10 -0
package/css.css
ADDED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
.gallery {
|
|
2
|
+
padding: 80px 0;
|
|
3
|
+
background: var(--gray-50);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.gallery-filters {
|
|
7
|
+
display: flex;
|
|
8
|
+
gap: 1rem;
|
|
9
|
+
margin-bottom: 3rem;
|
|
10
|
+
flex-wrap: wrap;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.gallery-filter-btn {
|
|
15
|
+
padding: 0.75rem 1.5rem;
|
|
16
|
+
border: 2px solid var(--gray-200);
|
|
17
|
+
background: var(--white);
|
|
18
|
+
color: var(--text-dark);
|
|
19
|
+
border-radius: 25px;
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
transition: all 0.3s ease;
|
|
22
|
+
font-weight: 500;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.gallery-filter-btn:hover,
|
|
26
|
+
.gallery-filter-btn.active {
|
|
27
|
+
background: var(--primary-color);
|
|
28
|
+
color: var(--white);
|
|
29
|
+
border-color: var(--primary-color);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.gallery-grid {
|
|
33
|
+
display: grid;
|
|
34
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
35
|
+
gap: 1.5rem;
|
|
36
|
+
grid-auto-rows: 250px;
|
|
37
|
+
}
|
|
38
|
+
.gallery-item {
|
|
39
|
+
position: relative;
|
|
40
|
+
border-radius: 12px;
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
transition: transform 0.3s ease;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.gallery-item:hover {
|
|
47
|
+
transform: scale(1.02);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.gallery-item.large {
|
|
51
|
+
grid-column: span 2;
|
|
52
|
+
grid-row: span 2;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.gallery-item.wide {
|
|
56
|
+
grid-column: span 2;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.gallery-item.tall {
|
|
60
|
+
grid-row: span 2;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.gallery-item img {
|
|
64
|
+
width: 100%;
|
|
65
|
+
height: 100%;
|
|
66
|
+
object-fit: cover;
|
|
67
|
+
transition: transform 0.3s ease;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.gallery-item:hover img {
|
|
71
|
+
transform: scale(1.1);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.gallery-overlay {
|
|
75
|
+
position: absolute;
|
|
76
|
+
top: 0;
|
|
77
|
+
left: 0;
|
|
78
|
+
right: 0;
|
|
79
|
+
bottom: 0;
|
|
80
|
+
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-direction: column;
|
|
83
|
+
justify-content: space-between;
|
|
84
|
+
padding: 1.5rem;
|
|
85
|
+
opacity: 0;
|
|
86
|
+
transition: opacity 0.3s ease;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.gallery-item:hover .gallery-overlay {
|
|
90
|
+
opacity: 1;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.gallery-info {
|
|
94
|
+
align-self: flex-end;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.gallery-info h3 {
|
|
98
|
+
color: var(--white);
|
|
99
|
+
font-size: 1.25rem;
|
|
100
|
+
font-weight: 600;
|
|
101
|
+
margin-bottom: 0.5rem;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.gallery-info p {
|
|
105
|
+
color: rgba(255, 255, 255, 0.9);
|
|
106
|
+
font-size: 0.875rem;
|
|
107
|
+
margin-bottom: 0.25rem;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.gallery-date {
|
|
111
|
+
color: rgba(255, 255, 255, 0.7);
|
|
112
|
+
font-size: 0.75rem;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.gallery-actions {
|
|
116
|
+
display: flex;
|
|
117
|
+
gap: 0.5rem;
|
|
118
|
+
align-self: flex-start;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.gallery-btn {
|
|
122
|
+
background: rgba(255, 255, 255, 0.2);
|
|
123
|
+
color: var(--white);
|
|
124
|
+
border: none;
|
|
125
|
+
width: 40px;
|
|
126
|
+
height: 40px;
|
|
127
|
+
border-radius: 50%;
|
|
128
|
+
display: flex;
|
|
129
|
+
align-items: center;
|
|
130
|
+
justify-content: center;
|
|
131
|
+
cursor: pointer;
|
|
132
|
+
transition: background 0.3s ease;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.gallery-btn:hover {
|
|
136
|
+
background: var(--primary-color);
|
|
137
|
+
}
|
package/init.js
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
var plxdcma_standarinit=require(`plxdcma_standarinit`)
|
|
2
|
+
var fs=require(`fs`)
|
|
3
|
+
var path=require(`path`)
|
|
4
|
+
var myux=require(`plxdcma_myux`)
|
|
5
|
+
var plxdcma_iconrendererprotocol=require(`plxdcma_iconrendererprotocol`)
|
|
6
|
+
module.exports.use=function(req){
|
|
7
|
+
if(req.__myAppInternals.imagecard == null){
|
|
8
|
+
myux.use(req)
|
|
9
|
+
plxdcma_iconrendererprotocol.use(req)
|
|
10
|
+
req.__myAppInternals.imagecard=true
|
|
11
|
+
if(req.__myAppInternals.paths == null){
|
|
12
|
+
req.__myAppInternals.paths=[]
|
|
13
|
+
}
|
|
14
|
+
req.__myAppInternals.paths.push(`<script src="/myux/icons/squarefulliconimge.js"></script>`)
|
|
15
|
+
req.__myAppInternals.paths.push(`<link rel="stylesheet" href="/myux/icons/squarefulliconimge.css">`)
|
|
16
|
+
if(req.__myAppInternals.modals == null){
|
|
17
|
+
req.__myAppInternals.modals=[]
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
plxdcma_standarinit.use(function(app){
|
|
22
|
+
app.get(`/myux/icons/squarefulliconimge.js`,function(req,res){
|
|
23
|
+
fs.readFile(path.join(__dirname,"js.js"),"utf8",function(err,html){
|
|
24
|
+
res.write(html)
|
|
25
|
+
res.end()
|
|
26
|
+
})
|
|
27
|
+
})
|
|
28
|
+
app.get(`/myux/icons/squarefulliconimge.css`,function(req,res){
|
|
29
|
+
fs.readFile(path.join(__dirname,"css.css"),"utf8",function(err,html){
|
|
30
|
+
res.write(html)
|
|
31
|
+
res.end()
|
|
32
|
+
})
|
|
33
|
+
})
|
|
34
|
+
})
|
package/js.js
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
function imageCardAssignData(strct,target){
|
|
2
|
+
console.log(`videoCardAssignData`)
|
|
3
|
+
console.log(target)
|
|
4
|
+
console.log(`resourceselected`)
|
|
5
|
+
console.log(strct)
|
|
6
|
+
var resourceselected=strct.data
|
|
7
|
+
var tags=strct.tags
|
|
8
|
+
target.style.padding=0
|
|
9
|
+
var ifrm=target.getElementsByClassName(`nuclearimage`)
|
|
10
|
+
if(ifrm != null && ifrm.length > 0 ){
|
|
11
|
+
console.log(`da url selected ${resourceselected.url}`)
|
|
12
|
+
ifrm[0].src=strct.url ?? strct.image ?? resourceselected.url ?? resourceselected.data.image;
|
|
13
|
+
}
|
|
14
|
+
var original=target.originalIcon
|
|
15
|
+
if(original == null){
|
|
16
|
+
original={}
|
|
17
|
+
target.originalIcon=original
|
|
18
|
+
}
|
|
19
|
+
var t = strct.tags ?? strct.icon;
|
|
20
|
+
for(var each in t){
|
|
21
|
+
original[each]=t[each]
|
|
22
|
+
}
|
|
23
|
+
console.log(`target.originalIcon`)
|
|
24
|
+
console.log(target.originalIcon)
|
|
25
|
+
var datitle=target.getElementsByClassName(`datitle`)
|
|
26
|
+
var dasubtitle=target.getElementsByClassName(`dasubtitle`)
|
|
27
|
+
console.log(`resourceselected`)
|
|
28
|
+
console.log(resourceselected)
|
|
29
|
+
datitle[0].innerHTML=resourceselected.titulo
|
|
30
|
+
dasubtitle[0].innerHTML=resourceselected.descripcion
|
|
31
|
+
|
|
32
|
+
}
|
|
33
|
+
var imagecardids=0
|
|
34
|
+
function imagecard(data,isediting,section){
|
|
35
|
+
if(isediting == true && data == null){
|
|
36
|
+
var tb=`<div onclick='didRequestToAddAnIcon(${section})' style='border:solid 1px black' class="gallery-item" data-category="team">
|
|
37
|
+
<br/><br/><br/>
|
|
38
|
+
<h1 style="text-align:center"><i class='fa fa-plus'></i></h1>
|
|
39
|
+
</div>`
|
|
40
|
+
return tb
|
|
41
|
+
}
|
|
42
|
+
console.log(`image card data`)
|
|
43
|
+
console.log(data)
|
|
44
|
+
var tid=`img_c_${imagecardids}`
|
|
45
|
+
imagecardids=imagecardids+1
|
|
46
|
+
var url=""
|
|
47
|
+
var dmd=data.media ?? data.iconmedia;
|
|
48
|
+
if(dmd != null){
|
|
49
|
+
for(var each in MediaResources){
|
|
50
|
+
var m=MediaResources[each]
|
|
51
|
+
|
|
52
|
+
if(m.id != dmd){
|
|
53
|
+
continue
|
|
54
|
+
}
|
|
55
|
+
console.log(`M URL`)
|
|
56
|
+
console.log(m)
|
|
57
|
+
if(m.url != null){
|
|
58
|
+
url=m.url
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
if(url == null || url == ""){
|
|
62
|
+
for(var each in ImageGalery){
|
|
63
|
+
var imggl=ImageGalery[each]
|
|
64
|
+
if(imggl.id == dmd){
|
|
65
|
+
console.log(`Is This`)
|
|
66
|
+
console.log(imggl)
|
|
67
|
+
url=imggl.imageurl
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
console.log(`Mediare`)
|
|
73
|
+
console.log(MediaResources)
|
|
74
|
+
}
|
|
75
|
+
if(data.imageurl != null){
|
|
76
|
+
url=data.imageurl
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
var tb=`<div id='${tid}' onclick='didTapedImageIcon(${section},"${tid}")' class="gallery-item" data-category="team">
|
|
80
|
+
<img cxtza='img' class="nuclearimage" src="/images/${url}m.png" alt="Shohei Ohtani Pitching">
|
|
81
|
+
<div class="gallery-overlay">
|
|
82
|
+
<div class="gallery-info">
|
|
83
|
+
<h3 class="datitle" cxtza='titulo' >Shohei Ohtani en Acción</h3>
|
|
84
|
+
<p class="dasubtitle">Lanzamiento perfecto</p>
|
|
85
|
+
<span class="dadate" cxtza='fecha' class="gallery-date">7 Enero 2025</span>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="gallery-actions">
|
|
88
|
+
<button class="gallery-btn" data-action="view">
|
|
89
|
+
<i class="fas fa-eye"></i>
|
|
90
|
+
</button>
|
|
91
|
+
<button class="gallery-btn" data-action="share">
|
|
92
|
+
<i class="fas fa-share"></i>
|
|
93
|
+
</button>
|
|
94
|
+
<button class="gallery-btn" data-action="download">
|
|
95
|
+
<i class="fas fa-download"></i>
|
|
96
|
+
</button>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</div>`
|
|
100
|
+
return tb;
|
|
101
|
+
}
|