Ümit Tunç
135 lines
5.3 KiB
HTML
135 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
|
<link rel="stylesheet" href="../../style.css" />
|
|
<link rel="stylesheet" href="./text-compare.css" />
|
|
|
|
<script src="../../../lib/webviewer.min.js"></script>
|
|
<script src="../../../lib/core/webviewer-core.min.js"></script>
|
|
|
|
<script src="./diff.min.js"></script>
|
|
|
|
<script src="../../old-browser-checker.js"></script>
|
|
<script src="../../global.js"></script>
|
|
<script src="../../modernizr.custom.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="title sample">Text compare sample</div>
|
|
</header>
|
|
<aside>
|
|
<h1>Instructions</h1>
|
|
<p>Use dropdown, text input, or file selector to select files to compare. Click to expand matching text and use the "Find" button to find highlighted text in the top display</p>
|
|
<hr />
|
|
<h1>Controls</h1>
|
|
<h2>Choose files to compare</h2>
|
|
<form id="dropdown-form">
|
|
Left file:
|
|
<select id="leftPanel-select" style="width: 100%">
|
|
<option value="../../../samples/files/text-compare_1.pdf">text-compare_1.pdf</option>
|
|
<option value="../../../samples/files/text-compare_long_1.pdf">text-compare_long_1.pdf</option>
|
|
</select>
|
|
Right file:
|
|
<select id="rightPanel-select" style="width: 100%">
|
|
<option value="../../../samples/files/text-compare_2.pdf">text-compare_2.pdf.pdf</option>
|
|
<option value="../../../samples/files/text-compare_long_2.pdf">text-compare_long_2.pdf</option>
|
|
</select>
|
|
<input type="submit" value="Process" />
|
|
</form>
|
|
|
|
<h2>Or pass a urls to document</h2>
|
|
|
|
<form id="url-form">
|
|
Left file: <input id="leftPanel-url" type="text" style="width: 100%" /> Right file: <input id="rightPanel-url" type="text" style="width: 100%" />
|
|
<input type="submit" value="Process" />
|
|
</form>
|
|
|
|
<h2>Or choose your own files</h2>
|
|
<form id="file-picker-form">
|
|
Left file: <br /><input id="leftPanel-file-picker" type="file" accept=".pdf,.jpg,.jpeg,.png,.docx,.xlsx,.pptx,.md" />
|
|
<br />
|
|
Right file: <br /><input id="rightPanel-file-picker" type="file" accept=".pdf,.jpg,.jpeg,.png,.docx,.xlsx,.pptx,.md" />
|
|
<input type="submit" value="Process" />
|
|
</form>
|
|
</aside>
|
|
<div id="compareContainer">
|
|
<div id="header">
|
|
<span> <input id="currentPage" type="number" min="1" /> / <span id="totalPage">0</span> </span>
|
|
<span>
|
|
<input id="expandTextBtn" type="button" />
|
|
<input id="shirkTextBtn" type="button" hidden />
|
|
</span>
|
|
<span>
|
|
<input id="findSelectedBtn" type="button" value="Find" />
|
|
</span>
|
|
<span id="searchContainer">
|
|
<form id="searchForm">
|
|
<span><input id="textSearch" type="text" placeholder="Enter Text To Search"/></span>
|
|
<span><input id="searchBtn" type="submit" value="Search"/></span>
|
|
</form>
|
|
</span>
|
|
<span>
|
|
<input id="colorPopup" type="button" value="Color" />
|
|
</span>
|
|
</div>
|
|
|
|
<div id="colorFormPopup" hidden>
|
|
<h2>Color</h2>
|
|
<h4>Right</h4>
|
|
<input type="color" id="rightHighlightColor" value="#e74c3c" />
|
|
<label for="rightHighlightColor">Highlight</label>
|
|
<input type="color" id="rightBackgroundColor" value="#f9e6f0" />
|
|
<label for="rightBackgroundColor">Background</label>
|
|
<input type="color" id="rightTextColor" value="#f9e79f" />
|
|
<label for="rightTextColor">Text</label>
|
|
<h4>Left</h4>
|
|
<input type="color" id="leftHighlightColor" value="#45b39d" />
|
|
<label for="leftHighlightColor">Highlight</label>
|
|
<input type="color" id="leftBackgroundColor" value="#b3f9c6" />
|
|
<label for="leftBackgroundColor">Background</label>
|
|
<input type="color" id="leftTextColor" value="#ebf5fb" />
|
|
<label for="leftTextColor">Text</label>
|
|
</div>
|
|
|
|
<div class="text-compare" id="compareViewers">
|
|
<div id="compareLeftPanel" class="viewer"></div>
|
|
<div id="compareRightPanel" class="viewer"></div>
|
|
</div>
|
|
|
|
<div id="documentToggle">
|
|
<input id="toggleLeftBtn" class="toggleBtn" type="button" disabled value="" />
|
|
<input id="toggleRightBtn" class="toggleBtn" type="button" value="" />
|
|
</div>
|
|
|
|
<div class="documentsContainer" id="viewers">
|
|
<div id="leftPanel" class="documentViewer"></div>
|
|
<div id="rightPanel" class="documentViewer hidden"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../../menu-button.js"></script>
|
|
|
|
<script>
|
|
Modernizr.addTest('async', function() {
|
|
try {
|
|
var result;
|
|
eval('let a = () => {result = "success"}; let b = async () => {await a()}; b()');
|
|
return result === 'success';
|
|
} catch (e) {
|
|
return false;
|
|
}
|
|
});
|
|
|
|
// test for async and fall back to code compiled to ES5 if they are not supported
|
|
['text-compare.js'].forEach(function(js) {
|
|
var script = Modernizr.async ? js : js.replace('.js', '.ES5.js');
|
|
var scriptTag = document.createElement('script');
|
|
scriptTag.src = script;
|
|
scriptTag.type = 'text/javascript';
|
|
document.getElementsByTagName('head')[0].appendChild(scriptTag);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|