weathermap

Subversion Repositories:
[/] [editor.js] - Rev 6 Go to most recent revision
Compare with Previous - Blame - Download
// global variable for subwindow reference

var newWindow;

var helptexts = new Object;

// seed the help text. Done in a big lump here, so we could make a foreign language version someday.

helptexts.link_target
    = 'Where should Weathermap get data for this link? This can either be an RRD file, or an HTML with special comments in it (normally from MRTG).';
helptexts.link_width = 'How wide the link arrow will be drawn, in pixels.';
helptexts.link_infourl
    = 'If you are using the \'overlib\' HTML style then this is the URL that will be opened when you click on the link';
helptexts.link_hover
    = 'If you are using the \'overlib\' HTML style then this is the URL of the image that will be shown when you hover over the link';

helptexts.tb_newfile = 'Change to a different file, or start creating a new one.';
helptexts.tb_addnode = 'Add a new node to the map';
helptexts.tb_addlink = 'Add a new link to the map, by joining two nodes together.';

helptexts.hover_tb_newfile = 'Select a different map to edit, or start a new one.';

helptexts.link_default = 'This is where help appears for links';
helptexts.map_default = 'This is where help appears for maps';
helptexts.node_default = 'This is where help appears for nodes';
helptexts.tb_defaults = 'or click a Node or Link to edit it\'s properties';

addEvent(window, 'load', initJS);
addEvent(window, 'unload', cleanupJS);

function addEvent(obj, evType, fn)
    {
    if (obj.addEventListener)
        {
        obj.addEventListener(evType, fn, false);
        return true;
        }

    else if (obj.attachEvent)
        {
        var r = obj.attachEvent("on" + evType, fn);
        return r;
        }

    else
        {
        return false;
        }
    }

function initJS()
    {
    // check if DOM is available, if not, we'll stop here, leaving the warning showing
    if (!document.getElementById || !document.createTextNode || !document.getElementsByTagName)
        {
        return;
        }

    // check if there is a "No JavaScript" message
    var nojsmsg = document.getElementById('nojs');

    if (nojsmsg)
        {
        nojsmsg.style.display = 'none';
        }

    // so that's the warning hidden, now let's show the content

    // check if there is a "with JavaScript" div
    var jsmsg = document.getElementById('withjs');

    if (jsmsg)
        {
        jsmsg.style.display = 'block';
        }

    // if the xycapture element is there, then we are in the main edit screen
    if (document.getElementById('xycapture'))
        {
        attach_click_events();
        attach_help_events();
        show_context_help('node_label', 'node_help');

        // set the mapmode, so we know where we stand.
        mapmode('existing');
        }
    }

function cleanupJS()
    {

    // This should be cleaning up all the handlers we added in initJS, to avoid killing
    // IE/Win and Safari (at least) over a period of time with memory leaks.

    }

function attach_help_events()
    {
    var helps;

    // add an onblur/onfocus handler to all the visible <input> items  
    helps = document.getElementsByTagName('input');

    for (i = 0; i < helps.length; ++i)
        {
        if (helps[i].getAttribute('type') != 'hidden')
            {
            addEvent(helps[i], 'focus', help_handler);
            addEvent(helps[i], 'blur', help_handler);
            }
        }

    if (6 == 8)
        {
        // add an onmousein/onmouseout handler to the toolbar buttons
        helps = document.getElementsByTagName('li');

        for (i = 0; i < helps.length; ++i)
            {
            // alert(helps[i].id.slice(0,3));
            //alert(helps[i].className);
            if (helps[i].className == 'tb_active')
                { // alert(helps[i].id);
                addEvent(helps[i], 'mouseover', mouse_help_handler);
                addEvent(helps[i], 'mouseout', mouse_help_handler);
                //   alert('Attaching to ' + helps[i].className);
                }
            }
        }
    }

function attach_click_events()
    {
    var alt, i;
    var areas, type;

    areas = document.getElementsByTagName('area');

    for (i = 0; i < areas.length; ++i)
        {
        alt = areas[i].getAttribute('alt');
        type = alt.slice(0, 5);

        if (type == 'LINK:' || type == 'NODE:')
            {
            // we add the href so that the browser adds a 'hand' cursor
            areas[i].setAttribute('href', '#');
            // and the click_handler does the actual work
            addEvent(areas[i], 'click', click_handler);
            }

        if (type == 'TIMES')
            {
            areas[i].setAttribute('href', '#');
            addEvent(areas[i], 'click', position_timestamp);
            }

        if (type == 'LEGEN')
            {
            areas[i].setAttribute('href', '#');
            addEvent(areas[i], 'click', position_legend);
            }
        }

    addEvent(document.getElementById('tb_newfile'), 'click', new_file);
    addEvent(document.getElementById('tb_addnode'), 'click', add_node);
    addEvent(document.getElementById('tb_mapprops'), 'click', map_properties);
    addEvent(document.getElementById('tb_mapstyle'), 'click', map_style);

    addEvent(document.getElementById('tb_addlink'), 'click', add_link);
    addEvent(document.getElementById('tb_poslegend'), 'click', position_first_legend);
    addEvent(document.getElementById('tb_postime'), 'click', position_timestamp);
    addEvent(document.getElementById('tb_colours'), 'click', manage_colours);
    addEvent(document.getElementById('tb_manageimages'), 'click', manage_images);
    addEvent(document.getElementById('tb_prefs'), 'click', prefs);

    addEvent(document.getElementById('tb_node_cancel'), 'click', cancel_op);
    addEvent(document.getElementById('tb_node_submit'), 'click', do_submit);
    addEvent(document.getElementById('node_move'), 'click', move_node);
    addEvent(document.getElementById('node_delete'), 'click', delete_node);

    addEvent(document.getElementById('tb_link_cancel'), 'click', cancel_op);
    addEvent(document.getElementById('tb_link_submit'), 'click', do_submit);
    addEvent(document.getElementById('link_delete'), 'click', delete_link);

    addEvent(document.getElementById('tb_map_cancel'), 'click', cancel_op);
    addEvent(document.getElementById('tb_map_submit'), 'click', do_submit);

    addEvent(document.getElementById('tb_mapstyle_cancel'), 'click', cancel_op);
    addEvent(document.getElementById('tb_mapstyle_submit'), 'click', do_submit);

    addEvent(document.getElementById('tb_colours_cancel'), 'click', cancel_op);
    addEvent(document.getElementById('tb_colours_submit'), 'click', do_submit);

    addEvent(document.getElementById('tb_images_cancel'), 'click', cancel_op);
    addEvent(document.getElementById('tb_images_submit'), 'click', do_submit);

    var cp = document.getElementById('link_cactipick');
    addEvent(cp, 'click', cactipicker);
    cp.setAttribute('href', '#');
    }

// used by the cancel button on each of the properties dialogs
function cancel_op()
    {
    hide_all_dialogs();
    document.frmMain.action.value = '';
    }

function help_handler(e)
    {
    var el;

    if (window.event && window.event.srcElement)
        {
        el = window.event.srcElement;
        }

    if (e && e.target)
        {
        el = e.target;
        }

    if (!el)
        {
        return;
        }

    var objectid = el.id;

    if ((e.type == 'focus') || (e.type == 'mouseover'))
        {
        if (helptexts[objectid])
            {
            var help = helptexts[objectid];
            var target = objectid.slice(0, objectid.indexOf('_')) + '_help';

            document.getElementById(target).firstChild.nodeValue = help;

            // alert(target);
            }
        }

    if ((e.type == 'blur') || (e.type == 'mouseout'))
        {
        // alert('blurred - figure out default, and apply it.');

        var section = objectid.slice(0, objectid.indexOf('_'));
        var target = section + '_help';
        var help = helptexts[section + '_default'];

        if (help == 'undefined')
            {
            alert('OID is: ' + objectid + ' and target is:' + target + ' and section is: ' + section);
            }

        document.getElementById(target).firstChild.nodeValue = help;
        }
    }

function mouse_help_handler(e)
    {
    var el;

    //  alert('ddd');

    if (window.event && window.event.srcElement)
        {
        el = window.event.srcElement;
        }

    if (e && e.target)
        {
        el = e.target;
        }

    if (!el)
        {
        return;
        }

    var objectid = el.firstChild.id;

    if ((e.type == 'focus') || (e.type == 'mouseover'))
        {
        if (helptexts[objectid])
            {
            var help = helptexts[objectid];
            var target = objectid.slice(0, objectid.indexOf('_')) + '_help';

            document.getElementById(target).firstChild.nodeValue = help;

            // alert(target);
            }
        }

    if ((e.type == 'blur') || (e.type == 'mouseout'))
        {
        // alert('blurred - figure out default, and apply it.');

        var section = objectid.slice(0, objectid.indexOf('_'));
        var target = section + '_help';
        var help = helptexts[section + '_default'];

        if (help == 'undefined')
            {
            alert('OID is: ' + objectid + ' and target is:' + target + ' and section is: ' + section);
            }

        document.getElementById(target).firstChild.nodeValue = help;
        }
    }

// Any clicks in the imagemap end up here.
function click_handler(e)
    {
    var el;
    var alt, objectname, objecttype;

    if (window.event && window.event.srcElement)
        {
        el = window.event.srcElement;
        }

    if (e && e.target)
        {
        el = e.target;
        }

    if (!el)
        {
        return;
        }

    alt = el.getAttribute('alt');

    objecttype = alt.slice(0, 4);
    objectname = alt.slice(5, alt.length);

    // if we're not in a mode yet...
    if (document.frmMain.action.value === '')
        {

        // if we're waiting for a node specifically (e.g. "make link") then ignore links here
        if (objecttype == 'NODE')
            {
            show_node(objectname);
            }

        if (objecttype == 'LINK')
            {
            show_link(objectname);
            }
        }

    // we've got a command queued, so do the appropriate thing
    else
        {
        if (objecttype == 'NODE' && document.getElementById('action').value == 'add_link')
            {
            document.getElementById('param').value = objectname;
            document.frmMain.submit();
            }

        else if (objecttype == 'NODE' && document.getElementById('action').value == 'add_link2')
            {
            document.getElementById('param').value = objectname;
            document.frmMain.submit();
            }

        else
            {
            // Halfway through one operation, the user has done something unexpected.
            // reset back to standard state, and see if we can oblige them
            //          alert('A bit confused');
            document.frmMain.action.value = '';
            hide_all_dialogs()
            click_handler(e);
            }
        }
    }

// used by the Submit button on each of the properties dialogs
function do_submit()
    {
    document.frmMain.submit();
    }

function cactipicker()
    {
    // make sure it isn't already opened
    if (!newWindow || newWindow.closed)
        {
        newWindow = window.open("", "cactipicker", "status,scrollbars=yes,height=400,width=400");
        }

    else if (newWindow.focus)
        {
        // window is already open and focusable, so bring it to the front
        newWindow.focus();
        }

    newWindow.location = "cacti-pick.php";
    }

function show_context_help(itemid, targetid)
    {
    //    var itemid = item.id;
    var helpbox, helpboxtext, message;
    //    var ct = document.getElementById(targetid);
    //    if(ct)
    //  {
    message = "We'd show helptext for " + itemid + " in the'" + targetid + "' div";
    // }
    helpbox = document.getElementById(targetid);
    helpboxtext = helpbox.firstChild;
    helpboxtext.nodeValue = message;
    }

function manage_colours()
    {
    mapmode('existing');

    hide_all_dialogs();
    document.getElementById('action').value = "set_map_colours";
    show_dialog('dlgColours');
    }

function manage_images()
    {
    mapmode('existing');

    hide_all_dialogs();
    document.getElementById('action').value = "set_image";
    show_dialog('dlgImages');
    }

function prefs()
    {
    alert("Not Yet");
    }

function default_toolbar()
    {
    }

function working_toolbar()
    {
    }

function new_file()
    {
    self.location = "?action=newfile";
    }

function mapmode(m)
    {
    if (m == 'xy')
        {
        document.getElementById('debug').value = "xy";
        document.getElementById('xycapture').style.display = 'inline';
        document.getElementById('existingdata').style.display = 'none';
        }

    else if (m == 'existing')
        {
        document.getElementById('debug').value = "existing";
        document.getElementById('xycapture').style.display = 'none';
        document.getElementById('existingdata').style.display = 'inline';
        }

    else
        {
        alert('invalid mode');
        }
    }

function add_node()
    {
    document.getElementById('tb_help').innerText = 'Click on the map where you would like to add a new node.';
    document.getElementById('action').value = "add_node";
    mapmode('xy');
    }

function delete_node()
    {
    if (confirm("This node (and any links it is part of) will be deleted permanently."))
        {
        document.getElementById('action').value = "delete_node";
        document.frmMain.submit();
        }
    }

function move_node()
    {
    hide_dialog('dlgNodeProperties');
    document.getElementById('tb_help').innerText = 'Click on the map where you would like to move the node to.';
    document.getElementById('action').value = "move_node";
    mapmode('xy');
    }

function add_link()
    {
    document.getElementById('tb_help').innerText = 'Click on the first node for one end of the link.';
    document.getElementById('action').value = "add_link";
    mapmode('existing');
    }

function delete_link()
    {
    if (confirm("This link will be deleted permanently."))
        {
        document.getElementById('action').value = "delete_link";
        document.frmMain.submit();
        }
    }

function map_properties()
    {
    mapmode('existing');

    hide_all_dialogs();
    document.getElementById('action').value = "set_map_properties";
    show_dialog('dlgMapProperties');
    }

function map_style()
    {
    mapmode('existing');

    hide_all_dialogs();
    document.getElementById('action').value = "set_map_style";
    show_dialog('dlgMapStyle');
    }

function position_timestamp()
    {
    document.getElementById('tb_help').innerText = 'Click on the map where you would like to put the timestamp.';
    document.getElementById('action').value = "place_stamp";
    mapmode('xy');
    }

// called from clicking the toolbar
function position_first_legend()
{
    real_position_legend('DEFAULT');
}

// called from clicking on the existing legends
function position_legend(e)
    {
        var el;
        var alt, objectname, objecttype;
    
        if (window.event && window.event.srcElement)
            {
            el = window.event.srcElement;
            }
    
        if (e && e.target)
            {
            el = e.target;
            }
    
        if (!el)
            {
            return;
            }
        
        // we need to figure out WHICH legend, nowadays
        alt = el.getAttribute('alt');

    // objecttype = alt.slice(0, 5);
    objectname = alt.slice(7, alt.length);
      
    real_position_legend(objectname);
            
    //document.getElementById('tb_help').innerText = 'Click on the map where you would like to put the legend.';
    //document.getElementById('action').value = "place_legend";
    //document.getElementById('param').value = objectname;
    //mapmode('xy');
    }
    
function real_position_legend(scalename)
{
    document.getElementById('tb_help').innerText = 'Click on the map where you would like to put the legend.';
    document.getElementById('action').value = "place_legend";
    document.getElementById('param').value = scalename;
    mapmode('xy');
}

function show_node(name)
    {
    var found = -1;
    mapmode('existing');

    hide_all_dialogs();

    var mynode = Nodes[name];

    if (mynode)
        {
        document.frmMain.action.value = "set_node_properties";
        document.frmMain.node_name.value = name;
        document.frmMain.node_new_name.value = name;

        document.frmMain.node_name.value = mynode.name;
        document.frmMain.node_new_name.value = mynode.name;
        document.frmMain.node_label.value = mynode.label;
        document.frmMain.node_infourl.value = mynode.infourl;
        document.frmMain.node_hover.value = mynode.overliburl;
        
        if(mynode.iconfile != '')
        {
            document.frmMain.node_iconfilename.value = mynode.iconfile;
        }
        else
        {
            document.frmMain.node_iconfilename.value = '--NONE--';
        }
        

        // save this here, just in case they choose delete_node or move_node
        document.getElementById('param').value = mynode.name;

        show_dialog('dlgNodeProperties');
        }
    }

function show_link(name)
    {
    var found = -1;
    mapmode('existing');

    hide_all_dialogs();

    var mylink = Links[name];

    if (mylink)
        {
        document.frmMain.link_name.value = mylink.name;
        document.frmMain.link_target.value = mylink.target;
        document.frmMain.link_width.value = mylink.width;

        document.frmMain.link_bandwidth_in.value = mylink.bw_in;

        if (mylink.bw_in == mylink.bw_out)
            {
            document.frmMain.link_bandwidth_out.value = '';
            document.frmMain.link_bandwidth_out_cb.checked = 1;
            }

        else
            {
            document.frmMain.link_bandwidth_out_cb.checked = 0;
            document.frmMain.link_bandwidth_out.value = mylink.bw_out;
            }

        document.frmMain.link_infourl.value = mylink.infourl;
        document.frmMain.link_hover.value = mylink.overliburl;

        document.getElementById('link_nodename1').firstChild.nodeValue = mylink.a;
        document.getElementById('link_nodename1a').firstChild.nodeValue = mylink.a;
        document.getElementById('link_nodename1b').firstChild.nodeValue = mylink.a;

        document.getElementById('link_nodename2').firstChild.nodeValue = mylink.b;

        document.getElementById('param').value = mylink.name;

        document.frmMain.action.value = "set_link_properties";

        show_dialog('dlgLinkProperties');
        }
    }

function show_dialog(dlg)
    {
    document.getElementById(dlg).style.display = 'block';
    }

function hide_dialog(dlg)
    {
    document.getElementById(dlg).style.display = 'none';
    // reset the action. The use pressed Cancel, if this function was called
    // (that, or they're about to open a new Properties dialog, so the value is irrelevant)
    document.frmMain.action.value = '';
    //  alert('ACTION=' + document.frmMain.action.value);
    }

function hide_all_dialogs()
    {
    hide_dialog('dlgMapProperties');
    hide_dialog('dlgMapStyle');
    hide_dialog('dlgLinkProperties');
    hide_dialog('dlgNodeProperties');
    hide_dialog('dlgColours');
    hide_dialog('dlgImages');
    }