From 9d3a27ea17fab6c1bb1437b147ac301ff74d0366 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian.lam@gmail.com>
Date: Fri, 14 Jun 2013 15:10:22 -0400
Subject: [PATCH] splicing out taskbar related code into its own require module
---
public/css/style.less | 2 +-
public/src/modules/composer.js | 63 ++++++++---------------------
public/src/modules/taskbar.js | 74 ++++++++++++++++++++++++++++++++++
3 files changed, 91 insertions(+), 48 deletions(-)
create mode 100644 public/src/modules/taskbar.js
diff --git a/public/css/style.less b/public/css/style.less
index 7a0e1b1fd6..9e05474668 100644
--- a/public/css/style.less
+++ b/public/css/style.less
@@ -426,7 +426,7 @@ body .navbar .nodebb-inline-block {
}
}
-.posts-bar {
+.taskbar {
display: none;
-moz-opacity: 0.5;
opacity: 0.5;
diff --git a/public/src/modules/composer.js b/public/src/modules/composer.js
index 459a3269cf..8f0f2db7de 100644
--- a/public/src/modules/composer.js
+++ b/public/src/modules/composer.js
@@ -1,21 +1,16 @@
-define(function() {
+define(['taskbar'], function(taskbar) {
var composer = {
initialized: false,
active: 0,
+ taskbar: taskbar,
posts: {},
- btnContainer: undefined,
postContainer: undefined,
- listEl: undefined
};
composer.init = function() {
// Create the fixed bottom bar
- var footerEl = document.getElementById('footer');
+ var taskbar = document.getElementById('taskbar');
- composer.btnContainer = document.createElement('div');
- composer.btnContainer.innerHTML = '<div class="navbar-inner"><ul class="nav pull-right"></ul></div>';
- composer.btnContainer.className = 'posts-bar navbar navbar-fixed-bottom';
-
composer.postContainer = document.createElement('div');
composer.postContainer.className = 'post-window row-fluid';
composer.postContainer.innerHTML = '<div class="span10 offset1">' +
@@ -36,17 +31,17 @@ define(function() {
'<textarea tabIndex="2"></textarea>' +
'</div>';
- composer.listEl = composer.btnContainer.querySelector('ul');
- document.body.insertBefore(composer.btnContainer, footerEl);
- document.body.insertBefore(composer.postContainer, composer.btnContainer);
+ document.body.insertBefore(composer.postContainer, taskbar);
socket.on('api:composer.push', function(threadData) {
if (!threadData.error) {
- var uuid = utils.generateUUID(),
- btnEl = document.createElement('li');
- btnEl.innerHTML = '<a href="#"><img src="/graph/users/' + threadData.username + '/picture" /><span>' + (!threadData.cid ? (threadData.title || '') : 'New Topic') + '</span></a>';
- btnEl.setAttribute('data-uuid', uuid);
- composer.listEl.appendChild(btnEl);
+ var uuid = utils.generateUUID();
+
+ composer.taskbar.push('composer', uuid, {
+ title: (!threadData.cid ? (threadData.title || '') : 'New Topic'),
+ icon: '/graph/users/' + threadData.username + '/picture'
+ });
+
composer.posts[uuid] = {
tid: threadData.tid,
cid: threadData.cid,
@@ -54,8 +49,6 @@ define(function() {
title: threadData.title || '',
body: threadData.body || ''
};
- composer.active++;
- composer.update();
composer.load(uuid);
} else {
app.alert({
@@ -75,12 +68,6 @@ define(function() {
if (editCheck.titleEditable === true) composer.postContainer.querySelector('input').readOnly = false;
});
- // Posts bar events
- $(composer.btnContainer).on('click', 'li', function() {
- var uuid = this.getAttribute('data-uuid');
- composer.load(uuid);
- });
-
// Post Window events
var jPostContainer = $(composer.postContainer),
postContentEl = composer.postContainer.querySelector('textarea')
@@ -94,7 +81,7 @@ define(function() {
uuid = $(this).parents('.post-window').attr('data-uuid');
switch(action) {
case 'post': composer.post(uuid); break;
- case 'minimize': composer.minimize(); break;
+ case 'minimize': composer.minimize(uuid); break;
case 'discard': composer.discard(uuid); break;
}
});
@@ -157,16 +144,6 @@ define(function() {
composer.initialized = true;
}
- composer.update = function() {
- if (composer.initialized) {
- if (composer.active > 0) {
- composer.btnContainer.setAttribute('data-active', '1');
- } else {
- composer.btnContainer.removeAttribute('data-active');
- }
- }
- }
-
composer.push = function(tid, cid, pid, text) {
socket.emit('api:composer.push', {
tid: tid, // Replying
@@ -182,7 +159,7 @@ define(function() {
bodyEl = composer.postContainer.querySelector('textarea');
composer.postContainer.style.display = 'block';
- composer.postContainer.style.bottom = composer.btnContainer.offsetHeight + "px";
+ // composer.postContainer.style.bottom = composer.btnContainer.offsetHeight + "px";
composer.postContainer.setAttribute('data-uuid', post_uuid);
if (parseInt(post_data.tid) > 0) {
titleEl.value = 'Replying to: ' + post_data.title;
@@ -196,10 +173,6 @@ define(function() {
}
bodyEl.value = post_data.body
- // Highlight the button
- $('.posts-bar li').removeClass('active');
- composer.btnContainer.querySelector('[data-uuid="' + post_uuid + '"]').className += ' active';
-
// Direct user focus to the correct element
if ((parseInt(post_data.tid) || parseInt(post_data.pid)) > 0) {
bodyEl.focus();
@@ -250,19 +223,15 @@ define(function() {
composer.discard = function(post_uuid) {
if (composer.posts[post_uuid]) {
- // Commit
- var btnEl = composer.btnContainer.querySelector('[data-uuid="' + post_uuid + '"]');
delete composer.posts[post_uuid];
- composer.active--;
- btnEl.parentNode.removeChild(btnEl);
composer.minimize();
- composer.update();
+ taskbar.discard('composer', post_uuid);
}
}
- composer.minimize = function() {
+ composer.minimize = function(uuid) {
composer.postContainer.style.display = 'none';
- $('.posts-bar li').removeClass('active');
+ taskbar.minimize('composer', uuid);
}
composer.init();
diff --git a/public/src/modules/taskbar.js b/public/src/modules/taskbar.js
new file mode 100644
index 0000000000..cc5ddad874
--- /dev/null
+++ b/public/src/modules/taskbar.js
@@ -0,0 +1,74 @@
+define(function() {
+ var taskbar = {
+ initialized: false,
+ taskbar: undefined,
+ tasklist: undefined,
+ init: function() {
+ var footerEl = document.getElementById('footer');
+
+ taskbar.taskbar = document.createElement('div');
+ taskbar.taskbar.innerHTML = '<div class="navbar-inner"><ul class="nav pull-right"></ul></div>';
+ taskbar.taskbar.className = 'taskbar navbar navbar-fixed-bottom';
+ taskbar.taskbar.id = 'taskbar';
+
+ taskbar.tasklist = taskbar.taskbar.querySelector('ul');
+ document.body.insertBefore(taskbar.taskbar, footerEl);
+
+ // Posts bar events
+ $(taskbar.taskbar).on('click', 'li', function() {
+ var module = this.getAttribute('data-module'),
+ uuid = this.getAttribute('data-uuid');
+
+ require([module], function(module) {
+ module.load(uuid);
+
+ // Highlight the button
+ $(taskbar.tasklist).removeClass('active');
+ this.className += ' active';
+ });
+ });
+
+ taskbar.initialized = true;
+ },
+ update: function() {
+ var tasks = taskbar.tasklist.querySelectorAll('li');
+
+ if (tasks.length > 0) {
+ taskbar.taskbar.setAttribute('data-active', '1');
+ } else {
+ taskbar.taskbar.removeAttribute('data-active');
+ }
+ },
+ discard: function(module, uuid) {
+ // Commit
+ var btnEl = taskbar.tasklist.querySelector('[data-module="' + module + '"][data-uuid="' + uuid + '"]');
+ btnEl.parentNode.removeChild(btnEl);
+ taskbar.update();
+ },
+ push: function(module, uuid, options) {
+ var btnEl = document.createElement('li');
+
+ btnEl.innerHTML = '<a href="#">' +
+ (options.icon ? '<img src="' + options.icon + '" />' : '') +
+ '<span>' + (options.title || 'NodeBB Task') + '</span>' +
+ '</a>';
+ btnEl.setAttribute('data-module', module);
+ btnEl.setAttribute('data-uuid', uuid);
+ taskbar.tasklist.appendChild(btnEl);
+
+ taskbar.update();
+ },
+ minimize: function(module, uuid) {
+ var btnEl = taskbar.tasklist.querySelector('[data-module="' + module + '"][data-uuid="' + uuid + '"]');
+ $(btnEl).removeClass('active');
+ }
+ }
+
+ if (!taskbar.initialized) taskbar.init();
+
+ return {
+ push: taskbar.push,
+ discard: taskbar.discard,
+ minimize: taskbar.minimize
+ }
+});
\ No newline at end of file