페이징 수정

src/main/webapp/WEB-INF/jsp/fims/crdn/crdn01010-main.jsp

@@ -55,7 +55,7 @@
 		    <div>
 		        <div name="gridbuttonArea" class="container-page-btn">
 		            <div class="d-flex flex-row justify-content-between">
-						<span is="paging-info" data-ref-doctx="${pageName}" name="layoutPagingInfo" 
+						<span is="paging-info" name="layoutPagingInfo" 
 						class="dataTables_info"></span>
 		                <ul name="layoutPaging" 
 		                class="pagination pagination-primary">

src/main/webapp/WEB-INF/jsp/fims/crdn/crdn02010-main.jsp

@@ -161,14 +161,14 @@
 
 	        <div name="gridbuttonArea" class="container-page-btn">
 	        	<div class="d-flex flex-row justify-content-between">
-					<span is="paging-info" data-ref-doctx="${pageName}" name="photoInspectionPagingInfo" 
+					<span is="paging-info" name="photoInspectionPagingInfo" 
 					class="dataTables_info area-photoinspection"></span>
 	                <ul name="photoInspectionPaging"
 	                class="pagination pagination-primary area-photoinspection">
 	                </ul>
 				</div>
 				<div class="d-flex flex-row justify-content-between">
-					<span is="paging-info" data-ref-doctx="${pageName}" name="photoInspectionPagingInfo" 
+					<span is="paging-info" name="photoInspectionPagingInfo" 
 					class="dataTables_info area-samevehicleinspection"></span>
 	                <ul name="photoInspectionPaging"
 	                class="pagination pagination-primary area-samevehicleinspection">

src/main/webapp/WEB-INF/jsp/fims/crdn/crdn03010-main.jsp

@@ -46,7 +46,7 @@
 		    <div>
 		        <span class="container-page-btn">
 		        	<div class="d-flex flex-row justify-content-between">
-						<span is="paging-info" data-ref-doctx="${pageName}" name="crdnPagingInfo"
+						<span is="paging-info" name="crdnPagingInfo"
 						class="dataTables_info"></span>
 		                <ul name="crdnPaging"
 		                class="pagination pagination-primary">

src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05010-main.jsp

@@ -42,7 +42,7 @@
 			<div>
 				<span class="container-page-btn">
 					<div class="d-flex flex-row justify-content-between">
-						<span is="paging-info" data-ref-doctx="${pageName}" name="crdnPagingInfo"
+						<span is="paging-info" name="crdnPagingInfo"
 						class="dataTables_info"></span>
 		                <ul name="crdnPaging"
 		                class="pagination pagination-primary">

src/main/webapp/WEB-INF/jsp/fims/crdn/crdn05020-info.jsp

@@ -47,7 +47,7 @@
 				<div>
 					<span class="container-page-btn">
 						<div class="d-flex flex-row justify-content-between">
-							<span is="paging-info" data-ref-doctx="${pageName}" name="parsedInfoPagingInfo"
+							<span is="paging-info" name="parsedInfoPagingInfo"
 							class="dataTables_info"></span>
 			                <ul name="parsedInfoPaging"
 			                class="pagination pagination-primary">

src/main/webapp/WEB-INF/jsp/fims/crdn/crdn06010-main.jsp

@@ -157,7 +157,7 @@
 		    <div>
 		        <div name="gridbuttonArea" class="container-page-btn">
 		            <div class="d-flex flex-row justify-content-between">
-						<span is="paging-info" data-ref-doctx="${pageName}" name="crdnPagingInfo" 
+						<span is="paging-info" name="crdnPagingInfo" 
 						class="dataTables_info" ></span>
 		                <ul name="crdnPaging"
 		                class="pagination pagination-primary">

src/main/webapp/WEB-INF/jsp/fims/crdn/crdn07010-main.jsp

@@ -42,7 +42,7 @@
 			<div>
 				<span class="container-page-btn">
 					<div class="d-flex flex-row justify-content-between">
-						<span is="paging-info" data-ref-doctx="${pageName}" name="useTeamPagingInfo"
+						<span is="paging-info" name="useTeamPagingInfo"
 						class="dataTables_info"></span>
 		                <ul name="useTeamPaging"
 		                class="pagination pagination-primary">

src/main/webapp/WEB-INF/jsp/fims/crdn/crdn08010-main.jsp

@@ -43,7 +43,7 @@
 			<div>
 				<span class="container-page-btn">
 					<div class="d-flex flex-row justify-content-between">
-						<span is="paging-info" data-ref-doctx="${pageName}" name="exmptnVhclPagingInfo" 
+						<span is="paging-info" name="exmptnVhclPagingInfo" 
 						class="dataTables_info"></span>
 		                <ul name="exmptnVhclPaging"
 		                class="pagination pagination-primary">

src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc01010-main.jsp

@@ -111,7 +111,7 @@
 		    <div>
 		        <span class="container-page-btn">
 		            <div class="d-flex flex-row justify-content-between">
-						<span is="paging-info" data-ref-doctx="${pageName}" name="crdnPagingInfo" 
+						<span is="paging-info" name="crdnPagingInfo" 
 						class="dataTables_info"></span>
 		                <ul name="crdnPaging"
 		                class="pagination pagination-primary">

src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc02010-main.jsp

@@ -121,7 +121,7 @@
 		    <div>
 		        <span class="container-page-btn">
 		            <div class="d-flex flex-row justify-content-between">
-						<span is="paging-info" data-ref-doctx="${pageName}" name="crdnPagingInfo"
+						<span is="paging-info" name="crdnPagingInfo"
 						class="dataTables_info"></span>
 		                <ul name="crdnPaging"
 		                class="pagination pagination-primary">

src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc03010-main.jsp

@@ -111,7 +111,7 @@
 		    <div>
 		        <span class="container-page-btn">
 		            <div class="d-flex flex-row justify-content-between">
-						<span is="paging-info" data-ref-doctx="${pageName}" name="crdnPagingInfo"
+						<span is="paging-info" name="crdnPagingInfo"
 						class="dataTables_info"></span>
 		                <ul name="crdnPaging"
 		                class="pagination pagination-primary">

src/main/webapp/WEB-INF/jsp/fims/cvlc/cvlc04010-main.jsp

@@ -53,7 +53,7 @@
 		    <div>
 		        <span class="container-page-btn">
 		            <div class="d-flex flex-row justify-content-between">
-						<span is="paging-info" data-ref-doctx="${pageName}" name="dmndPagingInfo" 
+						<span is="paging-info" name="dmndPagingInfo" 
 						class="dataTables_info"></span>
 		                <ul name="dmndPaging"
 		                class="pagination pagination-primary">

src/main/webapp/resources/js/fims/cmmn/customElements.js

@@ -1,11 +1,142 @@
+/**************************************************************************
+* doctx 탐지
+**************************************************************************/
+Element.prototype.detectDoctx = function(){
+
+	let parent = this.parentElement;
+	
+	if(parent == null){
+		return null;
+	}
+	
+	if(parent.hasAttribute("data-doctx")){
+		return parent.getAttribute("data-doctx");
+	}
+
+	return parent.detectDoctx();
+}
+
+/**************************************************************************
+* 페이징 표시하는 SPAN
+**************************************************************************/
 class PagingInfoSpan extends HTMLSpanElement {
+	constructor() {
+		super();	
+	}
+	
+	connectedCallback(){
+		if(this.isConnected){
+			let nm = this.getAttribute("name");
+			let prefix = nm.substr(0,nm.indexOf("PagingInfo"))
+						
+			let doctx = this.getAttribute("data-ref-doctx");
+			if(doctx == null){
+				doctx = this.detectDoctx();
+			}
+			if(doctx != null){
+				this.setAttribute("data-ref-doctx", doctx);
+				this.id = prefix+"--"+doctx+"PagingInfo";
+			}
+		}
+	}
+}
+
+customElements.define("paging-info", PagingInfoSpan, { extends: "span" });
+
+
+/**************************************************************************
+* name으로 참조하는 label
+**************************************************************************/
+class NameLabel extends HTMLLabelElement {
 	constructor() {
 		super();
-		let nm = this.getAttribute("name");
+	}
-		let a = nm.substr(0,nm.indexOf("PagingInfo"))	
+	
-		let b = this.getAttribute("data-ref-doctx");
+	connectedCallback(){
-		this.id = a+"--"+b+"PagingInfo";	
+		if(this.isConnected){
+			
+			let doctx = this.getAttribute("data-ref-doctx");
+			if(doctx == null){
+				doctx = this.detectDoctx();
+			}
+			if(doctx != null){
+				this.setAttribute("data-ref-doctx", doctx);
+				this.htmlFor = this.getAttribute("for")+"--"+doctx;
+			}
+		}
 	}
 }
+
+customElements.define("name-label", NameLabel, { extends: "label" });
+
+/**************************************************************************
+* name과 doctx로 id를 생성하는 SELECT
+**************************************************************************/
+class IdSelect extends HTMLSelectElement {
+	constructor() {
+		super();
+	}
 	
-customElements.define("paging-info", PagingInfoSpan, { extends: "span" });
+	connectedCallback(){
+		if(this.isConnected){
+			let doctx = this.getAttribute("data-ref-doctx");
+			if(doctx == null){
+				doctx = this.detectDoctx();
+			}
+			if(doctx != null){
+				this.setAttribute("data-ref-doctx", doctx);
+				this.id = this.getAttribute("name")+"--"+doctx;
+			}
+		}
+	}
+}
+
+customElements.define("id-select", IdSelect, { extends: "select" });
+
+/**************************************************************************
+* name과 doctx로 id를 생성하는 TEXTAREA
+**************************************************************************/
+class IdTextArea extends HTMLTextAreaElement {
+	constructor() {
+		super();
+	}
+	
+	connectedCallback(){
+		if(this.isConnected){
+			let doctx = this.getAttribute("data-ref-doctx");
+			if(doctx == null){
+				doctx = this.detectDoctx();
+			}
+			if(doctx != null){
+				this.setAttribute("data-ref-doctx", doctx);
+				this.id = this.getAttribute("name")+"--"+doctx;
+			}
+		}
+	}
+}
+
+customElements.define("id-textarea", IdTextArea, { extends: "textarea" });
+
+/**************************************************************************
+* name과 doctx로 id를 생성하는 INPUT
+**************************************************************************/
+class IdInput extends HTMLInputElement {
+	constructor() {
+		super();
+	}
+	
+	connectedCallback(){
+		if(this.isConnected){
+			let doctx = this.getAttribute("data-ref-doctx");
+			if(doctx == null){
+				doctx = this.detectDoctx();
+			}
+			if(doctx != null){
+				this.setAttribute("data-ref-doctx", doctx);
+				this.id = this.getAttribute("name")+"--"+doctx;
+			}
+		}
+	}
+}
+
+customElements.define("id-input", IdInput, { extends: "input" });