Refactored dialogs and contacts manager.

static/js/controllers/contactsmanagercontroller.js

@@ -0,0 +1,40 @@
+/*
+ * Spreed WebRTC.
+ * Copyright (C) 2013-2014 struktur AG
+ *
+ * This file is part of Spreed WebRTC.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+define([], function() {
+
+	// ContactsmanagerController
+	return ["$scope", "$modalInstance", "contactData", "data", "contacts", function($scope, $modalInstance, contactData, data, contacts) {
+
+		$scope.header = data.header;
+		$scope.contacts = [];
+		$scope.search = {};
+
+		var updateContacts = function() {
+			$scope.contacts = contactData.getAll();
+		};
+		updateContacts();
+		contacts.e.on('contactadded', function() {
+			updateContacts();
+		});
+
+	}];
+
+});

static/js/controllers/controllers.js

@@ -25,14 +25,16 @@ define([
 	'controllers/statusmessagecontroller',
 	'controllers/chatroomcontroller',
 	'controllers/roomchangecontroller',
-	'controllers/usersettingscontroller'], function(_, MediastreamController, StatusmessageController, ChatroomController, RoomchangeController, UsersettingsController) {
+	'controllers/usersettingscontroller',
+	'controllers/contactsmanagercontroller'], function(_, MediastreamController, StatusmessageController, ChatroomController, RoomchangeController, UsersettingsController, ContactsmanagerController) {
 
 	var controllers = {
 		MediastreamController: MediastreamController,
 		StatusmessageController: StatusmessageController,
 		ChatroomController: ChatroomController,
 		RoomchangeController: RoomchangeController,
-		UsersettingsController: UsersettingsController
+		UsersettingsController: UsersettingsController,
+		ContactsmanagerController: ContactsmanagerController
 	};
 
 	var initialize = function(angModule) {

static/js/directives/contactsmanager.js

@@ -1,68 +0,0 @@
-/*
- * Spreed WebRTC.
- * Copyright (C) 2013-2014 struktur AG
- *
- * This file is part of Spreed WebRTC.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, either version 3 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 Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- */
-define(['jquery', 'underscore', 'text!partials/contactsmanagerbutton.html', 'text!partials/contactsmanager.html'], function($, _, templateContactsManagerButton, templateContactsManager) {
-
-	return ['contacts', 'alertify', function(contacts, alertify) {
-
-		var contactsManagerController = ['$scope', '$modalInstance', 'contactData', 'data', 'defaultModalController', function($scope, $modalInstance, contactData, data, defaultModalController) {
-			$scope.contacts = [];
-			$scope.search = {};
-
-			var getContacts = function() {
-				$scope.contacts = contactData.getAll();
-			};
-			getContacts();
-			contacts.e.on('contactadded', function() {
-				getContacts();
-			});
-
-			// Set state based on default controller
-			defaultModalController[3]($scope, $modalInstance, data);
-		}];
-
-		var controller = ['$scope', '$modal', function($scope, $modal) {
-			var windowClass = 'contactsmanager';
-			var modalController = contactsManagerController;
-
-			$scope.contactsManager = function() {
-				alertify.dialog.buildCustom({
-					'windowClass': windowClass,
-					'header': _('Contacts Manager'),
-					'bodydom': templateContactsManager,
-					'footerdom': null,
-					'controller': modalController
-				});
-			};
-		}];
-
-		var link = function($scope, $element) {};
-
-		return {
-			scope: true,
-			restrict: 'E',
-			replace: true,
-			template: templateContactsManagerButton,
-			controller: controller,
-			link: link
-		};
-	}];
-
-});

static/js/directives/defaultdialog.js

@@ -0,0 +1,35 @@
+/*
+ * Spreed WebRTC.
+ * Copyright (C) 2013-2014 struktur AG
+ *
+ * This file is part of Spreed WebRTC.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+define(['text!partials/defaultdialog.html'], function(defaultDialogTemplate) {
+
+	// defautlDialog
+	return [function() {
+
+		return {
+			restrict: "AC",
+			replace: true,
+			transclude: true,
+			template: defaultDialogTemplate
+		}
+
+	}];
+
+});

static/js/directives/directives.js

@@ -37,7 +37,7 @@ define([
 	'directives/socialshare',
 	'directives/page',
 	'directives/contactrequest',
-	'directives/contactsmanager'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPicture, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, contactsManager) {
+	'directives/defaultdialog'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPicture, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog) {
 
 	var directives = {
 		onEnter: onEnter,
@@ -56,7 +56,7 @@ define([
 		socialShare: socialShare,
 		page: page,
 		contactRequest: contactRequest,
-		contactsManager: contactsManager
+		defaultDialog: defaultDialog
 	};
 
 	var initialize = function(angModule) {

static/js/directives/settings.js

@@ -22,7 +22,7 @@ define(['jquery', 'underscore', 'text!partials/settings.html'], function($, _, t
 
 	return ["$compile", "mediaStream", function($compile, mediaStream) {
 
-		var controller = ['$scope', 'desktopNotify', 'mediaSources', 'safeApply', 'availableLanguages', 'translation', 'localStorage', function($scope, desktopNotify, mediaSources, safeApply, availableLanguages, translation, localStorage) {
+		var controller = ['$scope', 'desktopNotify', 'mediaSources', 'safeApply', 'availableLanguages', 'translation', 'localStorage', 'dialogs', function($scope, desktopNotify, mediaSources, safeApply, availableLanguages, translation, localStorage, dialogs) {
 
 			$scope.layout.settings = false;
 			$scope.showAdvancedSettings = true;
@@ -73,6 +73,17 @@ define(['jquery', 'underscore', 'text!partials/settings.html'], function($, _, t
 					safeApply($scope);
 				});
 			};
+			$scope.openContactsManager = function() {
+				dialogs.create(
+					"/contactsmanager/main.html",
+					"ContactsmanagerController",
+					{
+						header: translation._("Contacts Manager")
+					}, {
+						wc: "contactsmanager"
+					}
+				)
+			};
 
 			$scope.checkDefaultMediaSources = function() {
 				if ($scope.master.settings.microphoneId && !$scope.mediaSources.hasAudioId($scope.master.settings.microphoneId)) {

static/js/services/alertify.js

@@ -53,16 +53,13 @@ define(["angular"], function(angular) {
 	return ["$window", "$modal", "$templateCache", "translation", function($window, $modal, $templateCache, translation) {
 
 		// Overwrite templates from dialogs with fontawesome/i18n variants.
-		$templateCache.put('/dialogs/error.html', '<div class="modal-header dialog-header-error"><button type="button" class="close" ng-click="close()">&times;</button><h4 class="modal-title text-danger"><span class="fa fa-warning"></span> <span ng-bind-html="header"></span></h4></div><div class="modal-body text-danger" ng-bind-html="msg"></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="close()">{{_("Close")}}</button></div>');
-		$templateCache.put('/dialogs/wait.html', '<div class="modal-header dialog-header-wait"><h4 class="modal-title"><span class="fa fa-clock-o"></span> Please Wait</h4></div><div class="modal-body"><p ng-bind-html="msg"></p><div class="progress progress-striped active"><div class="progress-bar progress-bar-info" ng-style="getProgress()"></div><span class="sr-only">{{progress}}% Complete</span></div></div>');
-		$templateCache.put('/dialogs/notify.html', '<div class="modal-header dialog-header-notify"><button type="button" class="close" ng-click="close()" class="pull-right">&times;</button><h4 class="modal-title text-info"><span class="fa fa-info-circle"></span> {{header}}</h4></div><div class="modal-body text-info" ng-bind-html="msg"></div><div class="modal-footer"><button type="button" class="btn btn-primary" ng-click="close()">{{_("Ok")}}</button></div>');
-		$templateCache.put('/dialogs/confirm.html', '<div class="modal-header dialog-header-confirm"><button type="button" class="close" ng-click="cancel()">&times;</button><h4 class="modal-title"><span class="fa fa-check-square-o"></span> {{header}}</h4></div><div class="modal-body" ng-bind-html="msg"></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="ok()">{{_("Ok")}}</button><button type="button" class="btn btn-primary" ng-click="cancel()">{{_("Cancel")}}</button></div>');
+		$templateCache.put('/dialogs/error.html', '<div class="modal-header dialog-header-error"><button type="button" class="close" ng-click="close()">&times;</button><h3 class="modal-title text-danger"><span class="fa fa-warning"></span> <span ng-bind-html="header"></span></h3></div><div class="modal-body text-danger" ng-bind-html="msg"></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="close()">{{_("Close")}}</button></div>');
+		$templateCache.put('/dialogs/wait.html', '<div class="modal-header dialog-header-wait"><h3 class="modal-title"><span class="fa fa-clock-o"></span> Please Wait</h3></div><div class="modal-body"><p ng-bind-html="msg"></p><div class="progress progress-striped active"><div class="progress-bar progress-bar-info" ng-style="getProgress()"></div><span class="sr-only">{{progress}}% Complete</span></div></div>');
+		$templateCache.put('/dialogs/notify.html', '<div class="modal-header dialog-header-notify"><button type="button" class="close" ng-click="close()" class="pull-right">&times;</button><h3 class="modal-title text-info"><span class="fa fa-info-circle"></span> {{header}}</h3></div><div class="modal-body text-info" ng-bind-html="msg"></div><div class="modal-footer"><button type="button" class="btn btn-primary" ng-click="close()">{{_("Ok")}}</button></div>');
+		$templateCache.put('/dialogs/confirm.html', '<div class="modal-header dialog-header-confirm"><button type="button" class="close" ng-click="cancel()">&times;</button><h3 class="modal-title"><span class="fa fa-check-square-o"></span> {{header}}</h3></div><div class="modal-body" ng-bind-html="msg"></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="ok()">{{_("Ok")}}</button><button type="button" class="btn btn-primary" ng-click="cancel()">{{_("Cancel")}}</button></div>');
 
 		// Add new template for prompt.
-		$templateCache.put('/dialogs/prompt.html', '<div class="modal-header"><h4 class="modal-title"><span class="fa fa-star"></span> <span ng-bind-html="header"></span></h4></div><div class="modal-body"><ng-form name="promptDialog" novalidate role="form"><div class="form-group input-group-lg" ng-class="{true: \'has-error\'}[promptDialog.text.$dirty && promptDialog.text.$invalid]"><label class="control-label"></label><input type="text" id="{{id}}" class="form-control" name="text" ng-model="input.text" ng-keyup="hitEnter($event)" required></div></ng-form></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="cancel()">{{cancelButtonLabel}}</button><button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="(promptDialog.$dirty && promptDialog.$invalid) || promptDialog.$pristine">{{okButtonLabel}}</button></div>');
-		$templateCache.put('/base/headerdom.html', '<div class="modal-header"><button type="button" class="close" ng-click="close()">×</button><h4 class="modal-title" ng-bind-html="header"></h4></div>');
-		$templateCache.put('/base/bodydom.html', '<div class="modal-body" ng-bind-html="msg"></div>');
-		$templateCache.put('/base/footerdom.html', '<div class="modal-footer"><button type="button" class="btn btn-default" ng-click="close()">{{_("Close")}}</button></div>');
+		$templateCache.put('/dialogs/prompt.html', '<div class="modal-header"><h3 class="modal-title"><span class="fa fa-star"></span> <span ng-bind-html="header"></span></h3></div><div class="modal-body"><ng-form name="promptDialog" novalidate role="form"><div class="form-group input-group-lg" ng-class="{true: \'has-error\'}[promptDialog.text.$dirty && promptDialog.text.$invalid]"><label class="control-label"></label><input type="text" id="{{id}}" class="form-control" name="text" ng-model="input.text" ng-keyup="hitEnter($event)" required></div></ng-form></div><div class="modal-footer"><button type="button" class="btn btn-default" ng-click="cancel()">{{cancelButtonLabel}}</button><button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="(promptDialog.$dirty && promptDialog.$invalid) || promptDialog.$pristine">{{okButtonLabel}}</button></div>');
 
 		var defaultMessages = {
 			error: translation._("Error"),
@@ -146,40 +143,6 @@ define(["angular"], function(angular) {
 						}
 					}, 100);
 				});
-			},
-			buildCustom: function(data) {
-				var modaldom = '';
-
-				if (data.headerdom) {
-					modaldom += data.headerdom;
-				} else {
-					modaldom += $templateCache.get('/base/headerdom.html');
-				}
-
-				if (data.bodydom) {
-					modaldom += data.bodydom;
-				} else {
-					modaldom += $templateCache.get('/base/bodydom.html');
-				}
-
-				if (data.footerdom === undefined) {
-					modaldom += $templateCache.get('/base/footerdom.html');
-				// footer should not be included
-				} else if (data.footerdom === null) {
-					modaldom += '';
-				} else {
-					modaldom += data.footerdom;
-				}
-
-				$modal.open({
-					template: modaldom,
-					controller: data.controller || modalController,
-					resolve: {
-						data: function() { return data; },
-						defaultModalController: function() { return modalController; }
-					},
-					windowClass: data.windowClass || ''
-				});
 			}
 		};
 

static/js/services/contacts.js

@@ -18,7 +18,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-define(['underscore', 'jquery', 'modernizr', 'sjcl'], function(underscore, $, Modernizr, sjcl) {
+define(['underscore', 'jquery', 'modernizr', 'sjcl', 'text!partials/contactsmanager.html'], function(underscore, $, Modernizr, sjcl, templateContactsManager) {
 
 	var Database = function(name) {
 		this.version = 3;
@@ -120,7 +120,10 @@ define(['underscore', 'jquery', 'modernizr', 'sjcl'], function(underscore, $, Mo
 	};
 
 	// contacts
-	return ["appData", "contactData", "mediaStream", function(appData, contactData, mediaStream) {
+	return ["appData", "contactData", "mediaStream", "$templateCache", function(appData, contactData, mediaStream, $templateCache) {
+
+		// Inject our templates.
+		$templateCache.put('/contactsmanager/main.html', templateContactsManager);
 
 		var Contacts = function() {
 

static/js/services/dialogs.js

@@ -0,0 +1,50 @@
+/*
+ * Spreed WebRTC.
+ * Copyright (C) 2013-2014 struktur AG
+ *
+ * This file is part of Spreed WebRTC.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+define(["angular"], function(angular) {
+
+	// dialogs
+	return ["$window", "$modal", "$templateCache", "translation", function($window, $modal, $templateCache, translation) {
+
+		return {
+
+			create: function(url, controller, data, opts) {
+
+				return $modal.open({
+					templateUrl: url,
+					controller: controller,
+					keyboard : opts.kb,
+					backdrop : opts.bd,
+					windowClass: opts.wc,
+					size: opts.ws,
+					resolve: {
+						data: function() {
+							return data;
+						}
+					}
+				});
+
+			}
+
+		}
+
+	}];
+
+});

static/js/services/services.js

@@ -49,7 +49,8 @@ define([
 	'services/contacts',
 	'services/buddysession',
 	'services/localstorage',
-	'services/animationframe'], function(_,
+	'services/animationframe',
+	'services/dialogs'], function(_,
 desktopNotify,
 playSound,
 safeApply,
@@ -78,7 +79,8 @@ contactData,
 contacts,
 buddySession,
 localStorage,
-animationFrame) {
+animationFrame,
+dialogs) {
 
 	var services = {
 		desktopNotify: desktopNotify,
@@ -109,7 +111,8 @@ animationFrame) {
 		contacts: contacts,
 		buddySession: buddySession,
 		localStorage: localStorage,
-		animationFrame: animationFrame
+		animationFrame: animationFrame,
+		dialogs: dialogs
 	};
 
 	var initialize = function(angModule) {

static/partials/contactsmanager.html

@@ -1,4 +1,4 @@
-<div class="modal-body">
+<div default-dialog>
   <div class="row head">
      <div class="col-xs-7" ng-if="contacts.length === 0">
       <p>{{_('You have no contacts.')}}</p>

static/partials/contactsmanagerbutton.html

@@ -1,6 +0,0 @@
-<div class="form-group" ng-if="userid">
-  <label class="col-xs-4 control-label">{{_('Contacts')}}</label>
-  <div class="col-xs-8">
-    <button class="btn btn-success" ng-click="contactsManager()">{{_('Manage Contacts')}}</button>
-  </div>
-</div>

static/partials/defaultdialog.html

@@ -0,0 +1,5 @@
+<div>
+	<div class="modal-header"><button type="button" class="close" ng-click="close()">×</button><h3 class="modal-title" ng-bind-html="header"></h3></div>
+	<div class="modal-body" ng-transclude></div>
+	<div class="modal-footer"><button type="button" class="btn btn-default" ng-click="$close()">{{_("Close")}}</button></div>
+</div>

static/partials/settings.html

@@ -67,7 +67,12 @@
               </div>
             </div>
           </div>
-          <contacts-manager/>
+          <div class="form-group" ng-if="userid">
+            <label class="col-xs-4 control-label">{{_('Contacts')}}</label>
+            <div class="col-xs-8">
+              <button class="btn btn-success" ng-click="openContactsManager()">{{_('Manage Contacts')}}</button>
+            </div>
+          </div>
         </div>
       </div>
       <div ng-show="mediaSources.supported || isChrome">