From 853dc286b9c9093d0c1ad2082671111316703e4f Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Tue, 12 Nov 2013 16:58:34 -0800 Subject: [PATCH] Add sidebar loading indicator --- app/assets/javascripts/index.js | 50 +++++++++++++------ app/assets/javascripts/index/export.js | 7 +-- app/assets/javascripts/index/history.js | 7 +-- app/assets/javascripts/index/new_note.js.erb | 21 +++----- app/assets/javascripts/index/note.js.erb | 52 ++++++-------------- app/assets/javascripts/index/search.js | 8 +-- app/assets/stylesheets/common.css.scss | 3 +- app/views/layouts/map.html.erb | 4 ++ 8 files changed, 66 insertions(+), 86 deletions(-) diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js index 15b45d31c..2d397b812 100644 --- a/app/assets/javascripts/index.js +++ b/app/assets/javascripts/index.js @@ -14,6 +14,39 @@ //= require index/new_note //= require router +(function() { + var loaderTimeout; + + OSM.loadSidebarContent = function(path, callback) { + clearTimeout(loaderTimeout); + + loaderTimeout = setTimeout(function() { + $('#sidebar_loader').show(); + }, 200); + + // IE<10 doesn't respect Vary: X-Requested-With header, so + // prevent caching the XHR response as a full-page URL. + if (path.indexOf('?') >= 0) { + path += '&xhr=1' + } else { + path += '?xhr=1' + } + + $('#sidebar_content') + .empty() + .load(path, function(a, b, xhr) { + clearTimeout(loaderTimeout); + $('#sidebar_loader').hide(); + if (xhr.getResponseHeader('X-Page-Title')) { + document.title = xhr.getResponseHeader('X-Page-Title'); + } + if (callback) { + callback(); + } + }); + }; +})(); + $(document).ready(function () { var params = OSM.mapParams(); @@ -159,25 +192,17 @@ $(document).ready(function () { OSM.Index = function(map) { var page = {}; - function loadContent(path) { - $('#sidebar_content').load(path + "?xhr=1", function(a, b, xhr) { - if (xhr.getResponseHeader('X-Page-Title')) { - document.title = xhr.getResponseHeader('X-Page-Title'); - } - }); - } - page.pushstate = function(path) { $("#content").addClass("overlay-sidebar"); map.invalidateSize({pan: false}) .panBy([-300, 0], {animate: false}); - loadContent(path); + OSM.loadSidebarContent(path); }; page.popstate = function(path) { $("#content").addClass("overlay-sidebar"); map.invalidateSize({pan: false}); - loadContent(path); + OSM.loadSidebarContent(path); }; page.unload = function() { @@ -193,10 +218,7 @@ $(document).ready(function () { var page = {}; page.pushstate = page.popstate = function(path, type, id) { - $('#sidebar_content').load(path + "?xhr=1", function(a, b, xhr) { - if (xhr.getResponseHeader('X-Page-Title')) { - document.title = xhr.getResponseHeader('X-Page-Title'); - } + OSM.loadSidebarContent(path, function() { page.load(path, type, id); }); }; diff --git a/app/assets/javascripts/index/export.js b/app/assets/javascripts/index/export.js index a2d6c4f07..851dbb9ae 100644 --- a/app/assets/javascripts/index/export.js +++ b/app/assets/javascripts/index/export.js @@ -51,12 +51,7 @@ OSM.Export = function(map) { page.pushstate = page.popstate = function(path) { $("#export_tab").addClass("current"); - $("#sidebar_content").load(path + "?xhr=1", function(a, b, xhr) { - if (xhr.getResponseHeader('X-Page-Title')) { - document.title = xhr.getResponseHeader('X-Page-Title'); - } - page.load(); - }); + OSM.loadSidebarContent(path, page.load); }; page.load = function() { diff --git a/app/assets/javascripts/index/history.js b/app/assets/javascripts/index/history.js index 29a3d1fb9..afae6640f 100644 --- a/app/assets/javascripts/index/history.js +++ b/app/assets/javascripts/index/history.js @@ -99,12 +99,7 @@ OSM.History = function(map) { page.pushstate = page.popstate = function(path) { $("#history_tab").addClass("current"); - $("#sidebar_content").load(path + "?xhr=1", function(a, b, xhr) { - if (xhr.getResponseHeader('X-Page-Title')) { - document.title = xhr.getResponseHeader('X-Page-Title'); - } - page.load(); - }); + OSM.loadSidebarContent(path, page.load); }; page.load = function() { diff --git a/app/assets/javascripts/index/new_note.js.erb b/app/assets/javascripts/index/new_note.js.erb index e544c1a93..c47cb563c 100644 --- a/app/assets/javascripts/index/new_note.js.erb +++ b/app/assets/javascripts/index/new_note.js.erb @@ -23,10 +23,6 @@ OSM.NewNote = function(map) { }) }; - page.pushstate = page.popstate = function () { - page.load(); - }; - addNoteButton.on("click", function (e) { e.preventDefault(); e.stopPropagation(); @@ -67,7 +63,7 @@ OSM.NewNote = function(map) { } function updateMarker(feature) { - marker = L.marker(feature.geometry.coordinates.reverse(), { + var marker = L.marker(feature.geometry.coordinates.reverse(), { icon: noteIcons[feature.properties.status], opacity: 0.9, clickable: true @@ -77,7 +73,11 @@ OSM.NewNote = function(map) { return marker; } - function initialize() { + page.pushstate = page.popstate = function (path) { + OSM.loadSidebarContent(path, page.load); + }; + + page.load = function () { if (addNoteButton.hasClass("disabled")) return; if (addNoteButton.hasClass("active")) return; @@ -124,15 +124,6 @@ OSM.NewNote = function(map) { e.preventDefault(); createNote(newNote, e.target.form, '/api/0.6/notes.json'); }); - } - - page.load = function () { - content.load(window.location.pathname + "?xhr=1", function (a, b, xhr) { - if (xhr.getResponseHeader('X-Page-Title')) { - document.title = xhr.getResponseHeader('X-Page-Title'); - } - initialize(); - }); }; page.unload = function () { diff --git a/app/assets/javascripts/index/note.js.erb b/app/assets/javascripts/index/note.js.erb index afc230067..2586f84c6 100644 --- a/app/assets/javascripts/index/note.js.erb +++ b/app/assets/javascripts/index/note.js.erb @@ -43,7 +43,11 @@ OSM.Note = function (map) { }); } - function bind() { + page.pushstate = page.popstate = function (path) { + OSM.loadSidebarContent(path, page.load); + }; + + page.load = function () { content.find("input[type=submit]").on("click", function (e) { e.preventDefault(); var data = $(e.target).data(); @@ -63,34 +67,18 @@ OSM.Note = function (map) { }); content.find("textarea").val('').trigger("input"); - } - - page.pushstate = page.popstate = function () { - page.load(); - }; - - page.load = function () { - var loadTimer = setTimeout(setLoading, 250); - $('#sidebar_content').load(window.location.pathname + "?xhr=1", function (a, b, xhr) { - if (xhr.getResponseHeader('X-Page-Title')) { - document.title = xhr.getResponseHeader('X-Page-Title'); - } - bind(); - clearTimeout(loadTimer); - clearLoading(); - var data = $('.details').data(); - if (!noteState) map.addLayer(noteLayer); - if (window.location.hash == "") map.panTo(data.coordinates.split(',')); + var data = $('.details').data(); + if (!noteState) map.addLayer(noteLayer); + if (window.location.hash == "") map.panTo(data.coordinates.split(',')); - if (!map.hasLayer(halo)) { - halo = L.circleMarker(data.coordinates.split(','), { - weight: 2.5, - radius: 20 - }); - map.addLayer(halo); - } - }); + if (!map.hasLayer(halo)) { + halo = L.circleMarker(data.coordinates.split(','), { + weight: 2.5, + radius: 20 + }); + map.addLayer(halo); + } }; page.unload = function () { @@ -98,15 +86,5 @@ OSM.Note = function (map) { if (!noteState) map.removeLayer(noteLayer); }; - function setLoading() { - if ($('#browse_status').is(':empty')) { - $('#browse_status').append($('

').text(I18n.t('browse.start_rjs.loading'))); - } - } - - function clearLoading() { - $('#browse_status').empty(); - } - return page; }; diff --git a/app/assets/javascripts/index/search.js b/app/assets/javascripts/index/search.js index fde4c2499..43142959b 100644 --- a/app/assets/javascripts/index/search.js +++ b/app/assets/javascripts/index/search.js @@ -49,13 +49,7 @@ OSM.Search = function(map) { page.pushstate = page.popstate = function(path) { var params = querystring.parse(path.substring(path.indexOf('?') + 1)); $(".search_form input[name=query]").val(params.query); - map.invalidateSize(); - $("#sidebar_content").load(path, function(a, b, xhr) { - if (xhr.getResponseHeader('X-Page-Title')) { - document.title = xhr.getResponseHeader('X-Page-Title'); - } - page.load(); - }); + OSM.loadSidebarContent(path, page.load); }; page.load = function() { diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 7d6b1acd4..ae0f4da3c 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -866,7 +866,8 @@ nav.secondary { } } -#sidebar_content { +#sidebar { + #sidebar_loader, .loader, .load_more { text-align: center; diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb index a7d00f53f..420d3933d 100644 --- a/app/views/layouts/map.html.erb +++ b/app/views/layouts/map.html.erb @@ -28,6 +28,10 @@
+ +
<%= render :partial => "layouts/flash" %> <%= yield %> -- 2.39.5