Skip to content
This repository was archived by the owner on May 16, 2019. It is now read-only.

Commit f0e0a98

Browse files
rmisiormisio
committed
simplifying images on itemEdit and fixing bug where wrong image was deleted after re-order
1 parent 58a1b2f commit f0e0a98

File tree

3 files changed

+39
-52
lines changed

3 files changed

+39
-52
lines changed

‎js/languages/en-US.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -541,6 +541,7 @@
541541
"pageUnavailable": "This page is currently unavailable.",
542542
"badHandle": "The handle you entered does not have a valid OpenBazaar ID.",
543543
"serverDown": "The server has been shut down",
544+
"unableToLoadImages": "We were unable to load your image(s).",
544545
"tooManyPhotosTitle": "Too many photos",
545546
"tooManyPhotosBody": "Some or all of your photos were prevented from being uploaded because you would exceeded the maximum allowable amount.",
546547
"badJSON": "The JSON data returned from the server was malformed",

‎js/templates/itemEdit.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,28 +20,28 @@
2020
<div class="flexRow custCol-secondary border0 height50">
2121
<label for="itemImageUploadMain" class="fieldItem width100">
2222
<h5 class="floatLeft"><%= polyglot.t('Photos') %></h5>
23-
<span class="btn btn-c1 btn-txt rowTop20 pull-right custCol-primary textOpacity1 margin0 marginTopNeg8 <%= ob.combinedImagesArray.length >= ob.MAX_PHOTOS ? 'disabled' : '' %>">
23+
<span class="btn btn-c1 btn-txt rowTop20 pull-right custCol-primary textOpacity1 margin0 marginTopNeg8 <%= ob.images.length >= ob.MAX_PHOTOS ? 'disabled' : '' %>">
2424
<span class="ion-images fontSize11 marginRight2 textOpacity75"></span>
2525
<%= polyglot.t('SelectPhotos') %>
2626
</span>
27-
<input type="file" name="image" id="itemImageUploadMain" accept="image/*" class="hide js-itemImageUpload" multiple <%= ob.combinedImagesArray.length >= ob.MAX_PHOTOS ? 'disabled' : '' %>>
27+
<input type="file" name="image" id="itemImageUploadMain" accept="image/*" class="hide js-itemImageUpload" multiple <%= ob.images.length >= ob.MAX_PHOTOS ? 'disabled' : '' %>>
2828
</label>
2929
</div>
3030
<div class="flexRow js-editItemSubImagesWrapper editItemImageHolder">
3131
<div class="statusBar navBar fadeOut positionAbsolute js-itemEditImageLoading">
3232
<div class="pad20 rowTop20 width100"><h4 class="txt-center"><%= polyglot.t('LoadingImage') %></h4></div>
3333
</div>
3434
<div class="js-subImageWrap">
35-
<% _.each(ob.combinedImagesArray, function(data, i) { %>
36-
<div class="itemImg itemImg-small js-dropImage js-editItemSubImage floatLeft" style="background-image: url(<%= data %>);">
35+
<% _.each(ob.images, function(url, i) { %>
36+
<div class="itemImg itemImg-small js-dropImage js-editItemSubImage floatLeft" style="background-image: url(<%= url %>);">
3737
<div class="btn btn-corner btn-cornerTR btn-cornerTRSmall btn-flushTop btn-c1 fade btn-shadow1 js-editItemDeleteImage">
3838
<i class="ion-android-close icon-centered icon-small"></i>
3939
</div>
4040
</div>
4141
<% }); %>
4242
</div>
4343
</div>
44-
<label for="itemImageUploadMain" class="textSize14px editItemImageLoadPhotoMessage js-itemEditLoadPhotoMessage <%= ob.combinedImagesArray.length ? 'hide' : '' %>">
44+
<label for="itemImageUploadMain" class="textSize14px editItemImageLoadPhotoMessage js-itemEditLoadPhotoMessage <%= ob.images.length ? 'hide' : '' %>">
4545
<span class="fullCentered"><%= polyglot.t('NoPhotosAdded') %></span>
4646
</label>
4747
<!--<div class="textOpacity50">Drag photos here or click button above.</div>-->

‎js/views/itemEditVw.js‎

Lines changed: 33 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ module.exports = baseVw.extend({
3737

3838
initialize: function(){
3939
var self=this,
40-
hashArray = this.model.get('vendor_offer').listing.item.image_hashes,
4140
nowDate = new Date(),
4241
nowMonth = nowDate.getMonth()+ 1;
4342

@@ -68,19 +67,9 @@ module.exports = baseVw.extend({
6867
};
6968

7069
this.prevShipsToVal = [];
71-
7270
this.defaultDate = nowDate.getFullYear() + "-" + padTime(nowMonth) + "-" + padTime(nowDate.getDate()) + "T" + padTime(nowDate.getHours()) + ":" + padTime(nowDate.getMinutes());
73-
this.combinedImagesArray = [];
74-
__.each(hashArray, function(hash){
75-
self.combinedImagesArray.push(self.model.get('serverUrl')+"get_image?hash="+hash);
76-
});
77-
//add images urls to the combinedImagesArray for rendering
78-
this.model.set('combinedImagesArray', this.combinedImagesArray);
79-
this.inputKeyword;
80-
81-
//add existing hashes to the list to be uploaded on save
82-
var anotherHashArray = __.clone(self.model.get("vendor_offer").listing.item.image_hashes);
83-
self.model.set("imageHashesToUpload", anotherHashArray);
71+
this.imgHashes = this.model.get('vendor_offer').listing.item.image_hashes;
72+
8473
self.model.set('expTime', self.model.get('vendor_offer').listing.metadata.expiry.replace(" UTC", ""));
8574

8675
this.listenTo(this.model, 'change:priceSet', this.render());
@@ -90,7 +79,10 @@ module.exports = baseVw.extend({
9079
var self = this;
9180

9281
loadTemplate('./js/templates/itemEdit.html', function(loadedTemplate) {
93-
var context = __.extend({}, self.model.toJSON(), { MAX_PHOTOS: self.MAX_PHOTOS });
82+
var context = __.extend({}, self.model.toJSON(), {
83+
MAX_PHOTOS: self.MAX_PHOTOS,
84+
images: self.imgHashes.map((hash) => self.getImageUrl(hash))
85+
});
9486

9587
self.$el.html(loadedTemplate(context));
9688

@@ -99,10 +91,7 @@ module.exports = baseVw.extend({
9991
self.sortableImages && self.sortableImages.destroy();
10092
self.sortableImages = Sortable.create(self.$('.js-subImageWrap')[0], {
10193
onUpdate: function(e) {
102-
var imagesArr = self.model.get('imageHashesToUpload');
103-
104-
imagesArr.splice(e.newIndex, 0, imagesArr.splice(e.oldIndex, 1)[0]);
105-
self.model.set('imageHashesToUpload', imagesArr);
94+
self.imgHashes.splice(e.newIndex, 0, self.imgHashes.splice(e.oldIndex, 1)[0]);
10695
}
10796
});
10897

@@ -339,11 +328,11 @@ module.exports = baseVw.extend({
339328
resizeImage: function(imageFiles){
340329
var self = this,
341330
$imageInput = this.$el.find('.js-itemImageUpload'),
342-
curImages = this.model.get('combinedImagesArray'),
343331
maxH = 944,
344332
maxW = 1028,
345333
imageList = [],
346334
loaded = 0,
335+
errored = 0,
347336
imageCount;
348337

349338
imageFiles = Array.prototype.slice.call(imageFiles || $imageInput[0].files, 0);
@@ -355,14 +344,15 @@ module.exports = baseVw.extend({
355344

356345
$imageInput.val('');
357346

358-
if (curImages.length + imageFiles.length > this.MAX_PHOTOS) {
359-
imageFiles = imageFiles.slice(0, this.MAX_PHOTOS - curImages.length);
347+
if (this.imgHashes.length + imageFiles.length > this.MAX_PHOTOS) {
348+
imageFiles = imageFiles.slice(0, this.MAX_PHOTOS - this.imgHashes.length);
360349
messageModal.show(window.polyglot.t('errorMessages.tooManyPhotosTitle'), window.polyglot.t('errorMessages.tooManyPhotosBody'));
361350
}
362351

363352
if (!imageFiles.length) return;
364353

365354
imageCount = imageFiles.length;
355+
this.$el.find('.js-itemEditImageLoading').removeClass("fadeOut");
366356

367357
__.each(imageFiles, function(imageFile){
368358
var newImage = document.createElement("img"),
@@ -377,7 +367,6 @@ module.exports = baseVw.extend({
377367
canvas = document.createElement("canvas");
378368

379369
loaded += 1;
380-
self.$el.find('.js-itemEditImageLoading').removeClass("fadeOut");
381370

382371
if (imgW < imgH){
383372
//if image width is smaller than height, set width to max
@@ -403,8 +392,12 @@ module.exports = baseVw.extend({
403392

404393
newImage.onerror = function() {
405394
loaded += 1;
395+
errored += 1;
406396

407-
if (loaded === imageCount) {
397+
if (errored === imageCount) {
398+
self.$el.find('.js-itemEditImageLoading').addClass('fadeOut');
399+
messageModal.show(window.polyglot.t('errorMessages.unableToLoadImages'));
400+
} else if (loaded === imageCount) {
408401
self.uploadImage(imageList);
409402
}
410403
};
@@ -420,7 +413,7 @@ module.exports = baseVw.extend({
420413
});
421414

422415
if (!imageList.length) {
423-
self.$el.find('.js-itemEditImageLoading').addClass("fadeOut");
416+
this.$el.find('.js-itemEditImageLoading').addClass("fadeOut");
424417
return;
425418
}
426419

@@ -436,16 +429,12 @@ module.exports = baseVw.extend({
436429
imageArray;
437430

438431
if (data.success === true){
439-
imageArray = __.clone(self.model.get("combinedImagesArray"));
440-
hashArray = __.clone(self.model.get("imageHashesToUpload"));
441432
__.each(data.image_hashes, function (hash) {
442433
if (hash != "b472a266d0bd89c13706a4132ccfb16f7c3b9fcb" && hash.length === 40){
443-
imageArray.push(self.model.get('serverUrl') + "get_image?hash=" + hash);
444-
hashArray.push(hash);
434+
self.imgHashes.push(hash);
445435
}
446436
});
447-
self.model.set("combinedImagesArray", imageArray);
448-
self.model.set("imageHashesToUpload", hashArray);
437+
449438
self.$el.find('.js-itemEditImageLoading').addClass("fadeOut");
450439
self.updateImages();
451440
} else if (data.success === false){
@@ -460,21 +449,24 @@ module.exports = baseVw.extend({
460449
});
461450
},
462451

452+
getImageUrl: function(hash) {
453+
return `${this.model.get('serverUrl')}get_image?hash=${hash}`;
454+
},
455+
463456
updateImages: function(){
464457
var self = this,
465458
subImageDivs = this.$el.find('.js-editItemSubImage'),
466-
imageArray = this.model.get("combinedImagesArray"),
467459
uploadMsg = this.$el.find('.js-itemEditLoadPhotoMessage');
468460

469461
//remove extra subImage divs
470-
subImageDivs.slice(imageArray.length).remove();
462+
subImageDivs.slice(this.imgHashes.length).remove();
471463

472-
if (imageArray.length > 0){
473-
__.each(imageArray, function (imageURL, i) {
464+
if (this.imgHashes.length > 0){
465+
__.each(this.imgHashes, (hash, i) => {
474466
if (i < subImageDivs.length){
475-
$(subImageDivs[i]).css('background-image', 'url(' + imageURL + ')');
467+
$(subImageDivs[i]).css('background-image', 'url(' + this.getImageUrl(hash) + ')');
476468
} else {
477-
$('<div class="itemImg itemImg-small js-editItemSubImage floatLeft" style="background-image: url(' + imageURL + ');"><div class="btn btn-corner btn-cornerTR btn-cornerTRSmall btn-flushTop btn-c1 fade btn-shadow1 js-editItemDeleteImage"><i class="ion-close-round icon-centered icon-small"></i></div></div>')
469+
$('<div class="itemImg itemImg-small js-editItemSubImage floatLeft" style="background-image: url(' + this.getImageUrl(hash) + ');"><div class="btn btn-corner btn-cornerTR btn-cornerTRSmall btn-flushTop btn-c1 fade btn-shadow1 js-editItemDeleteImage"><i class="ion-close-round icon-centered icon-small"></i></div></div>')
478470
.appendTo(self.$('.js-subImageWrap'));
479471
}
480472
});
@@ -483,7 +475,7 @@ module.exports = baseVw.extend({
483475
uploadMsg.removeClass('hide');
484476
}
485477

486-
if (imageArray.length >= this.MAX_PHOTOS) {
478+
if (this.imgHashes.length >= this.MAX_PHOTOS) {
487479
this.$('.js-itemImageUpload').prop('disabled', true)
488480
.siblings('.btn')
489481
.addClass('disabled');
@@ -495,15 +487,9 @@ module.exports = baseVw.extend({
495487
},
496488

497489
deleteImage: function(e) {
498-
var imageUploadArray,
499-
imgIndex = $(e.target).closest('.itemImg').index('.js-editItemSubImage'),
500-
imageArray = __.clone(this.model.get("combinedImagesArray"));
501-
502-
imageArray.splice(imgIndex, 1);
503-
this.model.set("combinedImagesArray", imageArray);
504-
imageUploadArray = __.clone(this.model.get("imageHashesToUpload"));
505-
imageUploadArray.splice(imgIndex, 1);
506-
this.model.set("imageHashesToUpload", imageUploadArray);
490+
var imgIndex = $(e.target).closest('.itemImg').index('.js-editItemSubImage');
491+
492+
this.imgHashes.splice(imgIndex, 1);
507493
this.updateImages();
508494
},
509495

@@ -564,7 +550,7 @@ module.exports = baseVw.extend({
564550
}
565551

566552
//add old and new image hashes
567-
__.each(this.model.get('imageHashesToUpload'), function(imHash){
553+
__.each(this.imgHashes, function(imHash){
568554
//make sure all hashes are valid
569555
if (imHash != "b472a266d0bd89c13706a4132ccfb16f7c3b9fcb" && imHash.length === 40){
570556
formData.append('images', imHash);

0 commit comments

Comments
 (0)