├── .gitignore ├── README.md ├── css ├── bootstrap-pdf-form-builder.css ├── bootstrap-pdf-form-viewer.css └── bootstrap-pdf-viewer.css ├── data ├── form.json └── submission.json ├── form-builder.html ├── form-viewer.html ├── form.pdf ├── js ├── bootstrap-pdf-form-builder.js ├── bootstrap-pdf-form-common.js ├── bootstrap-pdf-form-viewer.js └── bootstrap-pdf-viewer.js ├── lib ├── font-awesome │ ├── css │ │ ├── font-awesome-ie7.css │ │ ├── font-awesome-ie7.min.css │ │ ├── font-awesome.css │ │ └── font-awesome.min.css │ ├── font │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ └── fontawesome-webfont.woff │ └── less │ │ ├── bootstrap.less │ │ ├── core.less │ │ ├── extras.less │ │ ├── font-awesome-ie7.less │ │ ├── font-awesome.less │ │ ├── icons.less │ │ ├── mixins.less │ │ ├── path.less │ │ └── variables.less ├── jquery-1.9.1.js ├── pdf.js └── twitter-bootstrap │ ├── css │ ├── bootstrap.css │ └── bootstrap.min.css │ └── js │ ├── bootstrap.js │ └── bootstrap.min.js ├── sample.pdf └── viewer.html /.gitignore: -------------------------------------------------------------------------------- 1 | lib-cov 2 | *.seed 3 | *.log 4 | *.csv 5 | *.dat 6 | *.out 7 | *.pid 8 | *.gz 9 | 10 | pids 11 | logs 12 | results 13 | 14 | npm-debug.log 15 | 16 | .DS_Store 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | bootstrap-pdf-viewer 2 | ==================== 3 | 4 | Alternative, lightweight user interface for PDF.js using Twitter Bootstrap -------------------------------------------------------------------------------- /css/bootstrap-pdf-form-builder.css: -------------------------------------------------------------------------------- 1 | .pdf-form-builder-panel { 2 | background: #e0e0e0; 3 | position: absolute; 4 | top: 0; 5 | left: -202px; 6 | bottom: 0; 7 | width: 200px; 8 | height: auto; 9 | z-index: 2; 10 | overflow: hidden; 11 | overflow-y: auto; 12 | -webkit-overflow-scrolling: touch; 13 | -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.6); 14 | -moz-box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.6); 15 | box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.6); 16 | -webkit-transition: left 0.3s ease; 17 | -moz-transition: left 0.3s ease; 18 | -ms-transition: left 0.3s ease; 19 | -o-transition: left 0.3s ease; 20 | transition: left 0.3s ease; 21 | } 22 | 23 | .pdf-form-builder-panel.pdf-form-builder-panel-open { 24 | left: 0; 25 | } 26 | 27 | .pdf-form-builder-panel.pdf-form-builder-panel-open + .pdf-viewer-page-view-container { 28 | left: 200px; 29 | } 30 | 31 | .pdf-form-builder-panel h4 { 32 | border-top: 1px solid rgba(255, 255, 255, 0.1); 33 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 34 | color: #777; 35 | font-weight: 400; 36 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); 37 | margin: 0; 38 | padding: 14px 14px 13px; 39 | } 40 | 41 | .pdf-form-builder-panel ul { 42 | border-top: 1px solid rgba(255, 255, 255, 0.1); 43 | margin: 0; 44 | padding: 0; 45 | list-style: none; 46 | } 47 | 48 | .pdf-form-builder-panel ul > li { 49 | color: #777; 50 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); 51 | display: block; 52 | font-weight: 400; 53 | line-height: 20px; 54 | margin: 0; 55 | padding: 8px 14px 2px; 56 | } 57 | 58 | .pdf-form-builder-panel ul > li > h5 { 59 | font-size: 12px; 60 | margin: 0; 61 | } 62 | 63 | .pdf-form-builder-panel ul > li > label { 64 | font-size: 12px; 65 | margin: 0; 66 | } 67 | 68 | .pdf-form-builder-panel ul > li > input { 69 | width: 100%; 70 | margin: 0; 71 | } 72 | 73 | .pdf-form-builder-panel ul > li > select { 74 | width: 100%; 75 | margin: 0; 76 | } 77 | 78 | .pdf-form-builder-panel ul > li > .btn { 79 | text-shadow: none; 80 | width: 100% 81 | } 82 | 83 | .pdf-form-builder .pdf-viewer-page-view-container { 84 | -webkit-transition: left 0.3s ease; 85 | -moz-transition: left 0.3s ease; 86 | -ms-transition: left 0.3s ease; 87 | -o-transition: left 0.3s ease; 88 | transition: left 0.3s ease; 89 | } 90 | 91 | .pdf-form-builder .pdf-form-field { 92 | background: rgba(250, 251, 252, 0.85); 93 | border: 1px dashed #c6c6c6; 94 | pointer-events: auto; 95 | position: absolute; 96 | top: 0; 97 | left: 0; 98 | width: auto; 99 | height: auto; 100 | z-index: 2; 101 | -webkit-user-select: none; 102 | -moz-user-select: none; 103 | -ms-user-select: none; 104 | -o-user-select: none; 105 | user-select: none; 106 | -webkit-transition: background 0.3s ease, border 0.3s ease; 107 | -moz-transition: background 0.3s ease, border 0.3s ease; 108 | -ms-transition: background 0.3s ease, border 0.3s ease; 109 | -o-transition: background 0.3s ease, border 0.3s ease; 110 | transition: background 0.3s ease, border 0.3s ease; 111 | } 112 | 113 | .pdf-form-builder .pdf-form-field.pdf-form-field-focus { 114 | background: rgba(252, 253, 254, 0.95); 115 | border: 1px dashed #6486a8; 116 | cursor: move; 117 | z-index: 22; 118 | } 119 | 120 | .pdf-form-builder .pdf-form-field > * { 121 | pointer-events: none; 122 | } 123 | 124 | .pdf-form-builder .pdf-form-field-handle { 125 | background: #eef9fe; 126 | border: 1px solid #a8c8df; 127 | pointer-events: auto; 128 | position: absolute; 129 | width: 8px; 130 | height: 8px; 131 | z-index: 2; 132 | overflow: visible; 133 | opacity: 0; 134 | visibility: hidden; 135 | -webkit-box-shadow: 0 0 3px 1px rgba(0, 128, 224, 0.3); 136 | -moz-box-shadow: 0 0 3px 1px rgba(0, 128, 224, 0.3); 137 | box-shadow: 0 0 3px 1px rgba(0, 128, 224, 0.3); 138 | -webkit-transition: opacity 0.3s ease, visibility 0s linear 0.3s; 139 | -moz-transition: opacity 0.3s ease, visibility 0s linear 0.3s; 140 | -ms-transition: opacity 0.3s ease, visibility 0s linear 0.3s; 141 | -o-transition: opacity 0.3s ease, visibility 0s linear 0.3s; 142 | transition: opacity 0.3s ease, visibility 0s linear 0.3s; 143 | } 144 | 145 | /* Increase touch-target area for mobile devices */ 146 | @media (max-device-width: 1024px) { 147 | .pdf-form-builder .pdf-form-field::after { 148 | content: ''; 149 | position: absolute; 150 | top: -10px; 151 | right: -10px; 152 | bottom: -10px; 153 | left: -10px; 154 | width: auto; 155 | height: auto; 156 | z-index: -1; 157 | } 158 | 159 | .pdf-form-builder .pdf-form-field-handle::after { 160 | content: ''; 161 | position: absolute; 162 | top: -12px; 163 | left: -12px; 164 | width: 32px; 165 | height: 32px; 166 | } 167 | } 168 | 169 | .pdf-form-builder .pdf-form-field.pdf-form-field-focus > .pdf-form-field-handle { 170 | opacity: 1; 171 | visibility: visible; 172 | -webkit-transition-delay: 0s; 173 | -moz-transition-delay: 0s; 174 | -ms-transition-delay: 0s; 175 | -o-transition-delay: 0s; 176 | transition-delay: 0s; 177 | } 178 | 179 | .pdf-form-builder .pdf-form-field-handle-n { cursor: n-resize; cursor: ns-resize; margin: 0 0 0 -5px; top: -5px; right: auto; bottom: auto; left: 50%; } 180 | .pdf-form-builder .pdf-form-field-handle-ne { cursor: ne-resize; cursor: nesw-resize; margin: 0; top: -5px; right: -5px; bottom: auto; left: auto; } 181 | .pdf-form-builder .pdf-form-field-handle-e { cursor: e-resize; cursor: ew-resize; margin: -5px 0 0; top: 50%; right: -5px; bottom: auto; left: auto; } 182 | .pdf-form-builder .pdf-form-field-handle-se { cursor: se-resize; cursor: nwse-resize; margin: 0; top: auto; right: -5px; bottom: -5px; left: auto; } 183 | .pdf-form-builder .pdf-form-field-handle-s { cursor: s-resize; cursor: ns-resize; margin: 0 0 0 -5px; top: auto; right: auto; bottom: -5px; left: 50%; } 184 | .pdf-form-builder .pdf-form-field-handle-sw { cursor: sw-resize; cursor: nesw-resize; margin: 0; top: auto; right: auto; bottom: -5px; left: -5px; } 185 | .pdf-form-builder .pdf-form-field-handle-w { cursor: w-resize; cursor: ew-resize; margin: -5px 0 0; top: 50%; right: auto; bottom: auto; left: -5px; } 186 | .pdf-form-builder .pdf-form-field-handle-nw { cursor: nw-resize; cursor: nwse-resize; margin: 0; top: -5px; right: auto; bottom: auto; left: -5px; } 187 | 188 | .pdf-form-builder .pdf-form-field > input, 189 | .pdf-form-builder .pdf-form-field > label, 190 | .pdf-form-builder .pdf-form-field > textarea { 191 | pointer-events: none; 192 | position: absolute; 193 | line-height: 1em; 194 | margin: 0; 195 | top: 0; 196 | left: 0; 197 | width: 100%; 198 | height: 100%; 199 | z-index: 1; 200 | opacity: 0.9; 201 | -webkit-box-sizing: border-box; 202 | -moz-box-sizing: border-box; 203 | box-sizing: border-box; 204 | } 205 | 206 | .pdf-form-builder .pdf-form-field > label { 207 | white-space: nowrap; 208 | } 209 | 210 | .pdf-form-builder .pdf-form-field > textarea { 211 | resize: none; 212 | } 213 | 214 | .pdf-form-builder .pdf-form-field-check-box { 215 | zoom: 1 !important; 216 | } 217 | 218 | .pdf-form-builder .pdf-form-field-check-box > input { 219 | display: block; 220 | position: absolute; 221 | top: -100%; 222 | left: -100%; 223 | opacity: 0; 224 | min-width: 0; 225 | min-height: 0; 226 | width: 0; 227 | height: 0; 228 | } 229 | 230 | .pdf-form-builder .pdf-form-field-check-box > i { 231 | font-family: 'FontAwesome'; 232 | position: absolute; 233 | margin: -0.475em 0 0 -0.4125em; 234 | top: 50%; 235 | left: 50%; 236 | width: 1em; 237 | height: 1em; 238 | } 239 | 240 | .pdf-form-builder .pdf-form-field-check-box > i:before { 241 | content: '\f096'; 242 | } 243 | 244 | .pdf-form-builder .pdf-form-field-check-box > input:checked + i:before, 245 | .pdf-form-builder .pdf-form-field-check-box > input[checked] + i:before { 246 | content: '\f046'; 247 | } 248 | -------------------------------------------------------------------------------- /css/bootstrap-pdf-form-viewer.css: -------------------------------------------------------------------------------- 1 | .pdf-form-viewer .pdf-form-field { 2 | background: none; 3 | border: 1px solid transparent; 4 | pointer-events: auto; 5 | position: absolute; 6 | top: 0; 7 | left: 0; 8 | width: auto; 9 | height: auto; 10 | z-index: 2; 11 | -webkit-user-select: none; 12 | -moz-user-select: none; 13 | -ms-user-select: none; 14 | -o-user-select: none; 15 | user-select: none; 16 | -webkit-transition: background 0.3s ease, border 0.3s ease; 17 | -moz-transition: background 0.3s ease, border 0.3s ease; 18 | -ms-transition: background 0.3s ease, border 0.3s ease; 19 | -o-transition: background 0.3s ease, border 0.3s ease; 20 | transition: background 0.3s ease, border 0.3s ease; 21 | } 22 | 23 | .pdf-form-viewer .pdf-form-field-handle { 24 | display: none; 25 | } 26 | 27 | .pdf-form-viewer .pdf-form-field > input, 28 | .pdf-form-viewer .pdf-form-field > label, 29 | .pdf-form-viewer .pdf-form-field > textarea { 30 | pointer-events: auto; 31 | position: absolute; 32 | line-height: 1em; 33 | margin: 0; 34 | top: 0; 35 | left: 0; 36 | width: 100%; 37 | height: 100%; 38 | z-index: 1; 39 | opacity: 0.9; 40 | -webkit-box-sizing: border-box; 41 | -moz-box-sizing: border-box; 42 | box-sizing: border-box; 43 | } 44 | 45 | .pdf-form-viewer .pdf-form-field > label { 46 | white-space: nowrap; 47 | } 48 | 49 | .pdf-form-viewer .pdf-form-field > textarea { 50 | resize: none; 51 | } 52 | 53 | .pdf-form-viewer .pdf-form-field-check-box { 54 | zoom: 1 !important; 55 | } 56 | 57 | .pdf-form-viewer .pdf-form-field-check-box > input { 58 | display: block; 59 | position: absolute; 60 | top: -100%; 61 | left: -100%; 62 | opacity: 0; 63 | min-width: 0; 64 | min-height: 0; 65 | width: 0; 66 | height: 0; 67 | } 68 | 69 | .pdf-form-viewer .pdf-form-field-check-box > i { 70 | font-family: 'FontAwesome'; 71 | position: absolute; 72 | margin: -0.475em 0 0 -0.4125em; 73 | top: 50%; 74 | left: 50%; 75 | width: 1em; 76 | height: 1em; 77 | } 78 | 79 | .pdf-form-viewer .pdf-form-field-check-box > i:before { 80 | content: '\f096'; 81 | } 82 | 83 | .pdf-form-viewer .pdf-form-field-check-box > input:checked + i:before, 84 | .pdf-form-viewer .pdf-form-field-check-box > input[checked] + i:before { 85 | content: '\f046'; 86 | } 87 | -------------------------------------------------------------------------------- /css/bootstrap-pdf-viewer.css: -------------------------------------------------------------------------------- 1 | * { 2 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 3 | -webkit-text-size-adjust: none; 4 | -webkit-touch-callout: none; 5 | -webkit-user-drag: none; 6 | } 7 | 8 | .navbar-nav { 9 | float: left; 10 | margin-top: 0; 11 | margin-bottom: 0; 12 | } 13 | 14 | .navbar-nav > li { 15 | float: left; 16 | } 17 | 18 | .navbar-nav > li > a { 19 | border-radius: 0; 20 | } 21 | 22 | .navbar-nav.pull-right { 23 | width: auto; 24 | } 25 | 26 | .navbar-toggle { 27 | position: relative; 28 | top: auto; 29 | left: auto; 30 | display: none; 31 | } 32 | 33 | .nav-collapse.collapse { 34 | display: block !important; 35 | height: auto !important; 36 | overflow: visible !important; 37 | } 38 | 39 | html.pdf-viewer-full-screen, 40 | html.pdf-viewer-full-screen > body { 41 | height: 100%; 42 | } 43 | 44 | .pdf-viewer:-webkit-full-screen { 45 | position: absolute; top: 0; left: 0; width: 100%; height: 100% !important; min-height: 100% !important; overflow: hidden; 46 | } 47 | .pdf-viewer:-moz-full-screen { 48 | position: absolute; top: 0; left: 0; width: 100%; height: 100% !important; min-height: 100% !important; overflow: hidden; 49 | } 50 | .pdf-viewer:full-screen { 51 | position: absolute; top: 0; left: 0; width: 100%; height: 100% !important; min-height: 100% !important; overflow: hidden; 52 | } 53 | 54 | .pdf-viewer { 55 | background: #909090; 56 | border: 1px solid #ddd; 57 | margin: 10px; 58 | height: 400px; 59 | position: relative; 60 | overflow: hidden; 61 | -webkit-border-radius: 4px; 62 | -moz-border-radius: 4px; 63 | border-radius: 4px; 64 | -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2); 65 | -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2); 66 | box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2); 67 | } 68 | 69 | .pdf-viewer > .navbar { 70 | position: relative; 71 | z-index: 2; 72 | -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 73 | -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 74 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); 75 | } 76 | 77 | .pdf-viewer .nav > .divider { 78 | border-left: 1px solid #ccc; 79 | margin: 10px 0 0; 80 | width: 0; 81 | height: 30px; 82 | } 83 | 84 | .pdf-viewer .dropdown > a { 85 | outline: none; 86 | } 87 | 88 | .pdf-viewer .dropdown-menu i { 89 | display: inline-block; 90 | width: 1.5em !important; 91 | text-align: left; 92 | } 93 | 94 | .pdf-viewer .tooltip { 95 | white-space: nowrap; 96 | } 97 | 98 | .pdf-viewer-container { 99 | position: absolute; 100 | top: 50px; 101 | right: 0; 102 | bottom: 0; 103 | left: 0; 104 | width: auto; 105 | height: auto; 106 | z-index: 1; 107 | overflow: hidden; 108 | } 109 | 110 | .pdf-viewer-page-view-container { 111 | position: absolute; 112 | top: 0; 113 | right: 0; 114 | bottom: 0; 115 | left: 0; 116 | width: auto; 117 | height: auto; 118 | z-index: 1; 119 | overflow: hidden; 120 | } 121 | 122 | .pdf-viewer-page-view-container > .pdf-scroll-view-content { 123 | background: none; 124 | } 125 | 126 | .pdf-viewer-page-view { 127 | background: #fff; 128 | position: relative; 129 | margin: 10px auto; 130 | } 131 | 132 | .pdf-viewer-page-view.pdf-viewer-page-view-visible, 133 | .pdf-viewer-page-view.pdf-viewer-page-view-visible + .pdf-viewer-page-view { 134 | -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); 135 | -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); 136 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); 137 | } 138 | 139 | .pdf-viewer-page-view::after { 140 | content: ''; 141 | display: block; 142 | position: relative; 143 | width: 100%; 144 | height: 10px; 145 | } 146 | 147 | .pdf-viewer-page-view > canvas { 148 | -webkit-transform-origin: 0% 0%; 149 | -moz-transform-origin: 0% 0%; 150 | -ms-transform-origin: 0% 0%; 151 | -o-transform-origin: 0% 0%; 152 | transform-origin: 0% 0%; 153 | } 154 | 155 | .pdf-viewer-page-view > .icon-spinner { 156 | color: #888; 157 | font-size: 36px; 158 | line-height: 2em; 159 | position: absolute; 160 | margin: -1em 0 0 -1em; 161 | top: 50%; 162 | left: 50%; 163 | width: 2em; 164 | height: 2em; 165 | text-align: center; 166 | } 167 | 168 | .pdf-viewer-text-layer { 169 | color: #000; 170 | font-family: sans-serif; 171 | position: absolute; 172 | top: 0; 173 | right: 0; 174 | bottom: 0; 175 | left: 0; 176 | overflow: hidden; 177 | } 178 | 179 | .pdf-viewer-text-layer > div { 180 | color: transparent; 181 | cursor: text; 182 | line-height: 1; 183 | white-space: pre; 184 | position: absolute; 185 | margin: -0.5em 0 0 -0.5em; 186 | padding: 0.5em; 187 | -webkit-transform-origin: 0% 0%; 188 | -moz-transform-origin: 0% 0%; 189 | -ms-transform-origin: 0% 0%; 190 | -o-transform-origin: 0% 0%; 191 | transform-origin: 0% 0%; 192 | } 193 | 194 | .pdf-scroll-view-no-touch { 195 | overflow: auto; 196 | -webkit-transform: none; 197 | -moz-transform: none; 198 | -ms-transform: none; 199 | -o-transform: none; 200 | transform: none; 201 | } 202 | 203 | .pdf-scroll-view-no-touch > .pdf-scroll-view-content { 204 | -webkit-transform: none; 205 | -moz-transform: none; 206 | -ms-transform: none; 207 | -o-transform: none; 208 | transform: none; 209 | -webkit-transition: none; 210 | -moz-transition: none; 211 | -ms-transition: none; 212 | -o-transition: none; 213 | transition: none; 214 | } 215 | 216 | .pdf-scroll-view-content { 217 | position: absolute; 218 | min-width: 100%; 219 | width: auto; 220 | min-height: 100%; 221 | height: auto; 222 | top: 0; 223 | left: 0; 224 | margin: 0; 225 | padding: 0; 226 | overflow: visible; 227 | -webkit-transform: translate(0, 0); 228 | -moz-transform: translate(0, 0); 229 | -ms-transform: translate(0, 0); 230 | -o-transform: translate(0, 0); 231 | transform: translate(0, 0); 232 | -webkit-transition: -webkit-transform 0s ease; 233 | -moz-transition: -moz-transform 0s ease; 234 | -ms-transition: -ms-transform 0s ease; 235 | -o-transition: -o-transform 0s ease; 236 | transition: transform 0s ease; 237 | } 238 | 239 | .pdf-scroll-indicator { 240 | background: rgba(0, 0, 0, 1); 241 | border: 1px solid rgba(255, 255, 255, 0.8); 242 | position: absolute; 243 | width: 5px; 244 | height: 5px; 245 | margin: 2px; 246 | opacity: 0.5; 247 | -webkit-border-radius: 5px; 248 | -moz-border-radius: 5px; 249 | border-radius: 5px; 250 | -webkit-backface-visibility: hidden; 251 | -moz-backface-visibility: hidden; 252 | -ms-backface-visibility: hidden; 253 | -o-backface-visibility: hidden; 254 | backface-visibility: hidden; 255 | -webkit-transform: translate(0, 0); 256 | -moz-transform: translate(0, 0); 257 | -ms-transform: translate(0, 0); 258 | -o-transform: translate(0, 0); 259 | transform: translate(0, 0); 260 | -webkit-transition: opacity 0.1s ease 0s, -webkit-transform 0s ease; 261 | -moz-transition: opacity 0.1s ease 0s, -moz-transform 0s ease; 262 | -ms-transition: opacity 0.1s ease 0s, -ms-transform 0s ease; 263 | -o-transition: opacity 0.1s ease 0s, -o-transform 0s ease; 264 | transition: opacity 0.1s ease 0s, transform 0s ease; 265 | } 266 | 267 | .pdf-scroll-indicator.pdf-scroll-indicator-hidden { 268 | opacity: 0; 269 | -webkit-transition: opacity 0.3s ease 0.3s, -webkit-transform 0s ease; 270 | -moz-transition: opacity 0.3s ease 0.3s, -moz-transform 0s ease; 271 | -ms-transition: opacity 0.3s ease 0.3s, -ms-transform 0s ease; 272 | -o-transition: opacity 0.3s ease 0.3s, -o-transform 0s ease; 273 | transition: opacity 0.3s ease 0.3s, transform 0s ease; 274 | } 275 | 276 | .pdf-form-layer { 277 | position: absolute; 278 | top: 0; 279 | left: 0; 280 | width: 100%; 281 | height: 100%; 282 | overflow: hidden; 283 | } 284 | -------------------------------------------------------------------------------- /data/form.json: -------------------------------------------------------------------------------- 1 | { 2 | "0": { 3 | "1375896438602": { 4 | "type": "PDFFormFieldTextBox", 5 | "position": { 6 | "x": 12, 7 | "y": 19 8 | }, 9 | "size": { 10 | "w": 69, 11 | "h": 3 12 | }, 13 | "properties": { 14 | "attributes": { 15 | "name": "First Name", 16 | "placeholder": "e.g.: Johnny", 17 | "tabindex": "0" 18 | }, 19 | "styles": { 20 | "element": { 21 | "font-size": "12px" 22 | }, 23 | "input": {} 24 | } 25 | } 26 | }, 27 | "1375896491941": { 28 | "type": "PDFFormFieldTextBox", 29 | "position": { 30 | "x": 12, 31 | "y": 26 32 | }, 33 | "size": { 34 | "w": 69, 35 | "h": 3 36 | }, 37 | "properties": { 38 | "attributes": { 39 | "name": "Last Name", 40 | "placeholder": "e.g.: Appleseed", 41 | "tabindex": "0" 42 | }, 43 | "styles": { 44 | "element": { 45 | "font-size": "12px" 46 | }, 47 | "input": {} 48 | } 49 | } 50 | }, 51 | "1375896502391": { 52 | "type": "PDFFormFieldTextBox", 53 | "position": { 54 | "x": 12, 55 | "y": 33 56 | }, 57 | "size": { 58 | "w": 69, 59 | "h": 3 60 | }, 61 | "properties": { 62 | "attributes": { 63 | "name": "Phone Number", 64 | "placeholder": "e.g.: (123) 456-7890", 65 | "tabindex": "0" 66 | }, 67 | "styles": { 68 | "element": { 69 | "font-size": "12px" 70 | }, 71 | "input": {} 72 | } 73 | } 74 | }, 75 | "1375896525170": { 76 | "type": "PDFFormFieldTextBox", 77 | "position": { 78 | "x": 12, 79 | "y": 40 80 | }, 81 | "size": { 82 | "w": 69, 83 | "h": 3 84 | }, 85 | "properties": { 86 | "attributes": { 87 | "name": "Email Address", 88 | "placeholder": "e.g.: johnny@example.com", 89 | "tabindex": "0" 90 | }, 91 | "styles": { 92 | "element": { 93 | "font-size": "12px" 94 | }, 95 | "input": {} 96 | } 97 | } 98 | }, 99 | "1375896545442": { 100 | "type": "PDFFormFieldCheckBox", 101 | "position": { 102 | "x": 24, 103 | "y": 48 104 | }, 105 | "size": { 106 | "w": 4, 107 | "h": 2 108 | }, 109 | "properties": { 110 | "attributes": { 111 | "name": "Contact Phone", 112 | "checked": false, 113 | "tabindex": "0" 114 | }, 115 | "styles": { 116 | "element": {}, 117 | "input": {} 118 | } 119 | } 120 | }, 121 | "1375896568836": { 122 | "type": "PDFFormFieldCheckBox", 123 | "position": { 124 | "x": 24, 125 | "y": 52 126 | }, 127 | "size": { 128 | "w": 4, 129 | "h": 2 130 | }, 131 | "properties": { 132 | "attributes": { 133 | "name": "Contact Email", 134 | "checked": false, 135 | "tabindex": "0" 136 | }, 137 | "styles": { 138 | "element": {}, 139 | "input": {} 140 | } 141 | } 142 | } 143 | } 144 | } 145 | -------------------------------------------------------------------------------- /data/submission.json: -------------------------------------------------------------------------------- 1 | { 2 | "1375896438602": { 3 | "value": "Jane" 4 | }, 5 | "1375896491941": { 6 | "value": "Doe" 7 | }, 8 | "1375896502391": { 9 | "value": "(888) 555-1234" 10 | }, 11 | "1375896525170": { 12 | "value": "jane.doe@foo.com" 13 | }, 14 | "1375896545442": { 15 | "value": false 16 | }, 17 | "1375896568836": { 18 | "value": true 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /form-builder.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap PDF Form Builder 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /form-viewer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap PDF Form Viewer 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /form.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/justindarc/bootstrap-pdf-viewer/cc48f0bda954cb1dd57bc1a8033360e83187da72/form.pdf -------------------------------------------------------------------------------- /js/bootstrap-pdf-form-builder.js: -------------------------------------------------------------------------------- 1 | ;'use strict'; 2 | 3 | var PDFFormBuilder = function PDFFormBuilder(viewer, options) { 4 | if (!(viewer instanceof PDFViewer)) return console.error('Invalid instance of PDFViewer', viewer); 5 | 6 | options = options || {}; 7 | 8 | this._viewer = viewer; 9 | 10 | var self = viewer._formBuilder = this; 11 | 12 | viewer.getFormBuilder = function() { return this._formBuilder; }; 13 | 14 | var $element = viewer.$element; 15 | $element.addClass('pdf-form-builder'); 16 | 17 | var $style = this.$style = $('