sibu 0.8.3 → 0.8.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7b2770373432dab6850c3180a56ebd42af66c248
-  data.tar.gz: 8dfa1d1647b7d938a798893e9c39d3a68d8cc39f
+  metadata.gz: cddd12680eea5507eda3f1b851337aab642c5a2b
+  data.tar.gz: 9d6cf08c38f7459d759fda9ea6456d28234d8e29
 SHA512:
-  metadata.gz: c67407583fd247daa99dfc66d450a07985601aa1d7f28f8ef1f6cef18e0729b5f5cdf57ceba2c8c6045ee7c111ed4e0e7c8f62aea06128f779aefa007feb610e
-  data.tar.gz: 7b9246e9424ece9f7555fa5f33af00cdb8181b2db2d649d11602080cd8c9431bdf92f8e48634c4cf3cfde22450805976dfaca5047ec8320fcb16588ac62fe74b
+  metadata.gz: 6998bfcfb8d923ecaa92db0e5d7e8d225153e569e307f01fdda5bd5bc38b0366743ef60f656bd552d5b1ba54a16874a4a150aafd6c27be961bf330506b2ed465
+  data.tar.gz: 90e2d568bf8a02310aac7cc9c8419083c3708ad6532e611c0d3c6113738937add8a6eafee93b9bebd1eaad7aba4708254501eed9a8a91ec3f24a5eaac78a1cb4

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

@@ -113,6 +113,7 @@ function initQuillEditor(container) {
 function initCustomCenter() {
     var wrapper = $(".sibu_center > img"), centerPos = $(".sibu_center > #sibu_center_pos");
     displayCurrentCenter(wrapper[0], centerPos);
+    $(".sibu_center > #sibu_center_desc").show();
     wrapper.click(function(e) {
         var rect = e.target.getBoundingClientRect();
         var x = e.clientX - rect.left;

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

@@ -58,6 +58,10 @@ $sibu-color3 : #333 !default;
     &.selected {
       background-color: $sibu-color3;
     }
+
+    &:hover {
+      cursor: pointer;
+    }
   }
 
   .sibu_form {
@@ -163,35 +167,6 @@ $sibu-color3 : #333 !default;
       width: 70%;
       max-height: calc(100vh - 300px);
       overflow: auto;
-
-      .sibu_image {
-        position: relative;
-        span {
-          position: absolute;
-          z-index: -1;
-          line-height: 1;
-          width: 100%;
-          text-align: center;
-          top: 30px;
-
-          & + .selected {
-            background-color: transparentize($sibu-color3, 0.5);
-          }
-        }
-      }
-
-      img {
-        padding: 5px;
-        border: 1px solid $sibu-color3;
-
-        &.selected {
-          background-color: $sibu-color3;
-        }
-
-        &:hover {
-          cursor: pointer;
-        }
-      }
     }
 
     .sibu_selected_image {
@@ -219,6 +194,12 @@ $sibu-color3 : #333 !default;
           color: white;
           text-shadow: 0 2px grey;
         }
+
+        #sibu_center_desc {
+          font-size: 10px;
+          line-height: 1.2;
+          margin-top: 5px;
+        }
       }
     }
 

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

@@ -7,13 +7,29 @@
       <div class="sibu_select_images sibu_field">
         <p>Sélectionnez ou <%= link_to 'téléchargez', new_image_path(page_id: @page.id, section_id: @section_id, entity_type: @entity_type,
                                                                      element_id: @element_id, img_id: @element["id"], size: @size) %> une image</p>
-        <% site_images.each_with_index do |image, i| %>
-          <div class="sibu_image" data-img-id="<%= image.id %>">
-            <% if i == 0 %><span>Aucune image</span><% end %>
-            <%= image_tag image.file_url(:small), class: (@element["src"] == image.file_url(@size) ? 'selected' : ''),
-                          data: {src: image.file_url(@size), alt: image.alt} %>
-          </div>
-        <% end %>
+        <table class="sibu_images">
+          <thead>
+          <tr>
+            <th>Aperçu</th>
+            <th>Descriptif</th>
+            <th>Crédits</th>
+          </tr>
+          </thead>
+          <tbody>
+            <% site_images.each do |image| %>
+              <tr>
+                <td>
+                  <span class="sibu_image" data-img-id="<%= image.id %>">
+                    <%= image_tag image.file_url(:small), class: (@element["src"] == image.file_url(@size) ? 'selected' : ''),
+                                  data: {src: image.file_url(@size), alt: image.alt} %>
+                  </span>
+                </td>
+                <td><%= image.alt %></td>
+                <td><%= image.credits %></td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
       </div>
       <div class="sibu_selected_image">
         <% if @element["src"] == DEFAULT_IMG || @element["src"].blank? %>
@@ -26,6 +42,7 @@
         <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 id="sibu_center_desc" style="display: none;"><em>Cliquez sur l'image pour la recentrer sur un point donné (à utiliser lorsque l'image est tronquée car la zone d'affichage est trop petite).</em></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' %>

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

@@ -38,15 +38,19 @@ editPanel.slideDown("fast", function() {
             "text-align": wrapper.css("text-align")
         });
     <% when 'media' %>
-        var images = editPanel.find(".sibu_image img");
-        var customCenter = $("#custom_center"), customCtr;
+        var images = editPanel.find(".sibu_image");
+        var customCenter = $("#custom_center");
         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_center").html('<img src="' + $("#element_src").val() + '"/><div id="sibu_center_pos" style="display: none;">✕</div>');
+                var imgElt = $(this).find("img");
+                $("#element_src").val(imgElt.data("src"));
+                $("#element_alt").val(imgElt.data("alt"));
+                editPanel.find(".sibu_center").html(
+                    '<img src="' + $("#element_src").val() + '"/>' +
+                    '<div id="sibu_center_pos" style="display: none;">✕</div>' +
+                    '<div id="sibu_center_desc" style="display: none;"><em>Cliquez sur l\'image pour la recentrer sur un point donné (à utiliser lorsque l\'image est tronquée car la zone d\'affichage est trop petite)</em></div>');
                 editPanel.find(".sibu_selected_image > p:first-child").hide();
                 editPanel.find(".sibu_selected_image").find(".sibu_custom_center").show();
                 editPanel.find(".sibu_selected_image").find(".sibu_field").show();
@@ -69,6 +73,7 @@ editPanel.slideDown("fast", function() {
               $("#element_class").val("");
               $(".sibu_center").attr("style", "");
               $(".sibu_center > #sibu_center_pos").hide();
+              $(".sibu_center > #sibu_center_desc").hide();
           }
         });
     <% when 'link' %>

data/lib/sibu/version.rb

@@ -1,3 +1,3 @@
 module Sibu
-  VERSION = '0.8.3'
+  VERSION = '0.8.4'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sibu
 version: !ruby/object:Gem::Version
-  version: 0.8.3
+  version: 0.8.4
 platform: ruby
 authors:
 - Jean-Baptiste Vilain
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-07-18 00:00:00.000000000 Z
+date: 2019-07-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails