var MultimediaViewer = Class.create(JSControl, {
elementHTML: {},
getMediaType: function(format){
format = String(format).toLowerCase();
switch (format){
case "video":
case "sound": return format;
default: return "image";
}
},
getParams: function(mediaType){
switch (mediaType){
case "video": return {
"class": "VideoPlayer",
"subclass": "video",
"type": "VIDEO"
};
case "sound": return {
"class": "Player",
"subclass": "audio",
"type": "SOUND"
};
case "image": return {
"class": "ImageViewer",
"type": "IMAGE"
};
default: return {};
}
},
mediaType: "",
style: {},
innerJSControl: null,
value: {},
SetValue: function(struct){
this.value = struct;
var format = struct["Format"] || "image";
var mediaType = this.getMediaType(format);
if (this.mediaType == mediaType){
this.innerJSControl.SetValue(struct["URL"]);
return;
}
this.mediaType = mediaType;
var innerID = this.ID() + format;
var attrs = Object.extend(this.getParams(this.mediaType), {"id" : innerID});
if (Object.isUndefined(this.elementHTML[format]))
this.elementHTML[format] = JSControl.TransformElement(attrs);
Element.update(this.element, this.elementHTML[format]);
Element.setStyle(this.element, {"visibility": ""});
var deferred = function(){
var innerElement = Element.descendants(this.element).find(function(element){ return element.JSControl; });
if (!innerElement) return alert("MultimediaViewer: inner element not found");
this.innerJSControl = innerElement.JSControl;
this.innerJSControl.SetValue(struct["URL"]);
if (!Object.isUndefined(this.style[this.mediaType]))
this.innerJSControl.SetAttribute("style", this.style[this.mediaType]);
}.bind(this);
deferred.defer();
},
Value: function(){ return this.value; },
SetAttribute: function($super, attrName, attrValue){
switch (attrName){
case "image-style":
var mediaType = "image";
this.style[mediaType] = attrValue;
if (mediaType == this.mediaType && this.innerJSControl)
this.innerJSControl.SetAttribute("style", attrValue);
break;
default:
$super(attrName, attrValue);
}
}
});
var TextViewer = Class.create(JSControl, {
Clear: function(){
while (this.element.firstChild) this.element.removeChild(this.element.firstChild);
},
str: "",
SetValue: function(str){
this.str = String(str);
Element.update(this.element, this.str);
Element.setStyle(this.element, {"visibility": this.str ? "" : "hidden"});
},
Value: function(){ return this.str; },
Show: function(){ Element.setStyle(this.element, {"visibility": ""}); },
Hide: function(){ Element.setStyle(this.element, {"visibility": "hidden"}); }
});
var MultimediaBrowser = Class.create(JSControl, {
initialize: function($super, element, types){
$super(element);
this.types_ = types;
this.list = Element.down(this.element, "ul.ImageList");
this.selectableIL = new SelectableItemsList(this.list, {"scroller": this.list.parentNode});
Event.observe(this.list, SelectableItemsList.events["choice"], this.onChoice.bindAsEventListener(this));
Event.observe(this.list, SelectableItemsList.events["null-choice"], this.onNullChoice.bindAsEventListener(this));
this.multimediaViewer = new MultimediaViewer(Element.down(this.element, "span.MultimediaViewer"));
this.textViewer = new TextViewer(Element.down(this.element, "div.TextViewer"));
this.selected_id_ = this.element.getAttribute("default-selected-id") || this.element.getAttribute("selected-id") || "";
this.awindow = AControl.GetParentWindow(this.ID());
if (this.awindow){
this.awindow.RegisterResizeableChild(this.ID());
this.awindow.OnResize();
this.awindow.Subscribe("WM_REFRESH", this.refresh, this);
}
},
onChoice: function(event){
var li = Event.element(event);
var params = URLRestore(li.getAttribute("params"));
var descr = li.getAttribute("description") || "";
var imgtitle = li.getAttribute("image-title") || ""
if (imgtitle) descr = "
" + imgtitle + "
" + descr;
this.textViewer.SetValue(descr);
this.multimediaViewer.SetValue({
"Format": params["Format"],
"URL": li.getAttribute("graphics-url") || ""
});
this.textViewer.Show();
this.saveSelectedID(params["ID"]);
new AEvent("CHOICE", {"args": params}, this);
},
onNullChoice: function(event){
this.multimediaViewer.SetValue({});
this.textViewer.SetValue("");
this.textViewer.Hide();
this.saveSelectedID();
new AEvent("NULLCHOICE", {}, this);
},
OnResize: function(event){
var gridframe = Element.up(this.element, "div[type='gridFrame']"); if (!gridframe) return;
var blocks = Element.select(this.element, "span.Block");
blocks.each(function(elem){ Element.setStyle(elem, {"minHeight": "40px"}); });
if (blocks.length == 2){
var minwidth = 200;
Element.setStyle(blocks[1], {"width": minwidth + "px"});
var width = Element.innerWidth(this.element);
blocks.each(function(block){
width -= ["marginLeft", "marginRight", "borderLeftWidth", "borderRightWidth"].inject(0, //
function(acc, prop){ return acc + parseInt(Element.getStyle(block, prop), 10); });
});
Element.setStyle(blocks[1], //
{"width": Math.max(minwidth, width - blocks[0].offsetWidth) + "px"});
}
},
refresh: function(aevent){
if (aevent && typeof aevent.Data == "function" && aevent.Data()["args"]["ID"])
this.selected_id_ = URLSerialize(aevent.Data()["args"]["ID"] || "");
new ServerCall(this.url, null, {"onSuccess": this.refresh_list, "thisObject": this});
},
clear: function(elem){
if (!elem) return null;
while (elem.firstChild) elem.removeChild(elem.firstChild);
return elem;
},
string_value: function(object){
if (!object) return "";
if (typeof object.Value == "function") {
var val=object.Value();
if(val) return String(val);
return "";
}
else return String(object);
},
refresh_list: function(apacket){
this.clear(this.list);
var data = apacket.Data(); if (data.length == 0) return;
var desc = {"class": "ImageListAux", "htmlid": this.ID(), "id": this.element.getAttribute("localid")};
if (Object.isArray(data[0])){
var id = this.element.getAttribute("key-column") || "";
var attrs = {
"caption": (this.element.getAttribute("caption-column") || "").split(" "),
"description": (this.element.getAttribute("description-column") || "").split(" "),
"image-title": (this.element.getAttribute("title-column") || "").split(" ")
};
var attrs_img = {};
["graphics-column", "graphics-src", "graphics-args", //
"thumbnail-column", "thumbnail-src", "thumbnail-args"].each(function(nam){
attrs_img[nam] = this.element.getAttribute(nam); }, this);
var joiners = {
"caption": this.element.getAttribute("caption-joiner") || " ",
"description": this.element.getAttribute("description-joiner") || "\n"
};
var colnums = {};
$A(data.shift()).each(function(colname, iii){ colnums[colname] = iii; });
desc["childNodes"] = $A(data).collect(function(row){
var params = {};
for (var key in colnums) params[key] = row[colnums[key]];
var result = {"nodeName": "st:item", "params": URLSerialize(params)};
if (typeof colnums[id] != "undefined") result["image-id"] = URLSerialize(row[colnums[id]]);
for (var key in attrs)
result[key] = attrs[key].collect(function(colname){
return (typeof colnums[colname] == "undefined" ? "" : this.string_value(row[colnums[colname]]));
}, this).join(joiners[key] || "");
["graphics", "thumbnail"].each(function(suffix){
var colname = attrs_img[suffix + "-column"];
if (colname) result[suffix + "-url"] = this.string_value(row[colnums[colname]]);
else{
var src = attrs_img[suffix + "-src"]; if (!src) return;
var args = {};
String(attrs_img[suffix + "-args"] || id).split(" ").each(function(arg){
if (!arg) return;
var eqind = arg.indexOf("=");
if (eqind == -1) args[arg] = row[colnums[arg]];
else args[arg.substr(0, eqind)] = row[colnums[arg.substr(eqind + 1)]];
});
var qpos = src.indexOf("?");
result[suffix + "-url"] = (-1 == qpos) ? //
src + "?" + URLSerializeVS(args) : //
src.substr(0, qpos + 1) + URLSerializeVS(args) + src.substr(qpos + 1);
}
}, this);
return result;
}, this);
}else{
var attrs = {"image-title": "Title", "description": "Description",//
"filename": "Filename", "graphics-url": "GraphicsURL", "thumbnail-url": "ThumbnailURL"};
desc["childNodes"] = $A(data).collect(function(struct){
var result = {"nodeName": "st:item", "params": URLSerialize(struct), "image-id": URLSerialize(struct["ID"])};
for (var key in attrs) result[key] = this.string_value(struct[attrs[key]]);
return result;
}, this);
}
this.list.innerHTML = JSControl.TransformElementAndUnwrap(desc, this.types_);
var selected_item = null;
if (this.selected_id_)
selected_item = $A(this.list.childNodes).find(function(item){
return item.nodeType == Node.ELEMENT_NODE && item.getAttribute("image-id") == this.selected_id_;
}, this);
this.selectableIL.SelectItem(selected_item || this.list.firstChild || null);
},
url: "",
SetValue: function(url){
if (this.url == url) return;
this.url = url;
this.refresh();
},
Value: function(){
return String(this.url);
},
saveSelectedID: function(id){
new ServerCall("/srv/WWW/WWWWorker/AddCustomization", URLSerializeVS({
"window": this.awindow.XMLSource(),
"xml": "" +
"" +
""
}), {});
},
SetAttribute: function($super, attrName, attrValue){
switch(attrName){
case "image-style":
this.multimediaViewer.SetAttribute(attrName, attrValue);
break;
case "src": this.SetValue(attrValue); break;
default:
$super(attrName, attrValue);
break;
}
},
SetTabOrder: function(tabbase){
this.list.tabIndex = tabbase++;
return tabbase;
},
Focus: function(){ this.list.focus(); }
});
var ImagesBrowser = MultimediaBrowser;