From 05903a921700290d0217fb2f52b5c5980e5aa7a1 Mon Sep 17 00:00:00 2001 From: Tom Ladendorf Date: Mon, 26 Oct 2015 12:28:40 -0500 Subject: [PATCH] Added design submission viewer lightbox --- .../challenge-tile.directive.js | 5 ++ .../challenge-user-place.directive.js | 33 ++++++++- ...design-challenge-user-place.directive.jade | 6 +- .../design-lightbox/design-lightbox.jade | 26 +++++++ app/services/challenge.service.js | 13 ++++ assets/css/directives/design-lightbox.scss | 70 ++++++++++++++++++- 6 files changed, 145 insertions(+), 8 deletions(-) create mode 100644 app/directives/challenge-user-place/design-lightbox/design-lightbox.jade diff --git a/app/directives/challenge-tile/challenge-tile.directive.js b/app/directives/challenge-tile/challenge-tile.directive.js index 02a4f3bd3..90053a5b9 100644 --- a/app/directives/challenge-tile/challenge-tile.directive.js +++ b/app/directives/challenge-tile/challenge-tile.directive.js @@ -23,6 +23,11 @@ if ($scope.challenge.status.trim().toUpperCase() === 'PAST' && $scope.challenge.subTrack === 'MARATHON_MATCH') { ChallengeService.processPastMarathonMatch($scope.challenge); } + + if ($scope.challenge.status.trim().toUpperCase() === 'COMPLETED' && $scope.challenge.track === 'DESIGN') { + ChallengeService.formatPastDesignChallenge($scope.challenge); + console.log($scope.challenge.plain()); + } } function openLightbox() { diff --git a/app/directives/challenge-user-place/challenge-user-place.directive.js b/app/directives/challenge-user-place/challenge-user-place.directive.js index 4cf4d3592..bfd886a2d 100644 --- a/app/directives/challenge-user-place/challenge-user-place.directive.js +++ b/app/directives/challenge-user-place/challenge-user-place.directive.js @@ -33,15 +33,21 @@ challenge: '=', view: '=' }, - controller: ['$scope', 'CONSTANTS', '$attrs', 'ChallengeService', - function($scope, CONSTANTS, $attrs, ChallengeService) { + controller: ['$scope', 'CONSTANTS', '$attrs', 'ChallengeService', 'ngDialog', + function($scope, CONSTANTS, $attrs, ChallengeService, ngDialog) { $scope.DOMAIN = CONSTANTS.domain; + $scope.openLightbox = openLightbox; + $scope.updateSelected = updateSelected; + $scope.incrementIndex = incrementIndex; activate(); function activate() { - if ($scope.challenge.userDetails.submissions && $scope.challenge.userDetails.submissions.length > 0) { + if (!$scope.challenge.isPrivate && $scope.challenge.userDetails.submissions && $scope.challenge.userDetails.submissions.length > 0) { + $scope.selectedIndex = 0; $scope.challenge.thumbnailId = $scope.challenge.userDetails.submissions[0].id; + $scope.imageURL = $scope.challenge.userDetails.submissions[0].fullImage; + $scope.selectedImage = $scope.imageURL; $scope.challenge.highestPlacement = _.max($scope.challenge.userDetails.submissions, 'placement').placement; @@ -50,6 +56,27 @@ } } } + + function updateSelected(newImage, index) { + $scope.selectedImage = newImage; + $scope.selectedIndex = index; + } + + function incrementIndex(x) { + $scope.selectedIndex += x; + if ($scope.selectedIndex < 0) $scope.selectedIndex = $scope.challenge.userDetails.submissions.length - 1; + if ($scope.selectedIndex == $scope.challenge.userDetails.submissions.length) $scope.selectedIndex = 0; + $scope.selectedImage = $scope.challenge.userDetails.submissions[$scope.selectedIndex].fullImage; + } + + function openLightbox() { + ngDialog.open({ + template: 'directives/challenge-user-place/design-lightbox/design-lightbox.html', + className: 'design-lightbox', + scope: $scope + }); + } + }] }; } diff --git a/app/directives/challenge-user-place/design-challenge-user-place.directive.jade b/app/directives/challenge-user-place/design-challenge-user-place.directive.jade index 91b40956a..59425d384 100644 --- a/app/directives/challenge-user-place/design-challenge-user-place.directive.jade +++ b/app/directives/challenge-user-place/design-challenge-user-place.directive.jade @@ -4,9 +4,9 @@ p.place(ng-show="challenge.userStatus === 'PASSED_SCREENING'") Passed Screening .thumbnail(ng-click="openLightbox()", ng-class="{hidden: challenge.userStatus !== 'PASSED_REVIEW'}") - img(ng-src="http://studio.{{DOMAIN}}/studio.jpg?module=DownloadSubmission&sbmid={{challenge.thumbnailId}}&sbt=full", fallback-src="/images/ico-picture.svg") + img(ng-src="{{imageURL}}", fallback-src="/images/ico-picture.svg") - .thumbnail-gallery(ng-click="challenge.showLightbox()") + .thumbnail-gallery(ng-click="openLightbox()") .gallery-icon .num-images 1 image @@ -26,4 +26,4 @@ .thumbnail-gallery(ng-click="challenge.showLightbox()") .gallery-icon - .num-images 1 image \ No newline at end of file + .num-images 1 image diff --git a/app/directives/challenge-user-place/design-lightbox/design-lightbox.jade b/app/directives/challenge-user-place/design-lightbox/design-lightbox.jade new file mode 100644 index 000000000..d0d578c82 --- /dev/null +++ b/app/directives/challenge-user-place/design-lightbox/design-lightbox.jade @@ -0,0 +1,26 @@ +.lightbox-container + .left-nav + img(src="/images/ico-arrow-big-left.svg", ng-click="incrementIndex(-1)") + + .selector + .title {{challenge.name}} + + + img(ng-src="{{selectedImage}}") + + + .info + | {{selectedIndex + 1}} of {{challenge.userDetails.submissions.length}} + + .selections + img.selection( + ng-repeat="submission in challenge.userDetails.submissions", + ng-src="{{submission.fullImage}}", + ng-click="updateSelected(submission.fullImage, $index)", + ng-class="{'current': submission.fullImage == selectedImage}" + ) + + .right-nav + img(src="/images/ico-arrow-big-right.svg", ng-click="incrementIndex(1)") + +// img(ng-src="http://studio.{{DOMAIN}}/studio.jpg?module=DownloadSubmission&sbmid={{challenge.thumbnailId}}&sbt=full", fallback-src="/images/ico-picture.svg") diff --git a/app/services/challenge.service.js b/app/services/challenge.service.js index 096c2e670..3e2e194b1 100644 --- a/app/services/challenge.service.js +++ b/app/services/challenge.service.js @@ -11,6 +11,7 @@ var service = { getChallenges: getChallenges, getUserChallenges: getUserChallenges, + formatPastDesignChallenge: formatPastDesignChallenge, getUserMarathonMatches: getUserMarathonMatches, getReviewEndDate: getReviewEndDate, getChallengeDetails: getChallengeDetails, @@ -31,6 +32,18 @@ return api.one('members', handle.toLowerCase()).all('challenges').getList(params); } + function formatPastDesignChallenge(challenge) { + if (!challenge.isPrivate && challenge.userDetails && challenge.userDetails.submissions && challenge.userDetails.submissions.length) { + challenge.userDetails.submissions.forEach(function(submission) { + var images = submission.images.filter(function(image) { + return image.match('full') || image.match('thumb'); + }); + submission.fullImage = images[0]; + submission.thumbnailImage = images[1]; + }); + } + } + function getUserMarathonMatches(handle, params) { return api.one('members', handle.toLowerCase()).all('mms').getList(params); } diff --git a/assets/css/directives/design-lightbox.scss b/assets/css/directives/design-lightbox.scss index 3df1b79b2..a05224873 100644 --- a/assets/css/directives/design-lightbox.scss +++ b/assets/css/directives/design-lightbox.scss @@ -1,10 +1,76 @@ .lightbox-container { + font-family: 'Sofia Pro'; display: flex; width: 100%; margin: auto; overflow: hidden; + flex-direction: row; - img { - margin: 0 auto; + .left-nav, .right-nav { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 80px; + img { + width: 20px; + &:hover { + cursor: pointer; + } + } + } + + + .selector { + + .title { + font-size: 24px; + margin: 30px auto; + text-align: center; + } + + display: flex; + flex-direction: column; + justify-content: flex-start; + + img { + height: 550px; + } + + .info { + color: #a3a3ae; + text-align: right; + } + + .selections { + img.selection { + height: 60px; + opacity: .6; + &.current { + border: solid 2px #0096ff; + height: 62px; + opacity: 1; + } + &:hover { + cursor: pointer; + opacity: 1; + } + } + } + } + + +} + +.design-lightbox { + display: flex; + justify-content: center; + z-index: 10000; + .ngdialog-content { + .ngdialog-close { display: none; } + opacity: .95; + height: 742px; + width: 768px; + align-self: center; } }