Skip to content

Commit

Permalink
fixes Beit-Hatfutsot#448 - image items should show the main image
Browse files Browse the repository at this point in the history
  • Loading branch information
@OriHoch
OriHoch committed Aug 2, 2017
1 parent 00d32ed commit b154da8
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 118 deletions.
35 changes: 19 additions & 16 deletions js/modules/main/src/controllers/galleryModalCtrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,22 @@ var GalleryModalCtrl = function($scope, langManager, gallery, index, $uibModalIn
$scope.lang = langManager.lang;

$scope.isActive = function (index) {
return $scope.index === index;
// TODO: modify for new architecture
// return $scope.index === index;
return true;
};
$scope.showPrev = function () {
$scope.index = ($scope.index > 0) ? --$scope.index : $scope.gallery.Pictures.length - 1;
// TODO: modify for new architecture
// $scope.index = ($scope.index > 0) ? --$scope.index : $scope.gallery.Pictures.length - 1;
};

$scope.showNext = function () {
$scope.index = ($scope.index < $scope.gallery.Pictures.length - 1) ? ++$scope.index : 0;
// TODO: modify for new architecture
// $scope.index = ($scope.index < $scope.gallery.Pictures.length - 1) ? ++$scope.index : 0;
};
$scope.showPhoto = function (index) {
$scope.index = index;
// TODO: modify for new architecture
// $scope.index = index;
};
$scope.dismiss = function () {
$uibModalInstance.dismiss();
Expand All @@ -23,19 +28,17 @@ var GalleryModalCtrl = function($scope, langManager, gallery, index, $uibModalIn
window.print();
};
$scope.sort_pictures = function() {
var digitized = [],
nondigitized = [];
for (var i = 0; i < gallery.Pictures.length; i++) {
var pic = gallery.Pictures[i];
if(pic.PictureId !== '') {
digitized.push(pic);
}
else {
nondigitized.push(pic);
}
// currently we only support a single main image
// gallery will be added in #449
// TODO: merge with the itemCtrl sort_pictures
var pictures = [];
if (gallery.main_image_url) {
pictures = [{"url":gallery.main_image_url}]
}
digitized.push.apply(digitized, nondigitized);
return digitized;
if (typeof(this.pictures) === "undefined" || this.pictures.length !== pictures.length) {
this.pictures = pictures;
}
return this.pictures;
}
};

Expand Down
87 changes: 46 additions & 41 deletions js/modules/main/src/controllers/itemCtrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,16 +122,18 @@ ItemCtrl.prototype = {
$rootScope.keywords = keywords[item.collection]?keywords[item.collection][lang]:'';
$rootScope.title = title[item.collection]?title[item.collection][lang]:title['deflt'][lang];
$rootScope.description = description[item.collection]?description[item.collection][lang]:'';
main_pic_index = this.get_main_pic_index();
// TODO: make language option 'En' & 'He' universal
$rootScope.og_type = 'article';



$rootScope.slug = {"He": item.slug_he, "En": item.slug_en};
if (main_pic_index !== undefined) {
$rootScope.og_image = "http://storage.googleapis.com/bhs-flat-pics/" + item.Pictures[main_pic_index].PictureId + ".jpg";
}

// TODO: modify for new architecture
// main_pic_index = this.get_main_pic_index();
// if (main_pic_index !== undefined) {
// $rootScope.og_image = "http://storage.googleapis.com/bhs-flat-pics/" + item.Pictures[main_pic_index].PictureId + ".jpg";
// }
},

get_item: function() {
Expand All @@ -142,7 +144,7 @@ ItemCtrl.prototype = {
self.recentlyViewed.put(
{Slug: {"He": item_data.slug_he, "En": item_data.slug_en},
header: {"He": item_data.title_he, "En": item_data.title_en},
thumbnail_url: item_data.thumbnail_url
thumbnail_url: item_data.main_thumbnail_image_url
});
self.item_data = item_data;
self.proper_link = self.item.get_url(self.item_data);
Expand Down Expand Up @@ -191,26 +193,28 @@ ItemCtrl.prototype = {
},

showPrev: function () {
this._Index = (this._Index > 0) ? --this._Index : this.item_data.Pictures.length - 1;
// TODO: modify for new architecture
// this._Index = (this._Index > 0) ? --this._Index : this.item_data.Pictures.length - 1;
},

showNext: function () {
this._Index = (this._Index < this.item_data.Pictures.length - 1) ? ++this._Index : 0;
// TODO: modify for new architecture
// this._Index = (this._Index < this.item_data.Pictures.length - 1) ? ++this._Index : 0;
},

isActive: function (index) {
return this._Index === index;
// TODO: modify for new architecture
// return this._Index === index;
return true;
},

showPhoto: function (index) {
this._Index = index;
// TODO: modify for new architecture
// this._Index = index;
},

open_gallery: function (index) {
if (index == undefined) {
index = this._Index;
}
var gallery = this.item_data;
var gallery = this.item_data;

this.$uibModal.open({
templateUrl: 'templates/main/gallery-modal.html',
Expand Down Expand Up @@ -242,45 +246,46 @@ ItemCtrl.prototype = {
},

get_main_pic_index: function() {
if (this.item_data.Pictures) {
for (var i = 0; i < this.item_data.Pictures.length; i++) {
var pic = this.item_data.Pictures[i];
if (pic.IsPreview == "1") {
return i;
}
}
}
// TODO: modify for new architecture
// if (this.item_data.Pictures) {
// for (var i = 0; i < this.item_data.Pictures.length; i++) {
// var pic = this.item_data.Pictures[i];
// if (pic.IsPreview == "1") {
// return i;
// }
// }
// }
return -1;
},

get_additional_pic_index: function() {
for (var i = 0; i < this.item_data.Pictures.length; i++) {
var pic = this.item_data.Pictures[i];
if (pic.IsPreview == "0") {
return i;
}
}
// TODO: modify for new architecture
// for (var i = 0; i < this.item_data.Pictures.length; i++) {
// var pic = this.item_data.Pictures[i];
// if (pic.IsPreview == "0") {
// return i;
// }
// }
return -1;
},

get_additional_pic_url: function () {
return "https://storage.googleapis.com/bhs-flat-pics/" + this.item_data.Pictures[this.get_additional_pic_index()].PictureId + ".jpg";
// TODO: modify for new architecture
// return "https://storage.googleapis.com/bhs-flat-pics/" + this.item_data.Pictures[this.get_additional_pic_index()].PictureId + ".jpg";
return "";
},

sort_pictures: function() {
if (this.item_data.Pictures) {
var digitized = [],
nondigitized = [];
for (var i = 0; i < this.item_data.Pictures.length; i++) {
var pic = this.item_data.Pictures[i];
if(pic.PictureId !== '') {
digitized.push(pic);
}
else {
nondigitized.push(pic);
}
// currently we only support a single main image
// gallery will be added in #449
var pictures = [];
if (this.item_data.main_image_url) {
pictures = [{"url": this.item_data.main_image_url}]
}
digitized.push.apply(digitized, nondigitized);
return digitized;
if (typeof(this.pictures) === "undefined" || this.pictures.length !== pictures.length) {
this.pictures = pictures;
}
return this.pictures;
},

uc_first: function() {
Expand Down
61 changes: 34 additions & 27 deletions templates/item/photoUnits.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,28 +29,34 @@
<div printSection class="item__content">
<div class="item__content__media-container"
ng-class="{'item__content__media-container--photoUnit': itemController.item_type === 'photoUnits'}">
<div ng-repeat="pic in itemController.sort_pictures()" ng-switch on="pic.PictureId != undefined">
<img ng-switch-when="true"
class="picture"
ng-show="itemController.isActive($index)"
ng-src="https://storage.googleapis.com/bhs-flat-pics/{{pic.PictureId}}.jpg"
ng-click="itemController.open_gallery()"
prevent-rightclick
fit-thumb>
<div>
<img class="picture" ng-src="{{itemController.sort_pictures()[0].url}}"
ng-click="itemController.open_gallery()"
prevent-rightclick fit-thumb />
</div>
<!-- TODO: modify for new architecture - to support gallery -->
<!--<div ng-repeat="pic in itemController.sort_pictures()" ng-switch on="pic.url != undefined">-->
<!--<img ng-switch-when="true"-->
<!--class="picture"-->
<!--ng-show="itemController.isActive($index)"-->
<!--ng-src="pic.url"-->
<!--ng-click="itemController.open_gallery()"-->
<!--prevent-rightclick-->
<!--fit-thumb>-->

<a ng-switch-when="false"
ng-href="{{itemController.lang=='en'?'http://www.bh.org.il/about-us/volunteering/':'http://www.bh.org.il/he/%D7%90%D7%95%D7%93%D7%95%D7%AA%D7%99%D7%A0%D7%95/%D7%94%D7%AA%D7%A0%D7%93%D7%91%D7%95%D7%AA-2/'}}"
target="blank">
<img class="picture notdigitized"
ng-show="itemController.isActive($index)"
ng-src="images/digitization-{{itemController.lang}}.jpg"
prevent-rightclick>
</a>
</div>
<div class="arrows" ng-if="itemController.item_data.Pictures.length > 1">
<div class="arrow-left" ng-click="itemController.showPrev()"></div>
<div class="arrow-right" ng-click="itemController.showNext()"></div>
</div>
<!--<a ng-switch-when="false"-->
<!--ng-href="{{itemController.lang=='en'?'http://www.bh.org.il/about-us/volunteering/':'http://www.bh.org.il/he/%D7%90%D7%95%D7%93%D7%95%D7%AA%D7%99%D7%A0%D7%95/%D7%94%D7%AA%D7%A0%D7%93%D7%91%D7%95%D7%AA-2/'}}"-->
<!--target="blank">-->
<!--<img class="picture notdigitized"-->
<!--ng-show="itemController.isActive($index)"-->
<!--ng-src="images/digitization-{{itemController.lang}}.jpg"-->
<!--prevent-rightclick>-->
<!--</a>-->
<!--</div>-->
<!--<div class="arrows" ng-if="itemController.item_data.Pictures.length > 1">-->
<!--<div class="arrow-left" ng-click="itemController.showPrev()"></div>-->
<!--<div class="arrow-right" ng-click="itemController.showNext()"></div>-->
<!--</div>-->
</div>

<uib-accordion class="media-accordion">
Expand Down Expand Up @@ -119,12 +125,13 @@ <h1 class="item__article-header">
<en>{{itemController.item_data.title_en}} Pictures ({{itemController.item_data.Pictures.length}} found)</en>
<he>{{itemController.item_data.title_he}} Pictures ({{itemController.item_data.Pictures.length}} found)</he>
</div>
<ul class="gallery-modal__info__gallery-preview__minified-picture">
<li ng-repeat="pic in itemController.sort_pictures()" ng-class="{'active':itemController.isActive($index)}" ng-hide="isHidden($index)">
<img ng-src="{{pic.PictureId == undefined ? 'images/digitization-sm-'+itemController.lang+'.jpg' : 'https://storage.googleapis.com/bhs-flat-pics/'+pic.PictureId+'.jpg' }}"
ng-click="itemController.showPhoto($index)"/>
</li>
</ul>
<!-- TODO: modify for new architecture -->
<!--<ul class="gallery-modal__info__gallery-preview__minified-picture">-->
<!--<li ng-repeat="pic in itemController.sort_pictures()" ng-class="{'active':itemController.isActive($index)}" ng-hide="isHidden($index)">-->
<!--<img ng-src="{{pic.PictureId == undefined ? 'images/digitization-sm-'+itemController.lang+'.jpg' : 'https://storage.googleapis.com/bhs-flat-pics/'+pic.PictureId+'.jpg' }}"-->
<!--ng-click="itemController.showPhoto($index)"/>-->
<!--</li>-->
<!--</ul>-->
</div>
</div>
<!-- <div class="item__bottom-bar">
Expand Down
80 changes: 46 additions & 34 deletions templates/main/gallery-modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,40 +5,47 @@
<icon class="xsign" position="[-224, -333]" ng-click="dismiss()"></icon>
</div>
<div class="gallery-modal__stage noselect">
<div ng-repeat="pic in sort_pictures()" ng-switch on="pic.PictureId != undefined">
<img ng-switch-when="true"
ng-show="isActive($index)"
ng-src="https://storage.googleapis.com/bhs-flat-pics/{{pic.PictureId}}.jpg"
alt="More Images"
fit-thumb
prevent-rightclick/>
<a ng-switch-default
ng-href="{{lang=='en'?'http://www.bh.org.il/about-us/volunteering/':'http://www.bh.org.il/he/%D7%90%D7%95%D7%93%D7%95%D7%AA%D7%99%D7%A0%D7%95/%D7%94%D7%AA%D7%A0%D7%93%D7%91%D7%95%D7%AA-2/'}}"
target="blank">
<img class="picture notdigitized"
ng-show="isActive($index)"
ng-src="images/digitization-{{lang}}.jpg"
prevent-rightclick>
</a>
<div>
<img ng-src="{{sort_pictures()[0].url}}"
alt="More Images"
prevent-rightclick fit-thumb />
</div>
<!-- TODO: modify for new architecture - to support gallery -->
<!--<div ng-repeat="pic in sort_pictures()" ng-switch on="pic.PictureId != undefined">-->
<!--<img ng-switch-when="true"-->
<!--ng-show="isActive($index)"-->
<!--ng-src="https://storage.googleapis.com/bhs-flat-pics/{{pic.PictureId}}.jpg"-->
<!--alt="More Images"-->
<!--fit-thumb-->
<!--prevent-rightclick/>-->
<!--<a ng-switch-default-->
<!--ng-href="{{lang=='en'?'http://www.bh.org.il/about-us/volunteering/':'http://www.bh.org.il/he/%D7%90%D7%95%D7%93%D7%95%D7%AA%D7%99%D7%A0%D7%95/%D7%94%D7%AA%D7%A0%D7%93%D7%91%D7%95%D7%AA-2/'}}"-->
<!--target="blank">-->
<!--<img class="picture notdigitized"-->
<!--ng-show="isActive($index)"-->
<!--ng-src="images/digitization-{{lang}}.jpg"-->
<!--prevent-rightclick>-->
<!--</a>-->
<!--</div>-->

<div class="arrows" ng-if="gallery.Pictures.length > 1">
<div class="arrow-left" ng-click="showPrev()"></div>
<div class="arrow-right" ng-click="showNext()"></div>
</div>
<!--<div class="arrows" ng-if="gallery.Pictures.length > 1">-->
<!--<div class="arrow-left" ng-click="showPrev()"></div>-->
<!--<div class="arrow-right" ng-click="showNext()"></div>-->
<!--</div>-->
</div>
<div class="gallery-modal__info">
<div class="gallery-modal__info__picture-info">
<en><span class="field-name" ng-if="gallery.UnitText1.En.isNotEmpty()">Description: </span>{{gallery.UnitText1.En}}<br></en>
<he><span class="field-name" ng-if="gallery.UnitText1.He.isNotEmpty()">תיאור: </span>{{gallery.UnitText1.He}}<br></he>
<span ng-if="gallery.UnitType == 1 && gallery.UnitId">
<span class="field-name">
<en>Photo Unit Number: </en>
<he>מספר תמונה יחידה: </he>
</span>
{{gallery.UnitId}}
<br>
</span>
<en><span class="field-name" ng-if="gallery.content_text_en.isNotEmpty()">Description: </span>{{gallery.content_text_en}}<br></en>
<he><span class="field-name" ng-if="gallery.content_text_he.isNotEmpty()">תיאור: </span>{{gallery.content_text_he}}<br></he>
<!-- TODO: modify for new architecture -->
<!--<span ng-if="gallery.UnitType == 1 && gallery.UnitId">-->
<!--<span class="field-name">-->
<!--<en>Photo Unit Number: </en>-->
<!--<he>מספר תמונה יחידה: </he>-->
<!--</span>-->
<!--{{gallery.UnitId}}-->
<!--<br>-->
<!--</span>-->
<span>
<en>© All Rights Reserved</en>
<he>© כל הזכויות שמורות</he>
Expand All @@ -47,14 +54,19 @@
</div>
<div class="gallery-modal__info__gallery-preview">
<div class="gallery-modal__info__gallery-preview__title">
<en>{{gallery.title_en}} ({{gallery.Pictures.length}} Pictures found)</en>
<he>{{gallery.title_he}} ({{gallery.Pictures.length}} תמונות נמצאו)</he>
<!-- TODO: modify the picture numbers for gallery -->
<!--<en>{{gallery.title_en}} (1 Pictures found)</en>-->
<!--<he>{{gallery.title_he}} (1 תמונות נמצאו)</he>-->
</div>
<ul class="gallery-modal__info__gallery-preview__minified-picture">
<li ng-repeat="pic in sort_pictures()" ng-class="{'active':isActive($index)}">
<img ng-src="{{pic.PictureId == undefined ? 'images/digitization-sm-'+lang+'.jpg' : 'https://storage.googleapis.com/bhs-flat-pics/'+pic.PictureId+'.jpg' }}"
ng-click="showPhoto($index)"/>
<li class="active">
<img ng-src="{{sort_pictures()[0].url}}">
</li>
<!-- TODO: modify to support gallery -->
<!--<li ng-repeat="pic in sort_pictures()" ng-class="{'active':isActive($index)}">-->
<!--<img ng-src="{{pic.PictureId == undefined ? 'images/digitization-sm-'+lang+'.jpg' : 'https://storage.googleapis.com/bhs-flat-pics/'+pic.PictureId+'.jpg' }}"-->
<!--ng-click="showPhoto($index)"/>-->
<!--</li>-->
</ul>
</div>
</div>
Expand Down

0 comments on commit b154da8

Please sign in to comment.