publiclab/mapknitter

View on GitHub
app/views/layouts/knitter2.html.erb

Summary

Maintainability
Test Coverage
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <%=raw csrf_meta_tags %>
  <title>MapKnitter: <%= @map[:name] ? @map[:name] : "New map" %></title>
  <meta name="description" content="<%= @map.description.gsub('"',"'") if @map.description %>" />  
  <meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

  <link rel="shortcut icon" href="/images/mapknitter-255.png" />

  <%= stylesheet_link_tag 'application' %>
  <%= javascript_include_tag 'application' %>

  <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js' async defer></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAxlBXzYwdeaOMKZgx_UNBp2qBtdD0L_9g"></script>
  
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-K5D2HTSG0B"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-K5D2HTSG0B');
  </script>
</head>
<body>

  <%= render :partial => 'layouts/header' %>

  <div class="modal modal-welcome">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">Looks like this is a new map</h3>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
          <p>
            This map does not yet have any images. If you're new to MapKnitter, try <a target="_blank" href="/">watching the tutorial video on the front page</a> for a crash course in how to make a map. 
          </p>

          <p><img src="/images/drag-drop.png" /></p>

          <p>
            To begin, <b>simply drag images onto the map</b> or click the <code><i class="fa fa-upload"></i> <b>Upload</b></code> button in the right sidebar. 
          </p>
          <hr />
          <p>
            Where can you find aerial images? <a href="//publiclab.org/wiki/balloon-mapping">Take them yourself</a> with a camera on a balloon or kite, or out the window of an airplane. 
          </p>
        </div>
        <div class="modal-footer">
          <center><button type="button" class="btn btn-lg btn-primary" data-dismiss="modal">Begin</button></center>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <% if params[:annotations] # legacy %>
    <%= render :partial => "map/annotations" %>
  <% end %>

  <div id="knitter-map-pane"<% if @embed %> style="width:100%;max-width:none;"<% end %>>

  <% unless @embed %><a class="sidebar-toggle sidebar-toggle-tab"><i class="sidebar-toggle-icon fa fa-chevron-right"></i></a><% end %>
  </div>

  <% unless @embed %>
  <div class="sidebar">
    <div class="sidebar-wrap">
      <div class="sidebar-inner-wrap">
        <div class="sidebar-header"><%= yield :title %></div> <% if @map.new_record? %>
          <%= yield %>
        <% else %>
          <div class="sidebar-content-wrap">
            <!-- Toolbar for uploading and viewing images and exporting the map. -->
            <div class="btn-group sidebar-buttons" role="group">
              <!-- Upload images -->
                <button class="btn btn-outline-secondary" title="Upload images" type="button" data-toggle="modal" data-target="#uploadModal" onClick="$('#map-images-tab').tab('show')">
                  <span class="d-none d-sm-block"><span class="fa fa-upload"></span> Upload</span>
                </button>

              <!-- Write a research note on Public Lab -->
                <a target="_blank" class="btn btn-outline-secondary" title="Post a research note on Public Lab" href="//publiclab.org/post?title=MapKnitter map of <%= @map.name %>&tags=lat:<%= @map.lat %>,lon:<%= @map.lon %>,mapknitter&body=%3Cimg src=%22<%= @map.warpables.first&.image&.url(:medium) %>%22%3E%3C/img%3E%3Ciframe%20src=%22https://mapknitter.org/embed/<%= @map.slug %>%22%20style=%22border:none%22%20width=%22100%25%22%20height=%22400px%22%3E%3C/iframe%3E%3Cbr /%3E%3Cbr /%3E<%= @map.description %>%3Cbr /%3Ehttps://mapknitter.org/embed/<%= @map.slug %>" type="button">
                  <span class="d-none d-sm-block"><span class="fa fa-file"></span> Post</span>
                </a>

<!--
                <div class="btn-group" role="group">
                  <button id="btnGroupDrop1" type="button" title="Export map" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">
                    <span class="fa fa-download"></span>
                    Download
                  </button>
                  <div class="dropdown-menu map-exports" aria-labelledby="btnGroupDrop1" role="menu">
                    <a class="dropdown-item" href="#"><%= render :partial => 'maps/exports' %></a>
                  </div>
                </div>
-->
            </div>

            <div class="sidebar-tabs">
              <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" href="#map-details-container" role="tab" data-toggle="tab" aria-selected="true">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#map-images-container" role="tab" data-toggle="tab">Images</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link export-tab" href="#map-exports-container" role="tab" data-toggle="tab">Export</a>
                </li>
                <li class="nav-item d-none d-sm-block">
                  <a class="nav-link" target="_blank" href="https://publiclab.org/chat" role="tab" style="border: none;">Chat</a>
                </li>
<!--
                <li class="nav-item">
                  <a class="nav-link" href="#map-editing-container" role="tab" data-toggle="tab">Annotate</a>
                </li>
-->
              </ul>

              <!-- Tab panes -->
              <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="map-details-container">
                   <div class="d-block d-sm-none">
                    <p style="text-align:center;">
                     <a class="btn btn-primary btn-lg sidebar-toggle">View map <i class="fa fa-chevron-circle-right"></i></a>
                    </p>
                    <hr />
                  </div>
                  <div>
                    <%=raw markdown_to_html(@map.description) unless @map.description.nil? %>
                  </div>
                  <p>
                    <span class="map-detail-label">Location</span>
                    <a href="https://www.openstreetmap.org/#map=<%= @map.zoom %>/<%= @map.lat %>/<%= @map.lon %>"><%= @map.location %></a>
                  </p>
                  <table>
                    <tr><td><span class="map-detail-label">Latitude </span><%= @map.lat %></td><td><span class="map-detail-label">Longitude </span><%= @map.lon %></td></tr>
                  </table>

                  <p>
                    <span class="map-detail-label">License (<a target="_blank" href="http://publiclab.org/licenses">Learn more</a>):</span>
                    <a href="/maps/license/<%= @map.license %>"><%= @map.license %></a> 
                  </p>

                  <hr />
                  <p class="cta-buttons">
                    <% if logged_in? %>
                      <button type="button" class="btn btn-outline-info btn-sm" onClick="$('#map-edit-container').toggle()">Edit details</button>
                      <%= link_to 'Delete map', map_path(@map), method: :delete, class: "btn btn-outline-info btn-sm", data: { confirm: 'Are you sure? This cannot be undone.' } %>
                    <% end %>
                    <button type="button" class="btn btn-outline-info btn-sm" onClick="$('.share-link').toggle()">Embed code</button>
                    <!-- this button does not lead to anywhere -->
<!--                     <button type="button" class="btn btn-outline-info btn-sm" title="Preview with NDVI" onClick="ImageSequencer().replaceImage('.leaflet-image-layer',['ndvi','colormap'])">NDVI (beta)</button> -->
                    <button type="button" class="btn btn-outline-info btn-sm" rel="tooltip" title="Custom image processing" onClick="ImageSequencer().replaceImage('.leaflet-image-layer',prompt('Enter an ImageSequencer code', 'invert,ndvi,colormap').split(','))">Add ImageSequencer code</button> 
                    <div class="share-link" style="display:none;">
                      <%= render :partial => 'maps/share' %>
                    </div>
                    <a href="https://publiclab.org/image-sequencer#NDVI">Learn more about ImageSequencer code</a>
                  </p>

                  <div style="display:none;" id="map-edit-container">
                    <%= render :partial => 'maps/edit' %>
                  </div>
                  <div class="tags">
                    <%= render :partial => "tags/index" %>
                  </div>
                  <hr />
                  <div class="comments">
                    <%= render :partial => "comments/index" %>
                    <hr />
                    <%= render :partial => "comments/new" %>
                  </div>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="map-images-container">
                  <%= yield :images %>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="map-editing-container">
                  <%= render :partial => "sidebar_annotations" %>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="map-exports-container">
                  <%= render :partial => "sidebar_exports" %>
                </div>
              </div>
            </div><!-- .sidebar-tabs -->
          </div><!-- .sidebar-content -->
        <% end %>
      </div><!-- .sidebar-inner-wrap -->
    </div><!-- .sidebar-wrap -->
  </div><!-- .sidebar -->

  <%= render :partial => "/images/new" unless params[:action] == 'new' %>
  <% end %>
  
  <script>
    var map
    (function(){
      window.mapknitter = new MapKnitter.Map({
        latlng:     L.latLng(<%= @map.lat %>, <%= @map.lon %>),
        zoom:       <%= @map.zoom %>,
        readOnly:   <%= @embed == true || @annotations == true %>,
        logged_in:   <%= logged_in? == true %>,
        anonymous:   <%= @map.anonymous? == true %>,
        map_id:      <%= @map.id || 0 %>,
        warpablesUrl:  "<%= url_for([@map, :warpables])+'.json' unless @map.warpables.empty? %>"
      });
      <% if @map.warpables.empty? && params[:action] == 'edit' && @map.display_welcome %>
        <% @map.update!(display_welcome: false) %>
        $('.modal-welcome').modal();
      <% end %>
     })();
   $(function() {
     $('[rel="tooltip"]').tooltip();
   });
   </script> 
</body>
</html>