dev #58
@@ -287,6 +287,10 @@
 | 
				
			|||||||
    width: 100%;
 | 
					    width: 100%;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.half-width {
 | 
				
			||||||
 | 
					    width: 50%;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.max-width.with-padding {
 | 
					.max-width.with-padding {
 | 
				
			||||||
    width: 94%;
 | 
					    width: 94%;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 
 | 
				
			|||||||
							
								
								
									
										157
									
								
								Frontend/tools/formatter.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										157
									
								
								Frontend/tools/formatter.html
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,157 @@
 | 
				
			|||||||
 | 
					<!DOCTYPE html>
 | 
				
			||||||
 | 
					<html>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<head>
 | 
				
			||||||
 | 
					    <!-- <link rel="stylesheet" href="styles.css"> -->
 | 
				
			||||||
 | 
					    <link rel="stylesheet" href="../assets/css/tools/r11form.css">
 | 
				
			||||||
 | 
					    <script src="../assets/scripts/tools/scripts.js"></script>
 | 
				
			||||||
 | 
					    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
				
			||||||
 | 
					    <meta charset="utf-8" />
 | 
				
			||||||
 | 
					</head>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<body onload="init();">
 | 
				
			||||||
 | 
					    <div class="container">
 | 
				
			||||||
 | 
					        <div id="tool" class="tool rwd-expandable">
 | 
				
			||||||
 | 
					            <div class="tool-context">
 | 
				
			||||||
 | 
					                <div class="headline">
 | 
				
			||||||
 | 
					                    <h1>Online XML Formatter <span class="versionInfo"><span class="version-span">v0.21.37 BETA</span></span>
 | 
				
			||||||
 | 
					                    </h1>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <label for="xmlArea"><b>Insert your XML:</b></label>
 | 
				
			||||||
 | 
					                <textarea id="xmlArea" name="xmlArea" rows="15"
 | 
				
			||||||
 | 
					                    class="textarea-300 bordered-field vertically-resizeable max-width"
 | 
				
			||||||
 | 
					                    onblur="setDefaultContent(this, 'Insert XML here');"
 | 
				
			||||||
 | 
					                    onfocus="clearDefaultContent(this, 'Insert XML here');"></textarea>
 | 
				
			||||||
 | 
					                <br><br>
 | 
				
			||||||
 | 
					                <button id="requestButton" class="max-width block-label action-button active"
 | 
				
			||||||
 | 
					                    onclick="performRequest('xsdpost', true, true)">Prettify XML</button>
 | 
				
			||||||
 | 
					                <button id="requestButton" class="max-width block-label action-button active"
 | 
				
			||||||
 | 
					                    onclick="performRequest('xsdpost', true, true)">Minimize XML</button>
 | 
				
			||||||
 | 
					                <br><br>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                <label for="resultArea"><b>Result:<span id="procinfo"></span></b></label>
 | 
				
			||||||
 | 
					                <textarea id="resultArea" name="resultArea" rows="2"
 | 
				
			||||||
 | 
					                    class="bordered-field textarea-300 vert2ically-resizeable max-width" style="margin-bottom: 50px;"></textarea>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div class="tooltip-window rwd-hideable">
 | 
				
			||||||
 | 
					            <h2>What is this?</h2>
 | 
				
			||||||
 | 
					            <p>This tool has 2 main functions: 
 | 
				
			||||||
 | 
					                <ul>
 | 
				
			||||||
 | 
					                    <li><strong>Prettify XML</strong> to make it human-readable (add indentation etc.)</li>
 | 
				
			||||||
 | 
					                    <li><strong>Minimize XML</strong> to make it more compact (exactly opposite to above)</li>
 | 
				
			||||||
 | 
					                </ul>
 | 
				
			||||||
 | 
					            </p>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <!-- <script>
 | 
				
			||||||
 | 
					        function getVersion() {
 | 
				
			||||||
 | 
					            return document.getElementById("versions").value;
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					    </script> -->
 | 
				
			||||||
 | 
					    <script>
 | 
				
			||||||
 | 
					        function processTooltip() {
 | 
				
			||||||
 | 
					            console.log("processTooltip");
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            if (getProcInfo() == "xalan") {
 | 
				
			||||||
 | 
					                document.getElementById("tooltipFunctionInfo").innerText = "XSLT 1.0 functions";
 | 
				
			||||||
 | 
					                document.getElementById("processorTooltipInfo").innerText = "Supports XSLT 1.0";
 | 
				
			||||||
 | 
					                hideList(document.getElementsByName("collapse30"));
 | 
				
			||||||
 | 
					            } else {
 | 
				
			||||||
 | 
					                document.getElementById("tooltipFunctionInfo").innerText = "XSLT 1.0, 2.0 & 3.0 functions";
 | 
				
			||||||
 | 
					                document.getElementById("processorTooltipInfo").innerText = "Supports XSLT up to 3.0";
 | 
				
			||||||
 | 
					                showList(document.getElementsByName("collapse30"));
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					    </script>
 | 
				
			||||||
 | 
					    <script>
 | 
				
			||||||
 | 
					        function getProcessor() {
 | 
				
			||||||
 | 
					            return document.getElementById("processors").value;
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					    </script>
 | 
				
			||||||
 | 
					    <script>
 | 
				
			||||||
 | 
					        function getVersion() {
 | 
				
			||||||
 | 
					            if (getProcInfo() == "xalan") {
 | 
				
			||||||
 | 
					                return "1.0";
 | 
				
			||||||
 | 
					            } else {
 | 
				
			||||||
 | 
					                return "3.0";
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					    </script>
 | 
				
			||||||
 | 
					    <script>
 | 
				
			||||||
 | 
					        function getProcInfo() {
 | 
				
			||||||
 | 
					            var processVariables = document.getElementById("processors").value;// + "&version=" + document.getElementById("versions").value;
 | 
				
			||||||
 | 
					            return processVariables;
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					    </script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <script>
 | 
				
			||||||
 | 
					        var triggerList = document.getElementsByClassName("collapseTrigger");
 | 
				
			||||||
 | 
					        for (i = 0; i < triggerList.length; i++) {
 | 
				
			||||||
 | 
					            console.log("trigger connected");
 | 
				
			||||||
 | 
					            triggerList[i].addEventListener("click", function () {
 | 
				
			||||||
 | 
					                console.log("click");
 | 
				
			||||||
 | 
					                var collapsible = this.parentElement;
 | 
				
			||||||
 | 
					                var collapsibleData = this.nextElementSibling;
 | 
				
			||||||
 | 
					                if (collapsibleData.style.maxHeight > "0px") {
 | 
				
			||||||
 | 
					                    collapsibleData.style.maxHeight = "0px";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                    this.classList.toggle("active", false);
 | 
				
			||||||
 | 
					                    if (!this.classList.contains("collapsibleMini")) {
 | 
				
			||||||
 | 
					                        collapsible.classList.toggle("active", false);
 | 
				
			||||||
 | 
					                    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                    var subLists1 = collapsibleData.getElementsByClassName("content");
 | 
				
			||||||
 | 
					                    var subLists2 = collapsibleData.getElementsByClassName("active");
 | 
				
			||||||
 | 
					                    for (j = 0; j < subLists1.length; j++) {
 | 
				
			||||||
 | 
					                        subLists1[j].style.maxHeight = "0px";
 | 
				
			||||||
 | 
					                    }
 | 
				
			||||||
 | 
					                    for (j = 0; j < subLists2.length; j++) {
 | 
				
			||||||
 | 
					                        subLists2[j].classList.toggle("active", false);
 | 
				
			||||||
 | 
					                    }
 | 
				
			||||||
 | 
					                } else {
 | 
				
			||||||
 | 
					                    collapsibleData.style.maxHeight = (collapsibleData.scrollHeight) + "px";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                    this.classList.toggle("active", true);
 | 
				
			||||||
 | 
					                    if (!this.classList.contains("collapsibleMini")) {
 | 
				
			||||||
 | 
					                        collapsible.classList.toggle("active", true);
 | 
				
			||||||
 | 
					                    } else {
 | 
				
			||||||
 | 
					                        var parentContent = this.closest(".content");
 | 
				
			||||||
 | 
					                        parentContent.style.maxHeight = (parentContent.scrollHeight + collapsibleData.scrollHeight) + "px";
 | 
				
			||||||
 | 
					                    }
 | 
				
			||||||
 | 
					                }
 | 
				
			||||||
 | 
					            });
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					    </script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <script>
 | 
				
			||||||
 | 
					        function init() {
 | 
				
			||||||
 | 
					            //Handle clicks in whole form and set info in tooltip
 | 
				
			||||||
 | 
					            setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here');
 | 
				
			||||||
 | 
					            setDefaultContent(document.getElementById("transformArea"), 'Insert XSD here');
 | 
				
			||||||
 | 
					            console.log("init");
 | 
				
			||||||
 | 
					            // refreshTooltip();
 | 
				
			||||||
 | 
					            processTooltip();
 | 
				
			||||||
 | 
					            tool.addEventListener('click', event => {
 | 
				
			||||||
 | 
					                //Check if script was called from textarea or selector
 | 
				
			||||||
 | 
					                var targetID = event.target.getAttribute('id');
 | 
				
			||||||
 | 
					                if (targetID !== "processors" && targetID !== "xmlArea" && targetID !== "transformArea" && targetID !== "versions") {
 | 
				
			||||||
 | 
					                    return;
 | 
				
			||||||
 | 
					                }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                processTooltip();
 | 
				
			||||||
 | 
					                // console.log("clock");
 | 
				
			||||||
 | 
					            })
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					    </script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					</body>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					</html>
 | 
				
			||||||
		Reference in New Issue
	
	Block a user