From 3c0983aa6b906b275e24e77b7b919c1c0d37fd9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laura=20Kl=C3=BCnder?= Date: Wed, 25 Dec 2019 20:24:11 +0100 Subject: [PATCH] select random location by clicking! --- src/c3nav/site/static/site/js/c3nav.js | 64 +++++++++++++++++++++++++- 1 file changed, 62 insertions(+), 2 deletions(-) diff --git a/src/c3nav/site/static/site/js/c3nav.js b/src/c3nav/site/static/site/js/c3nav.js index 2632a3ef..a2c58896 100644 --- a/src/c3nav/site/static/site/js/c3nav.js +++ b/src/c3nav/site/static/site/js/c3nav.js @@ -155,7 +155,7 @@ c3nav = { c3nav.ssids = $main.is('[data-ssids]') ? JSON.parse($main.attr('data-ssids')) : null; - c3nav.random_location_groups = $main.is('[data-random-location-groups]') ? $main.attr('data-random-location-groups').split(',') : null; + c3nav.random_location_groups = $main.is('[data-random-location-groups]') ? $main.attr('data-random-location-groups').split(',').map(id => parseInt(id)) : null; history.replaceState(state, window.location.path); c3nav.load_state(state, true); @@ -867,7 +867,7 @@ c3nav = { .on('keydown', c3nav._locationinput_keydown); $('.locationinput .clear').on('click', c3nav._locationinput_clear); $('.locationinput .locate').on('click', c3nav._locationinput_locate); - $('.locationinput .random').on('click', c3nav._modal_link_click); + $('.locationinput .random').on('click', c3nav._random_location_click); $('.leaflet-control-user-location a').on('click', c3nav._goto_user_location_click).dblclick(function(e) { e.stopPropagation(); }); $('#autocomplete').on('mouseover', '.location', c3nav._locationinput_hover_suggestion) .on('click', '.location', c3nav._locationinput_click_suggestion); @@ -1117,6 +1117,66 @@ c3nav = { } }, + _random_location_click: function() { + var $button = $('button.random'), + parent = $button.parent(), + width = parent.width(), + height = parent.height(); + + $cover = $('
').css({ + 'width': width+'px', + 'height': height+'px', + 'background-color': '#ffffff', + 'position': 'absolute', + 'top': 0, + 'left': $button.position().left+$button.width()/2+'px', + 'z-index': 200, + }).appendTo(parent); + + $cover.animate({ + left: 5+$button.width()/2+'px' + }, 300, 'swing'); + $button.css({ + 'left': $button.position().left, + 'background-color': '#ffffff', + 'right': null, + 'z-index': 201, + 'opacity': 1, + 'transform': 'scale(1)', + 'color': c3nav._primary_color, + 'pointer-events': 'none' + }).animate({ + left: 5, + }, 300, 'swing').queue(function(d) { + d(); + var possible_locations = []; + for (var id of c3nav.random_location_groups) { + var group = c3nav.locations_by_id[id]; + if (!group) continue; + // todo set und so + for (var subid of group.locations) { + if (!(subid in possible_locations) && subid in c3nav.locations_by_id) { + possible_locations.push(subid); + } + } + } + var location = c3nav.locations_by_id[possible_locations[Math.floor(Math.random()*possible_locations.length)]]; + c3nav._locationinput_set($('#destination-input'), location); + c3nav.update_state(false); + c3nav.fly_to_bounds(true); + $cover.animate({ + left: width+$button.width()/2+'px' + }, 300, 'swing'); + $button.animate({ + left: width, + }, 300, 'swing').queue(function(d) { + d(); + $button.attr('style', ''); + $cover.remove(); + }); + }); + }, + modal_noclose: false, open_modal: function (content, no_close) { c3nav.modal_noclose = no_close;