|
|
|
@ -683,19 +683,18 @@ angular.module('myApp.directives', ['myApp.filters'])
@@ -683,19 +683,18 @@ angular.module('myApp.directives', ['myApp.filters'])
|
|
|
|
|
link: link, |
|
|
|
|
transclude: true, |
|
|
|
|
template: |
|
|
|
|
'<div class="img_fullsize_with_progress_wrap" ng-style="{width: fullPhoto.width + \'px\', height: fullPhoto.height + \'px\'}">\ |
|
|
|
|
'<div class="img_fullsize_with_progress_wrap"">\ |
|
|
|
|
<div class="img_fullsize_progress_overlay" ng-show="progress.enabled">\ |
|
|
|
|
<div class="img_fullsize_progress_wrap" ng-style="{width: fullPhoto.width + \'px\', height: fullPhoto.height + \'px\'}">\ |
|
|
|
|
<div class="img_fullsize_progress progress tg_progress">\ |
|
|
|
|
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{progress.percent}}%">\ |
|
|
|
|
<span class="sr-only">{{progress.percent}}% Complete (success)</span>\ |
|
|
|
|
<div class="img_fullsize_progress_wrap"">\ |
|
|
|
|
<div class="img_fullsize_progress progress tg_progress" ng-show="progress.percent > 0">\ |
|
|
|
|
<div class="progress-bar progress-bar-success" ng-style="{width: progress.percent + \'%\'}">\ |
|
|
|
|
</div>\ |
|
|
|
|
</div>\ |
|
|
|
|
</div>\ |
|
|
|
|
</div>\ |
|
|
|
|
<div class="photo_full_wrap">\ |
|
|
|
|
<a class="photo_modal_image">\ |
|
|
|
|
<img class="photo_modal_image" width="{{fullPhoto.width}}" height="{{fullPhoto.height}}" />\ |
|
|
|
|
<img class="photo_modal_image"/>\ |
|
|
|
|
</a>\ |
|
|
|
|
</div>\ |
|
|
|
|
<div class="photo_modal_error_wrap" ng-if="error">\ |
|
|
|
@ -711,18 +710,31 @@ angular.module('myApp.directives', ['myApp.filters'])
@@ -711,18 +710,31 @@ angular.module('myApp.directives', ['myApp.filters'])
|
|
|
|
|
|
|
|
|
|
function link ($scope, element, attrs) { |
|
|
|
|
|
|
|
|
|
var imgElement = $('img', element); |
|
|
|
|
var imgElement = $('img', element)[0], |
|
|
|
|
resizeElements = $('.img_fullsize_with_progress_wrap', element) |
|
|
|
|
.add('.img_fullsize_progress_wrap', element) |
|
|
|
|
.add($(imgElement)), |
|
|
|
|
resize = function () { |
|
|
|
|
resizeElements.css({width: $scope.fullPhoto.width, height: $scope.fullPhoto.height}); |
|
|
|
|
$scope.$emit('ui_height'); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
imgElement |
|
|
|
|
.attr('src', MtpApiFileManager.getCachedFile($scope.thumbLocation) || 'img/blank.gif') |
|
|
|
|
.addClass('thumb_blurred') |
|
|
|
|
.addClass('thumb_blur_animation'); |
|
|
|
|
var jump = 0; |
|
|
|
|
$scope.$watchCollection('fullPhoto.location', function () { |
|
|
|
|
var cachedSrc = MtpApiFileManager.getCachedFile($scope.thumbLocation), |
|
|
|
|
curJump = ++jump; |
|
|
|
|
|
|
|
|
|
if (cachedSrc) { |
|
|
|
|
imgElement.src = cachedSrc; |
|
|
|
|
resize(); |
|
|
|
|
} else { |
|
|
|
|
imgElement.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (!$scope.fullPhoto.location) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var apiPromise; |
|
|
|
|
if ($scope.fullPhoto.size) { |
|
|
|
|
var inputLocation = { |
|
|
|
@ -736,14 +748,14 @@ angular.module('myApp.directives', ['myApp.filters'])
@@ -736,14 +748,14 @@ angular.module('myApp.directives', ['myApp.filters'])
|
|
|
|
|
apiPromise = MtpApiFileManager.downloadSmallFile($scope.fullPhoto.location); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
$scope.progress = {enabled: true, percent: 1}; |
|
|
|
|
$scope.progress = {enabled: true, percent: 0}; |
|
|
|
|
|
|
|
|
|
apiPromise.then(function (url) { |
|
|
|
|
if (curJump == jump) { |
|
|
|
|
$scope.progress.enabled = false; |
|
|
|
|
imgElement |
|
|
|
|
.attr('src', url) |
|
|
|
|
.removeClass('thumb_blurred'); |
|
|
|
|
|
|
|
|
|
imgElement.src = url; |
|
|
|
|
resize(); |
|
|
|
|
} |
|
|
|
|
}, function (e) { |
|
|
|
|
console.log('Download image failed', e, $scope.fullPhoto.location); |
|
|
|
|
$scope.progress.enabled = false; |
|
|
|
@ -756,8 +768,10 @@ angular.module('myApp.directives', ['myApp.filters'])
@@ -756,8 +768,10 @@ angular.module('myApp.directives', ['myApp.filters'])
|
|
|
|
|
}, function (progress) { |
|
|
|
|
$scope.progress.percent = Math.max(1, Math.floor(100 * progress.done / progress.total)); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
resize(); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -771,9 +785,7 @@ angular.module('myApp.directives', ['myApp.filters'])
@@ -771,9 +785,7 @@ angular.module('myApp.directives', ['myApp.filters'])
|
|
|
|
|
<div class="img_fullsize_progress_overlay" ng-show="progress.enabled">\ |
|
|
|
|
<div class="img_fullsize_progress_wrap" ng-style="{width: video.full.width + \'px\', height: video.full.height + \'px\'}">\ |
|
|
|
|
<div class="img_fullsize_progress progress tg_progress">\ |
|
|
|
|
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{progress.percent}}" aria-valuemin="0" aria-valuemax="100" style="width: {{progress.percent}}%">\ |
|
|
|
|
<span class="sr-only">{{progress.percent}}% Complete (success)</span>\ |
|
|
|
|
</div>\ |
|
|
|
|
<div class="progress-bar progress-bar-success" style="width: {{progress.percent}}%"></div>\ |
|
|
|
|
</div>\ |
|
|
|
|
</div>\ |
|
|
|
|
</div>\ |
|
|
|
@ -975,6 +987,44 @@ angular.module('myApp.directives', ['myApp.filters'])
@@ -975,6 +987,44 @@ angular.module('myApp.directives', ['myApp.filters'])
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
.directive('myModalNav', function () { |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
link: link |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
function link($scope, element, attrs) { |
|
|
|
|
|
|
|
|
|
var onKeyDown = function (event) { |
|
|
|
|
var target = event.target; |
|
|
|
|
if (target && (target.tagName == 'INPUT' || target.tagName == 'TEXTAREA')) { |
|
|
|
|
return false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
switch (event.keyCode) { |
|
|
|
|
case 39: // right
|
|
|
|
|
case 32: // space
|
|
|
|
|
case 34: // pg down
|
|
|
|
|
case 40: // down
|
|
|
|
|
$scope.$eval(attrs.next); |
|
|
|
|
break; |
|
|
|
|
|
|
|
|
|
case 37: // left
|
|
|
|
|
case 33: // pg up
|
|
|
|
|
case 38: // up
|
|
|
|
|
$scope.$eval(attrs.prev); |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
$(document).on('keydown', onKeyDown); |
|
|
|
|
|
|
|
|
|
$scope.$on('$destroy', function () { |
|
|
|
|
$(document).off('keydown', onKeyDown); |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.directive('myModalPosition', function ($window, $timeout) { |
|
|
|
|
|
|
|
|
@ -993,9 +1043,12 @@ angular.module('myApp.directives', ['myApp.filters'])
@@ -993,9 +1043,12 @@ angular.module('myApp.directives', ['myApp.filters'])
|
|
|
|
|
} else { |
|
|
|
|
$(element[0].parentNode).css('marginTop', ''); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (attrs.animation != 'no') { |
|
|
|
|
$timeout(function () { |
|
|
|
|
$(element[0].parentNode).addClass('modal-content-animated'); |
|
|
|
|
}, 300); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
onContentLoaded(updateMargin); |
|
|
|
|