Allow sile-sink to be build for packaging to npmjs.com and add more...

Allow sile-sink to be build for packaging to npmjs.com and add more documentation and examples (#36)

packages/file-handling/.gitignore

@@ -3,3 +3,4 @@ node_modules
 .idea
 npm-debug.log
 package-lock.json
+index.html

packages/file-handling/.npmignore

@@ -2,3 +2,4 @@ node_modules
 .idea
 npm-debug.log
 package-lock.json
+index.html

packages/file-handling/README.md

 # File handling web components
 
+You can install these components via npm:
+
+```bash
+npm i @dbp-toolkit/file-handling
+```
+
+After you have installed the file handling components via npm you can use this example to get a button
+that opens the file source dialog. After you have selected a file you will see it in your browser log,
+and the file sink dialog will open, so you are able to store the file again.
+
+```html
+<button onclick="openFilePicker()">Open file picker</button>
+<dbp-file-source lang="en"></dbp-file-source>
+<dbp-file-sink lang="en"></dbp-file-sink>
+
+<script>
+    const fileSource = document.querySelector("dbp-file-source");
+    const fileSink = document.querySelector("dbp-file-sink");
+
+    // Listen to the event from file source
+    fileSource.addEventListener("dbp-file-source-file-selected", (ev) => {
+        const file = ev.detail.file;
+        console.log("File selected: ", file)
+
+        // This will open the file sink dialog
+        fileSink.files = [file];
+    }); 
+
+    function openFilePicker() {
+        // This will open the file source dialog
+        fileSource.setAttribute("dialog-open", "");
+    }
+</script>
+<script type="module" src="node_modules/@dbp-toolkit/file-handling/dist/dbp-file-source.js"></script>
+<script type="module" src="node_modules/@dbp-toolkit/file-handling/dist/dbp-file-sink.js"></script>
+```
+
 ## FileSource
 
 This web component allows the selection of local files via file dialog or drag and drop and to select and download
@@ -34,8 +71,8 @@ files from a [Nextcloud](https://nextcloud.com/) instance.
 - `nextcloud-web-dav-url` (optional): Nextcloud WebDav Url to use with the Nextcloud file picker
     - example `<dbp-file-source nextcloud-web-dav-url="http://localhost:8081/remote.php/dav/files"></dbp-file-source>`
     - `nextcloud-auth-url` also needs to be set for the Nextcloud file picker to be active
-- `dialog-open` (optional): if this attribute is set the dialog for selecting local or Nextcloud files will open
-    - example `<dbp-file-source dialog-open></dbp-file-source>`
+- `dialog-open` (optional): if this attribute is set at runtime the dialog for selecting local or Nextcloud files will open
+    - example `document.querySelector("dbp-file-source").setAttribute("dialog-open", "")`
 - `text` (optional): the text that is shown above the button to select files
     - example `<dbp-file-source text="Please select some files"></dbp-file-source>`
 - `button-label` (optional): the text that is shown on the button to select files
@@ -84,6 +121,7 @@ files to a [Nextcloud](https://nextcloud.com/) instance.
 
 - `files`: an array of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects which should be downloaded in the dialog
     - if the property is set the dialog opens
+    - example: `document.querySelector("dbp-file-sink").files = [file]` where `file` is your File object
 
 ## Local development
 

packages/file-handling/package.json

 {
   "name": "@dbp-toolkit/file-handling",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "main": "src/index.js",
   "license": "LGPL-2.1-or-later",
   "devDependencies": {

packages/file-handling/rollup.config.js

@@ -18,7 +18,7 @@ let nextcloudFileURL = nextcloudBaseURL + '/apps/files/?dir=';
 
 export default (async () => {
     return {
-        input: (build !== 'test') ? ['src/demo.js', 'src/dbp-file-source.js'] : glob.sync('test/**/*.js'),
+        input: (build !== 'test') ? ['src/demo.js', 'src/dbp-file-source.js', 'src/dbp-file-sink.js'] : glob.sync('test/**/*.js'),
         output: {
             dir: 'dist',
             entryFileNames: '[name].js',

packages/file-handling/src/demo.js

@@ -3,6 +3,7 @@ import {html, LitElement} from 'lit-element';
 import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import {ScopedElementsMixin} from '@open-wc/scoped-elements';
 import {FileSource} from './file-source.js';
+import {FileSink} from './file-sink.js';
 import * as commonUtils from '@dbp-toolkit/common/utils';
 
 export class FileSourceDemo extends ScopedElementsMixin(LitElement) {
@@ -15,6 +16,7 @@ export class FileSourceDemo extends ScopedElementsMixin(LitElement) {
     static get scopedElements() {
         return {
           'dbp-file-source': FileSource,
+          'dbp-file-sink': FileSink,
         };
     }
 
@@ -95,6 +97,8 @@ export class FileSourceDemo extends ScopedElementsMixin(LitElement) {
                      <p>Text and images (JPG, PNG, GIF, TIF, ...) :</p>
                     <dbp-file-source lang="en" url="${this.url}" allowed-mime-types="text/plain,image/*"
                         text="Abgabe für Text und Bilder "></dbp-file-source>
+
+                    <dbp-file-sink lang="en"></dbp-file-sink>
                </div>
             </section>
         `;