Skip to content

Commit

Permalink
use component instead so we can use it under any vue instance
Browse files Browse the repository at this point in the history
  • Loading branch information
ctf0 committed Aug 30, 2017
1 parent c0dfaab commit 7f8e391
Show file tree
Hide file tree
Showing 9 changed files with 19,324 additions and 19,154 deletions.
18 changes: 14 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.
4 changes: 2 additions & 2 deletions src/Commands/MMAppend.php
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
37,476 changes: 18,809 additions & 18,667 deletions src/dist/script.daa3bdffc9cae53e5d3a.js → src/dist/app.894d6569187ababe687c.js

Large diffs are not rendered by default.

Empty file modified src/resources/assets/js/bootstrap_modal.js
100755 → 100644
Empty file.
Original file line number Diff line number Diff line change
@@ -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() {
Expand Down Expand Up @@ -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')) {
Expand Down Expand Up @@ -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()
Expand All @@ -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')
})
Expand All @@ -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')
})
Expand All @@ -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)
}
Expand All @@ -332,7 +346,7 @@ new Vue({
// otherwise
else {
$(this).removeClass(warningClass)
$(this).removeClass('is-warning')
manager.bulkList = []
manager.clearSelected()
}
Expand All @@ -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 {
Expand Down Expand Up @@ -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)
Expand All @@ -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]
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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')
}
Expand Down Expand Up @@ -933,5 +947,5 @@ new Vue({
}
}
}
})

}
</script>
23 changes: 23 additions & 0 deletions src/resources/assets/js/dependencies.js
Original file line number Diff line number Diff line change
@@ -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')
29 changes: 3 additions & 26 deletions src/resources/assets/js/media.js
Original file line number Diff line number Diff line change
@@ -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'))
Loading

0 comments on commit 7f8e391

Please sign in to comment.