use component instead so we can use it under any vue instance

Author: ctf0

README.md

@@ -145,7 +145,8 @@ return [
 
 #### - Simple
 - visit `http://127.0.0.1:8000/media`
-- open `views/vendor/MediaManager/bulma/media.blade.php` and make any changes you may need ex.**"use bootstrap instead of bulma"**
+- open `views/vendor/MediaManager/bulma/media.blade.php` and make any changes you may need.
+    + if you need to use different css framework ex."bootstrap", you'll have to edit the components as well.
 
 #### - Advanced
 - install javascript dependencies
@@ -161,17 +162,26 @@ npm install vue dropzone keycode vue-tippy vue2-filters vue-lightbox vuemit
 > ***Or Use another Framework***
 >
 > - duplicate `views/vendor/MediaManager/bulma` and rename it to the framework you want ex.`bootstrap`
-> - duplicate `assets/vendor/MediaManager/js/components/bulma-notif` and rename it to the framework you want ex.`bootstrap-notif`
+> - duplicate `assets/vendor/MediaManager/js/components/bulma` and rename it to the framework you want ex.`bootstrap`
 > - duplicate `assets/vendor/MediaManager/sass/bulma` and rename it to the framework you want ex.`bootstrap`
 > - set `MIX_MM_FRAMEWORK` to the framework name ex.`MIX_MM_FRAMEWORK=bootstrap`
 > - start editing the new files.
 > - run `npm run watch` to compile your `js/css` files.
 >
 > after you are done, maybe you can send me a PR so everyone else can benefit from it :trophy:
 
+- at last, simply add this one liner to your main js file
+
+```js
+require('./../vendor/MediaManager/js/media')
+
+new Vue({
+    el: '#app'
+})
+```
+
 ## ToDo "ANY HELP IS APPRECIATED"
 
 * [ ] Add Support To Other Css Frameworks.
-* [ ] Add Support For Editors "tinymce / Ckeditor/ etc".
+* [ ] Add Support For Editors usage "tinymce / Ckeditor/ etc".
 * [ ] Fix `sortBy:size` To Work Properly With (kb vs Mb).
-* [ ] Turn into component instead.

src/Commands/MMAppend.php

@@ -50,10 +50,10 @@ public function handle()
         $mix_file = base_path('webpack.mix.js');
         $search   = 'MediaManager';
         if (File::exists($mix_file) && !str_contains(File::get($mix_file), $search)) {
-            $data = "\n// Media-Manager\nmix.js('resources/assets/vendor/MediaManager/js/media.js', 'public/assets/vendor/MediaManager/script.js')\n\t.sass('resources/assets/vendor/MediaManager/sass/' + process.env.MIX_MM_FRAMEWORK + '/media.scss', 'public/assets/vendor/MediaManager/style.css')\n\t.version();";
+            $data = "\n// Media-Manager\nmix.sass('resources/assets/vendor/MediaManager/sass/' + process.env.MIX_MM_FRAMEWORK + '/media.scss', 'public/assets/vendor/MediaManager/style.css')\n\t.version();";
 
             File::append($mix_file, $data);
-            $this->comment("['mix.js(..).sass(..).version()'] added to [webpack.mix.js]");
+            $this->comment("['mix.sass(..).version()'] added to [webpack.mix.js]");
         }
 
         // fw

src/dist/script.daa3bdffc9cae53e5d3a.js renamed to src/dist/app.894d6569187ababe687c.js

@@ -1,17 +1,31 @@
-new Vue({
+<template></template>
+
+<script>
+/* external classes */
+// is-warning
+// is-danger
+// field
+// has-addons
+// fa-plus
+// fa-minus
+// fa fa-angle-double-right
+// fa fa-angle-double-left
+
+export default {
     name: 'media-manager',
-    el: '#app',
-    data: {
-        files: [],
-        folders: [],
-        directories: [],
-        filterdList: [],
-        bulkList: [],
-        showBy: undefined,
-        currentFilterName: undefined,
-        selectedFile: undefined,
-        searchItemsCount: undefined,
-        searchFor: undefined
+    data() {
+        return {
+            files: [],
+            folders: [],
+            directories: [],
+            filterdList: [],
+            bulkList: [],
+            showBy: undefined,
+            currentFilterName: undefined,
+            selectedFile: undefined,
+            searchItemsCount: undefined,
+            searchFor: undefined
+        }
     },
     computed: {
         allFiles() {
@@ -97,9 +111,9 @@ new Vue({
 
                 // when modal isnt visible
                 if (!$('#new_folder_modal').is(':visible') &&
-                    !$('#move_file_modal').is(':visible') &&
-                    !$('#rename_file_modal').is(':visible') &&
-                    !$('#confirm_delete_modal').is(':visible')) {
+                            !$('#move_file_modal').is(':visible') &&
+                            !$('#rename_file_modal').is(':visible') &&
+                            !$('#confirm_delete_modal').is(':visible')) {
 
                     // when search is not focused
                     if (!$('.input').is(':focus')) {
@@ -261,15 +275,15 @@ new Vue({
 
             // bulk select
             $('#blk_slct').click(function() {
-                $(this).toggleClass(errorClass)
+                $(this).toggleClass('is-danger')
                 $('#upload, #new_folder, #refresh, #rename').parent().hide()
                 $(this).closest('.field').toggleClass('has-addons')
                 $('#blk_slct_all').fadeIn()
 
                 // reset when toggled off
                 if (!manager.isBulkSelecting()) {
                     $('#upload, #new_folder, #refresh, #rename').parent().show()
-                    if ($('#blk_slct_all').hasClass(warningClass)) {
+                    if ($('#blk_slct_all').hasClass('is-warning')) {
                         $('#blk_slct_all').trigger('click')
                     }
                     $('#blk_slct_all').hide()
@@ -289,13 +303,13 @@ new Vue({
                 if (manager.bulkList == 0) {
                     // if no search query
                     if (!manager.searchFor) {
-                        $(this).addClass(warningClass)
+                        $(this).addClass('is-warning')
                         manager.bulkList = manager.allFiles.slice(0)
                     }
 
                     // if found search items
                     if (manager.searchItemsCount) {
-                        $(this).addClass(warningClass)
+                        $(this).addClass('is-warning')
                         $('#files li').each(function() {
                             $(this).trigger('click')
                         })
@@ -307,10 +321,10 @@ new Vue({
                     manager.bulkList = []
                     manager.clearSelected()
 
-                    if ($(this).hasClass(warningClass)) {
-                        $(this).removeClass(warningClass)
+                    if ($(this).hasClass('is-warning')) {
+                        $(this).removeClass('is-warning')
                     } else {
-                        $(this).addClass(warningClass)
+                        $(this).addClass('is-warning')
                         $('#files li').each(function() {
                             $(this).trigger('click')
                         })
@@ -319,11 +333,11 @@ new Vue({
 
                 // if NO search + having bulk items < all items
                 else if (!manager.searchFor && manager.bulkItemsCount < manager.allItemsCount) {
-                    if ($(this).hasClass(warningClass)) {
-                        $(this).removeClass(warningClass)
+                    if ($(this).hasClass('is-warning')) {
+                        $(this).removeClass('is-warning')
                         manager.bulkList = []
                     } else {
-                        $(this).addClass(warningClass)
+                        $(this).addClass('is-warning')
                         manager.bulkList = manager.allFiles.slice(0)
                     }
 
@@ -332,7 +346,7 @@ new Vue({
 
                 // otherwise
                 else {
-                    $(this).removeClass(warningClass)
+                    $(this).removeClass('is-warning')
                     manager.bulkList = []
                     manager.clearSelected()
                 }
@@ -345,7 +359,7 @@ new Vue({
                 // toggle styling
                 var toggle_text = $(this).find('span').not('.icon')
 
-                if ($(this).hasClass(warningClass)) {
+                if ($(this).hasClass('is-warning')) {
                     $(this).find('.fa').removeClass('fa-plus').addClass('fa-minus')
                     toggle_text.text('Select Non')
                 } else {
@@ -605,7 +619,7 @@ new Vue({
 
         /*                Bulk                */
         isBulkSelecting() {
-            return $('#blk_slct').hasClass(errorClass)
+            return $('#blk_slct').hasClass('is-danger')
         },
         IsInBulkList(file) {
             return this.bulkList.includes(file)
@@ -621,7 +635,7 @@ new Vue({
                 this.bulkList.splice(this.bulkList.indexOf(file), 1)
 
                 // normal single selction behavior
-                if (!$('#blk_slct_all').hasClass(warningClass)) {
+                if (!$('#blk_slct_all').hasClass('is-warning')) {
                     // select prev item
                     if (this.bulkItemsCount) {
                         this.selectedFile = this.bulkList[this.bulkItemsCount - 1]
@@ -704,9 +718,9 @@ new Vue({
         fileTypeIs(item, val) {
             if (val == 'text') {
                 if (!item.type.includes('folder') &&
-                    !item.type.includes('image') &&
-                    !item.type.includes('video') &&
-                    !item.type.includes('audio')) {
+                            !item.type.includes('image') &&
+                            !item.type.includes('video') &&
+                            !item.type.includes('audio')) {
                     return true
                 }
             } else {
@@ -881,7 +895,7 @@ new Vue({
 
             if (val == 0 && this.isBulkSelecting()) {
                 var toggle_text = $('#blk_slct_all').find('span').not('.icon')
-                $('#blk_slct_all').removeClass(warningClass)
+                $('#blk_slct_all').removeClass('is-warning')
                 $('#blk_slct_all').find('.fa').removeClass('fa-minus').addClass('fa-plus')
                 toggle_text.text('Select All')
             }
@@ -933,5 +947,5 @@ new Vue({
             }
         }
     }
-})
-
+}
+</script>

src/resources/assets/js/bootstrap_modal.js

@@ -0,0 +1,23 @@
+$.ajaxSetup({
+    cache: false,
+    headers: {
+        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+    }
+})
+
+/*                Vue                */
+window.Vue = require('vue')
+
+/*                Libs                */
+window.EventHub = require('vuemit')
+window.keycode = require('keycode')
+window.dropzone = require('dropzone')
+Vue.use(require('vue-tippy'))
+Vue.use(require('vue2-filters'))
+
+/*                Components                */
+import VueLightbox from 'vue-lightbox'
+Vue.component('Lightbox', VueLightbox)
+
+/*                BS Modal                */
+require('./bootstrap_modal')

src/resources/assets/js/script.js renamed to src/resources/assets/js/components/bulma/media.vue

@@ -1,27 +1,4 @@
-$.ajaxSetup({
-    cache: false,
-    headers: {
-        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
-    }
-})
+require('./dependencies')
 
-/*                Vue                */
-window.Vue = require('vue')
-
-/*                Libs                */
-window.EventHub = require('vuemit')
-window.keycode = require('keycode')
-window.dropzone = require('dropzone')
-Vue.use(require('vue-tippy'))
-Vue.use(require('vue2-filters'))
-
-/*                Components                */
-Vue.component('MyNotification', require('./components/' + process.env.MIX_MM_FRAMEWORK + '-notif.vue'))
-import VueLightbox from 'vue-lightbox'
-Vue.component('Lightbox', VueLightbox)
-
-/*                BS Modal                */
-require('./bootstrap_modal')
-
-/*                Logic                */
-require('./script')
+Vue.component('MediaManager', require('./components/' + process.env.MIX_MM_FRAMEWORK + '/media.vue'))
+Vue.component('MyNotification', require('./components/' + process.env.MIX_MM_FRAMEWORK + '/notifs.vue'))