window.onload = function () {
//DsPdfViewer.LicenseKey = "***key***";
var viewer;
var React;
var ReactDOM;
var initialAccessTable = null;
function applyAccess(selectedUserName, access) {
console.log('アクセスを適用 ' + selectedUserName + ': ' + access + ', 現在のユーザー名: ' + viewer.currentUserName);
if (selectedUserName === viewer.currentUserName) {
viewer.findAnnotation(20, // 20 - AnnotationTypeCode.WIDGET
{
findField: 'annotationType',
pageNumberConstraint: 1,
findAll: true
}).then(function (annotationsDataArr) {
viewer.updateAnnotations(0, annotationsDataArr.map(function (data) {
if (access === 'LockAll') {
data.annotation.locked = true;
} else if (access === 'LockFirstName' && data.annotation.fieldName === "FirstName") {
data.annotation.locked = true;
} else if (access === 'LockLastName' && data.annotation.fieldName === "LastName") {
data.annotation.locked = true;
} else {
data.annotation.locked = false;
}
return data.annotation;
}));
});
}
}
function getInitialAccessTable(users) {
if (!initialAccessTable) {
initialAccessTable = {};
for (var i = 0; i < users.length; i++) {
initialAccessTable[users[i]] = 'UnlockAll';
}
}
return initialAccessTable;
}
function FieldsLockerPanel(props) {
var viewer = props.viewer;
var availableUsers = ['ユーザー', '利用者Ａ', '利用者Ｂ', '利用者Ｃ'];
var stateArr0 = React.useState(viewer.currentUserName || 'ユーザー'),
currentUserName = stateArr0[0],
setCurrentUserName = stateArr0[1];
if (availableUsers.indexOf(currentUserName) === -1) {
availableUsers.splice(0, 0, currentUserName);
}
var stateArr1 = React.useState(availableUsers[0] || ''),
selectedUserName = stateArr1[0],
setSelectedUserName = stateArr1[1];
var stateArr2 = React.useState(getInitialAccessTable(availableUsers));
var accessTable = stateArr2[0],
setAccessTable = stateArr2[1];
var userOpts = [];
for (var i = 0; i < availableUsers.length; i++) {
var curUserName = availableUsers[i];
userOpts.push( /*#__PURE__*/React.createElement('option', {
selected: !!(selectedUserName === curUserName),
value: curUserName
}, curUserName));
}
var currentAccess = accessTable[selectedUserName];
console.log("currentAccess: " + currentAccess + ", selectedUserName: " + selectedUserName);
return /*#__PURE__*/React.createElement('div', {
style: {
margin: '30px 30px 30px 30px'
},
class: 'fields-locker-panel-outer'
}, /*#__PURE__*/React.createElement('p', {
class: 'gc-heading__text'
}, '現在のユーザー： '), /*#__PURE__*/React.createElement('p', null, /*#__PURE__*/
React.createElement('input', {
class: 'current-user-input gc-input',
value: currentUserName,
onChange: function (e) {
var newCurrentUserName = e.target.value || "";
//if (newCurrentUserName)
viewer.currentUserName = newCurrentUserName;
setCurrentUserName(newCurrentUserName);
//if (newCurrentUserName)
applyAccess(newCurrentUserName, accessTable[newCurrentUserName] || "UnlockAll");
}
}, null)),
/*#__PURE__*/React.createElement('p', {
class: 'gc-heading__text'
}, 'ユーザーを選択： '), /*#__PURE__*/React.createElement('p', null, /*#__PURE__*/
React.createElement('select', {
style: {
width: '100%'
},
class: 'gc-combo select-user-combo',
onChange: function (e) {
var newUserName = e.target.value;
console.log("選択したユーザー名を設定: " + newUserName);
setSelectedUserName(newUserName);
}
}, userOpts), /*#__PURE__*/React.createElement('label', {
style: {
margin: '10px 10px 10px 10px'
}
}, 'アクセス： ', currentAccess)), /*#__PURE__*/React.createElement('p', {
class: 'gc-heading__text'
}, 'アクセスタイプを選択： '), /*#__PURE__*/React.createElement('p', null, /*#__PURE__*/React.createElement('select', {
style: {
width: '100%'
},
value: currentAccess,
class: 'gc-combo access-combo',
onChange: function (e) {
var newAccessTable = JSON.parse(JSON.stringify(accessTable));
newAccessTable[selectedUserName] = e.target.value;
initialAccessTable = newAccessTable;
setAccessTable(newAccessTable);
applyAccess(selectedUserName, e.target.value);
}
}, /*#__PURE__*/React.createElement('option', {
selected: currentAccess === 'UnlockAll',
value: 'UnlockAll'
}, '全フィールドのロックを解除'),
/*#__PURE__*/React.createElement('option', {
selected: currentAccess === 'LockLastName',
value: 'LockLastName'
}, '「お名前（姓）」をロック'),
/*#__PURE__*/React.createElement('option', {
selected: currentAccess === 'LockFirstName',
value: 'LockFirstName'
}, '「お名前（名）」をロック'),
/*#__PURE__*/React.createElement('option', {
selected: currentAccess === 'LockAll',
value: 'LockAll'
}, '全フィールドをロック')
)), /*#__PURE__*/React.createElement('p', null, /*#__PURE__*/React.createElement('button', {
style: {
width: '100%',
textAlign: 'center'
},
class: 'gc-btn',
onClick: function (e) {
viewer.layoutMode = 2;
}
}, /*#__PURE__*/React.createElement('span', {
class: 'gc-btn__text'
}, 'フォームエディタを開く'))));
}
function createFieldsLockerPanel(viewer) {
// React要素を作成
return React.createElement(FieldsLockerPanel, { viewer: viewer });
}
function createSvgIconElement() {
return React.createElement('svg', { xmlns: 'http://www.w3.org/2000/svg', version: '1.1', width: '24', height: '24', viewBox: '0 0 24 24', fill: '#ffffff' }, React.createElement('path', { d: 'M10 13.32q-0.352-0.273-3.184-2.48t-4.316-3.34l7.5-5.82 7.5 5.82q-1.484 1.133-4.297 3.32t-3.203 2.5zM10 15.469l6.133-4.805 1.367 1.055-7.5 5.82-7.5-5.82 1.367-1.055z' }));
}
viewer = new DsPdfViewer("#viewer", {
workerSrc: "/diodocs/pdfviewer/demos/product-bundles/build/dspdfviewer.worker.js",
supportApi: getSupportApiSettings(),
language: "ja",
restoreViewStateOnLoad: false
});
React = viewer.getType('React');
ReactDOM = viewer.getType('ReactDOM');
viewer.addFormEditorPanel();
accessPanelHandle = viewer.createPanel(createFieldsLockerPanel(viewer), null, 'AccessLevel',
{
icon: { type: 'svg', content: createSvgIconElement() },
label: 'アクセスレベル', description: 'アクセスレベルの管理',
visible: false, enabled: false
});
// パネルのレイアウトにアクセスレベルのパネルを追加
viewer.layoutPanels(['AccessLevel', 'FormEditor']);
viewer.onAfterOpen.register(() => {
// ドキュメントを開く際にアクセスレベルのパネルを有効にする
viewer.updatePanel(accessPanelHandle, { visible: true, enabled: true });
// パネルを開いて固定
viewer.leftSidebar.menu.panels.open(accessPanelHandle.id);
viewer.leftSidebar.menu.panels.pin(accessPanelHandle.id);
});
viewer.open("/diodocs/pdfviewer/demos/product-bundles/assets/pdf/viewer-edit-lock-fields.pdf");
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>UIでのフィールドロック</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./src/styles.css">
<script src="/diodocs/pdfviewer/demos/product-bundles/build/dspdfviewer.js"></script>
<script src="/diodocs/pdfviewer/demos/product-bundles/build/wasmSupportApi.js"></script>
<script src="/diodocs/pdfviewer/demos/resource/js/init.js"></script>
<script src="./src/app.js"></script>
</head>
<body>
<div id="viewer"></div>
</body>
</html>
#viewer { height: 100%; }
