질문/조언팁/리소스 공유

애드온으로 만들기가 좀 애매해서 그냥 팁으로 공유합니다.

 

사전준비

1. "통합게시판 글쓰기" 용으로 사용할 게시판 생성 (예: mid=total)

2. "통합게시판"에 분류 아무거나 하나 추가

 

요약:

1. 분류 선택 엘리먼트를 복사해서 게시판 선택 엘리먼트로 만든다.

2. 게시판 리스트는 그냥 하드코딩

3. 게시판을 선택하면 change 이벤트 발생

3-1. hidden input 의 mid 값을 value를 바꿔준다. 

3-2. 선택한 게시판의 분류내용을 ajax로 가져와서 교체해준다.

----------------------------------------------

 

$(document).ready(() => {

  const CSS_SELECTOR = "분류선택창을 골라낼 수 있는 CSS 셀럭터";

// 가령 (.category.selector) 이런식

 

  const hiddenMid = document.querySelector(".write_Form input[type=hidden][name=mid]");

// 이 css 셀렉터도 잘 찾아서 교체

 

// 분류 선택 엘리먼트 복사해서 게시판 선택 엘리먼트로 사용할 예정

  const categorySelector = document.querySelector(CSS_SELECTOR); 

  const boardSelector = categorySelector.cloneNode();

 

  // 분류 선택창은 잠시 내용을 비우고, 안보이게 감춘다.

  categorySelector.querySelector("[name=category_srl]").innerHTML = "";

  categorySelector.style.display = "none";

 

  // 하드코딩으로 게시판 이름과 mid이 들어간 리스트를 만들어준다

  boardSelector.innerHTML = `

      <select name="category_srl">

        <option value="">게시판 선택</option>

        <option value="free1"> 자유1</option>

        <option value="free2"> 자유2</option>

        <option value="free3"> 자유3</option>

      </select>`;

  

  // 분류선택 엘리먼트 앞에 놓아준다.

  categorySelector.insertAdjacentElement("beforebegin", boardSelector);

  

  // 변경 이벤트 감지

  boardSelector.addEventListener("change", e => {

    const mid = e.target.value;

    hiddenMid.value = mid; // 숨은 mid 값 교체 해줌

 

    categorySelector.innerHTML = "";

    categorySelector.style.display = "none";

    

   // 선택한 게시판의 분류 내용을 가져와서 교체하고 노출시켜준다.

    $.get(`/index.php?mid=${mid}&act=dispBoardWrite`, function (response) {

      const newCategory = $(response).find(CSS_SELECTOR);

      

      if (newCategory.length) {

        categorySelector.style.display = null;

        $(categorySelector).html(newCategory.html());

        $(categorySelector).find("option:eq(1)").prop("selected", true);

      }

    });

  });

})

 

 

저 같은 경우는 제 사이트에 맞는 코드로 애드온 형태로 만들어서

해당 게시판 글쓰기 페이지에 들어오면 위 자바스크립트가 실행되고

통합글쓰기 형태로 바뀌게 하였습니다.

 

어디서부터 어디까지 선택하거나 복사할 것인지

레이아웃마다 디자인이 뒤틀어지진 않는지 요소가 많아서

하드코딩이 들어갈 수 밖에 없네요.

 

어느 정도 코드 작성이 가능하신 분은

그냥 아이디어 차원의 팁으로 읽어주시면 될 것 같습니다.

 

혹시 더 좋은 아이디어 있으신 분은 알려주세요.

  • profile
    좋은 팁 감사합니다.
  • profile
    js 파일에서 처리하는게 아니라면 <[email protected] 를 이용하여 적당히 게시판 리스트를 가져올 수 있습니다.
    {@
    $args = new stdClass();
    $args->module = 'board';
    $board_mid_list = getModel('module')->getMidList($args);
    }

    <script>
    어쩌구저쩌구
    boardSelector.innerHTML = `
    <select name="category_srl">
    <option value="">게시판 선택</option>
    <[email protected]($board_mid_list as $val)-->
    <option value="{$val->mid}"> {$val->browser_title}</option>
    <[email protected]>
    </select>`;
    </script>

    직접 해본건 아니지만 이런식으로ㅎㅎㅎ