doortts doortts 2017-03-07
usermenu: Load usermenu asynchronously
@4015ec2b9c92c35ec080b6b05afef11365d72eab
app/controllers/UserApp.java
--- app/controllers/UserApp.java
+++ app/controllers/UserApp.java
@@ -1154,4 +1154,8 @@
             return false;
         }
     }
+
+    public static Result usermenuTabContentList(){
+        return ok(views.html.common.usermenu_tab_content_list.render());
+    }
 }
app/views/common/navbar.scala.html
--- app/views/common/navbar.scala.html
+++ app/views/common/navbar.scala.html
@@ -122,6 +122,6 @@
                 </form>
             </li>
         </ul>
-        @common.usermenu(null)
+        @common.usermenu()
     </div>
 </header>
app/views/common/usermenu.scala.html
--- app/views/common/usermenu.scala.html
+++ app/views/common/usermenu.scala.html
@@ -5,7 +5,7 @@
 * https://yona.io
 **@
 @import org.apache.commons.lang3.StringUtils
-@(project:Project)
+@()
 @import utils.TemplateHelper._
 @import com.feth.play.module.pa.PlayAuthenticate._
 @import com.feth.play.module.pa.views.html._
@@ -51,13 +51,8 @@
             </li>
         </ul>
         <div class="tab-content tab-box">
-            <div class="tab-content">
-                <div class="tab-pane user-project-list active" id="myProjectList">
-                @views.html.index.myProjectList(UserApp.currentUser())
-                </div>
-                <div class="tab-pane user-project-list" id="myOrganizationList">
-                @views.html.index.myOrganizationList(UserApp.currentUser())
-                </div>
+            <div id="usermenu-tab-content-list" class="tab-content">
+                Loading...
             </div>
         </div>
     </div>
 
app/views/common/usermenu_tab_content_list.scala.html (added)
+++ app/views/common/usermenu_tab_content_list.scala.html
@@ -0,0 +1,12 @@
+@**
+* Yona, 21st Century Project Hosting SW
+*
+* Copyright Yona & Yobi Authors & NAVER Corp.
+* https://yona.io
+**@
+<div class="tab-pane user-project-list active" id="myProjectList">
+@views.html.index.myProjectList(UserApp.currentUser())
+</div>
+<div class="tab-pane user-project-list" id="myOrganizationList">
+@views.html.index.myOrganizationList(UserApp.currentUser())
+</div>
app/views/error/notfound_default.scala.html
--- app/views/error/notfound_default.scala.html
+++ app/views/error/notfound_default.scala.html
@@ -35,7 +35,7 @@
                     <a href="https://github.com/nforge/yobi/issues?state=open" target="_blank">@Messages("title.yobi.feedback")</a>
                 </li>
             </ul>
-            @common.usermenu(null)
+            @common.usermenu()
         </div>
     </header>
     <div class="page-wrap-outer">
app/views/layout.scala.html
--- app/views/layout.scala.html
+++ app/views/layout.scala.html
@@ -55,6 +55,7 @@
         var UsermenuToggleFavoriteProjectUrl = "@api.routes.UserApi.toggleFoveriteProject("")";
         var UsermenuToggleFoveriteOrganizationUrl = "@api.routes.UserApi.toggleFoveriteOrganization("")";
         var UsermenuGetFoveriteProjectsUrl = "@api.routes.UserApi.getFoveriteProjects()";
+        var UsermenuUrl = "@routes.UserApp.usermenuTabContentList()";
     </script>
     <script type="text/javascript" src="@routes.Assets.at("javascripts/common/yona.Usermenu.js")"></script>
 </body>
conf/routes
--- conf/routes
+++ conf/routes
@@ -96,6 +96,7 @@
 POST           /user/resetVisitedList                                                 controllers.UserApp.resetUserVisitedList()
 GET            /user/isUsed                                                           controllers.UserApp.isUsed(name:String)
 GET            /user/isEmailExist                                                     controllers.UserApp.isEmailExist(email:String)
+GET            /user/usermenuTabContentList                                           controllers.UserApp.usermenuTabContentList()
 GET            /info/leave/:user/:project                                             controllers.UserApp.leave(user, project)
 POST           /user/email                                                            controllers.UserApp.addEmail()
 DELETE         /user/email/delete/:emailId                                            controllers.UserApp.deleteEmail(emailId:Long)
public/javascripts/common/yona.Usermenu.js
--- public/javascripts/common/yona.Usermenu.js
+++ public/javascripts/common/yona.Usermenu.js
@@ -1,133 +1,144 @@
 $(function() {
-    /* Set side navigation */
-    // Also, see index.scala.html for home page menu sliding actions !!
-    var $sidebar = $("#mySidenav");
-    var viewSize = $(window).width();
-    var PIXEL_CRITERIA_FOR_SMALL_DEVICE = 720;  // Criteria to distinguish small devices
-    var SIDE_BAR_DEFAULT_WIDTH = "420px";
+    $.get(UsermenuUrl)
+        .done(function (data) {
+            $("#usermenu-tab-content-list").html(data);
+            afterUsermenuLoaded();
+        })
+        .fail(function (data) {
+            $yobi.alert("Usermenu loading failed: " + data);
+        });;
 
-    $("#main").on("click", function(event){
-        if( $sidebar.width() !== 0 && $(event.target).parents("#mySidenav").length == 0) {
-            closeSidebar($sidebar);
-        }
-    });
+    function afterUsermenuLoaded(){
+        /* Set side navigation */
+        // Also, see index.scala.html for home page menu sliding actions !!
+        var $sidebar = $("#mySidenav");
+        var viewSize = $(window).width();
+        var PIXEL_CRITERIA_FOR_SMALL_DEVICE = 720;  // Criteria to distinguish small devices
+        var SIDE_BAR_DEFAULT_WIDTH = "420px";
 
-    $("#sidebar-open-btn").on("click", function (event) {
-        event.stopPropagation();
-        if( $sidebar.width() !== 0){
-            closeSidebar($sidebar);
-        } else {
-            openSidebar($sidebar);
-            updateStar();
-        }
-    });
-
-    function closeSidebar($sidebar) {
-        $sidebar.width("0").css("border", "none");
-        $(".main-stream").removeClass("span8").addClass("span12");
-    }
-
-    function openSidebar($sidebar){
-        // 720px is a criteria to distinguish small devices
-        if (viewSize > PIXEL_CRITERIA_FOR_SMALL_DEVICE) {
-            $sidebar.width(SIDE_BAR_DEFAULT_WIDTH).css("border", "1px solid #ccc");
-            $(".search-input").focus();
-        } else {
-            $sidebar.width("100vw").css("border", "1px solid #ccc");
-        }
-        $(".main-stream").removeClass("span12").addClass("span8");
-    }
-
-    // used for new project list ui
-    $(".right-menu").on('click', ".myProjectList, a[href='#recentlyVisited'], a[href='#createdByMe'], a[href='#watching'], a[href='#joinmember']", function() {
-        updateStar();
-        setTimeout(function focusToProjectSearchInput() {
-            var $projectSearch = $('.project-search');
-            var $orgSearch = $('.org-search');
-            if (viewSize > PIXEL_CRITERIA_FOR_SMALL_DEVICE) {
-                $projectSearch.focus();
-            }
-            if(!$projectSearch.val()){
-                $projectSearch.val($orgSearch.val());
-            }
-            $orgSearch.val("");
-        }, 200);
-
-    });
-
-    $('.myOrganizationList').on('click', function focusToOrgSearchInput(){
-        setTimeout(function () {
-            var $projectSearch = $('.project-search');
-            var $orgSearch = $('.org-search');
-            if (viewSize > PIXEL_CRITERIA_FOR_SMALL_DEVICE) {
-                $orgSearch.focus();
-            }
-            $orgSearch.val($projectSearch.val());
-            $projectSearch.val("");
-        }, 200);
-    });
-
-    // search by keyword
-    $(".search-input").on("keyup", function() {
-        var value = $(this).val().toLowerCase().trim();
-        $(".user-li").each(function() {
-            $(this).toggle($(this).text().toLowerCase().indexOf(value) !== -1);
-        });
-    }).on("keydown.moveCursorFromInputform", function(e) {
-        switch (e.keyCode) {
-            case 27:   // ESC
+        $("#main").on("click", function(event){
+            if( $sidebar.width() !== 0 && $(event.target).parents("#mySidenav").length == 0) {
                 closeSidebar($sidebar);
-                break;
-            default:
-                break;
+            }
+        });
+
+        $("#sidebar-open-btn").on("click", function (event) {
+            event.stopPropagation();
+            if( $sidebar.width() !== 0){
+                closeSidebar($sidebar);
+            } else {
+                openSidebar($sidebar);
+                updateStar();
+            }
+        });
+
+        function closeSidebar($sidebar) {
+            $sidebar.width("0").css("border", "none");
+            $(".main-stream").removeClass("span8").addClass("span12");
         }
-    });
 
-    $(".project-list > .star-project").on("click", function toggleProjectFavorite(e) {
-        e.stopPropagation();
-        var that = $(this);
-        $.post(UsermenuToggleFavoriteProjectUrl + that.data("projectId"))
-        .done(function (data) {
-            if(data.favored){
-                that.find('i').addClass("starred");
+        function openSidebar($sidebar){
+            // 720px is a criteria to distinguish small devices
+            if (viewSize > PIXEL_CRITERIA_FOR_SMALL_DEVICE) {
+                $sidebar.width(SIDE_BAR_DEFAULT_WIDTH).css("border", "1px solid #ccc");
+                $(".search-input").focus();
             } else {
-                that.find('i').removeClass("starred");
-                that.parent(".project-list").remove();
+                $sidebar.width("100vw").css("border", "1px solid #ccc");
             }
-        })
-            .fail(function (data) {
-                $yobi.alert("Update failed: " + JSON.parse(data.responseText).reason);
-            });
-    });
+            $(".main-stream").removeClass("span12").addClass("span8");
+        }
 
-    $(".org-list > .star-org").on("click", function toggleOrgFavorite(e) {
-        e.stopPropagation();
-        var that = $(this);
-        $.post(UsermenuToggleFoveriteOrganizationUrl + that.data("organizationId"))
-        .done(function (data) {
-            if(data.favored){
-                that.find('i').addClass("starred");
-            } else {
-                that.find('i').removeClass("starred");
+        // used for new project list ui
+        $(".right-menu").on('click', ".myProjectList, a[href='#recentlyVisited'], a[href='#createdByMe'], a[href='#watching'], a[href='#joinmember']", function() {
+            updateStar();
+            setTimeout(function focusToProjectSearchInput() {
+                var $projectSearch = $('.project-search');
+                var $orgSearch = $('.org-search');
+                if (viewSize > PIXEL_CRITERIA_FOR_SMALL_DEVICE) {
+                    $projectSearch.focus();
+                }
+                if(!$projectSearch.val()){
+                    $projectSearch.val($orgSearch.val());
+                }
+                $orgSearch.val("");
+            }, 200);
+
+        });
+
+        $('.myOrganizationList').on('click', function focusToOrgSearchInput(){
+            setTimeout(function () {
+                var $projectSearch = $('.project-search');
+                var $orgSearch = $('.org-search');
+                if (viewSize > PIXEL_CRITERIA_FOR_SMALL_DEVICE) {
+                    $orgSearch.focus();
+                }
+                $orgSearch.val($projectSearch.val());
+                $projectSearch.val("");
+            }, 200);
+        });
+
+        // search by keyword
+        $(".search-input").on("keyup", function() {
+            var value = $(this).val().toLowerCase().trim();
+            $(".user-li").each(function() {
+                $(this).toggle($(this).text().toLowerCase().indexOf(value) !== -1);
+            });
+        }).on("keydown.moveCursorFromInputform", function(e) {
+            switch (e.keyCode) {
+                case 27:   // ESC
+                    closeSidebar($sidebar);
+                    break;
+                default:
+                    break;
             }
-        })
-            .fail(function (data) {
-                $yobi.alert("Update failed: " + JSON.parse(data.responseText).reason);
-            });
-    });
+        });
 
-    // This method intended to sync sub tab list of projects
-    function updateStar(){
-        $.get(UsermenuGetFoveriteProjectsUrl)
-            .done(function(data){
-                $(".star-project").each(function () {
-                    var $this = $(this);
-                    if (data.projectIds.includes($this.data("projectId"))) {
-                        $this.find("i").addClass("starred");
+        $(".project-list > .star-project").on("click", function toggleProjectFavorite(e) {
+            e.stopPropagation();
+            var that = $(this);
+            $.post(UsermenuToggleFavoriteProjectUrl + that.data("projectId"))
+                .done(function (data) {
+                    if(data.favored){
+                        that.find('i').addClass("starred");
                     } else {
-                        $this.find("i").removeClass("starred");
+                        that.find('i').removeClass("starred");
+                        that.parent(".project-list").remove();
                     }
+                })
+                .fail(function (data) {
+                    $yobi.alert("Update failed: " + JSON.parse(data.responseText).reason);
                 });
-            });
+        });
+
+        $(".org-list > .star-org").on("click", function toggleOrgFavorite(e) {
+            e.stopPropagation();
+            var that = $(this);
+            $.post(UsermenuToggleFoveriteOrganizationUrl + that.data("organizationId"))
+                .done(function (data) {
+                    if(data.favored){
+                        that.find('i').addClass("starred");
+                    } else {
+                        that.find('i').removeClass("starred");
+                    }
+                })
+                .fail(function (data) {
+                    $yobi.alert("Update failed: " + JSON.parse(data.responseText).reason);
+                });
+        });
+
+        // This method intended to sync sub tab list of projects
+        function updateStar(){
+            $.get(UsermenuGetFoveriteProjectsUrl)
+                .done(function(data){
+                    $(".star-project").each(function () {
+                        var $this = $(this);
+                        if (data.projectIds.includes($this.data("projectId"))) {
+                            $this.find("i").addClass("starred");
+                        } else {
+                            $this.find("i").removeClass("starred");
+                        }
+                    });
+                });
+        }
     }
 });
Add a comment
List