sibu 0.6.9 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 11718eee8d05389ba6c3e54992c419d06e87039f
-  data.tar.gz: 64985305666f99c3f52636d5447a37389044b0f5
+  metadata.gz: b9ddba74b9a3e07f92b235acc1e3e55296b4a089
+  data.tar.gz: 3bf94af416c1228aa9f9f2f364ff1ebfafdba401
 SHA512:
-  metadata.gz: ef9befafde933e52bdcd6617efb75385d79e7cd7c075fab9fa6e0d04396840e4131d858180b1ac5f7c0a52cef9737fe3bef600e6104399dfb318a10289cd8490
-  data.tar.gz: 2cb79f2f07fb033870f71f38f4975c3ce757f584e65fc872bd12c7cb27a84cb87859c0f275b18d0f137598e9b7991bd7cf61f799b1e8b88e65962bc6a0eab2b1
+  metadata.gz: 9feac3ec7a28165c73edb37cd9c2c3dc47e2a81b8b7efbfab5253fc87e3fc12c3f44fa19f1ba0f653e2e93dc7ce7521ddce3b3153ae8091019809a958acfb9b6
+  data.tar.gz: 24c55a51899aa8c68b7fda529dfa50b469a14a072df6a86329c8adfffd633bd83271fc407b9a7239c9639d76ca59dfba41b6cfaa81b26f7a810fa912b6911b20

data/app/assets/javascripts/sibu/sibu.js.erb

@@ -2,7 +2,6 @@
 //= require jquery_ujs
 //= require sibu/common
 //= require ../quill/quill
-//= require ../cropper/cropper
 //= require_self
 
 var Inline = Quill.import('blots/inline');
@@ -110,31 +109,61 @@ function initQuillEditor(container) {
     return quill;
 }
 
-function initCropper(imgId) {
-    var wrapper = $(".sibu_crop").first();
-    var srcImg = $("#content_panel").find(".sb-editing img[data-id='" + imgId + "']").first();
-    var srcContainer = srcImg.parent();
-    var ratio = parseFloat(srcContainer.css("width")) / parseFloat(wrapper.css("width"));
-    var wrapperHeight = Math.min(320, parseFloat(srcContainer.css("height")) / ratio) + "px";
-    wrapper.css("height", wrapperHeight);
-    return new Cropper(wrapper.find("img")[0], {
-        crop: function(event) {
-            var data = event.detail;
-            var cropper = this.cropper;
-            var imageData = cropper.getImageData();
-            var previewWidth = parseFloat(srcContainer.css("width"));
-            var imageScaledRatio = data.width / previewWidth;
-            var width = imageData.naturalWidth / imageScaledRatio + 'px';
-            var height = imageData.naturalHeight / imageScaledRatio + 'px';
-            var marginLeft = -data.x / imageScaledRatio + 'px';
-            var marginTop = -data.y / imageScaledRatio + 'px';
-            // console.log("crop detail : " + JSON.stringify(data));
-            // console.log('img data : ' + JSON.stringify(imageData));
-            $("#element_style").val("width: " + width + "; height: " + height + "; margin-left: " + marginLeft + "; margin-top: " + marginTop +"; max-width: none; max-height: none;");
-        }
-    });
+function initCustomCenter() {
+    var wrapper = $(".sibu_center > img"), centerPos = $(".sibu_center > #sibu_center_pos");
+    displayCurrentCenter(wrapper[0], centerPos);
+    wrapper.click(function(e) {
+        var rect = e.target.getBoundingClientRect();
+        var x = e.clientX - rect.left;
+        var y = e.clientY - rect.top;
+        console.log('x : ' + x + ' -  y : ' + y);
+        centerPos.css("top", y + "px");
+        centerPos.css("left", x + "px");
+        $("#element_class").val(`posx_${Math.floor((x / rect.width) * 10) * 10} posy_${Math.floor((y / rect.height) * 10) * 10}`);
+    })
+}
+
+function displayCurrentCenter(img, centerPos) {
+    var val = $("#element_class").val();
+    var rect = img.getBoundingClientRect();
+    if (val && val.indexOf('posx') !== -1 && val.indexOf('posy') !== -1) {
+        var xpos = val.slice(val.indexOf("posx_") + 5, val.indexOf("posx_") + 7);
+        var ypos = val.slice(val.indexOf("posy_") + 5, val.indexOf("posy_") + 7);
+        centerPos.css("top", Math.round(+ypos * (rect.height / 100)) + "px");
+        centerPos.css("left", Math.round(+xpos * (rect.width / 100)) + "px");
+    } else {
+        centerPos.css("top", (Math.round(rect.height / 2) - 15) + "px");
+        centerPos.css("left", (Math.round(rect.width / 2) - 7) + "px");
+    }
+    centerPos.show();
 }
 
+
+//function initCropper(imgId) {
+//    var wrapper = $(".sibu_crop").first();
+//    var srcImg = $("#content_panel").find(".sb-editing img[data-id='" + imgId + "']").first();
+//    var srcContainer = srcImg.parent();
+//    var ratio = parseFloat(srcContainer.css("width")) / parseFloat(wrapper.css("width"));
+//    var wrapperHeight = Math.min(320, parseFloat(srcContainer.css("height")) / ratio) + "px";
+//    wrapper.css("height", wrapperHeight);
+//    return new Cropper(wrapper.find("img")[0], {
+//        crop: function(event) {
+//            var data = event.detail;
+//            var cropper = this.cropper;
+//            var imageData = cropper.getImageData();
+//            var previewWidth = parseFloat(srcContainer.css("width"));
+//            var imageScaledRatio = data.width / previewWidth;
+//            var width = imageData.naturalWidth / imageScaledRatio + 'px';
+//            var height = imageData.naturalHeight / imageScaledRatio + 'px';
+//            var marginLeft = -data.x / imageScaledRatio + 'px';
+//            var marginTop = -data.y / imageScaledRatio + 'px';
+//            // console.log("crop detail : " + JSON.stringify(data));
+//            // console.log('img data : ' + JSON.stringify(imageData));
+//            $("#element_style").val("width: " + width + "; height: " + height + "; margin-left: " + marginLeft + "; margin-top: " + marginTop +"; max-width: none; max-height: none;");
+//        }
+//    });
+//}
+
 function refreshAfterEdit(reload, sectionId) {
     var baseUrl = window.location.href.split('?')[0];
     if (reload) {

data/app/assets/stylesheets/sibu/defaults.scss

@@ -207,6 +207,19 @@ $sibu-color3 : #333 !default;
           font-weight: bold;
         }
       }
+
+      .sibu_center {
+        position: relative;
+
+        #sibu_center_pos {
+          position: absolute;
+          z-index: 3;
+          font-size: 20px;
+          font-weight: bold;
+          color: white;
+          text-shadow: 0 2px grey;
+        }
+      }
     }
 
     #editor-container .ql-editor {

data/app/assets/stylesheets/sibu/sibu.css

@@ -1,6 +1,5 @@
 /*
  *= require ../quill/quill.snow
- *= require ../cropper/cropper
  *= require_self
  */
 

data/app/helpers/sibu/pages_helper.rb

@@ -74,9 +74,10 @@ module Sibu
       if action_name == 'show'
         content["src"] = ("/#{conf[:deployment_path]}" + content["src"]) if @online && conf[:deployment_path]
       else
-        opts.merge!({data: {id: elt_id(elt), type: "media", repeat: repeat, size: size}}) if action_name != 'show'
+        opts.merge!({data: {id: elt_id(elt), type: "media", repeat: repeat, size: size}})
       end
-      wrapper ? content_tag(wrapper, content_tag(:img, nil, content.except("id")), opts) : content_tag(:img, nil, content.except("id").merge(opts))
+      wrapper ? content_tag(wrapper, content_tag(:img, nil, content.except("id")), opts)
+          : content_tag(:img, nil, content.except("id").merge(opts.stringify_keys) {|k, old, new| k == 'class' ? [old, new].join(' ') : new})
     end
 
     def grp(elt, opts = {}, &block)

data/app/models/concerns/sibu/image_uploader.rb

@@ -11,10 +11,8 @@ class Sibu::ImageUploader < Shrine
     images_config = Rails.application.config.sibu[:images]
     image_type = io.mime_type
 
-    if image_type == "image/svg+xml"
-
+    if image_type == "image/svg+xml" || io.metadata['filename'].end_with?('.svg')
       {original: io, large: io.download, medium: io.download, small: io.download}
-
     else
       large = resize_to_limit!(original, images_config[:large], images_config[:large]) {|cmd| cmd.auto_orient}
       medium = resize_to_limit(large, images_config[:medium], images_config[:medium])

data/app/models/sibu/image.rb

@@ -17,3 +17,7 @@ module Sibu
     end
   end
 end
+
+# ['beds-green.svg', 'camp-white.svg', 'doc-green.svg', 'doc-white.svg', 'earth-white.svg', 'family-sec_blue.svg',
+# 'family-white.svg', 'flag.svg', 'hands-green.svg', 'home-green.svg', 'house-white.svg', 'marker.svg', 'men-green.svg',
+# 'money-blue.svg', 'money-green.svg', 'quotes.svg', 'tel-green.svg', 'tel-white.svg', 'tv-green.svg']

data/app/views/sibu/pages/_media_edit_panel.html.erb

@@ -19,12 +19,13 @@
         <% if @element["src"] == DEFAULT_IMG || @element["src"].blank? %>
           <p>Veuillez sélectionner une image.</p>
         <% end %>
-        <div class="sibu_is_cropped" style="display: <%= (@element["src"] == DEFAULT_IMG || @element["src"].blank?) ? 'none' : 'block' %>">
-          <%= check_box_tag('is_cropped', true, !@element["style"].blank?, id: 'is_cropped', class: 'checkbox') %>
-          <%= label_tag 'is_cropped', "Recadrer l'image" %>
+        <div class="sibu_custom_center" style="display: <%= (@element["src"] == DEFAULT_IMG || @element["src"].blank?) ? 'none' : 'block' %>">
+          <%= check_box_tag('custom_center', true, !@element["class"].blank?, id: 'custom_center', class: 'checkbox') %>
+          <%= label_tag 'custom_center', "Recentrer l'image" %>
         </div>
-        <div class="sibu_crop">
+        <div class="sibu_center">
           <%= image_tag(@element["src"]) unless @element["src"] == DEFAULT_IMG || @element["src"].blank? %>
+          <div id="sibu_center_pos" style="display: none;">✕</div>
         </div>
         <div class="sibu_field" style="display: <%= (@element["src"] == DEFAULT_IMG || @element["src"].blank?) ? 'none' : 'block' %>">
           <%= label_tag 'element[alt]', 'Légende / texte alternatif' %>
@@ -34,7 +35,7 @@
     </div>
     <%= hidden_field_tag 'element[id]', @element["id"] %>
     <%= hidden_field_tag 'element[src]', @element["src"] %>
-    <%= hidden_field_tag 'element[style]', @element["style"] %>
+    <%= hidden_field_tag 'element[class]', @element["class"] %>
     <%= hidden_field_tag :element_id, @element_id %>
     <%= hidden_field_tag :section_id, @section_id %>
     <%= hidden_field_tag :entity, @entity_type %>

data/app/views/sibu/pages/edit_element.js.erb

@@ -39,36 +39,36 @@ editPanel.slideDown("fast", function() {
         });
     <% when 'media' %>
         var images = editPanel.find(".sibu_image img");
-        var isCropped = $("#is_cropped"), cropper;
+        var customCenter = $("#custom_center"), customCtr;
         images.click(function() {
             if(!$(this).hasClass('selected')) {
                 images.removeClass('selected');
                 $(this).addClass('selected');
                 $("#element_src").val($(this).data("src"));
                 $("#element_alt").val($(this).data("alt"));
-                editPanel.find(".sibu_crop").html('<img src="' + $("#element_src").val() + '"/>');
+                editPanel.find(".sibu_center").html('<img src="' + $("#element_src").val() + '"/>');
                 editPanel.find(".sibu_selected_image > p:first-child").hide();
-                editPanel.find(".sibu_selected_image").find(".sibu_is_cropped").show();
+                editPanel.find(".sibu_selected_image").find(".sibu_custom_center").show();
                 editPanel.find(".sibu_selected_image").find(".sibu_field").show();
-                if(isCropped.is(":checked")) {
-                    cropper = initCropper("<%= @element_id %>");
+                if(customCenter.is(":checked")) {
+                    customCtr = initCustomCenter();
                 }
             }
         });
-        if(editPanel.find(".sibu_crop img").size() > 0) {
-            if(isCropped.is(":checked")) {
-                cropper = initCropper("<%= @element_id %>");
+        if(editPanel.find(".sibu_center img").size() > 0) {
+            if(customCenter.is(":checked")) {
+                customCtr = initCustomCenter("<%= @element_id %>");
             }
         }
-        isCropped.change(function() {
+        customCenter.change(function() {
           if($(this).is(":checked")) {
-              cropper = initCropper("<%= @element_id %>");
+              customCtr = initCustomCenter("<%= @element_id %>");
           } else {
               $("#element_style").val("");
-              $(".sibu_crop").attr("style", "");
-              if(cropper) {
-                  cropper.destroy();
-              }
+              $(".sibu_center").attr("style", "");
+//              if(cropper) {
+//                  cropper.destroy();
+//              }
           }
         });
     <% when 'link' %>

data/lib/sibu/version.rb

@@ -1,3 +1,3 @@
 module Sibu
-  VERSION = '0.6.9'
+  VERSION = '0.7.0'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sibu
 version: !ruby/object:Gem::Version
-  version: 0.6.9
+  version: 0.7.0
 platform: ruby
 authors:
 - Jean-Baptiste Vilain
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-12-02 00:00:00.000000000 Z
+date: 2018-12-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails