added basic UI for auto-tweeting

3 files changed, 100 insertions, 1 deletions

diff --git a/askbot/media/js/user.js b/askbot/media/js/user.js
index 251ee004..a1ea840b 100644
--- a/askbot/media/js/user.js
+++ b/askbot/media/js/user.js
@@ -993,6 +993,82 @@ UserGroupsEditor.prototype.decorate = function(element){
     //todo - add group deleters
 };
 
+/**
+ * controls that set up automatic tweeting to the user account
+ */
+var Tweeting = function() {
+    WrappedElement.call(this);
+};
+inherits(Tweeting, WrappedElement);
+
+Tweeting.prototype.getStartHandler = function() {
+    var url = this._startUrl;
+    return function() {
+        window.location.href = url;
+    };
+};
+
+Tweeting.prototype.getMode = function() {
+    return this._modeSelector.val();
+};
+
+Tweeting.prototype.getModeSelectorHandler = function() {
+    var me = this;
+    var url = this._changeModeUrl;
+    return function() {
+        $.ajax({
+            type: 'POST',
+            dataType: 'json',
+            url: url,
+            data: {'mode': me.getMode() },
+            cache: false
+        });
+    };
+};
+
+Tweeting.prototype.getAccount = function() {
+    return this._accountSelector.val();
+};
+
+Tweeting.prototype.getAccountSelectorHandler = function() {
+    var selectAccountUrl = this._changeModeUrl;
+    var startUrl = this._startUrl;
+    var me = this;
+    return function() {
+        var account = me.getAccount();
+        if (account === 'existing-handle') {
+            $.ajax({
+                type: 'POST',
+                dataType: 'json',
+                url: selectAccountUrl,
+                data: {'mode': 'share-my-posts' },
+                cache: false
+            });
+        } else if (account === 'new-handle') {
+            window.location.href = startUrl;
+        }
+    }
+};
+
+Tweeting.prototype.decorate = function(element) {
+    this._element = element;
+    this._changeModeUrl = element.data('changeModeUrl');
+    this._startUrl = element.data('startUrl');
+    if (element.hasClass('disabled')) {
+        this._startButton = element.find('.start-tweeting');
+        this._startUrl = this._startButton.data('url');
+        setupButtonEventHandlers(this._startButton, this.getStartHandler());
+    } else if (element.hasClass('inactive')) {
+        //decorate choose account selector
+        this._accountSelector = element.find('select');
+        this._accountSelector.change(this.getAccountSelectorHandler());
+    } else if (element.hasClass('enabled')) {
+        //decorate choose mode selector
+        this._modeSelector = element.find('select');
+        this._modeSelector.change(this.getModeSelectorHandler());
+    }
+};
+
 (function(){
     var fbtn = $('.follow-user-toggle');
     if (fbtn.length === 1){
@@ -1010,4 +1086,10 @@ UserGroupsEditor.prototype.decorate = function(element){
     } else {
         $('#add-group').remove();
     }
+
+    var tweeting = $('.auto-tweeting');
+    if (tweeting.length) {
+        var tweetingControl = new Tweeting();
+        tweetingControl.decorate(tweeting);
+    }
 })();
diff --git a/askbot/media/style/style.css b/askbot/media/style/style.css
index e818c493..7e60afd2 100644
--- a/askbot/media/style/style.css
+++ b/askbot/media/style/style.css
@@ -2980,6 +2980,9 @@ a:hover.medal {
 .user-details h3 {
   font-size: 16px;
 }
+.user-details td {
+  padding-right: 10px;
+}
 .user-about {
   background-color: #EEEEEE;
   height: 200px;
@@ -4345,3 +4348,7 @@ textarea.tipped-input {
 .tag-subscriptions ul.tags li {
   margin: 2px 5px;
 }
+.auto-tweeting select {
+  width: auto;
+  margin-bottom: 0;
+}
diff --git a/askbot/media/style/style.less b/askbot/media/style/style.less
index f3f70679..6e622311 100644
--- a/askbot/media/style/style.less
+++ b/askbot/media/style/style.less
@@ -3088,9 +3088,12 @@ a:hover.medal {
 
 .user-details {
     font-size: 13px;
-    h3{
+    h3 {
         font-size:16px;
     }
+    td {
+        padding-right: 10px;
+    }
 }
 
 .user-about {
@@ -4535,3 +4538,10 @@ textarea.tipped-input {
         margin: 2px 5px;
     }
 }
+
+.auto-tweeting {
+    select {
+        width: auto;
+        margin-bottom: 0;
+    }
+}