aboutsummaryrefslogtreecommitdiffstats
path: root/web/js/front.js
blob: 67486888b85235a9e1ecb26ad2c567d4a6364b5f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
document.getElementById('pc').focus();

(function(){
    var around_forms = document.querySelectorAll('form[action*="around"]');
    for (var i=0; i<around_forms.length; i++) {
        var form = around_forms[i];
        var el = document.createElement('input');
        el.type = 'hidden';
        el.name = 'js';
        el.value = 1;
        form.insertBefore(el, form.firstChild);
    }
    var around_links = document.querySelectorAll('a[href*="around"]');
    for (i=0; i<around_links.length; i++) {
        var link = around_links[i];
        link.href = link.href + (link.href.indexOf('?') > -1 ? '&js=1' : '?js=1');
    }

    var lk = document.querySelector('span.report-a-problem-btn');
    if (lk.addEventListener) {
        lk.addEventListener('click', function(){
            scrollTo(0,0);
        });
    }
})();
* Keyword.Namespace */ .highlight .kp { color: #008800 } /* Keyword.Pseudo */ .highlight .kr { color: #008800; font-weight: bold } /* Keyword.Reserved */ .highlight .kt { color: #888888; font-weight: bold } /* Keyword.Type */ .highlight .m { color: #0000DD; font-weight: bold } /* Literal.Number */ .highlight .s { color: #dd2200; background-color: #fff0f0 } /* Literal.String */ .highlight .na { color: #336699 } /* Name.Attribute */ .highlight .nb { color: #003388 } /* Name.Builtin */ .highlight .nc { color: #bb0066; font-weight: bold } /* Name.Class */ .highlight .no { color: #003366; font-weight: bold } /* Name.Constant */ .highlight .nd { color: #555555 } /* Name.Decorator */ .highlight .ne { color: #bb0066; font-weight: bold } /* Name.Exception */ .highlight .nf { color: #0066bb; font-weight: bold } /* Name.Function */ .highlight .nl { color: #336699; font-style: italic } /* Name.Label */ .highlight .nn { color: #bb0066; font-weight: bold } /* Name.Namespace */ .highlight .py { color: #336699; font-weight: bold } /* Name.Property */ .highlight .nt { color: #bb0066; font-weight: bold } /* Name.Tag */ .highlight .nv { color: #336699 } /* Name.Variable */ .highlight .ow { color: #008800 } /* Operator.Word */ .highlight .w { color: #bbbbbb } /* Text.Whitespace */ .highlight .mb { color: #0000DD; font-weight: bold } /* Literal.Number.Bin */ .highlight .mf { color: #0000DD; font-weight: bold } /* Literal.Number.Float */ .highlight .mh { color: #0000DD; font-weight: bold } /* Literal.Number.Hex */ .highlight .mi { color: #0000DD; font-weight: bold } /* Literal.Number.Integer */ .highlight .mo { color: #0000DD; font-weight: bold } /* Literal.Number.Oct */ .highlight .sa { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Affix */ .highlight .sb { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Backtick */ .highlight .sc { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Char */ .highlight .dl { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Delimiter */ .highlight .sd { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Doc */ .highlight .s2 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Double */ .highlight .se { color: #0044dd; background-color: #fff0f0 } /* Literal.String.Escape */ .highlight .sh { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Heredoc */ .highlight .si { color: #3333bb; background-color: #fff0f0 } /* Literal.String.Interpol */ .highlight .sx { color: #22bb22; background-color: #f0fff0 } /* Literal.String.Other */ .highlight .sr { color: #008800; background-color: #fff0ff } /* Literal.String.Regex */ .highlight .s1 { color: #dd2200; background-color: #fff0f0 } /* Literal.String.Single */ .highlight .ss { color: #aa6600; background-color: #fff0f0 } /* Literal.String.Symbol */ .highlight .bp { color: #003388 } /* Name.Builtin.Pseudo */ .highlight .fm { color: #0066bb; font-weight: bold } /* Name.Function.Magic */ .highlight .vc { color: #336699 } /* Name.Variable.Class */ .highlight .vg { color: #dd7700 } /* Name.Variable.Global */ .highlight .vi { color: #3333bb } /* Name.Variable.Instance */ .highlight .vm { color: #336699 } /* Name.Variable.Magic */ .highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
/*
    XXX Lots overlap with map-OpenLayers.js - refactor!
    XXX Things still need to be changed for mobile use, probably won't work
        there.
    TODO Pin size on report page
*/

function PaddingControl(div) {
    div.style.padding = '40px';
}

function fixmystreet_update_pin(lonlat) {
    document.getElementById('fixmystreet.latitude').value = lonlat.lat();
    document.getElementById('fixmystreet.longitude').value = lonlat.lng();

    $.getJSON('/report/new/ajax', {
        latitude: $('#fixmystreet\\.latitude').val(),
        longitude: $('#fixmystreet\\.longitude').val()
    }, function(data) {
        if (data.error) {
            if (!$('#side-form-error').length) {
                $('<div id="side-form-error"/>').insertAfter($('#side-form'));
            }
            $('#side-form-error').html('<h1>' + translation_strings.reporting_a_problem + '</h1><p>' + data.error + '</p>').show();
            $('#side-form').hide();
            return;
        }
        $('#side-form, #site-logo').show();
        $('#councils_text').html(data.councils_text);
        $('#form_category_row').html(data.category);
        if ( data.extra_name_info && !$('#form_fms_extra_title').length ) {
            // there might be a first name field on some cobrands
            var lb = $('#form_first_name').prev();
            if ( lb.length === 0 ) { lb = $('#form_name').prev(); }
            lb.before(data.extra_name_info);
        }
    });

    if (!$('#side-form-error').is(':visible')) {
        $('#side-form, #site-logo').show();
    }
}

var infowindow = new google.maps.InfoWindow();
function make_infowindow(marker) {
    return function() {
        infowindow.setContent(marker.title + "<br><a href=/report/" + marker.id + ">" + translation_strings.more_details + "</a>");
        infowindow.open(fixmystreet.map, marker);
    };
}

function fms_markers_list(pins, transform) {
    var markers = [];
    if (fixmystreet.markers) {
        for (var m=0; m<fixmystreet.markers.length; m++) {
            fixmystreet.markers[m].setMap(null);
        }
    }
    for (var i=0; i<pins.length; i++) {
        var pin = pins[i];
        var pin_args = {
            position: new google.maps.LatLng( pin[0], pin[1] ),
            //size: pin[5] || 'normal',
            id: pin[3],
            title: pin[4] || '',
            map: fixmystreet.map
        };
        if (pin[2] == 'green') {
            pin_args.icon = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|87dd00";
        }
        if (pin[2] == 'yellow') {
            pin_args.icon = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ffd600";
        }
        var marker = new google.maps.Marker(pin_args);
        if (fixmystreet.page == 'around' || fixmystreet.page == 'reports' || fixmystreet.page == 'my') {
            var l = new google.maps.event.addListener(marker, 'click', make_infowindow(marker));
        }
        markers.push( marker );
    }
    return markers;
}

function fms_map_clicked(e) {
    var lonlat = e.latLng;
    if (fixmystreet.page == 'new') {
        /* Already have a pin */
        fixmystreet.report_marker.setPosition(lonlat);
    } else {
        var marker = new google.maps.Marker({
            position: lonlat,
            draggable: true,
            animation: google.maps.Animation.DROP,
            map: fixmystreet.map
        });
        var l = google.maps.event.addListener(marker, 'dragend', function(){
            fixmystreet_update_pin( marker.getPosition() );
        });
        fixmystreet.report_marker = marker;
        google.maps.event.removeListener(fixmystreet.event_update_map);
        for (m=0; m<fixmystreet.markers.length; m++) {
            fixmystreet.markers[m].setMap(null);
        }
    }

    // check to see if markers are visible. We click the
    // link so that it updates the text in case they go
    // back
    if ( ! 1 ) { // XXX fixmystreet.markers.getVisibility() )
        fixmystreet.state_pins_were_hidden = true;
        $('#hide_pins_link').click();
    }

    // Store pin location in form fields, and check coverage of point
    fixmystreet_update_pin(lonlat);

    // Already did this first time map was clicked, so no need to do it again.
    if (fixmystreet.page == 'new') {
        return;
    }

    $('#side').hide();
    if (typeof heightFix !== 'undefined') {
        heightFix('#report-a-problem-sidebar', '.content', 26);
    }

    // If we clicked the map somewhere inconvenient
    // TODO

    $('#sub_map_links').hide();
    fixmystreet.page = 'new';
    location.hash = 'report';
}

/* Pan data handler */
function fms_read_pin_json(obj) {
    var current, current_near;
    if (typeof(obj.current) != 'undefined' && (current = document.getElementById('current'))) {
        current.innerHTML = obj.current;
    }
    if (typeof(obj.current_near) != 'undefined' && (current_near = document.getElementById('current_near'))) {
        current_near.innerHTML = obj.current_near;
    }
    fixmystreet.markers = fms_markers_list( obj.pins, false );
}

function fms_update_pins() {
    var b = fixmystreet.map.getBounds(),
        b_sw = b.getSouthWest(),
        b_ne = b.getNorthEast(),
        bbox = b_sw.lng() + ',' + b_sw.lat() + ',' + b_ne.lng() + ',' + b_ne.lat(),
        params = {
            bbox: bbox
        };
    if (fixmystreet.all_pins) {
        params.all_pins = 1;
    }
    $.getJSON('/ajax', params, fms_read_pin_json);
}

function fms_map_initialize() {
    var centre = new google.maps.LatLng( fixmystreet.latitude, fixmystreet.longitude );
    var map_args = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: centre,
        zoom: 13 + fixmystreet.zoom,
        disableDefaultUI: true,
        panControl: true,
        panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_TOP
        },
        zoomControl: true,
        zoomControlOptions: {
            position: google.maps.ControlPosition.RIGHT_TOP
        },
        mapTypeControl: true,
        mapTypeControlOptions: {
            position: google.maps.ControlPosition.RIGHT_TOP,
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
    };
    if (!fixmystreet.zoomToBounds) {
        map_args.minZoom = 13;
        map_args.maxZoom = 18;
    }
    fixmystreet.map = new google.maps.Map(document.getElementById("map"), map_args);

    /* Space above the top right controls */
    var paddingDiv = document.createElement('div');
    var paddingControl = new PaddingControl(paddingDiv);
    paddingDiv.index = 0;
    fixmystreet.map.controls[google.maps.ControlPosition.RIGHT_TOP].push(paddingDiv);

    if (fixmystreet.state_map && fixmystreet.state_map == 'full') {
        // TODO Work better with window resizing, this is pretty 'set up' only at present
        var $content = $('.content'), mb = $('#map_box'),
            q = ( $content.offset().left - mb.offset().left + $content.width() ) / 2;
        if (q < 0) { q = 0; }
        // Need to try and fake the 'centre' being 75% from the left
        fixmystreet.map.panBy(-q, -25);
    }

    if (document.getElementById('mapForm')) {
        var l = google.maps.event.addListener(fixmystreet.map, 'click', fms_map_clicked);
    }

    $(window).hashchange(function(){
        if (location.hash == '#report' && $('.rap-notes').is(':visible')) {
            $('.rap-notes-close').click();
            return;
        }

        if (location.hash && location.hash != '#') {
            return;
        }

        // Okay, back to around view.
        fixmystreet.report_marker.setMap(null);
        fixmystreet.event_update_map = google.maps.event.addListener(fixmystreet.map, 'idle', fms_update_pins);
        google.maps.event.trigger(fixmystreet.map, 'idle');
        if ( fixmystreet.state_pins_were_hidden ) {
            // If we had pins hidden when we clicked map (which had to show the pin layer as I'm doing it in one layer), hide them again.
            $('#hide_pins_link').click();
        }
        $('#side-form').hide();
        $('#side').show();
        $('#sub_map_links').show();
        //only on mobile
        $('#mob_sub_map_links').remove();
        $('.mobile-map-banner').html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map);
        fixmystreet.page = 'around';
    });

    if ( fixmystreet.area.length ) {
        for (var i=0; i<fixmystreet.area.length; i++) {
            var args = {
                url: "http://mapit.mysociety.org/area/" + fixmystreet.area[i] + ".kml?simplify_tolerance=0.0001",
                clickable: false,
                preserveViewport: true,
                map: fixmystreet.map
            };
            if ( fixmystreet.area.length == 1 ) {
                args.preserveViewport = false;
            }
            var a = new google.maps.KmlLayer(args);
            a.setMap(fixmystreet.map);
        }
    }

    if (fixmystreet.page == 'around') {
        fixmystreet.event_update_map = google.maps.event.addListener(fixmystreet.map, 'idle', fms_update_pins);
    }

    fixmystreet.markers = fms_markers_list( fixmystreet.pins, true );

    /*
    if ( fixmystreet.zoomToBounds ) {
        var bounds = fixmystreet.markers.getDataExtent();
        if (bounds) {
            var center = bounds.getCenterLonLat();
            var z = fixmystreet.map.getZoomForExtent(bounds);
            if ( z < 13 && $('html').hasClass('mobile') ) {
                z = 13;
            }
            fixmystreet.map.setCenter(center, z);
        }
    }
    */

    $('#hide_pins_link').click(function(e) {
        var i, m;
        e.preventDefault();
        var showhide = [
            'Show pins', 'Hide pins',
            'Dangos pinnau', 'Cuddio pinnau',
            "Vis nåler", "Gjem nåler",
            "Zeige Stecknadeln", "Stecknadeln ausblenden"
        ];
        for (i=0; i<showhide.length; i+=2) {
            if (this.innerHTML == showhide[i]) {
                for (m=0; m<fixmystreet.markers.length; m++) {
                    fixmystreet.markers[m].setMap(fixmystreet.map);
                }
                this.innerHTML = showhide[i+1];
            } else if (this.innerHTML == showhide[i+1]) {
                for (m=0; m<fixmystreet.markers.length; m++) {
                    fixmystreet.markers[m].setMap(null);
                }
                this.innerHTML = showhide[i];
            }
        }
    });

    $('#all_pins_link').click(function(e) {
        var i;
        e.preventDefault();
        for (i=0; i<fixmystreet.markers.length; i++) {
            fixmystreet.markers[i].setMap(fixmystreet.map);
        }
        var texts = [
            'en', 'Show old', 'Hide old',
            'nb', 'Inkluder utdaterte problemer', 'Skjul utdaterte rapporter',
            'cy', 'Cynnwys hen adroddiadau', 'Cuddio hen adroddiadau'
        ];
        for (i=0; i<texts.length; i+=3) {
            if (this.innerHTML == texts[i+1]) {
                this.innerHTML = texts[i+2];
                fixmystreet.markers.protocol.options.params = { all_pins: 1 };
                fixmystreet.markers.refresh( { force: true } );
                lang = texts[i];
            } else if (this.innerHTML == texts[i+2]) {
                this.innerHTML = texts[i+1];
                fixmystreet.markers.protocol.options.params = { };
                fixmystreet.markers.refresh( { force: true } );
                lang = texts[i];
            }
        }
        if (lang == 'cy') {
            document.getElementById('hide_pins_link').innerHTML = 'Cuddio pinnau';
        } else if (lang == 'nb') {
            document.getElementById('hide_pins_link').innerHTML = 'Gjem nåler';
        } else {
            document.getElementById('hide_pins_link').innerHTML = 'Hide pins';
        }
    });

}

google.maps.visualRefresh = true;
google.maps.event.addDomListener(window, 'load', fms_map_initialize);