Throbbing donate button for server UI

This commit is contained in:
Kovid Goyal 2015-10-20 14:31:56 +05:30
parent 421136e0d0
commit cdfe01a5e5
4 changed files with 79 additions and 10 deletions

View File

@ -53,6 +53,12 @@ a {
font-size:100%;
vertical-align:baseline;
background:transparent;
text-decoration:none;
color: currentColor;
}
a:visited {
color: currentColor;
}
table {

Binary file not shown.

View File

@ -2,23 +2,40 @@
# License: GPL v3 Copyright: 2015, Kovid Goyal <kovid at kovidgoyal.net>
from book_list.theme import get_color
from dom import set_css
from dom import set_css, clear, create_keyframes
from elementmaker import E
from gettext import gettext as _
bar_counter = 0
def show_donate_page():
url = 'http://calibre-ebook.com/donate'
if not window.open(url, '_blank'):
window.location = url
return False
class TopBar:
def __init__(self):
nonlocal bar_counter
bar_counter += 1
self.bar_id, self.dummy_bar_id = 'top-bar-' + bar_counter, 'dummy-top-bar-' + bar_counter
db, b = E.div(id=self.dummy_bar_id), E.div(id=self.bar_id)
set_css(b, position='fixed', left='0', top='0')
document.body.appendChild(db)
document.body.appendChild(b)
for bar in db, b:
set_css(bar, width='100%', min_height='25px', background_color=get_color('bar-background'), padding='0.1rem')
self.throbber_name = self.bar_id + '-throbber'
style = create_keyframes(self.throbber_name, 'from { transform: scale(1); } 50% { transform: scale(0.5); } to { transform: scale(1); }')
for bid in self.dummy_bar_id, self.bar_id:
bar = E.div(
id=bid, class_='top-bar', style="padding-left: 0.5em; padding-right: 0.5em; padding-top: 0.5ex; padding-bottom: 0.5ex",
E.div(style="display:table-cell;"),
E.div(style="display:table-cell; text-align:right;")
)
if bid == self.bar_id:
set_css(bar, position='fixed', left='0', top='0')
bar.appendChild(E.style(style, type='text/css'))
set_css(bar,
width='100%', display='table', min_height='25px', font_size='1.4rem',
color=get_color('bar-foreground'), background_color=get_color('bar-background'))
document.body.appendChild(bar)
self.set_left(run_animation=True)
@property
def bar(self):
@ -27,3 +44,21 @@ class TopBar:
@property
def dummy_bar(self):
return document.getElementById(self.dummy_bar_id)
def set_left(self, title='calibre', icon_name='heart', action=show_donate_page, tooltip='', run_animation=False):
if not tooltip and icon_name == 'heart':
tooltip = _('Donate to support calibre')
for bar in self.bar, self.dummy_bar:
left = bar.firstChild
clear(left)
left.appendChild(E.a(
style="overflow: hidden; display:inline-block; vertical-align:text-top",
href="javascript:void(0)", title=tooltip,
E.i(class_='fa fa-' + icon_name)
))
left.appendChild(E.span(title, style='margin-left: 0.5em; font-weight: bold; text-overflow:ellipsis; overflow: hidden'))
if icon_name == 'heart' and bar is self.bar:
set_css(left.firstChild,
animation_name=self.throbber_name, animation_duration='1s', animation_timing_function='ease-in-out',
animation_iteration_count='5', animation_play_state='running' if run_animation else 'paused'
)

View File

@ -2,7 +2,16 @@
# License: GPL v3 Copyright: 2015, Kovid Goyal <kovid at kovidgoyal.net>
simple_vendor_prefixes = {
'transform': v"['webkit', 'ms', 'moz']",
'transform': v"['webkit', 'ms', 'moz', 'o']",
'animation': v"['webkit', 'moz', 'o']",
'animation-name': v"['webkit', 'moz', 'o']",
'animation-duration': v"['webkit', 'moz', 'o']",
'animation-timing-function': v"['webkit', 'moz', 'o']",
'animation-delay': v"['webkit', 'moz', 'o']",
'animation-iteration-count': v"['webkit', 'moz', 'o']",
'animation-direction': v"['webkit', 'moz', 'o']",
'animation-fill-mode': v"['webkit', 'moz', 'o']",
'animation-play-state': v"['webkit', 'moz', 'o']",
}
def set_css(elem, **kw):
@ -10,8 +19,27 @@ def set_css(elem, **kw):
if s:
for prop in kw:
name, val = str.replace(str.rstrip(prop, '_'), '_', '-'), kw[prop]
if val is None or val is undefined:
s.removeProperty(name)
else:
s.setProperty(name, val)
prefixes = simple_vendor_prefixes[name]
if prefixes:
for prefix in prefixes:
if val is None or val is undefined:
s.removeProperty('-' + prefix + '-' + name)
else:
s.setProperty('-' + prefix + '-' + name, val)
def clear(*nodes):
for node in nodes:
node.innerHTML = ''
def create_keyframes(animation_name, *frames):
ans = v'[]'
for prefix in '-webkit-', '-moz-', '-o-', '':
ans.push('@' + prefix + 'keyframes ' + animation_name + ' {')
for frame in frames:
ans.push(frame)
ans.push('}')
return ans.join('\n')