<!doctype html>
<!--
/**
 * Copyright(c) 2020. ATSoft Co., Ltd. All sources are freely reusable.
 *
 * @brief   combobox/checkbox/image 등 HTML Control에 점자출력 속성 적용 샘플
 * @detail  
 * @version 2020-12-23 
 */
 -->
<html lang="ko">
<head>
    <meta charset="utf-8"/>
    <!-- eDotXPress HTML 라이브러리 --> 
    <link rel="stylesheet" type="text/css" href="/css/atsoft.css">  
	
    <!-- exportBrl 함수 샘플(커스터마이징 필요) --> 
    <script type="text/javascript" src="/EDotXPressHtml/js/edotxpress-html.min.js?t=20210308"></script>
    <script type="text/javascript">
    <!-- 
  
   
    // begin 점자 생성 함수	    
    //----------------------------------------------------------------------
    // 1. 현재 페이지나 특정 element를 점역하여 점자파일로 내려받는다.
    //----------------------------------------------------------------------
    // tableId를 생략하면 현재 페이지를 점역하고 전달하면 해당 표만 점역한다.
    // 현재 페이지 전체는 xls로 받을 수 없고 하나의 표만 xls로 받을 수 있다.
    function exportBrl(fileType, fileTitle, tableId)
    {
        var docData = atsoft.edotxpress.HtmlParser.parseHtml(tableId);
        if (docData != null)
        {
            var invoker = new atsoft.edotxpress.EDotServerInvoker("https://demo.atsoft.kr/EDotXPressHtml/brlgen");
            invoker.addParameter("tag_record",  docData  );
            invoker.addParameter("export_type", fileType ); // btag, brl, brf, xls
            invoker.addParameter("export_name", fileTitle); // 확장자를 제외한 저장할 파일명
    
            invoker.invoke(); // cf. invoker.invoke(errorCallback);
        }
        else
            alert(atsoft.errorManager.getErrorMsg("[brl 파일 생성 실패]"));
    }
    /* 오류 발생시 상세 메시지 대신 간단한 메시지를 출력할 경우
    function errorCallback(errMgr)
    {
        var msg = errMgr.getErrorMsg("[brl 파일 생성 실패(app 재정의된 오류 메시지)]"); // cf. errMgr.getErrorCode()   
        alert(msg);
    }
    */
    
    
    //----------------------------------------------------------------------
    // 2. 현재 페이지나 특정 element를 점역하여 점자뷰어로 보여준다.
    //----------------------------------------------------------------------
    // braille_viewer.html에서 opener.docData를 사용하는데 도메인이 서로 다르면 CORS가 발생하므로 동일한 도메인에 있어야 한다.
	var popupWnd = null;  
	var popupParam = {};  
    function openBrlViewer(fileTitle, tableId)
    {
        if (popupWnd != null)
            popupWnd.close();
                        
        var docData = atsoft.edotxpress.HtmlParser.parseHtml(tableId);
        if (docData != null)
        {
            popupParam.svrUrl    = "https://demo.atsoft.kr/EDotXPressHtml/brlgen";            
            popupParam.docData   = docData;
            popupParam.fileTitle = fileTitle;
            popupParam.enableXls = atsoft.util.misc.isEmpty(tableId) ? "false" : "true";;
            
            popupWnd = atsoft.util.window.popup("/EDotXPressHtml/html/braille_viewer.html", "eDotXPress Viewer", 900, 600, "resizable=yes, scrollbars=yes");            
        }
        else
            alert(atsoft.errorManager.getErrorMsg("[brl 파일 생성 실패]"));
    }
    // end 점자 생성 함수    


	//-->  
	</script>
	
    <!-- 
    function test()
    {
        var node = document.getElementById("asdf");
        alert("'" + node.innerHTML + "'");
        alert("'" + node.innerText + "'");
        alert("'" + node.textContent + "'");
    }
    //-->        
    </script>
    
</head>
    
<body>
   <button onclick="openBrlViewer('eDotXPress HTML Demo')">점자뷰어 보기</button> 
    <button onclick="exportBrl('brl', 'checkbox_control')">점자파일 내려받기</button> 
  <!--  <button onclick="exportBrl('btag', 'checkbox_control')">디버깅파일 내려받기</button>   //-->   
    <p>   
    
    <!-- HTML 컨트롤 예시 -->
    <strong data-brl-use="PH">3. HTML 컨트롤 예시</strong>     
         
    <div data-brl-use="PH" >
        input: <input type="text" style="width:300px" value="이것은 <input>태그의 value값입니다."><p></p>
        textarea: <textarea style="width:300px; height:100px">이것은 <textarea>태그의 값이며
소스에서 개행이 있습니다.</textarea>
        <p></p>
        <!-- 체크박스 -->
        체크박스: <input type=checkbox value="break" checked>빵 <input type=checkbox value="milk">우유 <input type=checkbox value="fruit">과일<p></p>
        라디오박스: <input type=radio name="drone" value="male" checked>남자 <input type=radio name="drone" value="female">여자<p></p>
        
        <!-- 콤보박스 -->
        콤보박스:
        <select>
            <option value="student">학생</option>
            <option value="employee">회사원</option>
            <option value="misc">기타</option>
        </select><p></p>
        
        <!-- 이미지 -->
        이미지: <input type="image" width=70 src="/EDotXPressHtml/image/img.png" alt="(주)에이티소프트 CI 이미지입니다.">
                
    </div>    
    <p> </p>     
                
</body>
</html>