diff --git a/Gruntfile.js b/Gruntfile.js index 3aeeebc03b..9ee42790de 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -91,7 +91,7 @@ module.exports = function(grunt) { 'public/javascripts/Gallery/src/keyboard/*.js', 'public/javascripts/Gallery/src/validation/*.js', 'public/javascripts/Gallery/src/displays/*.js', - 'public/javascripts/Gallery/src/modal/*.js', + 'public/javascripts/Gallery/src/expandedview/*.js', 'public/javascripts/Gallery/src/*.js', 'public/javascripts/common/Panomarker.js', 'public/javascripts/common/GSVInfoPopover.js' diff --git a/app/models/daos/slick/UserDAOSlick.scala b/app/models/daos/slick/UserDAOSlick.scala index a7f1c8e9cc..e5024033e2 100644 --- a/app/models/daos/slick/UserDAOSlick.scala +++ b/app/models/daos/slick/UserDAOSlick.scala @@ -493,7 +493,7 @@ object UserDAOSlick { // Map(user_id: String -> (most_recent_sign_in_time: Option[Timestamp], sign_in_count: Int)). val signInTimesAndCounts = - WebpageActivityTable.activities.filter(_.activity inSet List("AnonAutoSignUp", "SignIn")) + WebpageActivityTable.activities.filter(row => row.activity === "AnonAutoSignUp" || (row.activity like "SignIn%")) .groupBy(_.userId).map{ case (_userId, group) => (_userId, group.map(_.timestamp).max, group.length) } .list.map{ case (_userId, _time, _count) => (_userId, (_time, _count)) }.toMap diff --git a/app/models/user/WebpageActivityTable.scala b/app/models/user/WebpageActivityTable.scala index 8ef052c1da..9e038db8ba 100644 --- a/app/models/user/WebpageActivityTable.scala +++ b/app/models/user/WebpageActivityTable.scala @@ -46,7 +46,7 @@ object WebpageActivityTable { */ def selectAllSignInCounts: List[(String, String, Int)] = db.withTransaction { implicit session => val signIns = for { - _activity <- activities if _activity.activity === "SignIn" + _activity <- activities if _activity.activity like "SignIn%" _userRole <- userRoles if _activity.userId === _userRole.userId _role <- roles if _userRole.roleId === _role.roleId if _role.role =!= "Anonymous" diff --git a/app/views/gallery.scala.html b/app/views/gallery.scala.html index 5fe71b2c08..8cedaf9be3 100644 --- a/app/views/gallery.scala.html +++ b/app/views/gallery.scala.html @@ -79,25 +79,25 @@
@Messages("validatio
-
-
-
-
×
+
+
+
+
×
-
- -
+
+ +
- +
-
-
-
-
-
-
-
+
+
+
+
+
+
+
diff --git a/build.sbt b/build.sbt index 5a51fa4592..903df45662 100644 --- a/build.sbt +++ b/build.sbt @@ -2,7 +2,7 @@ import play.PlayScala name := """sidewalk-webpage""" -version := "7.20.7" +version := "7.20.8" scalaVersion := "2.10.7" diff --git a/conf/cityparams.conf b/conf/cityparams.conf index 0cbf6ef444..9c25aac13f 100644 --- a/conf/cityparams.conf +++ b/conf/cityparams.conf @@ -14,6 +14,7 @@ city-params { "chicago-il" "amsterdam" "la-piedad" + "la-piedad-old" "oradell-nj" "validation-study" "zurich" @@ -64,6 +65,7 @@ city-params { chicago-il = "usa" amsterdam = "netherlands" la-piedad = "mexico" + la-piedad-old = "mexico" oradell-nj = "usa" validation-study = ${city-params.country-id.seattle-wa} zurich = "switzerland" @@ -91,6 +93,7 @@ city-params { chicago-il = "public" amsterdam = "public" la-piedad = "public" + la-piedad-old = "private" oradell-nj = "public" validation-study = "private" zurich = "private" @@ -117,7 +120,8 @@ city-params { pittsburgh-pa = "2020-07-30" chicago-il = "2021-09-03" amsterdam = "2022-03-17" - la-piedad = "2022-03-17" + la-piedad = "2024-10-09" + la-piedad-old = "2022-03-17" oradell-nj = "2022-03-17" validation-study = "2022-05-10" zurich = "2022-11-08" @@ -144,6 +148,7 @@ city-params { chicago-il = "skyline1.png" amsterdam = "skyline1.png" la-piedad = "skyline2.png" + la-piedad-old = "skyline2.png" oradell-nj = "skyline1.png" validation-study = "skyline1.png" zurich = "skyline1.png" @@ -171,6 +176,7 @@ city-params { chicago-il = "sidewalk-logo.png" amsterdam = "sidewalk-logo.png" la-piedad = "sidewalk-logo2.png" + la-piedad-old = "sidewalk-logo2.png" oradell-nj = "sidewalk-logo.png" validation-study = "sidewalk-logo.png" zurich = "sidewalk-logo.png" @@ -199,6 +205,7 @@ city-params { chicago-il = "https://sidewalk-chicago.cs.washington.edu" amsterdam = "https://sidewalk-amsterdam.cs.washington.edu" la-piedad = "https://sidewalk-la-piedad.cs.washington.edu" + la-piedad-old = "https://sidewalk-la-piedad-old.cs.washington.edu" oradell-nj = "https://sidewalk-oradell.cs.washington.edu" validation-study = "https://sidewalk-validation-study.cs.washington.edu" zurich = "https://sidewalk-zurich.cs.washington.edu" @@ -226,6 +233,7 @@ city-params { chicago-il = "https://sidewalk-chicago-test.cs.washington.edu" amsterdam = "https://sidewalk-amsterdam-test.cs.washington.edu" la-piedad = "https://sidewalk-la-piedad-test.cs.washington.edu" + la-piedad-old = "https://sidewalk-la-piedad-old-test.cs.washington.edu" oradell-nj = "https://sidewalk-oradell-test.cs.washington.edu" validation-study = "https://sidewalk-validation-study-test.cs.washington.edu" zurich = "https://sidewalk-zurich-test.cs.washington.edu" @@ -255,6 +263,7 @@ city-params { chicago-il = "G-EVL9RB7FLS" amsterdam = "G-TPMCR6MCX0" la-piedad = "G-6ZFQQ9TJ5P" + la-piedad-old = "G-6ZFQQ9TJ5P" oradell-nj = "G-X230K5TGHV" validation-study = "G-XEYDVZ5QMZ" zurich = "G-YQJ74CTZ1P" @@ -282,6 +291,7 @@ city-params { chicago-il = "G-6NJ57TMFPZ" amsteram = "G-WWMMGEWQWQ" la-piedad = "G-TFT16K5SXF" + la-piedad-old = "G-TFT16K5SXF" oradell-nj = "G-GZC8MWJTVF" zurich = "G-QFM536EGLN" taipei = "G-H92Z46T5DG" diff --git a/conf/evolutions/default/250.sql b/conf/evolutions/default/250.sql new file mode 100644 index 0000000000..fa53212a33 --- /dev/null +++ b/conf/evolutions/default/250.sql @@ -0,0 +1,5 @@ +# --- !Ups +INSERT INTO version VALUES ('7.20.8', now(), 'Fixes bug where labels were being saved with incorrect zoom level.'); + +# --- !Downs +DELETE FROM version WHERE version_id = '7.20.8'; diff --git a/conf/messages b/conf/messages index 0aa95d1d52..93637485e4 100644 --- a/conf/messages +++ b/conf/messages @@ -15,6 +15,7 @@ city.name.pittsburgh-pa = Pittsburgh city.name.chicago-il = Chicago city.name.amsterdam = Amsterdam city.name.la-piedad = La Piedad +city.name.la-piedad-old = La Piedad (old) city.name.oradell-nj = Oradell city.name.validation-study = Validation Study city.name.zurich = Zurich diff --git a/conf/messages.zh-TW b/conf/messages.zh-TW index 469c9c8cfb..a8e4e3c9f5 100644 --- a/conf/messages.zh-TW +++ b/conf/messages.zh-TW @@ -65,6 +65,7 @@ city.name.pittsburgh-pa = 匹茲堡 city.name.chicago-il = 芝加哥 city.name.amsterdam = 阿姆斯特丹 city.name.la-piedad = 拉彼達 +city.name.la-piedad-old = 拉彼達(old) city.name.oradell-nj = 奧拉德爾 city.name.zurich = 蘇黎世 city.name.taipei = 臺北市 diff --git a/public/javascripts/Gallery/css/cards.css b/public/javascripts/Gallery/css/cards.css index 5c0ce601f7..ebdb50defd 100644 --- a/public/javascripts/Gallery/css/cards.css +++ b/public/javascripts/Gallery/css/cards.css @@ -153,7 +153,7 @@ with respect to the image holder. This allows the validation menu to be placed o min-width: 0; } -.gallery-modal-info-tags .label-tags-holder { +.gallery-expanded-view-info-tags .label-tags-holder { align-items: start; overflow-y: auto; } @@ -237,15 +237,15 @@ with respect to the image holder. This allows the validation menu to be placed o background-color: gray; } -.modal-background-card { +.expanded-view-background-card { opacity: 50%; } -.modal-no-severity { +.expanded-view-no-severity { filter: opacity(0.2); } -.modal-severity-content { +.expanded-view-severity-content { width: 100%; } diff --git a/public/javascripts/Gallery/css/modal.css b/public/javascripts/Gallery/css/expanded-view.css similarity index 76% rename from public/javascripts/Gallery/css/modal.css rename to public/javascripts/Gallery/css/expanded-view.css index 9a515d6137..0c056c52e1 100644 --- a/public/javascripts/Gallery/css/modal.css +++ b/public/javascripts/Gallery/css/expanded-view.css @@ -1,4 +1,4 @@ -.gallery-modal-close { +.gallery-expanded-view-close { left: 0px; top: 10%; position: relative; @@ -6,7 +6,7 @@ cursor: pointer; } -.gallery-modal { +.gallery-expanded-view { display: flex; height: 90vh; position: relative; @@ -36,20 +36,23 @@ margin-top: 2px; } -.modal-severity-header, .modal-tag-header, .modal-temporary-header, .modal-description-header { +.expanded-view-severity-header, +.expanded-view-tag-header, +.expanded-view-temporary-header, +.expanded-view-description-header { font-weight: bold; color: #2d2a3f; } -.modal-temporary-body, .modal-description-body { +.expanded-view-temporary-body, .expanded-view-description-body { color: #888787; } -.modal-description-body { +.expanded-view-description-body { overflow: auto; } -.gallery-modal-header { +.gallery-expanded-view-header { width: 100%; height: 100%; margin-top: 15px; @@ -58,7 +61,7 @@ color: #2d2a3f; } -.gallery-modal-pano { +.gallery-expanded-view-pano { width: 100%; height: 63%; display: flex; @@ -74,14 +77,14 @@ background-color: transparent; } -.gallery-modal-pano-display { +.gallery-expanded-view-pano-display { position: relative; z-index: 10; width: 90%; height: 100%; } -.gallery-modal-pano-paging { +.gallery-expanded-view-pano-paging { height: 30px; width: 50px; color: black; @@ -93,11 +96,11 @@ background-color: transparent; } -.gallery-modal-pano-paging:disabled { +.gallery-expanded-view-pano-paging:disabled { color: lightgray; } -.gallery-modal-info { +.gallery-expanded-view-info { display: flex; padding-bottom: 1%; height: 24%; @@ -108,7 +111,7 @@ overflow: hidden; } -.gallery-modal-info-timestamps { +.gallery-expanded-view-info-timestamps { display: flex; justify-content: space-between; width: 100%; @@ -118,14 +121,14 @@ padding-top: 0.1%; } -.gallery-modal-info-severity { +.gallery-expanded-view-info-severity { width: 20%; height: 40%; display: flex; flex-direction: column; } -.gallery-modal-info-validation { +.gallery-expanded-view-info-validation { width: 15%; height: 40%; display: flex; @@ -135,7 +138,7 @@ padding: 0px 10px 0px 5px; } -.gallery-modal-info-tags { +.gallery-expanded-view-info-tags { width: 65%; /* This ensures the height has to be a minimum of 5.5vw, which fits two rows of tags. */ height: max(40%, 5.5vw); @@ -144,7 +147,7 @@ flex-direction: column; } -.gallery-modal-info-temporary { +.gallery-expanded-view-info-temporary { width: 35%; /* Reduce the 45% by however much the tags container's height was adjusted. */ height: calc(45% - (max(40%, 5.5vw) - 40%)); @@ -153,7 +156,7 @@ overflow: hidden; } -.gallery-modal-info-description { +.gallery-expanded-view-info-description { width: 65%; /* Reduce the 45% by however much the tags container's height was adjusted. */ height: calc(45% - (max(40%, 5.5vw) - 40%)); @@ -161,11 +164,11 @@ flex-direction: column; } -.gallery-modal-pano:hover .modal-validation-button { +.gallery-expanded-view-pano:hover .expanded-view-validation-button { opacity: 0.6; } -.modal-validation-button, .modal-validation-button-selected { +.expanded-view-validation-button, .expanded-view-validation-button-selected { opacity: 0; font-size: 1.25vw; font-weight: bold; @@ -175,12 +178,12 @@ color: #2d2a3f; } -.gallery-modal-pano:hover .modal-validation-button-selected { +.gallery-expanded-view-pano:hover .expanded-view-validation-button-selected { opacity: 1; background-color: gray; } -.modal-top-holder { +.expanded-view-top-holder { display: flex; align-content: space-between; margin-bottom: 5px; @@ -188,13 +191,13 @@ width: calc(100% - 105px); } -.modal-severity-circle { +.expanded-view-severity-circle { width: 1.5vw; height: 1.5vw; margin: 2px; } -#modal-current-severity { +#expanded-view-current-severity { border: 2px solid black; padding: 0px; background-color: black; diff --git a/public/javascripts/Gallery/src/Main.js b/public/javascripts/Gallery/src/Main.js index 6dc5d719d3..2860bc9ed5 100644 --- a/public/javascripts/Gallery/src/Main.js +++ b/public/javascripts/Gallery/src/Main.js @@ -13,7 +13,7 @@ function Main (params) { sg.scrollStatus = { stickySidebar: true, - stickyModal: true + stickyExpandedView: true }; let headerSidebarOffset = undefined; @@ -58,7 +58,7 @@ function Main (params) { sg.pageLoading = $('#page-loading'); sg.labelsNotFound = $('#labels-not-found'); - $('.gallery-modal').hide(); + $('.gallery-expanded-view').hide(); // Calculate offset between bottom of navbar and sidebar. headerSidebarOffset = @@ -77,10 +77,10 @@ function Main (params) { // sg.cardSortMenu = new CardSortMenu(sg.ui.cardSortMenu); sg.cardFilter = new CardFilter(sg.ui.cardFilter, sg.labelTypeMenu, sg.cityMenu, params.initialFilters); sg.cardContainer = new CardContainer(sg.ui.cardContainer, params.initialFilters); - sg.modal = sg.cardContainer.getModal; + sg.expandedView = sg.cardContainer.getExpandedView; // Initialize Keyboard to activate keyboard shortcuts. - sg.keyboard = new Keyboard(sg.modal()); + sg.keyboard = new Keyboard(sg.expandedView()); // Initialize data collection. sg.form = new Form(params.dataStoreUrl, params.beaconDataStoreUrl); @@ -131,18 +131,18 @@ function Main (params) { } } - // Handle modal stickiness. + // Handle expanded view stickiness. if (cardContainerBottomOffset < visibleWindowBottomOffset) { - if (sg.scrollStatus.stickyModal) { - // Prevent modal from going too low (i.e., when a user scrolls down fast). - $('.gallery-modal').css('top', cardContainerBottomOffset - $(window).height()); - sg.scrollStatus.stickyModal = false; + if (sg.scrollStatus.stickyExpandedView) { + // Prevent expanded view from going too low (i.e., when a user scrolls down fast). + $('.gallery-expanded-view').css('top', cardContainerBottomOffset - $(window).height()); + sg.scrollStatus.stickyExpandedView = false; } } else { - if (!sg.scrollStatus.stickyModal) sg.scrollStatus.stickyModal = true; + if (!sg.scrollStatus.stickyExpandedView) sg.scrollStatus.stickyExpandedView = true; - // Emulate the modal being "fixed". - $('.gallery-modal').css('top', $(window).scrollTop()); + // Emulate the expanded view being "fixed". + $('.gallery-expanded-view').css('top', $(window).scrollTop()); } } }); diff --git a/public/javascripts/Gallery/src/cards/Card.js b/public/javascripts/Gallery/src/cards/Card.js index 9f3ce91716..4bbeee02c0 100644 --- a/public/javascripts/Gallery/src/cards/Card.js +++ b/public/javascripts/Gallery/src/cards/Card.js @@ -2,11 +2,11 @@ * A Card module. * @param params properties of the associated label. * @param imageUrl google maps static image url for label. - * @param modal Modal object; used to update the expanded view when modifying a card. + * @param expandedView ExpandedView object; used to update the expanded view when modifying a card. * @returns {Card} * @constructor */ -function Card (params, imageUrl, modal) { +function Card (params, imageUrl, expandedView) { let self = this; // UI card element. @@ -146,7 +146,7 @@ function Card (params, imageUrl, modal) { imageHolder.appendChild(labelIcon); imageHolder.appendChild(panoImage); card.appendChild(cardInfo); - validationMenu = new ValidationMenu(self, $(imageHolder), properties, modal, false); + validationMenu = new ValidationMenu(self, $(imageHolder), properties, expandedView, false); } /** @@ -215,8 +215,8 @@ function Card (params, imageUrl, modal) { * @returns {self} */ function render(cardContainer) { - // If the card had transparent background from the modal being open earlier, remove transparency on rerender. - if (card.classList.contains('modal-background-card')) card.classList.remove('modal-background-card'); + // If the card had transparent background from the expanded view being open earlier, remove transparency on rerender. + if (card.classList.contains('expanded-view-background-card')) card.classList.remove('expanded-view-background-card'); cardContainer.append(card); renderTags(); } @@ -271,10 +271,16 @@ function Card (params, imageUrl, modal) { self.validationInfoDisplay.updateValCounts(properties.val_counts['Agree'], properties.val_counts['Disagree']); self.validationMenu.showValidationOnCard(newUserValidation); - // If this card matches the currently open modal, update the validation displays on the modal as well. - if (modal.getProperty('label_id') === properties.label_id) { - modal.validationInfoDisplay.updateValCounts(properties.val_counts['Agree'], properties.val_counts['Disagree']); - modal.validationMenu.showValidationOnExpandedView(newUserValidation); + /* + If this card matches the currently open expanded view, + update the validation displays on the expanded view as well. + */ + if (expandedView.getProperty('label_id') === properties.label_id) { + expandedView.validationInfoDisplay.updateValCounts( + properties.val_counts['Agree'], + properties.val_counts['Disagree'] + ); + expandedView.validationMenu.showValidationOnExpandedView(newUserValidation); } } } diff --git a/public/javascripts/Gallery/src/cards/CardContainer.js b/public/javascripts/Gallery/src/cards/CardContainer.js index 90f1ec27f8..09878e459f 100644 --- a/public/javascripts/Gallery/src/cards/CardContainer.js +++ b/public/javascripts/Gallery/src/cards/CardContainer.js @@ -41,7 +41,7 @@ function CardContainer(uiCardContainer, initialFilters) { let currentPage = 1; let lastPage = false; let pageNumberDisplay = null; - let modal; + let expandedView; // Map Cards to a CardBucket containing Cards of their label type. let cardsByType = { Assorted: new CardBucket(), @@ -87,11 +87,11 @@ function CardContainer(uiCardContainer, initialFilters) { lastPage = currentCards.getCards().length <= currentPage * cardsPerPage; render(); }); - // Creates the Modal object in the DOM element currently present. - modal = new Modal($('.gallery-modal')); - // Add the click event for opening the Modal when a card is clicked. + // Creates the ExpandedView object in the DOM element currently present. + expandedView = new ExpandedView($('.gallery-expanded-view')); + // Add the click event for opening the ExpandedView when a card is clicked. sg.ui.cardContainer.holder.on('click', '.static-gallery-image, .additional-count', (event) => { - $('.gallery-modal').attr('style', 'display: flex'); + $('.gallery-expanded-view').css('display', 'flex'); $('.grid-container').css("grid-template-columns", "1fr 5fr"); // If the user clicks on the image body in the card, just use the provided id. // Otherwise, the user will have clicked on an existing "+n" icon on the card, meaning we need to acquire @@ -100,8 +100,8 @@ function CardContainer(uiCardContainer, initialFilters) { let clickedImage = event.target.classList.contains("static-gallery-image") let cardId = clickedImage ? event.target.id : "label_id_" + event.target.closest(".card-tags").id; - // Sets/Updates the label being displayed in the expanded modal. - modal.updateCardIndex(findCardIndex(cardId)); + // Sets/Updates the label being displayed in the expanded view. + expandedView.updateCardIndex(findCardIndex(cardId)); }); } @@ -218,7 +218,7 @@ function CardContainer(uiCardContainer, initialFilters) { for (let i = 0; i < labels.length; i++) { let labelProp = labels[i]; if ("label" in labelProp && "imageUrl" in labelProp) { - card = new Card(labelProp.label, labelProp.imageUrl, modal); + card = new Card(labelProp.label, labelProp.imageUrl, expandedView); self.push(card); loadedLabelIds.add(card.getLabelId()); } @@ -356,8 +356,8 @@ function CardContainer(uiCardContainer, initialFilters) { // TODO: To help the loading icon show, we make the sidebar positioned relatively while we are loading on the page. // Otherwise, keep it fixed. This is hacky and needs a better fix. - // Close modal (if open) and empty cards from current page. - modal.closeModal(); + // Close expanded views (if open) and empty cards from current page. + expandedView.closeExpandedView(); clearCardContainer(uiCardContainer.holder); // Place user back at top of page. @@ -444,8 +444,8 @@ function CardContainer(uiCardContainer, initialFilters) { return lastPage; } - function getModal() { - return modal; + function getExpandedView() { + return expandedView; } self.fetchLabels = fetchLabels; @@ -462,7 +462,7 @@ function CardContainer(uiCardContainer, initialFilters) { self.getCardByIndex = getCardByIndex; self.getCurrentPage = getCurrentPage; self.getCurrentPageCards = getCurrentPageCards; - self.getModal = getModal; + self.getExpandedView = getExpandedView; _init(); return this; diff --git a/public/javascripts/Gallery/src/displays/SeverityDisplay.js b/public/javascripts/Gallery/src/displays/SeverityDisplay.js index f550b7118a..441c2a30a2 100644 --- a/public/javascripts/Gallery/src/displays/SeverityDisplay.js +++ b/public/javascripts/Gallery/src/displays/SeverityDisplay.js @@ -4,10 +4,10 @@ * * @param {HTMLElement} container The DOM element that contains the display * @param {Number} severity The severity to display - * @param {Boolean} isModal a toggle to determine if this SeverityDisplay is in a modal, or in a card + * @param {Boolean} isExpandedView a toggle to determine if this SeverityDisplay is in an expanded view, or in a card * @returns {SeverityDisplay} the generated object */ -function SeverityDisplay(container, severity, labelType, isModal=false) { +function SeverityDisplay(container, severity, labelType, isExpandedView= false) { let self = this; self.severity = severity; self.severityContainer = container; @@ -20,20 +20,19 @@ function SeverityDisplay(container, severity, labelType, isModal=false) { let circles = []; function _init() { - // Set the different classes and ids depending on whether the severity display is in a Modal or in a card. - let severityCircleClass = isModal ? 'modal-severity-circle' : 'severity-circle'; - let selectedCircleID = /*isModal ? 'modal-current-severity' : */'current-severity'; + // Set the different classes and ids depending on whether the severity display is in expanded view or in a card. + let severityCircleClass = isExpandedView ? 'expanded-view-severity-circle' : 'severity-circle'; let holder = document.createElement('div'); holder.className = 'label-severity-content'; let title = document.createElement('div'); title.className = 'label-severity-header'; - if (isModal) { + if (isExpandedView) { // Add bold weight. Find better way to do this. - title.classList.add('modal-severity-header'); + title.classList.add('expanded-view-severity-header'); // Centers tooltip. - holder.classList.add('modal-severity-content') + holder.classList.add('expanded-view-severity-content') } title.innerText = `${i18next.t("severity")}`; @@ -50,7 +49,7 @@ function SeverityDisplay(container, severity, labelType, isModal=false) { let $severityCircle; - if (isModal) { + if (isExpandedView) { $severityCircle = $(`.severity-filter-image.template.severity-${i}`).clone().removeClass('template'); } else { $severityCircle = $('
'); @@ -59,21 +58,21 @@ function SeverityDisplay(container, severity, labelType, isModal=false) { if (unsupported || severity == null) { // Create grayed out empty circles/smileys. - if (isModal) { - $severityCircle.addClass('modal-no-severity'); + if (isExpandedView) { + $severityCircle.addClass('expanded-view-no-severity'); } else { $severityCircle.addClass('no-severity-circle'); } circles.push($severityCircle); } else { // Create severity circle elements. - if (isModal) { + if (isExpandedView) { if (i <= severity) { // Filled in smileys. $severityCircle.addClass('highlight'); } } else { if (i <= severity) { // Fills in circles. - $severityCircle.attr('id', selectedCircleID); + $severityCircle.attr('id', 'current-severity'); } } } diff --git a/public/javascripts/Gallery/src/displays/TagDisplay.js b/public/javascripts/Gallery/src/displays/TagDisplay.js index e1292b2b01..14fc6f8f79 100644 --- a/public/javascripts/Gallery/src/displays/TagDisplay.js +++ b/public/javascripts/Gallery/src/displays/TagDisplay.js @@ -3,10 +3,10 @@ * * @param {HTMLElement} container The DOM element to contain the label information * @param {String[]} tags The tags to display - * @param {Boolean} isModal a boolean switch used if the tags are displayed in a Modal or in a Card + * @param {Boolean} isExpandedView a boolean switch used if the tags are displayed in expanded view or in a Card * @returns {TagDisplay} The created object */ -function TagDisplay(container, tags, isModal=false) { +function TagDisplay(container, tags, isExpandedView=false) { let self = this; const popoverTemplate = '`; - const modalOverlayHTML = ` + const expandedViewOverlayHTML = ` `; let overlay = $(cardOverlayHTML); @@ -64,7 +70,7 @@ function ValidationMenu(refCard, gsvImage, cardProperties, modal, onExpandedView // Adds onClick functions for the validation buttons and keybindings for validation actions. function _init() { if (onExpandedView) { - overlay = $(modalOverlayHTML) + overlay = $(expandedViewOverlayHTML) } validationButtons = { @@ -110,9 +116,9 @@ function ValidationMenu(refCard, gsvImage, cardProperties, modal, onExpandedView */ function validateOnClickOrKeyPress(newValKey, thumbsClick, keyboardShortcut) { return function(e) { - // If we aren't just doing what's already been selected, we have the card properties, and modal is open. - // The modal being open is only necessary if this is the validation menu for the expanded view. - if (currSelected !== newValKey && currCardProperties && (!onExpandedView || modal.open)) { + // If we aren't just doing what's already been selected, we have the card properties, and expanded view is open. + // The expanded view being open is only necessary if this is the validation menu for the expanded view. + if (currSelected !== newValKey && currCardProperties && (!onExpandedView || expandedView.open)) { let validationOption = classToValidationOption[newValKey]; // Change the look of the card/expanded view to match the new validation. @@ -157,12 +163,12 @@ function ValidationMenu(refCard, gsvImage, cardProperties, modal, onExpandedView // If the label had already been validated differently, remove the visual effects from the older validation. if (currSelected && currSelected !== validationClass) { - validationButtons[currSelected].attr('class', 'modal-validation-button'); + validationButtons[currSelected].attr('class', 'expanded-view-validation-button'); } currSelected = validationClass; // Add the visual effects from the new validation. - validationButtons[validationClass].attr('class', 'modal-validation-button-selected'); + validationButtons[validationClass].attr('class', 'expanded-view-validation-button-selected'); gsvImage.css('border-color', validationOptionToColor[validationOption]); gsvImage.css('background-color', validationOptionToColor[validationOption]); } @@ -175,7 +181,7 @@ function ValidationMenu(refCard, gsvImage, cardProperties, modal, onExpandedView currSelected = null; gsvImage.css('border-color', 'transparent'); gsvImage.css('background-color', 'transparent'); - Object.values(validationButtons).forEach(valButton => valButton.attr('class', 'modal-validation-button')); + Object.values(validationButtons).forEach(valButton => valButton.attr('class', 'expanded-view-validation-button')); } /** @@ -226,14 +232,14 @@ function ValidationMenu(refCard, gsvImage, cardProperties, modal, onExpandedView data.canvas_x = Math.round(labelIcon.offsetLeft + labelIcon.getBoundingClientRect().width / 2); data.canvas_y = Math.round(labelIcon.offsetTop + labelIcon.getBoundingClientRect().height / 2); } else { - let currPov = modal.pano.panorama.getPov(); + let currPov = expandedView.pano.panorama.getPov(); data.heading = currPov.heading; data.pitch = currPov.pitch; data.zoom = currPov.zoom; // For some reason, the usual povToPixel_ route for finding the canvas_x/y isn't working in Gallery, so we // are using the actual left/top values for the HTML element instead. - let labelIcon = $(modal.pano.labelMarker.marker.marker_); + let labelIcon = $(expandedView.pano.labelMarker.marker.marker_); let labelIconRadius = labelIcon.outerWidth() / 2; let labelCanvasX = labelIcon.position().left + labelIconRadius; let labelCanvasY = labelIcon.position().top + labelIconRadius; @@ -280,7 +286,7 @@ function ValidationMenu(refCard, gsvImage, cardProperties, modal, onExpandedView /** * Updates the reference card. This is only used for the expanded view, whose reference card necessarily changes. * - * @param {Card} newCard The new card the Modal references. + * @param {Card} newCard The new card the ExpandedView references. */ function updateReferenceCard(newCard) { referenceCard = newCard; @@ -297,7 +303,7 @@ function ValidationMenu(refCard, gsvImage, cardProperties, modal, onExpandedView self.updateReferenceCard = updateReferenceCard; self.showValidationOnCard = showValidationOnCard; self.showValidationOnExpandedView = showValidationOnExpandedView; - self.addModalValInfoOnClicks = addValidationInfoOnClicks; + self.addExpandedViewValInfoOnClicks = addValidationInfoOnClicks; self.validateOnClickOrKeyPress = validateOnClickOrKeyPress; _init(); diff --git a/public/javascripts/SVLabel/src/SVLabel/keyboard/Keyboard.js b/public/javascripts/SVLabel/src/SVLabel/keyboard/Keyboard.js index 6fa50c2f0f..3434beeef3 100644 --- a/public/javascripts/SVLabel/src/SVLabel/keyboard/Keyboard.js +++ b/public/javascripts/SVLabel/src/SVLabel/keyboard/Keyboard.js @@ -94,11 +94,11 @@ function Keyboard (svl, canvas, contextMenu, googleMap, ribbon, zoomControl) { /** * Change the heading of the current panorama point of view by a particular degree value. - * TODO Change the method name so it is more descriptive. + * * @param degree */ - this._rotatePov = function (degree){ - if (!svl.map.getStatus("disablePanning")){ + this._rotatePovByDegree = function(degree) { + if (!svl.map.getStatus("disablePanning")) { svl.contextMenu.hide(); // Panning hide label tag and delete icon. var labels = svl.labelContainer.getCanvasLabels(), @@ -116,7 +116,7 @@ function Keyboard (svl, canvas, contextMenu, googleMap, ribbon, zoomControl) { pitch: pitch, zoom: zoom }); - svl.panorama.setPov({heading: pov.heading, pitch: pov.pitch, zoom: pov.zoom}); + svl.map.setPov({heading: pov.heading, pitch: pov.pitch, zoom: pov.zoom}); } }; @@ -157,10 +157,10 @@ function Keyboard (svl, canvas, contextMenu, googleMap, ribbon, zoomControl) { } else { switch (e.keyCode) { case 37: // "ArrowLeft" - self._rotatePov(-2); + self._rotatePovByDegree(-2); break; case 39: // "ArrowRight" - self._rotatePov(2); + self._rotatePovByDegree(2); break; } if (!status.disableMovement) { diff --git a/public/javascripts/SVLabel/src/SVLabel/navigation/MapService.js b/public/javascripts/SVLabel/src/SVLabel/navigation/MapService.js index 30c50e24a8..4fe242addd 100644 --- a/public/javascripts/SVLabel/src/SVLabel/navigation/MapService.js +++ b/public/javascripts/SVLabel/src/SVLabel/navigation/MapService.js @@ -458,12 +458,13 @@ function MapService (canvas, neighborhoodModel, uiMap, params) { if ("panorama" in svl) { var pov = svl.panorama.getPov(); - // Pov can be less than 0. So adjust it. + // Make sure that zoom is set to an integer. + pov.zoom = Math.round(pov.zoom); + + // Adjust heading to be between 0 and 360 instead of -180 to 180. while (pov.heading < 0) { pov.heading += 360; } - - // Pov can be more than 360. Adjust it. while (pov.heading > 360) { pov.heading -= 360; } @@ -1212,7 +1213,7 @@ function MapService (canvas, neighborhoodModel, uiMap, params) { */ function updatePov(dx, dy) { if (svl.panorama) { - var pov = svl.panorama.getPov(); + var pov = getPov(); var alpha = 0.25; pov.heading -= alpha * dx; pov.pitch += alpha * dy; @@ -1251,9 +1252,12 @@ function MapService (canvas, neighborhoodModel, uiMap, params) { */ function setPov(pov, durationMs, callback) { if (('panorama' in svl) && svl.panorama) { - var currentPov = svl.panorama.getPov(); + var currentPov = getPov(); var interval; + // Make sure that zoom is set to an integer value. + if (pov.zoom) pov.zoom = Math.round(pov.zoom); + // Pov restriction. restrictViewPort(pov); @@ -1445,7 +1449,7 @@ function MapService (canvas, neighborhoodModel, uiMap, params) { } function setZoom(zoomLevel) { - svl.panorama.setZoom(zoomLevel); + svl.panorama.setZoom(Math.round(zoomLevel)); } // Set a flag that triggers the POV being reset into the route direction upon the position changing. @@ -1455,9 +1459,9 @@ function MapService (canvas, neighborhoodModel, uiMap, params) { // Set the POV in the same direction as the route. function setPovToRouteDirection(durationMs) { - var pov = svl.panorama.getPov(); + var pov = getPov(); var newPov = { - heading: parseInt(svl.compass.getTargetAngle() + 360, 10) % 360, + heading: Math.round(svl.compass.getTargetAngle() + 360) % 360, pitch: pov.pitch, zoom: pov.zoom }