From 28c000ff809154f93182d508a017b851c5cc5e93 Mon Sep 17 00:00:00 2001 From: Edward Hibbert Date: Tue, 10 Jul 2018 09:29:23 +0100 Subject: [PATCH 01/11] * When a post has multiple photos, don't fade between them; show a badge with the number, and add arrows to go back and forth between them --- http/css/style.less | 4 + http/css/user.css | 8 ++ http/js/iznik/views/user/message.js | 96 +++++++++++++++-------- http/template/user/message/photos.html | 3 +- http/template/user/message/photozoom.html | 9 +++ 5 files changed, 88 insertions(+), 32 deletions(-) diff --git a/http/css/style.less b/http/css/style.less index 90684c356..5113913fd 100644 --- a/http/css/style.less +++ b/http/css/style.less @@ -365,6 +365,10 @@ nav .nav-tabs>li { margin-bottom: 5px; } +.margbotmd { + margin-bottom: 10px; +} + .margbotnone { margin-bottom: 0px; } diff --git a/http/css/user.css b/http/css/user.css index 5641ec01a..9fb5b57b3 100644 --- a/http/css/user.css +++ b/http/css/user.css @@ -16,6 +16,14 @@ color: #61AE24 !important; } +.photobadge { + color: white; + background-color: blue !important; + position: relative; + top: -36px; + left: -12px; +} + .visbubble { position: relative; diff --git a/http/js/iznik/views/user/message.js b/http/js/iznik/views/user/message.js index 774ba77aa..688e990d3 100644 --- a/http/js/iznik/views/user/message.js +++ b/http/js/iznik/views/user/message.js @@ -334,7 +334,7 @@ define([ var v = new Iznik.Views.User.Message.Photos({ collection: new Iznik.Collection(photos), - message: self.model + message: self.model, }); v.render().then(function() { self.$('.js-attlist').append(v.el); @@ -496,12 +496,15 @@ define([ zoom: function (e) { var self = this; - e.preventDefault(); - e.stopPropagation(); + if (e) { + e.preventDefault(); + e.stopPropagation(); + } var v = new Iznik.Views.User.Message.PhotoZoom({ model: this.model, - message: this.options.message + message: this.options.message, + collection: this.options.collection }); this.listenToOnce(v, 'deleted', _.bind(function(id) { @@ -523,7 +526,9 @@ define([ events: { 'click .js-rotateright': 'rotateRight', 'click .js-rotateleft': 'rotateLeft', - 'click .js-delete': 'deleteMe' + 'click .js-delete': 'deleteMe', + 'click .js-photoleft': 'left', + 'click .js-photoright': 'right' }, rotateRight: function() { @@ -534,6 +539,22 @@ define([ this.rotate(90); }, + left: function() { + var self = this; + + if (self.ind > 0) { + self.options.collection.trigger('moveto', self.ind - 1); + } + }, + + right: function() { + var self = this; + + if (self.ind < self.options.collection.length) { + self.options.collection.trigger('moveto', self.ind + 1); + } + }, + rotate: function(deg) { var self = this; @@ -551,9 +572,7 @@ define([ if (ret.ret === 0) { // Force the image to reload. We might not have the correct model set up, so hack it // by using image directly - // TODO var url = '/img_' + self.model.get('id') + '.jpg?t=' + t; - console.log("Rotated", url); self.$('img').attr('src', url); self.trigger('rotated', self.model.get('id'), url); } @@ -617,6 +636,28 @@ define([ var p = Iznik.Views.Modal.prototype.render.call(this); + p.then(function() { + var atts = self.options.message.get('attachments'); + + if (atts.length > 1) { + self.ind = self.options.collection.indexOf(self.model); + self.$('.js-photocount').html(atts.length); + self.$('.js-currentphoto').html(self.ind + 1); + + if (self.ind === 0) { + self.$('.js-photoleft').addClass('faded'); + self.$('.js-photoleft').removeClass('clickme'); + } + + if (self.ind + 1 === atts.length) { + self.$('.js-photoright').addClass('faded'); + self.$('.js-photoleft').removeClass('clickme'); + } + + self.$('.js-multiple').show(); + } + }) + return(p); } }); @@ -626,26 +667,6 @@ define([ offset: 0, - nextPhoto: function() { - var self = this; - - if (self.inDOM()) { - self.currentPhoto.fadeOut('slow', function() { - self.offset++; - self.offset = self.offset % self.photos.length; - self.currentPhoto = self.photos[self.offset]; - - // Defer to get out of stack context - some browsers hit recursion loops, especially when tabs - // are not visible and animations can run without delays. - _.defer(function() { - self.currentPhoto.fadeIn('slow', function() { - _.delay(_.bind(self.nextPhoto, self), 10000); - }) - }); - }) - } - }, - render: function() { var self = this; var len = self.collection.length; @@ -653,6 +674,8 @@ define([ // If we have multiple photos, then we cycle through each of them, fading in and out. This reduces the // screen space, but still allows people to see all of them. var p = Iznik.View.prototype.render.call(this); + self.photoviews = []; + p.then(function() { self.photos = []; self.$('.js-photos').empty(); @@ -669,6 +692,8 @@ define([ collection: self.collection }); + self.photoviews.push(v); + v.render().then(function() { self.$('.js-photos').append(v.$el); }); @@ -677,6 +702,17 @@ define([ self.collection.remove(id); })); + self.listenTo(self.collection, 'moveto', function(ind) { + var v = new Iznik.Views.User.Message.Photo({ + model: self.collection.at(ind), + message: self.options.message, + collection: self.collection + }); + v.render().then(function() { + v.zoom(); + }) + }); + self.photos.push(v.$el); if (!self.options.showAll) { @@ -688,10 +724,8 @@ define([ } }); - if (!self.options.showAll) { - if (self.photos.length > 1) { - _.delay(_.bind(self.nextPhoto, self), 10000); - } + if (self.collection.length > 1) { + self.$('.js-photocount').html("+" + (self.collection.length - 1) + '  '); } }); diff --git a/http/template/user/message/photos.html b/http/template/user/message/photos.html index c2b555be5..7285f18a9 100644 --- a/http/template/user/message/photos.html +++ b/http/template/user/message/photos.html @@ -1 +1,2 @@ -