ikinci temizlik tamamlandı
This commit is contained in:
Ümit Tunç
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script>
|
||||
if (window.location.href.slice(-1) !== '/' && window.location.href.slice(-4) !== 'html') {
|
||||
// hacky redirect for mac php server...
|
||||
window.location = window.location.href + '/';
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="../style.css" />
|
||||
<title>Customization Demo & Samples for JavaScript PDF Viewer</title>
|
||||
</head>
|
||||
|
||||
<body class="pdfjs">
|
||||
<header>
|
||||
<div class="container">
|
||||
<div>
|
||||
<a href="https://pdftron.com" target="_blank">
|
||||
<div class="logo"></div>
|
||||
</a>
|
||||
<span class="title">PDFJS Express</span>
|
||||
</div>
|
||||
<div>
|
||||
<a class="button" href="https://pdfjs.express/documentation/get-started/overview" target="_blank">Go to Guides</a>
|
||||
<a class="button filled" href="https://pdfjs.express/purchase" target="_blank">Purchase</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section>
|
||||
<div class="sidebar">
|
||||
<p><b>Samples</b></p>
|
||||
|
||||
<p><a class="" href="../">Viewing</a></p>
|
||||
<p><a class="" href="../annotation">Annotation</a></p>
|
||||
<p><a class="" href="../forms">Forms</a></p>
|
||||
<p><a class="active" href=".">Customization</a></p>
|
||||
<p><a class="" href="../advanced">Advanced</a></p>
|
||||
|
||||
<p><b>Showcase</b></p>
|
||||
<p><a href="https://pdfjs.express/demo" target="_blank">Go to showcase</a></p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div id="error-message" style="display: none; background-color: red; color: white">Samples are not runnable from the file system. Please run using "npm start" or use a local web server.</div>
|
||||
|
||||
<h1>Demo to Customize PDF Viewer</h1>
|
||||
|
||||
<div>
|
||||
<h4>Internationalization</h4>
|
||||
<p>
|
||||
Shows how to switch language.
|
||||
<br />
|
||||
</p>
|
||||
<div class="inline">
|
||||
<a href="./internationalization">Launch demo</a>
|
||||
<a href="./internationalization/internationalization.js" target="_self">View Source</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Customizing UI</h4>
|
||||
<p>
|
||||
Shows how to customize the UI using WebViewer APIs. Includes modifying header, enabling/disabling features and hiding/showing individual elements.
|
||||
<br />
|
||||
</p>
|
||||
<div class="inline">
|
||||
<a href="./ui">Launch demo</a>
|
||||
<a href="./ui/ui.js" target="_self">View Source</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<script>
|
||||
if (window.location.href.indexOf('file://') === 0) {
|
||||
alert('Samples are not runnable from the file system. Please run using "npm start" or use a local web server.');
|
||||
document.getElementById('error-message').style.display = 'block';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" href="../../style.css" />
|
||||
<script src="../../../lib/webviewer.min.js"></script>
|
||||
<script src="../../old-browser-checker.js"></script>
|
||||
<script src="../../global.js"></script>
|
||||
<title>JavaScript PDF Viewer Language Demo</title>
|
||||
<script src="../../modernizr.custom.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="title sample">Language Demo for PDF Viewer</div>
|
||||
</header>
|
||||
<aside>
|
||||
<h1>Controls</h1>
|
||||
<h2>Languages</h2>
|
||||
<form id="form">
|
||||
<input type="radio" name="form" id="en" checked />
|
||||
<label for="en">English</label>
|
||||
<br />
|
||||
<input type="radio" name="form" id="fr" />
|
||||
<label for="fr">French</label>
|
||||
<br />
|
||||
<input type="radio" name="form" id="zh_cn" />
|
||||
<label for="zh_cn">Chinese Simplified</label>
|
||||
<br />
|
||||
<input type="radio" name="form" id="zh_tw" />
|
||||
<label for="zh_tw">Chinese Traditional</label>
|
||||
<br />
|
||||
<input type="radio" name="form" id="de" />
|
||||
<label for="de">German</label>
|
||||
<br />
|
||||
<input type="radio" name="form" id="es" />
|
||||
<label for="es">Spanish</label>
|
||||
<br />
|
||||
<input type="radio" name="form" id="ja" />
|
||||
<label for="ja">Japanese</label>
|
||||
<br />
|
||||
<input type="radio" name="form" id="ko" />
|
||||
<label for="ko">Korean</label>
|
||||
<br />
|
||||
<input type="radio" name="form" id="nl" />
|
||||
<label for="nl">Dutch</label>
|
||||
<br />
|
||||
<input type="radio" name="form" id="pt_br" />
|
||||
<label for="pt_br">Portuguese</label>
|
||||
<br />
|
||||
<input type="radio" name="form" id="ru" />
|
||||
<label for="ru">Russian</label>
|
||||
</form>
|
||||
<hr />
|
||||
<h1>Instructions</h1>
|
||||
<p>Use the buttons to change languages. You will be able to see the button tooltips (in desktop) being updated into different languages.</p>
|
||||
</aside>
|
||||
<div id="viewer"></div>
|
||||
<script src="../../menu-button.js"></script>
|
||||
|
||||
<!--ga-tag-->
|
||||
|
||||
<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
|
||||
['internationalization.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>
|
||||
+5931
File diff suppressed because it is too large
Load Diff
+32
@@ -0,0 +1,32 @@
|
||||
// @link WebViewerInstance: https://www.pdftron.com/api/web/WebViewerInstance.html
|
||||
// @link UI.setLanguage: https://www.pdftron.com/api/web/UI.html#setLanguage__anchor
|
||||
|
||||
WebViewer(
|
||||
{
|
||||
path: '../../../lib',
|
||||
additionalTranslations: {
|
||||
language: 'en',
|
||||
translations: { 'option.toolbarGroup.toolbarGroup-View': 'Edited View Label' },
|
||||
},
|
||||
|
||||
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
|
||||
},
|
||||
document.getElementById('viewer')
|
||||
).then(instance => {
|
||||
samplesSetup(instance);
|
||||
document.getElementById('form').onchange = e => {
|
||||
// Set language
|
||||
instance.UI.setLanguage(e.target.id);
|
||||
};
|
||||
|
||||
// To Create a new button into the settings menu and set the translation
|
||||
instance.UI.settingsMenuOverlay.add(
|
||||
{
|
||||
type: 'actionButton',
|
||||
className: 'row',
|
||||
dataElement: 'languageButton',
|
||||
label: 'Language',
|
||||
},
|
||||
'downloadButton'
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" href="../../style.css" />
|
||||
<script src="../../../lib/webviewer.min.js"></script>
|
||||
<script src="../../old-browser-checker.js"></script>
|
||||
<script src="../../global.js"></script>
|
||||
<title>JavaScript PDF Viewer Customization Demo</title>
|
||||
<script src="../../modernizr.custom.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="title sample">Demo to Customize PDF Viewer</div>
|
||||
</header>
|
||||
<aside>
|
||||
<h1>Controls</h1>
|
||||
<h2>Header layout:</h2>
|
||||
<input type="radio" name="header" id="default" checked />
|
||||
<label for="default">Default</label>
|
||||
<br />
|
||||
<input type="radio" name="header" id="reverse" />
|
||||
<label for="reverse">Reverse</label>
|
||||
<br />
|
||||
<h2>Features:</h2>
|
||||
<input type="checkbox" id="ribbons" checked />
|
||||
<label for="ribbons">Ribbons</label>
|
||||
<br />
|
||||
<input type="checkbox" id="text-selection" checked />
|
||||
<label for="text-selection">Text selection</label>
|
||||
<br />
|
||||
<input type="checkbox" id="annotations" checked />
|
||||
<label for="annotations">Annotations</label>
|
||||
<br />
|
||||
<input type="checkbox" id="notes-panel" checked />
|
||||
<label for="notes-panel">Notes panel</label>
|
||||
<br />
|
||||
<input type="checkbox" id="file-picker" />
|
||||
<label for="file-picker">File picker</label>
|
||||
<br />
|
||||
<input type="checkbox" id="print" checked />
|
||||
<label for="print">Print</label>
|
||||
<br />
|
||||
<input type="checkbox" id="download" checked />
|
||||
<label for="download">Download</label>
|
||||
<br />
|
||||
<h2>Individual elements:</h2>
|
||||
<input type="checkbox" id="view-controls" checked />
|
||||
<label for="view-controls">View controls button</label>
|
||||
<br />
|
||||
<input type="checkbox" id="search" checked />
|
||||
<label for="search">Search button</label>
|
||||
<br />
|
||||
<input type="checkbox" id="pan-tool" checked />
|
||||
<label for="pan-tool">Pan tool button</label>
|
||||
<br />
|
||||
<input type="checkbox" id="page-nav" checked />
|
||||
<label for="page-nav">Page-nav overlay</label>
|
||||
<br />
|
||||
<h2>Theme:</h2>
|
||||
<input type="radio" name="theme" id="light" checked />
|
||||
<label for="light">Light</label>
|
||||
<br />
|
||||
<input type="radio" name="theme" id="dark" />
|
||||
<label for="dark">Dark</label>
|
||||
<br />
|
||||
<hr />
|
||||
<h1>Instructions</h1>
|
||||
<p>Use the buttons to toggle header layout, features and individual elements.</p>
|
||||
</aside>
|
||||
<div id="viewer"></div>
|
||||
<script src="../../menu-button.js"></script>
|
||||
|
||||
<!--ga-tag-->
|
||||
|
||||
<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
|
||||
['ui.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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,167 @@
|
||||
// @link WebViewerInstance: https://www.pdftron.com/api/web/WebViewerInstance.html
|
||||
// @link UI.setHeaderItems: https://www.pdftron.com/api/web/UI.html#setHeaderItems__anchor
|
||||
// @link UI.enableElements: https://www.pdftron.com/api/web/UI.html#enableElements__anchor
|
||||
// @link UI.disableElements: https://www.pdftron.com/api/web/UI.html#disableElements__anchor
|
||||
|
||||
// @link Header: https://www.pdftron.com/api/web/Header.html
|
||||
// @link Header.getItems: https://www.pdftron.com/api/web/Header.html#getItems__anchor
|
||||
// @link Header.update: https://www.pdftron.com/api/web/Header.html#update__anchor
|
||||
|
||||
WebViewer(
|
||||
{
|
||||
path: '../../../lib',
|
||||
|
||||
initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
|
||||
},
|
||||
document.getElementById('viewer')
|
||||
).then(instance => {
|
||||
samplesSetup(instance);
|
||||
const { setHeaderItems, enableElements, disableElements, enableFeatures, disableFeatures, setTheme, Feature, Theme } = instance.UI;
|
||||
|
||||
const findFirstDividerIndex = items => {
|
||||
for (let i = 0; i < items.length; ++i) {
|
||||
if (items[i].type === 'divider') {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const reverseHeaderItems = () => {
|
||||
// Change header items
|
||||
setHeaderItems(header => {
|
||||
const items = header.getItems();
|
||||
// reverse all items after first divider
|
||||
const indexAfterFirstDivider = findFirstDividerIndex(items) + 1;
|
||||
// could use findIndex if you don't need to support IE
|
||||
// const indexAfterFirstDivider = items.findIndex(item => item.type === 'divider') + 1;
|
||||
const itemsToReverse = items.slice(indexAfterFirstDivider);
|
||||
itemsToReverse.reverse();
|
||||
|
||||
header.update([].concat(items.slice(0, indexAfterFirstDivider), itemsToReverse));
|
||||
});
|
||||
};
|
||||
|
||||
const toggleElement = (e, dataElement) => {
|
||||
// Enable/disable individual element
|
||||
if (e.target.checked) {
|
||||
enableElements([dataElement]);
|
||||
} else {
|
||||
disableElements([dataElement]);
|
||||
}
|
||||
};
|
||||
|
||||
if (NodeList && !NodeList.prototype.forEach) {
|
||||
NodeList.prototype.forEach = Array.prototype.forEach;
|
||||
}
|
||||
|
||||
if (HTMLCollection && !HTMLCollection.prototype.forEach) {
|
||||
HTMLCollection.prototype.forEach = Array.prototype.forEach;
|
||||
}
|
||||
|
||||
document.getElementsByName('header').forEach(radioInput => {
|
||||
radioInput.onchange = () => {
|
||||
reverseHeaderItems();
|
||||
};
|
||||
});
|
||||
|
||||
document.getElementById('ribbons').onchange = e => {
|
||||
// Enable/disable ribbons
|
||||
if (e.target.checked) {
|
||||
enableFeatures([Feature.Ribbons]);
|
||||
} else {
|
||||
disableFeatures([Feature.Ribbons]);
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('text-selection').onchange = e => {
|
||||
// Enable/disable text selection
|
||||
if (e.target.checked) {
|
||||
enableFeatures([Feature.TextSelection]);
|
||||
} else {
|
||||
disableFeatures([Feature.TextSelection]);
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('annotations').onchange = e => {
|
||||
// Enable/disable annotations
|
||||
if (e.target.checked) {
|
||||
enableFeatures([Feature.Annotations]);
|
||||
} else {
|
||||
disableFeatures([Feature.Annotations]);
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('notes-panel').onchange = e => {
|
||||
// Enable/disable notes panel
|
||||
if (e.target.checked) {
|
||||
enableFeatures([Feature.NotesPanel]);
|
||||
} else {
|
||||
disableFeatures([Feature.NotesPanel]);
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('file-picker').onchange = e => {
|
||||
// Enable/disable file picker
|
||||
if (e.target.checked) {
|
||||
enableFeatures([Feature.FilePicker]);
|
||||
} else {
|
||||
disableFeatures([Feature.FilePicker]);
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('print').onchange = e => {
|
||||
// Enable/disable print
|
||||
if (e.target.checked) {
|
||||
enableFeatures([Feature.Print]);
|
||||
} else {
|
||||
disableFeatures([Feature.Print]);
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('download').onchange = e => {
|
||||
// Enable/disable download
|
||||
if (e.target.checked) {
|
||||
enableFeatures([Feature.Download]);
|
||||
} else {
|
||||
disableFeatures([Feature.Download]);
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('view-controls').onchange = e => {
|
||||
toggleElement(e, 'viewControlsButton');
|
||||
};
|
||||
|
||||
document.getElementById('search').onchange = e => {
|
||||
toggleElement(e, 'searchButton');
|
||||
};
|
||||
|
||||
document.getElementById('pan-tool').onchange = e => {
|
||||
toggleElement(e, 'panToolButton');
|
||||
};
|
||||
|
||||
document.getElementById('page-nav').onchange = e => {
|
||||
toggleElement(e, 'pageNavOverlay');
|
||||
};
|
||||
|
||||
document.getElementById('default').onchange = e => {
|
||||
if (e.target.checked) {
|
||||
reverseHeaderItems();
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('reverse').onchange = e => {
|
||||
if (e.target.checked) {
|
||||
reverseHeaderItems();
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementsByName('theme').forEach(radioInput => {
|
||||
radioInput.onchange = e => {
|
||||
if (e.target.id === 'light' && e.target.checked) {
|
||||
setTheme(Theme.LIGHT);
|
||||
} else {
|
||||
setTheme(Theme.DARK);
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user