web-document-viewer 11.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,3 @@
1
+ (c) Copyright 2003-2021 Atalasoft Inc. All Rights Reserved.
2
+
3
+ For additional details about licensing see: http://www.atalasoft.com/Pricing/Licensing-Overview
package/README.md ADDED
@@ -0,0 +1,79 @@
1
+ # Atalasoft Web Document Viewer control
2
+ [![npm version](https://badge.fury.io/js/web-document-viewer.svg)](https://badge.fury.io/js/web-document-viewer)
3
+ [![NuGet version](https://badge.fury.io/nu/Atalasoft.Web.Document.Viewer.svg)](https://badge.fury.io/nu/Atalasoft.Web.Document.Viewer)
4
+ [![Bower version](https://badge.fury.io/bo/web-document-viewer.svg)](https://badge.fury.io/bo/web-document-viewer)
5
+
6
+ The WebDocumentViewer(aka WDV) and WebDocumentThumbnailer(aka WDT) are JavaScript based image viewing controls that could be easily created by adding fex snippets of HTML and JavaScript on your web page and a separate bare-bones requests handler on the server side.
7
+
8
+ ### Introduction
9
+
10
+ There currently is a gap of functionality on the internet in that browsers currently only display "web native" image formats (PNG, JPEG, GIF, and SVG). Popular multipage document formats like PDF, TIFF and Office formats (like Excel and Word), all cannot be displayed natively on a web page. Atalasoft web controls solves this problem and provide JavaScript APIs to build viewer apps that:
11
+
12
+ * Work on every HTML5 browser (including mobile browsers).
13
+ * Display different types of images. PDF, TIFF, PNG, JPEG, BMP, GIF, PCX, PSD, PCD, RAW, WMF/EMF, TGA, JBIG2, Jpeg2000, DICOM, DWG, Xps, etc.
14
+ * Modify document structure and save modified documents.
15
+ * Enable annotations, thumbnails, and mobile support for a document.
16
+ * Display and fill PDF forms.
17
+ * Support text selection basing on PDF text layer or OCR data.
18
+ * Effectively work with big documents - make it possible to stream individual pages on demand without downloading the entire document first.
19
+ * Can be embedded into an existing web page or application.
20
+
21
+ ### Installation
22
+
23
+ #### Bower
24
+ ```bash
25
+ bower install web-document-viewer
26
+ ```
27
+
28
+ #### Nuget
29
+ ```bash
30
+ PM> Install-Package Atalasoft.Web.Document.Viewer
31
+ ```
32
+
33
+ #### NPM
34
+ ```bash
35
+ npm install web-document-viewer
36
+ ```
37
+
38
+ ### Backend Overview
39
+
40
+ Atalasoft HTML5 imaging controls are support following server environments
41
+
42
+ * ASP.NET
43
+
44
+ Server side functionality is exposed using separate HttpHandler.
45
+ See [ASP.NET demo application](https://atalasoft.github.io/web-document-viewer/tutorial-1-1-demo-application.html) tutorial for details.
46
+
47
+ - ASP.NET Core on full .net platform
48
+
49
+ Server side functionality is exposed using WebDocumentViewerMiddleware that is registered to handle WDV requests.
50
+ See [ASP.NET Core demo application](https://atalasoft.github.io/web-document-viewer/tutorial-1-2-demo-application-aspnet-core.html) tutorial for details.
51
+
52
+
53
+ ### Frontend Overview
54
+
55
+ WebDocumentViewer and WebDocumentThumbnailer requires [Jquery](https://github.com/jquery/jquery) and [Jquery UI](https://github.com/jquery/jquery-ui) libraries. If annotations support are enabled, [Raphael.js](https://github.com/DmitryBaranovskiy/raphael) library is also required. If text support is enabled, then [Raphael.js](https://github.com/DmitryBaranovskiy/raphael) and [ClipboardJS](https://github.com/zenorocha/clipboard.js) are both required.
56
+
57
+ [Jquery](https://github.com/jquery/jquery) should be included into web page by the application. If some of the other dependent libraries don't exist in the web page scope, controls are trying to automatically load them(using file names from dotImage web resources bundle shipped by installer).
58
+ When controls are delivered by NuGet or Bower it's required to manually deploy them on the page(since file names could differ for different versions).
59
+
60
+ ### Sample application
61
+ You can find a [demo application](https://github.com/Atalasoft/web-document-viewer-demo) shows basic usage of Web Document Viewer component of DotImage product.
62
+ Live version of the demo is hosted on Azure: http://atalasoft-viewer-demo.azurewebsites.net/
63
+
64
+ ### Licensing
65
+
66
+ To run the projects locally, you need to have a DotImage license. There are various way to acquire the license:
67
+
68
+ - Use [DotImage Activation Wizard Visual Studio extension](https://visualstudiogallery.msdn.microsoft.com/88ff07c9-fe68-48bd-bfdc-3fbc8a0ec1db)
69
+ - Download a complete DotImage installation package from the [Atalasoft web site](https://atalasoft.com). You will be prompted to activate the product during installation
70
+
71
+ This source code is property of Atalasoft, Inc. (http://www.atalasoft.com/)
72
+ Permission for usage and modification of this code is only permitted
73
+ with the purchase of a source code license.
74
+
75
+ ### Related Articles
76
+ - [Web Document Viewer documentation](https://atalasoft.github.io/web-document-viewer/)
77
+ - [Introducing NuGet Packages](http://atalasoft.github.io/2016/05/03/introducing-nuget/)
78
+ - [Introducing Activation Wizard Extension](http://atalasoft.github.io/2016/05/14/introducing-activation-wizard-extension/)
79
+ - [NuGet Tutorial I - Web Document Viewer](http://atalasoft.github.io/2016/06/21/nuget-tutorial-wdv/)
@@ -0,0 +1,274 @@
1
+ .atala-document-container {border: 1px solid rgb(221, 221, 221);
2
+ }
3
+ .atala-document-toolbar { border: 1px solid rgb(221, 221, 221); background-color: rgb(221, 221, 221); }
4
+
5
+ .atala-ui { font-size: 0.8em; }
6
+ .atala-ui-dialog { font-size: 0.8em; margin-left: 0; margin-right: 0; }
7
+ .atala-ui-button { font-size: 0.8em; margin-left:1px; }
8
+
9
+ .atala-ui-icon { width: 16px; height: 16px; background-image: url('images/atala-ui-icons-16.png') !important; }
10
+ .ui-state-default .atala-ui-icon { background-image: url('images/atala-ui-icons-16.png') !important; }
11
+
12
+ .atala-ui-icon-page-prev { background-position: 0 0; }
13
+ .atala-ui-icon-page-next { background-position: -16px 0; }
14
+ .atala-ui-icon-zoom-out { background-position: -32px 0; }
15
+ .atala-ui-icon-zoom-in { background-position: -48px 0; }
16
+ .atala-ui-icon-zoom-full { background-position: -64px 0; }
17
+ .atala-ui-icon-fit-best { background-position: -80px 0; }
18
+ .atala-ui-icon-fit-width { background-position: -96px 0; }
19
+
20
+ .atala-ui-icon-save { background-position: -112px 0; }
21
+
22
+ .atala-ui-icon-ellipse { background-position: -128px 0; }
23
+ .atala-ui-icon-highlight { background-position: -144px 0; }
24
+ .atala-ui-icon-line { background-position: -160px 0; }
25
+ .atala-ui-icon-lines { background-position: -176px 0; }
26
+ .atala-ui-icon-freehand { background-position: -192px 0; }
27
+ .atala-ui-icon-polygon { background-position: -208px 0; }
28
+ .atala-ui-icon-rectangle { background-position: -224px 0; }
29
+ .atala-ui-icon-fillrect { background-position: -240px 0; }
30
+ .atala-ui-icon-stamp { background-position: -256px 0; }
31
+ .atala-ui-icon-image { background-position: -256px 0; }
32
+ .atala-ui-icon-note { background-position: -272px 0; }
33
+ .atala-ui-icon-text { background-position: -288px 0; }
34
+ .atala-ui-icon-comment { background-position: -304px 0; }
35
+ .atala-ui-icon-rotate-left { background-position: -320px 0; }
36
+ .atala-ui-icon-rotate-right { background-position: -336px 0; }
37
+
38
+ .atala-ui-icon-selection { background-position: -352px 0; }
39
+ .atala-ui-icon-zoom-area { background-position: -368px 0; }
40
+ .atala-ui-icon-text-tool { background-position: -384px 0; }
41
+ .atala-ui-icon-pan-tool { background-position: -400px 0; }
42
+
43
+ .atala-ui-icon-search-next { background-position: -416px 0; }
44
+ .atala-ui-icon-search-prev { background-position: -432px 0; }
45
+
46
+ .atala-ui-icon-upload { background-position: -448px 0; }
47
+ .atala-ui-icon-upload-cancel { background-position: -464px 0; }
48
+
49
+ .atala-ui-icon-bookmarks { background-position: -480px 0; }
50
+ .atala-ui-form-highlight { background-color: rgb(204, 215, 255) !important; background-color: rgba(204, 215, 255, .7) !important }
51
+ .atala-ui-form-required { border: 3px solid red !important }
52
+
53
+ /* set box sizing to default for internal divs since changing to 'border-box' could affect internal sizing calculations */
54
+ .atala_main_container div {
55
+ -webkit-box-sizing: content-box;
56
+ -moz-box-sizing: content-box;
57
+ box-sizing: content-box;
58
+ }
59
+
60
+ .atala_page_div, .atala_dom_edge_first, .atala_dom_edge_last {
61
+ vertical-align: top;
62
+ }
63
+
64
+ .atala_page_label{
65
+ vertical-align: middle;
66
+ }
67
+
68
+ .atala_search_container { float: right !important; overflow: hidden; white-space: nowrap; max-width: 200px;min-width: 120px; }
69
+ .atala_search_container > span { display: table-cell; vertical-align: middle; }
70
+ .atala_search_next, .atala_search_prev { margin: 0; }
71
+
72
+ .atala_search_input {
73
+ border: 1px solid #dedede;
74
+ border-right: 0;
75
+ box-sizing: border-box;
76
+ max-width: 100%;
77
+ background: #fff url(data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=) no-repeat right -10px center;
78
+ padding: 3px 18px 3px 4px;
79
+ transition: background 0.4s;
80
+ width: 100%;
81
+ }
82
+
83
+ .atala_search_input.atala_search_input_clearable { background-position: right 5px center; }
84
+ .atala_search_input.atala_search_input_clear_hover{ cursor: pointer; }
85
+ .atala_search_input::-ms-clear {display: none; width:0; height:0;}
86
+ .atala_search_input.atala_search_input_empty { border: 1px solid red; }
87
+ .atala_search_input.atala_search_input_loading {
88
+ background: url(data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=) right 5px center no-repeat, url('images/atala-ui-spinner.gif') right 15px center no-repeat;
89
+ padding-right: 35px;
90
+ background-size: auto, 15px;
91
+ background-color: #fff;
92
+ transition: background 0
93
+ }
94
+ .atala_search_input.atala_search_input_empty:focus { outline: none;}
95
+
96
+ .atala_page_loading {
97
+ background: url('images/atala-ui-spinner.gif') center no-repeat;
98
+ }
99
+
100
+ .atala_thumb_caption, .atala_page_number{
101
+ font-size: medium
102
+ }
103
+
104
+ .atala_drag_placeholder {
105
+ /* override placeholder width/height using !important modifier if needed */
106
+ border: 1px solid rgb(187, 187, 187);
107
+ vertical-align: middle;
108
+ }
109
+
110
+
111
+ .atala-upload-button {
112
+ margin: 5px;
113
+ width: 100px;
114
+ }
115
+
116
+ .atala-upload-progress-file-image {
117
+ background: url('images/atala-ui-spinner.gif') center no-repeat;
118
+ width: 40px;
119
+ height: 40px;
120
+ }
121
+
122
+ .atala-upload-flex-area {
123
+ border-bottom: 4px solid rgb(187, 187, 187)
124
+ }
125
+
126
+
127
+ .atala-upload-flex-area-non-table {
128
+ justify-content: center;
129
+ align-items: center;
130
+ }
131
+
132
+ .atala-upload-single-file {
133
+ align-items: center;
134
+ display: flex;
135
+ }
136
+
137
+ .atala-upload-single-file.atala-upload-single-file-no-drag-drop {
138
+ flex-flow: column;
139
+ }
140
+
141
+ .atala-upload-multiple-files {
142
+ width: 100%;
143
+ display: table;
144
+ word-wrap: break-word;
145
+ word-break: break-all;
146
+ }
147
+
148
+ .atala-upload-multiple-files.atala-upload-multiple-files-drag-and-drop {
149
+ width: auto;
150
+ display: flex;
151
+ align-items: center;
152
+ }
153
+
154
+ .atala-upload-files-header-row { display: table-header-group; }
155
+ .atala-upload-files-row { display: table-row; }
156
+
157
+ .atala-upload-files-header {
158
+ display: table-cell;
159
+ padding: 10px;
160
+ border-bottom-style: solid;
161
+ border-bottom-color: rgb(187, 187, 187);
162
+ border-bottom-width: 2px;
163
+ font-weight: bold;
164
+ }
165
+
166
+ .atala-upload-files-header-size {
167
+ width: 90px;
168
+ border-left-style: solid;
169
+ border-right-style: solid;
170
+ border-left-width: 2px;
171
+ border-right-width: 2px;
172
+ border-left-color: rgb(187, 187, 187);
173
+ border-right-color: rgb(187, 187, 187);
174
+ }
175
+
176
+ .atala-upload-files-header-status { width: 200px; }
177
+
178
+ .atala-upload-files-cell {
179
+ line-height: 100%;
180
+ display: table-cell;
181
+ padding: 4px 10px;
182
+ }
183
+
184
+ .atala-upload-files-cell-size { text-align: right; }
185
+ .atala-upload-files-row:nth-child(odd) { background: rgb(187, 187, 187); }
186
+
187
+ button.atala-upload-files-cancel-button {
188
+ width: 16px;
189
+ height: 16px;
190
+ border: none;
191
+ background: transparent;
192
+ padding: 0;
193
+ margin-left: 10px;
194
+ float: right;
195
+ }
196
+
197
+ .atala-upload-drag-and-drop { margin-left: 7px;}
198
+
199
+ .atala-upload-drag-and-drop-image {
200
+ background: url('images/atala-ui-dragdropfile.png') center no-repeat;
201
+ width: 32px;
202
+ height: 32px;
203
+ }
204
+
205
+ .atala_bookmark_content{
206
+ display: none;
207
+ position: absolute;
208
+ background-color: #f1f1f1;
209
+ min-width: 150px;
210
+ max-width: 350px;
211
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
212
+ z-index: 11;
213
+ font-family: Arial,Helvetica,sans-serif;
214
+ font-size: 1em;
215
+ overflow: auto;
216
+ }
217
+
218
+ .atala_bookmark_header{
219
+ font-size: 1.3em;
220
+ }
221
+
222
+ .atala_bookmark_content li,ul {
223
+ color: black;
224
+ padding: 9px 9px;
225
+ text-decoration: none;
226
+ display: block;
227
+ cursor: pointer;
228
+ user-select: none;
229
+ }
230
+
231
+ .atala_bookmark_content a:hover {background-color: #ddd}
232
+
233
+ /* Create the caret/arrow with a unicode, and style it */
234
+ .atala-bookmark-caret::before {
235
+ content: "\25BA";
236
+ color: black;
237
+ display: inline-block;
238
+ margin-right: 6px;
239
+ }
240
+
241
+ /* Rotate the caret/arrow icon when clicked on (using JavaScript) */
242
+ .atala-bookmark-caret-down::before {
243
+ transform: rotate(90deg);
244
+ }
245
+
246
+ /* Hide the nested list */
247
+ .atala-bookmark-nested {
248
+ display: none;
249
+ }
250
+
251
+ /* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
252
+ .atala-bookmark-active {
253
+ display: block;
254
+ }
255
+
256
+ .atala_tiled_page_image {
257
+ display: flex;
258
+ flex-direction: row;
259
+ }
260
+
261
+ .atala_tile_column {
262
+ flex-direction: column;
263
+ padding: 0px;
264
+ font-size: 0;
265
+ }
266
+
267
+ /* .atala_cover_for_tiled_page_image{
268
+ width: 100%;
269
+ height: 100%;
270
+ position: absolute;
271
+ top: 0;
272
+ left: 0;
273
+ z-index: 1;
274
+ } */