blob: 7d8743315ee1fc7456094606eb12c8d850f94667 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
// Copyright (c) 2011 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// Counter used to give webkit animations unique names.
var animationCounter = 0;
function addAnimation(code) {
var name = 'anim' + animationCounter;
animationCounter++;
var rules = document.createTextNode(
'@-webkit-keyframes ' + name + ' {' + code + '}');
var el = document.createElement('style');
el.type = 'text/css';
el.appendChild(rules);
el.setAttribute('id', name);
document.body.appendChild(el);
return name;
}
/**
* Fades in an element. Used for both printing options and error messages
* appearing underneath the textfields.
* @param {HTMLElement} el The element to be faded in.
*/
function fadeInElement(el) {
if (el.classList.contains('visible'))
return;
el.classList.remove('closing');
el.style.height = 'auto';
var height = el.offsetHeight;
el.style.height = height + 'px';
var animName = addAnimation(
'0% { opacity: 0; height: 0; } ' +
'80% { height: ' + (height + 4) + 'px; }' +
'100% { opacity: 1; height: ' + height + 'px; }');
el.style.webkitAnimationName = animName;
el.classList.add('visible');
el.addEventListener('webkitAnimationEnd', function() {
el.style.height = '';
el.style.webkitAnimationName = '';
fadeInOutCleanup(animName);
el.removeEventListener('webkitAnimationEnd', arguments.callee, false);
}, false );
}
/**
* Fades out an element. Used for both printing options and error messages
* appearing underneath the textfields.
* @param {HTMLElement} el The element to be faded out.
*/
function fadeOutElement(el) {
if (!el.classList.contains('visible'))
return;
el.style.height = 'auto';
var height = el.offsetHeight;
el.style.height = height + 'px';
var animName = addAnimation(
'0% { opacity: 1; height: ' + height + 'px; }' +
'100% { opacity: 1; height: 0; }');
el.style.webkitAnimationName = animName;
el.classList.add('closing');
el.classList.remove('visible');
el.addEventListener('webkitAnimationEnd', function() {
fadeInOutCleanup(animName);
el.removeEventListener('webkitAnimationEnd', arguments.callee, false);
}, false );
}
/**
* Removes the <style> element corrsponding to |animationName| from the DOM.
* @param {string} animationName The name of the animation to be removed.
*/
function fadeInOutCleanup(animationName) {
animEl = document.getElementById(animationName);
if (animEl)
animEl.parentNode.removeChild(animEl);
}
function showLoadingAnimation() {
$('dancing-dots-text').classList.remove('hidden');
var pdfViewer = $('pdf-viewer');
if (pdfViewer)
pdfViewer.classList.add('invisible');
$('overlay-layer').classList.remove('invisible');
}
function hideLoadingAnimation() {
var overlayLayer = $('overlay-layer');
overlayLayer.addEventListener('webkitTransitionEnd', loadingAnimationCleanup);
var pdfViewer = $('pdf-viewer');
if (pdfViewer)
pdfViewer.classList.remove('invisible');
overlayLayer.classList.add('invisible');
}
function loadingAnimationCleanup() {
$('dancing-dots-text').classList.add('hidden');
$('overlay-layer').removeEventListener('webkitTransitionEnd',
loadingAnimationCleanup);
}
|
