root/mapfish-framework/plugins/client/trunk/mapfish.framework.plugins.client/mapfishframeworkpluginsclient/template/+package+/public/mapfish.js_tmpl @ 2322

{{py:
import simplejson

def jsondumps(value): return simplejson.dumps(value)

dict = None
if json is not None:
    dict = simplejson.loads(json)
    if not dict.has_key('data'):
        dict['data'] = {}
    if not dict['data'].has_key('datasources'):
        dict['data']['datasources'] = {}

    if not dict.has_key('header'):
        dict['header'] = {'height':100, 'content':'Dummy content'}

    controller_base_url = ''

def isEnabled(what):
    for datasource in dict['data']['datasources'].keys():
        if dict['data']['datasources'][datasource].has_key(what): return True
    return False
}}
{{if dict is not None}}
/**
 * This is a generated mapfish application from MapFish Studio.
 * Changes made to this file will not be taken into account
 * in your studio project.
 */

app = {};

app.create = function() {
    this.map = app.createMap();
    {{if isEnabled('tooltip')}}
    app.tooltip = this.createTooltip(this.map)
    {{endif}}
    this.toolbar = app.createToolbar(this.map);
    this.createLayout(this.map, this.toolbar);
    this.toolbar.initializeDefaults();
};

app.createMap = function() {
    OpenLayers.DOTS_PER_INCH = {{dict['map']['dpi']}};
    var map = new OpenLayers.Map('map', {
        projection: {{jsondumps(dict['map']['projection'])}},
        scales: {{jsondumps(dict['map']['scales'])}}, 
        units: {{jsondumps(dict['map']['units'])}}, 
        maxExtent: new OpenLayers.Bounds.fromArray({{jsondumps(dict['map']['maxExtent'])}})
    });
    // TODO: IE hack for png layers: OpenLayers.Util.alphaHack()?'image/gif':'image/png'
    {{for layer in dict['layers']}}
    map.addLayer(new OpenLayers.Layer.{{layer['type']}}(
        {{jsondumps(layer['name'])}},
        {{jsondumps(layer['url'])}},
        {{jsondumps(layer['params'])}}, {
            isBaseLayer: {{jsondumps(layer['options']['isBaseLayer'])}},
            singleTile: true,
            ratio: 1.0,
            buffer: 0,
            {{if layer['options']['maxExtent'] is not None}}
            //TODO: must be converted from WGS84 to the actual coordinate system
            //maxExtent: new OpenLayers.Bounds.fromArray({{jsondumps(layer['options']['maxExtent'])}})
            {{endif}}
        }
        //TODO: manage maxExtent options issue (has to be a new OL.Bounds())</%doc>
    ));
    {{endfor}}
    map.zoomToMaxExtent();
    return map;
};

app.createTooltip = function(map) {
    {{for source in dict['data']['datasources']}}
      {{py:sourceDict=dict['data']['datasources'][source]}}
      {{if sourceDict.has_key('tooltip')}}
    app.createTooltip.displayPopup_{{source}} = function(response) {
        var features = response.features;

        if (features && features.length > 0) {
            // build HTML table
            var html = '<table border="1"><tr>';
            {{for col in sourceDict['columns']}}
              {{py:colDict=sourceDict['columns'][col]}}
              {{if colDict.has_key('tooltip')}}
            html += "<th>{{colDict.get('alias', col)}}</th>";
              {{endif}}
            {{endfor}}
            html += "</tr>";
            for (var i = 0; i < features.length; i++) {
                var attributes= features[i].attributes;
                html += "<tr>";
                {{for col in sourceDict['columns']}}
                  {{py:colDict=sourceDict['columns'][col]}}
                  {{if colDict.has_key('tooltip')}}
                html += "<td>" +  attributes[{{jsondumps(col)}}] + "</td>";
                  {{endif}}
                {{endfor}}
                html += "</tr>";
            }
            html += "</table>";

            var popup = this.popup = new OpenLayers.Popup.FramedCloud(
                "mapfish_popup",    // popup id
                tooltip.popupLonLat,   // OpenLayers.LonLat object
                null,               // popup is autosized
                html,               // html string
                null,               // no anchor
                true                // close button
            );
            map.addPopup(popup, true);
        } else {
            if (this.popup) map.removePopup(this.popup);
        }
    };
      {{endif}}
    {{endfor}}

    function createProtocol(controller) {
        return mapfish.Protocol.decorateProtocol({
            protocol: new mapfish.Protocol.MapFish({
                url: '{{controller_base_url}}' + controller,
                params: {
                    maxfeatures: 10,
                    no_geom: true
                }
            }),
            TriggerEventDecorator: {
                eventListeners: {
                    crudfinished: app.createTooltip['displayPopup_'+controller]
                }
            }
        });
    }

    var protocol = createProtocol('dummy');
    var tooltip = new mapfish.Searcher.Map({
        mode: mapfish.Searcher.Map.HOVER,
        protocol: protocol,
        displayDefaultPopup: false
    });
    tooltip.updateUrl = function(controller) {
        if (this.protocol && this.protocol.destroy) this.protocol.destroy();
        this.protocol = createProtocol(controller);
    };
    map.addControl(tooltip);
    return tooltip;
};

app.createToolbar = function(map, buttons) {
    var toolbar = new mapfish.widgets.toolbar.Toolbar({
        map: map,
        configurable: false
    });
    // This is a quick fix for http://trac.mapfish.org/trac/mapfish/ticket/126
    toolbar.autoHeight = false;
    toolbar.height = 25;
    // Spacer append helper
    toolbar.addCuteSeparator = function() {
        toolbar.addSpacer();
        toolbar.addSeparator();
        toolbar.addSpacer();
    };
    toolbar.initializeDefaults = function(map) {
        toolbar.addControl(
            new OpenLayers.Control.ZoomToMaxExtent({
                map: map,
                title: 'Zoom to maximum map extent'
            }), {
                iconCls: 'zoomfull',
                toggleGroup: 'map'
            }
        );
        toolbar.addCuteSeparator();
        toolbar.addControl(
            new OpenLayers.Control.ZoomBox({
                title: 'Zoom in: click in the map or use the left mouse button and drag to create a rectangle'
            }), {
                iconCls: 'zoomin',
                toggleGroup: 'map'
            }
        );
        toolbar.addControl(
            new OpenLayers.Control.ZoomBox({
                out: true,
                title: 'Zoom out: click in the map or use the left mouse button and drag to create a rectangle'
            }), {
                iconCls: 'zoomout',
                toggleGroup: 'map'
            }
        );
        toolbar.addControl(
            new OpenLayers.Control.DragPan({
                isDefault: true,
                title: 'Pan map: keep the left mouse button pressed and drag the map'
            }), {
                iconCls: 'pan',
                toggleGroup: 'map'
            }
        );
    };
    return toolbar;
}

app.createLayout = function(map, toolbar) {
    function createHeaderPanel(dict) {
        return {
            region: 'north',
            height: {{jsondumps(dict['header']['height'])}},
            html: {{jsondumps(dict['header']['content'])}}
        };
    }

    function createLayerTreePanel(map) {
        return {
            title: 'Layer Tree',
            border: false,
            xtype: 'layertree',
            ascending: false,
            map: map
        };
    }

    {{if isEnabled('tooltip')}}
    function createTooltipPanel(map) {
        var store = new Ext.data.SimpleStore({
            fields: ['value', 'text'],
//            data: [{{for source in dict['data']['datasources']}}{{if dict['data']['datasources'][source].has_key('tooltip')}}{{py:isFirst=True}}{{for column in dict['data']['datasources'][source]['columns']}}{{if dict['data']['datasources'][source]['columns'][column].has_key('tooltip')}}{{if not isFirst}},{{endif}}
//                [{{jsondumps(column)}}, {{jsondumps(dict['data']['datasources'][source]['columns'][column].get('alias', column))}}]{{py:isFirst=False}}{{endif}}{{endfor}}{{endif}}{{endfor}}
//            ]
            data: [{{py:isFirst=True}}
                   {{for source in dict['data']['datasources']}}
                     {{py:sourceDict=dict['data']['datasources'][source]}}
                     {{if sourceDict.has_key('tooltip')}}
                       {{if not isFirst}},{{endif}}
                       [{{jsondumps(source)}}, {{jsondumps(sourceDict['name'])}}]
                       {{py:isFirst=False}}
                     {{endif}}
                   {{endfor}}
            ]
        });
        var value = store.getAt(0).data.value;
        app.tooltip.updateUrl(value);
        return {
            title: 'Tooltip',
            layout: 'form',
            border: false,
            items: [{
                xtype: 'combo',
                store: store,
                anchor: '100%',
                hideLabel: true,
                mode: 'local',
                displayField: 'text',
                valueField: 'value',
                name: 'combovalue',
                hiddenName: 'combovalue',
                lazyRender: true,
                lazyInit: true,
                //width: 150,
                //listWidth: 150,
                editable: false,
                listeners: {
                    'select': function(combo) { app.tooltip.updateUrl(combo.value) }
                },
                triggerAction: 'all',
                value: value
            }],
            listeners: {
                expand: function() {
                    app.tooltip.activate();
                },
                collapse: function() {
                    app.tooltip.deactivate();
                }
            }
        };
    }
    {{endif}}

    {{if isEnabled('search')}}
    function createSearchPanel(map) {
        return {
            title: 'Search',
            labelAlign: 'top',
            xtype: 'wsrecenter',
            border: false,
            cls: 'wsrecenter',
            defaultZoom: 4,
            defaults: {anchor: '100%'},
            map: map,
            wsRecenterServices: [
              {{py:isFirst=True}}
              {{for source in dict['data']['datasources']}}
                {{py:sourceDict=dict['data']['datasources'][source]}}
                {{if sourceDict.has_key('search')}}
                  {{for column in sourceDict['columns']}}
                    {{py:columnDict=sourceDict['columns'][column]}}
                    {{if columnDict.has_key('search')}}
                      {{if not isFirst}},{{endif}}
                {
                    id: '{{source}}_{{column}}',
                    label: '{{sourceDict['name']}} / {{columnDict.get('alias', column)}}',
                    url: '{{controller_base_url}}/{{source}}',
                    urlSuffixGeo: '',
                    paramIdGeo: {{jsondumps(column)}},
                    displayField: {{jsondumps(column)}},
                    listFields: [{name: 'id', mapping: 'id'}, {name: '{{column}}', mapping: 'properties.{{column}}'}],
                    tpl: new Ext.XTemplate(
                        '<tpl for=".">',
                        '<div class="x-combo-list-item">',
                            '<h3><span>{{'{'+column+'}'}}</span></h3>',
                        '</div>',
                        '</tpl>'
                    ).compile(),
                    isDefault: {{if isFirst}}true{{else}}false{{endif}}
                }
                      {{py:isFirst=False}}
                    {{endif}}
                  {{endfor}}
                {{endif}}
              {{endfor}}
            ]
        };
    }
    {{endif}}

    var tools = [];
    tools.push(createLayerTreePanel(map));
    {{if isEnabled('tooltip')}}tools.push(createTooltipPanel(map));{{endif}}
    {{if isEnabled('search')}}tools.push(createSearchPanel(map));{{endif}}


    var viewport = new Ext.Viewport({
        layout:'border',
        items:[
            {{if dict.has_key('header') and dict['header']['content']}}
            createHeaderPanel(),
            {{endif}}
            {
                region: 'west',
                id: 'west-panel',
                title: 'Tools',
                split: true,
                width: 300,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins: '0 0 0 5',
                layout: 'accordion',
                layoutConfig:{
                    animate: true
                },
                items: tools
            },{
                region: 'center',
                title: 'Map',
                layout: 'fit',
                xtype: 'mapcomponent',
                map: map,
                tbar: toolbar
            }
          ]
    });
}

Ext.BLANK_IMAGE_URL = "{{mfbase}}/ext/resources/images/default/s.gif";
Ext.onReady(function() { app.create(); });
{{else}}
{{skip_template()}}
{{endif}}