Map Tour V2.2.7

MapTour/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "StorytellingMapTour",
-	"version": "2.2.6",
+	"version": "2.2.7",
 	"devDependencies": {
 		"grunt": "~0.4.1",
 		"grunt-contrib-clean": "~0.4.0",

MapTour/src/app/maptour-config.js

@@ -124,6 +124,9 @@ APPCFG = {
 	//
 	// Builder
 	//
+
+	HELP_URL: "http://links.esri.com/storymaps/map_tour_template",
+	HELP_URL_PORTAL: "http://links.esri.com/storymaps/map_tour_template",
 
 	// Control the authorized data source (for initialization and import screen)
 	AUTHORIZED_IMPORT_SOURCE: {
@@ -143,6 +146,11 @@ APPCFG = {
 	// To use Facebook import on Portal for ArcGIS, create your own ID at https://developers.facebook.com/ 
 	// or set AUTHORIZED_IMPORT_SOURCE.facebook to false
 	FACEBOOK_APP_ID: "471023926309627",
+	// This Youtube key is valid for application running on arcgis.com and esri.com domains
+	// If the application is deployed on Portal for ArcGIS or your own server, the Youtube api call 
+	//  won't be perfomed until you set the following flag and provide your own key
+	YOUTUBE_DISABLE_ON_PORTAL: true,
+	YOUTUBE_API_KEY: "AIzaSyDevTFP16nz6sA-akiOVi6wWXiplJnQ4qw",
 
 	COLOR_SCHEMES:  [
 		// COLORS is added as the first item at runtime

MapTour/src/app/storymaps/core/Core.js

@@ -425,6 +425,14 @@ define(["esri/map",
 		{
 			console.log("maptour.core.Core - loadWebMap - webmapId:", webmapIdOrJSON);
 
+			// Fix a Chrome freeze when map have a large initial extent (level 16 and up)
+			// Set the zoomDuration to 50ms, set back to default in see MainView.displayApp
+			// Using a value of 0ms create tile loading issue for all app life, it
+			//  looks like the API would not load all zoom level but resample lower level
+			if( has("chrome") ) {
+				esriConfig.defaults.map.zoomDuration = 50;
+			}
+
 			arcgisUtils.createMap(webmapIdOrJSON, "mainMap", {
 				mapOptions: {
 					slider: true,
@@ -551,9 +559,12 @@ define(["esri/map",
 
 		function displayApp()
 		{
-			app.isLoading = false;
 			$("#loadingOverlay").fadeOut();
 			loadingIndicator.stop();
+
+			setTimeout(function(){
+				app.isLoading = false;
+			}, 50);
 		}
 
 		function initError(error, message, noDisplay)
@@ -737,7 +748,7 @@ define(["esri/map",
 
 		function showTemplatePreview()
 		{
-			window.location.replace('preview.html');
+			window.location = app.isPortal && APPCFG.HELP_URL_PORTAL ? APPCFG.HELP_URL_PORTAL : APPCFG.HELP_URL;
 		}
 
 		function redirectToSignIn()

MapTour/src/app/storymaps/maptour/builder/ImportPopupViewHome.js

@@ -20,6 +20,18 @@ define(["storymaps/maptour/core/WebApplicationData", "dojo/has"],
 			this.getView = function()
 			{				
 				_footer.find('.btnNext').attr("disabled", "disabled").html(i18n.viewer.onlinePhotoSharingCommon.select);
+
+				if ( app.isPortal && APPCFG.YOUTUBE_DISABLE_ON_PORTAL ) { 
+					_container.find('.btn-select-youtube').addClass("disabled").unbind('click');
+					_container.find('.btn-select-youtube').popover('destroy').popover({
+						trigger: 'hover',
+						placement: 'top',
+						html: true,
+						content: i18n.viewer.onlinePhotoSharingCommon.disabled,
+						container: '.popover-import'
+					});
+				}
+
 				return _container;
 			};
 

MapTour/src/app/storymaps/maptour/builder/InitPopupViewHome.js

@@ -35,6 +35,17 @@ define(["dojo/has"],
 				}
 				_footer.find('.btnNext').attr("disabled", "disabled").html(i18n.viewer.onlinePhotoSharingCommon.select);
 
+				if ( app.isPortal && APPCFG.YOUTUBE_DISABLE_ON_PORTAL ) { 
+					_container.find('.btn-select-youtube').addClass("disabled").unbind('click');
+					_container.find('.btn-select-youtube').popover('destroy').popover({
+						trigger: 'hover',
+						placement: 'top',
+						html: true,
+						content: i18n.viewer.onlinePhotoSharingCommon.disabled,
+						container: '.popover-init'
+					});
+				}
+
 				return _container;
 			};
 

MapTour/src/app/storymaps/maptour/builder/InitPopupViewHostedFSCreation.js

@@ -457,7 +457,9 @@ define([
 
 			function getAdminUrl(url)
 			{
-				return url.replace("rest/services","admin/services").replace("/FeatureServer",".FeatureServer");
+				return url.replace("http://", window.location.protocol + "//")
+						.replace("rest/services","admin/services")
+						.replace("/FeatureServer",".FeatureServer");
 			}
 
 			//

MapTour/src/app/storymaps/maptour/core/Config.js

@@ -35,7 +35,9 @@ define([],
 					&& APPCFG.CORS_SERVER
 					&& APPCFG.AUTHORIZED_IMPORT_SOURCE
 					&& APPCFG.FLICKR_API_KEY
-					&& APPCFG.FACEBOOK_APP_ID;
+					&& APPCFG.FACEBOOK_APP_ID
+					&& APPCFG.YOUTUBE_DISABLE_ON_PORTAL !== undefined
+					&& APPCFG.YOUTUBE_API_KEY;
 			}
 		};
 	}

MapTour/src/app/storymaps/maptour/core/MainView.js

@@ -126,13 +126,68 @@ define(["storymaps/maptour/core/WebApplicationData",
 
 				// Prevent iPad vertical bounce effect
 				// except on few containers that needs that
-				$(document).bind(
-					'touchmove',
-					function(e) {
-						if( ! $(e.target).parents('#helpPopup, #placardContainer, #introPanel, #infoPanel, #popupViewGeoTag').length && ! $(e.target).hasClass('subtitle') )
-							e.preventDefault();
+				if ( has("touch") ) {
+					$(document).bind(
+						'touchmove',
+						function(e) {
+							if( ! $(e.target).parents('#helpPopup, #placardContainer, #introPanel, #infoPanel, #popupViewGeoTag').length && ! $(e.target).hasClass('subtitle') )
+								e.preventDefault();
+						}
+					);
+				}
+
+				// Prevent focus on mousedown but allow it with keyboard
+				$("body").on("mousedown", "*", function(e) {
+					if (($(this).is(":focus") || $(this).is(e.target)) && $(this).css("outline-style") == "none") {
+						$(this).css("outline", "none").on("blur", function() {
+							$(this).off("blur").css("outline", "");
+						});
 					}
-				);
+				});
+
+				// Detect focus on the title to avoid losing the current point if 
+				//  the app has previously navigated using the mouse
+				/*
+				var preventTitleFocusAction = false;
+				$("#headerDesktop .title").click(function(){
+					preventTitleFocusAction = true;
+				});
+				
+				$("#headerDesktop .title").focusin(function(e){
+					setTimeout(function(){
+						if ( ! preventTitleFocusAction ) {
+							if ( app.data.getCurrentIndex() > 0 ) { //  && ! e.relatedTarget
+								if ( app.data.getCurrentIndex() < app.data.getNbPoints() - 1 )
+									topic.publish("CAROUSEL_CLICK", app.data.getCurrentIndex() + 1);
+							}
+						}
+						
+						preventTitleFocusAction = false;
+					}, 300);
+				});
+				*/
+
+				/*
+				$(document).on('keydown', function(e){
+					if( e.keyCode === 9 ) {
+						var focusElem = $(":focus");
+						
+						if ( ! focusElem.length ) {
+							setTimeout(function(){
+								if ( ! e.shiftKey  ) {
+									if ( app.data.getCurrentIndex() < app.data.getNbPoints() - 1 )
+										topic.publish("CAROUSEL_CLICK", app.data.getCurrentIndex() + 1);
+								}
+								else {
+									if ( app.data.getCurrentIndex() > 0 )
+										topic.publish("CAROUSEL_CLICK", app.data.getCurrentIndex() - 1);
+								}
+							}, 50);
+							
+						}
+					}
+				});
+				*/
 
 				if( has("touch") )
 					$("body").addClass("hasTouch");
@@ -637,6 +692,23 @@ define(["storymaps/maptour/core/WebApplicationData",
 			 */
 			function displayApp()
 			{
+				// Fix a Chrome freeze when map have a large initial extent (level 16 and up)
+				// Set back the zoomDuration to 500ms
+				if( has("chrome") ) {
+					if ( app.map.getLevel() > 0 ) {
+						app.map.setZoom(app.map.getLevel() - 1).then(function(){
+							// For the map command +/- buttons to behave well 
+							esriConfig.defaults.map.zoomDuration = 50;
+							app.map.setZoom(app.map.getLevel() + 1).then(function(){
+								esriConfig.defaults.map.zoomDuration = 500;
+							});
+						});
+					}
+					else {
+						esriConfig.defaults.map.zoomDuration = 500;
+					}
+				}
+
 				// If intro record, display mobile intro view
 				if ( app.data.getIntroData() && app.data.getCurrentIndex() == null && (! has("ie") || has("ie") > 8) ) 
 					app.mobileIntroView.init(app.data.getIntroData(), WebApplicationData.getColors()[2]);

MapTour/src/app/storymaps/maptour/ui/desktop/Carousel.js

@@ -33,6 +33,8 @@ define(["dojo/has",
 				onMove: [-1,-1],
 				onScroll: [-1,-1]
 			};
+
+			var _navigationFromTab = false;
 
 			this.init = function(slides, bgColor, hoverColor)
 			{
@@ -96,7 +98,46 @@ define(["dojo/has",
 
 				updateArrows();
 
-				$(selector + ' .carouselScroller ul').html(renderItem(slides));
+				$(selector + ' .carouselScroller ul').html(renderItem(slides)).removeAttr("aria-hidden");
+
+				// When navigation with tab also navigate to the point (refresh picture panel and map)
+				$(selector + ' .carousel-item-div').focus(function(e){
+					var selectedIndex = $(selector + ' .carousel-item-div.selected').parents('li').index(),
+						focusIndex = $(this).parents('li').index();
+
+					if ( selectedIndex != focusIndex) {
+						topic.publish("CAROUSEL_CLICK", focusIndex);
+						_navigationFromTab = true;
+					}
+				});
+
+				// Logic to navigate away after the last point 
+				$(selector + ' .carousel-item-div').on('keydown', function(e){
+					var selectedIndex = $(selector + ' .carousel-item-div.selected').parents('li').index(),
+						focusIndex = $(this).parents('li').index();
+
+					if( e.keyCode === 9 && ! event.shiftKey ) {
+						if ( selectedIndex == focusIndex && selectedIndex == $('.carousel-item-div').length - 1) {
+							// TODO should not be done here
+							// TODO should also support tab+shift from there 
+
+							// Add tabindex to the header righ area
+							// This need to be done dynamically to only navigate to them after the carousel
+							$("#headerDesktop .msLink *, #headerDesktop .shareIcon").attr("tabindex", "0");
+
+							if ( $("#headerDesktop .msLink a").length )
+								$("#headerDesktop .msLink a")[0].focus();
+							else if ( $("#headerDesktop .msLink span").length )
+								$("#headerDesktop .msLink span")[0].focus();
+							else if ( $("#headerDesktop .shareIcon:visible").length )
+								$("#headerDesktop .shareIcon")[0].focus();
+							else
+								$("#headerDesktop .title")[0].focus();
+
+							return false;
+						}
+					}
+				});
 
 				_picDownloadedIndex = 14;
 				$(selector + ' .carouselScroller ul img').slice(0,_picDownloadedIndex).each(function(i, img){ 
@@ -120,9 +161,13 @@ define(["dojo/has",
 					// The first div is necessary for vertical centering and the span around the image for the numbering
 					// The color specification though class is not ideal, but to have that more dynamic all the rest is a pain
 					carouselHTML += '<li>';
-					carouselHTML += ' <div class="carousel-item-div">';
-					carouselHTML += '  <span class="' + pinCssClass +'"><img data-src="' + slide.attributes.getThumbURL() + '" onerror="mediaNotFoundHandler(this)"/></span>';
+					carouselHTML += ' <div class="carousel-item-div" tabindex="0">';
+					carouselHTML += '  <span class="' + pinCssClass +'"><img data-src="' + slide.attributes.getThumbURL() + '" onerror="mediaNotFoundHandler(this)" /></span>';
 					carouselHTML += '  <div>' + ($('<div>' + slide.attributes.getName() + '</div>').html()) + '</div>';
+					// Insert a hidden description for text2speech so that the description immediately follow the point title
+					// Use two hidden divs as a way to create a large pause between title and description 
+					carouselHTML += '  <div style="height: 0;">.</div><div style="height: 0;">.</div>';
+					carouselHTML += '  <div style="height: 0;">' + ($('<div>' + slide.attributes.getDescription() + '</div>').text()) + '</div>'; // "." for chromevox to break
 					carouselHTML += ' </div>';
 					carouselHTML += '</li>';
 				});
@@ -141,6 +186,19 @@ define(["dojo/has",
 				$(selector + ' .carousel-item-div').removeClass("selected");
 				$(selector + ' .carousel-item-div').eq(index).addClass("selected");
 
+				// Focus new carousel active item
+				if ( ! app.isLoading ) {
+					// Does carousel already has focus (through tab navigation)
+					var carouselHasFocus = !! $(":focus").parents("#footerDesktop").length;
+
+					$(":focus").blur();
+
+					if ( _navigationFromTab || carouselHasFocus )
+						$(selector + ' .carousel-item-div').eq(index).focus();
+
+					_navigationFromTab = false;
+				}
+
 				scrollToIndex(index);
 				updateArrows();
 			};

MapTour/src/app/storymaps/maptour/ui/mobile/Carousel.css

@@ -36,4 +36,66 @@
 	height: 22px;
 	right: 5px;
 	z-index: 499;
+}
+
+/*
+ * Desktop navigation
+ */
+
+#footerMobile.hasDesktopBtn .carousel {
+	margin: 0 53px;
+}
+
+#footerMobile .embed-btn-container {
+	display: none;
+}
+
+#footerMobile.hasDesktopBtn .embed-btn-container {
+	position: absolute;
+	top: 14px;
+	display: block;
+	width: 51px;
+	height: 100%;
+	z-index: 1;
+	opacity: 0.8;
+	padding-top: 14px;
+}
+
+#footerMobile .embed-btn-container.disabled {
+	opacity: 0.2;
+	cursor: default;	
+}
+
+#footerMobile .embed-btn {
+	width: 42px;
+	height: 42px;
+	background: url(../../../../../resources/icons/embed-arrows.png);
+}
+
+#footerMobile .embed-btn-container:not(.disabled):hover {
+	opacity: 1.0;
+	cursor: pointer;
+}
+
+/* Left button */
+#footerMobile .embed-btn-left {
+	left: 0;
+	padding-left: 9px;
+}
+
+#footerMobile .embed-btn-left.disabled .embed-btn {
+	background-position: 42px 0;
+}
+
+/* Right button */
+#footerMobile .embed-btn-right {
+	right: 0;
+}
+
+#footerMobile .embed-btn-right .embed-btn {
+	background-position: 0 -42px;
+}
+
+#footerMobile .embed-btn-right.disabled .embed-btn {
+	background-position: 42px -42px;
 }