diff --git a/.cypress/cypress/integration/bathnes.js b/.cypress/cypress/integration/bathnes.js index c1d0e83a357..825060a6270 100644 --- a/.cypress/cypress/integration/bathnes.js +++ b/.cypress/cypress/integration/bathnes.js @@ -36,7 +36,7 @@ it('uses the Curo Group housing layer correctly', function() { cy.wait('@banes-caro-group-housing-layer-tilma'); cy.wait('@report-ajax'); cy.pickCategory('Dog fouling'); - cy.contains('Maintained by Curo Group').should('be.visible'); + cy.get('.pre-button-messaging').contains('Maintained by Curo Group').should('be.visible'); }); it('handles code names with spaces without error', function() { diff --git a/.cypress/cypress/integration/highwaysengland.js b/.cypress/cypress/integration/highwaysengland.js index a36c55f8152..7a5b4f4aaf8 100644 --- a/.cypress/cypress/integration/highwaysengland.js +++ b/.cypress/cypress/integration/highwaysengland.js @@ -14,14 +14,14 @@ describe('National Highways cobrand tests', function() { cy.wait('@highways-tilma'); cy.wait('@report-ajax'); cy.contains('Report a maintenance issue').should('be.visible'); - cy.contains('The selected location is not maintained by us.').should('be.visible'); + cy.get('.pre-button-messaging').contains('The selected location is not maintained by us.').should('be.visible'); }); it('does not allow reporting on DBFO roads', function() { cy.get('#map_box').click(200, 249); cy.wait('@highways-tilma'); cy.wait('@report-ajax'); cy.contains('Report a maintenance issue').should('be.visible'); - cy.contains('report on roads directly maintained').should('be.visible'); + cy.get('.pre-button-messaging').contains('report on roads directly maintained').should('be.visible'); }); it('allows reporting on other HE roads', function() { cy.get('#map_box').click(240, 249); @@ -76,8 +76,9 @@ describe('National Highways litter picking test', function() { cy.wait('@highways-tilma'); cy.wait('@highways-tilma-litter'); cy.pickCategory('Flytipping'); + cy.get('#map_sidebar').scrollTo('top'); cy.contains('Report a litter issue').should('be.visible'); - cy.contains('litter issues on this road are handled by the local council').should('be.visible'); + cy.get('.pre-button-messaging').contains('litter issues on this road are handled by the local council').should('be.visible'); }); }); diff --git a/.cypress/cypress/integration/lincolnshire.js b/.cypress/cypress/integration/lincolnshire.js index 467793ccdc7..f7ab2fa12d8 100644 --- a/.cypress/cypress/integration/lincolnshire.js +++ b/.cypress/cypress/integration/lincolnshire.js @@ -12,9 +12,7 @@ describe('Lincolnshire cobrand', function(){ it('does not display extra message when selecting a "road" category', function(){ cy.pickCategory('Damaged/missing cats eye'); - cy.get( - '#category_meta_message_Damagedmissingcatseye' - ).should('have.text', ''); + cy.get('.pre-button-messaging').should('not.be.visible'); }); it('clicks through to photo section', function(){ diff --git a/.cypress/cypress/integration/northamptonshire.js b/.cypress/cypress/integration/northamptonshire.js index 46c0f49e502..f32bed4d8af 100644 --- a/.cypress/cypress/integration/northamptonshire.js +++ b/.cypress/cypress/integration/northamptonshire.js @@ -17,8 +17,7 @@ it('prevents clicking unless asset selected, desktop flow', function() { cy.pickCategory('Shelter Damaged'); cy.wait('@bus_stops-layer'); - cy.contains(/Please select a.*bus stop.*from the map/).should('be.visible'); - cy.get('#map_sidebar').scrollTo('bottom'); + cy.get('.pre-button-messaging').contains(/Please select a.*bus stop.*from the map/).should('be.visible'); cy.get('.js-reporting-page--next:visible').should('be.disabled'); }); diff --git a/.cypress/cypress/integration/oxfordshire.js b/.cypress/cypress/integration/oxfordshire.js index e5ef13b6615..6edf4411f32 100644 --- a/.cypress/cypress/integration/oxfordshire.js +++ b/.cypress/cypress/integration/oxfordshire.js @@ -7,15 +7,12 @@ describe("Oxfordshire cobrand", function() { cy.wait('@report-ajax'); cy.pickCategory('Lamp Out of Light'); cy.wait('@street-lights-layer'); - cy.get('#map_sidebar').scrollTo('bottom'); cy.get('.js-reporting-page--next:visible').should('be.disabled'); cy.get('circle').eq(1).click(); // Click a public light - cy.get("#category_meta_message_LampOutofLight").should('not.contain', 'private street light asset'); - cy.get('#map_sidebar').scrollTo('bottom'); + cy.get(".pre-button-messaging").should('not.contain', 'private street light asset'); cy.get('.js-reporting-page--next:visible').should('not.be.disabled'); cy.get('circle').eq(0).click(); // Click a private light - cy.get("#category_meta_message_LampOutofLight").should('contain', 'private street light asset'); - cy.get('#map_sidebar').scrollTo('bottom'); + cy.get(".pre-button-messaging").should('contain', 'private street light asset'); cy.get('.js-reporting-page--next:visible').should('be.disabled'); }); diff --git a/.cypress/cypress/integration/peterborough.js b/.cypress/cypress/integration/peterborough.js index b7a2c9002d8..8b53726e7c5 100644 --- a/.cypress/cypress/integration/peterborough.js +++ b/.cypress/cypress/integration/peterborough.js @@ -17,10 +17,10 @@ describe('new report form', function() { cy.pickCategory('Fallen branch'); cy.nextPageReporting(); cy.get('#form_emergency').select('yes'); - cy.get('.js-post-category-messages:visible').should('contain', 'Please phone customer services to report this problem.'); + cy.get('.pre-button-messaging:visible').should('contain', 'Please phone customer services to report this problem.'); cy.get('.js-reporting-page--next:visible').should('be.disabled'); cy.get('#form_emergency').select('no'); - cy.get('.js-post-category-messages:visible').should('not.contain', 'Please phone customer services to report this problem.'); + cy.get('.pre-button-messaging:visible').should('not.contain', 'Please phone customer services to report this problem.'); cy.get('.js-reporting-page--next:visible').should('not.be.disabled'); }); @@ -28,10 +28,10 @@ describe('new report form', function() { cy.pickCategory('Fallen branch'); cy.nextPageReporting(); cy.get('#form_private_land').select('yes'); - cy.get('.js-post-category-messages:visible').should('contain', 'The council do not have powers to address issues on private land.'); + cy.get('.pre-button-messaging:visible').should('contain', 'The council do not have powers to address issues on private land.'); cy.get('.js-reporting-page--next:visible').should('be.disabled'); cy.get('#form_private_land').select('no'); - cy.get('.js-post-category-messages:visible').should('not.contain', 'The council do not have powers to address issues on private land.'); + cy.get('.pre-button-messaging:visible').should('not.contain', 'The council do not have powers to address issues on private land.'); cy.get('.js-reporting-page--next:visible').should('not.be.disabled'); }); @@ -40,11 +40,11 @@ describe('new report form', function() { cy.nextPageReporting(); cy.get('#js-environment-message:visible'); cy.get('#form_hazardous').select('yes'); - cy.get('.js-post-category-messages:visible').should('contain', 'Please phone customer services to report this problem'); + cy.get('.pre-button-messaging:visible').should('contain', 'Please phone customer services to report this problem'); cy.get('#map_sidebar').scrollTo('bottom'); cy.get('.js-reporting-page--next:visible').should('be.disabled'); cy.get('#form_hazardous').select('no'); - cy.get('.js-post-category-messages:visible').should('not.contain', 'Please phone customer services to report this problem'); + cy.get('.pre-button-messaging:visible').should('not.contain', 'Please phone customer services to report this problem'); cy.get('.js-reporting-page--next:visible').should('not.be.disabled'); cy.visit('http://peterborough.localhost:3001/report/new?longitude=-0.242007&latitude=52.571903'); cy.wait('@report-ajax'); @@ -68,9 +68,9 @@ describe('new report form', function() { it('correctly changes the asset select message', function() { cy.pickCategory('Street lighting'); - cy.get('.category_meta_message').should('contain', 'You can pick a light from the map'); + cy.get('.pre-button-messaging').should('contain', 'Please select a light from the map'); cy.pickCategory('Trees'); - cy.get('.category_meta_message').should('contain', 'You can pick a tree from the map'); + cy.get('.pre-button-messaging').should('contain', 'Please select a tree from the map'); }); }); @@ -117,11 +117,11 @@ describe('National site tests', function() { cy.nextPageReporting(); cy.get('#js-environment-message:visible'); cy.get('#form_hazardous').select('yes'); - cy.get('.js-post-category-messages:visible').should('contain', 'Please phone customer services to report this problem'); + cy.get('.pre-button-messaging:visible').should('contain', 'Please phone customer services to report this problem'); cy.get('#map_sidebar').scrollTo('bottom'); cy.get('.js-reporting-page--next:visible').should('be.disabled'); cy.get('#form_hazardous').select('no'); - cy.get('.js-post-category-messages:hidden').should('not.contain', 'Please phone customer services to report this problem'); + cy.get('.pre-button-messaging:hidden').should('not.contain', 'Please phone customer services to report this problem'); cy.get('.js-reporting-page--next:visible').should('not.be.disabled'); cy.visit('http://fixmystreet.localhost:3001/report/new?longitude=-0.242007&latitude=52.571903'); cy.wait('@report-ajax'); diff --git a/.cypress/cypress/integration/surrey.js b/.cypress/cypress/integration/surrey.js index 8d8312c2b81..00287e03f02 100644 --- a/.cypress/cypress/integration/surrey.js +++ b/.cypress/cypress/integration/surrey.js @@ -14,12 +14,10 @@ describe('Reporting not on a road', function() { cy.wait('@report-ajax'); cy.pickCategory('Abandoned vehicles'); cy.contains('You cannot send Surrey County Council a report'); - cy.get('#map_sidebar').scrollTo('bottom'); cy.get('.js-reporting-page--next').should('be.disabled'); cy.get('.js-reporting-page--next').should('not.be.visible'); cy.pickCategory('Flooding inside a building'); cy.contains('You cannot send Surrey County Council a report').should('not.be.visible'); - cy.get('#map_sidebar').scrollTo('bottom'); cy.get('.js-reporting-page--next:visible').should('not.be.disabled'); cy.get('.js-reporting-page--next').should('be.visible'); }); diff --git a/.cypress/cypress/integration/tfl.js b/.cypress/cypress/integration/tfl.js index e535b8311a8..5232d832275 100644 --- a/.cypress/cypress/integration/tfl.js +++ b/.cypress/cypress/integration/tfl.js @@ -16,8 +16,7 @@ it('allows bus stop clicking outside London', function() { // Also check a category not on a red route cy.go('back'); cy.pickCategory('Mobile Crane Operation'); - cy.get('#map_sidebar').scrollTo('top'); - cy.contains('does not maintain this road').should('be.visible'); + cy.get('.pre-button-messaging').contains('does not maintain this road').should('be.visible'); }); it('shows TfL roadworks', function() { diff --git a/data/test-asset-layers.yml b/data/test-asset-layers.yml index 46bc4159e94..08c25691d55 100755 --- a/data/test-asset-layers.yml +++ b/data/test-asset-layers.yml @@ -311,6 +311,7 @@ oxfordshire: feature_code: 'title' asset_id_field: 'itemId' construct_selected_asset_message: fixmystreet.assets.oxfordshire.light_construct_selected_asset_message + asset_message_when_disabled: true actions: asset_found: fixmystreet.assets.oxfordshire.light_asset_found asset_not_found: fixmystreet.assets.oxfordshire.light_asset_not_found diff --git a/web/cobrands/fixmystreet/assets.js b/web/cobrands/fixmystreet/assets.js index 9d894bed2e9..b5fed4aba6f 100644 --- a/web/cobrands/fixmystreet/assets.js +++ b/web/cobrands/fixmystreet/assets.js @@ -435,34 +435,20 @@ function check_zoom_message_visibility() { return; } if (this.relevant()) { - var selected = fixmystreet.reporting.selectedCategory(), - category = this.fixmystreet.asset_group ? selected.group : selected.category, - prefix = category.replace(/[^a-z]/gi, ''), - id = "category_meta_message_" + prefix, - $p = $('.category_meta_message'), - message; - if ($p.length === 0) { - $p = $("
").prop('class', 'category_meta_message'); - if ($('html').hasClass('mobile')) { - $p.appendTo('#map_box'); - } else { - $p.appendTo('.js-reporting-page--active .js-post-category-messages'); - } - } - $p.prop('id', id); - if (this.getVisibility() && $('html').hasClass('mobile')) { fixmystreet.pageController.addMapPage(this); } if (this.getVisibility() && this.inRange) { - message = get_asset_pick_message.call(this); + delete this.map_messaging.zoom; + this.map_messaging.asset = get_asset_pick_message.call(this); } else { - message = 'Zoom in to pick a ' + this.fixmystreet.asset_item + ' from the map'; + delete this.map_messaging.asset; + this.map_messaging.zoom = 'Zoom in to pick a ' + this.fixmystreet.asset_item + ' from the map'; } - $p.html(message); } else { - update_message_display.call(this, null); + delete this.map_messaging.zoom; + delete this.map_messaging.asset; $('#' + this.id + '_map').remove(); } } @@ -478,27 +464,6 @@ function get_asset_pick_message() { return message; } -/* This doesn't just use the class because e.g. an unselect event - * can fire after a category change event, and that would then - * update the new message using the text of the unselected layer. */ -function update_message_display(message) { - var list = this.fixmystreet.asset_group || this.fixmystreet.asset_category; - $.each(list, function(i, c) { - _update_message(message, c); - }); -} - -function _update_message(message, c) { - var prefix = c.replace(/[^a-z]/gi, ''), - id = "category_meta_message_" + prefix, - $p = $('#' + id); - if (message) { - $p.html(message).show(); - } else { - $p.hide(); - } -} - var lastVisible = 0; function layer_visibilitychanged() { @@ -716,6 +681,32 @@ function construct_layer_class(options) { return layer_class; } +function update_floating_button_messaging(layer, messaging) { + var id = 'js-responsibility-message-' + layer.id; + var message = messaging.zoom || (layer.fixmystreet.asset_message_when_disabled ? messaging.asset : messaging.responsibility || messaging.asset); + var obj = $('#' + id); + if (message) { + var $div = $('
').html(message); + if (obj.length) { + obj.replaceWith($div); + } else { + if ($('html').hasClass('mobile')) { + $div.appendTo('#map_box'); + } else { + $div.appendTo('.js-reporting-page--active .pre-button-messaging'); + } + } + if (messaging.responsibility) { + $div.addClass('js-not-an-asset'); + } else { + $div.removeClass('js-not-an-asset'); + } + } else { + obj.remove(); + } + $('.js-reporting-page--active').css('padding-bottom', $('.pre-button-messaging').height()); +} + function construct_asset_layer(options) { // An interactive layer for selecting an asset (e.g. street light) var protocol_options = construct_protocol_options(options); @@ -726,6 +717,19 @@ function construct_asset_layer(options) { var layer_class = construct_layer_class(options); var asset_layer = new layer_class(options.name || "WFS", layer_options); + asset_layer.map_messaging = new Proxy({}, { + set: function(target, prop, value) { + target[prop] = value; + update_floating_button_messaging(asset_layer, target); + return true; + }, + deleteProperty: function(target, prop) { + delete target[prop]; + update_floating_button_messaging(asset_layer, target); + return true; + }, + }); + return asset_layer; } @@ -863,15 +867,11 @@ fixmystreet.assets = { }, named_select_action_found: function(asset) { var fn = this.fixmystreet.construct_selected_asset_message || this.construct_selected_asset_message; - var message = fn.call(this, asset); - if (!message) { - message = get_asset_pick_message.call(this); - } - update_message_display.call(this, message); + var message = fn.call(this, asset) || get_asset_pick_message.call(this); + this.map_messaging.asset = message; }, named_select_action_not_found: function() { - var message = get_asset_pick_message.call(this); - update_message_display.call(this, message); + this.map_messaging.asset = get_asset_pick_message.call(this); }, selectedFeature: function() { @@ -1374,22 +1374,18 @@ fixmystreet.message_controller = (function() { function show_responsibility_error(id, layer) { var layer_data = layer.fixmystreet; - $("#js-roads-responsibility .js-responsibility-message").addClass("hidden"); - + var cls = 'js-roads-layer-' + layer.id; + var div; if (layer_data.no_asset_message) { - var cls = 'js-roads-layer-' + layer.id; id = id || '#' + cls; - var nohash = id.replace('#', ''); - if (!$(id).length) { - var div = $(''); - var message = layer_data.no_asset_message[id] || layer_data.no_asset_message["default"] || layer_data.no_asset_message; - div.attr('id', nohash).html(message).appendTo('#js-roads-responsibility'); - } + var message = layer_data.no_asset_message[id] || layer_data.no_asset_message["default"] || layer_data.no_asset_message; + div = $('').html(message); } else { id = id || '#js-not-an-asset'; + div = $(id); } - var asset_strings = $(id).find('.js-roads-asset'); + var asset_strings = div.find('.js-roads-asset'); if (layer_data.asset_item) { asset_strings.html('a ' + layer_data.asset_item + ''); } else { @@ -1410,50 +1406,22 @@ fixmystreet.message_controller = (function() { } return href; }); + + var msg = div.html(); if ($('html').hasClass('mobile')) { - var msg = $(id).html(); - var mobile_class = id.replace('#', ''); $("body").addClass("map-with-crosshairs2"); - $div = $('').html(msg); - $div.appendTo('#map_box'); - } else { - $("#js-roads-responsibility").removeClass("hidden"); - var top_sidebar = $('#map_sidebar').offset().top; - var top_message = $('#js-roads-responsibility').offset().top; - if (top_message < top_sidebar) { - $("#js-roads-responsibility")[0].scrollIntoView(); - } } - $(id).removeClass("hidden"); + layer.map_messaging.responsibility = msg; } // This hides the asset/road not found message function hide_responsibility_errors(id, layer) { - var layer_data = layer.fixmystreet; - - if (layer_data.no_asset_message) { - id = '.js-roads-layer-' + layer.id; - } else { - id = id || '#js-not-an-asset'; - } - - // If the layer provides a class of messages, hide them all, otherwise hide the ID we're given - if (layer_data.no_asset_msgs_class) { - $(layer_data.no_asset_msgs_class).addClass("hidden"); - } else { - $(id).addClass("hidden"); - } - var mobile_id = id.replace(/[#.]/, ''); - var mobile_class = '.mob_' + mobile_id; - $(mobile_class).remove(); - if (!$("#js-roads-responsibility .js-responsibility-message:not(.hidden)").length) { - $("#js-roads-responsibility").addClass("hidden"); - } + delete layer.map_messaging.responsibility; } // Show the reporting form, unless the road responsibility message is visible. function enable_report_form() { - if ( $('#js-roads-responsibility').is(':visible') || $('.js-mobile-not-an-asset').length ) { + if ( $('.js-not-an-asset').length ) { return; } if (hide_continue_button()) { @@ -1562,7 +1530,7 @@ fixmystreet.message_controller = (function() { if (typeof stopper.message === 'function') { $msg = stopper.message(); } else { - $msg = $('