Pad title reminder

Closes #49

Using a second modal ui-yield-to, due to a limitation in
mobile-angular-ui

See mcasimir/mobile-angular-ui#286

Author: atd

bower.json

@@ -10,7 +10,7 @@
     "angular-translate": "2.x",
     "angular-translate-loader-static-files": "2.x",
     "angular-route": "1.x",
-    "mobile-angular-ui": "1.2.x",
+    "mobile-angular-ui": ">= 1.2.0-rc.3",
     "font-awesome": "4.2",
     "angular-bootstrap": "latest",
     "angular-ui-select": "~0.9.6",

src/html/index.html

@@ -49,5 +49,7 @@
     </div>
 
     <div ui-yield-to="modals"></div>
+    <!-- Need support for several ui-content-for https://github.com/mcasimir/mobile-angular-ui/pull/286 -->
+    <div ui-yield-to="modals2"></div>
   </body>
 </html>

src/js/controllers/pad.js

@@ -17,8 +17,8 @@ angular.module('Pear2Pear')
       });
   }])
   .controller('PadCtrl', [
-              'pear', '$scope', '$route', '$location',
-              function(pear, $scope, $route, $location){
+              'pear', '$rootScope', '$scope', '$route', '$location', 'SharedState',
+              function(pear, $rootScope, $scope, $route, $location, SharedState){
 
     $scope.urlId = pear.urlId;
     $scope.communityId = $route.current.params.communityId;
@@ -40,4 +40,19 @@ angular.module('Pear2Pear')
       return id === 'pad' ? 'active' : '';
     };
 
+    $scope.titleReminder = function titleReminder() {
+      SharedState.turnOff('projectTitleReminder');
+
+      document.querySelector('.project-title input').focus();
+    };
+
+    // Do not leave pad without giving a title to the project
+    $rootScope.$on('$routeChangeStart', function(event) {
+      if ($scope.project.title === undefined || $scope.project.title === '') {
+        event.preventDefault();
+
+        SharedState.turnOn('projectTitleReminder');
+      }
+    });
+
   }]);

src/l10n/en.json

@@ -101,7 +101,11 @@
     },
     "task_list_label": "Project tasks:",
     "title" : {
-      "placeholder" : "Project without a title"
+      "placeholder" : "Project without a title",
+      "reminder": {
+        "button": "Got it!",
+        "body": "Please, introduce a title so other participants identify your project easily"
+      }
     },
     "project_name": "Project name",
     "project_status": "Status",

src/l10n/es.json

@@ -102,7 +102,11 @@
     },
     "task_list_label": "Tareas del proyecto:",
     "title" : {
-      "placeholder" : "Proyecto sin titulo"
+      "placeholder" : "Proyecto sin titulo",
+      "reminder": {
+        "button": "¡Hecho!",
+        "body": "Por favor, introduce un título para que otros participantes identifiquen la propuesta fácilmente"
+      }
     },
     "project_name": "Nombre del proyecto",
     "project_status": "Estado",

src/templates/pad/show.html

@@ -9,3 +9,20 @@
 <div id="pad" class="section pad" hm-swiperight="showChat()">
   <div class="swellrt-editor" ng-model="project.pad" placeholder="{{ 'pad.placeholder' | translate }}"></div>
 </div>
+
+
+<!-- Uses a second modal ui-yield-to. See https://github.com/mcasimir/mobile-angular-ui/pull/286 -->
+<div ui-content-for="modals2">
+  <div class="modal modal-overlay" ui-if="projectTitleReminder" ui-state="projectTitleReminder">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-body">
+          <span translate>project.title.reminder.body
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-primary project-title-reminder-btn" ng-click="titleReminder()" translate>project.title.reminder.button</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>