Skip to content

Commit

Permalink
Bug 999480 - Panel to use a router & templated views, r=Standard8
Browse files Browse the repository at this point in the history
  • Loading branch information
@n1k0
n1k0 committed Apr 23, 2014
1 parent 180608a commit 41c83b3
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 65 deletions.
71 changes: 55 additions & 16 deletions browser/components/loop/content/js/panel.js
View file
Expand Up @@ -7,40 +7,66 @@
Components.utils.import("resource://gre/modules/Services.jsm");

var loop = loop || {};
loop.panel = (function(mozL10n) {
loop.panel = (function(_, mozL10n) {
"use strict";

var baseServerUrl = Services.prefs.getCharPref("loop.server"),
panelView,
sharedViews = loop.shared.views,
// aliasing translation function as __ for concision
__ = mozL10n.get;

/**
* Panel router.
* @type {loop.shared.router.BaseRouter}
*/
var router;

/**
* Panel view.
*
* XXX view layout changes should be handled by a router really.
*/
var PanelView = Backbone.View.extend({
el: "#default-view",
var PanelView = sharedViews.BaseView.extend({
template: _.template([
'<div class="description">',
' <p data-l10n-id="get_link_to_share"></p>',
'</div>',
'<div class="action">',
' <p class="invite">',
' <input type="text" name="caller" data-l10n-id="caller">',
' <a class="get-url btn btn-success disabled" href=""',
' data-l10n-id="get_a_call_url"></a>',
' </p>',
' <p class="result hide">',
' <input id="call-url" type="url" readonly>',
' <a class="go-back btn btn-info" href="" data-l10n-id="new_url"></a>',
' </p>',
'</div>',
].join("")),

className: "share generate-url",

events: {
"keyup input[name=caller]": "changeButtonState",
"click a.get-url": "getCallUrl",
"click a.go-back": "goBack"
},

initialize: function() {
initialize: function(options) {
options = options || {};
if (!options.notifier) {
throw new Error("missing required notifier");
}
this.notifier = options.notifier;
this.client = new loop.shared.Client({
baseServerUrl: baseServerUrl
});
this.notifier = new loop.shared.views.NotificationListView({
el: this.$(".messages")
}).render();
},

getNickname: function() {
return this.$("input[name=caller]").val();
},

getCallUrl: function(event) {
event.preventDefault();
var nickname = this.$("input[name=caller]").val();
var callback = function(err, callUrl) {
if (err) {
this.notifier.errorL10n("unable_retrieve_url");
Expand All @@ -49,7 +75,7 @@ loop.panel = (function(mozL10n) {
this.onCallUrlReceived(callUrl);
}.bind(this);

this.client.requestCallUrl(nickname, callback);
this.client.requestCallUrl(this.getNickname(), callback);
},

goBack: function(event) {
Expand All @@ -76,16 +102,29 @@ loop.panel = (function(mozL10n) {
}
});

var PanelRouter = loop.shared.router.BaseRouter.extend({
routes: {
"": "home"
},

home: function() {
this.loadView(new PanelView({notifier: this._notifier}));
}
});

/**
* Panel initialisation.
*/
function init() {
panelView = new PanelView();
panelView.render();
router = new PanelRouter({
notifier: new sharedViews.NotificationListView({el: "#messages"})
});
Backbone.history.start();
}

return {
init: init,
PanelView: PanelView
PanelView: PanelView,
PanelRouter: PanelRouter
};
})(document.mozL10n);
})(_, document.mozL10n);
29 changes: 6 additions & 23 deletions browser/components/loop/content/panel.html
View file
Expand Up @@ -9,29 +9,11 @@
<link rel="stylesheet" type="text/css" href="shared/css/common.css">
<link rel="stylesheet" type="text/css" href="shared/css/panel.css">
</head>
<body onload="loop.panel.init();">
<!-- XXX (n1k0): i10n tbd later as these are temporary texts. -->
<div id="default-view" class="share generate-url">
<div class="description">
<p data-l10n-id="get_link_to_share">
Get a link to share with a friend to Video Chat.
</p>
</div>
<div class="action">
<div class="messages"></div>
<p class="invite">
<input type="text" name="caller" data-l10n-id="caller">
<a class="get-url btn btn-success disabled" href=""
data-l10n-id="get_a_call_url">Get a call url</a>
</p>
<p class="result hide">
<input id="call-url" type="url" readonly>
<a class="go-back btn btn-info" href="" data-l10n-id="new_url">
New url
</a>
</p>
</div>
</div>
<body class="panel" onload="loop.panel.init();">

<div id="messages"></div>

<div id="main"></div>

<!-- XXX (adam): Should we import our own version of Webl10n?
What we have here is a copy of the version from pdf.js
Expand All @@ -46,6 +28,7 @@
<script type="text/javascript" src="shared/libs/backbone-1.1.2.js"></script>
<script type="text/javascript" src="shared/js/client.js"></script>
<script type="text/javascript" src="shared/js/models.js"></script>
<script type="text/javascript" src="shared/js/router.js"></script>
<script type="text/javascript" src="shared/js/views.js"></script>
<script type="text/javascript" src="js/panel.js"></script>
</body>
Expand Down
70 changes: 44 additions & 26 deletions browser/components/loop/test/desktop-local/panel_test.js
View file
Expand Up @@ -9,7 +9,7 @@ var expect = chai.expect;
describe("loop.panel", function() {
"use strict";

var sandbox, fakeXHR, requests = [];
var sandbox, notifier, fakeXHR, requests = [];

beforeEach(function() {
sandbox = sinon.sandbox.create();
Expand All @@ -19,41 +19,61 @@ describe("loop.panel", function() {
fakeXHR.xhr.onCreate = function (xhr) {
requests.push(xhr);
};
notifier = {
clear: sandbox.spy(),
notify: sandbox.spy(),
warn: sandbox.spy(),
warnL10n: sandbox.spy(),
error: sandbox.spy(),
errorL10n: sandbox.spy()
};
});

afterEach(function() {
$("#fixtures").empty();
sandbox.restore();
});

describe("loop.panel.PanelRouter", function() {
describe("#constructor", function() {
it("should require a notifier", function() {
expect(function() {
new loop.panel.PanelRouter();
}).to.Throw(Error, /missing required notifier/);
});
});

describe("constructed", function() {
var router;

beforeEach(function() {
router = new loop.panel.PanelRouter({notifier: notifier});
sandbox.stub(router, "loadView");
});

describe("#home", function() {
it("should load the PanelView", function() {
router.home();

sinon.assert.calledOnce(router.loadView);
sinon.assert.calledWithExactly(router.loadView,
sinon.match.instanceOf(loop.panel.PanelView));
});
});
});
});

describe("loop.panel.PanelView", function() {
beforeEach(function() {
$("#fixtures").append([
'<div id="default-view" class="share generate-url">',
' <div class="description">',
' <p>Get a link to share with a friend to Video Chat.</p>',
' </div>',
' <div class="action">',
' <div class="messages"></div>',
' <p class="invite">',
' <input type="text" placeholder="Nickname of the future caller"',
' name="caller" value="foo"/>',
' <a class="get-url" href="">Get a call url</a>',
' </p>',
' <p class="result hide">',
' <input id="call-url" type="url" readonly>',
' <a class="get-url" href="">Renew</a>',
' </p>',
' </div>',
'</div>'
].join(""));
$("#fixtures").append('<div id="messages"></div><div id="main"></div>');
});

describe("#getCallUrl", function() {
it("should request a call url to the server", function() {
var requestCallUrl = sandbox.stub(loop.shared.Client.prototype,
"requestCallUrl");
var view = new loop.panel.PanelView();
var view = new loop.panel.PanelView({notifier: notifier});
sandbox.stub(view, "getNickname").returns("foo");

view.getCallUrl({preventDefault: sandbox.spy()});

Expand All @@ -66,8 +86,7 @@ describe("loop.panel", function() {
loop.shared.Client.prototype, "requestCallUrl", function(_, cb) {
cb("fake error");
});
var view = new loop.panel.PanelView();
sandbox.stub(view.notifier, "errorL10n");
var view = new loop.panel.PanelView({notifier: notifier});

view.getCallUrl({preventDefault: sandbox.spy()});

Expand All @@ -79,7 +98,7 @@ describe("loop.panel", function() {

describe("#onCallUrlReceived", function() {
it("should update the text field with the call url", function() {
var view = new loop.panel.PanelView();
var view = new loop.panel.PanelView({notifier: notifier});
view.render();

view.onCallUrlReceived("http://call.me/");
Expand All @@ -88,8 +107,7 @@ describe("loop.panel", function() {
});

it("should reset all pending notifications", function() {
var view = new loop.panel.PanelView().render();
sandbox.stub(view.notifier, "clear");
var view = new loop.panel.PanelView({notifier: notifier}).render();

view.onCallUrlReceived("http://call.me/");

Expand Down

0 comments on commit 41c83b3

Please sign in to comment.