mirror of
https://github.com/xiaoqidun/ofdgo.git
synced 2026-10-29 16:25:49 +08:00
485 lines
32 KiB
HTML
485 lines
32 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="theme-color" content="#fbfcfd">
|
|
<title>OFDGo WebUI - OFD编辑器</title>
|
|
<link rel="manifest" href="./ofdgo.json">
|
|
<link rel="icon" type="image/svg+xml" href="./ofdgo.svg">
|
|
<link rel="stylesheet" href="./ofdgo.css">
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<header class="toolbar app-bar">
|
|
<input id="ofdInput" class="file-input" type="file" accept=".ofd">
|
|
<input id="fontInput" class="file-input" type="file" accept=".ttf,.otf,.ttc,font/*" multiple>
|
|
<input id="fontDirectoryInput" class="file-input" type="file" webkitdirectory multiple>
|
|
<div class="tool-group">
|
|
<button id="ofdButton" class="icon-button" type="button" title="打开" aria-label="打开" aria-keyshortcuts="Control+O Meta+O"><span class="open-icon" aria-hidden="true"></span></button>
|
|
<button id="newButton" class="icon-button" type="button" title="新建" aria-label="新建"><span class="new-icon" aria-hidden="true"></span></button>
|
|
<button id="editButton" class="icon-button" type="button" title="编辑" aria-label="编辑" aria-pressed="false" disabled><span class="edit-icon" aria-hidden="true"></span></button>
|
|
<button id="togglePagesButton" class="icon-button" type="button" title="页面栏" aria-label="页面栏" aria-pressed="true">☰</button>
|
|
<button id="toggleMetaButton" class="icon-button" type="button" title="信息栏" aria-label="信息栏" aria-pressed="true">ⓘ</button>
|
|
</div>
|
|
<div class="toolbar-space"></div>
|
|
<div class="tool-group">
|
|
<button id="prevButton" class="icon-button arrow-prev" type="button" title="上一页" aria-label="上一页" aria-keyshortcuts="ArrowLeft" disabled></button>
|
|
<label class="page-control">
|
|
<input id="pageInput" type="number" min="1" value="0" disabled>
|
|
<span>/</span>
|
|
<span id="pageTotal">0</span>
|
|
</label>
|
|
<button id="nextButton" class="icon-button arrow-next" type="button" title="下一页" aria-label="下一页" aria-keyshortcuts="ArrowRight" disabled></button>
|
|
</div>
|
|
<div class="tool-group">
|
|
<button id="zoomOutButton" class="icon-button" type="button" title="缩小" aria-label="缩小" aria-keyshortcuts="-" disabled>-</button>
|
|
<span id="zoomLabel" class="zoom-label">100%</span>
|
|
<button id="zoomInButton" class="icon-button" type="button" title="放大" aria-label="放大" aria-keyshortcuts="= Shift+= Plus" disabled>+</button>
|
|
<button id="fitButton" class="button" type="button" data-short="宽" aria-label="适宽" disabled>适宽</button>
|
|
<button id="fitHeightButton" class="button" type="button" data-short="高" aria-label="适高" disabled>适高</button>
|
|
<button id="rotateButton" class="button" type="button" data-short="转" title="顺时针旋转90°" aria-label="旋转" disabled>旋转</button>
|
|
<button id="panButton" class="button" type="button" data-short="拖" title="拖动页面" aria-label="拖动" aria-pressed="false" disabled>拖动</button>
|
|
<button id="continuousButton" class="button" type="button" data-short="连" title="连续显示" aria-label="连续显示" aria-pressed="false" disabled>连续</button>
|
|
<button id="annotationButton" class="button" type="button" data-short="注" title="关闭注解" aria-label="关闭注解" aria-pressed="true">注解</button>
|
|
</div>
|
|
<div class="tool-group">
|
|
<select id="exportFormat" class="format-select" title="导出格式" aria-label="导出格式" disabled></select>
|
|
<select id="imageDPI" class="format-select dpi-select" title="图片 DPI" aria-label="图片 DPI" disabled>
|
|
<option value="96">96</option>
|
|
<option value="150">150</option>
|
|
<option value="300" selected>300</option>
|
|
<option value="600">600</option>
|
|
</select>
|
|
<button id="exportPageButton" class="button" type="button" data-short="单" title="导出单页" aria-label="导出单页" disabled>单页</button>
|
|
<button id="exportButton" class="button" type="button" data-short="多" title="导出文档" aria-label="导出文档" aria-haspopup="dialog" aria-controls="exportPanel" disabled>文档</button>
|
|
</div>
|
|
</header>
|
|
<div id="editorTools" class="editor-toolbar" role="toolbar" aria-label="编辑工具" hidden>
|
|
<div class="editor-group editor-file">
|
|
<button id="saveButton" class="button" type="button" title="另存为OFD" aria-label="保存OFD" aria-keyshortcuts="Control+S Meta+S">保存</button>
|
|
<button id="undoButton" class="button" type="button" disabled>撤销</button>
|
|
<button id="redoButton" class="button" type="button" disabled>重做</button>
|
|
<span>文件</span>
|
|
</div>
|
|
<div class="editor-group editor-objects">
|
|
<button id="compositeBackButton" class="button" type="button" title="返回上层" hidden>返回</button>
|
|
<button id="selectObjectButton" class="button" type="button" aria-pressed="true">选择</button>
|
|
<button id="multiSelectButton" class="button" type="button" aria-pressed="false" title="多选对象">多选</button>
|
|
<button id="editObjectButton" class="button" type="button" aria-label="修改对象" disabled>修改</button>
|
|
<button id="copyObjectButton" class="button" type="button" aria-label="复制对象" disabled>复制</button>
|
|
<button id="deleteObjectButton" class="button" type="button" disabled>删除</button>
|
|
<select id="objectOrder" class="order-select" aria-label="对象层级" disabled>
|
|
<option value="" hidden>层级</option>
|
|
<option value="up">上移</option>
|
|
<option value="down">下移</option>
|
|
<option value="top">置顶</option>
|
|
<option value="bottom">置底</option>
|
|
</select>
|
|
<select id="objectAlign" class="order-select" aria-label="对象对齐" disabled>
|
|
<option value="" hidden>对齐</option>
|
|
<option value="left">左侧</option>
|
|
<option value="center">水平</option>
|
|
<option value="right">右侧</option>
|
|
<option value="top">顶部</option>
|
|
<option value="middle">垂直</option>
|
|
<option value="bottom">底部</option>
|
|
</select>
|
|
<select id="objectDistribute" class="order-select" aria-label="对象分布" disabled>
|
|
<option value="" hidden>分布</option>
|
|
<option value="horizontal">水平</option>
|
|
<option value="vertical">垂直</option>
|
|
</select>
|
|
<button id="objectStyleButton" class="editor-group-action" type="button" title="对象样式" aria-label="对象样式" aria-haspopup="dialog" aria-controls="objectStylePanel" disabled>对象</button>
|
|
</div>
|
|
<div class="editor-group editor-transform">
|
|
<select id="objectRotate" class="order-select" aria-label="对象旋转" disabled>
|
|
<option value="" hidden>旋转</option>
|
|
<option value="90">右转90°</option>
|
|
<option value="-90">左转90°</option>
|
|
</select>
|
|
<select id="objectFlip" class="order-select" aria-label="对象翻转" disabled>
|
|
<option value="" hidden>翻转</option>
|
|
<option value="horizontal">水平</option>
|
|
<option value="vertical">垂直</option>
|
|
</select>
|
|
<button id="objectBoundsButton" class="editor-group-action" type="button" title="位置尺寸" aria-label="位置尺寸" aria-haspopup="dialog" aria-controls="objectBoundsPanel" disabled>变换</button>
|
|
</div>
|
|
<div class="editor-group">
|
|
<button id="insertTextButton" class="button" type="button" aria-label="添加文字" aria-pressed="false">文字</button>
|
|
<button id="insertImageButton" class="button" type="button" aria-label="添加图片">图片</button>
|
|
<button id="drawLineButton" class="button" type="button" aria-label="绘制直线" aria-pressed="false">直线</button>
|
|
<button id="drawRectangleButton" class="button" type="button" aria-label="绘制矩形" aria-pressed="false">矩形</button>
|
|
<button id="drawEllipseButton" class="button" type="button" aria-label="绘制椭圆" aria-pressed="false">椭圆</button>
|
|
<select id="arrowTool" aria-label="箭头" title="箭头"><option value="" hidden>箭头</option><option value="line">无</option><option value="arrow">单向</option><option value="double-arrow">双向</option></select>
|
|
<span>插入</span>
|
|
</div>
|
|
<div class="editor-group">
|
|
<div class="text-font"><div class="font-picker"><input id="textFont" type="text" role="combobox" aria-label="字体" title="字体" aria-autocomplete="list" aria-controls="textFontList" aria-expanded="false" autocomplete="off" spellcheck="false" disabled><button id="textFontToggle" type="button" title="选择字体" aria-label="选择字体" tabindex="-1" disabled></button></div><button id="textFontAdd" class="icon-button" type="button" title="添加字体" aria-label="添加字体">+</button></div>
|
|
<div id="textFontList" class="font-listbox" role="listbox" aria-label="字体列表" popover="manual"></div>
|
|
<label class="editor-field"><span>字号</span><span class="editor-number"><input id="textSize" type="number" min="1" step="any" required aria-label="字号" disabled><span>pt</span></span></label>
|
|
<input id="textColor" class="color-input" type="color" value="#000000" aria-label="文字颜色" title="文字颜色" disabled>
|
|
<span>文字</span>
|
|
</div>
|
|
<div class="editor-group editor-paragraph">
|
|
<select id="textAlign" aria-label="段落对齐" title="段落对齐" disabled>
|
|
<option value="" hidden>原文</option>
|
|
<option value="left">左齐</option>
|
|
<option value="center">居中</option>
|
|
<option value="right">右齐</option>
|
|
<option value="justify">两端</option>
|
|
</select>
|
|
<label class="editor-field"><span>行距</span><span class="editor-number"><input id="textLineHeight" type="number" min="0" step="any" placeholder="自动" aria-label="行距" title="行距,0为自动" disabled><span>pt</span></span></label>
|
|
<button id="textWrap" class="button" type="button" aria-label="自动折行" aria-pressed="false" disabled>折行</button>
|
|
<label class="editor-field"><span>字距</span><span class="editor-number"><input id="textSpacing" type="number" step="any" placeholder="0" aria-label="字距" title="字距" disabled><span>pt</span></span></label>
|
|
<button id="paragraphButton" class="editor-group-action" type="button" title="段落缩进" aria-label="段落缩进" aria-haspopup="dialog" aria-controls="paragraphPanel" disabled>段落</button>
|
|
</div>
|
|
<div class="editor-group">
|
|
<div class="shape-paint"><label><input id="shapeFill" type="checkbox">填充</label><input id="shapeFillColor" class="color-input" type="color" value="#dcefeb" aria-label="填充颜色" title="填充颜色"></div>
|
|
<div class="shape-paint"><label><input id="shapeStroke" type="checkbox" checked>描边</label><input id="shapeStrokeColor" class="color-input" type="color" value="#000000" aria-label="描边颜色" title="描边颜色"></div>
|
|
<label class="editor-field"><span>线宽</span><span class="editor-number"><input id="shapeWidth" type="number" value="1" min="0" step="any" required aria-label="线宽" title="线宽"><span>pt</span></span></label>
|
|
<span>图形</span>
|
|
</div>
|
|
<div class="editor-group editor-image">
|
|
<select id="imageFit" aria-label="图片适应方式" disabled>
|
|
<option value="" hidden>缩放</option>
|
|
<option value="contain">适应</option>
|
|
<option value="cover">填充</option>
|
|
</select>
|
|
<button id="cropImageButton" class="button" type="button" aria-label="裁剪图片" aria-pressed="false" disabled>裁剪</button>
|
|
<button id="resetCropButton" class="button" type="button" aria-label="还原图片" disabled>还原</button>
|
|
<span>图片</span>
|
|
</div>
|
|
<div class="editor-group editor-erase">
|
|
<button id="eraseButton" class="button" type="button" title="擦除" aria-label="擦除" aria-pressed="false">擦除</button>
|
|
<select id="eraseMode" aria-label="擦除方式" title="擦除方式,矩形和套索为视觉裁剪"><option value="erase-object">对象</option><option value="erase-region">矩形</option><option value="erase-path">套索</option></select>
|
|
<span>擦除</span>
|
|
</div>
|
|
<div class="editor-group">
|
|
<select id="addPageButton" aria-label="新增页面" title="新增页面"><option value="" hidden>新增</option><option value="blank">空白</option><option value="import">插页</option></select>
|
|
<button id="copyPageButton" class="button" type="button" aria-label="复制页面">复制</button>
|
|
<button id="deletePageButton" class="button" type="button" aria-label="删除页面">删除</button>
|
|
<button id="movePagePrevButton" class="button" type="button" aria-label="页面前移">前移</button>
|
|
<button id="movePageNextButton" class="button" type="button" aria-label="页面后移">后移</button>
|
|
<button id="pageSettingsButton" class="button" type="button" aria-label="页面设置" aria-haspopup="dialog" aria-controls="pagePanel">设置</button>
|
|
<button id="batchPagesButton" class="editor-group-action" type="button" title="批量页面" aria-label="批量页面" aria-haspopup="dialog" aria-controls="batchPagesPanel">页面</button>
|
|
</div>
|
|
</div>
|
|
<dialog id="batchPagesPanel" class="form-dialog" aria-label="批量页面">
|
|
<form id="batchPagesForm">
|
|
<div class="form-row"><label for="batchPageAction">操作</label><select id="batchPageAction"><option value="copy">复制</option><option value="move">移动</option><option value="delete">删除</option><option value="save">另存</option></select></div>
|
|
<div class="form-row"><label for="batchPageRange">页码</label><input id="batchPageRange" type="text" required autocomplete="off" spellcheck="false" autofocus></div>
|
|
<div id="batchPagePositionRow" class="form-row" hidden><label for="batchPagePosition">位置</label><select id="batchPagePosition"><option value="before">页前</option><option value="after">页后</option><option value="first">首部</option><option value="last">末尾</option></select></div>
|
|
<div class="form-actions"><div id="batchPagesStatus" class="form-status" role="status"></div><button id="batchPagesCancel" class="button" type="button">取消</button><button id="batchPagesSubmit" class="button" type="submit">复制</button></div>
|
|
</form>
|
|
</dialog>
|
|
<dialog id="objectStylePanel" class="form-dialog" aria-label="对象样式">
|
|
<form id="objectStyleForm">
|
|
<div class="form-row"><span>格式</span><div class="form-format"><button id="copyStyleButton" class="button" type="button" aria-label="复制格式">复制</button><button id="pasteStyleButton" class="button" type="button" aria-label="粘贴格式">粘贴</button></div></div>
|
|
<div class="form-row"><label for="objectOpacity">透明</label><div class="form-unit"><input id="objectOpacity" type="number" min="0" max="100" step="any" aria-label="透明度" autofocus><span>%</span></div></div>
|
|
<div id="objectStrokeFields">
|
|
<div class="form-row"><label for="objectDash">线型</label><select id="objectDash"><option value="mixed" hidden>混合</option><option value="solid">实线</option><option value="dash">虚线</option><option value="dot">点线</option><option value="dashdot">点划</option><option value="custom">自定</option></select></div>
|
|
<div id="objectDashRow" class="form-row" hidden><label for="objectDashPattern">间隔</label><div class="form-unit"><input id="objectDashPattern" type="text" autocomplete="off" spellcheck="false"><span>mm</span></div></div>
|
|
<div class="form-row"><label for="objectDashOffset">偏移</label><div class="form-unit"><input id="objectDashOffset" type="number" step="any"><span>mm</span></div></div>
|
|
<div class="form-pair">
|
|
<div class="form-row"><label for="objectCap">端点</label><select id="objectCap"><option value="mixed" hidden>混合</option><option value="Butt">平头</option><option value="Round">圆头</option><option value="Square">方头</option></select></div>
|
|
<div class="form-row"><label for="objectJoin">转角</label><select id="objectJoin"><option value="mixed" hidden>混合</option><option value="Miter">尖角</option><option value="Round">圆角</option><option value="Bevel">斜角</option></select></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-actions"><div id="objectStyleStatus" class="form-status" role="status"></div><button id="objectStyleCancel" class="button" type="button">取消</button><button class="button" type="submit">确定</button></div>
|
|
</form>
|
|
</dialog>
|
|
<dialog id="outlinePanel" class="form-dialog" aria-label="编辑目录">
|
|
<form id="outlineForm">
|
|
<div class="form-row"><label for="outlineTitle">标题</label><input id="outlineTitle" type="text" required autofocus></div>
|
|
<div class="form-row"><label for="outlineParent">上级</label><select id="outlineParent"></select></div>
|
|
<div class="form-row"><label for="outlinePage">页码</label><input id="outlinePage" type="number" min="1" step="1" placeholder="无" aria-label="目标页码,留空表示无目标"></div>
|
|
<div id="outlinePositionRow" class="form-row" hidden><label for="outlinePosition">顺序</label><input id="outlinePosition" type="number" min="1" step="1" required value="1"></div>
|
|
<div class="form-actions"><div id="outlineStatus" class="form-status" role="status"></div><button id="outlineCancel" class="button" type="button">取消</button><button id="outlineSubmit" class="button" type="submit">新增</button></div>
|
|
</form>
|
|
</dialog>
|
|
<dialog id="objectBoundsPanel" class="form-dialog" aria-label="位置尺寸">
|
|
<form id="objectBoundsForm">
|
|
<div class="form-pair">
|
|
<div class="form-row"><label for="objectX">横向</label><div class="form-unit"><input id="objectX" type="number" step="any" required autofocus><span>mm</span></div></div>
|
|
<div class="form-row"><label for="objectY">纵向</label><div class="form-unit"><input id="objectY" type="number" step="any" required><span>mm</span></div></div>
|
|
</div>
|
|
<div class="form-pair">
|
|
<div class="form-row"><label for="objectWidth">宽度</label><div class="form-unit"><input id="objectWidth" type="number" min="0" step="any" required><span>mm</span></div></div>
|
|
<div class="form-row"><label for="objectHeight">高度</label><div class="form-unit"><input id="objectHeight" type="number" min="0" step="any" required><span>mm</span></div></div>
|
|
</div>
|
|
<div class="form-row"><span>比例</span><label class="form-check"><input id="objectAspect" type="checkbox" checked>锁定</label></div>
|
|
<div class="form-actions"><div id="objectBoundsStatus" class="form-status" role="status"></div><button id="objectBoundsCancel" class="button" type="button">取消</button><button class="button" type="submit">确定</button></div>
|
|
</form>
|
|
</dialog>
|
|
<dialog id="createPanel" class="form-dialog" aria-label="新建文档">
|
|
<form id="createForm">
|
|
<div class="form-row">
|
|
<label for="createName">名称</label>
|
|
<input id="createName" type="text" value="未命名" required autofocus>
|
|
</div>
|
|
<div class="form-pair">
|
|
<div class="form-row">
|
|
<label for="createWidth">宽度</label>
|
|
<div class="form-unit"><input id="createWidth" type="number" value="210" min="1" step="any" required><span>mm</span></div>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="createHeight">高度</label>
|
|
<div class="form-unit"><input id="createHeight" type="number" value="297" min="1" step="any" required><span>mm</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-actions">
|
|
<div id="createStatus" class="form-status" role="status"></div>
|
|
<button id="createCancel" class="button" type="button">取消</button>
|
|
<button class="button" type="submit">新建</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
<dialog id="importPanel" class="form-dialog" aria-label="插入页面">
|
|
<form id="importForm">
|
|
<div class="form-row"><label for="importFile">文档</label><input id="importFile" type="file" accept=".ofd" required autofocus></div>
|
|
<div class="form-row"><label for="importRange">范围</label><select id="importRange"><option value="all">全部</option><option value="custom">指定</option></select></div>
|
|
<div id="importPagesRow" class="form-row" hidden><label for="importPages">页码</label><input id="importPages" type="text" autocomplete="off" spellcheck="false" disabled></div>
|
|
<div class="form-row"><label for="importPosition">位置</label><select id="importPosition"><option value="before">页前</option><option value="after" selected>页后</option><option value="first">首部</option><option value="last">末尾</option></select></div>
|
|
<div class="form-row"><label for="importOutlines">目录</label><input id="importOutlines" type="checkbox" title="导入对应目录"></div>
|
|
<div class="form-actions"><div id="importStatus" class="form-status" role="status"></div><button id="importCancel" class="button" type="button">取消</button><button id="importSubmit" class="button" type="submit" disabled>插入</button></div>
|
|
</form>
|
|
</dialog>
|
|
<dialog id="paragraphPanel" class="form-dialog" aria-label="段落缩进">
|
|
<form id="paragraphForm">
|
|
<div class="form-row"><label for="firstLineIndent">首行</label><div class="form-unit"><input id="firstLineIndent" type="number" step="any" required autofocus><span>mm</span></div></div>
|
|
<div class="form-pair">
|
|
<div class="form-row"><label for="leftIndent">左侧</label><div class="form-unit"><input id="leftIndent" type="number" step="any" required><span>mm</span></div></div>
|
|
<div class="form-row"><label for="rightIndent">右侧</label><div class="form-unit"><input id="rightIndent" type="number" step="any" required><span>mm</span></div></div>
|
|
</div>
|
|
<div class="form-actions"><div id="paragraphStatus" class="form-status" role="status"></div><button id="paragraphCancel" class="button" type="button">取消</button><button class="button" type="submit">确定</button></div>
|
|
</form>
|
|
</dialog>
|
|
<dialog id="infoPanel" class="form-dialog" aria-label="文档信息">
|
|
<form id="infoForm">
|
|
<label class="form-row"><span>标题</span><input id="infoTitle" type="text" autofocus></label>
|
|
<label class="form-row"><span>主题</span><input id="infoSubject" type="text"></label>
|
|
<label class="form-row"><span>作者</span><input id="infoAuthor" type="text"></label>
|
|
<div class="form-actions"><div id="infoStatus" class="form-status" role="status"></div><button id="infoCancel" class="button" type="button">取消</button><button class="button" type="submit">确定</button></div>
|
|
</form>
|
|
</dialog>
|
|
<dialog id="pagePanel" class="form-dialog" aria-label="页面设置">
|
|
<form id="pageForm">
|
|
<div id="pageRangeRow" class="form-row" hidden><span>范围</span><output id="pageRange"></output></div>
|
|
<div class="form-row">
|
|
<span id="pageDirectionLabel">方向</span>
|
|
<div class="form-options" role="radiogroup" aria-labelledby="pageDirectionLabel">
|
|
<label><input id="pagePortrait" type="radio" name="direction" value="portrait" autofocus><span>竖向</span></label>
|
|
<label><input id="pageLandscape" type="radio" name="direction" value="landscape"><span>横向</span></label>
|
|
</div>
|
|
</div>
|
|
<div class="form-pair">
|
|
<div class="form-row">
|
|
<label for="pageWidth">宽度</label>
|
|
<div class="form-unit"><input id="pageWidth" type="number" min="1" step="any" required><span>mm</span></div>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="pageHeight">高度</label>
|
|
<div class="form-unit"><input id="pageHeight" type="number" min="1" step="any" required><span>mm</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-actions">
|
|
<div id="pageStatus" class="form-status" role="status"></div>
|
|
<button id="pageCancel" class="button" type="button">取消</button>
|
|
<button class="button" type="submit">确定</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
<dialog id="insertPanel" class="form-dialog" aria-label="添加图片">
|
|
<form id="insertForm">
|
|
<div class="form-row">
|
|
<label for="insertImage">图片</label>
|
|
<input id="insertImage" type="file" accept=".png,.jpg,.jpeg,image/png,image/jpeg" required autofocus>
|
|
</div>
|
|
<div id="insertFitRow" class="form-row" hidden>
|
|
<label for="insertFit">缩放</label>
|
|
<select id="insertFit"><option value="contain">适应</option><option value="cover">填充</option></select>
|
|
</div>
|
|
<div class="form-actions">
|
|
<div id="insertStatus" class="form-status" role="status"></div>
|
|
<button id="insertCancel" class="button" type="button">取消</button>
|
|
<button id="insertSubmit" class="button" type="submit">添加</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
<dialog id="exportPanel" class="form-dialog" aria-label="导出文档">
|
|
<form id="exportForm">
|
|
<div class="form-row">
|
|
<span id="exportScopeLabel">范围</span>
|
|
<div class="form-options" role="radiogroup" aria-labelledby="exportScopeLabel">
|
|
<label><input id="exportAll" type="radio" name="scope" value="all" checked autofocus><span>全部</span></label>
|
|
<label><input id="exportSpecified" type="radio" name="scope" value="specified"><span>指定</span></label>
|
|
</div>
|
|
</div>
|
|
<div id="exportRangeRow" class="form-row" hidden>
|
|
<label for="exportRange">页码</label>
|
|
<input id="exportRange" type="text" aria-describedby="exportRangeStatus" autocomplete="off" spellcheck="false">
|
|
</div>
|
|
<div class="form-actions">
|
|
<div id="exportRangeStatus" class="form-status" role="status" aria-live="polite"></div>
|
|
<button id="exportCancel" class="button" type="button">取消</button>
|
|
<button id="exportSubmit" class="button" type="submit">导出</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<main class="workspace">
|
|
<aside class="page-list-panel">
|
|
<div id="pageListTitle" class="panel-title">页面</div>
|
|
<div id="navigationTabs" class="navigation-tabs" role="tablist" aria-label="文档导航" hidden>
|
|
<button id="pagesTab" type="button" role="tab" aria-selected="true" aria-controls="pageList">页面</button>
|
|
<button id="outlinesTab" type="button" role="tab" aria-selected="false" aria-controls="outlineList" tabindex="-1">目录</button>
|
|
<button id="searchTab" type="button" role="tab" aria-keyshortcuts="Control+F Meta+F" aria-selected="false" aria-controls="searchPanel" tabindex="-1">搜索</button>
|
|
</div>
|
|
<div id="pageSelectionTools" class="page-selection-tools" hidden>
|
|
<span id="pageSelectionCount" role="status"></span>
|
|
<button id="selectAllPages" class="small-button" type="button">全选</button>
|
|
<button id="finishPageSelection" class="small-button" type="button">完成</button>
|
|
</div>
|
|
<div id="navigationContent" class="navigation-content">
|
|
<div id="pageList" class="page-list" role="tabpanel" aria-label="页面"></div>
|
|
<div id="outlineList" role="tabpanel" aria-label="目录" hidden></div>
|
|
<div id="searchPanel" role="tabpanel" aria-label="搜索" hidden>
|
|
<form id="searchForm" class="search-form" role="search">
|
|
<input id="searchInput" type="search" aria-label="搜索文字" placeholder="搜索文字" autocomplete="off">
|
|
<button type="submit" class="button">搜索</button>
|
|
</form>
|
|
<div class="search-tools">
|
|
<span id="searchStatus" role="status" aria-live="polite"></span>
|
|
<span id="searchCount">0 / 0</span>
|
|
<button id="searchPrev" type="button" class="icon-button arrow-prev" title="上一处" aria-label="上一处" aria-keyshortcuts="Shift+F3" disabled></button>
|
|
<button id="searchNext" type="button" class="icon-button arrow-next" title="下一处" aria-label="下一处" aria-keyshortcuts="F3" disabled></button>
|
|
</div>
|
|
<div id="searchResults" class="search-results"></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<section class="viewer-panel" tabindex="0" aria-label="阅读区">
|
|
<div id="emptyState" class="empty-state">选择 OFD 文件</div>
|
|
<div id="progressPanel" class="progress-panel" role="status" aria-live="polite" hidden>
|
|
<div class="progress-spinner"></div>
|
|
<div id="progressLabel" class="progress-label">加载中</div>
|
|
<button id="cancelExportButton" class="small-button" type="button" title="取消导出" aria-label="取消导出" hidden>取消</button>
|
|
<div class="progress-track">
|
|
<div id="progressBar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
|
|
</div>
|
|
</div>
|
|
<div id="pageFrame" class="page-frame" hidden>
|
|
<div id="svgHost" class="svg-host"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="meta-panel">
|
|
<section id="appPanel" class="app-panel" aria-labelledby="appPanelTitle" hidden>
|
|
<div class="panel-row">
|
|
<div id="appPanelTitle" class="panel-title compact">应用</div>
|
|
<div class="panel-actions">
|
|
<span id="offlineStatus" class="app-status" role="status">准备中</span>
|
|
<button id="refreshAppButton" class="small-button app-refresh" type="button" title="刷新应用" aria-label="刷新应用" disabled>↻</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="panel-row">
|
|
<div class="panel-title compact">文档</div>
|
|
<button id="infoButton" class="small-button" type="button" aria-label="编辑文档信息" aria-haspopup="dialog" aria-controls="infoPanel" hidden>修改</button>
|
|
</div>
|
|
<div id="editNotice" class="font-permission-hint" role="status" hidden></div>
|
|
<dl class="meta-list">
|
|
<div>
|
|
<dt>文件</dt>
|
|
<dd id="metaFile">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>标题</dt>
|
|
<dd id="metaTitle">-</dd>
|
|
</div>
|
|
<div hidden>
|
|
<dt>主题</dt>
|
|
<dd id="metaSubject"></dd>
|
|
</div>
|
|
<div>
|
|
<dt>作者</dt>
|
|
<dd id="metaAuthor">-</dd>
|
|
</div>
|
|
<div hidden>
|
|
<dt>创建</dt>
|
|
<dd id="metaCreationDate"></dd>
|
|
</div>
|
|
<div hidden>
|
|
<dt>修改</dt>
|
|
<dd id="metaModDate"></dd>
|
|
</div>
|
|
<div>
|
|
<dt>类型</dt>
|
|
<dd id="metaType">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>版本</dt>
|
|
<dd id="metaVersion">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>签名</dt>
|
|
<dd id="metaSignatures">0</dd>
|
|
</div>
|
|
<div>
|
|
<dt>字体</dt>
|
|
<dd id="metaFonts">0</dd>
|
|
</div>
|
|
</dl>
|
|
<section id="attachmentPanel" class="attachment-panel" aria-labelledby="attachmentPanelTitle" hidden>
|
|
<div id="attachmentPanelTitle" class="panel-title">附件</div>
|
|
<div id="attachmentList" class="attachment-list"></div>
|
|
</section>
|
|
<section id="signaturePanel" class="signature-panel" aria-labelledby="signaturePanelTitle" hidden>
|
|
<div class="panel-row">
|
|
<div id="signaturePanelTitle" class="panel-title compact">签名</div>
|
|
<span id="signatureSummary" class="count-pill">0</span>
|
|
</div>
|
|
<div id="signatureList" class="signature-list"></div>
|
|
</section>
|
|
<section id="annotationPanel" class="annotation-panel" aria-labelledby="annotationPanelTitle" hidden>
|
|
<div id="annotationPanelTitle" class="panel-title">注解</div>
|
|
<div id="annotationList" class="annotation-list"></div>
|
|
</section>
|
|
<section class="doc-font-panel" aria-labelledby="docFontPanelTitle">
|
|
<div class="panel-row">
|
|
<div id="docFontPanelTitle" class="panel-title compact">OFD 字体</div>
|
|
<span id="docFontSummary" class="count-pill">0</span>
|
|
</div>
|
|
<div id="docFontList" class="doc-font-list"></div>
|
|
</section>
|
|
<section class="font-panel" aria-labelledby="fontPanelTitle">
|
|
<div class="panel-row">
|
|
<div id="fontPanelTitle" class="panel-title compact">可用字体</div>
|
|
<div class="panel-actions">
|
|
<span id="availableFontSummary" class="count-pill">0</span>
|
|
<button id="localFontButton" class="small-button" type="button" aria-label="系统字体">系统</button>
|
|
<button id="fontAddButton" class="small-button" type="button">添加</button>
|
|
<button id="fontDirectoryButton" class="small-button" type="button" title="添加字体目录" aria-label="添加字体目录">目录</button>
|
|
</div>
|
|
</div>
|
|
<div id="fontPermissionHint" class="font-permission-hint" hidden>字体尚未授权</div>
|
|
<div id="fontList" class="font-list"></div>
|
|
</section>
|
|
</aside>
|
|
</main>
|
|
|
|
<footer class="app-footer app-bar">
|
|
<a class="footer-brand" href="https://github.com/xiaoqidun/ofdgo" target="_blank" rel="noreferrer">OFDGo</a>
|
|
<div id="statusText" class="status-text">正在准备引擎</div>
|
|
<nav class="footer-links" aria-label="相关链接">
|
|
<a href="https://aite.me/" target="_blank" rel="noreferrer">官方网站</a>
|
|
</nav>
|
|
</footer>
|
|
</div>
|
|
|
|
<script type="module" src="./ofdgo.js"></script>
|
|
</body>
|
|
</html>
|