V1.1.3

README.md

@@ -8,7 +8,7 @@ The Story Map Cascade℠ app lets you combine narrative text with maps, images,
 [Download](http://links.esri.com/storymaps/story_map_cascade_zip) |
 [Cascade page on Esri Story Maps website](https://storymaps.arcgis.com/en/app-list/cascade/)
 
-**Latest release is version 1.1.2**, 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/story-map-cascade/releases) for release notes.
+**Latest release is version 1.1.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/story-map-cascade/releases) for release notes.
 
 ## Help content
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "cascade-storytelling-template-js-dev",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "homepage": "",
   "authors": [
     "Gregory L'Azou <glazou@esri.com>"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Storymaps-Cascade",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "The Story Map Cascade app lets you combine narrative text with maps, images, and multimedia content in an engaging, full-screen scrolling experience",
   "license": "Apache-2.0",
   "repository": {

src/app/storymaps/common/builder/textEditor/MediumEditorWrapper.jsx

@@ -501,10 +501,6 @@ export default function(params = {}) {
   //   you have at least a span with a color in a paragraph
   var el = $(editor.elements[0]);
   el.on('input', function() {
-    // A <p>,<h1>,... may be created without block class when changing block using block toolbar
-    //  especially if the caret is on a span
-    // Would be best for performance to somehow only do this in blockToolbar
-    el.children('p:not(.block), h1:not(.block), h2:not(.block), blockquote:not(.block)').addClass('block');
 
     el.children('p, h1, h2, blockquote').children('span[style]').each(function() {
       if ((! this.style.fontWeight && ! this.style.fontStyle && ! this.style.textDecoration)
@@ -548,6 +544,11 @@ export default function(params = {}) {
         newEl.click();
       }, 50);
     });
+
+    // A <p>,<h1>,... may be created without block class when changing block using block toolbar
+    //  especially if the caret is on a span
+    // Would be best for performance to somehow only do this in blockToolbar
+    el.children('p:not(.block), h1:not(.block), h2:not(.block), blockquote:not(.block)').addClass('block');
   });
 
   editor.subscribe('editablePaste', function() {

src/app/storymaps/common/builder/textEditor/plugins/ColorPicker.jsx

@@ -3,6 +3,38 @@ import ColorPickerWrapper from 'storymaps-react/common/builder/ColorPicker';
 
 var SELECTION = MediumEditor.selection;
 
+// Helpers function to save/restore editor selection
+// We are bypassing those as it was creating issues when defining
+//   a color for the first word of a paragraph following a media
+//   (only when inserted in the same session)
+
+function saveSelection() {
+  if (window.getSelection) {
+    var sel = window.getSelection();
+    if (sel.getRangeAt && sel.rangeCount) {
+      return sel.getRangeAt(0);
+    }
+  }
+  else if (document.selection && document.selection.createRange) {
+    return document.selection.createRange();
+  }
+
+  return null;
+}
+
+function restoreSelection(range) {
+  if (range) {
+    if (window.getSelection) {
+      var sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+    else if (document.selection && range.select) {
+      range.select();
+    }
+  }
+}
+
 const ColorPicker = MediumEditor.extensions.button.extend({
   name: 'colorPicker',
   action: 'applyForeColor',
@@ -18,6 +50,10 @@ const ColorPicker = MediumEditor.extensions.button.extend({
       showPalette: true,
       onShowCallback: this.onShow.bind(this),
       onChangeCallback: this.onChange.bind(this),
+      // Also listening to move because change is not fired the second time
+      //  editor is open and you pick the same color
+      //  even if you have set the color through set :/
+      onMoveCallback: this.onChange.bind(this),
       onHideCallback: this.onHide.bind(this),
       showAlpha: true,
       showClear: true
@@ -28,7 +64,8 @@ const ColorPicker = MediumEditor.extensions.button.extend({
 
   handleClick: function() {
     // Keep track of the current text selection
-    this._selectedText = this.base.exportSelection();
+    //this._selectedText = this.base.exportSelection();
+    this._selectedText = saveSelection();
 
     // Update color picker with text color
     var selectedTextColor = $(this.base.getSelectedParentElement()).css('color');
@@ -45,7 +82,8 @@ const ColorPicker = MediumEditor.extensions.button.extend({
 
   onHide: function(color) {
     // Restore selection
-    this.base.importSelection(this._selectedText);
+    //this.base.importSelection(this._selectedText);
+    restoreSelection(this._selectedText);
 
     if (this._colorSelected) {
       this.document.execCommand('styleWithCSS', false, true);

src/app/storymaps/tpl/view/media/ImageGallery.jsx

@@ -96,14 +96,22 @@ export default class ImageGallery extends Media {
     //
   }
 
+  resize() {
+    this._calculateImageHeights();
+
+    this._node.find('.image-gallery-item-wrapper').each(function(i, el) {
+      $(el).css('height', this._images.images[i].adjustedHeight);
+    }.bind(this));
+  }
+
   _update() {
     this._node.html(this._render(false));
     this._isLoaded = false;
     this.load();
   }
 
   _calculateImageHeights() {
-    let isMobile = app.display.windowWidth < 768;
+    let isMobile = window.innerWidth <= 768;
 
     let spaceBetweenImage = 15;
     // total image gutter space

src/app/storymaps/tpl/view/media/ImageGallery.less

@@ -52,23 +52,22 @@
  * Responsive
  */
 
-
-body.mobile-view {
+@media (max-width: @screen-sm) {
   .image-gallery {
     .image-gallery-wrapper {
       flex-wrap: wrap;
       justify-content: space-around;
-    }
 
-    .image-gallery-item {
-      flex: 0 0 50%;
+      .image-gallery-item {
+        flex: 0 0 50%;
 
-      &:nth-child(2n+1) {
-        padding-left: 0;
-      }
+        &:nth-child(2n+1) {
+          padding-left: 0;
+        }
 
-      &:nth-child(n+3) {
-        margin-top: 15px;
+        &:nth-child(n+3) {
+          margin-top: 15px;
+        }
       }
     }
   }

src/app/storymaps/tpl/view/media/ImageGalleryBuilder.jsx

@@ -171,16 +171,17 @@ export default class ImageGalleryBuilder extends ImageGallery {
 
   addRemoveEvent() {
     this._node.find('.ig-remove').off('click').on('click', event => {
-      if (this._images.images.length == 2) {
-        this._onAction('image-gallery-to-image');
-        return;
-      }
-
-      let itemNode = $(event.currentTarget).closest('.image-gallery-item');
       // find which item it is that you should remove...
+      let itemNode = $(event.currentTarget).closest('.image-gallery-item');
       let index = itemNode.data('index');
 
       this._images.images.splice(index, 1);
+
+      if (this._images.images.length == 1) {
+        this._onAction('image-gallery-to-image');
+        return;
+      }
+
       this._update();
     });
   }

src/app/storymaps/tpl/view/section/Sequence.jsx

@@ -177,8 +177,9 @@ export default class Sequence {
   }
 
   resize(/*params*/) {
-    // TODO: how to resize foreground blocks?
-    //_backgroundMedia.resize(params);
+    for (let block of this._blocks) {
+      block.resize && block.resize();
+    }
   }
 
   getArcGISContent() {

src/index.html

@@ -69,7 +69,7 @@
 
     <script type="text/javascript">
       var app = {
-        version: '1.1.2',
+        version: '1.1.3',
         pathJSAPI3: '//js.arcgis.com/3.18/',
         pathJSAPI4: '//js.arcgis.com/4.1/'
       };