rails_admin_image_manager 0.1.3

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

@@ -0,0 +1,51 @@
+import Vue from 'vue'
+import axios from 'axios'
+import vueAxios from 'vue-axios'
+import router from './router'
+
+import {mapState} from 'vuex'
+import store from './stores'
+
+import imageInsertOverlay from './components/imageInsertOverlay.vue'
+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]
+  axios.defaults.headers.common['X-CSRF-Token'] = csrfElement.getAttribute('content')
+  let appElement = document.getElementById('vue-image-manager')
+
+  axios.defaults.baseURL = AJAX_ENDPOINT
+
+  Vue.use(vueAxios, axios)
+  Vue.config.productionTip = false
+  const imageManager = new Vue({
+    el: '#vue-image-manager',
+    components: {imageInsertOverlay, progressOverlay, notificationOverlay, confirmationOverlay},
+    store: store,
+    router,
+    computed: {
+      ...mapState('overlayStore', ['showProgress'])
+    },
+    mounted: function () {
+      // Checking if we are from CKEDITOR
+      if (this.$el.attributes['input-id'] !== undefined && this.$el.attributes['input-id'] !== undefined) {
+        this.$store.dispatch('railsAdmin/setInputId', this.$el.attributes['input-id'].value)
+      }
+      if (this.$el.attributes['ck-fn'] !== undefined && this.$el.attributes['ck-id'] !== undefined) {
+        this.$store.dispatch('ckEditorStore/setCkId', this.$el.attributes['ck-fn'].value)
+        this.$store.dispatch('ckEditorStore/setCkFun', this.$el.attributes['ck-id'].value)
+      }
+      // Opening inser overlay if we have selectImage in queryString
+      if (this.$el.attributes['ck-selected-image-id'] !== undefined) {
+        this.$store.dispatch('mediasStore/fetchSingleImage', this.$el.attributes['ck-selected-image-id'].value).then(()=> {
+          this.$store.dispatch('overlayStore/showInsertOverlay', true)
+        })
+      }
+    }
+  })
+});

data/app/assets/javascripts/rails_admin_image_manager/application.js

@@ -0,0 +1,17 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+
+
+//= require rails_admin_image_manager/vendors/underscore.min.js
+//= require rails_admin_image_manager/vendors/oneui.min.js
+//= require rails_admin_image_manager/app-compiled.js

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

@@ -0,0 +1,62 @@
+//= require rails_admin_image_manager/editor/image_manager_picker
+
+window.addQueryString = function ( url, params ) {
+	var queryString = [];
+	if (!params) return url;
+	else {
+		for (var i in params) queryString.push(i + "=" + encodeURIComponent( params[i]));
+	}
+	return url + ( ( url.indexOf( "?" ) != -1 ) ? "&" : "?" ) + queryString.join( "&" );
+}
+
+window.insertImageManagerMedia = function(idImage, idInput, url) {
+  $('#'+idInput).val(idImage)
+  $("[data-manager-preview='"+idInput+"']").attr('src',url)
+	$('#deselect_'+idInput).show();
+}
+
+var popup = function( url, width, height, options ) {
+	width = width || '80%';
+	height = height || '70%';
+
+	if ( typeof width == 'string' && width.length > 1 && width.substr( width.length - 1, 1 ) == '%' )
+		width = parseInt( window.screen.width * parseInt( width, 10 ) / 100, 10 );
+
+	if ( typeof height == 'string' && height.length > 1 && height.substr( height.length - 1, 1 ) == '%' )
+		height = parseInt( window.screen.height * parseInt( height, 10 ) / 100, 10 );
+
+	if ( width < 640 )
+		width = 640;
+
+	if ( height < 420 )
+		height = 420;
+
+	var top = parseInt( ( window.screen.height - height ) / 2, 10 ),
+		left = parseInt( ( window.screen.width - width ) / 2, 10 );
+
+	options = ( options || 'location=no,menubar=no,toolbar=no,dependent=yes,minimizable=no,modal=yes,alwaysRaised=yes,resizable=yes,scrollbars=yes' ) + ',width=' + width +
+		',height=' + height +
+		',top=' + top +
+		',left=' + left;
+
+	var popupWindow = window.open( '', null, options, true );
+
+	// Blocked by a popup blocker.
+	if ( !popupWindow )
+		return false;
+
+	try {
+		// Chrome is problematic with moveTo/resizeTo, but it's not really needed here (http://dev.ckeditor.com/ticket/8855).
+		var ua = navigator.userAgent.toLowerCase();
+		if ( ua.indexOf( ' chrome/' ) == -1 ) {
+			popupWindow.moveTo( left, top );
+			popupWindow.resizeTo( width, height );
+		}
+		popupWindow.focus();
+		popupWindow.location.href = url;
+	} catch ( e ) {
+		popupWindow = window.open( url, null, options, true );
+	}
+
+	return true;
+}

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

@@ -0,0 +1,58 @@
+<% self.class.include RailsAdminImageManager::Engine.routes.url_helpers %>
+window.addQueryString = function ( url, params ) {
+  var queryString = [];
+  if (!params) return url;
+  else {
+    for (var i in params) queryString.push(i + "=" + encodeURIComponent( params[i]));
+  }
+  return url + ( ( url.indexOf( "?" ) != -1 ) ? "&" : "?" ) + queryString.join( "&" );
+}
+
+if (!CKEDITOR.plugins.get( 'imageManager')) {
+  CKEDITOR.plugins.add( 'imageManager', {
+    init: function( editor ) {
+      var openManager = function(ele){
+        var params = {};
+        if (ele != null && ele.$.getAttribute('data-image-id')) {
+          params.selectImage = ele.$.getAttribute('data-image-id');
+        }
+        params.CKEditor = editor.name;
+        params.CKEditorFuncNum = editor._.insertImagefn;
+
+        var url = addQueryString('<%= image_manager_index_path %>', params);
+        editor.popup(url, 1105, 500);
+      }
+
+      editor._.insertImagefn = CKEDITOR.tools.addFunction(function(src, id, title){
+          this.insertHtml('<img src="' + src + '" data-image-id="' + id + '" alt="'+title+'" />');
+        }, editor);
+
+
+      editor.ui.addButton( 'imageManager', {
+        label: 'Ajouter une image',
+        command: 'insertManagerImage',
+        icon: "<%= asset_path 'rails_admin_image_manager/image.png' %>"
+      });
+
+      editor.on( 'doubleclick', function(evt) {
+        var element = evt.data.element;
+        if (element.is('img') && !element.data('cke-realelement') && !element.isReadOnly()) {
+          editor.execCommand('insertManagerImage');
+        }
+        evt.preventDefault();
+      });
+
+      editor.addCommand( 'insertManagerImage', {
+        exec: function(editor) {
+          var sel = editor.getSelection();
+          openManager(sel.getSelectedElement())
+        }
+      });
+
+    }
+  });
+
+  // CKEDITOR.plugins.contextMenu.removeAll()
+  CKEDITOR.config.removePlugins = 'liststyle,tabletools,contextmenu';
+  CKEDITOR.config.extraPlugins = 'imageManager';
+}

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

@@ -0,0 +1,69 @@
+<template>
+  <transition name="fade">
+    <div v-if="confirmation.msg" class="confirmation-overlay">
+      <div class="confirmation-overlay__box block">
+        <div class="block-header">
+          <ul class="block-options">
+            <li><button type="button" @click="close"><i class="fa fa-times"></i></button></li>
+          </ul>
+          <h2 class="block-title">Confirmation</h2>
+        </div>
+        <div class="block-content">
+          <div class="row items-push">
+            <div class="col-sm-12">
+              <p>{{ confirmation.msg }}</p>
+              <div class="btn-group">
+                <button type="button" @click="close" class="btn btn-default" name="button">Annuler</button>
+                <button type="button" @click="callCallback" class="btn btn-danger" name="button">Supprimer</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  computed: {
+    ...mapState('overlayStore', ['confirmation'])
+  },
+  methods: {
+    close() {
+      this.$store.dispatch('overlayStore/clearConfirmation')
+    },
+    callCallback() {
+      this.confirmation.callback()
+      this.close()
+    }
+  }
+}
+</script>
+
+<style media="screen" lang='sass'>
+.confirmation-overlay::after
+  position: fixed
+  content: ""
+  display: block
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  background-color: rgba(255, 255, 255, 0.5)
+  z-index: 10
+
+.confirmation-overlay__box
+  box-shadow: 0 0 200px rgba(0, 0, 0, 0.5)
+  position: fixed
+  background-color: white
+  top: 50%
+  left: 50%
+  transform: translate(-50%,-50%)
+  width: 100%
+  max-width: 640px
+  z-index: 20
+
+</style>

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

@@ -0,0 +1,41 @@
+<template>
+  <button typ="button" class="btn btn-xs btn-default" @click.prevent="insert()">Utiliser</button>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  props: ['id', 'saveMethod'],
+  data () {
+    return {}
+  },
+  methods: {
+    insert () {
+      let doIt = (response) => {
+        let id = this.id || response.data.id
+        if (this.$store.state.ckEditorStore.ckId != "") {
+          if (id) {
+            this.$store.dispatch('mediasStore/fetchSingleImage', this.id).then(()=> {
+              this.$store.dispatch('overlayStore/showInsertOverlay', true)
+            })
+          } else {
+            this.$store.dispatch('overlayStore/showInsertOverlay', true)
+          }
+        } else {
+          this.$store.dispatch('railsAdmin/insertImage', id)
+        }
+      }
+      if (typeof this.saveMethod == "function") {
+        this.saveMethod().then(doIt).catch(() => { console.log('Erreur lors de la sauvegarde');})
+      } else {
+        doIt()
+      }
+
+    }
+  }
+}
+</script>
+
+<style media="screen">
+</style>

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

@@ -0,0 +1,92 @@
+<template>
+  <transition name="fade">
+    <div class="image-insert-overlay form-horizontal block" v-if="showInsertOverlay">
+      <button @click="close" class="image-insert-overlay__close" type="button"><i class="fa fa-times"></i></button>
+      <div class="block-content">
+        <p><img :src="currentImgSrc" style="width: 100%;" alt=""></p>
+        <div class="form-group">
+          <div class="col-sm-6">
+            <div class="form-material">
+              <input class="form-control" type="number" v-model="imgWidth" @keyup="keepRatio('width')">
+              <label for="material-text">Largeur</label>
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <div class="form-material">
+              <input class="form-control" type="number" v-model="imgHeight" @keyup="keepRatio('height')">
+              <label for="material-textarea-large">Hauteur</label>
+            </div>
+          </div>
+        </div>
+        <div class="form-group">
+          <div class="col-sm-12">
+            <button type="button" class="btn btn-primary" @click="insert()">Insérer</button>
+            <button type="button" class="btn btn-default" @click="close()">Annuler</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  data () {
+    return {
+      imgWidth: 800,
+      imgHeight: 600,
+      ratio: 800/600
+    }
+  },
+  computed: {
+    ...mapState('overlayStore', ['showInsertOverlay']),
+    ...mapState('mediasStore', ['currentImgSrc'])
+  },
+  methods: {
+    insert () {
+      this.$store.dispatch('mediasStore/useImage', [this.imgWidth, this.imgHeight])
+      this.$store.dispatch('overlayStore/showInsertOverlay', false)
+    },
+    close() {
+      this.$store.dispatch('overlayStore/showInsertOverlay', false)
+    },
+    keepRatio(e) {
+      if (e == 'width') {
+        this.imgHeight = parseInt(this.imgWidth / this.ratio)
+      } else {
+        this.imgWidth = parseInt(this.imgHeight * this.ratio)
+      }
+    }
+  }
+}
+</script>
+
+<style media="screen">
+.image-insert-overlay {
+  box-shadow: 0 0 200px rgba(0, 0, 0, 0.5);
+  position: fixed;
+  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
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+  opacity: 0
+}
+.image-insert-overlay__close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background-color: transparent;
+  border: none;
+}
+</style>

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

@@ -0,0 +1,167 @@
+<template>
+  <div class="content animated fadeIn">
+    <div class="block">
+      <div class="block-header">
+        <search-autocomplete></search-autocomplete>
+      </div>
+      <div class="block-content">
+
+        <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>
+              <button v-if="searchedQuery || selectedFilter" @click="resetSearchAndFilters" class="btn btn-default" ><i class="fa fa-undo"></i> Annuler la recherche</button>
+            </p>
+
+            <p v-if="searchedQuery">Recherche: {{ searchedQuery }}</p>
+
+          </div>
+        </div>
+        <div class="row items-push" v-if="grid">
+          <div class="listing-element" v-for="(image, key) in imageListItems">
+            <div class="img-container">
+              <img class="img-responsive" :src="image.src" alt="">
+              <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>
+                  <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>
+                </div>
+              </div>
+            </div>
+          </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>
+                  </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>
+  </div>
+
+</template>
+
+<script>
+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},
+  data () {
+    return {
+      grid: false,
+      lazyload: new Lazyload(()=> {
+        this.fetchImage()
+      }),
+      page: 1,
+      isFetching: false,
+      query: '',
+      searchedQuery: '',
+      selectedFilter: ''
+    }
+  },
+  computed: {
+    ...mapState('mediasStore', ['imageListItems', 'maxImageListItems', 'tags', 'activeFilters', 'readOnly'])
+  },
+  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/fetchImage').then(()=> {
+          this.isFetching = false
+        })
+      }
+    },
+    showMoreButton() {
+      return (this.maxImageListItems > this.imageListItems.length && this.activeFilters.tags.length <= 0 && this.activeFilters.search == '')
+    },
+    resetSearchAndFilters() {
+      this.query = ''
+      this.selectedFilter = ''
+      this.searchedQuery = ''
+      this.$store.dispatch('mediasStore/clearImgListing')
+      this.$store.dispatch('mediasStore/setSearchPage', 1)
+      this.$store.dispatch('mediasStore/fetchImage')
+    },
+    deleteImage(image){
+      this.$store.dispatch('overlayStore/pushConfirmation', { msg: 'Voulez vous supprimer l\'image définitivement?', callback: () => {
+        this.$store.dispatch('mediasStore/deleteImg', image.id)
+      }})
+    }
+  },
+  created() {
+    this.$store.dispatch('mediasStore/setSearchPage', this.page)
+    this.$store.dispatch('mediasStore/fetchImage')
+  },
+  mounted() {
+    this.lazyload.start()
+    this.$store.dispatch('mediasStore/fetchTags')
+  }
+}
+</script>
+
+<style media="screen" lang="sass">
+  .table > thead td
+    text-transform: uppercase
+  .add-image-link
+    margin-bottom: 15px
+
+  .img-options-content .btn
+    margin: 4px
+
+  .add-image-link
+    display: flex
+    align-items: center
+    justify-content: center
+    width: 100%
+    font-size: 50px
+    // width: 250px
+    // height: 250px
+
+  .listing-element
+    margin: 10px
+    float: left
+    width: 150px
+
+    .btn-sm.btn
+      padding: 0 5px
+      font-size: 11px
+</style>