rails_admin_image_manager 0.1.3 → 0.1.15

data/app/assets/javascripts/rails_admin_image_manager/app-vue.js

@@ -11,8 +11,6 @@ import progressOverlay from './components/progressOverlay.vue'
 import notificationOverlay from './components/notificationOverlay.vue'
 import confirmationOverlay from './components/confirmationOverlay.vue'
 
-import './filters'
-
 document.addEventListener("DOMContentLoaded", function() {
 
   let csrfElement = document.querySelectorAll('meta[name="csrf-token"]')[0]

data/app/assets/javascripts/rails_admin_image_manager/ckeditor_plugin.js.erb

@@ -8,7 +8,17 @@ window.addQueryString = function ( url, params ) {
   return url + ( ( url.indexOf( "?" ) != -1 ) ? "&" : "?" ) + queryString.join( "&" );
 }
 
-if (!CKEDITOR.plugins.get( 'imageManager')) {
+// Wait till ckeditor is defined before initializing image manager plugin
+var ckready = setInterval(function() {
+  console.log('in interval')
+  if (typeof CKEDITOR != 'undefined') {
+    console.log('ckeditor', CKEDITOR)
+    initImageManagerCKPlugin()
+    clearInterval(ckready)
+  }
+}, 200)
+
+function initImageManagerCKPlugin() {
   CKEDITOR.plugins.add( 'imageManager', {
     init: function( editor ) {
       var openManager = function(ele){

data/app/assets/javascripts/rails_admin_image_manager/components/imageInsertButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <button typ="button" class="btn btn-xs btn-default" @click.prevent="insert()">Utiliser</button>
+  <button typ="button" class="btn btn-sm btn-default" @click.prevent="insert()">Utiliser l'image</button>
 </template>
 
 <script>

data/app/assets/javascripts/rails_admin_image_manager/components/imageInsertOverlay.vue

@@ -66,15 +66,13 @@ export default {
 <style media="screen">
 .image-insert-overlay {
   box-shadow: 0 0 200px rgba(0, 0, 0, 0.5);
-  position: fixed;
+  position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 100%;
   max-width: 475px;
   z-index: 20;
-  max-height: 100vh;
-  overflow-y: auto;
 }
 .fade-enter-active, .fade-leave-active {
   transition: opacity .5s

data/app/assets/javascripts/rails_admin_image_manager/components/imageListing.vue

@@ -9,7 +9,7 @@
         <div class="row">
           <div class="col-sm-6">
             <p>
-              <router-link v-if="!readOnly" class="btn btn-primary" :to="{ name: 'createImage'}"><i class="fa fa-plus"></i> Ajouter une image</router-link>
+              <router-link class="btn btn-primary" :to="{ name: 'createImage'}"><i class="fa fa-plus"></i> Ajouter une image</router-link>
               <button v-if="searchedQuery || selectedFilter" @click="resetSearchAndFilters" class="btn btn-default" ><i class="fa fa-undo"></i> Annuler la recherche</button>
             </p>
 
@@ -24,49 +24,32 @@
               <div class="img-options">
                 <div class="img-options-content">
                   <h4 class="h6 font-w400 text-white-op push-15">{{ image.name }}</h4>
-                  <router-link v-if="!readOnly" class="btn btn-sm btn-default" :to="{ name: 'showImage', params: { id: image.id }}">Modifier</router-link>
+                  <router-link class="btn btn-sm btn-default" :to="{ name: 'showImage', params: { id: image.id }}">Modifier</router-link>
                   <image-insert-button :id="image.id"/>
-                  <a v-if="!readOnly" class="btn btn-sm btn-default" @click="deleteImage(image)" href="javascript:void(0)">Supprimer</a>
+                  <a class="btn btn-sm btn-default" @click="deleteImage(image)" href="javascript:void(0)">Supprimer</a>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div class="row items-push" v-if="!grid ">
+        <div class="row text-center items-push">
+          <div class="col-sm-12">
+            <button type="button" v-if="showMoreButton()" class="btn btn-default" @click="fetchImage">Plus d'image</button>
+          </div>
+        </div>
+        <div class="row items-push" v-if="!grid">
           <div class="table-responsive">
             <table class="table table-striped table-vcenter">
-              <thead>
-                <tr>
-                  <td width="110px">Image</td>
-                  <td><listing-filter label="Titre" type="title" ></listing-filter></td>
-                  <td width="140px"><listing-filter label="Ajouté le" type="date" ></listing-filter></td>
-                  <td width="150px" class="text-center">Actions</td>
-                </tr>
-              </thead>
               <tbody>
                 <tr v-for="(image, key) in imageListItems">
                   <td>
-                    <router-link :to="{ name: 'showImage', params: { id: image.id }}"><img width="100px" :src="image.src" alt=""></router-link>
-                  </td>
-                  <td>
-                    {{image.name}}
-                  </td>
-                  <td>{{ image.created_at | formatDate }}</td>
-                  <td class="text-right">
-                    <image-insert-button :id="image.id"/>
-                    <router-link v-if="!readOnly" class="btn btn-xs btn-default" :to="{ name: 'showImage', params: { id: image.id }}"><i class="fa fa-edit"></i></router-link>
-                    <a v-if="!readOnly" class="btn btn-xs btn-default" @click="deleteImage(image)" href="javascript:void(0)"><i class="fa fa-trash-o"></i></a>
+                    <img width="100px" :src="image.src" alt="">
                   </td>
                 </tr>
               </tbody>
             </table>
           </div>
         </div>
-        <div class="row text-center items-push">
-          <div class="col-sm-12">
-            <button type="button" v-if="showMoreButton()" class="btn btn-default" @click="fetchImage">Plus d'image</button>
-          </div>
-        </div>
 
       </div>
     </div>
@@ -78,15 +61,13 @@
 import imageInsertButton from './imageInsertButton.vue'
 import imageTagSelector from './imageTagSelector.vue'
 import searchAutocomplete from './searchAutocomplete.vue'
-import listingFilter from './listingFilter.vue'
 import Lazyload from '../libs/lazyload.js'
-import { formatDate } from '../libs/helpers.js'
 import {mapState} from 'vuex'
 export default {
-  components: {imageInsertButton, imageTagSelector, searchAutocomplete, listingFilter},
+  components: {imageInsertButton, imageTagSelector, searchAutocomplete},
   data () {
     return {
-      grid: false,
+      grid: true,
       lazyload: new Lazyload(()=> {
         this.fetchImage()
       }),
@@ -98,27 +79,39 @@ export default {
     }
   },
   computed: {
-    ...mapState('mediasStore', ['imageListItems', 'maxImageListItems', 'tags', 'activeFilters', 'readOnly'])
+    ...mapState('mediasStore', ['imageListItems', 'maxImageListItems', 'tags', 'activeFilters'])
   },
   methods:{
     fetchImage() {
       if (!this.isFetching && (this.maxImageListItems == -1 || this.imageListItems.length < this.maxImageListItems) ) {
         this.isFetching = true
-        this.$store.dispatch('mediasStore/setSearchPage', this.activeFilters.page + 1)
+        this.$store.dispatch('mediasStore/setSearchPage', this.page + 1)
         this.$store.dispatch('mediasStore/fetchImage').then(()=> {
           this.isFetching = false
+          this.page ++
         })
       }
     },
+    filter() {
+      console.log('filter');
+    },
+    search() {
+      this.page = 1
+      this.searchedQuery = (this.query == '') ? '' : this.query
+      this.$store.dispatch('mediasStore/clearImgListing')
+      this.$store.dispatch('mediasStore/setSearchQuery', this.query)
+      this.$store.dispatch('mediasStore/fetchImage')
+    },
     showMoreButton() {
       return (this.maxImageListItems > this.imageListItems.length && this.activeFilters.tags.length <= 0 && this.activeFilters.search == '')
     },
     resetSearchAndFilters() {
+      this.page = 1
       this.query = ''
       this.selectedFilter = ''
       this.searchedQuery = ''
       this.$store.dispatch('mediasStore/clearImgListing')
-      this.$store.dispatch('mediasStore/setSearchPage', 1)
+      this.$store.dispatch('mediasStore/setSearchPage', this.page)
       this.$store.dispatch('mediasStore/fetchImage')
     },
     deleteImage(image){
@@ -139,8 +132,6 @@ export default {
 </script>
 
 <style media="screen" lang="sass">
-  .table > thead td
-    text-transform: uppercase
   .add-image-link
     margin-bottom: 15px
 

data/app/assets/javascripts/rails_admin_image_manager/components/imageUpload.vue

@@ -39,10 +39,9 @@ export default {
   methods: {
     encode(e) {
       encodeImageFileAsURL(e.target)
-      .then((result) => {
+      .then((src) => {
         if (this.originalSrc != '') this.showOriginal = true
-        this.$store.dispatch('mediasStore/updateSrc', result.src)
-        this.$store.dispatch('mediasStore/updateImageName', result.name)
+        this.$store.dispatch('mediasStore/updateSrc', src)
       })
     },
     undo() {

data/app/assets/javascripts/rails_admin_image_manager/components/searchAutocomplete.vue

@@ -32,7 +32,7 @@ export default {
     filteredTags() {
       if (this.fuseSearch) {
         return this.fuseSearch.search(this.searchFor);
-      } else {
+      }else {
         return []
       }
 
@@ -47,10 +47,7 @@ export default {
       } else if (e.key == 'Enter') {
         this.$store.dispatch('mediasStore/setSearchQuery', this.query)
         this.$store.dispatch('mediasStore/clearImgListing')
-        this.$store.dispatch('mediasStore/setSearchPage', 1)
         this.$store.dispatch('mediasStore/fetchImage')
-        console.log('search');
-        this.query = ""
       } else if((e.key == 'Backspace' || e.key == 'Meta') && this.query == '' && this.activeFilters.search != '') {
         this.clearSearch()
       }
@@ -73,7 +70,6 @@ export default {
       queryArray[0] = this.filteredTags[this.selectedTagIndex].name
       let newQuery = queryArray.reverse().join(' ')
       this.$store.dispatch('mediasStore/setSearchQuery', '')
-      this.$store.dispatch('mediasStore/setSearchPage', 1)
       this.$store.dispatch('mediasStore/clearImgListing')
       this.$store.dispatch('mediasStore/addToTagFilter', this.filteredTags[this.selectedTagIndex].id)
       this.$store.dispatch('mediasStore/fetchImage')

data/app/assets/javascripts/rails_admin_image_manager/libs/helpers.js

@@ -1,12 +1,9 @@
-import moment from 'moment'
-
 export function encodeImageFileAsURL(element) {
   return new Promise((resolve, reject) => {
     var file = element.files[0];
     var reader = new FileReader();
-    reader.fileName = file.name
     reader.onloadend = function() {
-      resolve({src: reader.result, name: reader.fileName})
+      resolve(reader.result)
     }
     reader.readAsDataURL(file);
   })

data/app/assets/javascripts/rails_admin_image_manager/router/index.js

@@ -30,7 +30,7 @@ let router = new Router({
           store.dispatch('overlayStore/showProgressOverlay', false)
           next()
         })
-        .catch((e) => { store.dispatch('overlayStore/showProgressOverlay', false); })
+        .catch((e) => { console.log(e); store.dispatch('overlayStore/showProgressOverlay', false); })
       }
     },
     {
@@ -38,15 +38,8 @@ let router = new Router({
       name: 'createImage',
       component: imageShow,
       beforeEnter: (to, from, next) => {
-        store.dispatch('overlayStore/showProgressOverlay', true)
         store.dispatch('mediasStore/clearCurrentImg')
-        store.dispatch('mediasStore/checkAddMediaPermission').then(()=> {
-          store.dispatch('overlayStore/showProgressOverlay', false)
-          next()
-        }).catch(() => {
-          store.dispatch('overlayStore/showProgressOverlay', false)
-          store.dispatch('overlayStore/pushNotification', {error: true, msg: `Vous n'avez pas les permissions d'ajouter un media`}, {root:true})
-        })
+        next()
       }
     }
   ]

data/app/assets/javascripts/rails_admin_image_manager/stores/medias.js

@@ -9,25 +9,18 @@ const mediasStore = {
     currentImgCopyright: "",
     currentImgDescription: "",
     currentImgSrc: "",
-    currentImgName: "",
     currentImgTags: [],
     imageListItems: [],
-    readOnly: false,
     maxImageListItems: -1,
     activeFilters: {
       tags: [],
       search: '',
-      page: 1,
-      date: '',
-      title: ''
+      page: 1
     },
     tags: [],
     errors: {}
   },
   mutations: {
-    UPDATE_READ_ONLY (state, readOnly) {
-      state.readOnly = readOnly
-    },
     UPDATE_CURRENT_IMG_ID (state, id) {
       state.currentImgId = id
     },
@@ -40,9 +33,6 @@ const mediasStore = {
     UPDATE_CURRENT_IMG_DESC (state, desc) {
       state.currentImgDescription = desc
     },
-    UPDATE_CURRENT_IMG_NAME (state, name) {
-      state.currentImgName = name
-    },
     UPDATE_CURRENT_IMG_SRC (state, src) {
       state.currentImgSrc = src
     },
@@ -106,11 +96,6 @@ const mediasStore = {
     },
     SET_QUERY(state, query){
       state.activeFilters.search = query
-    },
-    SET_FILTER(state, opts){
-      state.activeFilters.date = ''
-      state.activeFilters.title = ''
-      state.activeFilters[opts[1]] = opts[0]
     }
   },
   getters: {
@@ -119,7 +104,6 @@ const mediasStore = {
         image: {
           id: state.currentImgId,
           name: state.currentImgTitle,
-          image_file_name: state.currentImgName,
           copyright: state.currentImgCopyright,
           description: state.currentImgDescription,
           src: state.currentImgSrc,
@@ -134,7 +118,7 @@ const mediasStore = {
       // Generating new dynamic image size before sending it back to CKEDITOR
       axios.get(`/images/${state.currentImgId}?width=${data[0]}&height=${data[1]}`).then((response) => {
         dispatch('overlayStore/showProgressOverlay', false, {root:true})
-        window.opener.CKEDITOR.tools.callFunction(rootState.ckEditorStore.ckId, response.data.image.src_for_wysiwyg, state.currentImgId, state.currentImgTitle.replace(/"/g, '"'));
+        window.opener.CKEDITOR.tools.callFunction(rootState.ckEditorStore.ckId, response.data.src_for_wysiwyg, state.currentImgId, state.currentImgTitle.replace(/"/g, '"'));
         window.close()
       })
 
@@ -145,7 +129,6 @@ const mediasStore = {
       if (imgData.copyright != undefined) commit('UPDATE_CURRENT_IMG_COPYRIGHT', imgData.copyright)
       if (imgData.description != undefined) commit('UPDATE_CURRENT_IMG_DESC', imgData.description)
       if (imgData.src != undefined) commit('UPDATE_CURRENT_IMG_SRC', imgData.src)
-      if (imgData.image_file_name != undefined) commit('UPDATE_CURRENT_IMG_NAME', imgData.image_file_name)
       if (imgData.tags_list != undefined) commit('UPDATE_CURRENT_IMG_TAGS', imgData.tags_list)
       if (imgData.errors != undefined) commit('SET_ERRORS', imgData.errors)
     },
@@ -224,7 +207,6 @@ const mediasStore = {
           if(state.maxImageListItems == -1) commit('SET_MAX_IMAGE_LIST_ITEMS', response.data.total_count)
           // Calling mutation
           commit('ADD_TO_LIST_ITEMS', response.data.items)
-          commit('UPDATE_READ_ONLY', response.data.readonly)
 
           // Hiding progess bar
           dispatch('overlayStore/showProgressOverlay', false, {root:true})
@@ -242,13 +224,12 @@ const mediasStore = {
         })
       })
     },
-    fetchSingleImage({ dispatch, rootDispatch, commit}, id) {
+    fetchSingleImage({ dispatch, rootDispatch}, id) {
       dispatch('overlayStore/showProgressOverlay', true, {root:true})
       return new Promise((resolve, reject) => {
         axios.get(`/images/${id}`)
         .then((response) => {
-          commit('UPDATE_READ_ONLY', response.data.readonly)
-          dispatch('setCurrentImg', response.data.image)
+          dispatch('setCurrentImg', response.data)
           dispatch('overlayStore/showProgressOverlay', false, {root:true})
           resolve()
         })
@@ -298,32 +279,18 @@ const mediasStore = {
         })
       })
     },
-    checkAddMediaPermission({commit}) {
-      return new Promise(function(resolve, reject) {
-        axios.get(`/images/new`)
-        .then(() => { resolve() })
-        .catch(() => { reject() })
-      })
-    },
     setSearchPage({commit}, page) {
       commit('SET_PAGE', page)
     },
     setSearchQuery({commit}, query) {
       commit('SET_QUERY', query)
     },
-    toggleFilter({commit, state}, type) {
-      let term = (state.activeFilters[type] == 'ASC') ? 'DESC' : 'ASC'
-      commit('SET_FILTER', [term, type])
-    },
     clearImgListing({ commit }){
       commit('CLEAR_IMG_LISTING')
     },
     updateSrc ({commit, state}, src) {
       commit('UPDATE_CURRENT_IMG_SRC', src)
     },
-    updateImageName ({commit, state}, name) {
-      commit('UPDATE_CURRENT_IMG_NAME', name)
-    },
     addToTagFilter({commit, state}, id) {
       commit('ADD_TO_TAG_FILTERS', id)
     },

data/app/assets/javascripts/rails_admin_image_manager/stores/railsAdmin.js

@@ -18,7 +18,7 @@ const railsAdmin = {
       // Generating new dynamic image size before sending it back
       axios.get(`/images/${idImage}?width=0&height=0`).then((response) => {
         dispatch('overlayStore/showProgressOverlay', false, {root:true})
-        window.opener.insertImageManagerMedia(idImage, state.inputId, response.data.image.src_for_wysiwyg)
+        window.opener.insertImageManagerMedia(idImage, state.inputId, response.data.src_for_wysiwyg)
         window.close()
       })
     }

data/app/assets/stylesheets/rails_admin_image_manager/_font.scss

@@ -6,8 +6,8 @@
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: url("<%= font_path('fontawesome-webfont.eot?v=4.7.0') %>");
-  src: url("<%= font_path('fontawesome-webfont.eot?#iefix&v=4.7.0') %>") format('embedded-opentype'), url("<%= font_path('fontawesome-webfont.woff2?v=4.7.0') %>") format('woff2'), url("<%= font_path('fontawesome-webfont.woff?v=4.7.0') %>") format('woff'), url("<%= font_path('fontawesome-webfont.ttf?v=4.7.0') %>") format('truetype'), url("<%= font_path('fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') %>") format('svg');
+  src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
+  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
   font-weight: normal;
   font-style: normal;
 }