Closes #35

NodeBB-Community · Apr 5, 2014 · 0f1f698 · 0f1f698
1 parent a6c1925
commit 0f1f698
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 18 deletions.
diff --git a/library.js b/library.js
@@ -76,13 +76,13 @@ Shoutbox.widget = {
 		if (widget.uid !== 0) {
 			//Currently doing this on the server -- still debating what's better
 			Config.settings.get({ uid: widget.uid, settings: {} }, function(err, result) {
-				if (result.settings[Config.prefix + 'hide'] !== 1) {
-					Config.api(function(data) {
-						app.render('shoutbox', data, callback);
-					});
-				} else {
-					callback(null, '');
-				}
+				Config.api(function(data) {
+					data.hiddenStyle = '';
+					if (result.settings[Config.prefix + 'hide'] == 1) {
+						data.hiddenStyle = 'display: none;';
+					}
+					app.render('shoutbox', data, callback);
+				});
 			});
 			// Client or server?
 //			Config.api(function(data) {

diff --git a/public/js/lib/actions.js b/public/js/lib/actions.js
@@ -256,6 +256,25 @@ define(['string'], function(S) {
 				});
 				return false;
 			}
+		},
+		hide: {
+			register: function(shoutBox) {
+				shoutBox.off('click', '#shoutbox-settings-hide').on('click', '#shoutbox-settings-hide', this.handle);
+			},
+			handle: function(e) {
+				var el = $(e.currentTarget).find('span'),
+					body = sb.base.getShoutPanel().find('.panel-body');
+				if (el.hasClass('fa-arrow-up')) {
+					body.slideUp();
+					el.removeClass('fa-arrow-up').addClass('fa-arrow-down');
+					sb.config.settings['hide'] = true;
+				} else {
+					body.slideDown();
+					el.removeClass('fa-arrow-down').addClass('fa-arrow-up');
+					sb.config.settings['hide'] = false;
+				}
+				socket.emit(sb.config.sockets.saveSettings, { key: 'hide', value: sb.config.settings['hide'] });
+			}
 		}
 	};
 

diff --git a/public/js/lib/utils.js b/public/js/lib/utils.js
@@ -3,13 +3,17 @@ define(function() {
 
 	var Utils = {
 		init: function(callback) {
-			window.ajaxify.loadTemplate('shoutbox/shout', function(shout) {
-				window.ajaxify.loadTemplate('shoutbox/shout/text', function(text) {
-					shoutTpl = shout;
-					textTpl = text;
-					callback();
+			if (!shoutTpl || !textTpl) {
+				window.ajaxify.loadTemplate('shoutbox/shout', function(shout) {
+					window.ajaxify.loadTemplate('shoutbox/shout/text', function(text) {
+						shoutTpl = shout;
+						textTpl = text;
+						callback();
+					});
 				});
-			});
+			} else {
+				callback();
+			}
 		},
 		parseShout: function(shout, onlyText) {
 			var tpl = onlyText ? textTpl : shoutTpl;
@@ -46,10 +50,19 @@ define(function() {
 				if (settings.hasOwnProperty(key)) {
 					var value = settings[key];
 					var el = shoutBox.find('#shoutbox-settings-' + key + ' span');
-					if (value === 1) {
-						el.removeClass('fa-times').addClass('fa-check');
+					// Not the best way but it'll have to do for now
+					if (key !== 'hide') {
+						if (value === 1) {
+							el.removeClass('fa-times').addClass('fa-check');
+						} else {
+							el.removeClass('fa-check').addClass('fa-times');
+						}
 					} else {
-						el.removeClass('fa-check').addClass('fa-times');
+						if (value == 1) {
+							el.removeClass('fa-arrow-up').addClass('fa-arrow-down');
+						} else {
+							el.removeClass('fa-arrow-down').addClass('fa-arrow-up');
+						}
 					}
 				}
 			}

diff --git a/templates/shoutbox.tpl b/templates/shoutbox.tpl
@@ -3,9 +3,13 @@
     <div class="col-md-12">
         <div class="panel panel-default" id="shoutbox">
             <div class="panel-heading">
-                <h3 class="panel-title"><a href="/shoutbox" title="Shoutbox">Shoutbox</a></h3>
+                <h3 class="panel-title">
+                    <a href="/shoutbox" title="Shoutbox">Shoutbox</a>
+                    <a href="#" id="shoutbox-settings-hide"><span class="fa fa-arrow-up pull-right"></span></a>
+                </h3>
             </div>
-            <div class="panel-body">
+
+            <div class="panel-body" style="{hiddenStyle}">
                 <div id="shoutbox-content" class="well well-sm"></div>
                 <div class="input-group">
                     <input id="shoutbox-message-input" type="text" placeholder="enter message" name="shoutbox-message" class="form-control">