Browse Source

Stream lined jQuery usage and ported code to Angular whenever possible. This changes plugin API as plugins now have to use Angular $q instead of jQuery Deferreds.

pull/154/merge
Simon Eisenmann 11 years ago
parent
commit
ec9252d708
  1. 49
      static/js/app.js
  2. 10
      static/js/controllers/chatroomcontroller.js
  3. 14
      static/js/directives/audiovideo.js
  4. 6
      static/js/directives/buddypicturecapture.js
  5. 2
      static/js/directives/buddypictureupload.js
  6. 2
      static/js/directives/presentation.js
  7. 4
      static/js/directives/screenshare.js
  8. 8
      static/js/directives/socialshare.js
  9. 21
      static/js/directives/youtubevideo.js
  10. 135
      static/js/main.js
  11. 6
      static/js/services/buddylist.js
  12. 14
      static/js/services/videolayout.js

49
static/js/app.js

@ -38,6 +38,7 @@ define([ @@ -38,6 +38,7 @@ define([
'angular-animate',
'angular-humanize',
'angular-route',
'mobile-events'
], function(require, $, _, angular, modernizr, moment, services, directives, filters, controllers, languages) {
@ -65,12 +66,13 @@ define([ @@ -65,12 +66,13 @@ define([
var appConfig = {};
// Implement translation store.
var TranslationData = function(default_language) {
var TranslationData = function(default_language, launcher) {
// Create data structure.
this.data = {
locale_data: {}
};
this.lang = this.default_lang = default_language;
this.getHTTP = launcher.$http.get;
};
TranslationData.prototype.language = function() {
// Return language.
@ -97,25 +99,24 @@ define([ @@ -97,25 +99,24 @@ define([
};
TranslationData.prototype.load = function(domain, url) {
var that = this;
return $.ajax({
dataType: "json",
url: url,
success: function(data) {
return this.getHTTP(url).
success(function(data) {
//console.log("loaded translation data", data);
that.add(domain, data);
},
error: function(err, textStatus, errorThrown) {
console.warn("Failed to load translation data: " + errorThrown);
}).
error(function(data, status) {
console.warn("Failed to load translation data: " + status);
that.add(domain, null);
}
});
});
};
TranslationData.prototype.get = function() {
return this.data;
};
var translationData = new TranslationData("en");
var create = function(ms) {
var create = function(ms, launcher) {
// Create translation data instance.
var translationData = launcher.translationData = new TranslationData("en", launcher);
var modules = ['ui.bootstrap', 'ngSanitize', 'ngAnimate', 'ngHumanize', 'ngRoute'];
if (ms && ms.length) {
@ -183,11 +184,11 @@ define([ @@ -183,11 +184,11 @@ define([
// breaking changes to plugins can check on it.
var apiversion = 1.1;
var initialize = function(app) {
var initialize = function(app, launcher) {
var deferred = $.Deferred();
var deferred = launcher.$q.defer();
var globalContext = JSON.parse($("#globalcontext").text());
var globalContext = JSON.parse(document.getElementById("globalcontext").innerHTML);
if (!globalContext.Cfg.Version) {
globalContext.Cfg.Version = "unknown";
}
@ -240,16 +241,19 @@ define([ @@ -240,16 +241,19 @@ define([
console.info("Selected language: "+lang);
// Set language and load default translations.
translationData.lang = lang;
var domain = "messages";
if (lang === translationData.default_lang) {
launcher.translationData.lang = lang;
var translationDomain = "messages";
if (lang === launcher.translationData.default_lang) {
// No need to load default language as it is built in.
translationData.add(domain, null);
launcher.translationData.add(translationDomain, null);
deferred.resolve();
} else {
// Load default translation catalog.
var url = require.toUrl('translation/' + domain + "-" + lang + '.json');
$.when(translationData.load(domain, url)).always(function() {
var url = require.toUrl('translation/'+translationDomain+"-"+lang+'.json');
launcher.translationData.load(translationDomain, url).then(function() {
deferred.resolve();
}, function() {
// Ignore errors.
deferred.resolve();
});
}
@ -257,7 +261,7 @@ define([ @@ -257,7 +261,7 @@ define([
// Set momemt language.
moment.lang(lang);
return deferred.promise();
return deferred.promise;
};
@ -266,7 +270,6 @@ define([ @@ -266,7 +270,6 @@ define([
initialize: initialize,
query: urlQuery,
config: appConfig,
translationData: translationData,
apiversion: apiversion
};

10
static/js/controllers/chatroomcontroller.js

@ -23,10 +23,10 @@ define(['jquery', 'underscore', 'moment', 'text!partials/fileinfo.html', 'text!p @@ -23,10 +23,10 @@ define(['jquery', 'underscore', 'moment', 'text!partials/fileinfo.html', 'text!p
// ChatroomController
return ["$scope", "$element", "$window", "safeMessage", "safeDisplayName", "$compile", "$filter", "translation", function($scope, $element, $window, safeMessage, safeDisplayName, $compile, $filter, translation) {
$scope.outputElement = $(".output", $element);
$scope.inputElement = $(".input", $element);
$scope.bodyElement = $(".chatbody", $element);
$scope.menuElement = $(".chatmenu", $element);
$scope.outputElement = $element.find(".output");
$scope.inputElement = $element.find(".input");
$scope.bodyElement = $element.find(".chatbody");
$scope.menuElement = $element.find(".chatmenu");
var lastSender = null;
var lastDate = null;
var lastMessageContainer = null;
@ -159,7 +159,7 @@ define(['jquery', 'underscore', 'moment', 'text!partials/fileinfo.html', 'text!p @@ -159,7 +159,7 @@ define(['jquery', 'underscore', 'moment', 'text!partials/fileinfo.html', 'text!p
$scope.canScroll = function() {
var o = $scope.outputElement.get(0);
var o = $scope.outputElement[0];
if ((o.clientHeight - 20) < o.scrollHeight) {
if (!scrollAfterInput && (o.clientHeight + 20) < (o.scrollHeight - o.scrollTop)) {
// Manually scrolled -> do nothing.

14
static/js/directives/audiovideo.js

@ -33,13 +33,13 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/ @@ -33,13 +33,13 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
return id;
};
$scope.container = $element.get(0);
$scope.container = $element[0];
$scope.layoutparent = $element.parent();
$scope.remoteVideos = $element.find(".remoteVideos").get(0);
$scope.localVideo = $element.find(".localVideo").get(0);
$scope.miniVideo = $element.find(".miniVideo").get(0);
$scope.mini = $element.find(".miniContainer").get(0);
$scope.remoteVideos = $element.find(".remoteVideos")[0];
$scope.localVideo = $element.find(".localVideo")[0];
$scope.miniVideo = $element.find(".miniVideo")[0];
$scope.mini = $element.find(".miniContainer")[0];
$scope.hasUsermedia = false;
$scope.isActive = false;
@ -85,7 +85,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/ @@ -85,7 +85,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
$($scope.remoteVideos).append(clonedElement);
clonedElement.data("peerid", scope.peerid);
scope.element = clonedElement;
var video = clonedElement.find("video").get(0);
var video = clonedElement.find("video")[0];
$window.attachMediaStream(video, stream);
// Waiter callbacks also count as connected, as browser support (FireFox 25) is not setting state changes properly.
videoWaiter.wait(video, stream, function(withvideo) {
@ -174,7 +174,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/ @@ -174,7 +174,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
//console.log("Toggle full screen", BigScreen.enabled, $scope.isActive, $scope.hasUsermedia);
if (BigScreen.enabled && ($scope.isActive || $scope.hasUsermedia)) {
$scope.layoutparent.toggleClass("fullscreen");
BigScreen.toggle($scope.layoutparent.get(0));
BigScreen.toggle($scope.layoutparent[0]);
}
};

6
static/js/directives/buddypicturecapture.js

@ -176,10 +176,10 @@ define(['jquery', 'underscore', 'text!partials/buddypicturecapture.html'], funct @@ -176,10 +176,10 @@ define(['jquery', 'underscore', 'text!partials/buddypicturecapture.html'], funct
var link = function($scope, $element, $attrs, modelController) {
$scope.video = $element.find("video").get(0);
$scope.video = $element.find("video")[0];
$scope.flash = $element.find(".videoFlash");
$scope.canvasPic = $element.find("canvas.videoPic").get(0);
$scope.canvasPrev = $element.find("canvas.videoPrev").get(0);
$scope.canvasPic = $element.find("canvas.videoPic")[0];
$scope.canvasPrev = $element.find("canvas.videoPrev")[0];
$($scope.canvasPic).attr($scope.captureSize);
$scope.save = function() {

2
static/js/directives/buddypictureupload.js

@ -211,7 +211,7 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi @@ -211,7 +211,7 @@ define(['jquery', 'underscore', 'text!partials/buddypictureupload.html'], functi
var link = function($scope, $element) {
$scope.prevImage = $element.find("img.preview").get(0);
$scope.prevImage = $element.find("img.preview")[0];
$scope.clearInput = function() {
$element.find("input[type=file]")[0].value = "";
};

2
static/js/directives/presentation.js

@ -685,7 +685,7 @@ define(['jquery', 'underscore', 'text!partials/presentation.html', 'bigscreen'], @@ -685,7 +685,7 @@ define(['jquery', 'underscore', 'text!partials/presentation.html', 'bigscreen'],
if (elem) {
BigScreen.toggle(elem);
} else {
BigScreen.toggle(pane.get(0));
BigScreen.toggle(pane[0]);
}
}

4
static/js/directives/screenshare.js

@ -132,7 +132,7 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials @@ -132,7 +132,7 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials
peerTemplate(subscope, function(clonedElement, scope) {
pane.append(clonedElement);
scope.element = clonedElement;
var video = clonedElement.find("video").get(0);
var video = clonedElement.find("video")[0];
$window.attachMediaStream(video, stream);
videoWaiter.wait(video, stream, function() {
console.log("Screensharing size: ", video.videoWidth, video.videoHeight);
@ -311,7 +311,7 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials @@ -311,7 +311,7 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials
if (elem) {
BigScreen.toggle(elem);
} else {
BigScreen.toggle(pane.get(0));
BigScreen.toggle(pane[0]);
}
}

8
static/js/directives/socialshare.js

@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
define(['jquery', 'text!partials/socialshare.html'], function($, template) {
define(['text!partials/socialshare.html'], function(template) {
var urls = {
email: "mailto:?subject=_TEXT_%20_URL_",
@ -49,13 +49,11 @@ define(['jquery', 'text!partials/socialshare.html'], function($, template) { @@ -49,13 +49,11 @@ define(['jquery', 'text!partials/socialshare.html'], function($, template) {
$scope.$on("room.updated", function(ev, room) {
$scope.roomlink = rooms.link(room);
});
$scope.$on("room.left", function(ev) {
$scope.roomlink = null;
});
$element.on("click", "a", function(event) {
var nw = $(event.currentTarget).data("nw");
$element.find("a").on("click", function(event) {
var nw = event.currentTarget.getAttribute("data-nw");
var url = makeUrl(nw, $scope.roomlink);
if (url) {
if (nw === "email") {

21
static/js/directives/youtubevideo.js

@ -20,15 +20,18 @@ @@ -20,15 +20,18 @@
*/
define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'], function($, _, template, BigScreen) {
return ["$window", "$document", "mediaStream", "alertify", "translation", "safeApply", "appData", function($window, $document, mediaStream, alertify, translation, safeApply, appData) {
return ["$window", "$document", "mediaStream", "alertify", "translation", "safeApply", "appData", "$q", function($window, $document, mediaStream, alertify, translation, safeApply, appData, $q) {
var YOUTUBE_IFRAME_API_URL = "//www.youtube.com/iframe_api";
var isYouTubeIframeAPIReady = $.Deferred();
$window.onYouTubeIframeAPIReady = function() {
console.log("YouTube IFrame ready");
isYouTubeIframeAPIReady.resolve();
};
var isYouTubeIframeAPIReady = (function() {
var d = $q.defer();
$window.onYouTubeIframeAPIReady = function() {
console.log("YouTube IFrame ready");
d.resolve();
};
return d.promise;
})();
var controller = ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
@ -68,7 +71,7 @@ define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'], @@ -68,7 +71,7 @@ define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'],
$scope.volumebarVisible = true;
$scope.volume = null;
isYouTubeIframeAPIReady.done(function() {
isYouTubeIframeAPIReady.then(function() {
$scope.$apply(function(scope) {
scope.youtubeAPIReady = true;
});
@ -270,7 +273,7 @@ define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'], @@ -270,7 +273,7 @@ define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'],
playerReady = $.Deferred();
}
isYouTubeIframeAPIReady.done(function() {
isYouTubeIframeAPIReady.then(function() {
if (!player) {
var origin = $window.location.protocol + "//" + $window.location.host;
player = new $window.YT.Player("youtubeplayer", {
@ -572,7 +575,7 @@ define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'], @@ -572,7 +575,7 @@ define(['jquery', 'underscore', 'text!partials/youtubevideo.html', 'bigscreen'],
var compile = function(tElement, tAttr) {
return function(scope, iElement, iAttrs, controller) {
$(iElement).on("dblclick", "#youtubecontainer", _.debounce(function(event) {
$(iElement).find("#youtubecontainer").on("dblclick", _.debounce(function(event) {
scope.toggleFullscreen(event.delegateTarget);
}, 100, true));
}

135
static/js/main.js

@ -190,85 +190,102 @@ if (Object.create) { @@ -190,85 +190,102 @@ if (Object.create) {
'require',
'base'], function($, _, angular, require) {
// Dynamic app loader with plugin support.
var load = ['app'];
_.each(document.getElementsByTagName('script'), function(script) {
var dataPlugin = script.getAttribute('data-plugin');
if (dataPlugin) {
load.push(dataPlugin);
}
});
var launcherApp = angular.module('launcherApp', []);
launcherApp.run(["$q", "$window", "$http", function($q, $window, $http) {
require(load, function(App) {
// Dynamic app loader with plugin support.
var load = ['app'];
_.each($window.document.getElementsByTagName('script'), function(script) {
var dataPlugin = script.getAttribute('data-plugin');
if (dataPlugin) {
load.push(dataPlugin);
}
});
// All other arguments are plugins.
var args = Array.prototype.slice.call(arguments, 1);
require(load, function(App) {
// Prepare our promised based initialization.
var promises = [];
var loading = $.Deferred();
promises.push(loading.promise());
// All other arguments are plugins.
var args = Array.prototype.slice.call(arguments, 1);
// Add Angular modules from plugins.
var modules = [];
_.each(args, function(plugin) {
if (plugin && plugin.module) {
plugin.module(modules);
}
});
// Prepare our promised based initialization.
var promises = [];
var loading = $q.defer();
promises.push(loading.promise);
// External plugin support.
var externalPlugin;
if (window.externalPlugin) {
externalPlugin = window.externalPlugin($, _, angular, App);
if (externalPlugin && externalPlugin.module) {
externalPlugin.module(modules);
// Add Angular modules from plugins.
var modules = [];
_.each(args, function(plugin) {
if (plugin && plugin.module) {
plugin.module(modules);
}
});
// External plugin support.
var externalPlugin;
if ($window.externalPlugin) {
externalPlugin = $window.externalPlugin($, _, angular, App);
if (externalPlugin && externalPlugin.module) {
externalPlugin.module(modules);
}
}
}
// Create Angular app.
var app = App.create(modules);
// Launcher helper API.
var launcher = {
$q: $q,
$http: $http
};
// Create Angular app.
var app = App.create(modules, launcher);
// Helper function to initialize with deferreds.
var initialize = function(obj) {
if (obj && obj.initialize) {
var result = obj.initialize(app);
if (result && result.done) {
// If we got a promise add it to our wait queue.
promises.push(result);
// Helper function to initialize with deferreds.
var initialize = function(obj) {
if (obj && obj.initialize) {
var result = obj.initialize(app, launcher);
if (result && result.then) {
// If we got a promise add it to our wait queue.
promises.push(result);
}
}
}
};
};
// Wait until dom is ready before we initialize.
angular.element(document).ready(function() {
// Wait until dom is ready before we initialize.
angular.element(document).ready(function() {
// Init base application.
initialize(App);
// Init base application.
initialize(App);
// Init plugins.
_.each(args, function(plugin) {
initialize(plugin);
});
// Init plugins.
_.each(args, function(plugin) {
initialize(plugin);
});
// Init external plugin.
if (externalPlugin) {
initialize(externalPlugin);
}
// Init external plugin.
if (externalPlugin) {
initialize(externalPlugin);
}
// Resolve the base loader.
loading.resolve();
// Resolve the base loader.
loading.resolve();
// Wait for all others to complete and then boostrap the app.
$.when.apply($, promises).done(function() {
console.log("Bootstrapping ...");
angular.bootstrap(document, ['app'], {
strictDi: true
// Wait for all others to complete and then boostrap the main app.
$q.all(promises).then(function() {
console.log("Bootstrapping ...");
angular.bootstrap(document, ['app'], {
strictDi: true
});
});
});
});
}]);
// Bootstrap our launcher app.
console.log("Launching ...");
angular.bootstrap(null, ['launcherApp'], {
strictDi: true
});
});

6
static/js/services/buddylist.js

@ -601,7 +601,7 @@ define(['jquery', 'angular', 'underscore', 'modernizr', 'avltree', 'text!partial @@ -601,7 +601,7 @@ define(['jquery', 'angular', 'underscore', 'modernizr', 'avltree', 'text!partial
delete status.message;
// Convert buddy image.
if (status.buddyPicture) {
var img = buddyPicture.toString(scope.element.find(".buddyPicture img").get(0));
var img = buddyPicture.toString(scope.element.find(".buddyPicture img")[0]);
if (img) {
status.buddyPicture = img;
} else {
@ -645,12 +645,12 @@ define(['jquery', 'angular', 'underscore', 'modernizr', 'avltree', 'text!partial @@ -645,12 +645,12 @@ define(['jquery', 'angular', 'underscore', 'modernizr', 'avltree', 'text!partial
Buddylist.prototype.click = function(buddyElement, target) {
var be = buddyElement.get(0);
var be = buddyElement[0];
// Traverse up to find click action.
var action;
do {
action = $(target).data("action");
target = $(target).parent().get(0);
target = $(target).parent()[0];
} while (!action && target && target !== be);
// Make call the default action.

14
static/js/services/videolayout.js

@ -30,7 +30,7 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern @@ -30,7 +30,7 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
}
if (videos.length) {
if (videos.length === 1) {
var remoteVideo = streams[videos[0]].element.find("video").get(0);
var remoteVideo = streams[videos[0]].element.find("video")[0];
if (remoteVideo) {
size.width = remoteVideo.videoWidth;
size.height = remoteVideo.videoHeight;
@ -183,7 +183,7 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern @@ -183,7 +183,7 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
var $mini = $(scope.mini);
this.miniParent = $mini.parent();
$mini.prependTo(scope.remoteVideos);
$mini.find("video").get(0).play();
$mini.find("video")[0].play();
this.countSelfAsRemote = true;
}
Democrazy.prototype = Object.create(OnePeople.prototype);
@ -193,7 +193,7 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern @@ -193,7 +193,7 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
OnePeople.prototype.close.call(this, container, scope, controller);
var $mini = $(scope.mini);
$mini.appendTo(this.miniParent);
$mini.find("video").get(0).play();
$mini.find("video")[0].play();
this.miniParent = null;
};
@ -202,7 +202,7 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern @@ -202,7 +202,7 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
var ConferenceKiosk = function(container, scope, controller) {
this.remoteVideos = $(container).find(".remoteVideos");
this.bigVideo = $("<div>").addClass("bigVideo").get(0);
this.bigVideo = $("<div>").addClass("bigVideo")[0];
this.remoteVideos.before(this.bigVideo);
this.big = null;
@ -226,12 +226,12 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern @@ -226,12 +226,12 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
if (this.big) {
// Add old video back.
this.big.insertAfter(remoteVideo);
this.big.find("video").get(0).play();
this.big.find("video")[0].play();
}
this.big = remoteVideo;
remoteVideo.appendTo(this.bigVideo);
remoteVideo.find("video").get(0).play();
remoteVideo.find("video")[0].play();
};
@ -287,7 +287,7 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern @@ -287,7 +287,7 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
this.closed = true;
if (this.big) {
this.remoteVideos.append(this.big);
this.big.find("video").get(0).play();
this.big.find("video")[0].play();
}
this.big = null;
this.bigVideo.remove()

Loading…
Cancel
Save