Merge pull request #4593 from oliverguenther/fix/22987/close-modal

[22987] Onboarding: Reset video on modal close

app/views/homescreen/index.html.erb

@@ -34,11 +34,9 @@ See doc/COPYRIGHT.rdoc for more details.
   </h2>
 </div>
 
-<foundation-modal modal-class="onboarding--start-modal" modal-start-on-show="<%= params[:first_time_user] %>">
-  <div class="foundation-modal--template">
-    <%= render partial: '/onboarding/starting_video_modal' %>
-  </div>
-</foundation-modal>
+<foundation-modal-container showing="<%= !!params[:first_time_user] %>">
+  <%= render partial: '/onboarding/starting_video_modal' %>
+</foundation-modal-container>
 
 <%= render partial: 'announcements/show' %>
 

app/views/onboarding/_menu_item.html.erb

@@ -26,14 +26,15 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 See doc/COPYRIGHT.rdoc for more details.
 
 ++#%>
-<foundation-modal  modal-class="onboarding--start-modal" >
-  <div class="foundation-modal--template">
-    <%= render partial: '/onboarding/starting_video_modal' %>
-  </div>
-  <li>
-    <%= link_to l(:label_video),
-                '',
-                title: l(:label_video),
-                class: 'foundation-modal--activate-link' %>
-  </li>
-</foundation-modal>
+<li>
+  <%= link_to l(:label_video),
+              '',
+              title: l(:label_video),
+              class: 'foundation-modal--activate-link' %>
+</li>
+
+<foundation-modal-container activation-selector='.foundation-modal--activate-link'>
+  <%= render partial: '/onboarding/starting_video_modal' %>
+</foundation-modal-container>
+
+

app/views/onboarding/_starting_video_modal.html.erb

@@ -27,28 +27,30 @@ See doc/COPYRIGHT.rdoc for more details.
 
 ++#%>
 
-<div id="top-menu" class="onboarding--top-menu">
-  <%= homescreen_user_avatar %>
-  <h2><%= I18n.t('onboarding.welcome', name: current_user.name) %></h2>
-  <a class="icon-context icon-close" ng-click="close()"></a>
-</div>
+<div foundation-modal modal-class="onboarding--start-modal" class="foundation-modal--template">
+  <div id="top-menu" class="onboarding--top-menu">
+    <%= homescreen_user_avatar %>
+    <h2><%= I18n.t('onboarding.welcome', name: current_user.name) %></h2>
+    <a class="icon-context icon-close" ng-click="close()"></a>
+  </div>
 
-<div class="onboarding--main">
-  <h2><%= I18n.t('top_menu.getting_started') %></h2>
-  <div class="onboarding--video-block">
-    <div class="onboarding--video-text">
-      <span><%= I18n.t('onboarding.text_getting_started') %></span>
-    </div>
-    <div class="onboarding--video">
-      <iframe src="<%= OpenProject::Configuration.onboarding_video_url %>" height="282" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+  <div class="onboarding--main">
+    <h2><%= I18n.t('top_menu.getting_started') %></h2>
+    <div class="onboarding--video-block">
+      <div class="onboarding--video-text">
+        <span><%= I18n.t('onboarding.text_getting_started') %></span>
+      </div>
+      <div class="onboarding--video">
+        <iframe src="<%= OpenProject::Configuration.onboarding_video_url %>" height="282" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+      </div>
     </div>
   </div>
-</div>
 
-<div class="onboarding--footer">
-  <em><label><%= I18n.t('onboarding.text_show_again') %></label></em>
-  <button class="button -highlight -large"
-          ng-click="close()"
-          title=<%= l(:label_next)%>> <%= l(:label_next)%>
-  </button>
+  <div class="onboarding--footer">
+    <em><label><%= I18n.t('onboarding.text_show_again') %></label></em>
+    <button class="button -highlight -large"
+            ng-click="close()"
+            title=<%= l(:label_next)%>> <%= l(:label_next)%>
+    </button>
+  </div>
 </div>

frontend/app/components/common/modal/foundation-modal-container.directive.html

@@ -0,0 +1,3 @@
+<div class="foundation-modal--container" ng-if="$ctrl.isShowing">
+  <ng-transclude></ng-transclude>
+</div>

frontend/app/components/common/modal/foundation-modal-container.directive.ts

@@ -0,0 +1,67 @@
+// -- copyright
+// OpenProject is a project management system.
+// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program; if not, write to the Free Software
+// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+//
+// See doc/COPYRIGHT.rdoc for more details.
+// ++
+
+export class FoundationModalContainerController {
+  protected showing:boolean;
+  protected activationSelector:string;
+
+  constructor(protected $element, protected $timeout) {
+    if (this.activationSelector) {
+      angular.element(this.activationSelector).click(() => {
+        $timeout(() => this.showing = true);
+      });
+    }
+  }
+
+  public get isShowing() {
+    return !!this.showing;
+  }
+
+  public hide() {
+    this.showing = false;
+  }
+}
+
+function foundationModalContainer() {
+  return {
+    restrict: 'E',
+    transclude: true,
+    scope: {
+      activationSelector: '@',
+      showing: '=?'
+    },
+    bindToController: true,
+    controller: FoundationModalContainerController,
+    controllerAs: '$ctrl',
+    templateUrl: '/components/common/modal/foundation-modal-container.directive.html'
+  };
+}
+
+angular
+  .module('openproject.uiComponents')
+  .directive('foundationModalContainer', foundationModalContainer);

frontend/app/components/common/modal/foundation-modal.directive.ts

@@ -26,35 +26,37 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
-function foundationModal($timeout, ModalFactory) {
-  var foundationModalController = function(scope, element) {
-    var modal = new ModalFactory({
-      template: element.find('.foundation-modal--template').html(),
+import {FoundationModalContainerController} from "./foundation-modal-container.directive";
+function foundationModal(ModalFactory) {
+  var foundationModalLink = function(scope,
+    element,
+    attr,
+    foundationModalContainer
+  ) {
+    var modal;
+
+    modal = new ModalFactory({
+      template: element.html(),
       class: scope.modalClass,
       // Allows you to pass in properties to the scope of the modal
       contentScope: {
-        close: function() {
+        close: function () {
+          foundationModalContainer.hide();
           modal.deactivate();
         }
       }
     });
 
-    if(scope.modalStartOnShow) {
-      modal.activate();
-    } else {
-      element.find('.foundation-modal--activate-link').click(function() {
-        modal.activate();
-      });
-    }
+    modal.activate();
   };
 
   return {
-    restrict: 'E',
+    restrict: 'A',
+    require: '^foundationModalContainer',
     scope: {
       modalClass: '@',
-      modalStartOnShow: '='
     },
-    link: foundationModalController
+    link: foundationModalLink
   };
 }