Skip to content

Commit

Permalink
Refactoring ui/* widgets to be more extensible
Browse files Browse the repository at this point in the history
  • Loading branch information
@sebdeckers
sebdeckers committed Oct 15, 2011
1 parent bc47f2d commit 24e90a4
Show file tree
Hide file tree
Showing 12 changed files with 177 additions and 175 deletions.
146 changes: 73 additions & 73 deletions core/session.js
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,90 @@
define(["core/events", "core/settings", "core/css", "core/template"], function (events, settings, css, template) {
var $ = document.querySelector.bind(document);
var $$ = function () {return Array.prototype.slice.call(document.querySelectorAll.apply(document, arguments));};
var $ = document.querySelector.bind(document),
$$ = function () {return Array.prototype.slice.call(document.querySelectorAll.apply(document, arguments));},

var showPanel = function (id) {
$$("#signin > article").forEach(function (element) {element.classList.add("hide");});
if (id) {
$(id).classList.remove("hide");
}
};
showPanel = function (id) {
$$("#signin > article").forEach(function (element) {element.classList.add("hide");});
if (id) {
$(id).classList.remove("hide");
}
},

var showWarning = function (id) {
$$("#signin-credentials p.warn").forEach(function (element) {element.classList.add("hide");});
if (id) {
$(id).classList.remove("hide");
}
};
showWarning = function (id) {
$$("#signin-credentials p.warn").forEach(function (element) {element.classList.add("hide");});
if (id) {
$(id).classList.remove("hide");
}
},

var showSigninForm = function () {
showPanel("#signin-credentials");
showWarning();
$("#signin-remember").checked = settings.session.remember;
$("#signin-address").value = settings.session.remember ? settings.session.address : "";
$("#signin-password").value = settings.session.remember ? settings.session.password : "";
showSigninForm = function () {
showPanel("#signin-credentials");
showWarning();
$("#signin-remember").checked = settings.session.remember;
$("#signin-address").value = settings.session.remember ? settings.session.address : "";
$("#signin-password").value = settings.session.remember ? settings.session.password : "";

var saveSettings = function () {
settings.session.remember = $("#signin-remember").checked;
settings.session.address = settings.session.remember ? $("#signin-address").value : "";
settings.session.password = settings.session.remember ? $("#signin-password").value : "";
};
var saveSettings = function () {
settings.session.remember = $("#signin-remember").checked;
settings.session.address = settings.session.remember ? $("#signin-address").value : "";
settings.session.password = settings.session.remember ? $("#signin-password").value : "";
};

$("#signin-remember").addEventListener("change", saveSettings, false);
$("#signin-remember").addEventListener("change", saveSettings, false);

$("#signin-credentials form").addEventListener("submit", function (event) {
event.preventDefault();
if ($("#signin-credentials form").checkValidity()) {
$("#signin-invalid").classList.add("hide");
saveSettings();
doSignin($("#signin-address").value, $("#signin-password").value);
} else {
$("#signin-invalid").classList.remove("hide");
return false;
}
}, false);
};
$("#signin-credentials form").addEventListener("submit", function (event) {
event.preventDefault();
if ($("#signin-credentials form").checkValidity()) {
$("#signin-invalid").classList.add("hide");
saveSettings();
doSignin($("#signin-address").value, $("#signin-password").value);
} else {
$("#signin-invalid").classList.remove("hide");
return false;
}
}, false);
},

var doSignin = function (address, password) {
showPanel("#signin-connecting");
$("#signin-cancel").addEventListener("click", function (event) {
event.preventDefault();
events.publish("session.cancelSignin");
}, false);
doSignin = function (address, password) {
showPanel("#signin-connecting");
$("#signin-cancel").addEventListener("click", function (event) {
event.preventDefault();
events.publish("session.cancelSignin");
}, false);

events.subscribe("xmpp.connecting", function () {
events.subscribe("xmpp.connected", onConnected);
events.subscribe("xmpp.disconnected", onDisconnected);
});
events.subscribe("xmpp.connecting", function () {
events.subscribe("xmpp.connected", onConnected);
events.subscribe("xmpp.disconnected", onDisconnected);
});

events.publish("session.signin", address, password);
};
events.publish("session.signin", address, password);
},

var onConnected = function () {
events.unsubscribe("xmpp.disconnected", onDisconnected);
$("#signin").parentNode.removeChild($("#signin"));
css.unload("core/signin");
showSignoutButton();
};
onConnected = function () {
events.unsubscribe("xmpp.disconnected", onDisconnected);
$("#signin").parentNode.removeChild($("#signin"));
css.unload("core/signin");
showSignoutButton();
},

var onDisconnected = function () {
events.unsubscribe("xmpp.connected", onConnected);
showPanel("#signin-credentials");
showWarning("#signin-failed");
};
onDisconnected = function () {
events.unsubscribe("xmpp.connected", onConnected);
showPanel("#signin-credentials");
showWarning("#signin-failed");
},

var showSignoutButton = function () {
require(["core/ui"], function (ui) {
new ui.navigation({
title: "Sign Out",
callback: function () {
events.publish("session.signout");
settings.session.address = "";
settings.session.password = "";
location.reload();
}
showSignoutButton = function () {
require(["core/ui/navigation"], function (navigation) {
new navigation({
title: "Sign Out",
callback: function () {
events.publish("session.signout");
settings.session.address = "";
settings.session.password = "";
location.reload();
}
});
});
});
};
};

settings({
session: {
Expand Down
14 changes: 3 additions & 11 deletions core/ui.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
define(
["core/ui/navigation", "core/ui/gadget", "core/ui/content", "core/ui/dock",
"core/paths", "core/css", "libraries/mustache", "text!templates/ui.mustache"],
function ( navigation, gadget, content, dock,
paths, css, mustache, uiTemplate) {
["core/paths", "core/css", "libraries/mustache", "text!templates/ui.mustache"],
function (paths, css, mustache, uiTemplate) {

css.load("core/ui");
document.body.insertAdjacentHTML("beforeEnd", mustache.to_html(uiTemplate));
var activeContentCreator = null;

document.body.addEventListener("click", function (event) {
if (event.target.tagName === "A") {
Expand All @@ -18,10 +15,5 @@ function ( navigation, gadget, content, dock,
}
}, false);

return {
navigation: navigation,
gadget: gadget,
content: content,
dock: dock
};
return {};
});
48 changes: 25 additions & 23 deletions core/ui/content.js
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,31 @@
define(["core/paths"], function (paths) {
var activeContent = null;
var close = function (content) {
var panel = document.querySelector("#content");
if (content === activeContent) {
if ("close" in content) {
content.close(panel);
define(["core/ui", "core/paths"], function (ui, paths) {
var activeContent = null,

close = function (content) {
var panel = document.querySelector("#content");
if (content === activeContent) {
if ("close" in content) {
content.close(panel);
}
while (panel.hasChildNodes()) {
panel.removeChild(panel.firstChild);
}
}
while (panel.hasChildNodes()) {
panel.removeChild(panel.firstChild);
},

open = function (path, content) {
var panel = document.querySelector("#content");
if (activeContent) {
close(activeContent);
activeContent = null;
}
}
};
var open = function (path, content) {
var panel = document.querySelector("#content");
if (activeContent) {
close(activeContent);
activeContent = null;
}
if (content) {
activeContent = content;
if ("open" in content) {
content.open(path, panel);
if (content) {
activeContent = content;
if ("open" in content) {
content.open(path, panel);
}
}
}
};
};

/*
descriptor: {
Expand Down
45 changes: 24 additions & 21 deletions core/ui/dock.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,30 @@
define(
["core/css", "libraries/mustache", "text!templates/dock.mustache"],
function (css, mustache, dockTemplate) {
["core/ui", "core/css", "libraries/mustache", "text!templates/dock.mustache"],
function (ui, css, mustache, dockTemplate) {
var setValue = function (element, value) {
if (typeof value === "string") {
element.textContent = value;
} else {
while (element.hasChildNodes()) {
element.removeChild(element.firstChild);
if (typeof value === "string") {
element.textContent = value;
} else {
while (element.hasChildNodes()) {
element.removeChild(element.firstChild);
}
element.appendChild(value);
}
element.appendChild(value);
}
};
var defaults = {
active: false,
visible: true,
close: true,
toggle: true,
sticky: false,
position: -1,
title: "",
content: ""
};
var docklets = [];
},

defaults = {
active: false,
visible: true,
close: true,
toggle: true,
sticky: false,
position: -1,
title: "",
content: ""
},

docklets = [];

/*
descriptor: {
active: Boolean,
Expand Down
31 changes: 16 additions & 15 deletions core/ui/gadget.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,26 @@
define(function () {
define(["core/ui"], function (ui) {
/*
descriptor: {
title: String|Element,
content: String|Element
}
*/
return function (descriptor) {
var gadget = {};
var container = document.createElement("li");
var headerElement = container.appendChild(document.createElement("h1"));
var contentElement = container.appendChild(document.createElement("section"));
document.querySelector("#gadgets menu").appendChild(container);
var gadget = {},
container = document.createElement("li"),
headerElement = container.appendChild(document.createElement("h1")),
contentElement = container.appendChild(document.createElement("section")),

var setValue = function (element, value) {
if (typeof value === "string") {
element.textContent = value;
} else {
while (element.hasChildNodes()) {
element.removeChild(element.firstChild);
setValue = function (element, value) {
if (typeof value === "string") {
element.textContent = value;
} else {
while (element.hasChildNodes()) {
element.removeChild(element.firstChild);
}
element.appendChild(value);
}
element.appendChild(value);
}
};
};

var api = {
get title () {return headerElement},
Expand All @@ -35,6 +34,8 @@
}
};

document.querySelector("#gadgets menu").appendChild(container);

"title content".split(" ").forEach(function (key) {
if (descriptor.hasOwnProperty(key)) {
api[key] = descriptor[key];
Expand Down
22 changes: 13 additions & 9 deletions core/ui/navigation.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
define(function () {
define(["core/ui"], function (ui) {
/*
descriptor: {
title: "",
Expand All @@ -10,13 +10,14 @@
}
*/
return function (descriptor) {
var navigation = {};
var container = document.createElement("li");
var anchor = document.createElement("a");
var clickHandler = function (event) {
event.preventDefault();
navigation.callback();
};
var navigation = {},
container = document.createElement("li"),
anchor = document.createElement("a"),

clickHandler = function (event) {
event.preventDefault();
navigation.callback();
};

var api = {
get title () {return navigation.title},
Expand All @@ -40,7 +41,10 @@
get url () {return navigation.url},
set url (url) {
delete navigation.path;
anchor.target = navigation.target = ((typeof navigation.target === "string") ? navigation.target : "_blank");
anchor.target = navigation.target =
((typeof navigation.target === "string")
? navigation.target
: "_blank");
anchor.href = (navigation.url = url) || "";
},

Expand Down
Loading

0 comments on commit 24e90a4

Please sign in to comment.