Skip to content

Commit c33a902

Browse files
ahabebahabeb
authored
Merge pull request #111 from ctayl/shrink_imgLib
Implement new ImageLib options
2 parents 41a109b + fa53c64 commit c33a902

File tree

1 file changed

+50
-110
lines changed

1 file changed

+50
-110
lines changed

‎widget/index.html‎

Lines changed: 50 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@
3737
}
3838

3939
.media-holder.media-holder-icon.hasImg {
40+
display: flex;
41+
align-items: center;
4042
position: relative;
4143
overflow: hidden;
4244
height:100%;
@@ -51,23 +53,8 @@
5153
}
5254

5355
.media-holder.media-holder-icon img.reveal-img {
54-
position: absolute;
5556
left: 0;
5657
top: 0;
57-
will-change: opacity;
58-
animation: reveal 0.1s ease-out;
59-
}
60-
61-
@keyframes reveal {
62-
0% {
63-
opacity: 0;
64-
}
65-
50% {
66-
opacity: 0.5;
67-
}
68-
100% {
69-
opacity: 1;
70-
}
7158
}
7259

7360
#light-folder-body {
@@ -124,12 +111,15 @@
124111
<div id="txt" class="text-left folder-plugin-text clearfix hide-empty"></div>
125112
<div id="pluginsContainer"></div>
126113
<script>
114+
var carouselContainer = document.getElementById("carousel");
115+
var txt = document.getElementById("txt");
116+
var pluginsContainer = document.getElementById("pluginsContainer");
117+
127118
var plugins = [];
119+
var compressImages = false;
128120

129121
var lazyLoad = {
130122
loadImage: function (item) {
131-
var _failAttempts = 0;
132-
133123
// load image
134124
var img = new Image();
135125

@@ -139,39 +129,23 @@
139129
}
140130

141131
function _initImg(item) {
142-
img.src = item.getAttribute('data-src');
132+
var src = item.getAttribute('data-src');
133+
134+
var options = {};
135+
options.size = item.getAttribute('data-crop-size');
136+
options.aspect = item.getAttribute('data-crop-aspect');
137+
options.compression = compressImages ? 80 : false;
138+
// fallbacks
139+
options.width = item.getAttribute('data-crop-width');
140+
options.height = item.getAttribute('data-crop-height');
141+
// enable for cache
142+
// buildfire.imageLib.cropImage(src, options, img);
143+
img.src = buildfire.imageLib.cropImage(src, options);
144+
143145
img.className = 'reveal-img';
146+
144147
if (img.complete) _addImg();
145148
else img.onload = _addImg;
146-
147-
img.onerror=function (e) {
148-
if(_failAttempts >= 1){
149-
return;
150-
}
151-
152-
_failAttempts++;
153-
154-
/*
155-
* Sometimes Image IO doesn't crop image with certain width & height
156-
* So this for changes the dimensions and try to do another crop using image IO
157-
* to avoid showing only the blurred image
158-
* */
159-
160-
img = new Image();
161-
var originalImg = item.getAttribute('data-original-img');
162-
var cropWidth = parseInt(item.getAttribute('data-crop-width'));
163-
cropWidth +=1;
164-
var cropHeight = parseInt(item.getAttribute('data-crop-height'));
165-
cropHeight+=1;
166-
167-
item.setAttribute('data-crop-width',cropWidth);
168-
item.setAttribute('data-crop-height',cropHeight);
169-
170-
var _newCroppedImg = buildfire.imageLib.cropImage(originalImg, {width:cropWidth,height: cropHeight});
171-
item.setAttribute('data-src',_newCroppedImg);
172-
173-
_initImg(item);
174-
};
175149
}
176150

177151
// replace image
@@ -180,20 +154,8 @@
180154
item.addEventListener('click', function (e) {
181155
e.preventDefault();
182156
}, false);
183-
184-
item.appendChild(img).addEventListener('animationend', function (e) {
185-
// remove preview image
186-
var pImg = item.querySelector && item.querySelector('.placeholder');
187-
188-
if (pImg) {
189-
e.target.alt = pImg.alt || '';
190-
e.target.classList.remove('reveal-img');
191-
pImg.style.display = 'none';
192-
pImg.removeAttribute('src');
193-
}
194-
item.removeAttribute('data-src');
195-
});
196157

158+
item.appendChild(img);
197159
}
198160
},
199161
isInViewport: function (element) {
@@ -232,21 +194,19 @@
232194
});
233195

234196
function loadData(err, obj) {
235-
if (err) return;
197+
if (err || !obj || !obj.data) return;
236198
if (!obj.data.design) return;
237-
layout = obj.data.design.selectedLayout;
238199

239-
var compressImages = obj.data.design.compressImages;
200+
layout = obj.data.design.selectedLayout;
201+
compressImages = obj.data.design.compressImages;
240202

241203
if(!obj.data.design.securedFeaturesOption)
242204
obj.data.design.securedFeaturesOption="Enable";
243205

244206
if(obj.data.content && obj.data.content.carouselImages && obj.data.content.carouselImages.length > 0){
245-
var carouselContainer = document.getElementById("carousel");
246207
carouselContainer.classList.remove('hide');
247208
}
248209

249-
var txt = document.getElementById("txt");
250210
txt.innerHTML = '';
251211
if (layout != 12) {
252212
if (obj.data.content.text)
@@ -260,15 +220,15 @@
260220

261221
setIphonePadding(obj.data.content.carouselImages, obj.data.content.text, layout);
262222

263-
var pluginsContainer = document.getElementById("pluginsContainer");
264223
pluginsContainer.className = "layout" + layout;
265224
pluginsContainer.innerHTML = '';
266225

226+
initStyle(obj, layout);
267227
getPlugins(obj, function (result) {
268228
plugins = result;
269229
pluginsContainer.innerHTML = '';
270230

271-
var options = calcImgOptions(layout, compressImages);
231+
var options = calcImgOptions(layout);
272232

273233
if (layout == 12) {
274234
var pluginItemFrame = document.createElement('div');
@@ -310,25 +270,14 @@
310270

311271
if (p.iconUrl || p.iconClassName) {
312272
if (p.iconUrl) {
313-
var _croppedImg = buildfire.imageLib.cropImage(p.iconUrl, options);
314273
divImg.classList.add("hasImg");
315-
divImg.setAttribute("data-src", _croppedImg);
274+
divImg.setAttribute("data-src", p.iconUrl);
316275
divImg.setAttribute("data-original-img", p.iconUrl);
276+
divImg.setAttribute("data-crop-size", options.size);
277+
divImg.setAttribute("data-crop-aspect", options.aspect);
317278
divImg.setAttribute("data-crop-width", options.width);
318279
divImg.setAttribute("data-crop-height", options.height);
319280
divImg.classList.add('lazy-img');
320-
321-
var placeholder = document.createElement('img');
322-
var baseUrl = '../../../styles/media/holder-';
323-
324-
placeholder.src = getPlaceholderImage(layout);
325-
placeholder.classList.add("placeholder");
326-
placeholder.setAttribute('width', options.width);
327-
placeholder.setAttribute('height', options.height);
328-
placeholder.style.height = options.height + "px !important";
329-
placeholder.style.width = options.width + "px !important";
330-
331-
divImg.appendChild(placeholder);
332281
}
333282
else {
334283
divImg.classList.add("hasIcon");
@@ -427,7 +376,6 @@
427376
//load image in first render
428377
lazyLoad.processLazyImages();
429378
});
430-
initStyle(obj, layout);
431379

432380
if (layout != 12) {
433381
//Render Carousel
@@ -550,6 +498,9 @@
550498
width: window.innerWidth,
551499
height: window.innerHeight
552500
}) + "') !Important; background-size: cover !important; } ";
501+
// enable for imageCache
502+
// style.innerHTML += "body { background-size: cover !important; } ";
503+
// buildfire.imageLib.cropImage(bgImage, { width: window.innerWidth, height: window.innerHeight }, document.body);
553504
}
554505

555506
if (obj.data.design.hideText)
@@ -574,6 +525,7 @@
574525
document.body.classList.add('no-carousel');
575526
}
576527
}
528+
577529
buildfire.datastore.getWithDynamicData(loadData);
578530

579531
buildfire.datastore.onUpdate(function (obj) {
@@ -602,29 +554,6 @@
602554
}
603555
};
604556

605-
function getPlaceholderImage(layout) {
606-
var baseUrl = '../../../styles/media/holder-';
607-
var placeholderSrc = '';
608-
609-
if (layout === 10) {
610-
placeholderSrc = baseUrl + '4x1.gif';
611-
}
612-
613-
else if (layout === 7) {
614-
placeholderSrc = baseUrl + '16x9.gif';
615-
}
616-
617-
else if ([2, 3, 4, 9].indexOf(layout) > -1) {
618-
placeholderSrc = baseUrl + '2x1.gif';
619-
}
620-
621-
else {
622-
placeholderSrc = baseUrl + '1x1.gif';
623-
}
624-
625-
return placeholderSrc;
626-
}
627-
628557
function calcFontSize(options, layout) {
629558
var fontSize = 0;
630559
if ([6].indexOf(layout) >= 0) {
@@ -639,36 +568,48 @@
639568
return fontSize;
640569
}
641570

642-
function calcImgOptions(layout, compress) {
571+
function calcImgOptions(layout) {
643572
var option = {};
644-
if (compress) {
645-
option.compression = 80;
646-
}
573+
647574
if ([3, 4, 9].indexOf(layout) >= 0) {
575+
option.size = 'full_width';
576+
option.aspect = '16:9';
648577
option.width = window.innerWidth;
649578
option.height = option.width * 9 / 16;
650579
}
651580
else if ([1, 8].indexOf(layout) >= 0) {
581+
option.size = 'sixth_width';
582+
option.aspect = '1:1';
652583
option.width = window.innerWidth * (0.15);
653584
option.height = option.width;
654585
}
655586
else if (layout == 2) {
587+
option.size = 'third_width';
588+
option.aspect = '16:9';
656589
option.width = window.innerWidth * (0.32);
657590
option.height = window.innerWidth * (0.18);
658591
}
659592
else if ([5, 11].indexOf(layout) >= 0) {
593+
option.size = 'half_width';
594+
option.aspect = '1:1';
660595
option.width = Math.round(window.innerWidth / 2);
661596
option.height = option.width;
662597
}
663598
else if (layout == 6) {
599+
option.size = 'half_width';
600+
option.aspect = '1:1';
664601
option.width = Math.round(window.innerWidth / 2.4);
665602
option.height = option.width;
666603
}
667604
else if (layout == 7) {
605+
option.size = 'full_width';
606+
option.aspect = '16:9';
668607
option.width = window.innerWidth;
669608
option.height = Math.round(window.innerWidth / 2.2);
670609
}
671610
else if (layout == 10) {
611+
option.size = 'full_width';
612+
option.aspect = '2.39:1';
672613
option.width = window.innerWidth;
673614
option.height = Math.round(window.innerWidth * 0.23);
674615
}
@@ -690,7 +631,6 @@
690631

691632
function renderCarousel(carouselImages, layout) {
692633
if (layout != 12) {
693-
var carouselContainer = document.getElementById("carousel");
694634
if (carouselImages && carouselImages.length > 0) {
695635
/*
696636
if more than one image add carousel else add image directly to the carousel container

0 commit comments

Comments
 (0)