├── .gitignore
├── .idea
    ├── .gitignore
    ├── modules.xml
    ├── vcs.xml
    └── vue-image-browser.iml
├── LICENSE
├── README.md
├── build
    └── rollup.config.js
├── dist
    ├── vue-image-browser.esm.js
    ├── vue-image-browser.min.js
    └── vue-image-browser.umd.js
├── images
    ├── example-image-1.png
    └── example-image-2.png
├── package-lock.json
├── package.json
├── postcss.config.js
└── src
    ├── vue-image-browser.vue
    └── wrapper.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | # Default ignored files
2 | /shelf/
3 | /workspace.xml
4 | # Datasource local storage ignored files
5 | /dataSources/
6 | /dataSources.local.xml
7 | # Editor-based HTTP Client requests
8 | /httpRequests/
9 | 


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/vue-image-browser.iml" filepath="$PROJECT_DIR$/.idea/vue-image-browser.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/vue-image-browser.iml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <module type="WEB_MODULE" version="4">
3 |   <component name="NewModuleRootManager">
4 |     <content url="file://$MODULE_DIR$" />
5 |     <orderEntry type="inheritedJdk" />
6 |     <orderEntry type="sourceFolder" forTests="false" />
7 |   </component>
8 | </module>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Akash Mitra
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # An Image Browser Component Built with VueJs
  2 | 
  3 | ![](images/example-image-1.png)
  4 | 
  5 | A JavaScript Image Browser written in [VueJS](https://vuejs.org/) and styled with [TailwindCSS](https://tailwindcss.com/docs/installation/).
  6 | 
  7 | ## Features
  8 | - Image Upload
  9 | - Local or Remote Image Search
 10 | - Show larger image (Photo Pane view)
 11 | - Delete Image
 12 | - Show arbitrary information about the image
 13 | - Generate Or Capture Image Caption
 14 | - Lazy Load Images on scroll
 15 | 
 16 | ## Usage
 17 | 
 18 | Install as npm package
 19 | 
 20 | ```
 21 | npm install @akashmitra/vue-image-browser
 22 | ```
 23 | 
 24 | `import` this as a component. You may also use this inside another Vue component.
 25 | 
 26 | ```javascript
 27 | <template>
 28 | 
 29 |     <VueImageBrowser
 30 |         :images="photos"
 31 |         :image-properties="photoFields"
 32 |         allow-upload
 33 |         allow-delete
 34 |         enable-lazy-load>
 35 |     </VueImageBrowser>
 36 | 
 37 | </template>
 38 | <script>
 39 | import VueImageBrowser from '@akashmitra/vue-image-browser'
 40 | 
 41 | export default {
 42 |     components: {
 43 |         VueImageBrowser,
 44 |     },
 45 |     data() {
 46 |         return {
 47 |             photos: [
 48 |                 {'id': 1, 'name': 'sunflower.jpg', 'url': '/images/sunflower.jpg'},
 49 |                 {'id': 2, 'name': 'rose.jpg', 'url': '/images/rose.jpg'},
 50 |                 {'id': 3, 'name': 'tulip.jpg', 'url': '/images/tulip.jpg'},
 51 |             ],
 52 |             photoFields: {
 53 |                 'id': 'Image ID', 'name': 'File Name', 'url': 'Image Location'
 54 |             }
 55 |         }
 56 |     }
 57 | }
 58 | </script>
 59 | 
 60 | ```
 61 | 
 62 | ## Image Object
 63 | 
 64 | The `images` attribute in `VueImageBrowser` accepts an array containing one or more "image objects" with following mandatory fields - `id`, `name` and `url`. The image object can contain other fields as well. You can specify the additional fields in `image-properties` as key-value pairs, where the `key` is the attribute name and the `value` is the attribute title.
 65 | 
 66 | 
 67 | 
 68 | ## Image Upload Response
 69 | 
 70 | ![](images/example-image-2.png)
 71 | 
 72 | It is possible to upload an image to a specified API endpoint (`save-url`) via POST.
 73 | When an image is uploaded successfully, a 200 HTTP Status code response must be sent back from the server with a response JSON. After the image is uploaded successfully, a `saved` event will be generated and the response JSON will be passed with the event. Please see the example section below.
 74 | 
 75 | 
 76 | ## Options
 77 | 
 78 | | Parameter              | Type    | Default Value | Description                                                                                                                                                                                      |
 79 | |------------------------|---------|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 80 | | `images`               | Array   | `[]`          | An array containing the image objects. Each image object must contain `id`, `name` and `url` of the image                                                                                        |
 81 | | `image-properties`     | Object  |               | An object containing all the fields in image object along with the field titles                                                                                                                  |
 82 | | `allow-upload`         | Boolean | false         | (OPTIONAL) Whether or not to provide provision for image upload. If this is `true`, a `save-url` must be provided.                                                                               |
 83 | | `save-url`             | String  | /api/photos   | Specify the URL endpoint for posting the uploaded images.                                                                                                                                        |
 84 | | `save-request-headers` | Object  | `{}`          | (OPTIONAL) If you need to pass any additional HTTP headers, you may do so by providing the header names and values in this object                                                                |
 85 | | `allow-photo-pane`     | Boolean | false         | (OPTIONAL) When this attribute is true, clicking on an image in the gallery will show a larger version of the image in a Photo pane, along with any additional image information.                |
 86 | | `allow-delete`         | Boolean | false         | (OPTIONAL) Whether or not to provide a provision for deleting an image in Photo Pane view. If this is true, delete button will be shown and a `deleted` event will be generated                  |
 87 | | `allow-choose`         | Boolean | false         | (OPTIONAL) Whether or not to provide a provision for chosing the image inside Photo Pane view. If this is true, a "Choose" button will be displayed and a `chosen` event will be generated       |
 88 | | `allow-copy`           | Boolean | true          | (OPTIONAL) Whether or not to provide a provision for copying the image URL in the Photo Pane View. If this is true, a `Copy Link` button will be shown and image `url` will be copied to clipboard |
 89 | | `captionable`          | Boolean | false         | (OPTIONAL) Whether or not to provide a provision for specifying the image caption after selecting an image. If this is true, a prompt will be shown for image caption when users select an image |
 90 | | `enable-lazy-load`     | Boolean | true          | (OPTIONAL) Uses IntersectionObserver to ensure the images are only loaded to browser when the image comes near the browser viewport                                                              |
 91 | | `search-delay`         | Number  | 500           | (OPTIONAL) A delay in miliseconds after which the search event is fired.                                                                                                                         |
 92 | | `max-images-per-row`   | Number  | 5             | (OPTIONAL) Maximum number of images to be displayed in each row in image gallery. Must be a value from 1 to 6. Actual number of displayed images will vary based on screen-size                  |
 93 | | `post-key`             | String  | image         | (OPTIONAL) The name of the post request parameter to be used while posting file to the server.                                                                                                   |
 94 | 
 95 | 
 96 | ## Events
 97 | 
 98 | Following events are generated when performing various interactions with the images.
 99 | 
100 | | Event         | Parameter Type  | Parameter Value   |  Description                                                                                                                                                              |
101 | |---------------|-----------------|-------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
102 | | `searched`    | String          | seach phrase      | This event is generated when users search in the search box. The search phrase is passed to the event handler, which can be used to filter the images array               |
103 | | `selected`    | Object          | image             | This event is generated when users click on an image in the Gallery. The image is passed to the event handler.                                                            |
104 | | `chosen`      | Object          | image             | This event is generated when users select an image. The image is passed to the event handler.                                                                             |
105 | | `saved`       | Object          | image             | This event is generated when users successfully upload an image. The image is passed to the event handler.                                                                |
106 | | `deleted`     | Object          | image             | This event is generated when users delete an image. The image is passed to the event handler.                                                                             |
107 | 
108 | 
109 | ## Example
110 | 
111 | ```javascript
112 | <template>
113 | 
114 | 
115 |         <VueImageBrowser
116 |             :images="photos"
117 |             :image-properties="imageFields"
118 |             allow-photo-pane
119 |             allow-choose
120 |             allow-upload
121 |             allow-delete
122 |             enable-lazy-load
123 |             save-url="/api/media"
124 |             :save-request-headers="headers"
125 |             @selected="onSelect"
126 |             @chosen="onChoose"
127 |             @saved="onSave"
128 |             @deleted="onDelete"
129 |             @searched="onSearch"
130 |             >
131 |         </VueImageBrowser>
132 | 
133 | 
134 | </template>
135 | 
136 | <script>
137 | 
138 | import VueImageBrowser from '@akashmitra/vue-image-browser'
139 | 
140 | export default {
141 |     components: {
142 |         VueImageBrowser,
143 |     },
144 |     data() {
145 |         return {
146 |             photos: [],
147 |             headers: {
148 |                 "X-CSRF-Token": document.head.querySelector('meta[name="csrf-token"]').content
149 |             },
150 |             imageFields: {
151 |                 'id': 'File ID',
152 |                 'name': 'Image Name',
153 |                 'url': 'url',
154 |                 'size': 'File Size (KB)',
155 |                 'type': 'Image Type',
156 |             }
157 |         }
158 |     },
159 | 
160 |     created() {
161 |         this.getFromServer()
162 |     },
163 | 
164 |     methods: {
165 |         onDelete(image) {
166 |             // make an ajax call to server to delete the image
167 |             // TODO
168 |             // on ajax success, remove the image from your list
169 |             for(let i = 0; i < p.photos.length; i++) {
170 |                 let photo = p.photos[i]
171 |                 if (photo.id === image.id){
172 |                         p.photos.splice(i, 1)
173 |                         break
174 |                 }
175 |             }
176 |         },
177 | 
178 |         onSelect(image) {
179 |             console.log('on select', image)
180 |         },
181 | 
182 |         onSearch(query) {
183 |             this.getFromServer(query)
184 |         },
185 | 
186 |         onSave(image) {
187 |             this.photos.unshift(image)
188 |         },
189 | 
190 |         getFromServer(search_phrase) {
191 |             // search the images on server based on the search phrase
192 |         },
193 | 
194 |     }
195 | }
196 | </script>
197 | 
198 | 
199 | ```
200 | 
201 | ## Dependency
202 | 
203 | [TailwindCSS](https://tailwindcss.com/docs/installation/) must be present for the styling.


--------------------------------------------------------------------------------
/build/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import commonjs from '@rollup/plugin-commonjs'; // Convert CommonJS modules to ES6
 2 | import vue from 'rollup-plugin-vue'; // Handle .vue SFC files
 3 | import buble from '@rollup/plugin-buble'; // Transpile/polyfill with reasonable browser support
 4 | 
 5 | export default {
 6 |     input: 'src/wrapper.js', // Path relative to package.json
 7 |     output: {
 8 |         name: 'VueImageBrowser',
 9 |         exports: 'named',
10 |     },
11 |     external: [],
12 |     plugins: [
13 |         commonjs(),
14 |         vue({
15 |             css: true, // Dynamically inject css as a <style> tag
16 |             compileTemplate: true, // Explicitly convert template to render function
17 |         }),
18 |         buble(), // Transpile to ES5
19 |     ],
20 | };


--------------------------------------------------------------------------------
/dist/vue-image-browser.esm.js:
--------------------------------------------------------------------------------
   1 | //
   2 | //
   3 | //
   4 | //
   5 | //
   6 | //
   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 | //
  46 | //
  47 | //
  48 | //
  49 | //
  50 | //
  51 | //
  52 | //
  53 | //
  54 | //
  55 | //
  56 | //
  57 | //
  58 | //
  59 | //
  60 | //
  61 | //
  62 | //
  63 | //
  64 | //
  65 | //
  66 | //
  67 | //
  68 | //
  69 | //
  70 | //
  71 | //
  72 | //
  73 | //
  74 | //
  75 | //
  76 | //
  77 | //
  78 | //
  79 | //
  80 | //
  81 | //
  82 | //
  83 | //
  84 | //
  85 | //
  86 | //
  87 | //
  88 | //
  89 | //
  90 | //
  91 | //
  92 | //
  93 | //
  94 | //
  95 | //
  96 | //
  97 | //
  98 | //
  99 | //
 100 | //
 101 | //
 102 | //
 103 | //
 104 | //
 105 | //
 106 | //
 107 | //
 108 | //
 109 | //
 110 | //
 111 | //
 112 | //
 113 | //
 114 | //
 115 | //
 116 | //
 117 | //
 118 | //
 119 | //
 120 | //
 121 | //
 122 | //
 123 | //
 124 | //
 125 | //
 126 | //
 127 | //
 128 | //
 129 | //
 130 | //
 131 | //
 132 | //
 133 | //
 134 | //
 135 | //
 136 | //
 137 | //
 138 | //
 139 | //
 140 | //
 141 | //
 142 | //
 143 | //
 144 | //
 145 | //
 146 | //
 147 | //
 148 | //
 149 | //
 150 | //
 151 | //
 152 | //
 153 | //
 154 | //
 155 | //
 156 | //
 157 | //
 158 | //
 159 | //
 160 | //
 161 | //
 162 | //
 163 | //
 164 | //
 165 | //
 166 | //
 167 | //
 168 | //
 169 | //
 170 | //
 171 | //
 172 | //
 173 | //
 174 | //
 175 | //
 176 | //
 177 | //
 178 | //
 179 | //
 180 | //
 181 | //
 182 | //
 183 | //
 184 | //
 185 | //
 186 | //
 187 | //
 188 | //
 189 | //
 190 | //
 191 | //
 192 | //
 193 | //
 194 | //
 195 | //
 196 | //
 197 | //
 198 | //
 199 | //
 200 | //
 201 | //
 202 | //
 203 | //
 204 | //
 205 | //
 206 | //
 207 | //
 208 | //
 209 | //
 210 | //
 211 | //
 212 | //
 213 | //
 214 | //
 215 | //
 216 | //
 217 | //
 218 | //
 219 | //
 220 | //
 221 | //
 222 | //
 223 | //
 224 | //
 225 | //
 226 | //
 227 | //
 228 | //
 229 | //
 230 | 
 231 | var script = {
 232 |   name: 'vue-image-browser',
 233 | 
 234 |   props: {
 235 |     images: {
 236 |       type: Array,
 237 |       default: function () { return []; },
 238 |     },
 239 | 
 240 |     imageProperties: {
 241 |       type: Object,
 242 |     },
 243 | 
 244 |     allowUpload: {
 245 |       type: Boolean,
 246 |       default: false,
 247 |     },
 248 | 
 249 |     saveUrl: {
 250 |       type: String,
 251 |       default: '/api/photos',
 252 |     },
 253 | 
 254 |     saveRequestHeaders: {
 255 |       type: Object,
 256 |       default: function () {},
 257 |     },
 258 | 
 259 |     searchDelay: {
 260 |       type: Number,
 261 |       default: 500,
 262 |     },
 263 | 
 264 |     allowDelete: {
 265 |       type: Boolean,
 266 |       default: false,
 267 |     },
 268 | 
 269 |       allowPhotoPane: {
 270 |           type: Boolean,
 271 |           default: false,
 272 |       },
 273 | 
 274 |       allowChoose: {
 275 |           type: Boolean,
 276 |           default: false,
 277 |       },
 278 | 
 279 |       allowCopy: {
 280 |           type: Boolean,
 281 |           default: true,
 282 |       },
 283 | 
 284 |       captionable: {
 285 |           type: Boolean,
 286 |           default: false,
 287 |       },
 288 | 
 289 |       enableLazyLoad: {
 290 |           type: Boolean,
 291 |           default: true,
 292 |       },
 293 | 
 294 |       maxImagesPerRow: {
 295 |           type: Number,
 296 |           default: 5,
 297 |       },
 298 | 
 299 |       postKey: {
 300 |           type: String,
 301 |           default: 'image',
 302 |       },
 303 |   },
 304 | 
 305 |   data: function () {
 306 |     return {
 307 |       message: null,
 308 |       query: '',
 309 |       searchResult: null,
 310 |       pane: 'gallery',
 311 |       selectedPhoto: {},
 312 |       uploadableFiles: [],
 313 |       copyLinkText: 'Copy Link',
 314 |       chooseBtnText: 'Choose',
 315 |     }
 316 |   },
 317 | 
 318 |   created: function created() {
 319 |     this.$nextTick(function () {
 320 |       if (this.enableLazyLoad) {
 321 |         this.enableLazyLoading();
 322 |       }
 323 |     });
 324 |   },
 325 | 
 326 |   updated: function () {
 327 |     this.$nextTick(function () {
 328 |       if (this.enableLazyLoad) {
 329 |         this.enableLazyLoading();
 330 |       }
 331 |     });
 332 |   },
 333 | 
 334 |   computed: {
 335 |     imagesPerRow: function imagesPerRow() {
 336 |       var xs = parseInt(this.maxImagesPerRow * (1 / 4)),
 337 |         md = parseInt(this.maxImagesPerRow * (2 / 4)),
 338 |         lg = parseInt(this.maxImagesPerRow * (3 / 4)),
 339 |         xl = parseInt(this.maxImagesPerRow * (4 / 4));
 340 | 
 341 |       return (
 342 |         'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl
 343 |       )
 344 |     },
 345 |   },
 346 | 
 347 |   methods: {
 348 |     select: function select(photo) {
 349 |       this.selectedPhoto = photo;
 350 | 
 351 |       this.allowPhotoPane && (this.pane = 'photo');
 352 | 
 353 |       this.captionable && (this.selectedPhoto['caption'] = this.getCaption());
 354 | 
 355 |       this.$emit('selected', this.selectedPhoto);
 356 |     },
 357 | 
 358 |     choose: function () {
 359 |       this.captionable && (this.selectedPhoto['caption'] = this.getCaption());
 360 | 
 361 |       this.$emit('chosen', this.selectedPhoto);
 362 | 
 363 |       this.pane = 'gallery';
 364 |     },
 365 | 
 366 |     copy: function copy() {
 367 |       var p = this;
 368 | 
 369 |       if (navigator.clipboard) {
 370 |         navigator.clipboard.writeText(this.selectedPhoto.url).then(function () {
 371 |           p.copyLinkText = 'Link Copied!';
 372 |         });
 373 |       }
 374 |     },
 375 | 
 376 |     getCaption: function getCaption() {
 377 |       // remove file name extensions
 378 |       var caption = this.selectedPhoto.name.replace(/\.[^/.]+$/, '');
 379 | 
 380 |       // remove special characters with space
 381 |       caption = caption.replace(/[^\w\s]/gi, ' ');
 382 | 
 383 |       // uppercase first letter of each word
 384 |       caption = caption
 385 |         .toLowerCase()
 386 |         .split(' ')
 387 |         .map(function (s) { return s.charAt(0).toUpperCase() + s.substring(1); })
 388 |         .join(' ');
 389 | 
 390 |       return prompt('Enter an caption for this image', caption)
 391 |     },
 392 | 
 393 |     uploadFiles: function () {
 394 |       var this$1 = this;
 395 | 
 396 |       var files = document.getElementById('files').files,
 397 |         p = this;
 398 | 
 399 |       var loop = function ( i ) {
 400 |           var upf = {
 401 |               name: files[i].name,
 402 |               formdata: new FormData(),
 403 |               ajax: new XMLHttpRequest(),
 404 |               status: 'Not Started',
 405 |               completion: 0,
 406 |           };
 407 | 
 408 |           upf.formdata.append(this$1.postKey, files[i]);
 409 |           upf.formdata.append('name', files[i].name);
 410 | 
 411 |           upf.ajax.upload.onprogress = function (e) {
 412 |               upf.status = 'Uploaded ' + Math.round(e.loaded / 1000) + ' KB...';
 413 |               upf.completion = Math.round((e.loaded / e.total) * 100);
 414 |           };
 415 |           upf.ajax.upload.onload = function (e) {
 416 |               upf.status = 'Complete';
 417 |               upf.completion = 100;
 418 |           };
 419 |           upf.ajax.upload.onerror = function (e) {
 420 |               upf.status = 'Error uploading the file';
 421 |               upf.completion = 0;
 422 |           };
 423 |           // ajax.upload.addEventListener('abort', abortHandler, false);
 424 | 
 425 |           upf.ajax.open('POST', p.saveUrl);
 426 | 
 427 |           var header_keys = Object.keys(p.saveRequestHeaders);
 428 |           for (var i$1 = 0; i$1 < header_keys.length; i$1++) {
 429 |               var header = header_keys[i$1];
 430 |           var val = p.saveRequestHeaders[header];
 431 |           upf.ajax.setRequestHeader(header, val);
 432 |         }
 433 | 
 434 |         upf.ajax.onreadystatechange = function () {
 435 |           if (upf.ajax.readyState === 4 && upf.ajax.status === 200) {
 436 |             var response = upf.ajax.responseText;
 437 |             if (response) {
 438 |               try {
 439 |                 var media = JSON.parse(response);
 440 |                 p.$emit('saved', media);
 441 |               } catch (e) {
 442 |                 alert(e);
 443 |               }
 444 |             }
 445 |           }
 446 |           if (upf.ajax.readyState === 4 && upf.ajax.status != 200) {
 447 |             upf.status =
 448 |               'Error uploading the file (Status = ' + upf.ajax.status + ')';
 449 |             upf.completion = 0;
 450 |           }
 451 |         };
 452 |         upf.ajax.send(upf.formdata);
 453 |         this$1.uploadableFiles.push(upf);
 454 |       };
 455 | 
 456 |       for (var i = 0; i < files.length; i++) loop( i );
 457 |     },
 458 | 
 459 |     deleteSelected: function deleteSelected() {
 460 |       this.$emit('deleted', this.selectedPhoto);
 461 |       this.pane = 'gallery';
 462 |     },
 463 | 
 464 |     doDelayedSearch: function doDelayedSearch() {
 465 |       var p = this;
 466 | 
 467 |       if (this.timer) {
 468 |         clearTimeout(this.timer);
 469 |         this.timer = null;
 470 |       }
 471 | 
 472 |       if (p.query.length > 0) { p.searchResult = 'Searching...'; }
 473 |       else { p.searchResult = ''; }
 474 | 
 475 |       this.timer = setTimeout(function () {
 476 |         p.$emit('searched', p.query);
 477 |       }, this.searchDelay);
 478 |     },
 479 | 
 480 |     // This is an experimental function that enables
 481 |     // lazy-loading.
 482 |     enableLazyLoading: function enableLazyLoading() {
 483 |       var images = document.querySelectorAll('.mg-photo');
 484 | 
 485 |       var config = {
 486 |         root: null,
 487 |         rootMargin: '0px 0px 50px 0px',
 488 |       };
 489 | 
 490 |       // check if intersection observer is supported via browser
 491 |       if (!('IntersectionObserver' in window)) {
 492 |         // if not, just load all immediately
 493 |         Array.from(images).forEach(function (image) {
 494 |           console.log('IntersectionObserver unsupported loading');
 495 |           if (!image.src) { image.src = image.dataset.src; }
 496 |         });
 497 |       } else {
 498 |         var observer = new IntersectionObserver(function (entries) {
 499 |           entries.forEach(function (image) {
 500 |             // Are we in viewport?
 501 |             if (image.isIntersecting) {
 502 |               // console.log('Loading: ' + image.target.dataset.src)
 503 |               // console.log(image.target.src)
 504 |               image.target.src = image.target.dataset.src;
 505 |               observer.unobserve(image.target);
 506 |             }
 507 |           });
 508 |         }, config);
 509 | 
 510 |         images.forEach(function (image) {
 511 |           if (!image.src) {
 512 |             observer.observe(image);
 513 |           }
 514 |         });
 515 |       }
 516 |     },
 517 |   },
 518 | };
 519 | 
 520 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
 521 |     if (typeof shadowMode !== 'boolean') {
 522 |         createInjectorSSR = createInjector;
 523 |         createInjector = shadowMode;
 524 |         shadowMode = false;
 525 |     }
 526 |     // Vue.extend constructor export interop.
 527 |     var options = typeof script === 'function' ? script.options : script;
 528 |     // render functions
 529 |     if (template && template.render) {
 530 |         options.render = template.render;
 531 |         options.staticRenderFns = template.staticRenderFns;
 532 |         options._compiled = true;
 533 |         // functional template
 534 |         if (isFunctionalTemplate) {
 535 |             options.functional = true;
 536 |         }
 537 |     }
 538 |     // scopedId
 539 |     if (scopeId) {
 540 |         options._scopeId = scopeId;
 541 |     }
 542 |     var hook;
 543 |     if (moduleIdentifier) {
 544 |         // server build
 545 |         hook = function (context) {
 546 |             // 2.3 injection
 547 |             context =
 548 |                 context || // cached call
 549 |                     (this.$vnode && this.$vnode.ssrContext) || // stateful
 550 |                     (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
 551 |             // 2.2 with runInNewContext: true
 552 |             if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
 553 |                 context = __VUE_SSR_CONTEXT__;
 554 |             }
 555 |             // inject component styles
 556 |             if (style) {
 557 |                 style.call(this, createInjectorSSR(context));
 558 |             }
 559 |             // register component module identifier for async chunk inference
 560 |             if (context && context._registeredComponents) {
 561 |                 context._registeredComponents.add(moduleIdentifier);
 562 |             }
 563 |         };
 564 |         // used by ssr in case component is cached and beforeCreate
 565 |         // never gets called
 566 |         options._ssrRegister = hook;
 567 |     }
 568 |     else if (style) {
 569 |         hook = shadowMode
 570 |             ? function (context) {
 571 |                 style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
 572 |             }
 573 |             : function (context) {
 574 |                 style.call(this, createInjector(context));
 575 |             };
 576 |     }
 577 |     if (hook) {
 578 |         if (options.functional) {
 579 |             // register for functional component in vue file
 580 |             var originalRender = options.render;
 581 |             options.render = function renderWithStyleInjection(h, context) {
 582 |                 hook.call(context);
 583 |                 return originalRender(h, context);
 584 |             };
 585 |         }
 586 |         else {
 587 |             // inject component registration as beforeCreate hook
 588 |             var existing = options.beforeCreate;
 589 |             options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
 590 |         }
 591 |     }
 592 |     return script;
 593 | }
 594 | 
 595 | var isOldIE = typeof navigator !== 'undefined' &&
 596 |     /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
 597 | function createInjector(context) {
 598 |     return function (id, style) { return addStyle(id, style); };
 599 | }
 600 | var HEAD;
 601 | var styles = {};
 602 | function addStyle(id, css) {
 603 |     var group = isOldIE ? css.media || 'default' : id;
 604 |     var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
 605 |     if (!style.ids.has(id)) {
 606 |         style.ids.add(id);
 607 |         var code = css.source;
 608 |         if (css.map) {
 609 |             // https://developer.chrome.com/devtools/docs/javascript-debugging
 610 |             // this makes source maps inside style tags work properly in Chrome
 611 |             code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
 612 |             // http://stackoverflow.com/a/26603875
 613 |             code +=
 614 |                 '\n/*# sourceMappingURL=data:application/json;base64,' +
 615 |                     btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
 616 |                     ' */';
 617 |         }
 618 |         if (!style.element) {
 619 |             style.element = document.createElement('style');
 620 |             style.element.type = 'text/css';
 621 |             if (css.media)
 622 |                 { style.element.setAttribute('media', css.media); }
 623 |             if (HEAD === undefined) {
 624 |                 HEAD = document.head || document.getElementsByTagName('head')[0];
 625 |             }
 626 |             HEAD.appendChild(style.element);
 627 |         }
 628 |         if ('styleSheet' in style.element) {
 629 |             style.styles.push(code);
 630 |             style.element.styleSheet.cssText = style.styles
 631 |                 .filter(Boolean)
 632 |                 .join('\n');
 633 |         }
 634 |         else {
 635 |             var index = style.ids.size - 1;
 636 |             var textNode = document.createTextNode(code);
 637 |             var nodes = style.element.childNodes;
 638 |             if (nodes[index])
 639 |                 { style.element.removeChild(nodes[index]); }
 640 |             if (nodes.length)
 641 |                 { style.element.insertBefore(textNode, nodes[index]); }
 642 |             else
 643 |                 { style.element.appendChild(textNode); }
 644 |         }
 645 |     }
 646 | }
 647 | 
 648 | /* script */
 649 | var __vue_script__ = script;
 650 | 
 651 | /* template */
 652 | var __vue_render__ = function() {
 653 |   var _vm = this;
 654 |   var _h = _vm.$createElement;
 655 |   var _c = _vm._self._c || _h;
 656 |   return _c("div", { staticClass: "w-full" }, [
 657 |     _c(
 658 |       "div",
 659 |       {
 660 |         directives: [
 661 |           {
 662 |             name: "show",
 663 |             rawName: "v-show",
 664 |             value: _vm.pane === "gallery",
 665 |             expression: "pane === 'gallery'"
 666 |           }
 667 |         ],
 668 |         staticClass:
 669 |           "w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap",
 670 |         attrs: { id: "top-panel" }
 671 |       },
 672 |       [
 673 |         _c("div", { staticClass: "flex-grow flex" }, [
 674 |           _c("input", {
 675 |             directives: [
 676 |               {
 677 |                 name: "model",
 678 |                 rawName: "v-model",
 679 |                 value: _vm.query,
 680 |                 expression: "query"
 681 |               }
 682 |             ],
 683 |             staticClass:
 684 |               "p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none",
 685 |             attrs: { type: "text", placeholder: "search..." },
 686 |             domProps: { value: _vm.query },
 687 |             on: {
 688 |               keyup: _vm.doDelayedSearch,
 689 |               input: function($event) {
 690 |                 if ($event.target.composing) {
 691 |                   return
 692 |                 }
 693 |                 _vm.query = $event.target.value;
 694 |               }
 695 |             }
 696 |           }),
 697 |           _vm._v(" "),
 698 |           _c(
 699 |             "div",
 700 |             {
 701 |               staticClass:
 702 |                 "hidden sm:flex relative pin-r rounded-r-lg border-r border-t border-b border-gray-300 bg-white py-1 px-2 items-center"
 703 |             },
 704 |             [
 705 |               _vm.searchResult
 706 |                 ? _c("span", {
 707 |                     staticClass:
 708 |                       "py-1 px-2 bg-transparent rounded-lg text-xs whitespace-no-wrap",
 709 |                     domProps: { textContent: _vm._s(_vm.searchResult) }
 710 |                   })
 711 |                 : _vm._e()
 712 |             ]
 713 |           )
 714 |         ]),
 715 |         _vm._v(" "),
 716 |         _vm.allowUpload
 717 |           ? _c("div", { staticClass: "flex-none" }, [
 718 |               _c(
 719 |                 "button",
 720 |                 {
 721 |                   staticClass: "text-white bg-blue-600 mx-2 px-4 py-2 rounded",
 722 |                   attrs: { title: "Upload Image" },
 723 |                   on: {
 724 |                     click: function($event) {
 725 |                       _vm.pane = "upload";
 726 |                     }
 727 |                   }
 728 |                 },
 729 |                 [_vm._v("\n        Add Image\n      ")]
 730 |               )
 731 |             ])
 732 |           : _vm._e()
 733 |       ]
 734 |     ),
 735 |     _vm._v(" "),
 736 |     _c(
 737 |       "div",
 738 |       {
 739 |         directives: [
 740 |           {
 741 |             name: "show",
 742 |             rawName: "v-show",
 743 |             value: _vm.pane === "gallery",
 744 |             expression: "pane === 'gallery'"
 745 |           }
 746 |         ],
 747 |         staticClass:
 748 |           "w-full flex flex-wrap thumbnail-container overflow-y-scroll"
 749 |       },
 750 |       _vm._l(_vm.images, function(photo) {
 751 |         return _c(
 752 |           "div",
 753 |           {
 754 |             key: photo.id,
 755 |             class: _vm.imagesPerRow,
 756 |             on: {
 757 |               click: function($event) {
 758 |                 return _vm.select(photo)
 759 |               }
 760 |             }
 761 |           },
 762 |           [
 763 |             _c(
 764 |               "div",
 765 |               {
 766 |                 staticClass: "bg-white shadow mr-4 mb-4 cursor-pointer",
 767 |                 class:
 768 |                   _vm.selectedPhoto.id === photo.id
 769 |                     ? "border border-blue-600"
 770 |                     : ""
 771 |               },
 772 |               [
 773 |                 _c(
 774 |                   "div",
 775 |                   {
 776 |                     staticClass:
 777 |                       "w-full flex items-center justify-center thumbnail"
 778 |                   },
 779 |                   [
 780 |                     _c("img", {
 781 |                       staticClass: "mg-photo",
 782 |                       attrs: { "data-src": photo.url, title: photo.name }
 783 |                     })
 784 |                   ]
 785 |                 ),
 786 |                 _vm._v(" "),
 787 |                 _c(
 788 |                   "div",
 789 |                   {
 790 |                     staticClass:
 791 |                       "w-full flex bg-white justify-between text-gray-600 text-xs p-2"
 792 |                   },
 793 |                   [
 794 |                     _c("span", { staticClass: "truncate" }, [
 795 |                       _vm._v(_vm._s(photo.name))
 796 |                     ])
 797 |                   ]
 798 |                 )
 799 |               ]
 800 |             )
 801 |           ]
 802 |         )
 803 |       }),
 804 |       0
 805 |     ),
 806 |     _vm._v(" "),
 807 |     _vm.pane === "photo"
 808 |       ? _c(
 809 |           "div",
 810 |           {
 811 |             staticClass:
 812 |               "w-full mx-auto py-4 px-4 bg-transparent flex justify-between items-center"
 813 |           },
 814 |           [
 815 |             _c(
 816 |               "button",
 817 |               {
 818 |                 staticClass: "flex items-center",
 819 |                 on: {
 820 |                   click: function($event) {
 821 |                     _vm.pane = "gallery";
 822 |                   }
 823 |                 }
 824 |               },
 825 |               [
 826 |                 _c(
 827 |                   "svg",
 828 |                   {
 829 |                     staticClass:
 830 |                       "fill-current h-8 w-8 rounded-full border border-gray-600 p-2 text-gray-600 mr-2",
 831 |                     attrs: {
 832 |                       xmlns: "http://www.w3.org/2000/svg",
 833 |                       viewBox: "0 0 20 20"
 834 |                     }
 835 |                   },
 836 |                   [
 837 |                     _c("polygon", {
 838 |                       attrs: {
 839 |                         points:
 840 |                           "3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9"
 841 |                       }
 842 |                     })
 843 |                   ]
 844 |                 ),
 845 |                 _vm._v(" "),
 846 |                 _c("p", { staticClass: "text-blue-700 text-xl" }, [
 847 |                   _vm._v("Back to Gallery")
 848 |                 ])
 849 |               ]
 850 |             ),
 851 |             _vm._v(" "),
 852 |             _c("div", { staticClass: "flex items-center justify-between" }, [
 853 |               _vm.allowCopy
 854 |                 ? _c(
 855 |                     "button",
 856 |                     {
 857 |                       staticClass:
 858 |                         "py-2 px-6 text-blue-600 hover:text-blue-800 mt-4 ml-4",
 859 |                       on: { click: _vm.copy }
 860 |                     },
 861 |                     [
 862 |                       _vm._v(
 863 |                         "\n        " + _vm._s(_vm.copyLinkText) + "\n      "
 864 |                       )
 865 |                     ]
 866 |                   )
 867 |                 : _vm._e(),
 868 |               _vm._v(" "),
 869 |               _vm.allowChoose
 870 |                 ? _c(
 871 |                     "button",
 872 |                     {
 873 |                       staticClass:
 874 |                         "py-2 px-6 bg-green-500 text-white rounded shadow text-xl mt-4 ml-4",
 875 |                       on: { click: _vm.choose }
 876 |                     },
 877 |                     [
 878 |                       _vm._v(
 879 |                         "\n        " + _vm._s(_vm.chooseBtnText) + "\n      "
 880 |                       )
 881 |                     ]
 882 |                   )
 883 |                 : _vm._e()
 884 |             ])
 885 |           ]
 886 |         )
 887 |       : _vm._e(),
 888 |     _vm._v(" "),
 889 |     _vm.pane === "photo"
 890 |       ? _c("div", { staticClass: "w-full px-4 postcard-container" }, [
 891 |           _c("div", { staticClass: "w-full postcard" }, [
 892 |             _c("img", {
 893 |               staticClass: "mx-auto shadow-lg mg-photo",
 894 |               attrs: {
 895 |                 src: _vm.selectedPhoto.url,
 896 |                 title: _vm.selectedPhoto.name
 897 |               }
 898 |             })
 899 |           ]),
 900 |           _vm._v(" "),
 901 |           _c("div", { staticClass: "w-full text-sm px-2 py-2 bg-white" }, [
 902 |             _c(
 903 |               "table",
 904 |               { staticClass: "w-full mt-4 table-auto" },
 905 |               _vm._l(_vm.imageProperties, function(pk, pv) {
 906 |                 return _c("tr", { staticClass: "border-b" }, [
 907 |                   _c(
 908 |                     "td",
 909 |                     {
 910 |                       staticClass: "p-4 uppercase font-semibold text-gray-600"
 911 |                     },
 912 |                     [
 913 |                       _vm._v(
 914 |                         "\n            " +
 915 |                           _vm._s(pk.toUpperCase()) +
 916 |                           "\n          "
 917 |                       )
 918 |                     ]
 919 |                   ),
 920 |                   _vm._v(" "),
 921 |                   _c("td", { staticClass: "p-4 font-mono" }, [
 922 |                     _vm._v(_vm._s(_vm.selectedPhoto[pv]))
 923 |                   ])
 924 |                 ])
 925 |               }),
 926 |               0
 927 |             ),
 928 |             _vm._v(" "),
 929 |             _vm.allowDelete
 930 |               ? _c(
 931 |                   "button",
 932 |                   {
 933 |                     staticClass:
 934 |                       "text-red-500 border m-4 mt-6 px-4 text-sm py-1 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer",
 935 |                     on: {
 936 |                       click: function($event) {
 937 |                         return _vm.deleteSelected()
 938 |                       }
 939 |                     }
 940 |                   },
 941 |                   [_vm._v("\n        Delete\n      ")]
 942 |                 )
 943 |               : _vm._e()
 944 |           ])
 945 |         ])
 946 |       : _vm._e(),
 947 |     _vm._v(" "),
 948 |     _vm.pane === "upload"
 949 |       ? _c(
 950 |           "div",
 951 |           { staticClass: "w-full p-4 postcard-container overflow-y-scroll" },
 952 |           [
 953 |             _c("div", { staticClass: "flex justify-between" }, [
 954 |               _c(
 955 |                 "button",
 956 |                 {
 957 |                   staticClass: "flex items-center",
 958 |                   on: {
 959 |                     click: function($event) {
 960 |                       _vm.pane = "gallery";
 961 |                     }
 962 |                   }
 963 |                 },
 964 |                 [
 965 |                   _c(
 966 |                     "svg",
 967 |                     {
 968 |                       staticClass:
 969 |                         "fill-current h-8 w-8 rounded-full border p-2 text-gray-600 mr-2",
 970 |                       attrs: {
 971 |                         xmlns: "http://www.w3.org/2000/svg",
 972 |                         viewBox: "0 0 20 20"
 973 |                       }
 974 |                     },
 975 |                     [
 976 |                       _c("polygon", {
 977 |                         attrs: {
 978 |                           points:
 979 |                             "3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9"
 980 |                         }
 981 |                       })
 982 |                     ]
 983 |                   ),
 984 |                   _vm._v(" "),
 985 |                   _c(
 986 |                     "p",
 987 |                     {
 988 |                       staticClass:
 989 |                         "text-gray-600 font-light text-lg hidden sm:block"
 990 |                     },
 991 |                     [_vm._v("\n          Back to Gallery\n        ")]
 992 |                   )
 993 |                 ]
 994 |               ),
 995 |               _vm._v(" "),
 996 |               _c(
 997 |                 "form",
 998 |                 {
 999 |                   attrs: {
1000 |                     id: "file-catcher",
1001 |                     enctype: "multipart/form-data",
1002 |                     method: "post"
1003 |                   }
1004 |                 },
1005 |                 [
1006 |                   _c("div", { staticClass: "w-full flex bg-transparent" }, [
1007 |                     _c(
1008 |                       "label",
1009 |                       {
1010 |                         staticClass:
1011 |                           "flex items-center px-4 py-2 rounded-lg border border-blue-500 bg-white text-blue-500 tracking-wide cursor-pointer hover:bg-blue-500 hover:text-white"
1012 |                       },
1013 |                       [
1014 |                         _c(
1015 |                           "svg",
1016 |                           {
1017 |                             staticClass: "w-8 h-8 mr-4",
1018 |                             attrs: {
1019 |                               fill: "currentColor",
1020 |                               xmlns: "http://www.w3.org/2000/svg",
1021 |                               viewBox: "0 0 20 20"
1022 |                             }
1023 |                           },
1024 |                           [
1025 |                             _c("path", {
1026 |                               attrs: {
1027 |                                 d:
1028 |                                   "M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z"
1029 |                               }
1030 |                             })
1031 |                           ]
1032 |                         ),
1033 |                         _vm._v(" "),
1034 |                         _vm._m(0),
1035 |                         _vm._v(" "),
1036 |                         _c("input", {
1037 |                           staticClass: "hidden",
1038 |                           attrs: {
1039 |                             id: "files",
1040 |                             type: "file",
1041 |                             name: "files",
1042 |                             multiple: ""
1043 |                           },
1044 |                           on: { change: _vm.uploadFiles }
1045 |                         })
1046 |                       ]
1047 |                     )
1048 |                   ])
1049 |                 ]
1050 |               )
1051 |             ]),
1052 |             _vm._v(" "),
1053 |             _vm.uploadableFiles.length > 0
1054 |               ? _c(
1055 |                   "div",
1056 |                   {
1057 |                     staticClass: "w-full my-4",
1058 |                     attrs: { id: "file-list-display" }
1059 |                   },
1060 |                   [
1061 |                     _c("table", { staticClass: "w-full my-2 text-sm" }, [
1062 |                       _vm._m(1),
1063 |                       _vm._v(" "),
1064 |                       _c(
1065 |                         "tbody",
1066 |                         _vm._l(_vm.uploadableFiles, function(f, index) {
1067 |                           return _c(
1068 |                             "tr",
1069 |                             { key: index, staticClass: "p-2 border-b" },
1070 |                             [
1071 |                               _c("td", {
1072 |                                 staticClass: "text-left p-2 hidden md:block",
1073 |                                 domProps: { textContent: _vm._s(index + 1) }
1074 |                               }),
1075 |                               _vm._v(" "),
1076 |                               _c("td", {
1077 |                                 staticClass: "text-left p-2",
1078 |                                 domProps: { textContent: _vm._s(f.name) }
1079 |                               }),
1080 |                               _vm._v(" "),
1081 |                               _c("td", [
1082 |                                 _c("span", {
1083 |                                   domProps: { textContent: _vm._s(f.status) }
1084 |                                 })
1085 |                               ]),
1086 |                               _vm._v(" "),
1087 |                               _c("td", [
1088 |                                 _c("progress", {
1089 |                                   staticClass: "my-2 w-full",
1090 |                                   attrs: { id: "progressBar", max: "100" },
1091 |                                   domProps: { value: f.completion }
1092 |                                 })
1093 |                               ])
1094 |                             ]
1095 |                           )
1096 |                         }),
1097 |                         0
1098 |                       )
1099 |                     ])
1100 |                   ]
1101 |                 )
1102 |               : _vm._e()
1103 |           ]
1104 |         )
1105 |       : _vm._e(),
1106 |     _vm._v(" "),
1107 |     _vm.message
1108 |       ? _c(
1109 |           "div",
1110 |           {
1111 |             staticClass: "p-2 bg-white w-full text-sm text-gray-600 rounded",
1112 |             attrs: { id: "message" }
1113 |           },
1114 |           [_c("span", { domProps: { textContent: _vm._s(_vm.message) } })]
1115 |         )
1116 |       : _vm._e()
1117 |   ])
1118 | };
1119 | var __vue_staticRenderFns__ = [
1120 |   function() {
1121 |     var _vm = this;
1122 |     var _h = _vm.$createElement;
1123 |     var _c = _vm._self._c || _h;
1124 |     return _c("p", { staticClass: "text-base leading-normal" }, [
1125 |       _vm._v("\n              Upload\n              "),
1126 |       _c("span", { staticClass: "hidden sm:inline" }, [
1127 |         _vm._v("From Local Computer")
1128 |       ])
1129 |     ])
1130 |   },
1131 |   function() {
1132 |     var _vm = this;
1133 |     var _h = _vm.$createElement;
1134 |     var _c = _vm._self._c || _h;
1135 |     return _c("thead", [
1136 |       _c("tr", { staticClass: "bg-white text-left" }, [
1137 |         _c("th", { staticClass: "p-2 font-light hidden md:block" }, [
1138 |           _vm._v("#")
1139 |         ]),
1140 |         _vm._v(" "),
1141 |         _c("th", { staticClass: "p-2 font-light" }, [_vm._v("File Name")]),
1142 |         _vm._v(" "),
1143 |         _c("th", { staticClass: "p-2 font-light" }, [_vm._v("Status")]),
1144 |         _vm._v(" "),
1145 |         _c("th", { staticClass: "p-2 font-light" }, [_vm._v("Progress")])
1146 |       ])
1147 |     ])
1148 |   }
1149 | ];
1150 | __vue_render__._withStripped = true;
1151 | 
1152 |   /* style */
1153 |   var __vue_inject_styles__ = function (inject) {
1154 |       if (!inject) {
1155 |           return
1156 |       }
1157 |       inject("data-v-994a7416_0", {
1158 |           source: "\n@media only screen and (min-width: 640px) {\n.thumbnail {\n    height: 300px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 768px) {\n.thumbnail {\n    height: 250px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1024px) {\n.thumbnail {\n    height: 200px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1280px) {\n.thumbnail {\n    height: 120px;\n    overflow: hidden;\n}\n}\n.mg-photo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n",
1159 |           map: {
1160 |               "version": 3,
1161 |               "sources": ["/Users/akashmitra/code/vue-image-browser/src/vue-image-browser.vue"],
1162 |               "names": [],
1163 |               "mappings": ";AAqgBA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;AACA",
1164 |               "file": "vue-image-browser.vue",
1165 |               "sourcesContent": ["<template>\n  <div class=\"w-full\">\n    <div\n      v-show=\"pane === 'gallery'\"\n      class=\"w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap\"\n      id=\"top-panel\"\n    >\n      <div class=\"flex-grow flex\">\n        <input\n          class=\"p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none\"\n          type=\"text\"\n          v-model=\"query\"\n          @keyup=\"doDelayedSearch\"\n          placeholder=\"search...\"\n        />\n        <div\n          class=\"hidden sm:flex relative pin-r rounded-r-lg border-r border-t border-b border-gray-300 bg-white py-1 px-2 items-center\"\n        >\n          <span\n            v-if=\"searchResult\"\n            class=\"py-1 px-2 bg-transparent rounded-lg text-xs whitespace-no-wrap\"\n            v-text=\"searchResult\"\n          ></span>\n        </div>\n      </div>\n      <div class=\"flex-none\" v-if=\"allowUpload\">\n        <button\n          class=\"text-white bg-blue-600 mx-2 px-4 py-2 rounded\"\n          title=\"Upload Image\"\n          @click=\"pane = 'upload'\"\n        >\n          Add Image\n        </button>\n      </div>\n    </div>\n\n    <div\n      v-show=\"pane === 'gallery'\"\n      class=\"w-full flex flex-wrap thumbnail-container overflow-y-scroll\"\n    >\n      <div\n        v-for=\"photo in images\"\n        :key=\"photo.id\"\n        :class=\"imagesPerRow\"\n        @click=\"select(photo)\"\n      >\n        <div\n          class=\"bg-white shadow mr-4 mb-4 cursor-pointer\"\n          :class=\"selectedPhoto.id === photo.id ? 'border border-blue-600' : ''\"\n        >\n          <div class=\"w-full flex items-center justify-center thumbnail\">\n            <img\n              v-bind:data-src=\"photo.url\"\n              :title=\"photo.name\"\n              class=\"mg-photo\"\n            />\n          </div>\n          <div\n            class=\"w-full flex bg-white justify-between text-gray-600 text-xs p-2\"\n          >\n            <span class=\"truncate\">{{ photo.name }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      v-if=\"pane === 'photo'\"\n      class=\"w-full mx-auto py-4 px-4 bg-transparent flex justify-between items-center\"\n    >\n      <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          class=\"fill-current h-8 w-8 rounded-full border border-gray-600 p-2 text-gray-600 mr-2\"\n        >\n          <polygon\n            points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\n          />\n        </svg>\n        <p class=\"text-blue-700 text-xl\">Back to Gallery</p>\n      </button>\n\n      <div class=\"flex items-center justify-between\">\n        <button\n          @click=\"copy\"\n          v-if=\"allowCopy\"\n          class=\"py-2 px-6 text-blue-600 hover:text-blue-800 mt-4 ml-4\"\n        >\n          {{ copyLinkText }}\n        </button>\n        <button\n          @click=\"choose\"\n          v-if=\"allowChoose\"\n          class=\"py-2 px-6 bg-green-500 text-white rounded shadow text-xl mt-4 ml-4\"\n        >\n          {{ chooseBtnText }}\n        </button>\n      </div>\n    </div>\n\n    <div v-if=\"pane === 'photo'\" class=\"w-full px-4 postcard-container\">\n      <div class=\"w-full postcard\">\n        <img\n          :src=\"selectedPhoto.url\"\n          :title=\"selectedPhoto.name\"\n          class=\"mx-auto shadow-lg mg-photo\"\n        />\n      </div>\n\n      <div class=\"w-full text-sm px-2 py-2 bg-white\">\n        <table class=\"w-full mt-4 table-auto\">\n          <tr class=\"border-b\" v-for=\"(pk, pv) in imageProperties\">\n            <td class=\"p-4 uppercase font-semibold text-gray-600\">\n              {{ pk.toUpperCase() }}\n            </td>\n            <td class=\"p-4 font-mono\">{{ selectedPhoto[pv] }}</td>\n          </tr>\n        </table>\n\n        <button\n          @click=\"deleteSelected()\"\n          v-if=\"allowDelete\"\n          class=\"text-red-500 border m-4 mt-6 px-4 text-sm py-1 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer\"\n        >\n          Delete\n        </button>\n      </div>\n    </div>\n\n    <div\n      v-if=\"pane === 'upload'\"\n      class=\"w-full p-4 postcard-container overflow-y-scroll\"\n    >\n      <div class=\"flex justify-between\">\n        <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            class=\"fill-current h-8 w-8 rounded-full border p-2 text-gray-600 mr-2\"\n          >\n            <polygon\n              points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\n            />\n          </svg>\n          <p class=\"text-gray-600 font-light text-lg hidden sm:block\">\n            Back to Gallery\n          </p>\n        </button>\n        <form id=\"file-catcher\" enctype=\"multipart/form-data\" method=\"post\">\n          <div class=\"w-full flex bg-transparent\">\n            <label\n              class=\"flex items-center px-4 py-2 rounded-lg border border-blue-500 bg-white text-blue-500 tracking-wide cursor-pointer hover:bg-blue-500 hover:text-white\"\n            >\n              <svg\n                class=\"w-8 h-8 mr-4\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n              >\n                <path\n                  d=\"M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z\"\n                />\n              </svg>\n              <p class=\"text-base leading-normal\">\n                Upload\n                <span class=\"hidden sm:inline\">From Local Computer</span>\n              </p>\n              <input\n                id=\"files\"\n                type=\"file\"\n                name=\"files\"\n                multiple\n                class=\"hidden\"\n                @change=\"uploadFiles\"\n              />\n            </label>\n          </div>\n        </form>\n      </div>\n      <div\n        id=\"file-list-display\"\n        class=\"w-full my-4\"\n        v-if=\"uploadableFiles.length > 0\"\n      >\n        <table class=\"w-full my-2 text-sm\">\n          <thead>\n            <tr class=\"bg-white text-left\">\n              <th class=\"p-2 font-light hidden md:block\">#</th>\n              <th class=\"p-2 font-light\">File Name</th>\n              <th class=\"p-2 font-light\">Status</th>\n              <th class=\"p-2 font-light\">Progress</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              class=\"p-2 border-b\"\n              v-for=\"(f, index) in uploadableFiles\"\n              v-bind:key=\"index\"\n            >\n              <td v-text=\"index + 1\" class=\"text-left p-2 hidden md:block\"></td>\n              <td class=\"text-left p-2\" v-text=\"f.name\"></td>\n              <td>\n                <span v-text=\"f.status\"></span>\n              </td>\n              <td>\n                <progress\n                  id=\"progressBar\"\n                  :value=\"f.completion\"\n                  max=\"100\"\n                  class=\"my-2 w-full\"\n                ></progress>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n\n    <div\n      class=\"p-2 bg-white w-full text-sm text-gray-600 rounded\"\n      id=\"message\"\n      v-if=\"message\"\n    >\n      <span v-text=\"message\"></span>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'vue-image-browser',\n\n  props: {\n    images: {\n      type: Array,\n      default: () => [],\n    },\n\n    imageProperties: {\n      type: Object,\n    },\n\n    allowUpload: {\n      type: Boolean,\n      default: false,\n    },\n\n    saveUrl: {\n      type: String,\n      default: '/api/photos',\n    },\n\n    saveRequestHeaders: {\n      type: Object,\n      default: () => {},\n    },\n\n    searchDelay: {\n      type: Number,\n      default: 500,\n    },\n\n    allowDelete: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowPhotoPane: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowChoose: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowCopy: {\n      type: Boolean,\n      default: true,\n    },\n\n    captionable: {\n      type: Boolean,\n      default: false,\n    },\n\n    enableLazyLoad: {\n      type: Boolean,\n      default: true,\n    },\n\n    maxImagesPerRow: {\n      type: Number,\n      default: 5,\n    },\n\n    postKey: {\n      type: String,\n      default: 'image',\n    },\n  },\n\n  data: function () {\n    return {\n      message: null,\n      query: '',\n      searchResult: null,\n      pane: 'gallery',\n      selectedPhoto: {},\n      uploadableFiles: [],\n      copyLinkText: 'Copy Link',\n      chooseBtnText: 'Choose',\n    }\n  },\n\n  created() {\n    this.$nextTick(function () {\n      if (this.enableLazyLoad) {\n        this.enableLazyLoading()\n      }\n    })\n  },\n\n  updated: function () {\n    this.$nextTick(function () {\n      if (this.enableLazyLoad) {\n        this.enableLazyLoading()\n      }\n    })\n  },\n\n  computed: {\n    imagesPerRow() {\n      let xs = parseInt(this.maxImagesPerRow * (1 / 4)),\n        md = parseInt(this.maxImagesPerRow * (2 / 4)),\n        lg = parseInt(this.maxImagesPerRow * (3 / 4)),\n        xl = parseInt(this.maxImagesPerRow * (4 / 4))\n\n      return (\n        'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl\n      )\n    },\n  },\n\n  methods: {\n    select(photo) {\n      this.selectedPhoto = photo\n\n      this.allowPhotoPane && (this.pane = 'photo')\n\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\n\n      this.$emit('selected', this.selectedPhoto)\n    },\n\n    choose: function () {\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\n\n      this.$emit('chosen', this.selectedPhoto)\n\n      this.pane = 'gallery'\n    },\n\n    copy() {\n      let p = this\n\n      if (navigator.clipboard) {\n        navigator.clipboard.writeText(this.selectedPhoto.url).then(() => {\n          p.copyLinkText = 'Link Copied!'\n        })\n      }\n    },\n\n    getCaption() {\n      // remove file name extensions\n      let caption = this.selectedPhoto.name.replace(/\\.[^/.]+$/, '')\n\n      // remove special characters with space\n      caption = caption.replace(/[^\\w\\s]/gi, ' ')\n\n      // uppercase first letter of each word\n      caption = caption\n        .toLowerCase()\n        .split(' ')\n        .map((s) => s.charAt(0).toUpperCase() + s.substring(1))\n        .join(' ')\n\n      return prompt('Enter an caption for this image', caption)\n    },\n\n    uploadFiles: function () {\n      let files = document.getElementById('files').files,\n        p = this\n\n      for (let i = 0; i < files.length; i++) {\n        let upf = {\n          name: files[i].name,\n          formdata: new FormData(),\n          ajax: new XMLHttpRequest(),\n          status: 'Not Started',\n          completion: 0,\n        }\n\n        upf.formdata.append(this.postKey, files[i])\n        upf.formdata.append('name', files[i].name)\n\n        upf.ajax.upload.onprogress = function (e) {\n          upf.status = 'Uploaded ' + Math.round(e.loaded / 1000) + ' KB...'\n          upf.completion = Math.round((e.loaded / e.total) * 100)\n        }\n        upf.ajax.upload.onload = function (e) {\n          upf.status = 'Complete'\n          upf.completion = 100\n        }\n        upf.ajax.upload.onerror = function (e) {\n          upf.status = 'Error uploading the file'\n          upf.completion = 0\n        }\n        // ajax.upload.addEventListener('abort', abortHandler, false);\n\n        upf.ajax.open('POST', p.saveUrl)\n\n        let header_keys = Object.keys(p.saveRequestHeaders)\n        for (let i = 0; i < header_keys.length; i++) {\n          let header = header_keys[i]\n          let val = p.saveRequestHeaders[header]\n          upf.ajax.setRequestHeader(header, val)\n        }\n\n        upf.ajax.onreadystatechange = function () {\n          if (upf.ajax.readyState === 4 && upf.ajax.status === 200) {\n            let response = upf.ajax.responseText\n            if (response) {\n              try {\n                let media = JSON.parse(response)\n                p.$emit('saved', media)\n              } catch (e) {\n                alert(e)\n              }\n            }\n          }\n          if (upf.ajax.readyState === 4 && upf.ajax.status != 200) {\n            upf.status =\n              'Error uploading the file (Status = ' + upf.ajax.status + ')'\n            upf.completion = 0\n          }\n        }\n        upf.ajax.send(upf.formdata)\n        this.uploadableFiles.push(upf)\n      }\n    },\n\n    deleteSelected() {\n      this.$emit('deleted', this.selectedPhoto)\n      this.pane = 'gallery'\n    },\n\n    doDelayedSearch() {\n      let p = this\n\n      if (this.timer) {\n        clearTimeout(this.timer)\n        this.timer = null\n      }\n\n      if (p.query.length > 0) p.searchResult = 'Searching...'\n      else p.searchResult = ''\n\n      this.timer = setTimeout(() => {\n        p.$emit('searched', p.query)\n      }, this.searchDelay)\n    },\n\n    // This is an experimental function that enables\n    // lazy-loading.\n    enableLazyLoading() {\n      let images = document.querySelectorAll('.mg-photo')\n\n      const config = {\n        root: null,\n        rootMargin: '0px 0px 50px 0px',\n      }\n\n      // check if intersection observer is supported via browser\n      if (!('IntersectionObserver' in window)) {\n        // if not, just load all immediately\n        Array.from(images).forEach(function (image) {\n          console.log('IntersectionObserver unsupported loading')\n          if (!image.src) image.src = image.dataset.src\n        })\n      } else {\n        let observer = new IntersectionObserver(function (entries) {\n          entries.forEach((image) => {\n            // Are we in viewport?\n            if (image.isIntersecting) {\n              // console.log('Loading: ' + image.target.dataset.src)\n              // console.log(image.target.src)\n              image.target.src = image.target.dataset.src\n              observer.unobserve(image.target)\n            }\n          })\n        }, config)\n\n        images.forEach((image) => {\n          if (!image.src) {\n            observer.observe(image)\n          }\n        })\n      }\n    },\n  },\n}\n</script>\n\n<style>\n@media only screen and (min-width: 640px) {\n  .thumbnail {\n    height: 300px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 768px) {\n  .thumbnail {\n    height: 250px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 1024px) {\n  .thumbnail {\n    height: 200px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 1280px) {\n  .thumbnail {\n    height: 120px;\n    overflow: hidden;\n  }\n}\n\n.mg-photo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n</style>\n"]
1166 |           },
1167 |           media: undefined
1168 |       });
1169 | 
1170 |   };
1171 |   /* scoped */
1172 |   var __vue_scope_id__ = undefined;
1173 |   /* module identifier */
1174 |   var __vue_module_identifier__ = undefined;
1175 |   /* functional template */
1176 |   var __vue_is_functional_template__ = false;
1177 |   /* style inject SSR */
1178 |   
1179 |   /* style inject shadow dom */
1180 |   
1181 | 
1182 |   
1183 |   var __vue_component__ = /*#__PURE__*/normalizeComponent(
1184 |     { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
1185 |     __vue_inject_styles__,
1186 |     __vue_script__,
1187 |     __vue_scope_id__,
1188 |     __vue_is_functional_template__,
1189 |     __vue_module_identifier__,
1190 |     false,
1191 |     createInjector,
1192 |     undefined,
1193 |     undefined
1194 |   );
1195 | 
1196 | // Import vue component
1197 | 
1198 | // Declare install function executed by Vue.use()
1199 | function install(Vue) {
1200 | 	if (install.installed) { return; }
1201 | 	install.installed = true;
1202 | 	Vue.component('VueImageBrowser', __vue_component__);
1203 | }
1204 | 
1205 | // Create module definition for Vue.use()
1206 | var plugin = {
1207 | 	install: install,
1208 | };
1209 | 
1210 | // Auto-install when vue is found (eg. in browser via <script> tag)
1211 | var GlobalVue = null;
1212 | if (typeof window !== 'undefined') {
1213 | 	GlobalVue = window.Vue;
1214 | } else if (typeof global !== 'undefined') {
1215 | 	GlobalVue = global.Vue;
1216 | }
1217 | if (GlobalVue) {
1218 | 	GlobalVue.use(plugin);
1219 | }
1220 | 
1221 | export default __vue_component__;
1222 | export { install };
1223 | 


--------------------------------------------------------------------------------
/dist/vue-image-browser.min.js:
--------------------------------------------------------------------------------
   1 | var VueImageBrowser = (function (exports) {
   2 |   'use strict';
   3 | 
   4 |   //
   5 |   //
   6 |   //
   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 |   //
  46 |   //
  47 |   //
  48 |   //
  49 |   //
  50 |   //
  51 |   //
  52 |   //
  53 |   //
  54 |   //
  55 |   //
  56 |   //
  57 |   //
  58 |   //
  59 |   //
  60 |   //
  61 |   //
  62 |   //
  63 |   //
  64 |   //
  65 |   //
  66 |   //
  67 |   //
  68 |   //
  69 |   //
  70 |   //
  71 |   //
  72 |   //
  73 |   //
  74 |   //
  75 |   //
  76 |   //
  77 |   //
  78 |   //
  79 |   //
  80 |   //
  81 |   //
  82 |   //
  83 |   //
  84 |   //
  85 |   //
  86 |   //
  87 |   //
  88 |   //
  89 |   //
  90 |   //
  91 |   //
  92 |   //
  93 |   //
  94 |   //
  95 |   //
  96 |   //
  97 |   //
  98 |   //
  99 |   //
 100 |   //
 101 |   //
 102 |   //
 103 |   //
 104 |   //
 105 |   //
 106 |   //
 107 |   //
 108 |   //
 109 |   //
 110 |   //
 111 |   //
 112 |   //
 113 |   //
 114 |   //
 115 |   //
 116 |   //
 117 |   //
 118 |   //
 119 |   //
 120 |   //
 121 |   //
 122 |   //
 123 |   //
 124 |   //
 125 |   //
 126 |   //
 127 |   //
 128 |   //
 129 |   //
 130 |   //
 131 |   //
 132 |   //
 133 |   //
 134 |   //
 135 |   //
 136 |   //
 137 |   //
 138 |   //
 139 |   //
 140 |   //
 141 |   //
 142 |   //
 143 |   //
 144 |   //
 145 |   //
 146 |   //
 147 |   //
 148 |   //
 149 |   //
 150 |   //
 151 |   //
 152 |   //
 153 |   //
 154 |   //
 155 |   //
 156 |   //
 157 |   //
 158 |   //
 159 |   //
 160 |   //
 161 |   //
 162 |   //
 163 |   //
 164 |   //
 165 |   //
 166 |   //
 167 |   //
 168 |   //
 169 |   //
 170 |   //
 171 |   //
 172 |   //
 173 |   //
 174 |   //
 175 |   //
 176 |   //
 177 |   //
 178 |   //
 179 |   //
 180 |   //
 181 |   //
 182 |   //
 183 |   //
 184 |   //
 185 |   //
 186 |   //
 187 |   //
 188 |   //
 189 |   //
 190 |   //
 191 |   //
 192 |   //
 193 |   //
 194 |   //
 195 |   //
 196 |   //
 197 |   //
 198 |   //
 199 |   //
 200 |   //
 201 |   //
 202 |   //
 203 |   //
 204 |   //
 205 |   //
 206 |   //
 207 |   //
 208 |   //
 209 |   //
 210 |   //
 211 |   //
 212 |   //
 213 |   //
 214 |   //
 215 |   //
 216 |   //
 217 |   //
 218 |   //
 219 |   //
 220 |   //
 221 |   //
 222 |   //
 223 |   //
 224 |   //
 225 |   //
 226 |   //
 227 |   //
 228 |   //
 229 |   //
 230 |   //
 231 |   //
 232 |   //
 233 | 
 234 |   var script = {
 235 |     name: 'vue-image-browser',
 236 | 
 237 |     props: {
 238 |       images: {
 239 |         type: Array,
 240 |         default: function () { return []; },
 241 |       },
 242 | 
 243 |       imageProperties: {
 244 |         type: Object,
 245 |       },
 246 | 
 247 |       allowUpload: {
 248 |         type: Boolean,
 249 |         default: false,
 250 |       },
 251 | 
 252 |       saveUrl: {
 253 |         type: String,
 254 |         default: '/api/photos',
 255 |       },
 256 | 
 257 |       saveRequestHeaders: {
 258 |         type: Object,
 259 |         default: function () {},
 260 |       },
 261 | 
 262 |       searchDelay: {
 263 |         type: Number,
 264 |         default: 500,
 265 |       },
 266 | 
 267 |       allowDelete: {
 268 |         type: Boolean,
 269 |         default: false,
 270 |       },
 271 | 
 272 |       allowPhotoPane: {
 273 |         type: Boolean,
 274 |         default: false,
 275 |       },
 276 | 
 277 |       allowChoose: {
 278 |         type: Boolean,
 279 |         default: false,
 280 |       },
 281 | 
 282 |       allowCopy: {
 283 |         type: Boolean,
 284 |         default: true,
 285 |       },
 286 | 
 287 |       captionable: {
 288 |         type: Boolean,
 289 |         default: false,
 290 |       },
 291 | 
 292 |       enableLazyLoad: {
 293 |         type: Boolean,
 294 |         default: true,
 295 |       },
 296 | 
 297 |       maxImagesPerRow: {
 298 |         type: Number,
 299 |         default: 5,
 300 |       },
 301 | 
 302 |       postKey: {
 303 |         type: String,
 304 |         default: 'image',
 305 |       },
 306 |     },
 307 | 
 308 |     data: function () {
 309 |       return {
 310 |         message: null,
 311 |         query: '',
 312 |         searchResult: null,
 313 |         pane: 'gallery',
 314 |         selectedPhoto: {},
 315 |         uploadableFiles: [],
 316 |         copyLinkText: 'Copy Link',
 317 |         chooseBtnText: 'Choose',
 318 |       }
 319 |     },
 320 | 
 321 |     created: function created() {
 322 |       this.$nextTick(function () {
 323 |         if (this.enableLazyLoad) {
 324 |           this.enableLazyLoading();
 325 |         }
 326 |       });
 327 |     },
 328 | 
 329 |     updated: function () {
 330 |       this.$nextTick(function () {
 331 |         if (this.enableLazyLoad) {
 332 |           this.enableLazyLoading();
 333 |         }
 334 |       });
 335 |     },
 336 | 
 337 |     computed: {
 338 |       imagesPerRow: function imagesPerRow() {
 339 |         var xs = parseInt(this.maxImagesPerRow * (1 / 4)),
 340 |           md = parseInt(this.maxImagesPerRow * (2 / 4)),
 341 |           lg = parseInt(this.maxImagesPerRow * (3 / 4)),
 342 |           xl = parseInt(this.maxImagesPerRow * (4 / 4));
 343 | 
 344 |         return (
 345 |           'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl
 346 |         )
 347 |       },
 348 |     },
 349 | 
 350 |     methods: {
 351 |       select: function select(photo) {
 352 |         this.selectedPhoto = photo;
 353 | 
 354 |         this.allowPhotoPane && (this.pane = 'photo');
 355 | 
 356 |         this.captionable && (this.selectedPhoto['caption'] = this.getCaption());
 357 | 
 358 |         this.$emit('selected', this.selectedPhoto);
 359 |       },
 360 | 
 361 |       choose: function () {
 362 |         this.captionable && (this.selectedPhoto['caption'] = this.getCaption());
 363 | 
 364 |         this.$emit('chosen', this.selectedPhoto);
 365 | 
 366 |         this.pane = 'gallery';
 367 |       },
 368 | 
 369 |       copy: function copy() {
 370 |         var p = this;
 371 | 
 372 |         if (navigator.clipboard) {
 373 |           navigator.clipboard.writeText(this.selectedPhoto.url).then(function () {
 374 |             p.copyLinkText = 'Link Copied!';
 375 |           });
 376 |         }
 377 |       },
 378 | 
 379 |       getCaption: function getCaption() {
 380 |         // remove file name extensions
 381 |         var caption = this.selectedPhoto.name.replace(/\.[^/.]+$/, '');
 382 | 
 383 |         // remove special characters with space
 384 |         caption = caption.replace(/[^\w\s]/gi, ' ');
 385 | 
 386 |         // uppercase first letter of each word
 387 |         caption = caption
 388 |           .toLowerCase()
 389 |           .split(' ')
 390 |           .map(function (s) { return s.charAt(0).toUpperCase() + s.substring(1); })
 391 |           .join(' ');
 392 | 
 393 |         return prompt('Enter an caption for this image', caption)
 394 |       },
 395 | 
 396 |       uploadFiles: function () {
 397 |         var this$1 = this;
 398 | 
 399 |         var files = document.getElementById('files').files,
 400 |           p = this;
 401 | 
 402 |         var loop = function ( i ) {
 403 |           var upf = {
 404 |             name: files[i].name,
 405 |             formdata: new FormData(),
 406 |             ajax: new XMLHttpRequest(),
 407 |             status: 'Not Started',
 408 |             completion: 0,
 409 |           };
 410 | 
 411 |           upf.formdata.append(this$1.postKey, files[i]);
 412 |           upf.formdata.append('name', files[i].name);
 413 | 
 414 |           upf.ajax.upload.onprogress = function (e) {
 415 |             upf.status = 'Uploaded ' + Math.round(e.loaded / 1000) + ' KB...';
 416 |             upf.completion = Math.round((e.loaded / e.total) * 100);
 417 |           };
 418 |           upf.ajax.upload.onload = function (e) {
 419 |             upf.status = 'Complete';
 420 |             upf.completion = 100;
 421 |           };
 422 |           upf.ajax.upload.onerror = function (e) {
 423 |             upf.status = 'Error uploading the file';
 424 |             upf.completion = 0;
 425 |           };
 426 |           // ajax.upload.addEventListener('abort', abortHandler, false);
 427 | 
 428 |           upf.ajax.open('POST', p.saveUrl);
 429 | 
 430 |           var header_keys = Object.keys(p.saveRequestHeaders);
 431 |           for (var i$1 = 0; i$1 < header_keys.length; i$1++) {
 432 |             var header = header_keys[i$1];
 433 |             var val = p.saveRequestHeaders[header];
 434 |             upf.ajax.setRequestHeader(header, val);
 435 |           }
 436 | 
 437 |           upf.ajax.onreadystatechange = function () {
 438 |             if (upf.ajax.readyState === 4 && upf.ajax.status === 200) {
 439 |               var response = upf.ajax.responseText;
 440 |               if (response) {
 441 |                 try {
 442 |                   var media = JSON.parse(response);
 443 |                   p.$emit('saved', media);
 444 |                 } catch (e) {
 445 |                   alert(e);
 446 |                 }
 447 |               }
 448 |             }
 449 |             if (upf.ajax.readyState === 4 && upf.ajax.status != 200) {
 450 |               upf.status =
 451 |                 'Error uploading the file (Status = ' + upf.ajax.status + ')';
 452 |               upf.completion = 0;
 453 |             }
 454 |           };
 455 |           upf.ajax.send(upf.formdata);
 456 |           this$1.uploadableFiles.push(upf);
 457 |         };
 458 | 
 459 |         for (var i = 0; i < files.length; i++) loop( i );
 460 |       },
 461 | 
 462 |       deleteSelected: function deleteSelected() {
 463 |         this.$emit('deleted', this.selectedPhoto);
 464 |         this.pane = 'gallery';
 465 |       },
 466 | 
 467 |       doDelayedSearch: function doDelayedSearch() {
 468 |         var p = this;
 469 | 
 470 |         if (this.timer) {
 471 |           clearTimeout(this.timer);
 472 |           this.timer = null;
 473 |         }
 474 | 
 475 |         if (p.query.length > 0) { p.searchResult = 'Searching...'; }
 476 |         else { p.searchResult = ''; }
 477 | 
 478 |         this.timer = setTimeout(function () {
 479 |           p.$emit('searched', p.query);
 480 |         }, this.searchDelay);
 481 |       },
 482 | 
 483 |       // This is an experimental function that enables
 484 |       // lazy-loading.
 485 |       enableLazyLoading: function enableLazyLoading() {
 486 |         var images = document.querySelectorAll('.mg-photo');
 487 | 
 488 |         var config = {
 489 |           root: null,
 490 |           rootMargin: '0px 0px 50px 0px',
 491 |         };
 492 | 
 493 |         // check if intersection observer is supported via browser
 494 |         if (!('IntersectionObserver' in window)) {
 495 |           // if not, just load all immediately
 496 |           Array.from(images).forEach(function (image) {
 497 |             console.log('IntersectionObserver unsupported loading');
 498 |             if (!image.src) { image.src = image.dataset.src; }
 499 |           });
 500 |         } else {
 501 |           var observer = new IntersectionObserver(function (entries) {
 502 |             entries.forEach(function (image) {
 503 |               // Are we in viewport?
 504 |               if (image.isIntersecting) {
 505 |                 // console.log('Loading: ' + image.target.dataset.src)
 506 |                 // console.log(image.target.src)
 507 |                 image.target.src = image.target.dataset.src;
 508 |                 observer.unobserve(image.target);
 509 |               }
 510 |             });
 511 |           }, config);
 512 | 
 513 |           images.forEach(function (image) {
 514 |             if (!image.src) {
 515 |               observer.observe(image);
 516 |             }
 517 |           });
 518 |         }
 519 |       },
 520 |     },
 521 |   };
 522 | 
 523 |   function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
 524 |       if (typeof shadowMode !== 'boolean') {
 525 |           createInjectorSSR = createInjector;
 526 |           createInjector = shadowMode;
 527 |           shadowMode = false;
 528 |       }
 529 |       // Vue.extend constructor export interop.
 530 |       var options = typeof script === 'function' ? script.options : script;
 531 |       // render functions
 532 |       if (template && template.render) {
 533 |           options.render = template.render;
 534 |           options.staticRenderFns = template.staticRenderFns;
 535 |           options._compiled = true;
 536 |           // functional template
 537 |           if (isFunctionalTemplate) {
 538 |               options.functional = true;
 539 |           }
 540 |       }
 541 |       // scopedId
 542 |       if (scopeId) {
 543 |           options._scopeId = scopeId;
 544 |       }
 545 |       var hook;
 546 |       if (moduleIdentifier) {
 547 |           // server build
 548 |           hook = function (context) {
 549 |               // 2.3 injection
 550 |               context =
 551 |                   context || // cached call
 552 |                       (this.$vnode && this.$vnode.ssrContext) || // stateful
 553 |                       (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
 554 |               // 2.2 with runInNewContext: true
 555 |               if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
 556 |                   context = __VUE_SSR_CONTEXT__;
 557 |               }
 558 |               // inject component styles
 559 |               if (style) {
 560 |                   style.call(this, createInjectorSSR(context));
 561 |               }
 562 |               // register component module identifier for async chunk inference
 563 |               if (context && context._registeredComponents) {
 564 |                   context._registeredComponents.add(moduleIdentifier);
 565 |               }
 566 |           };
 567 |           // used by ssr in case component is cached and beforeCreate
 568 |           // never gets called
 569 |           options._ssrRegister = hook;
 570 |       }
 571 |       else if (style) {
 572 |           hook = shadowMode
 573 |               ? function (context) {
 574 |                   style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
 575 |               }
 576 |               : function (context) {
 577 |                   style.call(this, createInjector(context));
 578 |               };
 579 |       }
 580 |       if (hook) {
 581 |           if (options.functional) {
 582 |               // register for functional component in vue file
 583 |               var originalRender = options.render;
 584 |               options.render = function renderWithStyleInjection(h, context) {
 585 |                   hook.call(context);
 586 |                   return originalRender(h, context);
 587 |               };
 588 |           }
 589 |           else {
 590 |               // inject component registration as beforeCreate hook
 591 |               var existing = options.beforeCreate;
 592 |               options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
 593 |           }
 594 |       }
 595 |       return script;
 596 |   }
 597 | 
 598 |   var isOldIE = typeof navigator !== 'undefined' &&
 599 |       /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
 600 |   function createInjector(context) {
 601 |       return function (id, style) { return addStyle(id, style); };
 602 |   }
 603 |   var HEAD;
 604 |   var styles = {};
 605 |   function addStyle(id, css) {
 606 |       var group = isOldIE ? css.media || 'default' : id;
 607 |       var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
 608 |       if (!style.ids.has(id)) {
 609 |           style.ids.add(id);
 610 |           var code = css.source;
 611 |           if (css.map) {
 612 |               // https://developer.chrome.com/devtools/docs/javascript-debugging
 613 |               // this makes source maps inside style tags work properly in Chrome
 614 |               code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
 615 |               // http://stackoverflow.com/a/26603875
 616 |               code +=
 617 |                   '\n/*# sourceMappingURL=data:application/json;base64,' +
 618 |                       btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
 619 |                       ' */';
 620 |           }
 621 |           if (!style.element) {
 622 |               style.element = document.createElement('style');
 623 |               style.element.type = 'text/css';
 624 |               if (css.media)
 625 |                   { style.element.setAttribute('media', css.media); }
 626 |               if (HEAD === undefined) {
 627 |                   HEAD = document.head || document.getElementsByTagName('head')[0];
 628 |               }
 629 |               HEAD.appendChild(style.element);
 630 |           }
 631 |           if ('styleSheet' in style.element) {
 632 |               style.styles.push(code);
 633 |               style.element.styleSheet.cssText = style.styles
 634 |                   .filter(Boolean)
 635 |                   .join('\n');
 636 |           }
 637 |           else {
 638 |               var index = style.ids.size - 1;
 639 |               var textNode = document.createTextNode(code);
 640 |               var nodes = style.element.childNodes;
 641 |               if (nodes[index])
 642 |                   { style.element.removeChild(nodes[index]); }
 643 |               if (nodes.length)
 644 |                   { style.element.insertBefore(textNode, nodes[index]); }
 645 |               else
 646 |                   { style.element.appendChild(textNode); }
 647 |           }
 648 |       }
 649 |   }
 650 | 
 651 |   /* script */
 652 |   var __vue_script__ = script;
 653 | 
 654 |   /* template */
 655 |   var __vue_render__ = function() {
 656 |     var _vm = this;
 657 |     var _h = _vm.$createElement;
 658 |     var _c = _vm._self._c || _h;
 659 |     return _c("div", { staticClass: "w-full" }, [
 660 |       _c(
 661 |         "div",
 662 |         {
 663 |           directives: [
 664 |             {
 665 |               name: "show",
 666 |               rawName: "v-show",
 667 |               value: _vm.pane === "gallery",
 668 |               expression: "pane === 'gallery'"
 669 |             }
 670 |           ],
 671 |           staticClass:
 672 |             "w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap",
 673 |           attrs: { id: "top-panel" }
 674 |         },
 675 |         [
 676 |           _c("div", { staticClass: "flex-grow flex" }, [
 677 |             _c("input", {
 678 |               directives: [
 679 |                 {
 680 |                   name: "model",
 681 |                   rawName: "v-model",
 682 |                   value: _vm.query,
 683 |                   expression: "query"
 684 |                 }
 685 |               ],
 686 |               staticClass:
 687 |                 "p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none",
 688 |               attrs: { type: "text", placeholder: "search..." },
 689 |               domProps: { value: _vm.query },
 690 |               on: {
 691 |                 keyup: _vm.doDelayedSearch,
 692 |                 input: function($event) {
 693 |                   if ($event.target.composing) {
 694 |                     return
 695 |                   }
 696 |                   _vm.query = $event.target.value;
 697 |                 }
 698 |               }
 699 |             }),
 700 |             _vm._v(" "),
 701 |             _c(
 702 |               "div",
 703 |               {
 704 |                 staticClass:
 705 |                   "hidden sm:flex relative pin-r rounded-r-lg border-r border-t border-b border-gray-300 bg-white py-1 px-2 items-center"
 706 |               },
 707 |               [
 708 |                 _vm.searchResult
 709 |                   ? _c("span", {
 710 |                       staticClass:
 711 |                         "py-1 px-2 bg-transparent rounded-lg text-xs whitespace-no-wrap",
 712 |                       domProps: { textContent: _vm._s(_vm.searchResult) }
 713 |                     })
 714 |                   : _vm._e()
 715 |               ]
 716 |             )
 717 |           ]),
 718 |           _vm._v(" "),
 719 |           _vm.allowUpload
 720 |             ? _c("div", { staticClass: "flex-none" }, [
 721 |                 _c(
 722 |                   "button",
 723 |                   {
 724 |                     staticClass: "text-white bg-blue-600 mx-2 px-4 py-2 rounded",
 725 |                     attrs: { title: "Upload Image" },
 726 |                     on: {
 727 |                       click: function($event) {
 728 |                         _vm.pane = "upload";
 729 |                       }
 730 |                     }
 731 |                   },
 732 |                   [_vm._v("\n        Add Image\n      ")]
 733 |                 )
 734 |               ])
 735 |             : _vm._e()
 736 |         ]
 737 |       ),
 738 |       _vm._v(" "),
 739 |       _c(
 740 |         "div",
 741 |         {
 742 |           directives: [
 743 |             {
 744 |               name: "show",
 745 |               rawName: "v-show",
 746 |               value: _vm.pane === "gallery",
 747 |               expression: "pane === 'gallery'"
 748 |             }
 749 |           ],
 750 |           staticClass:
 751 |             "w-full flex flex-wrap thumbnail-container overflow-y-scroll"
 752 |         },
 753 |         _vm._l(_vm.images, function(photo) {
 754 |           return _c(
 755 |             "div",
 756 |             {
 757 |               key: photo.id,
 758 |               class: _vm.imagesPerRow,
 759 |               on: {
 760 |                 click: function($event) {
 761 |                   return _vm.select(photo)
 762 |                 }
 763 |               }
 764 |             },
 765 |             [
 766 |               _c(
 767 |                 "div",
 768 |                 {
 769 |                   staticClass: "bg-white shadow mr-4 mb-4 cursor-pointer",
 770 |                   class:
 771 |                     _vm.selectedPhoto.id === photo.id
 772 |                       ? "border border-blue-600"
 773 |                       : ""
 774 |                 },
 775 |                 [
 776 |                   _c(
 777 |                     "div",
 778 |                     {
 779 |                       staticClass:
 780 |                         "w-full flex items-center justify-center thumbnail"
 781 |                     },
 782 |                     [
 783 |                       _c("img", {
 784 |                         staticClass: "mg-photo",
 785 |                         attrs: { "data-src": photo.url, title: photo.name }
 786 |                       })
 787 |                     ]
 788 |                   ),
 789 |                   _vm._v(" "),
 790 |                   _c(
 791 |                     "div",
 792 |                     {
 793 |                       staticClass:
 794 |                         "w-full flex bg-white justify-between text-gray-600 text-xs p-2"
 795 |                     },
 796 |                     [
 797 |                       _c("span", { staticClass: "truncate" }, [
 798 |                         _vm._v(_vm._s(photo.name))
 799 |                       ])
 800 |                     ]
 801 |                   )
 802 |                 ]
 803 |               )
 804 |             ]
 805 |           )
 806 |         }),
 807 |         0
 808 |       ),
 809 |       _vm._v(" "),
 810 |       _vm.pane === "photo"
 811 |         ? _c(
 812 |             "div",
 813 |             {
 814 |               staticClass:
 815 |                 "w-full mx-auto py-4 px-4 bg-transparent flex justify-between items-center"
 816 |             },
 817 |             [
 818 |               _c(
 819 |                 "button",
 820 |                 {
 821 |                   staticClass: "flex items-center",
 822 |                   on: {
 823 |                     click: function($event) {
 824 |                       _vm.pane = "gallery";
 825 |                     }
 826 |                   }
 827 |                 },
 828 |                 [
 829 |                   _c(
 830 |                     "svg",
 831 |                     {
 832 |                       staticClass:
 833 |                         "fill-current h-8 w-8 rounded-full border border-gray-600 p-2 text-gray-600 mr-2",
 834 |                       attrs: {
 835 |                         xmlns: "http://www.w3.org/2000/svg",
 836 |                         viewBox: "0 0 20 20"
 837 |                       }
 838 |                     },
 839 |                     [
 840 |                       _c("polygon", {
 841 |                         attrs: {
 842 |                           points:
 843 |                             "3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9"
 844 |                         }
 845 |                       })
 846 |                     ]
 847 |                   ),
 848 |                   _vm._v(" "),
 849 |                   _c("p", { staticClass: "text-blue-700 text-xl" }, [
 850 |                     _vm._v("Back to Gallery")
 851 |                   ])
 852 |                 ]
 853 |               ),
 854 |               _vm._v(" "),
 855 |               _c("div", { staticClass: "flex items-center justify-between" }, [
 856 |                 _vm.allowCopy
 857 |                   ? _c(
 858 |                       "button",
 859 |                       {
 860 |                         staticClass:
 861 |                           "py-2 px-6 text-blue-600 hover:text-blue-800 mt-4 ml-4",
 862 |                         on: { click: _vm.copy }
 863 |                       },
 864 |                       [
 865 |                         _vm._v(
 866 |                           "\n        " + _vm._s(_vm.copyLinkText) + "\n      "
 867 |                         )
 868 |                       ]
 869 |                     )
 870 |                   : _vm._e(),
 871 |                 _vm._v(" "),
 872 |                 _vm.allowChoose
 873 |                   ? _c(
 874 |                       "button",
 875 |                       {
 876 |                         staticClass:
 877 |                           "py-2 px-6 bg-green-500 text-white rounded shadow text-xl mt-4 ml-4",
 878 |                         on: { click: _vm.choose }
 879 |                       },
 880 |                       [
 881 |                         _vm._v(
 882 |                           "\n        " + _vm._s(_vm.chooseBtnText) + "\n      "
 883 |                         )
 884 |                       ]
 885 |                     )
 886 |                   : _vm._e()
 887 |               ])
 888 |             ]
 889 |           )
 890 |         : _vm._e(),
 891 |       _vm._v(" "),
 892 |       _vm.pane === "photo"
 893 |         ? _c("div", { staticClass: "w-full px-4 postcard-container" }, [
 894 |             _c("div", { staticClass: "w-full postcard" }, [
 895 |               _c("img", {
 896 |                 staticClass: "mx-auto shadow-lg mg-photo",
 897 |                 attrs: {
 898 |                   src: _vm.selectedPhoto.url,
 899 |                   title: _vm.selectedPhoto.name
 900 |                 }
 901 |               })
 902 |             ]),
 903 |             _vm._v(" "),
 904 |             _c("div", { staticClass: "w-full text-sm px-2 py-2 bg-white" }, [
 905 |               _c(
 906 |                 "table",
 907 |                 { staticClass: "w-full mt-4 table-auto" },
 908 |                 _vm._l(_vm.imageProperties, function(pk, pv) {
 909 |                   return _c("tr", { staticClass: "border-b" }, [
 910 |                     _c(
 911 |                       "td",
 912 |                       {
 913 |                         staticClass: "p-4 uppercase font-semibold text-gray-600"
 914 |                       },
 915 |                       [
 916 |                         _vm._v(
 917 |                           "\n            " +
 918 |                             _vm._s(pk.toUpperCase()) +
 919 |                             "\n          "
 920 |                         )
 921 |                       ]
 922 |                     ),
 923 |                     _vm._v(" "),
 924 |                     _c("td", { staticClass: "p-4 font-mono" }, [
 925 |                       _vm._v(_vm._s(_vm.selectedPhoto[pv]))
 926 |                     ])
 927 |                   ])
 928 |                 }),
 929 |                 0
 930 |               ),
 931 |               _vm._v(" "),
 932 |               _vm.allowDelete
 933 |                 ? _c(
 934 |                     "button",
 935 |                     {
 936 |                       staticClass:
 937 |                         "text-red-500 border m-4 mt-6 px-4 text-sm py-1 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer",
 938 |                       on: {
 939 |                         click: function($event) {
 940 |                           return _vm.deleteSelected()
 941 |                         }
 942 |                       }
 943 |                     },
 944 |                     [_vm._v("\n        Delete\n      ")]
 945 |                   )
 946 |                 : _vm._e()
 947 |             ])
 948 |           ])
 949 |         : _vm._e(),
 950 |       _vm._v(" "),
 951 |       _vm.pane === "upload"
 952 |         ? _c(
 953 |             "div",
 954 |             { staticClass: "w-full p-4 postcard-container overflow-y-scroll" },
 955 |             [
 956 |               _c("div", { staticClass: "flex justify-between" }, [
 957 |                 _c(
 958 |                   "button",
 959 |                   {
 960 |                     staticClass: "flex items-center",
 961 |                     on: {
 962 |                       click: function($event) {
 963 |                         _vm.pane = "gallery";
 964 |                       }
 965 |                     }
 966 |                   },
 967 |                   [
 968 |                     _c(
 969 |                       "svg",
 970 |                       {
 971 |                         staticClass:
 972 |                           "fill-current h-8 w-8 rounded-full border p-2 text-gray-600 mr-2",
 973 |                         attrs: {
 974 |                           xmlns: "http://www.w3.org/2000/svg",
 975 |                           viewBox: "0 0 20 20"
 976 |                         }
 977 |                       },
 978 |                       [
 979 |                         _c("polygon", {
 980 |                           attrs: {
 981 |                             points:
 982 |                               "3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9"
 983 |                           }
 984 |                         })
 985 |                       ]
 986 |                     ),
 987 |                     _vm._v(" "),
 988 |                     _c(
 989 |                       "p",
 990 |                       {
 991 |                         staticClass:
 992 |                           "text-gray-600 font-light text-lg hidden sm:block"
 993 |                       },
 994 |                       [_vm._v("\n          Back to Gallery\n        ")]
 995 |                     )
 996 |                   ]
 997 |                 ),
 998 |                 _vm._v(" "),
 999 |                 _c(
1000 |                   "form",
1001 |                   {
1002 |                     attrs: {
1003 |                       id: "file-catcher",
1004 |                       enctype: "multipart/form-data",
1005 |                       method: "post"
1006 |                     }
1007 |                   },
1008 |                   [
1009 |                     _c("div", { staticClass: "w-full flex bg-transparent" }, [
1010 |                       _c(
1011 |                         "label",
1012 |                         {
1013 |                           staticClass:
1014 |                             "flex items-center px-4 py-2 rounded-lg border border-blue-500 bg-white text-blue-500 tracking-wide cursor-pointer hover:bg-blue-500 hover:text-white"
1015 |                         },
1016 |                         [
1017 |                           _c(
1018 |                             "svg",
1019 |                             {
1020 |                               staticClass: "w-8 h-8 mr-4",
1021 |                               attrs: {
1022 |                                 fill: "currentColor",
1023 |                                 xmlns: "http://www.w3.org/2000/svg",
1024 |                                 viewBox: "0 0 20 20"
1025 |                               }
1026 |                             },
1027 |                             [
1028 |                               _c("path", {
1029 |                                 attrs: {
1030 |                                   d:
1031 |                                     "M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z"
1032 |                                 }
1033 |                               })
1034 |                             ]
1035 |                           ),
1036 |                           _vm._v(" "),
1037 |                           _vm._m(0),
1038 |                           _vm._v(" "),
1039 |                           _c("input", {
1040 |                             staticClass: "hidden",
1041 |                             attrs: {
1042 |                               id: "files",
1043 |                               type: "file",
1044 |                               name: "files",
1045 |                               multiple: ""
1046 |                             },
1047 |                             on: { change: _vm.uploadFiles }
1048 |                           })
1049 |                         ]
1050 |                       )
1051 |                     ])
1052 |                   ]
1053 |                 )
1054 |               ]),
1055 |               _vm._v(" "),
1056 |               _vm.uploadableFiles.length > 0
1057 |                 ? _c(
1058 |                     "div",
1059 |                     {
1060 |                       staticClass: "w-full my-4",
1061 |                       attrs: { id: "file-list-display" }
1062 |                     },
1063 |                     [
1064 |                       _c("table", { staticClass: "w-full my-2 text-sm" }, [
1065 |                         _vm._m(1),
1066 |                         _vm._v(" "),
1067 |                         _c(
1068 |                           "tbody",
1069 |                           _vm._l(_vm.uploadableFiles, function(f, index) {
1070 |                             return _c(
1071 |                               "tr",
1072 |                               { key: index, staticClass: "p-2 border-b" },
1073 |                               [
1074 |                                 _c("td", {
1075 |                                   staticClass: "text-left p-2 hidden md:block",
1076 |                                   domProps: { textContent: _vm._s(index + 1) }
1077 |                                 }),
1078 |                                 _vm._v(" "),
1079 |                                 _c("td", {
1080 |                                   staticClass: "text-left p-2",
1081 |                                   domProps: { textContent: _vm._s(f.name) }
1082 |                                 }),
1083 |                                 _vm._v(" "),
1084 |                                 _c("td", [
1085 |                                   _c("span", {
1086 |                                     domProps: { textContent: _vm._s(f.status) }
1087 |                                   })
1088 |                                 ]),
1089 |                                 _vm._v(" "),
1090 |                                 _c("td", [
1091 |                                   _c("progress", {
1092 |                                     staticClass: "my-2 w-full",
1093 |                                     attrs: { id: "progressBar", max: "100" },
1094 |                                     domProps: { value: f.completion }
1095 |                                   })
1096 |                                 ])
1097 |                               ]
1098 |                             )
1099 |                           }),
1100 |                           0
1101 |                         )
1102 |                       ])
1103 |                     ]
1104 |                   )
1105 |                 : _vm._e()
1106 |             ]
1107 |           )
1108 |         : _vm._e(),
1109 |       _vm._v(" "),
1110 |       _vm.message
1111 |         ? _c(
1112 |             "div",
1113 |             {
1114 |               staticClass: "p-2 bg-white w-full text-sm text-gray-600 rounded",
1115 |               attrs: { id: "message" }
1116 |             },
1117 |             [_c("span", { domProps: { textContent: _vm._s(_vm.message) } })]
1118 |           )
1119 |         : _vm._e()
1120 |     ])
1121 |   };
1122 |   var __vue_staticRenderFns__ = [
1123 |     function() {
1124 |       var _vm = this;
1125 |       var _h = _vm.$createElement;
1126 |       var _c = _vm._self._c || _h;
1127 |       return _c("p", { staticClass: "text-base leading-normal" }, [
1128 |         _vm._v("\n              Upload\n              "),
1129 |         _c("span", { staticClass: "hidden sm:inline" }, [
1130 |           _vm._v("From Local Computer")
1131 |         ])
1132 |       ])
1133 |     },
1134 |     function() {
1135 |       var _vm = this;
1136 |       var _h = _vm.$createElement;
1137 |       var _c = _vm._self._c || _h;
1138 |       return _c("thead", [
1139 |         _c("tr", { staticClass: "bg-white text-left" }, [
1140 |           _c("th", { staticClass: "p-2 font-light hidden md:block" }, [
1141 |             _vm._v("#")
1142 |           ]),
1143 |           _vm._v(" "),
1144 |           _c("th", { staticClass: "p-2 font-light" }, [_vm._v("File Name")]),
1145 |           _vm._v(" "),
1146 |           _c("th", { staticClass: "p-2 font-light" }, [_vm._v("Status")]),
1147 |           _vm._v(" "),
1148 |           _c("th", { staticClass: "p-2 font-light" }, [_vm._v("Progress")])
1149 |         ])
1150 |       ])
1151 |     }
1152 |   ];
1153 |   __vue_render__._withStripped = true;
1154 | 
1155 |     /* style */
1156 |     var __vue_inject_styles__ = function (inject) {
1157 |       if (!inject) { return }
1158 |       inject("data-v-994a7416_0", { source: "\n@media only screen and (min-width: 640px) {\n.thumbnail {\n    height: 300px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 768px) {\n.thumbnail {\n    height: 250px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1024px) {\n.thumbnail {\n    height: 200px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1280px) {\n.thumbnail {\n    height: 120px;\n    overflow: hidden;\n}\n}\n.mg-photo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n", map: {"version":3,"sources":["/Users/akashmitra/code/vue-image-browser/src/vue-image-browser.vue"],"names":[],"mappings":";AAqgBA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;AACA","file":"vue-image-browser.vue","sourcesContent":["<template>\n  <div class=\"w-full\">\n    <div\n      v-show=\"pane === 'gallery'\"\n      class=\"w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap\"\n      id=\"top-panel\"\n    >\n      <div class=\"flex-grow flex\">\n        <input\n          class=\"p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none\"\n          type=\"text\"\n          v-model=\"query\"\n          @keyup=\"doDelayedSearch\"\n          placeholder=\"search...\"\n        />\n        <div\n          class=\"hidden sm:flex relative pin-r rounded-r-lg border-r border-t border-b border-gray-300 bg-white py-1 px-2 items-center\"\n        >\n          <span\n            v-if=\"searchResult\"\n            class=\"py-1 px-2 bg-transparent rounded-lg text-xs whitespace-no-wrap\"\n            v-text=\"searchResult\"\n          ></span>\n        </div>\n      </div>\n      <div class=\"flex-none\" v-if=\"allowUpload\">\n        <button\n          class=\"text-white bg-blue-600 mx-2 px-4 py-2 rounded\"\n          title=\"Upload Image\"\n          @click=\"pane = 'upload'\"\n        >\n          Add Image\n        </button>\n      </div>\n    </div>\n\n    <div\n      v-show=\"pane === 'gallery'\"\n      class=\"w-full flex flex-wrap thumbnail-container overflow-y-scroll\"\n    >\n      <div\n        v-for=\"photo in images\"\n        :key=\"photo.id\"\n        :class=\"imagesPerRow\"\n        @click=\"select(photo)\"\n      >\n        <div\n          class=\"bg-white shadow mr-4 mb-4 cursor-pointer\"\n          :class=\"selectedPhoto.id === photo.id ? 'border border-blue-600' : ''\"\n        >\n          <div class=\"w-full flex items-center justify-center thumbnail\">\n            <img\n              v-bind:data-src=\"photo.url\"\n              :title=\"photo.name\"\n              class=\"mg-photo\"\n            />\n          </div>\n          <div\n            class=\"w-full flex bg-white justify-between text-gray-600 text-xs p-2\"\n          >\n            <span class=\"truncate\">{{ photo.name }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      v-if=\"pane === 'photo'\"\n      class=\"w-full mx-auto py-4 px-4 bg-transparent flex justify-between items-center\"\n    >\n      <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          class=\"fill-current h-8 w-8 rounded-full border border-gray-600 p-2 text-gray-600 mr-2\"\n        >\n          <polygon\n            points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\n          />\n        </svg>\n        <p class=\"text-blue-700 text-xl\">Back to Gallery</p>\n      </button>\n\n      <div class=\"flex items-center justify-between\">\n        <button\n          @click=\"copy\"\n          v-if=\"allowCopy\"\n          class=\"py-2 px-6 text-blue-600 hover:text-blue-800 mt-4 ml-4\"\n        >\n          {{ copyLinkText }}\n        </button>\n        <button\n          @click=\"choose\"\n          v-if=\"allowChoose\"\n          class=\"py-2 px-6 bg-green-500 text-white rounded shadow text-xl mt-4 ml-4\"\n        >\n          {{ chooseBtnText }}\n        </button>\n      </div>\n    </div>\n\n    <div v-if=\"pane === 'photo'\" class=\"w-full px-4 postcard-container\">\n      <div class=\"w-full postcard\">\n        <img\n          :src=\"selectedPhoto.url\"\n          :title=\"selectedPhoto.name\"\n          class=\"mx-auto shadow-lg mg-photo\"\n        />\n      </div>\n\n      <div class=\"w-full text-sm px-2 py-2 bg-white\">\n        <table class=\"w-full mt-4 table-auto\">\n          <tr class=\"border-b\" v-for=\"(pk, pv) in imageProperties\">\n            <td class=\"p-4 uppercase font-semibold text-gray-600\">\n              {{ pk.toUpperCase() }}\n            </td>\n            <td class=\"p-4 font-mono\">{{ selectedPhoto[pv] }}</td>\n          </tr>\n        </table>\n\n        <button\n          @click=\"deleteSelected()\"\n          v-if=\"allowDelete\"\n          class=\"text-red-500 border m-4 mt-6 px-4 text-sm py-1 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer\"\n        >\n          Delete\n        </button>\n      </div>\n    </div>\n\n    <div\n      v-if=\"pane === 'upload'\"\n      class=\"w-full p-4 postcard-container overflow-y-scroll\"\n    >\n      <div class=\"flex justify-between\">\n        <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            class=\"fill-current h-8 w-8 rounded-full border p-2 text-gray-600 mr-2\"\n          >\n            <polygon\n              points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\n            />\n          </svg>\n          <p class=\"text-gray-600 font-light text-lg hidden sm:block\">\n            Back to Gallery\n          </p>\n        </button>\n        <form id=\"file-catcher\" enctype=\"multipart/form-data\" method=\"post\">\n          <div class=\"w-full flex bg-transparent\">\n            <label\n              class=\"flex items-center px-4 py-2 rounded-lg border border-blue-500 bg-white text-blue-500 tracking-wide cursor-pointer hover:bg-blue-500 hover:text-white\"\n            >\n              <svg\n                class=\"w-8 h-8 mr-4\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n              >\n                <path\n                  d=\"M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z\"\n                />\n              </svg>\n              <p class=\"text-base leading-normal\">\n                Upload\n                <span class=\"hidden sm:inline\">From Local Computer</span>\n              </p>\n              <input\n                id=\"files\"\n                type=\"file\"\n                name=\"files\"\n                multiple\n                class=\"hidden\"\n                @change=\"uploadFiles\"\n              />\n            </label>\n          </div>\n        </form>\n      </div>\n      <div\n        id=\"file-list-display\"\n        class=\"w-full my-4\"\n        v-if=\"uploadableFiles.length > 0\"\n      >\n        <table class=\"w-full my-2 text-sm\">\n          <thead>\n            <tr class=\"bg-white text-left\">\n              <th class=\"p-2 font-light hidden md:block\">#</th>\n              <th class=\"p-2 font-light\">File Name</th>\n              <th class=\"p-2 font-light\">Status</th>\n              <th class=\"p-2 font-light\">Progress</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              class=\"p-2 border-b\"\n              v-for=\"(f, index) in uploadableFiles\"\n              v-bind:key=\"index\"\n            >\n              <td v-text=\"index + 1\" class=\"text-left p-2 hidden md:block\"></td>\n              <td class=\"text-left p-2\" v-text=\"f.name\"></td>\n              <td>\n                <span v-text=\"f.status\"></span>\n              </td>\n              <td>\n                <progress\n                  id=\"progressBar\"\n                  :value=\"f.completion\"\n                  max=\"100\"\n                  class=\"my-2 w-full\"\n                ></progress>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n\n    <div\n      class=\"p-2 bg-white w-full text-sm text-gray-600 rounded\"\n      id=\"message\"\n      v-if=\"message\"\n    >\n      <span v-text=\"message\"></span>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'vue-image-browser',\n\n  props: {\n    images: {\n      type: Array,\n      default: () => [],\n    },\n\n    imageProperties: {\n      type: Object,\n    },\n\n    allowUpload: {\n      type: Boolean,\n      default: false,\n    },\n\n    saveUrl: {\n      type: String,\n      default: '/api/photos',\n    },\n\n    saveRequestHeaders: {\n      type: Object,\n      default: () => {},\n    },\n\n    searchDelay: {\n      type: Number,\n      default: 500,\n    },\n\n    allowDelete: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowPhotoPane: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowChoose: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowCopy: {\n      type: Boolean,\n      default: true,\n    },\n\n    captionable: {\n      type: Boolean,\n      default: false,\n    },\n\n    enableLazyLoad: {\n      type: Boolean,\n      default: true,\n    },\n\n    maxImagesPerRow: {\n      type: Number,\n      default: 5,\n    },\n\n    postKey: {\n      type: String,\n      default: 'image',\n    },\n  },\n\n  data: function () {\n    return {\n      message: null,\n      query: '',\n      searchResult: null,\n      pane: 'gallery',\n      selectedPhoto: {},\n      uploadableFiles: [],\n      copyLinkText: 'Copy Link',\n      chooseBtnText: 'Choose',\n    }\n  },\n\n  created() {\n    this.$nextTick(function () {\n      if (this.enableLazyLoad) {\n        this.enableLazyLoading()\n      }\n    })\n  },\n\n  updated: function () {\n    this.$nextTick(function () {\n      if (this.enableLazyLoad) {\n        this.enableLazyLoading()\n      }\n    })\n  },\n\n  computed: {\n    imagesPerRow() {\n      let xs = parseInt(this.maxImagesPerRow * (1 / 4)),\n        md = parseInt(this.maxImagesPerRow * (2 / 4)),\n        lg = parseInt(this.maxImagesPerRow * (3 / 4)),\n        xl = parseInt(this.maxImagesPerRow * (4 / 4))\n\n      return (\n        'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl\n      )\n    },\n  },\n\n  methods: {\n    select(photo) {\n      this.selectedPhoto = photo\n\n      this.allowPhotoPane && (this.pane = 'photo')\n\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\n\n      this.$emit('selected', this.selectedPhoto)\n    },\n\n    choose: function () {\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\n\n      this.$emit('chosen', this.selectedPhoto)\n\n      this.pane = 'gallery'\n    },\n\n    copy() {\n      let p = this\n\n      if (navigator.clipboard) {\n        navigator.clipboard.writeText(this.selectedPhoto.url).then(() => {\n          p.copyLinkText = 'Link Copied!'\n        })\n      }\n    },\n\n    getCaption() {\n      // remove file name extensions\n      let caption = this.selectedPhoto.name.replace(/\\.[^/.]+$/, '')\n\n      // remove special characters with space\n      caption = caption.replace(/[^\\w\\s]/gi, ' ')\n\n      // uppercase first letter of each word\n      caption = caption\n        .toLowerCase()\n        .split(' ')\n        .map((s) => s.charAt(0).toUpperCase() + s.substring(1))\n        .join(' ')\n\n      return prompt('Enter an caption for this image', caption)\n    },\n\n    uploadFiles: function () {\n      let files = document.getElementById('files').files,\n        p = this\n\n      for (let i = 0; i < files.length; i++) {\n        let upf = {\n          name: files[i].name,\n          formdata: new FormData(),\n          ajax: new XMLHttpRequest(),\n          status: 'Not Started',\n          completion: 0,\n        }\n\n        upf.formdata.append(this.postKey, files[i])\n        upf.formdata.append('name', files[i].name)\n\n        upf.ajax.upload.onprogress = function (e) {\n          upf.status = 'Uploaded ' + Math.round(e.loaded / 1000) + ' KB...'\n          upf.completion = Math.round((e.loaded / e.total) * 100)\n        }\n        upf.ajax.upload.onload = function (e) {\n          upf.status = 'Complete'\n          upf.completion = 100\n        }\n        upf.ajax.upload.onerror = function (e) {\n          upf.status = 'Error uploading the file'\n          upf.completion = 0\n        }\n        // ajax.upload.addEventListener('abort', abortHandler, false);\n\n        upf.ajax.open('POST', p.saveUrl)\n\n        let header_keys = Object.keys(p.saveRequestHeaders)\n        for (let i = 0; i < header_keys.length; i++) {\n          let header = header_keys[i]\n          let val = p.saveRequestHeaders[header]\n          upf.ajax.setRequestHeader(header, val)\n        }\n\n        upf.ajax.onreadystatechange = function () {\n          if (upf.ajax.readyState === 4 && upf.ajax.status === 200) {\n            let response = upf.ajax.responseText\n            if (response) {\n              try {\n                let media = JSON.parse(response)\n                p.$emit('saved', media)\n              } catch (e) {\n                alert(e)\n              }\n            }\n          }\n          if (upf.ajax.readyState === 4 && upf.ajax.status != 200) {\n            upf.status =\n              'Error uploading the file (Status = ' + upf.ajax.status + ')'\n            upf.completion = 0\n          }\n        }\n        upf.ajax.send(upf.formdata)\n        this.uploadableFiles.push(upf)\n      }\n    },\n\n    deleteSelected() {\n      this.$emit('deleted', this.selectedPhoto)\n      this.pane = 'gallery'\n    },\n\n    doDelayedSearch() {\n      let p = this\n\n      if (this.timer) {\n        clearTimeout(this.timer)\n        this.timer = null\n      }\n\n      if (p.query.length > 0) p.searchResult = 'Searching...'\n      else p.searchResult = ''\n\n      this.timer = setTimeout(() => {\n        p.$emit('searched', p.query)\n      }, this.searchDelay)\n    },\n\n    // This is an experimental function that enables\n    // lazy-loading.\n    enableLazyLoading() {\n      let images = document.querySelectorAll('.mg-photo')\n\n      const config = {\n        root: null,\n        rootMargin: '0px 0px 50px 0px',\n      }\n\n      // check if intersection observer is supported via browser\n      if (!('IntersectionObserver' in window)) {\n        // if not, just load all immediately\n        Array.from(images).forEach(function (image) {\n          console.log('IntersectionObserver unsupported loading')\n          if (!image.src) image.src = image.dataset.src\n        })\n      } else {\n        let observer = new IntersectionObserver(function (entries) {\n          entries.forEach((image) => {\n            // Are we in viewport?\n            if (image.isIntersecting) {\n              // console.log('Loading: ' + image.target.dataset.src)\n              // console.log(image.target.src)\n              image.target.src = image.target.dataset.src\n              observer.unobserve(image.target)\n            }\n          })\n        }, config)\n\n        images.forEach((image) => {\n          if (!image.src) {\n            observer.observe(image)\n          }\n        })\n      }\n    },\n  },\n}\n</script>\n\n<style>\n@media only screen and (min-width: 640px) {\n  .thumbnail {\n    height: 300px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 768px) {\n  .thumbnail {\n    height: 250px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 1024px) {\n  .thumbnail {\n    height: 200px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 1280px) {\n  .thumbnail {\n    height: 120px;\n    overflow: hidden;\n  }\n}\n\n.mg-photo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n</style>\n"]}, media: undefined });
1159 | 
1160 |     };
1161 |     /* scoped */
1162 |     var __vue_scope_id__ = undefined;
1163 |     /* module identifier */
1164 |     var __vue_module_identifier__ = undefined;
1165 |     /* functional template */
1166 |     var __vue_is_functional_template__ = false;
1167 |     /* style inject SSR */
1168 |     
1169 |     /* style inject shadow dom */
1170 |     
1171 | 
1172 |     
1173 |     var __vue_component__ = /*#__PURE__*/normalizeComponent(
1174 |       { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
1175 |       __vue_inject_styles__,
1176 |       __vue_script__,
1177 |       __vue_scope_id__,
1178 |       __vue_is_functional_template__,
1179 |       __vue_module_identifier__,
1180 |       false,
1181 |       createInjector,
1182 |       undefined,
1183 |       undefined
1184 |     );
1185 | 
1186 |   // Import vue component
1187 | 
1188 |   // Declare install function executed by Vue.use()
1189 |   function install(Vue) {
1190 |   	if (install.installed) { return; }
1191 |   	install.installed = true;
1192 |   	Vue.component('VueImageBrowser', __vue_component__);
1193 |   }
1194 | 
1195 |   // Create module definition for Vue.use()
1196 |   var plugin = {
1197 |   	install: install,
1198 |   };
1199 | 
1200 |   // Auto-install when vue is found (eg. in browser via <script> tag)
1201 |   var GlobalVue = null;
1202 |   if (typeof window !== 'undefined') {
1203 |   	GlobalVue = window.Vue;
1204 |   } else if (typeof global !== 'undefined') {
1205 |   	GlobalVue = global.Vue;
1206 |   }
1207 |   if (GlobalVue) {
1208 |   	GlobalVue.use(plugin);
1209 |   }
1210 | 
1211 |   exports.default = __vue_component__;
1212 |   exports.install = install;
1213 | 
1214 |   Object.defineProperty(exports, '__esModule', { value: true });
1215 | 
1216 |   return exports;
1217 | 
1218 | }({}));
1219 | 


--------------------------------------------------------------------------------
/dist/vue-image-browser.umd.js:
--------------------------------------------------------------------------------
   1 | (function (global, factory) {
   2 |   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
   3 |   typeof define === 'function' && define.amd ? define(['exports'], factory) :
   4 |   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VueImageBrowser = {}));
   5 | }(this, (function (exports) { 'use strict';
   6 | 
   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 |   //
  46 |   //
  47 |   //
  48 |   //
  49 |   //
  50 |   //
  51 |   //
  52 |   //
  53 |   //
  54 |   //
  55 |   //
  56 |   //
  57 |   //
  58 |   //
  59 |   //
  60 |   //
  61 |   //
  62 |   //
  63 |   //
  64 |   //
  65 |   //
  66 |   //
  67 |   //
  68 |   //
  69 |   //
  70 |   //
  71 |   //
  72 |   //
  73 |   //
  74 |   //
  75 |   //
  76 |   //
  77 |   //
  78 |   //
  79 |   //
  80 |   //
  81 |   //
  82 |   //
  83 |   //
  84 |   //
  85 |   //
  86 |   //
  87 |   //
  88 |   //
  89 |   //
  90 |   //
  91 |   //
  92 |   //
  93 |   //
  94 |   //
  95 |   //
  96 |   //
  97 |   //
  98 |   //
  99 |   //
 100 |   //
 101 |   //
 102 |   //
 103 |   //
 104 |   //
 105 |   //
 106 |   //
 107 |   //
 108 |   //
 109 |   //
 110 |   //
 111 |   //
 112 |   //
 113 |   //
 114 |   //
 115 |   //
 116 |   //
 117 |   //
 118 |   //
 119 |   //
 120 |   //
 121 |   //
 122 |   //
 123 |   //
 124 |   //
 125 |   //
 126 |   //
 127 |   //
 128 |   //
 129 |   //
 130 |   //
 131 |   //
 132 |   //
 133 |   //
 134 |   //
 135 |   //
 136 |   //
 137 |   //
 138 |   //
 139 |   //
 140 |   //
 141 |   //
 142 |   //
 143 |   //
 144 |   //
 145 |   //
 146 |   //
 147 |   //
 148 |   //
 149 |   //
 150 |   //
 151 |   //
 152 |   //
 153 |   //
 154 |   //
 155 |   //
 156 |   //
 157 |   //
 158 |   //
 159 |   //
 160 |   //
 161 |   //
 162 |   //
 163 |   //
 164 |   //
 165 |   //
 166 |   //
 167 |   //
 168 |   //
 169 |   //
 170 |   //
 171 |   //
 172 |   //
 173 |   //
 174 |   //
 175 |   //
 176 |   //
 177 |   //
 178 |   //
 179 |   //
 180 |   //
 181 |   //
 182 |   //
 183 |   //
 184 |   //
 185 |   //
 186 |   //
 187 |   //
 188 |   //
 189 |   //
 190 |   //
 191 |   //
 192 |   //
 193 |   //
 194 |   //
 195 |   //
 196 |   //
 197 |   //
 198 |   //
 199 |   //
 200 |   //
 201 |   //
 202 |   //
 203 |   //
 204 |   //
 205 |   //
 206 |   //
 207 |   //
 208 |   //
 209 |   //
 210 |   //
 211 |   //
 212 |   //
 213 |   //
 214 |   //
 215 |   //
 216 |   //
 217 |   //
 218 |   //
 219 |   //
 220 |   //
 221 |   //
 222 |   //
 223 |   //
 224 |   //
 225 |   //
 226 |   //
 227 |   //
 228 |   //
 229 |   //
 230 |   //
 231 |   //
 232 |   //
 233 |   //
 234 |   //
 235 |   //
 236 | 
 237 |   var script = {
 238 |     name: 'vue-image-browser',
 239 | 
 240 |     props: {
 241 |       images: {
 242 |         type: Array,
 243 |         default: function () { return []; },
 244 |       },
 245 | 
 246 |       imageProperties: {
 247 |         type: Object,
 248 |       },
 249 | 
 250 |       allowUpload: {
 251 |         type: Boolean,
 252 |         default: false,
 253 |       },
 254 | 
 255 |       saveUrl: {
 256 |         type: String,
 257 |         default: '/api/photos',
 258 |       },
 259 | 
 260 |       saveRequestHeaders: {
 261 |         type: Object,
 262 |         default: function () {},
 263 |       },
 264 | 
 265 |       searchDelay: {
 266 |         type: Number,
 267 |         default: 500,
 268 |       },
 269 | 
 270 |       allowDelete: {
 271 |         type: Boolean,
 272 |         default: false,
 273 |       },
 274 | 
 275 |         allowPhotoPane: {
 276 |             type: Boolean,
 277 |             default: false,
 278 |         },
 279 | 
 280 |         allowChoose: {
 281 |             type: Boolean,
 282 |             default: false,
 283 |         },
 284 | 
 285 |         allowCopy: {
 286 |             type: Boolean,
 287 |             default: true,
 288 |         },
 289 | 
 290 |         captionable: {
 291 |             type: Boolean,
 292 |             default: false,
 293 |         },
 294 | 
 295 |         enableLazyLoad: {
 296 |             type: Boolean,
 297 |             default: true,
 298 |         },
 299 | 
 300 |         maxImagesPerRow: {
 301 |             type: Number,
 302 |             default: 5,
 303 |         },
 304 | 
 305 |         postKey: {
 306 |             type: String,
 307 |             default: 'image',
 308 |         },
 309 |     },
 310 | 
 311 |     data: function () {
 312 |       return {
 313 |         message: null,
 314 |         query: '',
 315 |         searchResult: null,
 316 |         pane: 'gallery',
 317 |         selectedPhoto: {},
 318 |         uploadableFiles: [],
 319 |         copyLinkText: 'Copy Link',
 320 |         chooseBtnText: 'Choose',
 321 |       }
 322 |     },
 323 | 
 324 |     created: function created() {
 325 |       this.$nextTick(function () {
 326 |         if (this.enableLazyLoad) {
 327 |           this.enableLazyLoading();
 328 |         }
 329 |       });
 330 |     },
 331 | 
 332 |     updated: function () {
 333 |       this.$nextTick(function () {
 334 |         if (this.enableLazyLoad) {
 335 |           this.enableLazyLoading();
 336 |         }
 337 |       });
 338 |     },
 339 | 
 340 |     computed: {
 341 |       imagesPerRow: function imagesPerRow() {
 342 |         var xs = parseInt(this.maxImagesPerRow * (1 / 4)),
 343 |           md = parseInt(this.maxImagesPerRow * (2 / 4)),
 344 |           lg = parseInt(this.maxImagesPerRow * (3 / 4)),
 345 |           xl = parseInt(this.maxImagesPerRow * (4 / 4));
 346 | 
 347 |         return (
 348 |           'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl
 349 |         )
 350 |       },
 351 |     },
 352 | 
 353 |     methods: {
 354 |       select: function select(photo) {
 355 |         this.selectedPhoto = photo;
 356 | 
 357 |         this.allowPhotoPane && (this.pane = 'photo');
 358 | 
 359 |         this.captionable && (this.selectedPhoto['caption'] = this.getCaption());
 360 | 
 361 |         this.$emit('selected', this.selectedPhoto);
 362 |       },
 363 | 
 364 |       choose: function () {
 365 |         this.captionable && (this.selectedPhoto['caption'] = this.getCaption());
 366 | 
 367 |         this.$emit('chosen', this.selectedPhoto);
 368 | 
 369 |         this.pane = 'gallery';
 370 |       },
 371 | 
 372 |       copy: function copy() {
 373 |         var p = this;
 374 | 
 375 |         if (navigator.clipboard) {
 376 |           navigator.clipboard.writeText(this.selectedPhoto.url).then(function () {
 377 |             p.copyLinkText = 'Link Copied!';
 378 |           });
 379 |         }
 380 |       },
 381 | 
 382 |       getCaption: function getCaption() {
 383 |         // remove file name extensions
 384 |         var caption = this.selectedPhoto.name.replace(/\.[^/.]+$/, '');
 385 | 
 386 |         // remove special characters with space
 387 |         caption = caption.replace(/[^\w\s]/gi, ' ');
 388 | 
 389 |         // uppercase first letter of each word
 390 |         caption = caption
 391 |           .toLowerCase()
 392 |           .split(' ')
 393 |           .map(function (s) { return s.charAt(0).toUpperCase() + s.substring(1); })
 394 |           .join(' ');
 395 | 
 396 |         return prompt('Enter an caption for this image', caption)
 397 |       },
 398 | 
 399 |       uploadFiles: function () {
 400 |         var this$1 = this;
 401 | 
 402 |         var files = document.getElementById('files').files,
 403 |           p = this;
 404 | 
 405 |         var loop = function ( i ) {
 406 |             var upf = {
 407 |                 name: files[i].name,
 408 |                 formdata: new FormData(),
 409 |                 ajax: new XMLHttpRequest(),
 410 |                 status: 'Not Started',
 411 |                 completion: 0,
 412 |             };
 413 | 
 414 |             upf.formdata.append(this$1.postKey, files[i]);
 415 |             upf.formdata.append('name', files[i].name);
 416 | 
 417 |             upf.ajax.upload.onprogress = function (e) {
 418 |                 upf.status = 'Uploaded ' + Math.round(e.loaded / 1000) + ' KB...';
 419 |                 upf.completion = Math.round((e.loaded / e.total) * 100);
 420 |             };
 421 |             upf.ajax.upload.onload = function (e) {
 422 |                 upf.status = 'Complete';
 423 |                 upf.completion = 100;
 424 |             };
 425 |             upf.ajax.upload.onerror = function (e) {
 426 |                 upf.status = 'Error uploading the file';
 427 |                 upf.completion = 0;
 428 |             };
 429 |             // ajax.upload.addEventListener('abort', abortHandler, false);
 430 | 
 431 |             upf.ajax.open('POST', p.saveUrl);
 432 | 
 433 |             var header_keys = Object.keys(p.saveRequestHeaders);
 434 |             for (var i$1 = 0; i$1 < header_keys.length; i$1++) {
 435 |                 var header = header_keys[i$1];
 436 |             var val = p.saveRequestHeaders[header];
 437 |             upf.ajax.setRequestHeader(header, val);
 438 |           }
 439 | 
 440 |           upf.ajax.onreadystatechange = function () {
 441 |             if (upf.ajax.readyState === 4 && upf.ajax.status === 200) {
 442 |               var response = upf.ajax.responseText;
 443 |               if (response) {
 444 |                 try {
 445 |                   var media = JSON.parse(response);
 446 |                   p.$emit('saved', media);
 447 |                 } catch (e) {
 448 |                   alert(e);
 449 |                 }
 450 |               }
 451 |             }
 452 |             if (upf.ajax.readyState === 4 && upf.ajax.status != 200) {
 453 |               upf.status =
 454 |                 'Error uploading the file (Status = ' + upf.ajax.status + ')';
 455 |               upf.completion = 0;
 456 |             }
 457 |           };
 458 |           upf.ajax.send(upf.formdata);
 459 |           this$1.uploadableFiles.push(upf);
 460 |         };
 461 | 
 462 |         for (var i = 0; i < files.length; i++) loop( i );
 463 |       },
 464 | 
 465 |       deleteSelected: function deleteSelected() {
 466 |         this.$emit('deleted', this.selectedPhoto);
 467 |         this.pane = 'gallery';
 468 |       },
 469 | 
 470 |       doDelayedSearch: function doDelayedSearch() {
 471 |         var p = this;
 472 | 
 473 |         if (this.timer) {
 474 |           clearTimeout(this.timer);
 475 |           this.timer = null;
 476 |         }
 477 | 
 478 |         if (p.query.length > 0) { p.searchResult = 'Searching...'; }
 479 |         else { p.searchResult = ''; }
 480 | 
 481 |         this.timer = setTimeout(function () {
 482 |           p.$emit('searched', p.query);
 483 |         }, this.searchDelay);
 484 |       },
 485 | 
 486 |       // This is an experimental function that enables
 487 |       // lazy-loading.
 488 |       enableLazyLoading: function enableLazyLoading() {
 489 |         var images = document.querySelectorAll('.mg-photo');
 490 | 
 491 |         var config = {
 492 |           root: null,
 493 |           rootMargin: '0px 0px 50px 0px',
 494 |         };
 495 | 
 496 |         // check if intersection observer is supported via browser
 497 |         if (!('IntersectionObserver' in window)) {
 498 |           // if not, just load all immediately
 499 |           Array.from(images).forEach(function (image) {
 500 |             console.log('IntersectionObserver unsupported loading');
 501 |             if (!image.src) { image.src = image.dataset.src; }
 502 |           });
 503 |         } else {
 504 |           var observer = new IntersectionObserver(function (entries) {
 505 |             entries.forEach(function (image) {
 506 |               // Are we in viewport?
 507 |               if (image.isIntersecting) {
 508 |                 // console.log('Loading: ' + image.target.dataset.src)
 509 |                 // console.log(image.target.src)
 510 |                 image.target.src = image.target.dataset.src;
 511 |                 observer.unobserve(image.target);
 512 |               }
 513 |             });
 514 |           }, config);
 515 | 
 516 |           images.forEach(function (image) {
 517 |             if (!image.src) {
 518 |               observer.observe(image);
 519 |             }
 520 |           });
 521 |         }
 522 |       },
 523 |     },
 524 |   };
 525 | 
 526 |   function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
 527 |       if (typeof shadowMode !== 'boolean') {
 528 |           createInjectorSSR = createInjector;
 529 |           createInjector = shadowMode;
 530 |           shadowMode = false;
 531 |       }
 532 |       // Vue.extend constructor export interop.
 533 |       var options = typeof script === 'function' ? script.options : script;
 534 |       // render functions
 535 |       if (template && template.render) {
 536 |           options.render = template.render;
 537 |           options.staticRenderFns = template.staticRenderFns;
 538 |           options._compiled = true;
 539 |           // functional template
 540 |           if (isFunctionalTemplate) {
 541 |               options.functional = true;
 542 |           }
 543 |       }
 544 |       // scopedId
 545 |       if (scopeId) {
 546 |           options._scopeId = scopeId;
 547 |       }
 548 |       var hook;
 549 |       if (moduleIdentifier) {
 550 |           // server build
 551 |           hook = function (context) {
 552 |               // 2.3 injection
 553 |               context =
 554 |                   context || // cached call
 555 |                       (this.$vnode && this.$vnode.ssrContext) || // stateful
 556 |                       (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
 557 |               // 2.2 with runInNewContext: true
 558 |               if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
 559 |                   context = __VUE_SSR_CONTEXT__;
 560 |               }
 561 |               // inject component styles
 562 |               if (style) {
 563 |                   style.call(this, createInjectorSSR(context));
 564 |               }
 565 |               // register component module identifier for async chunk inference
 566 |               if (context && context._registeredComponents) {
 567 |                   context._registeredComponents.add(moduleIdentifier);
 568 |               }
 569 |           };
 570 |           // used by ssr in case component is cached and beforeCreate
 571 |           // never gets called
 572 |           options._ssrRegister = hook;
 573 |       }
 574 |       else if (style) {
 575 |           hook = shadowMode
 576 |               ? function (context) {
 577 |                   style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
 578 |               }
 579 |               : function (context) {
 580 |                   style.call(this, createInjector(context));
 581 |               };
 582 |       }
 583 |       if (hook) {
 584 |           if (options.functional) {
 585 |               // register for functional component in vue file
 586 |               var originalRender = options.render;
 587 |               options.render = function renderWithStyleInjection(h, context) {
 588 |                   hook.call(context);
 589 |                   return originalRender(h, context);
 590 |               };
 591 |           }
 592 |           else {
 593 |               // inject component registration as beforeCreate hook
 594 |               var existing = options.beforeCreate;
 595 |               options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
 596 |           }
 597 |       }
 598 |       return script;
 599 |   }
 600 | 
 601 |   var isOldIE = typeof navigator !== 'undefined' &&
 602 |       /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
 603 |   function createInjector(context) {
 604 |       return function (id, style) { return addStyle(id, style); };
 605 |   }
 606 |   var HEAD;
 607 |   var styles = {};
 608 |   function addStyle(id, css) {
 609 |       var group = isOldIE ? css.media || 'default' : id;
 610 |       var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
 611 |       if (!style.ids.has(id)) {
 612 |           style.ids.add(id);
 613 |           var code = css.source;
 614 |           if (css.map) {
 615 |               // https://developer.chrome.com/devtools/docs/javascript-debugging
 616 |               // this makes source maps inside style tags work properly in Chrome
 617 |               code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
 618 |               // http://stackoverflow.com/a/26603875
 619 |               code +=
 620 |                   '\n/*# sourceMappingURL=data:application/json;base64,' +
 621 |                       btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
 622 |                       ' */';
 623 |           }
 624 |           if (!style.element) {
 625 |               style.element = document.createElement('style');
 626 |               style.element.type = 'text/css';
 627 |               if (css.media)
 628 |                   { style.element.setAttribute('media', css.media); }
 629 |               if (HEAD === undefined) {
 630 |                   HEAD = document.head || document.getElementsByTagName('head')[0];
 631 |               }
 632 |               HEAD.appendChild(style.element);
 633 |           }
 634 |           if ('styleSheet' in style.element) {
 635 |               style.styles.push(code);
 636 |               style.element.styleSheet.cssText = style.styles
 637 |                   .filter(Boolean)
 638 |                   .join('\n');
 639 |           }
 640 |           else {
 641 |               var index = style.ids.size - 1;
 642 |               var textNode = document.createTextNode(code);
 643 |               var nodes = style.element.childNodes;
 644 |               if (nodes[index])
 645 |                   { style.element.removeChild(nodes[index]); }
 646 |               if (nodes.length)
 647 |                   { style.element.insertBefore(textNode, nodes[index]); }
 648 |               else
 649 |                   { style.element.appendChild(textNode); }
 650 |           }
 651 |       }
 652 |   }
 653 | 
 654 |   /* script */
 655 |   var __vue_script__ = script;
 656 | 
 657 |   /* template */
 658 |   var __vue_render__ = function() {
 659 |     var _vm = this;
 660 |     var _h = _vm.$createElement;
 661 |     var _c = _vm._self._c || _h;
 662 |     return _c("div", { staticClass: "w-full" }, [
 663 |       _c(
 664 |         "div",
 665 |         {
 666 |           directives: [
 667 |             {
 668 |               name: "show",
 669 |               rawName: "v-show",
 670 |               value: _vm.pane === "gallery",
 671 |               expression: "pane === 'gallery'"
 672 |             }
 673 |           ],
 674 |           staticClass:
 675 |             "w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap",
 676 |           attrs: { id: "top-panel" }
 677 |         },
 678 |         [
 679 |           _c("div", { staticClass: "flex-grow flex" }, [
 680 |             _c("input", {
 681 |               directives: [
 682 |                 {
 683 |                   name: "model",
 684 |                   rawName: "v-model",
 685 |                   value: _vm.query,
 686 |                   expression: "query"
 687 |                 }
 688 |               ],
 689 |               staticClass:
 690 |                 "p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none",
 691 |               attrs: { type: "text", placeholder: "search..." },
 692 |               domProps: { value: _vm.query },
 693 |               on: {
 694 |                 keyup: _vm.doDelayedSearch,
 695 |                 input: function($event) {
 696 |                   if ($event.target.composing) {
 697 |                     return
 698 |                   }
 699 |                   _vm.query = $event.target.value;
 700 |                 }
 701 |               }
 702 |             }),
 703 |             _vm._v(" "),
 704 |             _c(
 705 |               "div",
 706 |               {
 707 |                 staticClass:
 708 |                   "hidden sm:flex relative pin-r rounded-r-lg border-r border-t border-b border-gray-300 bg-white py-1 px-2 items-center"
 709 |               },
 710 |               [
 711 |                 _vm.searchResult
 712 |                   ? _c("span", {
 713 |                       staticClass:
 714 |                         "py-1 px-2 bg-transparent rounded-lg text-xs whitespace-no-wrap",
 715 |                       domProps: { textContent: _vm._s(_vm.searchResult) }
 716 |                     })
 717 |                   : _vm._e()
 718 |               ]
 719 |             )
 720 |           ]),
 721 |           _vm._v(" "),
 722 |           _vm.allowUpload
 723 |             ? _c("div", { staticClass: "flex-none" }, [
 724 |                 _c(
 725 |                   "button",
 726 |                   {
 727 |                     staticClass: "text-white bg-blue-600 mx-2 px-4 py-2 rounded",
 728 |                     attrs: { title: "Upload Image" },
 729 |                     on: {
 730 |                       click: function($event) {
 731 |                         _vm.pane = "upload";
 732 |                       }
 733 |                     }
 734 |                   },
 735 |                   [_vm._v("\n        Add Image\n      ")]
 736 |                 )
 737 |               ])
 738 |             : _vm._e()
 739 |         ]
 740 |       ),
 741 |       _vm._v(" "),
 742 |       _c(
 743 |         "div",
 744 |         {
 745 |           directives: [
 746 |             {
 747 |               name: "show",
 748 |               rawName: "v-show",
 749 |               value: _vm.pane === "gallery",
 750 |               expression: "pane === 'gallery'"
 751 |             }
 752 |           ],
 753 |           staticClass:
 754 |             "w-full flex flex-wrap thumbnail-container overflow-y-scroll"
 755 |         },
 756 |         _vm._l(_vm.images, function(photo) {
 757 |           return _c(
 758 |             "div",
 759 |             {
 760 |               key: photo.id,
 761 |               class: _vm.imagesPerRow,
 762 |               on: {
 763 |                 click: function($event) {
 764 |                   return _vm.select(photo)
 765 |                 }
 766 |               }
 767 |             },
 768 |             [
 769 |               _c(
 770 |                 "div",
 771 |                 {
 772 |                   staticClass: "bg-white shadow mr-4 mb-4 cursor-pointer",
 773 |                   class:
 774 |                     _vm.selectedPhoto.id === photo.id
 775 |                       ? "border border-blue-600"
 776 |                       : ""
 777 |                 },
 778 |                 [
 779 |                   _c(
 780 |                     "div",
 781 |                     {
 782 |                       staticClass:
 783 |                         "w-full flex items-center justify-center thumbnail"
 784 |                     },
 785 |                     [
 786 |                       _c("img", {
 787 |                         staticClass: "mg-photo",
 788 |                         attrs: { "data-src": photo.url, title: photo.name }
 789 |                       })
 790 |                     ]
 791 |                   ),
 792 |                   _vm._v(" "),
 793 |                   _c(
 794 |                     "div",
 795 |                     {
 796 |                       staticClass:
 797 |                         "w-full flex bg-white justify-between text-gray-600 text-xs p-2"
 798 |                     },
 799 |                     [
 800 |                       _c("span", { staticClass: "truncate" }, [
 801 |                         _vm._v(_vm._s(photo.name))
 802 |                       ])
 803 |                     ]
 804 |                   )
 805 |                 ]
 806 |               )
 807 |             ]
 808 |           )
 809 |         }),
 810 |         0
 811 |       ),
 812 |       _vm._v(" "),
 813 |       _vm.pane === "photo"
 814 |         ? _c(
 815 |             "div",
 816 |             {
 817 |               staticClass:
 818 |                 "w-full mx-auto py-4 px-4 bg-transparent flex justify-between items-center"
 819 |             },
 820 |             [
 821 |               _c(
 822 |                 "button",
 823 |                 {
 824 |                   staticClass: "flex items-center",
 825 |                   on: {
 826 |                     click: function($event) {
 827 |                       _vm.pane = "gallery";
 828 |                     }
 829 |                   }
 830 |                 },
 831 |                 [
 832 |                   _c(
 833 |                     "svg",
 834 |                     {
 835 |                       staticClass:
 836 |                         "fill-current h-8 w-8 rounded-full border border-gray-600 p-2 text-gray-600 mr-2",
 837 |                       attrs: {
 838 |                         xmlns: "http://www.w3.org/2000/svg",
 839 |                         viewBox: "0 0 20 20"
 840 |                       }
 841 |                     },
 842 |                     [
 843 |                       _c("polygon", {
 844 |                         attrs: {
 845 |                           points:
 846 |                             "3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9"
 847 |                         }
 848 |                       })
 849 |                     ]
 850 |                   ),
 851 |                   _vm._v(" "),
 852 |                   _c("p", { staticClass: "text-blue-700 text-xl" }, [
 853 |                     _vm._v("Back to Gallery")
 854 |                   ])
 855 |                 ]
 856 |               ),
 857 |               _vm._v(" "),
 858 |               _c("div", { staticClass: "flex items-center justify-between" }, [
 859 |                 _vm.allowCopy
 860 |                   ? _c(
 861 |                       "button",
 862 |                       {
 863 |                         staticClass:
 864 |                           "py-2 px-6 text-blue-600 hover:text-blue-800 mt-4 ml-4",
 865 |                         on: { click: _vm.copy }
 866 |                       },
 867 |                       [
 868 |                         _vm._v(
 869 |                           "\n        " + _vm._s(_vm.copyLinkText) + "\n      "
 870 |                         )
 871 |                       ]
 872 |                     )
 873 |                   : _vm._e(),
 874 |                 _vm._v(" "),
 875 |                 _vm.allowChoose
 876 |                   ? _c(
 877 |                       "button",
 878 |                       {
 879 |                         staticClass:
 880 |                           "py-2 px-6 bg-green-500 text-white rounded shadow text-xl mt-4 ml-4",
 881 |                         on: { click: _vm.choose }
 882 |                       },
 883 |                       [
 884 |                         _vm._v(
 885 |                           "\n        " + _vm._s(_vm.chooseBtnText) + "\n      "
 886 |                         )
 887 |                       ]
 888 |                     )
 889 |                   : _vm._e()
 890 |               ])
 891 |             ]
 892 |           )
 893 |         : _vm._e(),
 894 |       _vm._v(" "),
 895 |       _vm.pane === "photo"
 896 |         ? _c("div", { staticClass: "w-full px-4 postcard-container" }, [
 897 |             _c("div", { staticClass: "w-full postcard" }, [
 898 |               _c("img", {
 899 |                 staticClass: "mx-auto shadow-lg mg-photo",
 900 |                 attrs: {
 901 |                   src: _vm.selectedPhoto.url,
 902 |                   title: _vm.selectedPhoto.name
 903 |                 }
 904 |               })
 905 |             ]),
 906 |             _vm._v(" "),
 907 |             _c("div", { staticClass: "w-full text-sm px-2 py-2 bg-white" }, [
 908 |               _c(
 909 |                 "table",
 910 |                 { staticClass: "w-full mt-4 table-auto" },
 911 |                 _vm._l(_vm.imageProperties, function(pk, pv) {
 912 |                   return _c("tr", { staticClass: "border-b" }, [
 913 |                     _c(
 914 |                       "td",
 915 |                       {
 916 |                         staticClass: "p-4 uppercase font-semibold text-gray-600"
 917 |                       },
 918 |                       [
 919 |                         _vm._v(
 920 |                           "\n            " +
 921 |                             _vm._s(pk.toUpperCase()) +
 922 |                             "\n          "
 923 |                         )
 924 |                       ]
 925 |                     ),
 926 |                     _vm._v(" "),
 927 |                     _c("td", { staticClass: "p-4 font-mono" }, [
 928 |                       _vm._v(_vm._s(_vm.selectedPhoto[pv]))
 929 |                     ])
 930 |                   ])
 931 |                 }),
 932 |                 0
 933 |               ),
 934 |               _vm._v(" "),
 935 |               _vm.allowDelete
 936 |                 ? _c(
 937 |                     "button",
 938 |                     {
 939 |                       staticClass:
 940 |                         "text-red-500 border m-4 mt-6 px-4 text-sm py-1 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer",
 941 |                       on: {
 942 |                         click: function($event) {
 943 |                           return _vm.deleteSelected()
 944 |                         }
 945 |                       }
 946 |                     },
 947 |                     [_vm._v("\n        Delete\n      ")]
 948 |                   )
 949 |                 : _vm._e()
 950 |             ])
 951 |           ])
 952 |         : _vm._e(),
 953 |       _vm._v(" "),
 954 |       _vm.pane === "upload"
 955 |         ? _c(
 956 |             "div",
 957 |             { staticClass: "w-full p-4 postcard-container overflow-y-scroll" },
 958 |             [
 959 |               _c("div", { staticClass: "flex justify-between" }, [
 960 |                 _c(
 961 |                   "button",
 962 |                   {
 963 |                     staticClass: "flex items-center",
 964 |                     on: {
 965 |                       click: function($event) {
 966 |                         _vm.pane = "gallery";
 967 |                       }
 968 |                     }
 969 |                   },
 970 |                   [
 971 |                     _c(
 972 |                       "svg",
 973 |                       {
 974 |                         staticClass:
 975 |                           "fill-current h-8 w-8 rounded-full border p-2 text-gray-600 mr-2",
 976 |                         attrs: {
 977 |                           xmlns: "http://www.w3.org/2000/svg",
 978 |                           viewBox: "0 0 20 20"
 979 |                         }
 980 |                       },
 981 |                       [
 982 |                         _c("polygon", {
 983 |                           attrs: {
 984 |                             points:
 985 |                               "3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9"
 986 |                           }
 987 |                         })
 988 |                       ]
 989 |                     ),
 990 |                     _vm._v(" "),
 991 |                     _c(
 992 |                       "p",
 993 |                       {
 994 |                         staticClass:
 995 |                           "text-gray-600 font-light text-lg hidden sm:block"
 996 |                       },
 997 |                       [_vm._v("\n          Back to Gallery\n        ")]
 998 |                     )
 999 |                   ]
1000 |                 ),
1001 |                 _vm._v(" "),
1002 |                 _c(
1003 |                   "form",
1004 |                   {
1005 |                     attrs: {
1006 |                       id: "file-catcher",
1007 |                       enctype: "multipart/form-data",
1008 |                       method: "post"
1009 |                     }
1010 |                   },
1011 |                   [
1012 |                     _c("div", { staticClass: "w-full flex bg-transparent" }, [
1013 |                       _c(
1014 |                         "label",
1015 |                         {
1016 |                           staticClass:
1017 |                             "flex items-center px-4 py-2 rounded-lg border border-blue-500 bg-white text-blue-500 tracking-wide cursor-pointer hover:bg-blue-500 hover:text-white"
1018 |                         },
1019 |                         [
1020 |                           _c(
1021 |                             "svg",
1022 |                             {
1023 |                               staticClass: "w-8 h-8 mr-4",
1024 |                               attrs: {
1025 |                                 fill: "currentColor",
1026 |                                 xmlns: "http://www.w3.org/2000/svg",
1027 |                                 viewBox: "0 0 20 20"
1028 |                               }
1029 |                             },
1030 |                             [
1031 |                               _c("path", {
1032 |                                 attrs: {
1033 |                                   d:
1034 |                                     "M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z"
1035 |                                 }
1036 |                               })
1037 |                             ]
1038 |                           ),
1039 |                           _vm._v(" "),
1040 |                           _vm._m(0),
1041 |                           _vm._v(" "),
1042 |                           _c("input", {
1043 |                             staticClass: "hidden",
1044 |                             attrs: {
1045 |                               id: "files",
1046 |                               type: "file",
1047 |                               name: "files",
1048 |                               multiple: ""
1049 |                             },
1050 |                             on: { change: _vm.uploadFiles }
1051 |                           })
1052 |                         ]
1053 |                       )
1054 |                     ])
1055 |                   ]
1056 |                 )
1057 |               ]),
1058 |               _vm._v(" "),
1059 |               _vm.uploadableFiles.length > 0
1060 |                 ? _c(
1061 |                     "div",
1062 |                     {
1063 |                       staticClass: "w-full my-4",
1064 |                       attrs: { id: "file-list-display" }
1065 |                     },
1066 |                     [
1067 |                       _c("table", { staticClass: "w-full my-2 text-sm" }, [
1068 |                         _vm._m(1),
1069 |                         _vm._v(" "),
1070 |                         _c(
1071 |                           "tbody",
1072 |                           _vm._l(_vm.uploadableFiles, function(f, index) {
1073 |                             return _c(
1074 |                               "tr",
1075 |                               { key: index, staticClass: "p-2 border-b" },
1076 |                               [
1077 |                                 _c("td", {
1078 |                                   staticClass: "text-left p-2 hidden md:block",
1079 |                                   domProps: { textContent: _vm._s(index + 1) }
1080 |                                 }),
1081 |                                 _vm._v(" "),
1082 |                                 _c("td", {
1083 |                                   staticClass: "text-left p-2",
1084 |                                   domProps: { textContent: _vm._s(f.name) }
1085 |                                 }),
1086 |                                 _vm._v(" "),
1087 |                                 _c("td", [
1088 |                                   _c("span", {
1089 |                                     domProps: { textContent: _vm._s(f.status) }
1090 |                                   })
1091 |                                 ]),
1092 |                                 _vm._v(" "),
1093 |                                 _c("td", [
1094 |                                   _c("progress", {
1095 |                                     staticClass: "my-2 w-full",
1096 |                                     attrs: { id: "progressBar", max: "100" },
1097 |                                     domProps: { value: f.completion }
1098 |                                   })
1099 |                                 ])
1100 |                               ]
1101 |                             )
1102 |                           }),
1103 |                           0
1104 |                         )
1105 |                       ])
1106 |                     ]
1107 |                   )
1108 |                 : _vm._e()
1109 |             ]
1110 |           )
1111 |         : _vm._e(),
1112 |       _vm._v(" "),
1113 |       _vm.message
1114 |         ? _c(
1115 |             "div",
1116 |             {
1117 |               staticClass: "p-2 bg-white w-full text-sm text-gray-600 rounded",
1118 |               attrs: { id: "message" }
1119 |             },
1120 |             [_c("span", { domProps: { textContent: _vm._s(_vm.message) } })]
1121 |           )
1122 |         : _vm._e()
1123 |     ])
1124 |   };
1125 |   var __vue_staticRenderFns__ = [
1126 |     function() {
1127 |       var _vm = this;
1128 |       var _h = _vm.$createElement;
1129 |       var _c = _vm._self._c || _h;
1130 |       return _c("p", { staticClass: "text-base leading-normal" }, [
1131 |         _vm._v("\n              Upload\n              "),
1132 |         _c("span", { staticClass: "hidden sm:inline" }, [
1133 |           _vm._v("From Local Computer")
1134 |         ])
1135 |       ])
1136 |     },
1137 |     function() {
1138 |       var _vm = this;
1139 |       var _h = _vm.$createElement;
1140 |       var _c = _vm._self._c || _h;
1141 |       return _c("thead", [
1142 |         _c("tr", { staticClass: "bg-white text-left" }, [
1143 |           _c("th", { staticClass: "p-2 font-light hidden md:block" }, [
1144 |             _vm._v("#")
1145 |           ]),
1146 |           _vm._v(" "),
1147 |           _c("th", { staticClass: "p-2 font-light" }, [_vm._v("File Name")]),
1148 |           _vm._v(" "),
1149 |           _c("th", { staticClass: "p-2 font-light" }, [_vm._v("Status")]),
1150 |           _vm._v(" "),
1151 |           _c("th", { staticClass: "p-2 font-light" }, [_vm._v("Progress")])
1152 |         ])
1153 |       ])
1154 |     }
1155 |   ];
1156 |   __vue_render__._withStripped = true;
1157 | 
1158 |     /* style */
1159 |     var __vue_inject_styles__ = function (inject) {
1160 |         if (!inject) {
1161 |             return
1162 |         }
1163 |         inject("data-v-994a7416_0", {
1164 |             source: "\n@media only screen and (min-width: 640px) {\n.thumbnail {\n    height: 300px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 768px) {\n.thumbnail {\n    height: 250px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1024px) {\n.thumbnail {\n    height: 200px;\n    overflow: hidden;\n}\n}\n@media only screen and (min-width: 1280px) {\n.thumbnail {\n    height: 120px;\n    overflow: hidden;\n}\n}\n.mg-photo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n",
1165 |             map: {
1166 |                 "version": 3,
1167 |                 "sources": ["/Users/akashmitra/code/vue-image-browser/src/vue-image-browser.vue"],
1168 |                 "names": [],
1169 |                 "mappings": ";AAqgBA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AACA;AACA;IACA,aAAA;IACA,gBAAA;AACA;AACA;AAEA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;AACA",
1170 |                 "file": "vue-image-browser.vue",
1171 |                 "sourcesContent": ["<template>\n  <div class=\"w-full\">\n    <div\n      v-show=\"pane === 'gallery'\"\n      class=\"w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap\"\n      id=\"top-panel\"\n    >\n      <div class=\"flex-grow flex\">\n        <input\n          class=\"p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none\"\n          type=\"text\"\n          v-model=\"query\"\n          @keyup=\"doDelayedSearch\"\n          placeholder=\"search...\"\n        />\n        <div\n          class=\"hidden sm:flex relative pin-r rounded-r-lg border-r border-t border-b border-gray-300 bg-white py-1 px-2 items-center\"\n        >\n          <span\n            v-if=\"searchResult\"\n            class=\"py-1 px-2 bg-transparent rounded-lg text-xs whitespace-no-wrap\"\n            v-text=\"searchResult\"\n          ></span>\n        </div>\n      </div>\n      <div class=\"flex-none\" v-if=\"allowUpload\">\n        <button\n          class=\"text-white bg-blue-600 mx-2 px-4 py-2 rounded\"\n          title=\"Upload Image\"\n          @click=\"pane = 'upload'\"\n        >\n          Add Image\n        </button>\n      </div>\n    </div>\n\n    <div\n      v-show=\"pane === 'gallery'\"\n      class=\"w-full flex flex-wrap thumbnail-container overflow-y-scroll\"\n    >\n      <div\n        v-for=\"photo in images\"\n        :key=\"photo.id\"\n        :class=\"imagesPerRow\"\n        @click=\"select(photo)\"\n      >\n        <div\n          class=\"bg-white shadow mr-4 mb-4 cursor-pointer\"\n          :class=\"selectedPhoto.id === photo.id ? 'border border-blue-600' : ''\"\n        >\n          <div class=\"w-full flex items-center justify-center thumbnail\">\n            <img\n              v-bind:data-src=\"photo.url\"\n              :title=\"photo.name\"\n              class=\"mg-photo\"\n            />\n          </div>\n          <div\n            class=\"w-full flex bg-white justify-between text-gray-600 text-xs p-2\"\n          >\n            <span class=\"truncate\">{{ photo.name }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      v-if=\"pane === 'photo'\"\n      class=\"w-full mx-auto py-4 px-4 bg-transparent flex justify-between items-center\"\n    >\n      <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 20 20\"\n          class=\"fill-current h-8 w-8 rounded-full border border-gray-600 p-2 text-gray-600 mr-2\"\n        >\n          <polygon\n            points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\n          />\n        </svg>\n        <p class=\"text-blue-700 text-xl\">Back to Gallery</p>\n      </button>\n\n      <div class=\"flex items-center justify-between\">\n        <button\n          @click=\"copy\"\n          v-if=\"allowCopy\"\n          class=\"py-2 px-6 text-blue-600 hover:text-blue-800 mt-4 ml-4\"\n        >\n          {{ copyLinkText }}\n        </button>\n        <button\n          @click=\"choose\"\n          v-if=\"allowChoose\"\n          class=\"py-2 px-6 bg-green-500 text-white rounded shadow text-xl mt-4 ml-4\"\n        >\n          {{ chooseBtnText }}\n        </button>\n      </div>\n    </div>\n\n    <div v-if=\"pane === 'photo'\" class=\"w-full px-4 postcard-container\">\n      <div class=\"w-full postcard\">\n        <img\n          :src=\"selectedPhoto.url\"\n          :title=\"selectedPhoto.name\"\n          class=\"mx-auto shadow-lg mg-photo\"\n        />\n      </div>\n\n      <div class=\"w-full text-sm px-2 py-2 bg-white\">\n        <table class=\"w-full mt-4 table-auto\">\n          <tr class=\"border-b\" v-for=\"(pk, pv) in imageProperties\">\n            <td class=\"p-4 uppercase font-semibold text-gray-600\">\n              {{ pk.toUpperCase() }}\n            </td>\n            <td class=\"p-4 font-mono\">{{ selectedPhoto[pv] }}</td>\n          </tr>\n        </table>\n\n        <button\n          @click=\"deleteSelected()\"\n          v-if=\"allowDelete\"\n          class=\"text-red-500 border m-4 mt-6 px-4 text-sm py-1 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer\"\n        >\n          Delete\n        </button>\n      </div>\n    </div>\n\n    <div\n      v-if=\"pane === 'upload'\"\n      class=\"w-full p-4 postcard-container overflow-y-scroll\"\n    >\n      <div class=\"flex justify-between\">\n        <button class=\"flex items-center\" @click=\"pane = 'gallery'\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 20 20\"\n            class=\"fill-current h-8 w-8 rounded-full border p-2 text-gray-600 mr-2\"\n          >\n            <polygon\n              points=\"3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9\"\n            />\n          </svg>\n          <p class=\"text-gray-600 font-light text-lg hidden sm:block\">\n            Back to Gallery\n          </p>\n        </button>\n        <form id=\"file-catcher\" enctype=\"multipart/form-data\" method=\"post\">\n          <div class=\"w-full flex bg-transparent\">\n            <label\n              class=\"flex items-center px-4 py-2 rounded-lg border border-blue-500 bg-white text-blue-500 tracking-wide cursor-pointer hover:bg-blue-500 hover:text-white\"\n            >\n              <svg\n                class=\"w-8 h-8 mr-4\"\n                fill=\"currentColor\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n              >\n                <path\n                  d=\"M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z\"\n                />\n              </svg>\n              <p class=\"text-base leading-normal\">\n                Upload\n                <span class=\"hidden sm:inline\">From Local Computer</span>\n              </p>\n              <input\n                id=\"files\"\n                type=\"file\"\n                name=\"files\"\n                multiple\n                class=\"hidden\"\n                @change=\"uploadFiles\"\n              />\n            </label>\n          </div>\n        </form>\n      </div>\n      <div\n        id=\"file-list-display\"\n        class=\"w-full my-4\"\n        v-if=\"uploadableFiles.length > 0\"\n      >\n        <table class=\"w-full my-2 text-sm\">\n          <thead>\n            <tr class=\"bg-white text-left\">\n              <th class=\"p-2 font-light hidden md:block\">#</th>\n              <th class=\"p-2 font-light\">File Name</th>\n              <th class=\"p-2 font-light\">Status</th>\n              <th class=\"p-2 font-light\">Progress</th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr\n              class=\"p-2 border-b\"\n              v-for=\"(f, index) in uploadableFiles\"\n              v-bind:key=\"index\"\n            >\n              <td v-text=\"index + 1\" class=\"text-left p-2 hidden md:block\"></td>\n              <td class=\"text-left p-2\" v-text=\"f.name\"></td>\n              <td>\n                <span v-text=\"f.status\"></span>\n              </td>\n              <td>\n                <progress\n                  id=\"progressBar\"\n                  :value=\"f.completion\"\n                  max=\"100\"\n                  class=\"my-2 w-full\"\n                ></progress>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n\n    <div\n      class=\"p-2 bg-white w-full text-sm text-gray-600 rounded\"\n      id=\"message\"\n      v-if=\"message\"\n    >\n      <span v-text=\"message\"></span>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'vue-image-browser',\n\n  props: {\n    images: {\n      type: Array,\n      default: () => [],\n    },\n\n    imageProperties: {\n      type: Object,\n    },\n\n    allowUpload: {\n      type: Boolean,\n      default: false,\n    },\n\n    saveUrl: {\n      type: String,\n      default: '/api/photos',\n    },\n\n    saveRequestHeaders: {\n      type: Object,\n      default: () => {},\n    },\n\n    searchDelay: {\n      type: Number,\n      default: 500,\n    },\n\n    allowDelete: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowPhotoPane: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowChoose: {\n      type: Boolean,\n      default: false,\n    },\n\n    allowCopy: {\n      type: Boolean,\n      default: true,\n    },\n\n    captionable: {\n      type: Boolean,\n      default: false,\n    },\n\n    enableLazyLoad: {\n      type: Boolean,\n      default: true,\n    },\n\n    maxImagesPerRow: {\n      type: Number,\n      default: 5,\n    },\n\n    postKey: {\n      type: String,\n      default: 'image',\n    },\n  },\n\n  data: function () {\n    return {\n      message: null,\n      query: '',\n      searchResult: null,\n      pane: 'gallery',\n      selectedPhoto: {},\n      uploadableFiles: [],\n      copyLinkText: 'Copy Link',\n      chooseBtnText: 'Choose',\n    }\n  },\n\n  created() {\n    this.$nextTick(function () {\n      if (this.enableLazyLoad) {\n        this.enableLazyLoading()\n      }\n    })\n  },\n\n  updated: function () {\n    this.$nextTick(function () {\n      if (this.enableLazyLoad) {\n        this.enableLazyLoading()\n      }\n    })\n  },\n\n  computed: {\n    imagesPerRow() {\n      let xs = parseInt(this.maxImagesPerRow * (1 / 4)),\n        md = parseInt(this.maxImagesPerRow * (2 / 4)),\n        lg = parseInt(this.maxImagesPerRow * (3 / 4)),\n        xl = parseInt(this.maxImagesPerRow * (4 / 4))\n\n      return (\n        'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl\n      )\n    },\n  },\n\n  methods: {\n    select(photo) {\n      this.selectedPhoto = photo\n\n      this.allowPhotoPane && (this.pane = 'photo')\n\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\n\n      this.$emit('selected', this.selectedPhoto)\n    },\n\n    choose: function () {\n      this.captionable && (this.selectedPhoto['caption'] = this.getCaption())\n\n      this.$emit('chosen', this.selectedPhoto)\n\n      this.pane = 'gallery'\n    },\n\n    copy() {\n      let p = this\n\n      if (navigator.clipboard) {\n        navigator.clipboard.writeText(this.selectedPhoto.url).then(() => {\n          p.copyLinkText = 'Link Copied!'\n        })\n      }\n    },\n\n    getCaption() {\n      // remove file name extensions\n      let caption = this.selectedPhoto.name.replace(/\\.[^/.]+$/, '')\n\n      // remove special characters with space\n      caption = caption.replace(/[^\\w\\s]/gi, ' ')\n\n      // uppercase first letter of each word\n      caption = caption\n        .toLowerCase()\n        .split(' ')\n        .map((s) => s.charAt(0).toUpperCase() + s.substring(1))\n        .join(' ')\n\n      return prompt('Enter an caption for this image', caption)\n    },\n\n    uploadFiles: function () {\n      let files = document.getElementById('files').files,\n        p = this\n\n      for (let i = 0; i < files.length; i++) {\n        let upf = {\n          name: files[i].name,\n          formdata: new FormData(),\n          ajax: new XMLHttpRequest(),\n          status: 'Not Started',\n          completion: 0,\n        }\n\n        upf.formdata.append(this.postKey, files[i])\n        upf.formdata.append('name', files[i].name)\n\n        upf.ajax.upload.onprogress = function (e) {\n          upf.status = 'Uploaded ' + Math.round(e.loaded / 1000) + ' KB...'\n          upf.completion = Math.round((e.loaded / e.total) * 100)\n        }\n        upf.ajax.upload.onload = function (e) {\n          upf.status = 'Complete'\n          upf.completion = 100\n        }\n        upf.ajax.upload.onerror = function (e) {\n          upf.status = 'Error uploading the file'\n          upf.completion = 0\n        }\n        // ajax.upload.addEventListener('abort', abortHandler, false);\n\n        upf.ajax.open('POST', p.saveUrl)\n\n        let header_keys = Object.keys(p.saveRequestHeaders)\n        for (let i = 0; i < header_keys.length; i++) {\n          let header = header_keys[i]\n          let val = p.saveRequestHeaders[header]\n          upf.ajax.setRequestHeader(header, val)\n        }\n\n        upf.ajax.onreadystatechange = function () {\n          if (upf.ajax.readyState === 4 && upf.ajax.status === 200) {\n            let response = upf.ajax.responseText\n            if (response) {\n              try {\n                let media = JSON.parse(response)\n                p.$emit('saved', media)\n              } catch (e) {\n                alert(e)\n              }\n            }\n          }\n          if (upf.ajax.readyState === 4 && upf.ajax.status != 200) {\n            upf.status =\n              'Error uploading the file (Status = ' + upf.ajax.status + ')'\n            upf.completion = 0\n          }\n        }\n        upf.ajax.send(upf.formdata)\n        this.uploadableFiles.push(upf)\n      }\n    },\n\n    deleteSelected() {\n      this.$emit('deleted', this.selectedPhoto)\n      this.pane = 'gallery'\n    },\n\n    doDelayedSearch() {\n      let p = this\n\n      if (this.timer) {\n        clearTimeout(this.timer)\n        this.timer = null\n      }\n\n      if (p.query.length > 0) p.searchResult = 'Searching...'\n      else p.searchResult = ''\n\n      this.timer = setTimeout(() => {\n        p.$emit('searched', p.query)\n      }, this.searchDelay)\n    },\n\n    // This is an experimental function that enables\n    // lazy-loading.\n    enableLazyLoading() {\n      let images = document.querySelectorAll('.mg-photo')\n\n      const config = {\n        root: null,\n        rootMargin: '0px 0px 50px 0px',\n      }\n\n      // check if intersection observer is supported via browser\n      if (!('IntersectionObserver' in window)) {\n        // if not, just load all immediately\n        Array.from(images).forEach(function (image) {\n          console.log('IntersectionObserver unsupported loading')\n          if (!image.src) image.src = image.dataset.src\n        })\n      } else {\n        let observer = new IntersectionObserver(function (entries) {\n          entries.forEach((image) => {\n            // Are we in viewport?\n            if (image.isIntersecting) {\n              // console.log('Loading: ' + image.target.dataset.src)\n              // console.log(image.target.src)\n              image.target.src = image.target.dataset.src\n              observer.unobserve(image.target)\n            }\n          })\n        }, config)\n\n        images.forEach((image) => {\n          if (!image.src) {\n            observer.observe(image)\n          }\n        })\n      }\n    },\n  },\n}\n</script>\n\n<style>\n@media only screen and (min-width: 640px) {\n  .thumbnail {\n    height: 300px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 768px) {\n  .thumbnail {\n    height: 250px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 1024px) {\n  .thumbnail {\n    height: 200px;\n    overflow: hidden;\n  }\n}\n@media only screen and (min-width: 1280px) {\n  .thumbnail {\n    height: 120px;\n    overflow: hidden;\n  }\n}\n\n.mg-photo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n</style>\n"]
1172 |             },
1173 |             media: undefined
1174 |         });
1175 | 
1176 |     };
1177 |     /* scoped */
1178 |     var __vue_scope_id__ = undefined;
1179 |     /* module identifier */
1180 |     var __vue_module_identifier__ = undefined;
1181 |     /* functional template */
1182 |     var __vue_is_functional_template__ = false;
1183 |     /* style inject SSR */
1184 |     
1185 |     /* style inject shadow dom */
1186 |     
1187 | 
1188 |     
1189 |     var __vue_component__ = /*#__PURE__*/normalizeComponent(
1190 |       { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
1191 |       __vue_inject_styles__,
1192 |       __vue_script__,
1193 |       __vue_scope_id__,
1194 |       __vue_is_functional_template__,
1195 |       __vue_module_identifier__,
1196 |       false,
1197 |       createInjector,
1198 |       undefined,
1199 |       undefined
1200 |     );
1201 | 
1202 |   // Import vue component
1203 | 
1204 |   // Declare install function executed by Vue.use()
1205 |   function install(Vue) {
1206 |   	if (install.installed) { return; }
1207 |   	install.installed = true;
1208 |   	Vue.component('VueImageBrowser', __vue_component__);
1209 |   }
1210 | 
1211 |   // Create module definition for Vue.use()
1212 |   var plugin = {
1213 |   	install: install,
1214 |   };
1215 | 
1216 |   // Auto-install when vue is found (eg. in browser via <script> tag)
1217 |   var GlobalVue = null;
1218 |   if (typeof window !== 'undefined') {
1219 |   	GlobalVue = window.Vue;
1220 |   } else if (typeof global !== 'undefined') {
1221 |   	GlobalVue = global.Vue;
1222 |   }
1223 |   if (GlobalVue) {
1224 |   	GlobalVue.use(plugin);
1225 |   }
1226 | 
1227 |   exports.default = __vue_component__;
1228 |   exports.install = install;
1229 | 
1230 |   Object.defineProperty(exports, '__esModule', { value: true });
1231 | 
1232 | })));
1233 | 


--------------------------------------------------------------------------------
/images/example-image-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akash-mitra/vue-image-browser/0c8f7afba1173ffd2f4db108179137235ee2b822/images/example-image-1.png


--------------------------------------------------------------------------------
/images/example-image-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akash-mitra/vue-image-browser/0c8f7afba1173ffd2f4db108179137235ee2b822/images/example-image-2.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@akashmitra/vue-image-browser",
 3 |   "version": "1.2.4",
 4 |   "description": "A VueJS Image Browser Component with options to upload, browse, delete and select images",
 5 |   "main": "/dist/vue-image-browser.umd.js",
 6 |   "module": "dist/vue-image-browser.esm.js",
 7 |   "unpkg": "dist/vue-image-browser.min.js",
 8 |   "browser": {
 9 |     "./sfc": "src/vue-image-browser.vue"
10 |   },
11 |   "scripts": {
12 |     "build": "npm run build:umd & npm run build:es & npm run build:unpkg",
13 |     "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vue-image-browser.umd.js",
14 |     "build:es": "rollup --config build/rollup.config.js --format es --file dist/vue-image-browser.esm.js",
15 |     "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vue-image-browser.min.js"
16 |   },
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+https://github.com/akash-mitra/vue-image-browser.git"
20 |   },
21 |   "keywords": [
22 |     "vue",
23 |     "image",
24 |     "browser",
25 |     "gallery"
26 |   ],
27 |   "author": "Akash Mitra",
28 |   "license": "MIT",
29 |   "bugs": {
30 |     "url": "https://github.com/akash-mitra/vue-image-browser/issues"
31 |   },
32 |   "homepage": "https://github.com/akash-mitra/vue-image-browser#readme",
33 |   "devDependencies": {
34 |     "@rollup/plugin-buble": "^0.21.3",
35 |     "@rollup/plugin-commonjs": "^12.0.0",
36 |     "autoprefixer": "^9.8.6",
37 |     "core-js": "^3.6.5",
38 |     "postcss": "^7.0.32",
39 |     "postcss-import": "^12.0.1",
40 |     "rollup": "^2.26.5",
41 |     "rollup-plugin-vue": "^5.1.9",
42 |     "tailwindcss": "^1.7.3",
43 |     "vue": "^2.6.12",
44 |     "vue-template-compiler": "^2.6.12"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	plugins: [
3 |       require('postcss-import'),
4 |       require('tailwindcss'),
5 |       require('autoprefixer'),
6 |     ]
7 | }


--------------------------------------------------------------------------------
/src/vue-image-browser.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="w-full">
  3 |     <div
  4 |       v-show="pane === 'gallery'"
  5 |       class="w-full mx-auto py-4 bg-transparent my-4 flex items-center flex-no-wrap"
  6 |       id="top-panel"
  7 |     >
  8 |       <div class="flex-grow flex">
  9 |         <input
 10 |           class="p-2 w-full rounded-l-lg rounded-r-lg sm:rounded-r-none border sm:border-r-0 border-gray-300 bg-white outline-none"
 11 |           type="text"
 12 |           v-model="query"
 13 |           @keyup="doDelayedSearch"
 14 |           placeholder="search..."
 15 |         />
 16 |         <div
 17 |           class="hidden sm:flex relative pin-r rounded-r-lg border-r border-t border-b border-gray-300 bg-white py-1 px-2 items-center"
 18 |         >
 19 |           <span
 20 |             v-if="searchResult"
 21 |             class="py-1 px-2 bg-transparent rounded-lg text-xs whitespace-no-wrap"
 22 |             v-text="searchResult"
 23 |           ></span>
 24 |         </div>
 25 |       </div>
 26 |       <div class="flex-none" v-if="allowUpload">
 27 |         <button
 28 |           class="text-white bg-blue-600 mx-2 px-4 py-2 rounded"
 29 |           title="Upload Image"
 30 |           @click="pane = 'upload'"
 31 |         >
 32 |           Add Image
 33 |         </button>
 34 |       </div>
 35 |     </div>
 36 | 
 37 |     <div
 38 |       v-show="pane === 'gallery'"
 39 |       class="w-full flex flex-wrap thumbnail-container overflow-y-scroll"
 40 |     >
 41 |       <div
 42 |         v-for="photo in images"
 43 |         :key="photo.id"
 44 |         :class="imagesPerRow"
 45 |         @click="select(photo)"
 46 |       >
 47 |         <div
 48 |           class="bg-white shadow mr-4 mb-4 cursor-pointer"
 49 |           :class="selectedPhoto.id === photo.id ? 'border border-blue-600' : ''"
 50 |         >
 51 |           <div class="w-full flex items-center justify-center thumbnail">
 52 |             <img
 53 |               v-bind:data-src="photo.url"
 54 |               :title="photo.name"
 55 |               class="mg-photo"
 56 |             />
 57 |           </div>
 58 |           <div
 59 |             class="w-full flex bg-white justify-between text-gray-600 text-xs p-2"
 60 |           >
 61 |             <span class="truncate">{{ photo.name }}</span>
 62 |           </div>
 63 |         </div>
 64 |       </div>
 65 |     </div>
 66 | 
 67 |     <div
 68 |       v-if="pane === 'photo'"
 69 |       class="w-full mx-auto py-4 px-4 bg-transparent flex justify-between items-center"
 70 |     >
 71 |       <button class="flex items-center" @click="pane = 'gallery'">
 72 |         <svg
 73 |           xmlns="http://www.w3.org/2000/svg"
 74 |           viewBox="0 0 20 20"
 75 |           class="fill-current h-8 w-8 rounded-full border border-gray-600 p-2 text-gray-600 mr-2"
 76 |         >
 77 |           <polygon
 78 |             points="3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9"
 79 |           />
 80 |         </svg>
 81 |         <p class="text-blue-700 text-xl">Back to Gallery</p>
 82 |       </button>
 83 | 
 84 |       <div class="flex items-center justify-between">
 85 |         <button
 86 |           @click="copy"
 87 |           v-if="allowCopy"
 88 |           class="py-2 px-6 text-blue-600 hover:text-blue-800 mt-4 ml-4"
 89 |         >
 90 |           {{ copyLinkText }}
 91 |         </button>
 92 |         <button
 93 |           @click="choose"
 94 |           v-if="allowChoose"
 95 |           class="py-2 px-6 bg-green-500 text-white rounded shadow text-xl mt-4 ml-4"
 96 |         >
 97 |           {{ chooseBtnText }}
 98 |         </button>
 99 |       </div>
100 |     </div>
101 | 
102 |     <div v-if="pane === 'photo'" class="w-full px-4 postcard-container">
103 |       <div class="w-full postcard">
104 |         <img
105 |           :src="selectedPhoto.url"
106 |           :title="selectedPhoto.name"
107 |           class="mx-auto shadow-lg mg-photo"
108 |         />
109 |       </div>
110 | 
111 |       <div class="w-full text-sm px-2 py-2 bg-white">
112 |         <table class="w-full mt-4 table-auto">
113 |           <tr class="border-b" v-for="(pk, pv) in imageProperties">
114 |             <td class="p-4 uppercase font-semibold text-gray-600">
115 |               {{ pk.toUpperCase() }}
116 |             </td>
117 |             <td class="p-4 font-mono">{{ selectedPhoto[pv] }}</td>
118 |           </tr>
119 |         </table>
120 | 
121 |         <button
122 |           @click="deleteSelected()"
123 |           v-if="allowDelete"
124 |           class="text-red-500 border m-4 mt-6 px-4 text-sm py-1 hover:border border-red-500 hover:text-white hover:bg-red-500 rounded cursor-pointer"
125 |         >
126 |           Delete
127 |         </button>
128 |       </div>
129 |     </div>
130 | 
131 |     <div
132 |       v-if="pane === 'upload'"
133 |       class="w-full p-4 postcard-container overflow-y-scroll"
134 |     >
135 |       <div class="flex justify-between">
136 |         <button class="flex items-center" @click="pane = 'gallery'">
137 |           <svg
138 |             xmlns="http://www.w3.org/2000/svg"
139 |             viewBox="0 0 20 20"
140 |             class="fill-current h-8 w-8 rounded-full border p-2 text-gray-600 mr-2"
141 |           >
142 |             <polygon
143 |               points="3.828 9 9.899 2.929 8.485 1.515 0 10 .707 10.707 8.485 18.485 9.899 17.071 3.828 11 20 11 20 9 3.828 9"
144 |             />
145 |           </svg>
146 |           <p class="text-gray-600 font-light text-lg hidden sm:block">
147 |             Back to Gallery
148 |           </p>
149 |         </button>
150 |         <form id="file-catcher" enctype="multipart/form-data" method="post">
151 |           <div class="w-full flex bg-transparent">
152 |             <label
153 |               class="flex items-center px-4 py-2 rounded-lg border border-blue-500 bg-white text-blue-500 tracking-wide cursor-pointer hover:bg-blue-500 hover:text-white"
154 |             >
155 |               <svg
156 |                 class="w-8 h-8 mr-4"
157 |                 fill="currentColor"
158 |                 xmlns="http://www.w3.org/2000/svg"
159 |                 viewBox="0 0 20 20"
160 |               >
161 |                 <path
162 |                   d="M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z"
163 |                 />
164 |               </svg>
165 |               <p class="text-base leading-normal">
166 |                 Upload
167 |                 <span class="hidden sm:inline">From Local Computer</span>
168 |               </p>
169 |               <input
170 |                 id="files"
171 |                 type="file"
172 |                 name="files"
173 |                 multiple
174 |                 class="hidden"
175 |                 @change="uploadFiles"
176 |               />
177 |             </label>
178 |           </div>
179 |         </form>
180 |       </div>
181 |       <div
182 |         id="file-list-display"
183 |         class="w-full my-4"
184 |         v-if="uploadableFiles.length > 0"
185 |       >
186 |         <table class="w-full my-2 text-sm">
187 |           <thead>
188 |             <tr class="bg-white text-left">
189 |               <th class="p-2 font-light hidden md:block">#</th>
190 |               <th class="p-2 font-light">File Name</th>
191 |               <th class="p-2 font-light">Status</th>
192 |               <th class="p-2 font-light">Progress</th>
193 |             </tr>
194 |           </thead>
195 |           <tbody>
196 |             <tr
197 |               class="p-2 border-b"
198 |               v-for="(f, index) in uploadableFiles"
199 |               v-bind:key="index"
200 |             >
201 |               <td v-text="index + 1" class="text-left p-2 hidden md:block"></td>
202 |               <td class="text-left p-2" v-text="f.name"></td>
203 |               <td>
204 |                 <span v-text="f.status"></span>
205 |               </td>
206 |               <td>
207 |                 <progress
208 |                   id="progressBar"
209 |                   :value="f.completion"
210 |                   max="100"
211 |                   class="my-2 w-full"
212 |                 ></progress>
213 |               </td>
214 |             </tr>
215 |           </tbody>
216 |         </table>
217 |       </div>
218 |     </div>
219 | 
220 |     <div
221 |       class="p-2 bg-white w-full text-sm text-gray-600 rounded"
222 |       id="message"
223 |       v-if="message"
224 |     >
225 |       <span v-text="message"></span>
226 |     </div>
227 |   </div>
228 | </template>
229 | 
230 | <script>
231 | export default {
232 |   name: 'vue-image-browser',
233 | 
234 |   props: {
235 |     images: {
236 |       type: Array,
237 |       default: () => [],
238 |     },
239 | 
240 |     imageProperties: {
241 |       type: Object,
242 |     },
243 | 
244 |     allowUpload: {
245 |       type: Boolean,
246 |       default: false,
247 |     },
248 | 
249 |     saveUrl: {
250 |       type: String,
251 |       default: '/api/photos',
252 |     },
253 | 
254 |     saveRequestHeaders: {
255 |       type: Object,
256 |       default: () => {},
257 |     },
258 | 
259 |     searchDelay: {
260 |       type: Number,
261 |       default: 500,
262 |     },
263 | 
264 |     allowDelete: {
265 |       type: Boolean,
266 |       default: false,
267 |     },
268 | 
269 |     allowPhotoPane: {
270 |       type: Boolean,
271 |       default: false,
272 |     },
273 | 
274 |     allowChoose: {
275 |       type: Boolean,
276 |       default: false,
277 |     },
278 | 
279 |     allowCopy: {
280 |       type: Boolean,
281 |       default: true,
282 |     },
283 | 
284 |     captionable: {
285 |       type: Boolean,
286 |       default: false,
287 |     },
288 | 
289 |     enableLazyLoad: {
290 |       type: Boolean,
291 |       default: true,
292 |     },
293 | 
294 |     maxImagesPerRow: {
295 |       type: Number,
296 |       default: 5,
297 |     },
298 | 
299 |     postKey: {
300 |       type: String,
301 |       default: 'image',
302 |     },
303 |   },
304 | 
305 |   data: function () {
306 |     return {
307 |       message: null,
308 |       query: '',
309 |       searchResult: null,
310 |       pane: 'gallery',
311 |       selectedPhoto: {},
312 |       uploadableFiles: [],
313 |       copyLinkText: 'Copy Link',
314 |       chooseBtnText: 'Choose',
315 |     }
316 |   },
317 | 
318 |   created() {
319 |     this.$nextTick(function () {
320 |       if (this.enableLazyLoad) {
321 |         this.enableLazyLoading()
322 |       }
323 |     })
324 |   },
325 | 
326 |   updated: function () {
327 |     this.$nextTick(function () {
328 |       if (this.enableLazyLoad) {
329 |         this.enableLazyLoading()
330 |       }
331 |     })
332 |   },
333 | 
334 |   computed: {
335 |     imagesPerRow() {
336 |       let xs = parseInt(this.maxImagesPerRow * (1 / 4)),
337 |         md = parseInt(this.maxImagesPerRow * (2 / 4)),
338 |         lg = parseInt(this.maxImagesPerRow * (3 / 4)),
339 |         xl = parseInt(this.maxImagesPerRow * (4 / 4))
340 | 
341 |       return (
342 |         'w-full w-1/' + xs + ' md:w-1/' + md + ' lg:w-1/' + lg + ' xl:w-1/' + xl
343 |       )
344 |     },
345 |   },
346 | 
347 |   methods: {
348 |     select(photo) {
349 |       this.selectedPhoto = photo
350 | 
351 |       this.allowPhotoPane && (this.pane = 'photo')
352 | 
353 |       this.captionable && (this.selectedPhoto['caption'] = this.getCaption())
354 | 
355 |       this.$emit('selected', this.selectedPhoto)
356 |     },
357 | 
358 |     choose: function () {
359 |       this.captionable && (this.selectedPhoto['caption'] = this.getCaption())
360 | 
361 |       this.$emit('chosen', this.selectedPhoto)
362 | 
363 |       this.pane = 'gallery'
364 |     },
365 | 
366 |     copy() {
367 |       let p = this
368 | 
369 |       if (navigator.clipboard) {
370 |         navigator.clipboard.writeText(this.selectedPhoto.url).then(() => {
371 |           p.copyLinkText = 'Link Copied!'
372 |         })
373 |       }
374 |     },
375 | 
376 |     getCaption() {
377 |       // remove file name extensions
378 |       let caption = this.selectedPhoto.name.replace(/\.[^/.]+$/, '')
379 | 
380 |       // remove special characters with space
381 |       caption = caption.replace(/[^\w\s]/gi, ' ')
382 | 
383 |       // uppercase first letter of each word
384 |       caption = caption
385 |         .toLowerCase()
386 |         .split(' ')
387 |         .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
388 |         .join(' ')
389 | 
390 |       return prompt('Enter an caption for this image', caption)
391 |     },
392 | 
393 |     uploadFiles: function () {
394 |       let files = document.getElementById('files').files,
395 |         p = this
396 | 
397 |       for (let i = 0; i < files.length; i++) {
398 |         let upf = {
399 |           name: files[i].name,
400 |           formdata: new FormData(),
401 |           ajax: new XMLHttpRequest(),
402 |           status: 'Not Started',
403 |           completion: 0,
404 |         }
405 | 
406 |         upf.formdata.append(this.postKey, files[i])
407 |         upf.formdata.append('name', files[i].name)
408 | 
409 |         upf.ajax.upload.onprogress = function (e) {
410 |           upf.status = 'Uploaded ' + Math.round(e.loaded / 1000) + ' KB...'
411 |           upf.completion = Math.round((e.loaded / e.total) * 100)
412 |         }
413 |         upf.ajax.upload.onload = function (e) {
414 |           upf.status = 'Complete'
415 |           upf.completion = 100
416 |         }
417 |         upf.ajax.upload.onerror = function (e) {
418 |           upf.status = 'Error uploading the file'
419 |           upf.completion = 0
420 |         }
421 |         // ajax.upload.addEventListener('abort', abortHandler, false);
422 | 
423 |         upf.ajax.open('POST', p.saveUrl)
424 | 
425 |         let header_keys = Object.keys(p.saveRequestHeaders)
426 |         for (let i = 0; i < header_keys.length; i++) {
427 |           let header = header_keys[i]
428 |           let val = p.saveRequestHeaders[header]
429 |           upf.ajax.setRequestHeader(header, val)
430 |         }
431 | 
432 |         upf.ajax.onreadystatechange = function () {
433 |           if (upf.ajax.readyState === 4 && upf.ajax.status === 200) {
434 |             let response = upf.ajax.responseText
435 |             if (response) {
436 |               try {
437 |                 let media = JSON.parse(response)
438 |                 p.$emit('saved', media)
439 |               } catch (e) {
440 |                 alert(e)
441 |               }
442 |             }
443 |           }
444 |           if (upf.ajax.readyState === 4 && upf.ajax.status != 200) {
445 |             upf.status =
446 |               'Error uploading the file (Status = ' + upf.ajax.status + ')'
447 |             upf.completion = 0
448 |           }
449 |         }
450 |         upf.ajax.send(upf.formdata)
451 |         this.uploadableFiles.push(upf)
452 |       }
453 |     },
454 | 
455 |     deleteSelected() {
456 |       this.$emit('deleted', this.selectedPhoto)
457 |       this.pane = 'gallery'
458 |     },
459 | 
460 |     doDelayedSearch() {
461 |       let p = this
462 | 
463 |       if (this.timer) {
464 |         clearTimeout(this.timer)
465 |         this.timer = null
466 |       }
467 | 
468 |       if (p.query.length > 0) p.searchResult = 'Searching...'
469 |       else p.searchResult = ''
470 | 
471 |       this.timer = setTimeout(() => {
472 |         p.$emit('searched', p.query)
473 |       }, this.searchDelay)
474 |     },
475 | 
476 |     // This is an experimental function that enables
477 |     // lazy-loading.
478 |     enableLazyLoading() {
479 |       let images = document.querySelectorAll('.mg-photo')
480 | 
481 |       const config = {
482 |         root: null,
483 |         rootMargin: '0px 0px 50px 0px',
484 |       }
485 | 
486 |       // check if intersection observer is supported via browser
487 |       if (!('IntersectionObserver' in window)) {
488 |         // if not, just load all immediately
489 |         Array.from(images).forEach(function (image) {
490 |           console.log('IntersectionObserver unsupported loading')
491 |           if (!image.src) image.src = image.dataset.src
492 |         })
493 |       } else {
494 |         let observer = new IntersectionObserver(function (entries) {
495 |           entries.forEach((image) => {
496 |             // Are we in viewport?
497 |             if (image.isIntersecting) {
498 |               // console.log('Loading: ' + image.target.dataset.src)
499 |               // console.log(image.target.src)
500 |               image.target.src = image.target.dataset.src
501 |               observer.unobserve(image.target)
502 |             }
503 |           })
504 |         }, config)
505 | 
506 |         images.forEach((image) => {
507 |           if (!image.src) {
508 |             observer.observe(image)
509 |           }
510 |         })
511 |       }
512 |     },
513 |   },
514 | }
515 | </script>
516 | 
517 | <style>
518 | @media only screen and (min-width: 640px) {
519 |   .thumbnail {
520 |     height: 300px;
521 |     overflow: hidden;
522 |   }
523 | }
524 | @media only screen and (min-width: 768px) {
525 |   .thumbnail {
526 |     height: 250px;
527 |     overflow: hidden;
528 |   }
529 | }
530 | @media only screen and (min-width: 1024px) {
531 |   .thumbnail {
532 |     height: 200px;
533 |     overflow: hidden;
534 |   }
535 | }
536 | @media only screen and (min-width: 1280px) {
537 |   .thumbnail {
538 |     height: 120px;
539 |     overflow: hidden;
540 |   }
541 | }
542 | 
543 | .mg-photo {
544 |   width: 100%;
545 |   height: 100%;
546 |   object-fit: cover;
547 | }
548 | </style>
549 | 


--------------------------------------------------------------------------------
/src/wrapper.js:
--------------------------------------------------------------------------------
 1 | // Import vue component
 2 | import component from './vue-image-browser.vue';
 3 | 
 4 | // Declare install function executed by Vue.use()
 5 | export function install(Vue) {
 6 | 	if (install.installed) return;
 7 | 	install.installed = true;
 8 | 	Vue.component('VueImageBrowser', component);
 9 | }
10 | 
11 | // Create module definition for Vue.use()
12 | const plugin = {
13 | 	install,
14 | };
15 | 
16 | // Auto-install when vue is found (eg. in browser via <script> tag)
17 | let GlobalVue = null;
18 | if (typeof window !== 'undefined') {
19 | 	GlobalVue = window.Vue;
20 | } else if (typeof global !== 'undefined') {
21 | 	GlobalVue = global.Vue;
22 | }
23 | if (GlobalVue) {
24 | 	GlobalVue.use(plugin);
25 | }
26 | 
27 | // To allow use as module (npm/webpack/etc.) export component
28 | export default component;


--------------------------------------------------------------------------------