Version 1.9.3, corresponding to September 2017 ArcGIS Online release

README.md

@@ -13,7 +13,7 @@ The Story Map Series app lets you present a series of maps via tabs, numbered bu
 [Download](http://links.esri.com/storymaps/map_series_template_zip) |
 [Map Series page on Esri Story Maps website](http://links.esri.com/storymaps/map_series_app)
 
-**Latest release is version 1.8.0**, if you want to be informed of new releases, we recommend you to watch this repository ([see GitHub help](https://help.github.com/articles/watching-repositories)). See the [release page](https://github.com/Esri/map-series-storytelling-template-js/releases) for release notes.
+**Latest release is version 1.9.3**, if you want to be informed of new releases, we recommend you to watch this repository ([see GitHub help](https://help.github.com/articles/watching-repositories)). See the [release page](https://github.com/Esri/map-series-storytelling-template-js/releases) for release notes.
 
 For more infomation about using and customizing Esri's Storytelling Apps follow the [Story Maps Developers' Corner](https://developerscorner.storymaps.arcgis.com).
 
@@ -167,7 +167,7 @@ When the Series is hosted on your web server, an authentication dialog will appe
 
 Note that for that authentication to work on some older browser (Internet Explorer 9) you need to install a proxy server on your web server to make sure the login credentials can be passed securely to ArcGIS Online. For more information, see the [Using the proxy](https://developers.arcgis.com/javascript/jshelp/ags_proxy.html) in the ArcGIS API for JavaScript documentation.
 
-Because of that limitation, we recommend that you configure the application to use OAuth. OAuth 2.0 based authentication is available for ArcGIS Online and Portal for ArcGIS users with developer or organizational accounts. Follow the procedure to [add an application](http://doc.arcgis.com/en/arcgis-online/share-maps/add-items.htm#ESRI_SECTION1_55703F1EE9C845C3B07BBD85221FB074) and [register an application](http://doc.arcgis.com/en/arcgis-online/share-maps/add-items.htm#ESRI_SECTION2_20AF85308FD548B5ADBAE28836F66D3F) to get an OAuth application ID. Once you have that application, open `index.html`, locate the `configOptions` section and fill the `oAuthAppId` property.
+Because of that limitation, we recommend that you configure the application to use OAuth. OAuth 2.0 based authentication is available for ArcGIS Online and Portal for ArcGIS users with developer or organizational accounts. Follow the procedure to [add an application](http://doc.arcgis.com/en/arcgis-online/share-maps/add-items.htm#ESRI_SECTION1_0D1B620254F745AE84F394289F8AF44B) and [register an application](http://doc.arcgis.com/en/arcgis-online/share-maps/add-items.htm#REG_APP) to get an OAuth application ID. Once you have that application, open `index.html`, locate the `configOptions` section and fill the `oAuthAppId` property.
 
 If you are using secured services but don't want users to have to authenticate, you can use a proxy to store the username/password to be used, see [Working with Proxy Services](https://developers.arcgis.com/authentication/working-with-proxies/#selfhosted-proxy-service), and add a proxy rules to specify what services need to use the proxy by editing `PROXY_RULES` in `app/config.js`.
 
@@ -265,7 +265,7 @@ As the application Javascript and CSS are minified, **we don't recommend that yo
 
 If you want to change the behavior of one functionality or want to add new one, follow the [developer guide](#developer-guide) below.
 
-The easiest way to find the id or path of a DOM element that you want to customize is to use your browser developer tool, read documentation for [Chrome](https://developers.google.com/chrome-developer-tools/), [Safari](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html), [Firefox](https://getfirebug.com/).
+The easiest way to find the id or path of a DOM element that you want to customize is to use your browser developer tool, read documentation for [Chrome](https://developers.google.com/chrome-developer-tools/), [Safari](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html), [Firefox](https://developer.mozilla.org/en-US/docs/Tools).
 
 Customization can achieved through the `style` tag already present for you in `index.html` (search for `/* CUSTOM CSS RULES */`).
 
@@ -364,7 +364,7 @@ The deploy folder now contains the built application that you can deploy to your
 The build script perform code validation through [JSHint](http://www.jshint.com/), you can disable those validations by editing Gruntfile.js and look for the following comments `/* Comment out to disable code linting */`.
 
 ### Design
-Map Series relies on AMD and Dojo loader [AMD](http://help.arcgis.com/en/webapi/javascript/arcgis/jshelp/#inside_dojo_amd) for application structure.
+Map Series relies on AMD and Dojo loader [AMD](https://developers.arcgis.com/javascript/3/jshelp/inside_dojo_amd.html) for application structure.
 
 The application is structured as this:
 
@@ -391,7 +391,7 @@ The application is structured as this:
 
 The main dependencies are:
  * [jQuery](http://jquery.com/)
- * [Bootstrap](http://twitter.github.com/bootstrap/)
+ * [Bootstrap](https://getbootstrap.com/docs/3.3/)
  * [CKEditor](http://ckeditor.com/)
  * [iDangero.us Swiper](http://www.idangero.us/sliders/swiper/)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Storymaps-MapSeries",
-  "version": "1.8.0",
+  "version": "1.9.3",
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-contrib-clean": "~0.4.0",

src/app/storymaps/common/Core.css

@@ -196,7 +196,7 @@ a:hover{
 	height: 20px;
 	background: url(../../../resources/tpl/viewer/icons/loading-light.gif);
 	background-size: 17px 20px;
-    background-repeat: no-repeat;
+	background-repeat: no-repeat;
 	vertical-align: -5px;
 	margin-right: 2px;
 }
@@ -207,7 +207,7 @@ a:hover{
 
 #my-stories-hidden-container {
 	position: absolute;
-	bottom: -800px;
+	bottom: -2800px;
 	left: 0;
 	visibility: hidden;
 }
@@ -216,7 +216,7 @@ a:hover{
  * Bootstrap override
  */
 .tooltip-inner {
- 	text-align: left;
+	text-align: left;
 }
 
 /* something seems to go wrong during the build and this is rule from bootstrap is removed */

src/app/storymaps/common/Core.js

@@ -260,6 +260,9 @@ define(["lib-build/css!lib-app/bootstrap/css/bootstrap.min",
 
 				definePortalConfig();
 
+				// Pass cookie onto API to avoid infinite redirects
+				IdentityManager.checkSignInStatus(app.portal.portalUrl);
+
 				// If app is configured to use OAuth
 				if ( app.indexCfg.oAuthAppId ) {
 					var info = new ArcGISOAuthInfo({
@@ -576,19 +579,19 @@ define(["lib-build/css!lib-app/bootstrap/css/bootstrap.min",
 
 					app.userCanEdit = app.data.userIsAppOwner();
 
-					// Prevent app from accessing the cookie in viewer when user is not the owner
-					if ( ! app.isInBuilder && ! app.userCanEdit ) {
-						if( ! document.__defineGetter__ ) {
-							Object.defineProperty(document, 'cookie', {
-								get: function(){ return ''; },
-								set: function(){ return true; }
-							});
-						}
-						else {
-							document.__defineGetter__("cookie", function() { return ''; });
-							document.__defineSetter__("cookie", function() {} );
-						}
-					}
+					//	Prevent app from accessing the cookie in viewer when user is not the owner
+					//if ( ! app.isInBuilder && ! app.userCanEdit ) {
+					//	if( ! document.__defineGetter__ ) {
+					//		Object.defineProperty(document, 'cookie', {
+					//			get: function(){ return ''; },
+					//			set: function(){ return true; }
+					//		});
+					//	}
+					//	else {
+					//		document.__defineGetter__("cookie", function() { return ''; });
+					//		document.__defineSetter__("cookie", function() {} );
+					//	}
+					//}
 
 					if( app.indexCfg.authorizedOwners && app.indexCfg.authorizedOwners.length > 0 && app.indexCfg.authorizedOwners[0] ) {
 						var owner = itemRq.owner,
@@ -780,7 +783,9 @@ define(["lib-build/css!lib-app/bootstrap/css/bootstrap.min",
 			app.builder && app.builder.appInitComplete();
 
 			// Load My Stories in builder or viewer if user is owning the story
-			if ( (app.isInBuilder || app.userCanEdit) && has("ie") != 9 && ! _urlParams.preview ) {
+			var isPreview = (_urlParams.preview === 'true' || _urlParams.preview === '');
+			var isAutoplay = (_urlParams.autoplay === 'true' || _urlParams.autoplay === '');
+			if ( (app.isInBuilder || app.userCanEdit) && has("ie") != 9 && !isPreview && !isAutoplay ) {
 				if ( has("ff") ) {
 					$(".builderShare #my-stories-frame").remove();
 				}
@@ -1038,6 +1043,7 @@ define(["lib-build/css!lib-app/bootstrap/css/bootstrap.min",
 			return ! app.isInBuilder && (
 				(! isProd() && !! CommonHelper.getAppID(isProd()))
 				|| isProd() && app.userCanEdit)
+				&& (_urlParams.autoplay === undefined || _urlParams.autoplay == 'false')
 				&& (_urlParams.preview === undefined || _urlParams.preview == 'false');
 		}
 

src/app/storymaps/common/_resources/nls/ru/core.js

@@ -120,7 +120,7 @@ define({
       "logoUploadSizeError": "Слишком большие размеры GIF. Замените размер на ${PIXEL-WIDTH} пикселов по ширине",
       "logoCustomLinkTooltip": "Ссылка на логотип",
       "logoCustomLinkPlaceholder": "URL изображения",
-      "logoUploadGenericError": "Логотипом может быть файл формата .bmp, .gif, .jpg, .jpeg, или .png. Gif должен быть меньше 250 пикс в ширину и 10Мб по размеру.",
+      "logoUploadGenericError": "Логотипом может быть файл формата .bmp, .gif, .jpg, .jpeg, или .png. Gif должен быть меньше 250 пикс. в ширину и 10 МБ по размеру.",
       "logoCustomTargetPlaceholder": "Веб-страница, которая будет открываться при нажатии на логотип",
       "logoSocialText": "Строка тегов:",
       "logoLink": "Ссылка:",

src/app/storymaps/common/_resources/nls/ru/media.js

@@ -107,8 +107,8 @@ define({
       "lblPosition4": "Растяжка",
       "lblPosition5": "Настраиваемый",
       "lblURLHelp": "Для получения наилучшего результата, объем изображения должен быть менее 400 Кб. Используйте сжатые изображения JPG с 80% качества и рекомендуемую ширину изображения: 2000 пикселов для основной сцены или описательной панели с кнопкой развёртывания окна, 1000 пикселов для описательной панели без кнопки развёртывания окна.<br><br>Если изображение из ссылки отображается медленно, загрузите его в вашу историю для получения лучшего результата.",
-      "tooltipDimension": "Значение можно задать в 'px' или '%'",
-      "tooltipDimension2": "Значение можно задать в 'px'",
+      "tooltipDimension": "Значение можно задать в 'пикс.' или '%'",
+      "tooltipDimension2": "Значение можно задать в 'пикс.'",
       "lblPosition2Explain": "(может быть урезано)",
       "lblPosition3Explain": "(не будет урезаться)",
       "lblPosition3Explain2": "(ширина всегда будет соответствовать панели)",

src/app/storymaps/common/builder/BuilderHelper.js

@@ -1,4 +1,4 @@
-define([], 
+define([],
 	function(){
 		/**
 		 * BuilderHelper
@@ -45,6 +45,14 @@ define([],
 			},
 			getBlankWebmapJSON: function()
 			{
+				var spatialReference = {
+					"latestWkid": 3857,
+					"wkid": 102100
+				};
+
+				if (app.map && app.map.spatialReference) {
+					spatialReference = app.map.spatialReference;
+				}
 				return {
 					item: {
 						"id": "",
@@ -93,7 +101,8 @@ define([],
 							}],
 							"title": "Topographic"
 						},
-						"version": "1.9"
+						"spatialReference": spatialReference,
+						"version": "2.9"
 					}
 				};
 			}

src/app/storymaps/common/builder/ckeditor/plugins/storymapsInlineMedia/plugin.js

@@ -32,9 +32,17 @@ CKEDITOR.plugins.add('storymapsInlineMedia', {
 				var media = null;
 
 				if ( elemIsImg ) {
-					var mediaImg = elem.children('img').eq(0),
+					var mediaImg = elem.find('img').eq(0),
 						caption = mediaImg.parents('figure').children('figcaption'),
-						title = caption && caption.length ? caption.html() : mediaImg.attr('title');
+						title = caption && caption.length ? caption.html() : mediaImg.attr('title'),
+						figureContainer = mediaImg.parents('figure'),
+						activateFullScreen = false;
+
+					if (figureContainer.length) {
+						activateFullScreen = (figureContainer.find('.activate-fullscreen').length > 0);
+					} else {
+						activateFullScreen = (mediaImg.parents('.activate-fullscreen').length > 0);
+					}
 
 					media = {
 						type: "image",
@@ -44,7 +52,7 @@ CKEDITOR.plugins.add('storymapsInlineMedia', {
 							title: title,
 							width: mediaImg.attr('width'),
 							height: mediaImg.attr('height'),
-							activateFullScreen: mediaImg.parents(".image-container").hasClass("activate-fullscreen")
+							activateFullScreen: activateFullScreen
 						}
 					};
 				}
@@ -115,10 +123,14 @@ CKEDITOR.plugins.add('storymapsInlineMedia', {
 						// Media with caption (image only)
 						if ( cfg.title ) {
 							var url = cfg.url;
-							// TODO: SIZES. not being used...
+							// TODO: SIZES. can't really store this stuff in the html because
+							// it gets stripped out either in the editor or in agol.
+							// agol also limits tags, so can't use srcset.
 							if (cfg.sizes && cfg.sizes.length > 1) {
 								var sorted = _.sortBy(cfg.sizes, 'width').reverse();
 								url = sorted[0].url;
+								// somehow storing the images with sizes in the data model
+								// would be the only way to go here.
 								cfg.url = url;
 							}
 
@@ -134,8 +146,9 @@ CKEDITOR.plugins.add('storymapsInlineMedia', {
 						else {
 							outputEl = CKEDITOR.dom.element.createFromHtml(mediaTpl, editor.document);
 
-							if ( ! (cfg.type == "webpage" && cfg.frameTag) )
-								outputEl.getChildren().$[0].setAttribute('src', cfg.url);
+							if ( ! (cfg.type == "webpage" && cfg.frameTag) ) {
+								outputEl.getChildren().$[0].setAttribute('src', CommonHelper.possiblyAddToken(cfg.url));
+							}
 
 							outputEl.getChildren().$[0].setAttribute('width', DEFAULT_WIDTH);
 

src/app/storymaps/common/builder/media/ViewConfigure.js

@@ -92,6 +92,7 @@ define(["lib-build/css!./ViewConfigure",
 						width:  params.fromService ? null : media[media.type].width,
 						height: params.fromService ? null : media[media.type].height
 					};
+					media.image.activateFullScreen = params.media.activateFullScreen;
 				}
 
 				_mediaType = media ? media.type : 'image';

src/app/storymaps/common/builder/media/image/FileUploadHelper.js

@@ -260,7 +260,7 @@ define([
       if (!portal) {
         return false;
       }
-      return '//' + portal.portalHostname.replace(/\/$/, '') + '/sharing/rest';
+      return 'https://' + portal.portalHostname.replace(/\/$/, '') + '/sharing/rest';
     },
 
     getResourcesUrl: function() {

src/app/storymaps/common/builder/media/image/ViewFlickr.js

@@ -89,7 +89,7 @@ define(["lib-build/tpl!./ViewFlickr",
 				_flickr.getPicturesInSet(
 					$(evt.target).data('id') || $(evt.target).parents('.set').data('id'),
 					{
-						per_page: 100 // TODO
+						per_page: 500 // TODO: Flickr limit is 500 per request. Add paging to display all photos in albums with more than 500 images.
 					}
 				).then(
 					function(data) {

src/app/storymaps/common/builder/media/map/MapConfigOverlay.js

@@ -402,19 +402,27 @@ define(["lib-build/tpl!./MapConfigOverlay",
 				return null;
 			}
 
-			var objectIdFields = $.grep(fields, function(field){
-				return field.type == "esriFieldTypeOID";
-			});
+			var objectIdFields;
 
-			if ( layer && fields && ! objectIdFields.length ) {
+			if (layer.objectIdField) {
+				objectIdFields = [{
+					name: layer.objectIdField
+				}];
+			} else {
 				objectIdFields = $.grep(fields, function(field){
-					return field.name == "OBJECTID" || field.name == "FID";
+					return field.type == "esriFieldTypeOID";
 				});
 
-				if ( ! objectIdFields.length ) {
+				if ( layer && fields && ! objectIdFields.length ) {
 					objectIdFields = $.grep(fields, function(field){
-						return field.type == "esriFieldTypeInteger";
+						return field.name == "OBJECTID" || field.name == "FID";
 					});
+
+					if ( ! objectIdFields.length ) {
+						objectIdFields = $.grep(fields, function(field){
+							return field.type == "esriFieldTypeInteger";
+						});
+					}
 				}
 			}
 

src/app/storymaps/common/builder/media/map/MapViewerWrapper.js

@@ -171,7 +171,11 @@ define([
 					return;
 				}
 
-				var json = JSON.parse(event.data);
+				var json = _.isString(event.data) ? JSON.parse(event.data) : event.data;
+				if (!json || !json.type) {
+					console.log('MV ignored event without data or without data type', event.data);
+					return;
+				}
 				console.log("MV received", json);
 
 				switch (json.type) {

src/app/storymaps/common/ui/header/Desktop.js

@@ -82,7 +82,10 @@ define(["lib-build/css!./Desktop",
 					}
 				}
 
-				if ( ! app.isInBuilder && app.userCanEdit && has("ie") != 9 && ! CommonHelper.getUrlParams().preview ) {
+				var urlParams = CommonHelper.getUrlParams();
+				var isPreview = (urlParams.preview === 'true' || urlParams.preview === '');
+				var isAutoplay = (urlParams.autoplay === 'true' || urlParams.autoplay === '');
+				if ( ! app.isInBuilder && app.userCanEdit && has("ie") != 9 && !isPreview && !isAutoplay ) {
 					container.find('.error-status').addClass('enabled');
 					topic.subscribe("MYSTORIES_SCAN", updateErrorStatus);
 					updateErrorStatus("start");

src/app/storymaps/common/utils/CommonHelper.js

@@ -835,7 +835,12 @@ define(["dojo/cookie",
 				else {
 					token = this.getCookieToken();
 				}
-				return url + '?token=' + token;
+				return this.forceHttps(url) + '?token=' + token;
+			},
+
+			forceHttps: function(url) {
+				var urlWithoutProtocol = url.replace(/^.*?\/\//, '');
+				return 'https://' + urlWithoutProtocol;
 			},
 
 			isAppResource: function(url, appItem) {

src/app/storymaps/common/utils/SocialSharing.js

@@ -19,7 +19,7 @@ define(["dojo/Deferred", "esri/urlUtils"],
 				var options = 'text=' + encodeURIComponent(title || '')
 								+ '&url=' + this.cleanURL(url || document.location.href)
 								+ '&related=EsriStoryMaps'
-								+ '&hashtags=storymap';
+								+ '&hashtags=StoryMaps';
 
 				window.open(
 					'https://twitter.com/intent/tweet?' + options,