Bump to version 2.0.0.

- Fix missing title for uploaded file success toast.
- Fix tests.
- Update `README.md`.
- Add `TODO.md`.
- Update `index.html`.

README.md

@@ -1,34 +1,71 @@
-This is a WIP branch, to test, run:
+# webdav-js
+
+A simple way to administer a WebDAV filesystem from your browser.
+
+The original aim for this project was to provide a bookmarklet for use when you want to administer a WebDAV server,
+without the need for using a third party application.
+
+The application has since been rewritten to not rely on jQuery and use more modern methods and provide a single runtime
+file. Now that there's more separation between the interface code and the library code, I'd like to investigate using
+other frontend approaches to see which I prefer (and also to weigh up the differences between the currently available
+frameworks). There's still work to do around code separation andhopefully this will be something I can continue to work
+on (as time allows) I feel it's at least as stable as the previous version.
+
+
+## Tested in:
+
+- Chrome
+- Firefox
+- Edge
+- IE11 (I may drop support for this to reduce the package size in the future - unless anyone REALY needs it?)
+
+
+## Implementations
+
+### Bookmarklet:
+
+```javascript:["https://cdn.jsdelivr.net/gh/dom111/webdav-js/assets/css/style-min.css","https://cdn.jsdelivr.net/gh/dom111/webdav-js/src/webdav-min.js"].forEach((function(e,s){/css$/.test(e)?((s=document.createElement("link")).href=e,s.rel="stylesheet"):(s=document.createElement("script")).src=e,document.head.appendChild(s)}));```
+
+[or drag this link directly](javascript:%5B%22https%3A//cdn.jsdelivr.net/gh/dom111/webdav-js/assets/css/style-min.css%22%2C%22https%3A//cdn.jsdelivr.net/gh/dom111/webdav-js/src/webdav-min.js%22%5D.forEach%28%28function%28e%2Cs%29%7B/css%24/.test%28e%29%3F%28%28s%3Ddocument.createElement%28%22link%22%29%29.href%3De%2Cs.rel%3D%22stylesheet%22%29%3A%28s%3Ddocument.createElement%28%22script%22%29%29.src%3De%2Cdocument.head.appendChild%28s%29%7D%29%29%3B)
+
+### Apache:
+
+There is also an example for how you could set up Apache in the `examples/` directory (one using a locally hosted
+version of the library, and one using a CDN).
+
+Think you have another example implementation that would be good to showcase?
+[Fork this repository](https://github.com/dom111/webdav-js/fork) and make a PR!
+
+
+## Test the library
+
+Included in the package is a `docker-compose.yml` file that can spawn an Alpine Linux Apache WebDAV server that uses the
+example Apache configuration so you can see the library in action if you don't have a WebDAV server at your disposal.
+
+To start it, run:
 
-    yarn install # or npm install
-    yarn build # or npm run build
     docker-compose up
 
 and navigate to `http://localhost:8080/`.
 
-Before releasing v2.0.0 I'd like to:
-
-- [x] Use `docker-compose` and automate all the `run-local` scripts
-- [x] Fix upload...
-- [x] Add missing functionality
-- [X] Add unit tests
-- [x] Add webpack/something to bundle everything
-- [x] Handle errors from `fetch`
-- [x] Handle errors from navigation (`history.back()`)
-- [x] Run a `HEAD` for images/fonts/etc.
-- [x] Add keyboard navigation (up/down arrow)
-- [x] Dynamically update the list when uploading files with placeholders
-- [x] Fix rename bug after successfully renaming a file (rename input box shows previous filename)
-- [x] Test other browsers - Firefox and IE11
-- [x] Fix IE11
-
-Beyond that:
-
-- [ ] Add more unit tests
-- [ ] Add end-to-end UI testing
-- [ ] Allow uploading of directories ([#48](https://github.com/dom111/webdav-js/issues/48))
-- [ ] Add functionality for copying and moving files and directories
-- [ ] Support keyboard navigation whilst overlay is visible
-- [ ] Add progress bar for file uploads
-- [ ] Improve code in `item.js` - maybe split out the functionality into each action?
-- [ ] Look into conversion to TypeScript
+
+## Contributing
+
+If you feel this can be improved (I'm certain it can!), please feel free to fork it and submit a PR.
+
+To start making changes, ensure you install all the dependencies:
+
+    yarn install # or npm install
+
+After making changes, ensure you rebuild the application:
+
+    yarn build # or npm run build
+
+Once your changes have compiled you can test using the Docker container.
+
+
+### Unit Tests
+
+To run the unit tests:
+
+    docker-compose run --workdir=/src --rm test yarn test

TODO.md

@@ -0,0 +1,12 @@
+- [ ] Allow uploading of directories ([#48](https://github.com/dom111/webdav-js/issues/48))
+- [ ] Add functionality for copying and moving files and directories
+- [ ] Add progress bar for file uploads
+- [ ] Add more unit tests for the UI
+- [ ] Add end-to-end UI testing (although it seems that drag and drop might be a problem)
+- [ ] Support keyboard navigation whilst overlay is visible
+- [ ] Improve code in `item.js` - maybe split out the functionality into each action?
+- [ ] Look into moving to TypeScript
+- [ ] ReactJS implementation
+- [ ] VueJS implementation
+- [ ] Native Web Components implementation
+- [ ] Angular implementation

index.html

@@ -21,8 +21,8 @@
 
         <div class="jumbotron">
             <div class="container">
-                <h1><code>webdav-js</code> <span class="version" title="Last updated: 2017-02-21">v0.2</span></h1>
-                <p>A browswer-based WebDAV client, written in JavaScript.</p>
+                <h1><code>webdav-js</code> <span class="version" title="Last updated: 2019-11-22">v2.0.0</span></h1>
+                <p>A browser-based WebDAV client, written in JavaScript.</p>
             </div>
         </div>
 
@@ -32,32 +32,48 @@
                     <h2 class="panel-title panel-title-lg">Information</h2>
                 </div>
                 <div class="panel-body">
-                    <p>This simple WebDAV browsing/uploading client is fairly light and a useful addition to your bookmarks. It supports previewing of moany common filetypes (syntax highlighting for code, previews for images/videos/fonts), drag and drop file uplaods and history state (for back button navigation).</p>
-                    <p>Whilst this started out as a very simple bookmarklet with some basic styling (and whilst it's still that!), I'd like to improve it somewhat, perhaps using jsTree to handle a copy/move dialog and test it more thoroughly, but I use it personally fairly regularly for minor file changes.</p>
-                    <p>Here's how it looks:</p>
-                    <figure><img src="https://i.imgur.com/7KKX42z.png"/></figure>
+                    <p>
+                      This simple WebDAV browsing/uploading client is a useful cross-browser addition to the bookmarks
+                      of anyone that has to interact with WebDAV. It supports previewing of many common filetypes
+                      (syntax highlighting for code, previews for images/videos/fonts), drag and drop file uplaods and
+                      history state (for back button navigation).
+                    </p>
+                    <p>
+                      Whilst this started out as a very simple bookmarklet with some basic styling (and it's still not
+                      much more than that!), I'd like to continue improve it somewhat, adding in new features and using
+                      it as a testbed for front-end framework experience. I'd like to investigate more thorough testing
+                      using it too, ideally performing full end-to-end testing for all the features currently
+                      implemented.
+                    </p>
+                    <p>
+                      To see how it looks clone the repo, run: <code>docker-compose up</code> and navigate to
+                      <a href="http://localhost:8080/">http://localhost:8080/</a>.
+                    </p>
                     <p>You're free to use this tool without restriction.</p>
                 </div>
 
                 <div class="panel-footer">
                     <aside class="options">
                         <h3>Use it</h3>
-                        <p>There's a <a href="https://github.com/dom111/webdav-js">github repository</a> where you can download the source that also includes example implementations.</p>
+                        <p>
+                          There's a <a href="https://github.com/dom111/webdav-js">github repository</a> where you can
+                          download the source that also includes example implementations.
+                        </p>
                         <p>I've also created a bookmarklet that you can add to your bookmarks bar:</p>
 
                         <p class="text-center">
-                            <a href="javascript:!function(){var e;e=[&quot;https://cdn.jsdelivr.net/gh/noelboss/featherlight@1.7.1/release/featherlight.min.js&quot;,&quot;https://cdn.jsdelivr.net/gh/google/code-prettify/loader/run_prettify.js?autorun=false&quot;,&quot;https://cdn.jsdelivr.net/gh/notifyjs/notifyjs/dist/notify.js&quot;,&quot;https://cdn.jsdelivr.net/gh/noelboss/featherlight@1.7.1/release/featherlight.min.css&quot;,&quot;https://cdn.jsdelivr.net/gh/dom111/webdav-js/assets/css/style-min.css&quot;,&quot;https://cdn.jsdelivr.net/gh/dom111/webdav-js/src/webdav-min.js&quot;];var t,n=document.getElementsByTagName(&quot;head&quot;)[0],a=function(e,t){var s=document.createElement(&quot;script&quot;);s.src=e,s.type=&quot;text/javascript&quot;,t&&(s.onload=t),n.appendChild(s)};a(&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js&quot;,function(){e.forEach(function(e){var t,s;e.match(/css$/)?(t=e,(s=document.createElement(&quot;link&quot;)).href=t,s.rel=&quot;stylesheet&quot;,n.appendChild(s)):a(e)})}),(t=document.createElement(&quot;meta&quot;)).name=&quot;viewport&quot;,t.content=&quot;width=device-width, initial-scale=1&quot;,n.appendChild(t)}();" class="btn btn-primary btn-lg">
+                            <a href="javascript:%5B%22https%3A//cdn.jsdelivr.net/gh/dom111/webdav-js/assets/css/style-min.css%22%2C%22https%3A//cdn.jsdelivr.net/gh/dom111/webdav-js/src/webdav-min.js%22%5D.forEach%28%28function%28e%2Cs%29%7B/css%24/.test%28e%29%3F%28%28s%3Ddocument.createElement%28%22link%22%29%29.href%3De%2Cs.rel%3D%22stylesheet%22%29%3A%28s%3Ddocument.createElement%28%22script%22%29%29.src%3De%2Cdocument.head.appendChild%28s%29%7D%29%29%3B" class="btn btn-primary btn-lg">
                                 Browse WebDAV...
                             </a>
                         </p>
                         <p>or copy/paste from the below:</p>
-                       <pre class="copy-paste"><code class="js">javascript:!function(){var e;e=[&quot;https://cdn.jsdelivr.net/gh/noelboss/featherlight@1.7.1/release/featherlight.min.js&quot;,&quot;https://cdn.jsdelivr.net/gh/google/code-prettify/loader/run_prettify.js?autorun=false&quot;,&quot;https://cdn.jsdelivr.net/gh/notifyjs/notifyjs/dist/notify.js&quot;,&quot;https://cdn.jsdelivr.net/gh/noelboss/featherlight@1.7.1/release/featherlight.min.css&quot;,&quot;https://cdn.jsdelivr.net/gh/dom111/webdav-js/assets/css/style-min.css&quot;,&quot;https://cdn.jsdelivr.net/gh/dom111/webdav-js/src/webdav-min.js&quot;];var t,n=document.getElementsByTagName(&quot;head&quot;)[0],a=function(e,t){var s=document.createElement(&quot;script&quot;);s.src=e,s.type=&quot;text/javascript&quot;,t&&(s.onload=t),n.appendChild(s)};a(&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js&quot;,function(){e.forEach(function(e){var t,s;e.match(/css$/)?(t=e,(s=document.createElement(&quot;link&quot;)).href=t,s.rel=&quot;stylesheet&quot;,n.appendChild(s)):a(e)})}),(t=document.createElement(&quot;meta&quot;)).name=&quot;viewport&quot;,t.content=&quot;width=device-width, initial-scale=1&quot;,n.appendChild(t)}()</code><a class="btn btn-primary btn-xs copy" href="#" data-clipboard-target="pre.copy-paste code">Copy</a></pre>
+                       <pre class="copy-paste"><code class="js">javascript:["https://cdn.jsdelivr.net/gh/dom111/webdav-js/assets/css/style-min.css","https://cdn.jsdelivr.net/gh/dom111/webdav-js/src/webdav-min.js"].forEach((function(e,s){/css$/.test(e)?((s=document.createElement("link")).href=e,s.rel="stylesheet"):(s=document.createElement("script")).src=e,document.head.appendChild(s)}));</code><a class="btn btn-primary btn-xs copy" href="#" data-clipboard-target="pre.copy-paste code">Copy</a></pre>
                     </aside>
                 </div>
             </section>
 
             <footer>
-                <p>Copyright &copy; 2012-2017 <a href="https://dom.hastin.gs/">Dom Hastings</a></p>
+                <p>Copyright &copy; 2012-2019 <a href="https://dom.hastin.gs/">Dom Hastings</a></p>
             </footer>
         </div>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webdav-js",
-  "version": "2.0.0-rc2",
+  "version": "2.0.0",
   "description": "WebDAV functionality intended for use as a bookmarklet or to make a simple Apache webserver an interactive WebDAV environment.",
   "repository": {
     "type": "git",
@@ -20,7 +20,8 @@
     "build:examples:branch": "bash build/examples-branch.sh",
     "build:examples": "bash build/examples.sh",
     "build:sass": "bash build/sass.sh",
-    "build": "npm run eslint -- src --fix && npm run build:examples && npm run stylelint -- assets/scss/style.scss && npm run build:sass && webpack"
+    "build": "npm run eslint -- src --fix && npm run build:examples && npm run stylelint -- assets/scss/style.scss && npm run build:sass && webpack",
+    "test": "karma start karma.conf.js"
   },
   "devDependencies": {
     "@babel/core": "^7.6.2",

src/lib/DAV/Entry.js

@@ -56,10 +56,10 @@ export default class Entry extends EventObject {
   }
 
   getFilename(path = this.#fullPath) {
-    path = path.replace(/\/$/, '').split(/\//);
+    path = joinPath(path).split(/\//);
     const file = path.pop();
 
-    return [`${path.join('/')}/`, file];
+    return [joinPath(...path), file];
   }
 
   update(properties = {}) {

src/lib/UI/NativeDOM.js

@@ -93,7 +93,7 @@ export default class NativeDOM extends UI {
 
     this.on('upload:success', async (path, file) => {
       new Melba({
-        content: `'${file.title}' has been successfully uploaded.`,
+        content: `'${file.name}' has been successfully uploaded.`,
         type: 'success',
         hide: 5
       });

tests/unit/DAV/Collection.test.js

@@ -30,7 +30,7 @@ describe('Collection', () => {
   ;
 
   it('should the expected path from the first entry', () => {
-    expect(collection.path).toBe('/path/to/');
+    expect(collection.path).toBe('/path/to');
   });
 
   it('should create a new parent entry from the original first item', () => {

tests/unit/DAV/Entry.test.js

@@ -24,7 +24,7 @@ describe('Entry', () => {
 
   // directory
   it('should strip the trailing slash for directories', () => {
-    expect(directory.path).toBe('/path/');
+    expect(directory.path).toBe('/path');
     expect(directory.name).toBe('to');
   });
 
@@ -51,7 +51,7 @@ describe('Entry', () => {
 
   // file
   it('should return the expected path', () => {
-    expect(file.path).toBe('/path/to/');
+    expect(file.path).toBe('/path/to');
   });
 
   it('should return the expected filename', () => {

tests/unit/DAV/Response.test.js

@@ -13,7 +13,7 @@ describe('Response', () => {
     ;
 
     expect(collection).toBeInstanceOf(Collection);
-    expect(collection.path).toBe('/path/to/');
+    expect(collection.path).toBe('/path/to');
     expect(entries.length).toBe(3);
     expect(directory.directory).toBeTrue();
     expect(directory.title).toBe('directory');