UNPKG

photo-sphere-viewer

Version:

A JavaScript library to display Photo Sphere panoramas

159 lines (150 loc) 4.6 kB
import { utils } from '../..'; import icon from './pin-list.svg'; /** * @summary Available events * @enum {string} * @memberof PSV.plugins.MarkersPlugin * @constant */ export const EVENTS = { /** * @event marker-visibility * @memberof PSV.plugins.MarkersPlugin * @summary Triggered when the visibility of a marker changes * @param {PSV.plugins.MarkersPlugin.Marker} marker * @param {boolean} visible */ MARKER_VISIBILITY : 'marker-visibility', /** * @event goto-marker-done * @memberof PSV.plugins.MarkersPlugin * @summary Triggered when the animation to a marker is done * @param {PSV.plugins.MarkersPlugin.Marker} marker */ GOTO_MARKER_DONE : 'goto-marker-done', /** * @event leave-marker * @memberof PSV.plugins.MarkersPlugin * @summary Triggered when the user puts the cursor away from a marker * @param {PSV.plugins.MarkersPlugin.Marker} marker */ LEAVE_MARKER : 'leave-marker', /** * @event over-marker * @memberof PSV.plugins.MarkersPlugin * @summary Triggered when the user puts the cursor hover a marker * @param {PSV.plugins.MarkersPlugin.Marker} marker */ OVER_MARKER : 'over-marker', /** * @event filter:render-markers-list * @memberof PSV.plugins.MarkersPlugin * @summary Used to alter the list of markers displayed on the side-panel * @param {PSV.plugins.MarkersPlugin.Marker[]} markers * @returns {PSV.plugins.MarkersPlugin.Marker[]} */ RENDER_MARKERS_LIST: 'render-markers-list', /** * @event select-marker * @memberof PSV.plugins.MarkersPlugin * @summary Triggered when the user clicks on a marker. The marker can be retrieved from outside the event handler * with {@link PSV.plugins.MarkersPlugin.getCurrentMarker} * @param {PSV.plugins.MarkersPlugin.Marker} marker * @param {PSV.plugins.MarkersPlugin.SelectMarkerData} data */ SELECT_MARKER : 'select-marker', /** * @event select-marker-list * @memberof PSV.plugins.MarkersPlugin * @summary Triggered when a marker is selected from the side panel * @param {PSV.plugins.MarkersPlugin.Marker} marker */ SELECT_MARKER_LIST : 'select-marker-list', /** * @event unselect-marker * @memberof PSV.plugins.MarkersPlugin * @summary Triggered when a marker was selected and the user clicks elsewhere * @param {PSV.plugins.MarkersPlugin.Marker} marker */ UNSELECT_MARKER : 'unselect-marker', /** * @event hide-markers * @memberof PSV.plugins.MarkersPlugin * @summary Triggered when the markers are hidden */ HIDE_MARKERS : 'hide-markers', /** * @event set-marker * @memberof PSV.plugins.MarkersPlugin * @summary Triggered when the list of markers changes * @param {PSV.plugins.MarkersPlugin.Marker[]} markers */ SET_MARKERS : 'set-markers', /** * @event show-markers * @memberof PSV.plugins.MarkersPlugin * @summary Triggered when the markers are shown */ SHOW_MARKERS : 'show-markers', }; /** * @summary Types of tooltip events * @memberOf PSV.plugins.MarkersPlugin * @enum {string} * @constant * @private */ export const MARKER_TOOLTIP_TRIGGER = { click: 'click', hover: 'hover', }; /** * @summary Namespace for SVG creation * @type {string} * @constant * @private */ export const SVG_NS = 'http://www.w3.org/2000/svg'; /** * @summary Property name added to marker elements * @type {string} * @constant * @private */ export const MARKER_DATA = 'psvMarker'; /** * @summary Panel identifier for marker content * @type {string} * @constant * @private */ export const ID_PANEL_MARKER = 'marker'; /** * @summary Panel identifier for markers list * @type {string} * @constant * @private */ export const ID_PANEL_MARKERS_LIST = 'markersList'; const MARKER_DATA_KEY = utils.dasherize(MARKER_DATA); /** * @summary Markers list template * @param {PSV.plugins.MarkersPlugin.Marker[]} markers * @param {string} title * @returns {string} * @constant * @private */ export const MARKERS_LIST_TEMPLATE = (markers, title) => ` <div class="psv-panel-menu psv-panel-menu--stripped"> <h1 class="psv-panel-menu-title">${icon} ${title}</h1> <ul class="psv-panel-menu-list"> ${markers.map(marker => ` <li data-${MARKER_DATA_KEY}="${marker.config.id}" class="psv-panel-menu-item" tabindex="0"> ${marker.type === 'image' ? `<span class="psv-panel-menu-item-icon"><img src="${marker.config.image}"/></span>` : ''} <span class="psv-panel-menu-item-label">${marker.getListContent()}</span> </li> `).join('')} </ul> </div> `;