New Panoramax Features

css/60_photos.css

@@ -12,6 +12,11 @@ li.list-item-photos.active:after {
     left: 0;
 }
 
+.disabled-panel {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
 /* photo viewer div */
 .photoviewer {
     position: relative;
@@ -385,6 +390,7 @@ label.panoramax-hd {
 
 .slider-wrap {
     display: inline-block;  
+    width: 100%;
 }
 
 .year-datalist {
@@ -393,7 +399,17 @@ label.panoramax-hd {
 }
 
 .list-option-date-slider{
-    direction: rtl
+    direction: rtl;
+    width: 100%;
+}
+
+.yearSliderSpan{
+    padding: 2px;
+}
+
+
+.list-item-date-slider label{
+    display: block !important;
 }
 
 
@@ -520,6 +536,16 @@ label.streetside-hires {
     transform-origin: 0 0;
 }
 
+.panoramax-wrapper .photo-attribution a:active {
+    color: #ff6f00;
+}
+
+@media (hover: hover) {
+    .panoramax-wrapper .photo-attribution a:hover {
+        color: #ff6f00;
+    }
+}
+
 .photo-wrapper {
     position: relative;
     background-color: #000;
@@ -535,9 +561,10 @@ label.streetside-hires {
 }
 
 .photoviewer .plane-frame > img.plane-photo {
-    width: auto;
+    width: 100%;
     height: 100%;
-    transform-origin: 0 0;
+    overflow: hidden;
+    object-fit: cover;
 }
 
 /* photo-controls (step forward, back, rotate) */

data/core.yaml

@@ -888,6 +888,12 @@ en:
     username_filter:
       title: "Username"
       tooltip: "Show only photos by this user"
+    age_slider_filter:
+      title: "Year Slider"
+      tooltip: "Select oldest photo year"
+      one_year: "Last year"
+      three_year: "Three years"
+      all: "Show all"
   feature:
     points:
       description: Points
@@ -2379,6 +2385,8 @@ en:
       way_selected:
         title: "With way selected"
         child: "Select child nodes"
+      enable:
+        streetlevel: "Toggle streetlevel photo view"
     editing:
       title: "Editing"
       drawing:

data/shortcuts.json

@@ -97,6 +97,11 @@
           {
             "shortcuts": ["shortcuts.toggle.key", "?"],
             "text": "shortcuts.browsing.help.keyboard"
+          },
+          {
+            "modifiers": ["⇧"],
+            "shortcuts": ["P"],
+            "text": "shortcuts.browsing.enable.streetlevel"
           }
         ]
       },

modules/renderer/photos.js

@@ -13,6 +13,7 @@ export function rendererPhotos(context) {
     var _dateFilters = ['fromDate', 'toDate'];
     var _fromDate;
     var _toDate;
+    var _yearSliderValue;
     var _usernames;
 
     function photos() {}
@@ -34,22 +35,44 @@ export function rendererPhotos(context) {
         window.location.replace('#' + utilQsString(hash, true));
     }
 
+    /**
+     * @returns The layer ID
+     */
     photos.overlayLayerIDs = function() {
         return _layerIDs;
     };
 
+    /**
+     * @returns All the photo types
+     */
     photos.allPhotoTypes = function() {
         return _allPhotoTypes;
     };
 
+    /**
+     * @returns The date filters value
+     */
     photos.dateFilters = function() {
         return _dateFilters;
     };
 
+    /**
+     * @returns The year date filter value
+     */
+    photos.yearSliderValue = function() {
+        return _yearSliderValue;
+    };
+
     photos.dateFilterValue = function(val) {
         return val === _dateFilters[0] ? _fromDate : _toDate;
     };
 
+    /**
+     * Sets the date filter (min/max date)
+     * @param {*} type Either 'fromDate' or 'toDate'
+     * @param {*} val The actual Date
+     * @param {boolean} updateUrl Whether the URL should update or not
+     */
     photos.setDateFilter = function(type, val, updateUrl) {
         // validate the date
         var date = val && new Date(val);
@@ -80,6 +103,11 @@ export function rendererPhotos(context) {
         }
     };
 
+    /**
+     * Sets the username filter
+     * @param {string} val The username
+     * @param {boolean} updateUrl Whether the URL should update or not
+     */
     photos.setUsernameFilter = function(val, updateUrl) {
         if (val && typeof val === 'string') val = val.replace(/;/g, ',').split(',');
         if (val) {
@@ -99,6 +127,64 @@ export function rendererPhotos(context) {
         }
     };
 
+    /**
+     * Util function to set the slider date filter
+     * @param {*} year The slider value
+     * @param {boolean} updateUrl whether the URL should update or not
+     */
+    photos.setFromYearFilter = function(year, updateUrl){
+
+        _yearSliderValue = year;
+
+        if (year !== '5') {
+            let days = 365 * year;
+            var fromDate = new Date();
+            fromDate.setDate(fromDate.getDate() - days);
+            var dd = String(fromDate.getDate()).padStart(2, '0');
+            var mm = String(fromDate.getMonth() + 1).padStart(2, '0');
+            var yyyy = fromDate.getFullYear();
+
+            fromDate = mm + '/' + dd + '/' + yyyy;
+            photos.setDateFilter('fromDate', fromDate, updateUrl);
+        } else {
+            photos.setDateFilter('fromDate', null, updateUrl);
+        }
+
+        if (updateUrl) {
+            setUrlFilterValue('year_slider', year);
+        }
+    };
+
+    /**
+     * Util function to set the slider date filter
+     * @param {*} val Either 'panoramic' or 'flat'
+     * @param {boolean} updateUrl Whether the URL should update or not
+     */
+    photos.togglePhotoType = function(val, updateUrl) {
+        var index = _shownPhotoTypes.indexOf(val);
+        if (index !== -1) {
+            _shownPhotoTypes.splice(index, 1);
+        } else {
+            _shownPhotoTypes.push(val);
+        }
+
+        if (updateUrl) {
+            var hashString;
+            if (_shownPhotoTypes) {
+                hashString = _shownPhotoTypes.join(',');
+            }
+            setUrlFilterValue('photo_type', hashString);
+        }
+
+        dispatch.call('change', this);
+        return photos;
+    };
+
+    /**
+     * Updates the URL with new values
+     * @param {*} val value to save
+     * @param {string} property Name of the value
+     */
     function setUrlFilterValue(property, val) {
         if (!window.mocha) {
             var hash = utilStringQs(window.location.hash);
@@ -118,15 +204,32 @@ export function rendererPhotos(context) {
         return layer && layer.supported() && layer.enabled();
     }
 
+    /**
+     * @returns If the Date filter should be drawn
+     */
     photos.shouldFilterByDate = function() {
-        return showsLayer('mapillary') || showsLayer('kartaview') || showsLayer('streetside') || showsLayer('vegbilder') || showsLayer('panoramax');
+        return false;
     };
 
+    /**
+     * @returns If the Date Slider filter should be drawn
+     */
+    photos.shouldFilterDateBySlider = function(){
+        return showsLayer('mapillary') || showsLayer('kartaview') || showsLayer('mapilio')
+        || showsLayer('streetside') || showsLayer('vegbilder') || showsLayer('panoramax');
+    };
+
+    /**
+     * @returns If the Photo Type filter should be drawn
+     */
     photos.shouldFilterByPhotoType = function() {
         return showsLayer('mapillary') ||
             (showsLayer('streetside') && showsLayer('kartaview')) || showsLayer('vegbilder') || showsLayer('panoramax');
     };
 
+    /**
+     * @returns If the Username filter should be drawn
+     */
     photos.shouldFilterByUsername = function() {
         return !showsLayer('mapillary') && showsLayer('kartaview') && !showsLayer('streetside') || showsLayer('panoramax');
     };
@@ -153,32 +256,34 @@ export function rendererPhotos(context) {
         return _toDate;
     };
 
-    photos.togglePhotoType = function(val) {
-        var index = _shownPhotoTypes.indexOf(val);
-        if (index !== -1) {
-            _shownPhotoTypes.splice(index, 1);
-        } else {
-            _shownPhotoTypes.push(val);
-        }
-        dispatch.call('change', this);
-        return photos;
-    };
-
     photos.usernames = function() {
         return _usernames;
     };
 
+    /**
+     * Inits the streetlevel layer given the saved values in the URL
+     */
     photos.init = function() {
         var hash = utilStringQs(window.location.hash);
+        var parts;
         if (hash.photo_dates) {
             // expect format like `photo_dates=2019-01-01_2020-12-31`, but allow a couple different separators
-            var parts = /^(.*)[–_](.*)$/g.exec(hash.photo_dates.trim());
+            parts = /^(.*)[–_](.*)$/g.exec(hash.photo_dates.trim());
             this.setDateFilter('fromDate', parts && parts.length >= 2 && parts[1], false);
             this.setDateFilter('toDate', parts && parts.length >= 3 && parts[2], false);
         }
+        if (hash.year_slider){
+            this.setFromYearFilter(hash.year_slider, false);
+        }
         if (hash.photo_username) {
             this.setUsernameFilter(hash.photo_username, false);
         }
+        if (hash.photo_type) {
+            parts = hash.photo_type.replace(/;/g, ',').split(',');
+            _allPhotoTypes.forEach(d => {
+                if (!parts.includes(d)) this.togglePhotoType(d, false);
+            });
+        }
         if (hash.photo_overlay) {
             // support enabling photo layers by default via a URL parameter, e.g. `photo_overlay=kartaview;mapillary;streetside`
             var hashOverlayIDs = hash.photo_overlay.replace(/;/g, ',').split(',');

modules/services/pannellum_photo.js

@@ -19,6 +19,7 @@ export default {
       .attr('class', 'photo-frame pannellum-frame')
       .attr('id', 'ideditor-pannellum-viewer')
       .classed('hide', true)
+      .on('mousedown', function(e) { e.stopPropagation(); })
       .on('keydown', function(e) { e.stopPropagation(); });
 
     if (!window.pannellum) {
@@ -91,6 +92,10 @@ export default {
     ]);
   },
 
+  /**
+   * Shows the photo frame if hidden
+   * @param {*} context the HTML wrap of the frame
+   */
   showPhotoFrame: function (context) {
     const isHidden = context.selectAll('.photo-frame.pannellum-frame.hide').size();
 
@@ -105,8 +110,12 @@ export default {
     }
 
     return this;
-    },
+  },
 
+  /**
+   * Hides the photo frame if shown
+   * @param {*} context the HTML wrap of the frame
+   */
   hidePhotoFrame: function (viewerContext) {
     viewerContext
       .select('photo-frame.pannellum-frame')
@@ -115,6 +124,11 @@ export default {
     return this;
     },
 
+  /**
+   * Renders an image inside the frame
+   * @param {*} data the image data, it should contain an image_path attribute, a link to the actual image.
+   * @param {boolean} keepOrientation if true, HFOV, pitch and yaw will be kept between images
+   */
   selectPhoto: function (data, keepOrientation) {
     const {key} = data;
     if ( !(key in _currScenes) ) {
@@ -135,12 +149,14 @@ export default {
 
     let yaw = 0;
     let pitch = 0;
+    let hfov = 0;
 
     if (keepOrientation) {
       yaw = this.getYaw();
-      pitch = _pannellumViewer.getPitch();
+      pitch = this.getPitch();
+      hfov = this.getHfov();
     }
-    _pannellumViewer.loadScene(key, pitch, yaw);
+    _pannellumViewer.loadScene(key, pitch, yaw, hfov);
     dispatch.call('viewerChanged');
 
     if (_currScenes.length > 3) {
@@ -155,6 +171,14 @@ export default {
 
   getYaw: function() {
     return _pannellumViewer.getYaw();
+  },
+
+  getPitch: function() {
+    return _pannellumViewer.getPitch();
+  },
+
+  getHfov: function() {
+    return _pannellumViewer.getHfov();
   }
 
 };