2
\$\begingroup\$

I started to break apart my 'spaghetti' code into modules, after watching a few videos online. Now I want to know, am I separating code enough?

I feel like I was off to a good start, but I feel like my code is still not clean enough. I don't have much experience with this pattern, can anyone take a quick look at the code to see what they think?

It's not completely finished.

This code is for a live-chat system I am building.

Obviously there is too much code to completely go through, but just a quick look and some structure tips would be appreciated. Thanks!

$(function () {
    buoy = (function () {

        var $document, $buoyContainer, $buoy, $buoyHeader, $closeButton;

        var liveChat = (function () {
            var $liveChat, $userInput, $triggerLiveChat, $conversationArea, $test;

            function cacheDom() {
                $liveChat = $buoyContainer.find(".live-chat");
                $userInput = $liveChat.find(".user-chat-input");
                $triggerLiveChat = $("._triggerLiveChat");
                $conversationArea = $liveChat.find(".conversation-area");
            }

            function bindEvents() {
                $userInput.on("input", setConversationAreaY);
                $userInput.on("keydown", sendMessage);
                $triggerLiveChat.on("click", chatWith);
                $liveChat.on("click", focusInput);
                $conversationArea.on("scroll", loadMoreMessages);
            }

            function setConversationAreaY() {
                $(this).parents(".live-chat").find(".conversation-area").css("bottom", $(this).css("height"));
            }

            function loadMoreMessages() {
                /* Load more messages when scrolled to top of live chat */
                if ($(this).isScrollTop()) {
                    var $element = $(this);
                    var $chatBuoy = $element.parents(".live-chat");
                    messageID = $chatBuoy.find(".message").first().attr("messageID");
                    if (!messageID) {
                        return;
                    }
                    _callPhp("getLiveChatMessages", [$chatBuoy.attr("userID"), messageID], function (data) {
                        if (data.html) {
                            /* Prepending pushes scrollPos to top, so this is for setting it back to original scrollPos before prepend */
                            var firstMsg = $element.find(".message").first();
                            $element.prepend(data.html);
                            $element.scrollTop(firstMsg.position().top)
                        }
                    });
                }
            }

            function loadMessages() {

            }

            /* Update messages of open chat windows */
            function updateChatWindowMessages() {
                var xhrs = [];
                $("#buoy-container .live-chat:visible").each(function () {
                    var friendID = $(this).attr("userID");
                    var messageID = $(this).find(".conversation-area .message:last-child").attr("messageID");
                    if (!messageID) {
                        return true;
                    }
                    var $element = $(this);
                    xhr = _callPhp("getNewLiveChatMessages", [friendID, messageID], function (data) {
                        if (data.html) {
                            var isBottom = $element.find(".conversation-area").isScrollBottom();
                            $element.find(".conversation-area").append(data.html);
                            if (isBottom) {
                                $element.find(".conversation-area").scrollToBottom();
                            }
                        }
                    });
                    xhrs.push(xhr);
                });

                $.when.apply($, xhrs).done(function () {
                    setTimeout(function () {
                        updateChatWindowMessages();
                    }, 5000);
                });
            }

            function sendMessage(e) {
                /* If enter key */
                if (e.keyCode == 13) {
                    e.preventDefault();

                    $userInput = $(e.currentTarget);

                    if ($userInput.val()) {
                        /* Clear input */
                        $userInput.val("");
                        /* Make input go back to right height */
                        $userInput.css("height", "auto");

                        setConversationAreaY().bind($userInput);

                        messageID = $element.parents(".live-chat").find(".conversation-area .message:last-child").attr("messageID");

                        if (!messageID) {
                            messageID = 0;
                        }
                        var $liveChat = $userInput.parents(".live-chat");
                        var $conversationArea = $liveChat.find(".conversation-area");
                        _callPhp("sendLiveChatMessage", [$liveChat.attr("userID"), $userInput.val()], function (data) {
                            _callPhp("getNewLiveChatMessages", [$liveChat.attr("userID"), messageID], function (data) {
                                $conversationArea.append(data.html);
                                $conversationArea.scrollToBottom();
                            });
                        });
                    }
                }
            }

            function focusInput() {
                $(this).find(".user-chat-input").focus();
            }

            function chatWith() {
                var $chatTrigger = $(this);
                var userID = $chatTrigger.attr("userID");
                /* If live chat not already open */
                var $chatBuoy = $(".live-chat[userID=" + userID + "]");
                if (!$chatBuoy.length) {
                    var html = "";
                    html += "<div class='live-chat buoy block' userID='" + userID + "'>";
                    html += "<div class='header'>";
                    html += "<div class='fa fa-comments'></div>";
                    html += "<div class='profile_name'></div>";
                    html += "<div class='user_online' style='display:none'></div>";
                    html += "<button class='close-button img-button'><img src='images/buttons/x.png'></button>";
                    html += "</div>";
                    html += "<div class='conversation-area'>";
                    html += "Loading...";
                    html += "</div>";
                    html += "<textarea class='user-chat-input' placeholder='Send a message'></textarea>";
                    html += "</div>";

                    createBuoy(html);

                    var $chat = $(".live-chat[userID=" + userID + "]");

                    _callPhp("liveChatGetFriend", [userID], function (data) {
                        data = data.data;
                        /* Set name */
                        $chat.find(".header .profile_name").html(data.firstname + " " + data.lastname);
                        if (data.activeOrNot == "Y") {
                            $chat.find(".header .user_online").show();
                        }
                        updateChatWindowMessages();

                        loadMoreMessages().bind($chat.find(".conversation-area"));
                    });

                } else {
                    $chatBuoy.trigger("click");
                }
            }

            return {
                cacheDom: cacheDom,
                bindEvents: bindEvents
            };
        }());

        cacheDom();
        bindEvents();

        function cacheDom() {
            $buoyContainer = $("#buoy-container");
            liveChat.cacheDom();
            $document = $(document);
            $buoy = $buoyContainer.find(".buoy");
            $buoyHeader = $buoy.find(".header");
            $closeButton = $buoyHeader.find(".close-button");
        }

        function bindEvents() {
            liveChat.bindEvents();
            $document.on("click", unfocusAll);
            $buoy.on("click", focus);
            $buoyHeader.on("click", toggleBuoyMinimize);
            $closeButton.on("click", closeBuoy);
        }

        function focus() {
            $(this).addClass("focus");
        }

        function unfocusAll() {
            $buoy.removeClass("focus");
        }

        function createBuoy(html) {
            $buoyContainer.append(html);
            $buoy = $buoyContainer.children(".buoy:last-child");
            $buoy.trigger("click");
        }

        function closeBuoy() {
            $(this).parents(".buoy").remove();
        }

        function toggleBuoyMinimize(e) {
            /* If target is header not child */
            if ($(e.target).hasClass("header")) {
                $(e.currentTarget).parents(".buoy").toggleClass("minimized");
            }
        }

        //Public
        return {
            cacheDom: cacheDom,
            bindEvents: bindEvents
        }
    }());
});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.