Supported collapsible state of issues map

Signed-off-by: Ko Nagase <[email protected]>

Author: sanak

app/helpers/gtt_map_helper.rb

@@ -11,7 +11,8 @@ def map_form_field(form, map, field: :geojson, bounds: nil, edit_mode: nil, uplo
 
   def map_tag(map: nil, layers: map&.layers,
               geom: map.json, bounds: map.bounds,
-              edit: nil, popup: nil, upload: true)
+              edit: nil, popup: nil, upload: true,
+              collapsed: false)
 
     data = {
       geom: geom.is_a?(String) ? geom : geom.to_json
@@ -28,11 +29,13 @@ def map_tag(map: nil, layers: map&.layers,
     data[:edit]   = edit   if edit
     data[:popup]  = popup  if popup
     data[:upload] = upload
+    data[:collapsed] = collapsed if collapsed
 
     uid = "ol-" + rand(36**8).to_s(36)
 
     safe_join [
-      content_tag(:div, "", data: data, id: uid, class: 'ol-map'),
+      content_tag(:div, "", data: data, id: uid, class: 'ol-map',
+        style: (collapsed ? "display: none" : "display: block")),
       javascript_tag("
         document.addEventListener('DOMContentLoaded', function(){
           var target = document.getElementById('#{uid}');

app/views/issues/index/_map.html.erb

@@ -1,9 +1,10 @@
 <% if @project and @project.module_enabled?(:gtt) %>
+  <% collapsed = Setting.plugin_redmine_gtt['default_collapsed_issues_page_map'] == 'true' %>
+  <fieldset id="location" class="<%= "collapsible" + (collapsed ? " collapsed" : "") %>">
+    <legend class="<%= "icon " + (collapsed ? "icon-collapsed" : "icon-expended") %>"><%= l(:field_location) %></legend>
 
-<fieldset id="location" class="collapsible">
-  <legend class="icon icon-expended"><%= l(:field_location) %></legend>
-
-  <%= map_tag map: @project.map, geom: (Issue.array_to_geojson(@issues, include_properties: { only: %i(id subject tracker_id status_id) }) if @issues), popup: { href: '/issues/[id]' } %>
-</fieldset>
+    <%= map_tag map: @project.map, geom: (Issue.array_to_geojson(@issues, include_properties: { only: %i(id subject tracker_id status_id) }) if @issues),
+      popup: { href: '/issues/[id]' }, collapsed: collapsed %>
+  </fieldset>
 
 <% end %>

app/views/settings/gtt/_settings.html.erb

@@ -22,6 +22,11 @@
 <div class="box tabular settings">
 <h3><%= l(:select_default_map_settings) %></h3>
 
+<p>
+  <%= content_tag(:label, l(:label_default_collapsed_issues_page_map)) %>
+  <%= check_box_tag 'settings[default_collapsed_issues_page_map]', true, @settings[:default_collapsed_issues_page_map] %>
+</p>
+
 <p>
   <%= content_tag(:label, l(:gtt_settings_general_center_lon)) %>
   <%= text_field_tag('settings[default_map_center_longitude]',

config/locales/en.yml

@@ -58,6 +58,7 @@ en:
   # gtt_settings_geocoder_district_field_name: "District field name"
   # gtt_park_search_field_name: "Park search field name"
 
+  label_default_collapsed_issues_page_map: "Default collapsed issues page map"
   label_gtt_point: "Point"
   label_gtt_linestring: "LineString"
   label_gtt_polygon: "Polygon"

config/locales/ja.yml

@@ -58,6 +58,7 @@ ja:
   # gtt_settings_geocoder_district_field_name: "区フィールド名"
   # gtt_park_search_field_name: "公園検索フィールド名"
 
+  label_default_collapsed_issues_page_map: "チケット一覧の地図を既定で非表示"
   label_gtt_point: "ポイント"
   label_gtt_linestring: "ライン"
   label_gtt_polygon: "ポリゴン"

init.rb

@@ -18,6 +18,7 @@
 
   settings(
     :default => {
+      'default_collapsed_issues_page_map' => false,
       'default_map_center_longitude' => 139.691706,
       'default_map_center_latitude' => 35.689524,
       'default_map_zoom_level' => 13,

src/components/gtt-client.ts

@@ -265,6 +265,25 @@ export class GttClient {
       this.setPopover()
     }
 
+    // Zoom to extent when map collapsed => expended
+    if (this.contents.collapsed) {
+      const self = this
+      const collapsedObserver = new MutationObserver((mutations) => {
+        // const currentMap = this.map
+        mutations.forEach(function(mutation) {
+          if (mutation.attributeName !== 'style') {
+            return
+          }
+          const mapDiv = mutation.target as HTMLDivElement
+          if (mapDiv && mapDiv.style.display === 'block') {
+            self.zoomToExtent(true)
+            collapsedObserver.disconnect()
+          }
+        })
+      })
+      collapsedObserver.observe(self.map.getTargetElement(), { attributes: true, attributeFilter: ['style'] })
+    }
+
     // Sidebar hack
     const resizeObserver = new ResizeObserver((entries, observer) => {
       this.maps.forEach(m => {

src/stylesheets/app.scss

@@ -33,11 +33,6 @@ div.usermap h3 {
   padding-left: 20px;
 }
 
-/* hide Map on issues list by default  */
-//fieldset#location > div.ol-map{
-//  display: none;
-//}
-
 i[id^='icon_settings_tracker_'] {
   font-size: 1.5em;
   vertical-align: middle;