r4sas
/
webogram-i2p
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Improved animations

master
Igor Zhukov 9 years ago
parent
1d38572733
commit
736860a5b2
5 changed files with 132 additions and 71 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      app/js/app.js
  2. 7
      app/js/controllers.js
  3. 57
      app/js/directives.js
  4. 120
      app/less/app.less
  5. 10
      app/partials/desktop/full_gif.html

1
app/js/app.js
Unescape View File

@ -12,6 +12,7 @@ angular.module('myApp', [
'ngRoute', 'ngRoute',
'ngSanitize', 'ngSanitize',
'ngTouch', 'ngTouch',
'ngAnimate',
'ui.bootstrap', 'ui.bootstrap',
'mediaPlayer', 'mediaPlayer',
'izhukov.utils', 'izhukov.utils',

7
app/js/controllers.js
Unescape View File

@ -1548,13 +1548,18 @@ angular.module('myApp.controllers', ['myApp.i18n'])
var target = $event.target; var target = $event.target;
while (target) { while (target) {
if (target.className.indexOf('im_message_outer_wrap') != -1) { if (target instanceof SVGElement) {
target = target.parentNode;
continue;
}
if (target.className && target.className.indexOf('im_message_outer_wrap') != -1) {
if (Config.Mobile) { if (Config.Mobile) {
return false; return false;
} }
break; break;
} }
if (Config.Mobile && if (Config.Mobile &&
target.className &&
target.className.indexOf('im_message_body') != -1) { target.className.indexOf('im_message_body') != -1) {
break; break;
} }

57
app/js/directives.js
Unescape View File

@ -1996,6 +1996,8 @@ angular.module('myApp.directives', ['myApp.filters'])
var downloadPromise = false; var downloadPromise = false;
$scope.isActive = false;
// Demo // Demo
// $scope.document.progress = {enabled: true, percent: 30}; // $scope.document.progress = {enabled: true, percent: 30};
// $timeout(function () { // $timeout(function () {
@ -2005,8 +2007,6 @@ angular.module('myApp.directives', ['myApp.filters'])
// $scope.document.progress.percent = 100; // $scope.document.progress.percent = 100;
// }, 10000); // }, 10000);
$scope.isActive = false;
$scope.toggle = function (e) { $scope.toggle = function (e) {
if (e && checkClick(e, true)) { if (e && checkClick(e, true)) {
AppDocsManager.saveDocFile($scope.document.id); AppDocsManager.saveDocFile($scope.document.id);
@ -2017,6 +2017,16 @@ angular.module('myApp.directives', ['myApp.filters'])
onContentLoaded(function () { onContentLoaded(function () {
$scope.isActive = !$scope.isActive; $scope.isActive = !$scope.isActive;
$scope.$emit('ui_height'); $scope.$emit('ui_height');
var video = $('video', element)[0];
if (video) {
if (!$scope.isActive) {
video.pause();
video.currentTime = 0;
} else {
video.play();
}
}
}) })
return; return;
} }
@ -2030,8 +2040,9 @@ angular.module('myApp.directives', ['myApp.filters'])
downloadPromise = AppDocsManager.downloadDoc($scope.document.id); downloadPromise = AppDocsManager.downloadDoc($scope.document.id);
downloadPromise.then(function () { downloadPromise.then(function () {
$timeout(function () {
$scope.isActive = true; $scope.isActive = true;
$scope.$emit('ui_height'); }, 200);
}) })
} }
@ -3242,7 +3253,25 @@ angular.module('myApp.directives', ['myApp.filters'])
}) })
.directive('myArcProgress', function () { .directive('myArcProgress', function () {
var html = '<svg class="progress-arc" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="progress-arc-circle" fill="transparent" stroke-dashoffset="0"></circle><circle class="progress-arc-bar" fill="transparent" stroke-dashoffset="0"></circle></svg>'; var html =
'<svg class="progress-arc" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">\
<defs>\
<linearGradient id="grad-intermediate">\
<stop offset="60%" class="stop0" />\
<stop offset="60%" class="stop60" />\
<stop offset="100%" class="stop100"/>\
</linearGradient>\
</defs>\
<circle class="progress-arc-bar" fill="transparent" stroke-dashoffset="0"></circle>\
</svg>';
function updateProgress (bar, progress, fullLen) {
progress = Math.max(0.0, Math.min(progress, 1.0));
var minProgress = 0.2;
progress = minProgress + (1 - minProgress) * progress;
bar.css({strokeDasharray: (progress * fullLen) + ', ' + ((1 - progress) * fullLen)});
}
return { return {
scope: { scope: {
progress: '=myArcProgress' progress: '=myArcProgress'
@ -3252,8 +3281,13 @@ angular.module('myApp.directives', ['myApp.filters'])
.html(html) .html(html)
.addClass('progress-arc-wrap'); .addClass('progress-arc-wrap');
var intermediate = attrs.intermediate && $scope.$eval(attrs.intermediate);
if (intermediate) {
element.addClass('progress-arc-intermediate');
}
var svgEl = element[0].firstChild; var svgEl = element[0].firstChild;
var circle = $('.progress-arc-circle', element);
var bar = $('.progress-arc-bar', element); var bar = $('.progress-arc-bar', element);
var width = attrs.width || 40; var width = attrs.width || 40;
@ -3263,10 +3297,6 @@ angular.module('myApp.directives', ['myApp.filters'])
$(svgEl).attr('width', width); $(svgEl).attr('width', width);
$(svgEl).attr('height', width); $(svgEl).attr('height', width);
circle.attr('cx', center);
circle.attr('cy', center);
circle.attr('r', radius);
circle.css({strokeWidth: stroke});
bar.attr('cx', center); bar.attr('cx', center);
bar.attr('cy', center); bar.attr('cy', center);
@ -3274,12 +3304,13 @@ angular.module('myApp.directives', ['myApp.filters'])
bar.css({strokeWidth: stroke}); bar.css({strokeWidth: stroke});
var fullLen = 2 * Math.PI * radius; var fullLen = 2 * Math.PI * radius;
if (intermediate) {
updateProgress(bar, 0.3, fullLen);
} else {
$scope.$watch('progress', function (newProgress) { $scope.$watch('progress', function (newProgress) {
var progress = newProgress / 100.0; updateProgress(bar, newProgress / 100.0, fullLen);
progress = Math.max(0.0, Math.min(progress, 1.0));
bar.css({strokeDasharray: (progress * fullLen) + ', ' + ((1 - progress) * fullLen)});
}); });
}
} }
} }
}) })

120
app/less/app.less
Unescape View File

@ -420,14 +420,8 @@ a {
display: block; display: block;
border-radius: 100%; border-radius: 100%;
} }
.progress-arc circle {
stroke-dashoffset: 0;
stroke: rgba(0,0,0,0.3);
stroke-width: 3px;
}
.progress-arc .progress-arc-bar { .progress-arc .progress-arc-bar {
stroke: #FFF; stroke-dashoffset: 0;
stroke: rgba(255,255,255,0.95);
transform-origin: center center; transform-origin: center center;
transition: stroke-dasharray 500ms linear; transition: stroke-dasharray 500ms linear;
@ -435,6 +429,31 @@ a {
-moz-animation: infinite_rotation 2s linear infinite; -moz-animation: infinite_rotation 2s linear infinite;
-ms-animation: infinite_rotation 2s linear infinite; -ms-animation: infinite_rotation 2s linear infinite;
animation: infinite_rotation 2s linear infinite; animation: infinite_rotation 2s linear infinite;
stroke: #FFF;
stroke: rgba(255,255,255,0.95);
.progress-arc-intermediate & {
stroke: url(#grad-intermediate);
}
}
.stop0 {
stop-opacity: 1.0;
// .progress-arc-intermediate-blue & {
stop-color: #68a4d1;
// }
}
.stop60 {
stop-opacity: 1.0;
// .progress-arc-intermediate-blue & {
stop-color: #68a4d1;
// }
}
.stop100 {
stop-opacity: 0.0;
// .progress-arc-intermediate-blue & {
stop-color: #68a4d1;
// }
} }
/* Infinite rotation */ /* Infinite rotation */
@ -3556,8 +3575,10 @@ h5 {
/* Gif documents */ /* Gif documents */
.img_gif_image_wrap { .img_gif_image_wrap {
position: relative; position: relative;
overflow: hidden;
} }
.img_gif_meta { .img_gif_meta {
background: rgba(0,0,0,0.3);
width: 40px; width: 40px;
height: 40px; height: 40px;
line-height: 0; line-height: 0;
@ -3576,61 +3597,58 @@ h5 {
color: #FFF; color: #FFF;
display: block; display: block;
line-height: 40px; line-height: 40px;
font-size: 15px; font-size: 13px;
background: rgba(0,0,0,0.3);
text-align: center; text-align: center;
} }
.icon-cancel {
position: absolute;
top: 50%;
left: 50%;
margin-left: -9px;
margin-top: -1px;
.img_gif_thumb { .icon-bar {
-webkit-filter: blur(3px); display: block;
-moz-filter: blur(3px); width: 18px;
-o-filter: blur(3px); height: 2px;
-ms-filter: blur(3px); background: #FFF;
filter: blur(3px); transform-origin: 50% 50%;
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
margin: -1px; &:first-child {
padding: 1px; .transform(rotate(-45deg));
max-width: 100%; }
height: auto; &:last-child {
.transform(translate3d(0,-2px,0) rotate(45deg));
} }
.img_gif_image {
max-width: 100%;
} }
.img_gif_info_wrap {
color: #fff;
font-size: 10px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 4px;
} }
// .img_gif_label,
// .img_gif_size {
// padding: 1px 8px;
// background: rgba(0,0,0,0.5);
// border-radius: 3px;
// overflow: hidden;
// }
.img_gif_progress_wrap { .img_gif_thumb {
position: absolute; -webkit-filter: blur(2px);
bottom: 0; -moz-filter: blur(2px);
left: 0; -o-filter: blur(2px);
right: 0; -ms-filter: blur(2px);
filter: blur(2px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
transform-origin: center center;
-webkit-transform-origin: center center;
-webkit-transform: scale(1.02, 1.02);
transform: scale(1.02, 1.02);
.tg_progress { max-width: 100%;
background: rgba(0,0,0, 0.6); height: auto;
border-color: rgba(0,0,0, 0.6);
border-width: 8px;
height: 18px;
border-radius: 0;
} }
.progress-bar { .img_gif_meta_contents {
background: #fff; transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s;
height: 2px; }
.img_gif_meta_contents.ng-leave.ng-leave-active,
.img_gif_meta_contents.ng-enter {
opacity: 0;
} }
.img_gif_meta_contents.ng-leave,
.img_gif_meta_contents.ng-enter.ng-enter-active {
opacity: 1;
} }
.countries_modal_window { .countries_modal_window {

10
app/partials/desktop/full_gif.html
Unescape View File

@ -3,8 +3,14 @@
<div class="img_gif_image_wrap"> <div class="img_gif_image_wrap">
<div class="img_gif_meta" ng-show="!isActive" ng-switch="document.progress.enabled"> <div class="img_gif_meta" ng-show="!isActive" ng-switch="document.progress.enabled">
<div ng-switch-when="true" my-arc-progress="document.progress.percent"></div> <div ng-switch-when="true" class="img_gif_meta_contents">
<div ng-switch-default class="img_gif_label">GIF</div> <i class="icon icon-cancel">
<i class="icon icon-bar"></i>
<i class="icon icon-bar"></i>
</i>
<div my-arc-progress="document.progress.percent"></div>
</div>
<div ng-switch-default class="img_gif_label noselect" class="img_gif_meta_contents">GIF</div>
</div> </div>
<div ng-if="document.url" ng-show="document.downloaded &amp;&amp; isActive" ng-switch="document.mime_type == 'video/mp4'"> <div ng-if="document.url" ng-show="document.downloaded &amp;&amp; isActive" ng-switch="document.mime_type == 'video/mp4'">

Write Preview
Loading…
Cancel
Save