Skip to content

Commit

Permalink
Use templating for markers list with doT.s
Browse files Browse the repository at this point in the history
  • Loading branch information
mistic100 committed Apr 3, 2016
1 parent c994e6b commit b6311d4
Show file tree
Hide file tree
Showing 8 changed files with 140 additions and 127 deletions.
3 changes: 2 additions & 1 deletion .jshintrc
@@ -1,3 +1,4 @@
{
"loopfunc": true
"loopfunc": true,
"multistr": true
}
1 change: 0 additions & 1 deletion Gruntfile.js
Expand Up @@ -8,7 +8,6 @@ module.exports = function(grunt) {

// some classes have to be executed before other
var files_in_order = grunt.file.expand([
'src/js/PSVUtils.js',
'src/js/PhotoSphereViewer.js',
'src/js/components/PSVComponent.js',
'src/js/buttons/PSVNavBarButton.js',
Expand Down
3 changes: 2 additions & 1 deletion bower.json
Expand Up @@ -22,7 +22,8 @@
"dependencies": {
"three.js": ">= 0.0.67",
"D.js": "~0.7.3",
"uevent": "~1.0.0"
"uevent": "~1.0.0",
"doT": "master"
},
"keywords": [
"photosphere",
Expand Down
1 change: 1 addition & 0 deletions example/index.htm
Expand Up @@ -32,6 +32,7 @@
<script src="../bower_components/three.js/three.min.js"></script>
<script src="../bower_components/D.js/lib/D.min.js"></script>
<script src="../bower_components/uevent/uevent.min.js"></script>
<script src="../bower_components/doT/doT.min.js"></script>
<script src="../bower_components/threejs-examples/examples/js/renderers/CanvasRenderer.js"></script>
<script src="../bower_components/threejs-examples/examples/js/renderers/Projector.js"></script>
<script src="../bower_components/threejs-examples/examples/js/postprocessing/EffectComposer.js"></script>
Expand Down
8 changes: 4 additions & 4 deletions src/js/.wrapper.js
@@ -1,14 +1,14 @@
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define(['three', 'D.js', 'uevent'], factory);
define(['three', 'D.js', 'uevent', 'doT'], factory);
}
else if (typeof module === 'object' && module.exports) {
module.exports = factory(require('three'), require('d.js'), require('uevent'));
module.exports = factory(require('three'), require('d.js'), require('uevent'), require('dot'));
}
else {
root.PhotoSphereViewer = factory(root.THREE, root.D, root.uEvent);
root.PhotoSphereViewer = factory(root.THREE, root.D, root.uEvent, root.doT);
}
}(this, function(THREE, D, uEvent) {
}(this, function(THREE, D, uEvent, doT) {
"use strict";

@@js
Expand Down
115 changes: 115 additions & 0 deletions src/js/PhotoSphereViewer.defaults.js
@@ -0,0 +1,115 @@
/**
* Number of pixels bellow which a mouse move will be considered as a click
* @type (int)
*/
PhotoSphereViewer.MOVE_THRESHOLD = 4;

/**
* Time size of the mouse position history used to compute inertia
* @type (int)
*/
PhotoSphereViewer.INERTIA_WINDOW = 300;

/**
* SVG icons sources
* @type (Object)
*/
PhotoSphereViewer.ICONS = {};

/**
* System properties
* @type (Object)
*/
PhotoSphereViewer.SYSTEM = {
loaded: false,
pixelRatio: 1,
isWebGLSupported: false,
isCanvasSupported: false,
deviceOrientationSupported: null,
maxTextureWidth: 0,
mouseWheelEvent: null,
fullscreenEvent: null
};

/**
* PhotoSphereViewer defaults
* @type (Object)
*/
PhotoSphereViewer.DEFAULTS = {
panorama: null,
container: null,
caption: null,
autoload: true,
usexmpdata: true,
pano_data: null,
webgl: true,
min_fov: 30,
max_fov: 90,
default_fov: null,
default_long: 0,
default_lat: 0,
longitude_range: null,
latitude_range: null,
move_speed: 1,
time_anim: 2000,
anim_speed: '2rpm',
anim_lat: null,
navbar: [
'autorotate',
'zoom',
'download',
'markers',
'caption',
'gyroscope',
'fullscreen'
],
tooltip: {
offset: 5,
arrow_size: 7,
delay: 100
},
lang: {
autorotate: 'Automatic rotation',
zoom: 'Zoom',
zoomOut: 'Zoom out',
zoomIn: 'Zoom in',
download: 'Download',
fullscreen: 'Fullscreen',
markers: 'Markers',
gyroscope: 'Gyroscope'
},
mousewheel: true,
mousemove: true,
gyroscope: false,
move_inertia: true,
click_event_on_marker: true,
transition: {
duration: 1500,
loader: true,
blur: false
},
loading_img: null,
loading_txt: 'Loading...',
size: null,
templates: {},
markers: []
};

/**
* doT.js templates
* @type (Object)
*/
PhotoSphereViewer.TEMPLATES = {
markersList: '\
<div class="psv-markers-list"> \
<h1>{{= it.config.lang.markers }}</h1> \
<ul> \
{{~ it.markers: marker }} \
<li data-psv-marker="{{= marker.id }}" class="{{= marker.className }}"> \
{{? marker.image }}<img class="marker-image" src="{{= marker.image }}"/>{{?}} \
<p class="marker-name">{{? marker.tooltip }}{{= marker.tooltip.content }}{{?? marker.html }}{{= marker.html }}{{??}}{{= marker.id }}{{?}}</p> \
</li> \
{{~}} \
</ul> \
</div>'
};
108 changes: 10 additions & 98 deletions src/js/PhotoSphereViewer.js
Expand Up @@ -153,6 +153,16 @@ function PhotoSphereViewer(options) {
}
};

// init templates
Object.keys(PhotoSphereViewer.TEMPLATES).forEach(function(tpl) {
if (!this.config.templates[tpl]) {
this.config.templates[tpl] = PhotoSphereViewer.TEMPLATES[tpl];
}
if (typeof this.config.templates[tpl] == 'string') {
this.config.templates[tpl] = doT.template(this.config.templates[tpl]);
}
}, this);

// create actual container
this.container = document.createElement('div');
this.container.classList.add('psv-container');
Expand Down Expand Up @@ -215,102 +225,4 @@ function PhotoSphereViewer(options) {
}.bind(this));
}

/**
* Number of pixels bellow which a mouse move will be considered as a click
* @type (int)
*/
PhotoSphereViewer.MOVE_THRESHOLD = 4;

/**
* Time size of the mouse position history used to compute inertia
* @type (int)
*/
PhotoSphereViewer.INERTIA_WINDOW = 300;

/**
* SVG icons sources
* @type (Object)
*/
PhotoSphereViewer.ICONS = {};

/**
* System properties
* @type (Object)
*/
PhotoSphereViewer.SYSTEM = {
loaded: false,
pixelRatio: 1,
isWebGLSupported: false,
isCanvasSupported: false,
deviceOrientationSupported: null,
maxTextureWidth: 0,
mouseWheelEvent: null,
fullscreenEvent: null
};

/**
* PhotoSphereViewer defaults
* @type (Object)
*/
PhotoSphereViewer.DEFAULTS = {
panorama: null,
container: null,
caption: null,
autoload: true,
usexmpdata: true,
pano_data: null,
webgl: true,
min_fov: 30,
max_fov: 90,
default_fov: null,
default_long: 0,
default_lat: 0,
longitude_range: null,
latitude_range: null,
move_speed: 1,
time_anim: 2000,
anim_speed: '2rpm',
anim_lat: null,
navbar: [
'autorotate',
'zoom',
'download',
'markers',
'caption',
'gyroscope',
'fullscreen'
],
tooltip: {
offset: 5,
arrow_size: 7,
delay: 100
},
lang: {
autorotate: 'Automatic rotation',
zoom: 'Zoom',
zoomOut: 'Zoom out',
zoomIn: 'Zoom in',
download: 'Download',
fullscreen: 'Fullscreen',
markers: 'Markers',
gyroscope: 'Gyroscope'
},
mousewheel: true,
mousemove: true,
gyroscope: false,
move_inertia: true,
click_event_on_marker: true,
transition: {
duration: 1500,
loader: true,
blur: false
},
loading_img: null,
loading_txt: 'Loading...',
size: null,
markers: []
};

uEvent.mixin(PhotoSphereViewer);

PhotoSphereViewer.Utils = PSVUtils;
28 changes: 6 additions & 22 deletions src/js/buttons/PSVNavBarMarkersButton.js
Expand Up @@ -83,31 +83,15 @@ PSVNavBarMarkersButton.prototype.toggleMarkers = function() {
* @return (void)
*/
PSVNavBarMarkersButton.prototype.showMarkers = function() {
var html = '<div class="psv-markers-list">' +
'<h1>' + this.psv.config.lang.markers + '</h1>' +
'<ul>';

var markers = [];
for (var id in this.psv.hud.markers) {
var marker = this.psv.hud.markers[id];

var name = marker.id;
if (marker.html) {
name = marker.html;
}
else if (marker.tooltip) {
name = typeof marker.tooltip === 'string' ? marker.tooltip : marker.tooltip.content;
}

html += '<li data-psv-marker="' + marker.id + '">';
if (marker.image) {
html += '<img class="marker-image" src="' + marker.image + '"/>';
}
html += '<p class="marker-name">' + name + '</p>' +
'</li>';
markers.push(this.psv.hud.markers[id]);
}

html += '</ul>' +
'</div>';
var html = this.psv.config.templates.markersList({
markers: this.psv.change('render-markers-list', markers),
config: this.psv.config
});

this.prop.panelOpening = true;
this.psv.panel.showPanel(html, true);
Expand Down

0 comments on commit b6311d4

Please sign in to comment.