def get_display(self):
parser = self.kwargs.get("parser")
self.search_key = self.kwargs.get("search_key")
sobject = Search.get_by_search_key(self.search_key)
if sobject.get_base_search_type() == "sthpw/snapshot":
snapshot = sobject
elif sobject.get_base_search_type() == "sthpw/file":
# if it is a file object
snapshot = sobject.get_parent()
else:
snapshots = Snapshot.get_by_sobject(sobject, is_latest=True)
snapshot = snapshots[0]
# Extension determine UI class for preview
thumb_path = snapshot.get_web_path_by_type("icon")
web_src = snapshot.get_web_path_by_type("web")
from pyasm.biz import File
file_type = "main"
lib_path = snapshot.get_lib_path_by_type(file_type)
src = snapshot.get_web_path_by_type(file_type)
if not web_src:
web_src = src
parts = os.path.splitext(src)
ext = parts[1]
ext = ext.lstrip(".")
ext = ext.lower()
#parent = snapshot.get_parent()
top = self.top
self.set_as_panel(top)
if ext == "pdf":
iframe = HtmlElement.iframe()
iframe.set_attr('src', src)
iframe.add_style("width: 100%")
iframe.add_style("height: 800px")
top.add(iframe)
return top
from tactic.ui.container import ResizableTableWdg
table = ResizableTableWdg()
top.add(table)
tr = table.add_row()
# These bvrs allow for smooth switching if switching between files
# like in the RepoBrowserWdg
tr.add_style("height: 200px")
load_height_bvr = {
'type':
'load',
'cbjs_action':
'''
var last_height = spt.container.get_value("last_img_height");
if (last_height) {
bvr.src_el.setStyle("height", last_height);
}
'''
}
tr.add_behavior(load_height_bvr)
unload_height_bvr = {
'type':
'unload',
'cbjs_action':
'''
var last_height = bvr.src_el.getStyle("height");
spt.container.set_value("last_img_height", last_height);
'''
}
tr.add_behavior(unload_height_bvr)
table.add_style("width: 100%")
table.add_style("text-align", "center")
from tactic.ui.widget import EmbedWdg
td = table.add_cell()
td.add_color(
"background",
"background",
)
td.add_style("vertical-align: middle")
td.add_style("height: inherit")
td.add_style("overflow-x: auto")
if ext in ['txt', 'html', 'ini']:
content_div = DivWdg()
f = open(lib_path, 'r')
content = f.read(10000)
f.close()
if not content:
text = "No Content"
else:
size = os.path.getsize(lib_path)
from pyasm.common import FormatValue
value = FormatValue().get_format_value(size, "KB")
content_div.add("Showing first 10K of %s<hr/>" % value)
text = TextAreaWdg()
text.add(content)
text.add_style("width: 100%")
text.add_style("height: 100%")
text.add_style("padding: 10px")
text.add_style("border: none")
text.add_attr("readonly", "true")
content_div.add(text)
td.add(content_div)
content_div.add_style("color", "#000")
content_div.add_style("width", "auto")
content_div.add_style("margin", "20px")
content_div.add_style("height", "100%")
elif ext in File.IMAGE_EXT or ext == "gif":
if lib_path.find("#") != -1:
img = DivWdg()
file_range = snapshot.get_file_range()
file_range_div = DivWdg()
file_range_div.add("File Range: %s" % file_range.get_display())
img.add(file_range_div)
file_range_div.add_style("font-size: 1.4em")
file_range_div.add_style("margin: 15px 0px")
"""
left_chevron = IconWdg("Previous", "BS_CHEVRON_LEFT")
file_range_div.add(left_chevron)
right_chevron = IconWdg("Next", "BS_CHEVRON_RIGHT")
file_range_div.add(right_chevron)
"""
expanded_paths = snapshot.get_expanded_web_paths()
lib_paths = snapshot.get_expanded_lib_paths()
lib_path = lib_paths[0]
items_div = DivWdg()
img.add(items_div)
items_div.add_style("width: auto")
for path in expanded_paths:
item = HtmlElement.img(src=path)
items_div.add(item)
item.add_style("max-height: 300px")
item.add_style("height: auto")
item.add_style("width: 32%")
item.add_style("margin: 2px")
item.add_style("display: inline-block")
#item.add_class("spt_resizable")
img.add_style("margin: 20px")
img.add_style("max-height: 400px")
img.add_style("overflow-y: auto")
img.add_style("overflow-hidden: auto")
img.add_style("text-align: left")
else:
if ext == "gif":
img = HtmlElement.img(src=src)
else:
img = HtmlElement.img(src=web_src)
img.add_style("height: inherit")
img.add_style("width: auto")
td.add(img)
elif ext in File.VIDEO_EXT:
embed_wdg = EmbedWdg(src=src,
thumb_path=thumb_path,
preload="auto",
controls=True)
td.add(embed_wdg)
embed_wdg.add_style("margin: auto auto")
embed_wdg.add_class("spt_resizable")
embed_wdg.add_behavior(load_height_bvr)
embed_wdg.add_behavior(unload_height_bvr)
else:
thumb_table = DivWdg()
td.add(thumb_table)
thumb_table.add_behavior({
'type':
'click_up',
'src':
src,
'cbjs_action':
'''
window.open(bvr.src);
'''
})
thumb_table.add_class("hand")
thumb_table.add_style("width: 200px")
thumb_table.add_style("height: 125px")
thumb_table.add_style("padding: 5px")
thumb_table.add_style("margin-left: 20px")
thumb_table.add_style("display: inline-block")
thumb_table.add_style("vertical-align: top")
thumb_table.add_style("overflow-y: hidden")
from tactic.ui.panel import ThumbWdg2
thumb = ThumbWdg2()
thumb_table.add(thumb)
thumb.set_sobject(snapshot)
table.add_row()
td = table.add_cell()
from tactic.ui.checkin import PathMetadataWdg
from tactic.ui.checkin import SnapshotMetadataWdg
from pyasm.widget import SelectWdg
select = SelectWdg(name="parser")
select.add_style("width: 125px")
select.add_style("margin-top: 0px")
select.add_style("margin-right: 10px")
select.add_empty_option("-- Metadata --")
td.add(select)
select.add_style("float: right")
select.set_option("values",
["IPTC", "EXIF", "XMP", "ImageMagick", "PIL"])
select.add_behavior({
'type':
'change',
'cbjs_action':
'''
var parser = bvr.src_el.value;
spt.panel.refresh_element(bvr.src_el, {parser: parser})
'''
})
if parser:
select.set_value(parser)
title_div = DivWdg()
td.add(title_div)
title_div.add("<div style='font-size: 16px'>File Metadata</div>")
title_div.add("<div>Metadata extracted directly from the file</div>")
title_div.add("<hr/>")
title_div.add_style("text-align: left")
title_div.add_style("margin: 0px 10px")
metadata_div = DivWdg()
td.add(metadata_div)
metadata_div.add_style("max-height: 400px")
metadata_div.add_style("overflow-y: auto")
metadata_div.add_style("overflow-x: hidden")
metadata_div.add_style("margin: 20px 0px 20px 10px")
metadata_div.add_style("text-align: left")
use_tactic_tags = self.kwargs.get("use_tactic_tags")
server_src = lib_path
# get it dynamically by path
metadata_wdg = PathMetadataWdg(path=server_src,
parser=parser,
use_tactic_tags=use_tactic_tags,
search_key=self.search_key)
metadata_div.add(metadata_wdg)
top.add("<br/>")
return top
def get_display(my):
my.sobject_data = {}
top = my.top
top.add_style
top.add_class("spt_gallery_top")
inner = DivWdg()
top.add(inner)
inner.add_style("position: fixed")
inner.add_style("top: 0")
inner.add_style("left: 0")
inner.add_style("width: 100%")
#inner.add_style("height: 100%")
inner.add_style("bottom: 0px")
inner.add_style("padding-bottom: 40px")
#inner.add_style("background: rgba(0,0,0,0.5)")
inner.add_style("background: rgba(0,0,0,1)")
inner.add_style("z-index: 1000")
width = my.kwargs.get("width")
height = my.kwargs.get("height")
if not width:
width = 1300
else:
width = int(width)
paths = my.get_paths(file_type='main')
# icon type may be too small
thumb_paths = my.get_paths(file_type='web')
descriptions = []
for path in paths:
sobject = my.sobject_data.get(path)
if not sobject:
descriptions.append("")
else:
description = sobject.get("description")
if not description:
description = ""
descriptions.append(description)
total_width = width * len(paths)
inner.add_behavior({
'type':
'load',
'width':
width,
'total_width':
total_width,
'descriptions':
descriptions,
'cbjs_action':
'''
spt.gallery = {};
// 1250 is defined also in the css styles
spt.gallery.portrait = window.innerWidth < 1250;
spt.gallery.top = bvr.src_el;
spt.gallery.content = spt.gallery.top.getElement(".spt_gallery_content");
spt.gallery.content.setStyle('opacity','0.1')
spt.gallery.desc_el = spt.gallery.top.getElement(".spt_gallery_description");
var height_factor = '100%';
if (spt.gallery.portrait) {
bvr.width = bvr.width * 0.8;
var scroll = bvr.src_el.getElement('.spt_gallery_scroll');
scroll.setStyle('width', bvr.width);
scroll.setStyle('height', '80%');
scroll.setStyle('position', 'relative');
scroll.setStyle('top', '500px');
var items = bvr.src_el.getElements('.spt_gallery_item');
for (var k=0; k < items.length; k++) {
items[k].setStyle('width', bvr.width);
items[k].setStyle('height', '80%');
}
var left = bvr.src_el.getElement('.spt_left_arrow');
var right = bvr.src_el.getElement('.spt_right_arrow');
left.setStyle('top','88%')
left.setStyle('left','35%')
right.setStyle('top','88%')
right.setStyle('right','35%')
height_factor = '70%';
}
//window.addEvent('domready', function() {
setTimeout(function() {
// set the img h or w directly
var items = bvr.src_el.getElements('.spt_gallery_item img');
// fade in
spt.gallery.content.set('tween', {duration: 250}).fade('in');
for (var k=0; k < items.length; k++) {
var sizes = items[k].getSize();
var item_h = sizes.y;
var item_w = sizes.x;
if (item_h >= item_w){
items[k].setStyle('width', '');
items[k].setStyle('height', height_factor);
}
else {
items[k].setStyle('width','100%');
items[k].setStyle('height','');
}
}
}, 50)
spt.gallery.width = bvr.width;
spt.gallery.descriptions = bvr.descriptions;
spt.gallery.index = 0;
spt.gallery.total = bvr.descriptions.length;
spt.gallery.left_arrow = bvr.src_el.getElement('.spt_left_arrow');
spt.gallery.right_arrow = bvr.src_el.getElement('.spt_right_arrow');
spt.gallery.videos = {};
spt.gallery.init = function() {
}
spt.gallery.stack = [];
spt.gallery.push_stack = function(key) {
spt.gallery.stack.push(key);
}
spt.gallery.show_next = function(src_el) {
if (!src_el)
src_el = spt.gallery.right_arrow;
if (spt.gallery.index >= spt.gallery.total-2) {
spt.hide(src_el);
}
if (spt.gallery.index == spt.gallery.total-1) {
return;
}
spt.gallery.index += 1;
spt.gallery.show_index(spt.gallery.index);
}
spt.gallery.show_prev = function(src_el) {
if (!src_el)
src_el = spt.gallery.left_arrow;
if (spt.gallery.index <= 1) {
spt.hide(src_el);
}
if (spt.gallery.index == 0) {
return;
}
spt.gallery.index -= 1;
spt.gallery.show_index(spt.gallery.index);
}
spt.gallery.show_index = function(index) {
// stop all videos
var videos = spt.gallery.top.getElements(".video-js");
for (var i = 0; i < videos.length; i++) {
try {
var video = videos[i];
var video_id = video.get("id");
var video_obj = videojs(video_id, {"nativeControlsForTouch": false});
video_obj.pause();
}
catch(e) {
}
}
var width = spt.gallery.width;
var margin = - width * index;
var content = spt.gallery.content;
//content.setStyle("margin-left", margin + "px");
new Fx.Tween(content,{duration: 250}).start("margin-left", margin);
spt.gallery.index = index;
var total = spt.gallery.total;
if (index == 0) {
spt.hide(spt.gallery.left_arrow);
spt.show(spt.gallery.right_arrow);
}
else if (index == total - 1) {
spt.show(spt.gallery.left_arrow);
spt.hide(spt.gallery.right_arrow);
}
else {
spt.show(spt.gallery.left_arrow);
spt.show(spt.gallery.right_arrow);
}
var description = spt.gallery.descriptions[index];
if (!description) {
description = (index+1)+" of "+total;
}
else {
description = (index+1)+" of "+total+" - " + description;
}
spt.gallery.set_description(description);
}
spt.gallery.close = function() {
var content = spt.gallery.content;
var top = content.getParent(".spt_gallery_top");
spt.behavior.destroy_element(top);
}
spt.gallery.set_description = function(desc) {
var desc_el = spt.gallery.desc_el;
desc_el.innerHTML = desc;
}
'''
})
scroll = DivWdg(css='spt_gallery_scroll')
inner.add(scroll)
scroll.set_box_shadow()
scroll.add_style("width: %s" % width)
if height:
scroll.add_style("height: %s" % height)
scroll.add_style("overflow-x: hidden")
scroll.add_style("overflow-y: hidden")
scroll.add_style("background: #000")
#scroll.add_style("position: absolute")
scroll.add_style("margin-left: auto")
scroll.add_style("margin-right: auto")
content = DivWdg()
top.add_attr('tabindex', '-1')
scroll.add(content)
content.add_class("spt_gallery_content")
# make the itesm vertically align to bottom
content.add_styles(
"display: flex; flex-flow: row nowrap; align-items: flex-end;")
content.add_style("width: %s" % total_width)
top.add_behavior({
'type':
'load',
'cbjs_action':
'''
bvr.src_el.focus();
'''
})
top.add_behavior({
'type':
'mouseenter',
'cbjs_action':
'''
bvr.src_el.focus();
'''
})
top.add_behavior({
'type':
'mouseleave',
'cbjs_action':
'''
bvr.src_el.blur();
'''
})
"""
input = TextWdg("keydown")
content.add(input)
input.add_style("position: absolute")
input.add_style("left: -5000px")
"""
top.add_behavior({
'type':
'keydown',
'cbjs_action':
'''
var key = evt.key;
if (key == "left") {
spt.gallery.push_stack(key);
spt.gallery.show_prev();
}
else if (key == "right") {
spt.gallery.push_stack(key);
spt.gallery.show_next();
}
else if (key == "esc" || key == "enter") {
var top = bvr.src_el
spt.behavior.destroy_element(top);
}
'''
})
curr_index = 0
for i, path in enumerate(paths):
path_div = DivWdg(css='spt_gallery_item')
content.add(path_div)
path_div.add_style("float: left")
if path == my.curr_path:
curr_index = i
try:
thumb_path = thumb_paths[i]
except IndexError:
print "Cannot find the thumb_path [%s] " % i
thumb_path = ''
path_div.add_style("width: %s" % width)
if height:
path_div.add_style("height: %s" % height)
from tactic.ui.widget import EmbedWdg
embed = EmbedWdg(src=path,
click=False,
thumb_path=thumb_path,
index=i)
path_div.add(embed)
#img = HtmlElement.img(path)
#path_div.add(img)
#img.add_style("width: 100%")
content.add_behavior({
'type':
'load',
'index':
curr_index,
'cbjs_action':
'''
if (!bvr.index) bvr.index = 0;
spt.gallery.show_index(bvr.index);
'''
})
#icon = IconWdg(title="Close", icon="/plugins/remington/pos/icons/close.png")
icon = IconWdg(title="Close",
icon="/context/icons/glyphs/close.png",
width="40px")
inner.add(icon)
#icon = DivWdg()
#icon.add("X")
#icon.add_style("font-size: 42px")
#icon.add_style("color: #ddd")
#icon.add_style("width: 48px")
#icon.add_style("height: 48px")
#icon.add_style("text-align: center")
#icon.add_style("border-radius: 30px")
#icon.add_style("border: solid 3px #ddd")
icon.add_style("position: absolute")
icon.add_style("cursor: pointer")
icon.add_style("bottom: 80px")
icon.add_style("left: 38px")
icon.add_style("opacity: 0.5")
icon.add_behavior({
'type':
'click_up',
'cbjs_action':
'''
var top = bvr.src_el.getParent(".spt_gallery_top");
spt.behavior.destroy_element(top);
'''
})
icon = IconWdg(title="Previous",
icon="/context/icons/glyphs/chevron_left.png")
inner.add(icon)
icon.add_class('spt_left_arrow')
icon.add_style("cursor: pointer")
icon.add_style("position: absolute")
icon.add_style("top: 40%")
icon.add_style("left: 0px")
icon.add_style("opacity: 0.5")
icon.add_behavior({
'type':
'click_up',
'cbjs_action':
'''
var arrow = bvr.src_el;
spt.gallery.show_prev(arrow);
'''
})
icon = IconWdg(title="Next",
icon="/context/icons/glyphs/chevron_right.png")
inner.add(icon)
icon.add_class('spt_right_arrow')
icon.add_style("position: absolute")
icon.add_style("cursor: pointer")
icon.add_style("top: 40%")
icon.add_style("right: 0px")
icon.add_style("opacity: 0.5")
icon.add_behavior({
'type':
'click_up',
'cbjs_action':
'''
var arrow = bvr.src_el;
spt.gallery.show_next(arrow);
'''
})
desc_div = DivWdg()
desc_div.add_class("spt_gallery_description")
desc_div.add_style("height: 30px")
desc_div.add_style("width: %s" % width)
desc_div.add_style("text-align: center")
desc_div.add_style("background: rgba(0,0,0,1)")
desc_div.add_style("color: #bbb")
desc_div.add_style("font-weight: bold")
desc_div.add_style("font-size: 16px")
desc_div.add_style("padding-top: 10px")
desc_div.add_style("margin-left: -%s" % (width / 2))
desc_div.add_style("z-index: 1000")
desc_div.add("")
desc_outer_div = DivWdg()
inner.add(desc_outer_div)
desc_outer_div.add_style("position: fixed")
desc_outer_div.add(desc_div)
desc_outer_div.add_style("bottom: 0px")
desc_outer_div.add_style("left: 50%")
return top
def get_display(my):
my.search_key = my.kwargs.get("search_key")
sobject = Search.get_by_search_key(my.search_key)
if sobject.get_base_search_type() == "sthpw/snapshot":
snapshot = sobject
elif sobject.get_base_search_type() == "sthpw/file":
# if it is a file object
snapshot = sobject.get_parent()
else:
snapshots = Snapshot.get_by_sobject(sobject)
snapshot = snapshots[0]
#parent = snapshot.get_parent()
top = my.top
from tactic.ui.container import ResizableTableWdg
table = ResizableTableWdg()
top.add(table)
table.add_row()
table.add_style("width: 100%")
from tactic.ui.widget import EmbedWdg
td = table.add_cell()
td.add_color("background", "background",)
td.add_style("vertical-align: middle")
td.add_style("height: 200px")
td.add_style("overflow-x: auto")
file_type = "icon"
thumb_path = snapshot.get_web_path_by_type(file_type)
file_type = "main"
src = snapshot.get_web_path_by_type(file_type)
parts = os.path.splitext(src)
ext = parts[1]
ext = ext.lower()
if ext in ['.doc','.xls']:
from pyasm.widget import ThumbWdg
link = ThumbWdg.find_icon_link(src)
img = HtmlElement.img(src=link)
href = DivWdg()
href.add_style("text-align: center")
href.add(img)
td.add(href)
href.add_behavior( {
'type': 'click_up',
'src': src,
'cbjs_action': '''
window.open(bvr.src);
'''
} )
href.add_class("hand")
else:
embed_wdg = EmbedWdg(src=src, thumb_path=thumb_path)
td.add(embed_wdg)
embed_wdg.add_style("margin: auto auto")
embed_wdg.add_class("spt_resizable")
embed_wdg.add_style("width: 100%")
embed_wdg.add_style("height: 240px")
embed_wdg.add_behavior( {
'type': 'load',
'cbjs_action': '''
var last_height = spt.container.get_value("last_img_height");
if (last_height) {
bvr.src_el.setStyle("height", last_height);
}
'''
} )
embed_wdg.add_behavior( {
'type': 'unload',
'cbjs_action': '''
var last_height = bvr.src_el.getStyle("height");
spt.container.set_value("last_img_height", last_height);
'''
} )
table.add_row()
td = table.add_cell()
from tactic.ui.checkin import PathMetadataWdg
from tactic.ui.checkin import SnapshotMetadataWdg
metadata_div = DivWdg()
td.add(metadata_div)
metadata_div.add_style("max-height: 400px")
metadata_div.add_style("overflow-y: auto")
metadata_div.add_style("overflow-x: hidden")
parser = my.kwargs.get("parser")
use_tactic_tags = my.kwargs.get("use_tactic_tags")
file_type = "main"
server_src = snapshot.get_lib_path_by_type(file_type)
# get it dynamically by path
metadata_wdg = PathMetadataWdg(path=server_src, parser=parser, use_tactic_tags=use_tactic_tags)
metadata_div.add(metadata_wdg)
#else:
# metadata_wdg = SnapshotMetadataWdg(snapshot=snapshot)
# metadata_div.add(metadata_wdg)
top.add("<br/>")
return top
def get_display(my):
my.sobject_data = {}
top = my.top
top.add_style
top.add_class("spt_gallery_top")
inner = DivWdg()
top.add(inner)
# make the whole Gallery unselectable
inner.add_class('unselectable')
inner.add_style("position: fixed")
inner.add_style("top: 0")
inner.add_style("left: 0")
inner.add_style("width: 100%")
#inner.add_style("height: 100%")
inner.add_style("bottom: 0px")
inner.add_style("padding-bottom: 40px")
#inner.add_style("background: rgba(0,0,0,0.5)")
inner.add_style("background: rgba(0,0,0,1)")
inner.add_style("z-index: 1000")
width = my.kwargs.get("width")
height = my.kwargs.get("height")
# default to top.
align = my.kwargs.get("align")
if not align:
align = "top"
if not width:
width = 1300
else:
width = int(width)
paths = my.get_paths(file_type='main')
# icon type may be too small
thumb_paths = my.get_paths(file_type='web')
descriptions = []
for path in paths:
sobject = my.sobject_data.get(path)
if not sobject:
descriptions.append("")
else:
description = sobject.get("description")
if not description:
description = ""
descriptions.append(description)
total_width = width * len(paths)
inner.add_behavior( {
'type': 'load',
'width': width,
'total_width': total_width,
'descriptions': descriptions,
'cbjs_action': '''
spt.gallery = {};
// 1250 is defined also in the css styles
spt.gallery.portrait = window.innerWidth < 1250;
spt.gallery.top = bvr.src_el;
spt.gallery.content = spt.gallery.top.getElement(".spt_gallery_content");
spt.gallery.content.setStyle('opacity','0.1')
spt.gallery.desc_el = spt.gallery.top.getElement(".spt_gallery_description");
var height_factor = '100%';
if (spt.gallery.portrait) {
bvr.width = bvr.width * 0.8;
var scroll = bvr.src_el.getElement('.spt_gallery_scroll');
scroll.setStyle('width', bvr.width);
scroll.setStyle('height', '80%');
scroll.setStyle('position', 'relative');
scroll.setStyle('top', '500px');
var items = bvr.src_el.getElements('.spt_gallery_item');
for (var k=0; k < items.length; k++) {
items[k].setStyle('width', bvr.width);
items[k].setStyle('height', '80%');
}
var left = bvr.src_el.getElement('.spt_left_arrow');
var right = bvr.src_el.getElement('.spt_right_arrow');
left.setStyle('top','88%')
left.setStyle('left','35%')
right.setStyle('top','88%')
right.setStyle('right','35%')
height_factor = '70%';
}
//window.addEvent('domready', function() {
setTimeout(function() {
// set the img h or w directly
var items = bvr.src_el.getElements('.spt_gallery_item img');
// fade in
spt.gallery.content.set('tween', {duration: 250}).fade('in');
for (var k=0; k < items.length; k++) {
var sizes = items[k].getSize();
var item_h = sizes.y;
var item_w = sizes.x;
if (item_h >= item_w){
items[k].setStyle('width', '');
items[k].setStyle('height', height_factor);
}
else {
items[k].setStyle('width','100%');
items[k].setStyle('height','');
}
}
}, 50)
spt.gallery.width = bvr.width;
spt.gallery.descriptions = bvr.descriptions;
spt.gallery.index = 0;
spt.gallery.total = bvr.descriptions.length;
spt.gallery.left_arrow = bvr.src_el.getElement('.spt_left_arrow');
spt.gallery.right_arrow = bvr.src_el.getElement('.spt_right_arrow');
spt.gallery.videos = {};
spt.gallery.init = function() {
}
spt.gallery.stack = [];
spt.gallery.push_stack = function(key) {
spt.gallery.stack.push(key);
}
spt.gallery.show_next = function(src_el) {
if (!src_el)
src_el = spt.gallery.right_arrow;
if (spt.gallery.index >= spt.gallery.total-2) {
spt.hide(src_el);
}
if (spt.gallery.index == spt.gallery.total-1) {
return;
}
spt.gallery.index += 1;
spt.gallery.show_index(spt.gallery.index);
}
spt.gallery.show_prev = function(src_el) {
if (!src_el)
src_el = spt.gallery.left_arrow;
if (spt.gallery.index <= 1) {
spt.hide(src_el);
}
if (spt.gallery.index == 0) {
return;
}
spt.gallery.index -= 1;
spt.gallery.show_index(spt.gallery.index);
}
spt.gallery.show_index = function(index) {
// stop all videos
var videos = spt.gallery.top.getElements(".video-js");
for (var i = 0; i < videos.length; i++) {
try {
var video = videos[i];
var video_id = video.get("id");
var video_obj = videojs(video_id, {"nativeControlsForTouch": false});
video_obj.pause();
}
catch(e) {
}
}
var width = spt.gallery.width;
var margin = - width * index;
var content = spt.gallery.content;
//content.setStyle("margin-left", margin + "px");
new Fx.Tween(content,{duration: 250}).start("margin-left", margin);
spt.gallery.index = index;
var total = spt.gallery.total;
if (index == 0) {
spt.hide(spt.gallery.left_arrow);
spt.show(spt.gallery.right_arrow);
}
else if (index == total - 1) {
spt.show(spt.gallery.left_arrow);
spt.hide(spt.gallery.right_arrow);
}
else {
spt.show(spt.gallery.left_arrow);
spt.show(spt.gallery.right_arrow);
}
var description = spt.gallery.descriptions[index];
if (!description) {
description = (index+1)+" of "+total;
}
else {
description = (index+1)+" of "+total+" - " + description;
}
spt.gallery.set_description(description);
}
spt.gallery.close = function() {
var content = spt.gallery.content;
var top = content.getParent(".spt_gallery_top");
spt.behavior.destroy_element(top);
}
spt.gallery.set_description = function(desc) {
var desc_el = spt.gallery.desc_el;
desc_el.innerHTML = desc;
}
'''
} )
scroll = DivWdg(css='spt_gallery_scroll')
inner.add(scroll)
scroll.set_box_shadow()
scroll.add_style("width: %s" % width)
if height:
scroll.add_style("height: %s" % height)
scroll.add_style("overflow-x: hidden")
scroll.add_style("overflow-y: hidden")
scroll.add_style("background: #000")
#scroll.add_style("position: absolute")
scroll.add_style("margin-left: auto")
scroll.add_style("margin-right: auto")
content = DivWdg()
top.add_attr('tabindex','-1')
scroll.add(content)
content.add_class("spt_gallery_content")
# make the items vertically align to bottom (flex-emd)
# on a regular monitor, align to top (flex-start) is better
if align == 'bottom':
align_items = 'flex-end'
else:
align_items = 'flex-start'
content.add_styles("display: flex; flex-flow: row nowrap; align-items: %s; justify-content: center;"%align_items)
content.add_style("width: %s" % total_width)
top.add_behavior( {
'type': 'load',
'cbjs_action': '''
bvr.src_el.focus();
'''
} )
top.add_behavior( {
'type': 'mouseenter',
'cbjs_action': '''
bvr.src_el.focus();
'''
} )
top.add_behavior( {
'type': 'mouseleave',
'cbjs_action': '''
bvr.src_el.blur();
'''
} )
"""
input = TextWdg("keydown")
content.add(input)
input.add_style("position: absolute")
input.add_style("left: -5000px")
"""
top.add_behavior( {
'type': 'keydown',
'cbjs_action': '''
var key = evt.key;
if (key == "left") {
spt.gallery.push_stack(key);
spt.gallery.show_prev();
}
else if (key == "right") {
spt.gallery.push_stack(key);
spt.gallery.show_next();
}
else if (key == "esc" || key == "enter") {
var top = bvr.src_el
spt.behavior.destroy_element(top);
}
'''
} )
curr_index = 0
for i, path in enumerate(paths):
path_div = DivWdg(css='spt_gallery_item')
content.add(path_div)
#path_div.add_style("float: left")
path_div.add_style("display: inline-block")
path_div.add_style("vertical-align: middle")
if path == my.curr_path:
curr_index = i
try:
thumb_path = thumb_paths[i]
except IndexError:
print "Cannot find the thumb_path [%s] "%i
thumb_path = ''
path_div.add_style("width: %s" % width)
if height:
path_div.add_style("height: %s" % height)
from tactic.ui.widget import EmbedWdg
embed = EmbedWdg(src=path, click=False, thumb_path=thumb_path, index=i)
path_div.add(embed)
path_div.add_style("width: 100%")
#embed.add_style("position: absolute")
embed.add_style("margin-top: 25%")
embed.add_style("transform: translate(0%, -50%)")
"""
path_div.add_behavior( {
'type': 'load',
'cbjs_action': '''
var el = bvr.src_el.child();
alert(el);
var size = el.getSize();
bvr.src_el.setStyle("width", size.x);
'''
} )
"""
#img = HtmlElement.img(path)
#path_div.add(img)
#img.add_style("width: 100%")
content.add_behavior({
'type': 'load',
'index': curr_index,
'cbjs_action': '''
if (!bvr.index) bvr.index = 0;
spt.gallery.show_index(bvr.index);
'''
} )
#icon = IconWdg(title="Close", icon="/plugins/remington/pos/icons/close.png")
icon = IconWdg(title="Close", icon="/context/icons/glyphs/close.png", width="40px")
inner.add(icon)
icon.add_style("position: absolute")
icon.add_style("cursor: pointer")
icon.add_style("bottom: 80px")
icon.add_style("left: 38px")
icon.add_style("opacity: 0.5")
icon.add_behavior( {
'type': 'click_up' ,
'cbjs_action': '''
var top = bvr.src_el.getParent(".spt_gallery_top");
spt.behavior.destroy_element(top);
'''
} )
icon.add_style("background", "rgba(48,48,48,0.7)")
icon.add_style("border-radius", "5px")
icon = IconWdg(title="Previous", icon="/context/icons/glyphs/chevron_left.png")
inner.add(icon)
icon.add_class('spt_left_arrow')
icon.add_style("cursor: pointer")
icon.add_style("position: absolute")
icon.add_style("top: 40%")
icon.add_style("left: 0px")
icon.add_style("opacity: 0.5")
icon.add_behavior( {
'type': 'click_up' ,
'cbjs_action': '''
var arrow = bvr.src_el;
spt.gallery.show_prev(arrow);
'''
} )
icon.add_style("background", "rgba(48,48,48,0.7)")
icon.add_style("border-radius", "5px")
icon = IconWdg(title="Next", icon="/context/icons/glyphs/chevron_right.png")
inner.add(icon)
icon.add_class('spt_right_arrow')
icon.add_style("position: absolute")
icon.add_style("cursor: pointer")
icon.add_style("top: 40%")
icon.add_style("right: 0px")
icon.add_style("opacity: 0.5")
icon.add_behavior( {
'type': 'click_up',
'cbjs_action': '''
var arrow = bvr.src_el;
spt.gallery.show_next(arrow);
'''
} )
icon.add_style("background", "rgba(48,48,48,0.7)")
icon.add_style("border-radius", "5px")
desc_div = DivWdg()
desc_div.add_class("spt_gallery_description")
desc_div.add_style("height: 30px")
desc_div.add_style("width: %s" % width)
desc_div.add_style("text-align: center")
desc_div.add_style("background: rgba(0,0,0,1)")
desc_div.add_style("color: #bbb")
desc_div.add_style("font-weight: bold")
desc_div.add_style("font-size: 16px")
desc_div.add_style("padding-top: 10px")
desc_div.add_style("margin-left: -%s" % (width/2))
desc_div.add_style("z-index: 1000")
desc_div.add("")
desc_outer_div = DivWdg()
inner.add(desc_outer_div)
desc_outer_div.add_style("position: fixed")
desc_outer_div.add(desc_div)
desc_outer_div.add_style("bottom: 0px")
desc_outer_div.add_style("left: 50%")
return top
def get_display(my):
my.search_key = my.kwargs.get("search_key")
sobject = Search.get_by_search_key(my.search_key)
if sobject.get_base_search_type() == "sthpw/snapshot":
snapshot = sobject
elif sobject.get_base_search_type() == "sthpw/file":
# if it is a file object
snapshot = sobject.get_parent()
else:
snapshots = Snapshot.get_by_sobject(sobject)
snapshot = snapshots[0]
#parent = snapshot.get_parent()
top = my.top
from tactic.ui.container import ResizableTableWdg
table = ResizableTableWdg()
top.add(table)
table.add_row()
table.add_style("width: 100%")
from tactic.ui.widget import EmbedWdg
td = table.add_cell()
td.add_color(
"background",
"background",
)
td.add_style("vertical-align: middle")
td.add_style("height: 200px")
td.add_style("overflow-x: auto")
file_type = "icon"
thumb_path = snapshot.get_web_path_by_type(file_type)
file_type = "main"
src = snapshot.get_web_path_by_type(file_type)
parts = os.path.splitext(src)
ext = parts[1]
ext = ext.lower()
if ext in ['.doc', '.xls']:
from pyasm.widget import ThumbWdg
link = ThumbWdg.find_icon_link(src)
img = HtmlElement.img(src=link)
href = DivWdg()
href.add_style("text-align: center")
href.add(img)
td.add(href)
href.add_behavior({
'type':
'click_up',
'src':
src,
'cbjs_action':
'''
window.open(bvr.src);
'''
})
href.add_class("hand")
else:
embed_wdg = EmbedWdg(src=src, thumb_path=thumb_path)
td.add(embed_wdg)
embed_wdg.add_style("margin: auto auto")
embed_wdg.add_class("spt_resizable")
embed_wdg.add_style("width: 100%")
embed_wdg.add_style("height: 240px")
embed_wdg.add_behavior({
'type':
'load',
'cbjs_action':
'''
var last_height = spt.container.get_value("last_img_height");
if (last_height) {
bvr.src_el.setStyle("height", last_height);
}
'''
})
embed_wdg.add_behavior({
'type':
'unload',
'cbjs_action':
'''
var last_height = bvr.src_el.getStyle("height");
spt.container.set_value("last_img_height", last_height);
'''
})
table.add_row()
td = table.add_cell()
from tactic.ui.checkin import PathMetadataWdg
from tactic.ui.checkin import SnapshotMetadataWdg
metadata_div = DivWdg()
td.add(metadata_div)
metadata_div.add_style("max-height: 400px")
metadata_div.add_style("overflow-y: auto")
metadata_div.add_style("overflow-x: hidden")
parser = my.kwargs.get("parser")
use_tactic_tags = my.kwargs.get("use_tactic_tags")
file_type = "main"
server_src = snapshot.get_lib_path_by_type(file_type)
# get it dynamically by path
metadata_wdg = PathMetadataWdg(path=server_src,
parser=parser,
use_tactic_tags=use_tactic_tags)
metadata_div.add(metadata_wdg)
#else:
# metadata_wdg = SnapshotMetadataWdg(snapshot=snapshot)
# metadata_div.add(metadata_wdg)
top.add("<br/>")
return top
def get_display(my):
my.search_key = my.kwargs.get("search_key")
sobject = Search.get_by_search_key(my.search_key)
if sobject.get_base_search_type() == "sthpw/snapshot":
snapshot = sobject
elif sobject.get_base_search_type() == "sthpw/file":
# if it is a file object
snapshot = sobject.get_parent()
else:
snapshots = Snapshot.get_by_sobject(sobject)
snapshot = snapshots[0]
#parent = snapshot.get_parent()
top = my.top
from tactic.ui.container import ResizableTableWdg
table = ResizableTableWdg()
top.add(table)
table.add_row()
table.add_style("width: 100%")
from tactic.ui.widget import EmbedWdg
td = table.add_cell()
td.add_color("background", "background",)
td.add_style("vertical-align: middle")
td.add_style("height: 200px")
td.add_style("overflow-x: auto")
file_type = "icon"
thumb_path = snapshot.get_web_path_by_type(file_type)
file_type = "main"
src = snapshot.get_web_path_by_type(file_type)
lib_path = snapshot.get_lib_path_by_type(file_type)
parts = os.path.splitext(src)
ext = parts[1]
ext = ext.lower()
content_div = DivWdg()
if ext in ['.doc','.xls']:
from pyasm.widget import ThumbWdg
link = ThumbWdg.find_icon_link(src)
img = HtmlElement.img(src=link)
href = DivWdg()
href.add_style("text-align: center")
href.add(img)
td.add(href)
href.add_behavior( {
'type': 'click_up',
'src': src,
'cbjs_action': '''
window.open(bvr.src);
'''
} )
href.add_class("hand")
elif ext in ['.txt','.html', '.ini']:
f = open(lib_path, 'r')
content = f.read(10000)
f.close()
if not content:
text = "No Content"
else:
size = os.path.getsize(lib_path)
from pyasm.common import FormatValue
value = FormatValue().get_format_value(size, "KB")
content_div.add("Showing first 10K of %s<hr/>" % value)
text = TextAreaWdg()
text.add(content)
text.add_style("width: 100%")
text.add_style("height: 300px")
text.add_style("padding: 10px")
text.add_style("border: none")
text.add_attr("readonly", "true")
content_div.add(text)
td.add(content_div)
content_div.add_style("color", "#000")
content_div.add_style("width", "auto")
content_div.add_style("margin", "20px")
elif thumb_path == "__DYNAMIC__":
td.add("No Preview")
else:
embed_wdg = EmbedWdg(src=src, thumb_path=thumb_path)
td.add(embed_wdg)
embed_wdg.add_style("margin: auto auto")
embed_wdg.add_class("spt_resizable")
embed_wdg.add_style("width: 100%")
embed_wdg.add_style("height: 240px")
embed_wdg.add_behavior( {
'type': 'load',
'cbjs_action': '''
var last_height = spt.container.get_value("last_img_height");
if (last_height) {
bvr.src_el.setStyle("height", last_height);
}
'''
} )
embed_wdg.add_behavior( {
'type': 'unload',
'cbjs_action': '''
var last_height = bvr.src_el.getStyle("height");
spt.container.set_value("last_img_height", last_height);
'''
} )
table.add_row()
td = table.add_cell()
from tactic.ui.checkin import PathMetadataWdg
from tactic.ui.checkin import SnapshotMetadataWdg
metadata_div = DivWdg()
td.add(metadata_div)
metadata_div.add_style("max-height: 400px")
metadata_div.add_style("overflow-y: auto")
metadata_div.add_style("overflow-x: hidden")
parser = my.kwargs.get("parser")
use_tactic_tags = my.kwargs.get("use_tactic_tags")
file_type = "main"
server_src = snapshot.get_lib_path_by_type(file_type)
# get it dynamically by path
metadata_wdg = PathMetadataWdg(path=server_src, parser=parser, use_tactic_tags=use_tactic_tags)
metadata_div.add(metadata_wdg)
#else:
# metadata_wdg = SnapshotMetadataWdg(snapshot=snapshot)
# metadata_div.add(metadata_wdg)
top.add("<br/>")
return top
def get_display(self):
parser = self.kwargs.get("parser")
self.search_key = self.kwargs.get("search_key")
sobject = Search.get_by_search_key(self.search_key)
if sobject.get_base_search_type() == "sthpw/snapshot":
snapshot = sobject
elif sobject.get_base_search_type() == "sthpw/file":
# if it is a file object
snapshot = sobject.get_parent()
else:
snapshots = Snapshot.get_by_sobject(sobject, is_latest=True)
snapshot = snapshots[0]
# Extension determine UI class for preview
thumb_path = snapshot.get_web_path_by_type("icon")
web_src = snapshot.get_web_path_by_type("web")
from pyasm.biz import File
file_type = "main"
lib_path = snapshot.get_lib_path_by_type(file_type)
src = snapshot.get_web_path_by_type(file_type)
if not web_src:
web_src = src
parts = os.path.splitext(src)
ext = parts[1]
ext = ext.lstrip(".")
ext = ext.lower()
#parent = snapshot.get_parent()
top = self.top
self.set_as_panel(top)
if ext == "pdf":
iframe = HtmlElement.iframe()
iframe.set_attr('src', src)
iframe.add_style("width: 100%")
iframe.add_style("height: 800px")
top.add(iframe)
return top
from tactic.ui.container import ResizableTableWdg
table = ResizableTableWdg()
top.add(table)
tr = table.add_row()
# These bvrs allow for smooth switching if switching between files
# like in the RepoBrowserWdg
tr.add_style("height: 200px")
load_height_bvr = {
'type': 'load',
'cbjs_action': '''
var last_height = spt.container.get_value("last_img_height");
if (last_height) {
bvr.src_el.setStyle("height", last_height);
}
'''
}
tr.add_behavior(load_height_bvr)
unload_height_bvr = {
'type': 'unload',
'cbjs_action': '''
var last_height = bvr.src_el.getStyle("height");
spt.container.set_value("last_img_height", last_height);
'''
}
tr.add_behavior(unload_height_bvr)
table.add_style("width: 100%")
table.add_style("text-align", "center")
from tactic.ui.widget import EmbedWdg
td = table.add_cell()
td.add_color("background", "background",)
td.add_style("vertical-align: middle")
td.add_style("height: inherit")
td.add_style("overflow-x: auto")
if ext in ['txt','html', 'ini']:
content_div = DivWdg()
f = open(lib_path, 'r')
content = f.read(10000)
f.close()
if not content:
text = "No Content"
else:
size = os.path.getsize(lib_path)
from pyasm.common import FormatValue
value = FormatValue().get_format_value(size, "KB")
content_div.add("Showing first 10K of %s<hr/>" % value)
text = TextAreaWdg()
text.add(content)
text.add_style("width: 100%")
text.add_style("height: 100%")
text.add_style("padding: 10px")
text.add_style("border: none")
text.add_attr("readonly", "true")
content_div.add(text)
td.add(content_div)
content_div.add_style("color", "#000")
content_div.add_style("width", "auto")
content_div.add_style("margin", "20px")
content_div.add_style("height", "100%")
elif ext in File.IMAGE_EXT or ext == "gif":
if lib_path.find("#") != -1:
img = DivWdg()
file_range = snapshot.get_file_range()
file_range_div = DivWdg()
file_range_div.add("File Range: %s" % file_range.get_display())
img.add(file_range_div)
file_range_div.add_style("font-size: 1.4em")
file_range_div.add_style("margin: 15px 0px")
"""
left_chevron = IconWdg("Previous", "BS_CHEVRON_LEFT")
file_range_div.add(left_chevron)
right_chevron = IconWdg("Next", "BS_CHEVRON_RIGHT")
file_range_div.add(right_chevron)
"""
expanded_paths = snapshot.get_expanded_web_paths()
lib_paths = snapshot.get_expanded_lib_paths()
lib_path = lib_paths[0]
items_div = DivWdg()
img.add(items_div)
items_div.add_style("width: auto")
for path in expanded_paths:
item = HtmlElement.img(src=path)
items_div.add(item)
item.add_style("max-height: 300px")
item.add_style("height: auto")
item.add_style("width: 32%")
item.add_style("margin: 2px")
item.add_style("display: inline-block")
#item.add_class("spt_resizable")
img.add_style("margin: 20px")
img.add_style("max-height: 400px")
img.add_style("overflow-y: auto")
img.add_style("overflow-hidden: auto")
img.add_style("text-align: left")
else:
if ext == "gif":
img = HtmlElement.img(src=src)
else:
img = HtmlElement.img(src=web_src)
img.add_style("height: inherit")
img.add_style("width: auto")
td.add(img)
elif ext in File.VIDEO_EXT:
embed_wdg = EmbedWdg(src=src, thumb_path=thumb_path, preload="auto", controls=True)
td.add(embed_wdg)
embed_wdg.add_style("margin: auto auto")
embed_wdg.add_class("spt_resizable")
embed_wdg.add_behavior(load_height_bvr)
embed_wdg.add_behavior(unload_height_bvr)
else:
thumb_table = DivWdg()
td.add(thumb_table)
thumb_table.add_behavior( {
'type': 'click_up',
'src': src,
'cbjs_action': '''
window.open(bvr.src);
'''
} )
thumb_table.add_class("hand")
thumb_table.add_style("width: 200px")
thumb_table.add_style("height: 125px")
thumb_table.add_style("padding: 5px")
thumb_table.add_style("margin-left: 20px")
thumb_table.add_style("display: inline-block")
thumb_table.add_style("vertical-align: top")
thumb_table.add_style("overflow-y: hidden")
from tactic.ui.panel import ThumbWdg2
thumb = ThumbWdg2()
thumb_table.add(thumb)
thumb.set_sobject(snapshot)
table.add_row()
td = table.add_cell()
from tactic.ui.checkin import PathMetadataWdg
from tactic.ui.checkin import SnapshotMetadataWdg
from pyasm.widget import SelectWdg
select = SelectWdg(name="parser")
select.add_style("width: 125px")
select.add_style("margin-top: 0px")
select.add_style("margin-right: 10px")
select.add_empty_option("-- Metadata --")
td.add(select)
select.add_style("float: right")
select.set_option("values", ["IPTC","EXIF","XMP","ImageMagick","PIL"])
select.add_behavior( {
'type': 'change',
'cbjs_action': '''
var parser = bvr.src_el.value;
spt.panel.refresh_element(bvr.src_el, {parser: parser})
'''
} )
if parser:
select.set_value(parser)
title_div = DivWdg()
td.add(title_div)
title_div.add("<div style='font-size: 16px'>File Metadata</div>")
title_div.add("<div>Metadata extracted directly from the file</div>")
title_div.add("<hr/>")
title_div.add_style("text-align: left")
title_div.add_style("margin: 0px 10px")
metadata_div = DivWdg()
td.add(metadata_div)
metadata_div.add_style("max-height: 400px")
metadata_div.add_style("overflow-y: auto")
metadata_div.add_style("overflow-x: hidden")
metadata_div.add_style("margin: 20px 0px 20px 10px")
metadata_div.add_style("text-align: left")
use_tactic_tags = self.kwargs.get("use_tactic_tags")
server_src = lib_path
# get it dynamically by path
metadata_wdg = PathMetadataWdg(path=server_src, parser=parser, use_tactic_tags=use_tactic_tags, search_key=self.search_key)
metadata_div.add(metadata_wdg)
top.add("<br/>")
return top
def get_display(my):
my.search_key = my.kwargs.get("search_key")
my.sobject = Search.get_by_search_key(my.search_key)
snapshot = my.sobject.get_parent()
parent = snapshot.get_parent()
top = my.top
from tactic.ui.container import ResizableTableWdg
table = ResizableTableWdg()
top.add(table)
table.add_row()
table.add_style("width: 100%")
#td = table.add_cell()
#thumb_div = DivWdg()
#td.add(thumb_div)
#thumb = ThumbWdg()
#thumb_div.add(thumb)
#thumb_div.add_class("spt_resizable")
#thumb.set_sobject(parent)
#thumb.set_icon_size(120)
from tactic.ui.widget import EmbedWdg
td = table.add_cell()
td.add_color("background", "background",)
td.add_style("vertical-align: middle")
td.add_style("height: 200px")
td.add_style("overflow-x: auto")
src = my.sobject.get_web_path()
parts = os.path.splitext(src)
ext = parts[1]
ext = ext.lower()
if ext in ['.doc','.xls']:
from pyasm.widget import ThumbWdg
link = ThumbWdg.find_icon_link(src)
img = HtmlElement.img(src=link)
href = DivWdg()
href.add_style("text-align: center")
href.add(img)
td.add(href)
href.add_behavior( {
'type': 'click_up',
'src': src,
'cbjs_action': '''
window.open(bvr.src);
'''
} )
href.add_class("hand")
else:
embed_wdg = EmbedWdg(src=src)
td.add(embed_wdg)
embed_wdg.add_style("margin: auto auto")
embed_wdg.add_class("spt_resizable")
embed_wdg.add_style("width: 100%")
embed_wdg.add_style("height: 240px")
embed_wdg.add_behavior( {
'type': 'load',
'cbjs_action': '''
var last_height = spt.container.get_value("last_img_height");
if (last_height) {
bvr.src_el.setStyle("height", last_height);
}
'''
} )
embed_wdg.add_behavior( {
'type': 'unload',
'cbjs_action': '''
var last_height = bvr.src_el.getStyle("height");
spt.container.set_value("last_img_height", last_height);
'''
} )
table.add_row()
from tactic.ui.checkin import SnapshotMetadataWdg
metadata_wdg = SnapshotMetadataWdg(snapshot=snapshot)
td = table.add_cell()
metadata_div = DivWdg()
td.add(metadata_div)
metadata_div.add_style("max-height: 400px")
metadata_div.add_style("overflow-y: auto")
metadata_div.add_style("overflow-x: hidden")
metadata_div.add(metadata_wdg)
top.add("<br/>")
return top
