Merge pull request #209 from slr/tasty-fix-add-following-method

add following config method modal, fix some related

css/style.css

@@ -1313,6 +1313,28 @@ ol.toptrends-list {
     padding: 5px 20px;
 }
 /*************************************
+*************** FOLLOWING-CONFIG MODAL
+**************************************/
+.following-config-modal .modal-wrapper
+{
+    top: 43%;
+    left: 25%;
+    width: 50%;
+}
+.following-config-modal .modal-content
+{
+    padding: 10px;
+    text-align: center;
+}
+.following-config-modal .modal-buttons
+{
+    display: none;
+}
+.following-config-method-buttons
+{
+    padding: 10px;
+}
+/*************************************
 ****************** RETWIST POSTS MODAL
 **************************************/
 .reTwist .modal-wrapper

following.html

@@ -412,7 +412,7 @@
                         <li><a href="#"><span class="followers-count">&nbsp;</span><span class="label">Followers</span></a></li>
                     </ul>
                 </div>
-                <button class="followButton follow" href="#">Follow</button>
+                <button class="dinamicFollowButton" href="#">Follow</button>
                 <button class="direct-messages-with-user" href="#">Direct Messages</button>
             </div>
             <div class="who-follow"></div>
@@ -480,6 +480,22 @@
     </div>
     <!-- MODAL DE FOLLOWING END -->
 
+    <!-- MODAL OF FOLLOWING CONFIG -->
+    <div id="following-config-modal-template">
+
+        <!-- ÁREA OF FOLLOWING METHOD -->
+        <div class="following-config-modal-content" data-screen-name="">
+          <h2><span class="following-config-method-message">Which way do you want to follow</span> <span class="following-screen-name">@<b></b></span>:</h2>
+
+            <div class="following-config-method-buttons">
+                <button class="public-following">Public</button>
+                <button class="public-following private">Private</button>
+            </div>
+
+        </div>
+        <!-- ÁREA OF FOLLOWING METHOD END -->
+    </div>
+    <!-- MODAL OF FOLLOWING CONFIG END -->
 
   </div>
   <!-- TEMPLATES END -->

home.html

@@ -441,7 +441,7 @@
                   <li><a href="#"><span class="followers-count">&nbsp;</span><span class="label">Followers</span></a></li>
                 </ul>
               </div>
-              <button class="followButton follow" href="#">Follow</button>
+              <button class="dinamicFollowButton" href="#">Follow</button>
               <button class="direct-messages-with-user" href="#">Direct Messages</button>
               <button class="mentions-from-user" href="#">Mentions</a>
             </div>
@@ -511,6 +511,23 @@
     </div>
     <!-- MODAL DE FOLLOWING END -->
 
+    <!-- MODAL OF FOLLOWING CONFIG -->
+    <div id="following-config-modal-template">
+
+        <!-- ÁREA OF FOLLOWING METHOD -->
+        <div class="following-config-modal-content" data-screen-name="">
+          <h2><span class="following-config-method-message">Which way do you want to follow</span> <span class="following-screen-name">@<b></b></span>:</h2>
+
+            <div class="following-config-method-buttons">
+                <button class="public-following">Public</button>
+                <button class="public-following private">Private</button>
+            </div>
+
+        </div>
+        <!-- ÁREA OF FOLLOWING METHOD END -->
+    </div>
+    <!-- MODAL OF FOLLOWING CONFIG END -->
+
   </div>
   <!-- TEMPLATES END -->
   <audio id="player"></audio>

js/interface_common.js

@@ -135,9 +135,14 @@ function openProfileModalWithUsernameHandler(username)
 
     //hed//add dinamic follow button in profile modal window
     if(followingUsers.indexOf(username) != -1){
-        $('.profile-card button.followButton').first().removeClass('follow').addClass('profileUnfollow').text(polyglot.t('Unfollow')).on('click', function(){
+        $('.profile-card button.dinamicFollowButton').first().addClass('profileUnfollow').text(polyglot.t('Unfollow')).on('click', function(){
             unfollow(username);
+            closeModal($(this));
+            // delay reload so dhtput may do it's job
+            window.setTimeout("location.reload();",500);
         });
+    } else {
+        $('.profile-card button.dinamicFollowButton').first().addClass('follow').text(polyglot.t('Follow')).on('click', userClickFollow );
     };
 
     $(".tox-ctc").attr("title", polyglot.t("Copy to clipboard"));

js/interface_localization.js

@@ -68,6 +68,8 @@ if(preferredLanguage == "en"){
       "Favorite": "Favorite",
       "File APIs not supported in this browser.": "File APIs not supported in this browser.",
       "Follow": "Follow",
+      "Following config": "Following config",
+      "Which way do you want to follow": "Which way do you want to follow",
       "Followed by": "Followed by",
       "followed_by": "Followed by %{username}",
       "Followers": "Followers",
@@ -1659,6 +1661,8 @@ if(preferredLanguage == "ru"){
        "Favorite": "Избранное",
        "File APIs not supported in this browser.": "Ваш браузер не поддерживает File APIs.",
        "Follow": "Подписаться",
+       "Following config": "Настройка подписки",
+       "Which way do you want to follow": "Выберите тип подписки на",
        "Followed by": "Подписчик у",
        "followed_by": "%{username} подписан",
        "Followers": "Читателей",

js/twister_following.js

@@ -388,11 +388,14 @@ function isPublicFollowing(user) {
     if( followingUsers.indexOf(user) < 0 ) {
         return false;
     }
-    if( (user in _isFollowPublic) && _isFollowPublic[user] == true )
+    if( (user in _isFollowPublic) && _isFollowPublic[user] == true ) {
+        //console.log("isPublicFollowing( " +user +" ) = "+true);
         return true;
-    else
+    } else {
+        //console.log("isPublicFollowing( " +user +" ) = "+false);
         return false;
     }
+}
 
 // check if following list is empty
 function followingEmptyOrMyself() {
@@ -521,7 +524,11 @@ function showFollowingUsers(){
         resItem.find("a.open-profile-modal").attr("href",$.MAL.userUrl(followingUsers[i]));
         resItem.find("a.unfollow").attr("href",$.MAL.unfollowUrl(followingUsers[i]));
         resItem.find("a.direct-messages-with-user").attr("href", $.MAL.dmchatUrl(followingUsers[i]));
-        resItem.find(".public-following").prop("checked",isPublicFollowing(followingUsers[i]));
+        if (isPublicFollowing(followingUsers[i])) {
+            resItem.find(".public-following").text(polyglot.t("Public"));
+        } else {
+            resItem.find(".public-following").text(polyglot.t("Private")).addClass( "private" );
+        }
         getAvatar(followingUsers[i],resItem.find(".mini-profile-photo"));
         getFullname(followingUsers[i],resItem.find(".mini-profile-name"));
         if( followingUsers[i] == defaultScreenName ) {
@@ -658,6 +665,16 @@ function processDropdownUserResults(partialName, results){
     _searchingPartialUsers = "";
 }
 
+function newFollowingConfigModal(username) {
+    var FollowingConfigContent = $("#following-config-modal-template").children().clone(true);
+
+    FollowingConfigContent.closest(".following-config-modal-content").attr("data-screen-name", username)
+    FollowingConfigContent.find(".following-config-method-message").text(polyglot.t("Which way do you want to follow"))
+    FollowingConfigContent.find(".following-screen-name b").text(username);
+
+    return FollowingConfigContent;
+}
+
 function userClickFollow(e) {
     e.stopPropagation();
     e.preventDefault();
@@ -672,10 +689,14 @@ function userClickFollow(e) {
       return;
     }
 
-    follow(username, true, function() {
-        // delay reload so dhtput may do it's job
-        window.setTimeout("location.reload();",500);
-    });
+    var FollowingConfigClass = "following-config-modal";
+    openModal( FollowingConfigClass );
+
+    var FollowingConfigContent = newFollowingConfigModal(username);
+    FollowingConfigContent.appendTo("." +FollowingConfigClass +" .modal-content");
+
+    //título do modal
+    $("." +FollowingConfigClass +" h3").text(polyglot.t("Following config"));
 }
 
 function initUserSearch() {
@@ -685,6 +706,13 @@ function initUserSearch() {
     $userSearchField.clickoutside( closeSearchDialog );
 
     $("button.follow").bind( "click", userClickFollow );
+
+    $(".following-config-method-buttons .public-following").bind( "click", setFollowingMethod );
+    $(".following-config-method-buttons .public-following").click( function() {
+        closeModal($(this));
+        // delay reload so dhtput may do it's job
+        window.setTimeout("location.reload();",500);
+    });
 }
 
 function followingListUnfollow(e) {
@@ -704,16 +732,32 @@ function followingListPublicCheckbox(e) {
 
     var $this = $(this);
     var username = $this.closest(".mini-profile-info").attr("data-screen-name");
-    var public = false;
+    var method = false;
     $this.toggleClass( "private" );
     if( $this.hasClass( "private" ) ) {
         $this.text( polyglot.t("Private") );
     } else {
         $this.text( polyglot.t("Public") );
-        public = true;
+        method = true;
+    }
+
+    //console.log("set following method of @" +username +" for "+method);
+    follow(username, method);
+}
+
+function setFollowingMethod(e) {
+    e.stopPropagation();
+
+    var $this = $(this);
+    var username = $this.closest(".following-config-modal-content").attr("data-screen-name");
+    var method = false;
+
+    if( !$this.hasClass("private") ) {
+        method = true;
     }
 
-    follow(username, public);
+    //console.log("start following @" +username +" by method "+method);
+    follow(username, method);
 }
 
 
@@ -764,7 +808,7 @@ function initInterfaceFollowing() {
     initInterfaceDirectMsg();
 
     $("button.unfollow").bind( "click", followingListUnfollow );
-    $(".public-following").bind( "click", followingListPublicCheckbox );
+    $(".mini-profile-info .public-following").bind( "click", followingListPublicCheckbox );
 
     $(".mentions-from-user").bind( "click", openMentionsModal );
 

theme_calm/css/style.css

@@ -1730,6 +1730,28 @@ textarea.splited-post {
     padding: 5px 20px;
 }
 /*************************************
+*************** FOLLOWING-CONFIG MODAL
+**************************************/
+.following-config-modal .modal-wrapper
+{
+    top: 43%;
+    left: 25%;
+    width: 50%;
+}
+.following-config-modal .modal-content
+{
+    padding: 10px;
+    text-align: center;
+}
+.following-config-modal .modal-buttons
+{
+    display: none;
+}
+.following-config-method-buttons
+{
+    padding: 10px;
+}
+/*************************************
 ****************** RETWIST POSTS MODAL
 **************************************/
 .reTwist .modal-wrapper

theme_nin/css/style.css

@@ -593,6 +593,14 @@ ol.toptrends-list a:hover { background: white; color: #66686b; }
 
 .modal-buttons { padding: 10px; text-align: right; }
 
+/******** FOLLOWING-CONFIG MODAL ********/
+.following-config-modal .modal-wrapper { top: 43%; left: 25%; width: 50%; }
+.following-config-modal .modal-content { padding: 10px; text-align: center; background-color: white; }
+.following-config-modal .modal-buttons { display: none; }
+.following-config-method-buttons { padding: 10px; }
+.following-config-method-buttons .public-following { background-color: #B4C669 }
+.following-config-modal h2 { text-transform: none; }
+
 /*********** RETWIST POSTS MODAL ********* */
 .reTwist .modal-wrapper { width: 520px; top: 20%; margin: 0 0 0 -260px; }
 .reTwist .post-expand, .reTwist .post-interactions { display: none; }