add image component

ontoportal-lirmm · Aug 11, 2023 · fb2541f · fb2541f
1 parent 579e9d5
commit fb2541f
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 6 deletions.
diff --git a/app/assets/images/icons/loop.svg b/app/assets/images/icons/loop.svg
diff --git a/app/assets/stylesheets/components/image.scss b/app/assets/stylesheets/components/image.scss
@@ -0,0 +1,22 @@
+.image-container {
+    position: relative;
+    .image-content{
+        width: 100%;
+        object-fit: scale-down;
+        margin-bottom: 30px;
+    }
+    .loop_icon {
+        position: absolute;
+        width: 50px;
+        background-color: white;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 50px;
+        padding: 10px;
+        bottom: 0;
+        right: 0;
+    }
+}
diff --git a/app/assets/stylesheets/components/index.scss b/app/assets/stylesheets/components/index.scss
@@ -21,4 +21,5 @@
 @import "table";
 @import "concept_details";
 @import "card";
-@import "header";
+@import "header";
+@import "image";
diff --git a/app/components/display/image_component.rb b/app/components/display/image_component.rb
@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+class Display::ImageComponent < ViewComponent::Base
+  include ModalHelper
+
+  def initialize(src: , title: '', enable_zoom: true)
+    super
+    @src = src
+    @title = title
+    @enable_zoom = enable_zoom
+  end
+
+  def call
+    content_tag(:div, class: 'image-container ') do
+      depiction_with_modal(@src)
+    end
+  end
+
+  def depiction_with_modal(depiction_url)
+    img_tag = image_tag(depiction_url, class: 'image-content')
+    loop_icon_tag = content_tag(:span , image_tag('icons/loop.svg'), class: 'loop_icon')
+    modal_url = "/ajax/images/show?url=#{depiction_url}"
+    modal_options = { data: { show_modal_title_value: @title, show_modal_size_value: 'modal-xl' } }
+
+    if @enable_zoom
+      link_to_modal(nil, modal_url, modal_options) do
+        loop_icon_tag + img_tag
+      end
+    else
+      img_tag
+    end
+
+  end
+end
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
@@ -85,6 +85,10 @@ def detect_locale
   before_action :set_global_thread_values, :domain_ontology_set, :authorize_miniprofiler, :clean_empty_strings_from_params_arrays, :init_trial_license
 
 
+  def show_image_modal
+    url = params[:url]
+    render turbo_stream: helpers.prepend('application_modal_content') { helpers.image_tag(url, style:'width: 100%') }
+  end
 
   def set_global_thread_values
     Thread.current[:session] = session

diff --git a/app/views/layouts/component_preview.html.erb b/app/views/layouts/component_preview.html.erb
@@ -49,7 +49,7 @@
   </script>
 </head>
 <body class="d-flex align-items-center justify-content-center w-100 h-100">
-
+  <%= modal_frame_container %>
   <div style="margin: 40px"> 
     <%= yield %> <!-- rendered preview will be injected here -->
     <%= javascript_include_tag "application" %>

diff --git a/app/views/layouts/component_preview_not_centred.html.erb b/app/views/layouts/component_preview_not_centred.html.erb
@@ -49,8 +49,8 @@
   </script>
 </head>
 <body class="d-flex justify-content-center w-100 h-100">
-
-<%= yield %> <!-- rendered preview will be injected here -->
-<%= javascript_include_tag "application" %>
+  <%= modal_frame_container %>
+  <%= yield %> <!-- rendered preview will be injected here -->
+  <%= javascript_include_tag "application" %>
 </body>
 </html>
diff --git a/config/routes.rb b/config/routes.rb
@@ -157,7 +157,7 @@
   get '/ajax/:ontology/classes/:conceptid/instances' => 'instances#index_by_class', :constraints => { conceptid: /[^\/?]+/ }
   get '/ajax/ontologies' , to:"ontologies#ajax_ontologies"
   get '/ajax/agents' , to:"agents#ajax_agents"
-
+  get '/ajax/images/show' => 'application#show_image_modal'
   # User
   get '/logout' => 'login#destroy', :as => :logout
   get '/lost_pass' => 'login#lost_password'

diff --git a/test/components/previews/display/image_component_preview.rb b/test/components/previews/display/image_component_preview.rb
@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Display::ImageComponentPreview < ViewComponent::Preview
+  def default
+    render Display::ImageComponent.new(src: "empty-box.svg", title: 'Image popup')
+  end
+end