add integration guide about vanilla javscript standalone button

Author: streamtw

docs/integration.md

@@ -172,32 +172,61 @@ If you are going to use filemanager independently, meaning set the value of an i
     Domain can be specified in the second parameter(optional, but will be required when developing on Windows mechines) :
 
     ```javascript
-    var domain = "{{ url() }}";
-    $('#lfm').filemanager('image', {prefix: domain});
+    var route_prefix = "url-to-filemanager";
+    $('#lfm').filemanager('image', {prefix: route_prefix});
     ```
 
 ## JavaScript integration
 In case you are developing javascript application and you want dynamically to trigger filemanager popup, you can create function like this. It doesn't rely on jQuery.
 
 
 ```javascript
-var lfm = function(options, cb) {
-
-  var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
+var lfm = function(id, type, options) {
+  let button = document.getElementById(id);
+
+  button.addEventListener('click', function () {
+    var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
+    var target_input = document.getElementById(button.getAttribute('data-input'));
+    var target_preview = document.getElementById(button.getAttribute('data-preview'));
+
+    window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
+    window.SetUrl = function (items) {
+      var file_path = items.map(function (item) {
+        return item.url;
+      }).join(',');
+
+      // set the value of the desired input to image url
+      target_input.value = file_path;
+      target_input.dispatchEvent(new Event('change'));
+
+      // clear previous preview
+      target_preview.innerHtml = '';
+
+      // set or change the preview image src
+      items.forEach(function (item) {
+        let img = document.createElement('img')
+        img.setAttribute('style', 'height: 5rem')
+        img.setAttribute('src', item.thumb_url)
+        target_preview.appendChild(img);
+      });
 
-  window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
-  window.SetUrl = cb;
-}
+      // trigger change event
+      target_preview.dispatchEvent(new Event('change'));
+    };
+  });
+};
 ```
 
 And use it like this:
 
 ```javascript
-lfm({type: 'image', prefix: 'prefix'}, function(url, path) {
-
-});
+var route_prefix = "url-to-filemanager";
+lfm('lfm', 'image', {prefix: route_prefix});
+lfm('lfm2', 'file', {prefix: route_prefix});
 ```
 
+The first parameter is id, the second parameter is the type of laravel filemanager(which ).
+
 ## Embed file manager
 
 ```html

src/views/demo.blade.php

@@ -118,7 +118,46 @@
   </script>
   <script>
     $('#lfm').filemanager('image', {prefix: route_prefix});
-    $('#lfm2').filemanager('file', {prefix: route_prefix});
+    // $('#lfm').filemanager('file', {prefix: route_prefix});
+  </script>
+
+  <script>
+    var lfm = function(id, type, options) {
+      let button = document.getElementById(id);
+
+      button.addEventListener('click', function () {
+        var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
+        var target_input = document.getElementById(button.getAttribute('data-input'));
+        var target_preview = document.getElementById(button.getAttribute('data-preview'));
+
+        window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
+        window.SetUrl = function (items) {
+          var file_path = items.map(function (item) {
+            return item.url;
+          }).join(',');
+
+          // set the value of the desired input to image url
+          target_input.value = file_path;
+          target_input.dispatchEvent(new Event('change'));
+
+          // clear previous preview
+          target_preview.innerHtml = '';
+
+          // set or change the preview image src
+          items.forEach(function (item) {
+            let img = document.createElement('img')
+            img.setAttribute('style', 'height: 5rem')
+            img.setAttribute('src', item.thumb_url)
+            target_preview.appendChild(img);
+          });
+
+          // trigger change event
+          target_preview.dispatchEvent(new Event('change'));
+        };
+      });
+    };
+
+    lfm('lfm2', 'file', {prefix: route_prefix});
   </script>
 
   <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">