rails_admin_image_manager 0.1.3

data/app/assets/javascripts/rails_admin_image_manager/editor/image_manager_picker.js.erb

@@ -0,0 +1,41 @@
+<% self.class.include RailsAdminImageManager::Engine.routes.url_helpers %>
+
+// Direct asset picker
+
+var rails_admin_image_manager = rails_admin_image_manager || {};
+rails_admin_image_manager.AssetPicker = function(){
+
+};
+
+rails_admin_image_manager.AssetPicker.prototype = {
+
+	showFinder: function(dom_id, options, file_id){
+		// open a popup
+		var params = {};
+		params.CKEditor = 'picker'; // this is not CKEditor
+
+		if (file_id > 0) {
+			params.selectImage = file_id;
+		}
+
+		var url = addQueryString('<%= image_manager_index_path %>', params);
+		window.open(url, 'filebrowser', "resizable=yes,scrollbars=yes,width=1024,height=700")
+  },
+
+	setAsset: function(dom_id, asset, id, type){
+		var split_field_name = $(dom_id).attr('id').split('_')
+		if (split_field_name[split_field_name.length - 1] == "id") {
+			$(dom_id).val(id);
+		} else {
+			$(dom_id).val(asset);
+		}
+
+    if (type=='image') {
+		  $(dom_id).siblings('img.rich-image-preview').first().attr({src: asset});
+    }
+  }
+
+};
+
+// RailsAdminImageManager Asset input
+var assetPicker = new rails_admin_image_manager.AssetPicker();

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

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import moment from 'moment'
+
+moment.locale('fr');
+Vue.filter('formatDate', (date) => {
+  return moment(date).format('D MMMM YYYY')
+})

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

@@ -0,0 +1,13 @@
+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})
+    }
+    reader.readAsDataURL(file);
+  })
+}

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

@@ -0,0 +1,63 @@
+
+/**
+ *
+ * @param {Func} cb
+ * @param {Object} options
+ */
+export default function Lazyload(cb, threshold = 120 ) {
+  this.lastScroll = 0
+  this.cb         = cb
+  this.threshold  = threshold
+
+  this._boundHandleScroll = this.handleScroll.bind(this)
+}
+
+/**
+ * Add event listener
+ */
+Lazyload.prototype.start = function() {
+  // Keep initial scroll position
+  this.lastScroll = getScrollTop()
+  window.addEventListener('scroll', this._boundHandleScroll)
+}
+
+/**
+ * Remove event listener
+ */
+Lazyload.prototype.stop = function() {
+  window.removeEventListener('scroll', this._boundHandleScroll)
+}
+
+/**
+ * Handle scroll
+ */
+Lazyload.prototype.handleScroll = function(event) {
+
+  if (!this.ticking) {
+
+    window.requestAnimationFrame(() => {
+
+      // Get current scroll position
+      const currentScroll = getScrollTop()
+
+      // If user has scrolled down and more than threshold
+      if (currentScroll - this.lastScroll >= this.threshold) {
+
+        // Execute callback
+        this.cb.call()
+
+        // Keep new milestone
+        this.lastScroll = currentScroll
+      }
+
+      this.ticking = false
+
+    })
+  }
+
+  this.ticking = true
+}
+
+function getScrollTop() {
+  return window.pageYOffset || document.documentElement.scrollTop
+}

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

@@ -0,0 +1,55 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+import imageListing from '../components/imageListing.vue'
+import imageShow from '../components/imageShow.vue'
+
+import store from '../stores'
+
+Vue.use(Router)
+
+let router = new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'root',
+      component: imageListing,
+      beforeEnter: (to, from, next) => {
+        store.dispatch('mediasStore/clearImgListing')
+        next()
+      }
+    },
+    {
+      path: '/show/:id',
+      name: 'showImage',
+      component: imageShow,
+      beforeEnter: (to, from, next) => {
+        store.dispatch('overlayStore/showProgressOverlay', true)
+        store.dispatch('mediasStore/fetchSingleImage', to.params.id)
+        .then(() => {
+          store.dispatch('overlayStore/showProgressOverlay', false)
+          next()
+        })
+        .catch((e) => { store.dispatch('overlayStore/showProgressOverlay', false); })
+      }
+    },
+    {
+      path: '/new/',
+      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})
+        })
+      }
+    }
+  ]
+})
+
+export default router

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

@@ -0,0 +1,25 @@
+const ckEditor = {
+  namespaced: true,
+  state: {
+    ckId: "",
+    ckFun: "",
+  },
+  mutations: {
+    SET_CK_ID(state, value) {
+      state.ckId = value
+    },
+    SET_CK_FUN(state, value) {
+      state.ckFun = value
+    }
+  },
+  actions: {
+    setCkFun({commit}, value) {
+      commit('SET_CK_FUN', value)
+    },
+    setCkId({commit}, value) {
+      commit('SET_CK_ID', value)
+    }
+  }
+}
+
+export default ckEditor

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

@@ -0,0 +1,16 @@
+import mediasStore from './medias'
+import overlayStore from './overlay'
+import ckEditorStore from './ckeditor'
+import railsAdmin from './railsAdmin'
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+export default new Vuex.Store({
+  modules: {
+    mediasStore: mediasStore,
+    overlayStore: overlayStore,
+    ckEditorStore: ckEditorStore,
+    railsAdmin: railsAdmin
+  }
+})

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

@@ -0,0 +1,342 @@
+import axios from 'axios';
+import router from '../router';
+
+const mediasStore = {
+  namespaced: true,
+  state: {
+    currentImgId: "",
+    currentImgTitle: "",
+    currentImgCopyright: "",
+    currentImgDescription: "",
+    currentImgSrc: "",
+    currentImgName: "",
+    currentImgTags: [],
+    imageListItems: [],
+    readOnly: false,
+    maxImageListItems: -1,
+    activeFilters: {
+      tags: [],
+      search: '',
+      page: 1,
+      date: '',
+      title: ''
+    },
+    tags: [],
+    errors: {}
+  },
+  mutations: {
+    UPDATE_READ_ONLY (state, readOnly) {
+      state.readOnly = readOnly
+    },
+    UPDATE_CURRENT_IMG_ID (state, id) {
+      state.currentImgId = id
+    },
+    UPDATE_CURRENT_IMG_TITLE (state, title) {
+      state.currentImgTitle = title
+    },
+    UPDATE_CURRENT_IMG_COPYRIGHT (state, copy) {
+      state.currentImgCopyright = copy
+    },
+    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
+    },
+    UPDATE_CURRENT_IMG_TAGS (state, tags) {
+      state.currentImgTags = []
+      for (var i = 0; i < tags.length; i++) {
+        let tag = tags[i]
+        state.currentImgTags.push(tag)
+      }
+    },
+    ADD_TO_LIST_ITEMS(state, items) {
+      for (var i = 0; i < items.length; i++) {
+        let item = items[i]
+        state.imageListItems.push(item)
+      }
+    },
+    CLEAR_IMG_LISTING(state){
+      state.imageListItems = []
+    },
+    SPLICE_IMG_LISTING(state, id){
+      state.imageListItems.forEach((image, index) => {
+        if (image.id == id) {
+          state.imageListItems.splice(index, 1)
+        }
+      })
+    },
+    ADD_CURRENT_IMG_TAG(state, string) {
+      state.currentImgTags.push(string)
+    },
+    REMOVE_CURRENT_IMG_TAG(state, string) {
+      let index = state.currentImgTags.indexOf(string)
+      if (index >= 0) {
+        state.currentImgTags.splice(index, 1)
+      }
+    },
+    SET_ERRORS(state, errorObject) {
+      state.errors = errorObject
+    },
+    SET_MAX_IMAGE_LIST_ITEMS(state, value) {
+      state.maxImageListItems = value
+    },
+    SET_TAGS_LIST(state, tags) {
+      state.tags = []
+      for (var i = 0; i < tags.length; i++) {
+        let tag = tags[i]
+        state.tags.push(tag)
+      }
+    },
+    // tag is an id
+    REMOVE_FROM_TAG_FILTERS(state, tag) {
+      state.activeFilters.tags = _.without(state.activeFilters.tags, tag)
+    },
+    // tag is an id
+    ADD_TO_TAG_FILTERS(state, tag) {
+      if (!_.contains(state.activeFilters.tags, tag)) {
+        state.activeFilters.tags.push(tag)
+      }
+    },
+    SET_PAGE(state, page) {
+      state.activeFilters.page = page
+    },
+    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: {
+    imageObject: (state) => {
+      return {
+        image: {
+          id: state.currentImgId,
+          name: state.currentImgTitle,
+          image_file_name: state.currentImgName,
+          copyright: state.currentImgCopyright,
+          description: state.currentImgDescription,
+          src: state.currentImgSrc,
+          tags: state.currentImgTags
+        }
+      }
+    }
+  },
+  actions: {
+    useImage ({ commit, state, dispatch, rootState}, data) {
+      dispatch('overlayStore/showProgressOverlay', true, {root:true})
+      // 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, '&quot;'));
+        window.close()
+      })
+
+    },
+    setCurrentImg ({commit, state}, imgData) {
+      if (imgData.id != undefined) commit('UPDATE_CURRENT_IMG_ID', imgData.id)
+      if (imgData.name != undefined) commit('UPDATE_CURRENT_IMG_TITLE', imgData.name)
+      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)
+    },
+    saveCurrentImg ({dispatch, commit, state, getters}) {
+      // Loading bar
+      dispatch('overlayStore/showProgressOverlay', true, {root:true})
+
+      if (state.currentImgId != '') {
+        return dispatch('updateImg')
+      } else {
+        return dispatch('createImg')
+      }
+    },
+    updateImg ({dispatch, commit, state, getters}) {
+      return new Promise((resolve, reject) => {
+        axios.put('/images', getters.imageObject).then((response)=> {
+
+          // Notificating
+          dispatch('overlayStore/pushNotification', {success: true, msg: 'Image mise à jour avec succès'}, {root:true})
+
+          // Clearing errors object
+          commit('SET_ERRORS', {})
+
+          // hiding loading bar
+          dispatch('overlayStore/showProgressOverlay', false, {root:true})
+          resolve(response)
+        }).catch((error) => {
+          // hiding loading bar
+          dispatch('overlayStore/showProgressOverlay', false, {root:true})
+
+          // Error notification
+          dispatch('overlayStore/pushNotification', {error: true, msg: 'Erreur lors de la mise à jour'}, {root:true})
+
+          commit('SET_ERRORS', error.response.data)
+          reject()
+        })
+      })
+    },
+    createImg ({dispatch, commit, state, getters}) {
+      return new Promise((resolve, reject) => {
+        axios.post('/images',getters.imageObject).then((response)=> {
+          // Notificating
+          dispatch('overlayStore/pushNotification', {success: true, msg: 'Image créé avec succès'}, {root:true})
+
+          // Clearing errors object
+          commit('SET_ERRORS', {})
+
+          // Redirect
+          dispatch('setCurrentImg', response.data)
+          router.push({ name: 'root'})
+          resolve(response)
+        }).catch((error) => {
+          // hiding loading bar
+          dispatch('overlayStore/showProgressOverlay', false, {root:true})
+
+          dispatch('overlayStore/pushNotification', {error: true, msg: 'Erreur lors de la création'}, {root:true})
+          commit('SET_ERRORS', error.response.data)
+          reject()
+        })
+      })
+    },
+    deleteImg ({ commit }, id) {
+      axios.delete({params: {id: id}})
+    },
+
+    fetchImage({commit, dispatch, state}) {
+      return new Promise((resolve, reject) => {
+
+        // Showing progress bar
+        dispatch('overlayStore/showProgressOverlay', true, {root:true})
+
+        // GET WITH PARAMS
+        axios.get('images.json', {params: state.activeFilters})
+        // SUCCESS
+        .then((response) => {
+          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})
+          resolve()
+        })
+        // ERROR
+        .catch((error) => {
+
+          // hiding loading bar
+          dispatch('overlayStore/showProgressOverlay', false, {root:true})
+
+          // Notificating
+          dispatch('overlayStore/pushNotification', {success: true, msg: 'Problème lors du fetch'}, {root:true})
+          reject()
+        })
+      })
+    },
+    fetchSingleImage({ dispatch, rootDispatch, commit}, 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('overlayStore/showProgressOverlay', false, {root:true})
+          resolve()
+        })
+        .catch(()=> {
+          dispatch('overlayStore/showProgressOverlay', false, {root:true})
+          reject()
+        })
+      })
+    },
+    clearCurrentImg({dispatch}){
+      let clearObject = {
+        id:'',
+        name:'',
+        copyright:'',
+        description:'',
+        src:'',
+        tags_list: [],
+        errors: {}
+      }
+      dispatch('setCurrentImg', clearObject)
+    },
+    fetchTags({commit, dispatch}){
+      return new Promise((resolve, reject) => {
+        axios.get(`/tags.json`).then((response)=>{
+          commit('SET_TAGS_LIST', response.data)
+          resolve()
+        })
+        .catch((error) => {
+          dispatch('overlayStore/pushNotification', {error: true, msg: 'Problème avec les tags'}, {root:true})
+          reject()
+        })
+
+    })
+    },
+    deleteImg({commit, dispatch}, idImage) {
+      dispatch('overlayStore/showProgressOverlay', true, {root:true})
+      return new Promise(function(resolve, reject) {
+        axios.delete(`/images`, {params: {id: idImage}})
+        .then((response)=>{
+          dispatch('overlayStore/showProgressOverlay', false, {root:true})
+          dispatch('overlayStore/pushNotification', {success: true, msg: 'Image supprimé avec succès'}, {root:true})
+          commit('SPLICE_IMG_LISTING', idImage)
+        })
+        .catch((error) => {
+          dispatch('overlayStore/showProgressOverlay', false, {root:true})
+          dispatch('overlayStore/pushNotification', {error: true, msg: 'Problème lors de la supression de l\'image'}, {root:true})
+        })
+      })
+    },
+    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)
+    },
+    removeFromTagFilter({commit, state}, id) {
+      commit('REMOVE_FROM_TAG_FILTERS', id)
+    },
+    addTag ({ commit }, string) {
+      commit('ADD_CURRENT_IMG_TAG', string)
+    },
+    removeTag ({ commit }, string) {
+      commit('REMOVE_CURRENT_IMG_TAG', string)
+    }
+  }
+}
+
+export default mediasStore