[PROJECT] jQuery-UI를 이용한 Trello clone project (4) Trello 웹 스크립트 작성

jQuery-UI를 이용한 Trello clone project (4) - 웹 스크립트 작성

지난 시간에

스타일을 입혀서 UI 작업을 마무리 했다. 이번 시간에는 수정이나 추가등에 필요한 스크립트를 작성해 보자.

스크립트 작성

지난 시간에 기능을 명세했던 사진이 있었다.

순서대로 기능을 구현해 보자

 

project name 관련 스크립트

우선 프로젝트 네임을 더블 클릭 하면 수정할 수 있는 폼이 나온다. 그리고 수정을 다하고 enter 를 누르면 프로젝트 네임이 변경 된다.

$(document).ready(function () {
	var pjTitle = $("#title");
    var pjTitleEdit = $("#titleEdit");
    var addListLabel = $("#addLabel");
    var addListForm = $("#addList");
    pjTitle.dblclick(function (e) {
        e.preventDefault();
        pjTitleEdit.val(pjTitle.html());
        pjTitle.hide();
        pjTitleEdit.show();
        pjTitleEdit.children("#projectTitle").focus();
    });

    pjTitleEdit.submit(function (e) {
        e.preventDefault();
        let title = $("#projectTitle").val();
        if (title == "") {
            title = "New Project";
        }
        pjTitle.html(title);
        pjTitleEdit.hide();
        pjTitle.show();
    });
});

e.preventDefault(); 는 해당 태그의 기본으로 가지고 있는 event 가 실헹 되지 않게 해준다.

거의 모든 코드가 이런 식으로 작성될 것이다. hide(), show() 를 이용해 숨기고 표현하는 작업을 할 것 이다.

실행해보면 더블 클릭시 입력 폼이 나오고 엔터를 치면 입력했던 문장으로 프로젝트 name 이 변경되는 것을 알 수 있다.

 

list name 관련 스크립트

project name 관련 스크립트와 동작이 유사하다.

$(document).on('dblclick', ".title", function (e) {
    e.preventDefault();
    let ltTitleEdit = $(this).parent().children(".titleEdit");
    ltTitleEdit.children(".listTitle").val($(this).html());
    ltTitleEdit.children(".listTitle").focus();
    $(this).hide();
    ltTitleEdit.show();
    
});
$(document).on("submit", ".titleEdit", function (e) {
    e.preventDefault();
    let ltTitle = $(this).parent().children(".title");
    let title = $(this).children(".listTitle").val();
    ltTitle.html(title);
    $(this).hide();
    ltTitle.show();
});

다만 차이점이 있다면 dynamic 하게 추가되기 때문에 셀렉터로 검색(?)이 되지않는다. 따라서 jQuery 1.7 부터

$(고정적인 엘리먼트).on("이벤트 명", "셀렉터", 헨들러(함수))

이런 식으로 dynamic 한 엘리먼트들에도 접근할 수 있게 되었다. 그리고 parent()나 children() 을 이용해서 부모나 자식 엘리먼트에 접근했다.

 

card 추가 스크립트

$(document).on("click", ".addLabel", function (e) {
    e.preventDefault();
    $(this).hide();
    $(this).parent().children("form").show();
    $(this).parent().children("form").children("textarea").focus();
});

$(document).on("submit", ".addCard", function (e) {
    e.preventDefault();
    let addCardLabel = $(this).parent().children(".addLabel");
    let content = $(this).children(".addCardContent");
    if (content.val().length > 0) {
        $(this).parents(".list").children(".cardWrap").append(`<div class="cardContent">${content.val()}</div>`);
    }
    content.val("");
    $(this).hide();
    addCardLabel.show();
});

$(document).on("click", ".addCardBtn", function (e) {
    e.preventDefault();
    $(this).parent(".addCard").submit();
});

$(document).on("click", "#addCardClose", function (e) {
    e.preventDefault();
    $(this).parents(".addCard").children(".addCardContent").val("");
    $(this).parents(".addCard").hide();
    $(this).parents(".cardAddWrap").children(".addLabel").show();
});

.addLabel을 클릭하면 card 추가 폼이 나오고 submit하면 해당 카드의 부모 리스트에 카드를 append 시킨다.

if (content.val().length > 0) 를 통해 값이 비어있는지 체크를 했다.

 

list 추가 스크립트

addListLabel.click(function (e) {
    e.preventDefault();
    addListLabel.hide();
    addListForm.show();
    addListForm.children("#addListTitle").focus();
    
});

addListForm.submit(function (e) {
    e.preventDefault();
    let listTitle = $("#addListTitle");
    if (listTitle.val().length > 0) {
        $("#listWrap").append(
    `<div class="list">
        <div class="listTitleWrap">
            <div class="title">${listTitle.val()}</div>
            <form class="titleEdit">
                <input class="listTitle" type="text" placeholder="Project Name...">
            </form>
        </div>
        <div class="cardWrap"></div>
        <div class="cardAddWrap">
            <div class="addLabel">+ Add another card</div>
            <form class="addCard">
                <textarea name="" class="addCardContent" cols="30" rows="10" placeholder="card content..."></textarea>
                <button class="btn btn-green addCardBtn">Add Card</button>
                <span class="close" id="addCardClose">&times</span>
            </form>
        </div>
    </div>`);
    }
    listTitle.val("");
    addListForm.hide();
    addListLabel.show();
});

$("#addListClose").click(function (e) {
    $("#addListTitle").val("");
    addListForm.hide();
    addListLabel.show();
});

ES6 부터는 벡쿼터를 이용해 문자열을 좀더 쉽게 표현할 수 있게 되었다.

• 기존

var str = "안녕하세요 "+username+"님, 저는 "+me+"입니다. 나이는 "+age+"살 입니다.";

• 현재

var str = `안녕하세요 ${username}님, 저는 ${me}입니다. 나이는 ${age}살입니다.`;

리스트 추가도 카드 추가와 거의 똑같다.

스크립트를 작성했다면 이제 실행 시켜보자.

 

 

전체 코드

$(document).ready(function () {
    var pjTitle = $("#title");
    var pjTitleEdit = $("#titleEdit");
    var addListLabel = $("#addLabel");
    var addListForm = $("#addList");
    pjTitle.dblclick(function (e) {
        e.preventDefault();
        pjTitleEdit.val(pjTitle.html());
        pjTitle.hide();
        pjTitleEdit.show();
        pjTitleEdit.children("#projectTitle").focus();
    });

    pjTitleEdit.submit(function (e) {
        e.preventDefault();
        let title = $("#projectTitle").val();
        if (title == "") {
            title = "New Project";
        }
        pjTitle.html(title);
        pjTitleEdit.hide();
        pjTitle.show();
    });
    $(document).on('dblclick', ".title", function (e) {
        e.preventDefault();
        let ltTitleEdit = $(this).parent().children(".titleEdit");
        ltTitleEdit.children(".listTitle").val($(this).html());
        ltTitleEdit.children(".listTitle").focus();
        $(this).hide();
        ltTitleEdit.show();

    });
    $(document).on("submit", ".titleEdit", function (e) {
        e.preventDefault();
        let ltTitle = $(this).parent().children(".title");
        let title = $(this).children(".listTitle").val();
        ltTitle.html(title);
        $(this).hide();
        ltTitle.show();
    });

    $(document).on("click", ".addLabel", function (e) {
        e.preventDefault();
        $(this).hide();
        $(this).parent().children("form").show();
        $(this).parent().children("form").children("textarea").focus();
    });

    $(document).on("submit", ".addCard", function (e) {
        e.preventDefault();
        let addCardLabel = $(this).parent().children(".addLabel");
        let content = $(this).children(".addCardContent");
        if (content.val().length > 0) {
            $(this).parents(".list").children(".cardWrap").append(`<div class="cardContent">${content.val()}</div>`);
        }
        content.val("");
        $(this).hide();
        addCardLabel.show();
    });

    $(document).on("click", ".addCardBtn", function (e) {
        e.preventDefault();
        $(this).parent(".addCard").submit();
    });

    $(document).on("click", "#addCardClose", function (e) {
        e.preventDefault();
        $(this).parents(".addCard").children(".addCardContent").val("");
        $(this).parents(".addCard").hide();
        $(this).parents(".cardAddWrap").children(".addLabel").show();
    });

    addListLabel.click(function (e) {
        e.preventDefault();
        addListLabel.hide();
        addListForm.show();
        addListForm.children("#addListTitle").focus();

    });

    addListForm.submit(function (e) {
        e.preventDefault();
        let listTitle = $("#addListTitle");
        if (listTitle.val().length > 0) {
            $("#listWrap").append(`<div class="list">
                <div class="listTitleWrap">
                    <div class="title">${listTitle.val()}</div>
                    <form class="titleEdit">
                        <input class="listTitle" type="text" placeholder="Project Name...">
                    </form>
                </div>
                <div class="cardWrap">
                </div>
                <div class="cardAddWrap">
                    <div class="addLabel">+ Add another card</div>
                    <form class="addCard">
                        <textarea name="" class="addCardContent" cols="30" rows="10" placeholder="card content..."></textarea>
                        <button class="btn btn-green addCardBtn">Add Card</button><span class="close" id="addCardClose">&times</span>
                    </form>
                </div>
            </div>`);
        }
        listTitle.val("");
        addListForm.hide();
        addListLabel.show();
    });

    $("#addListClose").click(function (e) {
        $("#addListTitle").val("");
        addListForm.hide();
        addListLabel.show();
    });
});

이번 시간의 전체 코드이다.

다음 시간에

어느 정도 프로젝트가 마무리가 되어간다. 다음 시간에는 jQuery UI 스크립트를 이용해 리스트나 카드를 움직여 보자.