Adding custom and URL options to "goto" KWeb

[RR]

Hi,

I've modified cgoto so now I can specifiy custom image lying on server ('custom') or specify full URL for image from internet ('URL' option that let's you to use some scripts for automatic creation of goto buttons - that's my case)....

I've created script based on this nice article :
http://www.ipbwiki.com/Practical_PHP_Programming:Working_with_existing_images

so now I have nice goto buttons on my KnxWeb visualization...

I'm attaching code below (please be gentle, I'm total novice to Javascript),

hope someone will find it useful...

regards,

Bulek.

******** cgoto.js
function CGoto(conf) {
    this.img = $("<img/>").get(0);
    this.loadConfig(conf);

    var widget = this.init(conf);
    widget.append($("<tr/>").append($("<td/>").append(this.img)));

    this.img.owner=this;
    this.img.onclick=function() {
        gotoZone(this.owner.zone_id);
    };
}

CGoto.img = {
'left': 'images/gotoLeft.png',
'right': 'images/gotoRight.png',
'upper': 'images/gotoUpper.png',
'lower': 'images/gotoLower.png',
'custom': 'Enter design relative image path',
'URL': 'Enter full URL address'
}

CGoto.type='goto';
UIController.registerWidget(CGoto);
CGoto.prototype = new CWidget();
CGoto.prototype.loadConfig = function(conf) {
    this.zone_id=conf.getAttribute("target");

    var imgType=conf.getAttribute("img");
    if (!imgType)
        imgType='right';
    if (imgType.indexOf("images/") != -1) {
        // Backward compatibility
        imgType = imgType.slice(11, -4).toLowerCase();
        conf.setAttribute("img", imgType);
    }

    if (imgType == 'custom') {
        var dpath = "design/"+UIController.getDesignName()+"/";
        this.imgFile = dpath+conf.getAttribute("imgfile");
    } else if (imgType == 'URL') {
        this.imgFile = conf.getAttribute("imgfile");
    } else {
        this.imgFile = CGoto.img[imgType];
    }
    this.img.src=this.imgFile;
};

***************editcgoto.js
CGoto.prototype.addObjectFields = function(target, obj) {
    var label = $("<input type='text'>");
    var jump_to = $("<select name=dummy value=''/>");
    var imgType = $("<select name=dummy value=''/>");
    var imgFile = $("<input type='text' class='textValue'>");
    UIController.addZoneListListener(function (config) {
        jump_to.empty();
        $('zone', config)
            .each(function() {
                jump_to.append("<option value='"+this.getAttribute('id')+"'>"+this.getAttribute('name')+"</option>");
            });
        });
    jump_to.val(this.zone_id);

    for(key in CGoto.img) {
        imgType.append("<option value='"+key+"'>"+tr(key)+"</option>");
    }
    var button;
    if (obj) {
        label.val(obj.conf.getAttribute("label"));
        jump_to.val(obj.conf.getAttribute("target"));
        var img = obj.conf.getAttribute("img");
        imgType.val(img);
        if ((img == 'custom') || (img == 'URL')) {
            imgFile.val(obj.conf.getAttribute("imgfile"));
        }
        button = $("<input type='button' value='"+tr('Ok')+"'/>");
        button.click(function() {
            obj.conf.setAttribute("label", label.val());
            obj.conf.setAttribute("target", jump_to.val());
            var img = imgType.val();
            obj.conf.setAttribute("img", img);
            if ((img == 'custom') || (img == 'URL')) {
                obj.conf.setAttribute("imgfile", imgFile.val());
            }
            else {
                obj.conf.removeAttribute("imgFile");
            }
            obj.loadConfig(obj.conf);
            target.remove();
        });
    }
    else {
        button = $("<input type='button' value='"+tr('Add')+"'/>");
        button.click(function() {
                var conf = UIController.createControl('goto');
                var img = imgType.val();
                conf.setAttribute('label', label.val());
                conf.setAttribute('target', jump_to.val());
                conf.setAttribute('img', img);
                if ((img == 'custom') || (img == 'URL')) {
                    conf.setAttribute('imgfile', imgFile.val());
                }
                UIController.add(conf);
            });
    }
    target.append(tr("Name:")+"<br />").append(label).append("<br />"+tr("Go to:")+"<br />").append(jump_to).append("<br />"+tr("Image:")+"<br />").append(imgType).append("<br />");
    var customdiv = $("<div class='textValue'/>").append(tr("Image file:")+"<br />").append(imgFile)
    var customdivURL = $("<div class='textValue'/>").append(tr("Image URL:")+"<br />").append(imgFile)
        .append("<br />");
    target.append(customdiv)
    target.append(customdivURL)
        .append(button);
    imgType.change(function() {
        if ($(this).val() == 'custom') customdiv.show(); else customdiv.hide();
        if ($(this).val() == 'URL') customdivURL.show(); else customdivURL.hide();
    }).change();
};

CGoto.menuText='New goto';