Changeset 25792 for extensions/rv_gmaps

Timestamp:

Dec 5, 2013, 9:35:51 PM (10 years ago)

Author:

rvelices

Message:

rv_gmaps improvements on mobile/tablets

Location:

extensions/rv_gmaps/trunk

Files:

• changelog.txt (modified) (1 diff)
• map_data.php (modified) (2 diffs)
• template/data_handler.js (modified) (1 diff)
• template/map.tpl (modified) (1 diff)
• template/style.css (modified) (2 diffs)

extensions/rv_gmaps/trunk/changelog.txt

@@ -1 +1 @@
 2.6.a
 - piwigo 2.6
+- mobile/tablet improvement
 
 2.5.d

extensions/rv_gmaps/trunk/map_data.php

@@ -31 +31 @@
 $where_sql = rvm_bounds_to_sql( $page['box'] );
 
-$img_fields = ' i.id,i.representative_ext,i.name,i.comment,i.file,i.path,i.lat,i.lon';
+$img_fields = ' i.id,i.representative_ext,i.name,i.comment,i.file,i.path,i.lat,i.lon,i.width,i.height,i.rotation';
 
 $was_flat = @$page['flat'];
@@ -126 +126 @@
 
                 $page_url = str_replace(array('123456789','dummy_file'), array($img['id'], get_filename_wo_extension($img['file'])), $page_url_model);
+                $thumb = new DerivativeImage($thumb_params, new SrcImage($img));
+                $thsize = $thumb->get_size();
 
     if ($j) echo( "," );
-    echo "{tn:", jsgm_str( DerivativeImage::url( $thumb_params,$img ) );
-    echo ",name:", jsgm_str( render_element_name($img) );
-    echo ",comment:", jsgm_str( render_element_description($img) );
-    echo ",page_url:", jsgm_str( $page_url );
+    echo "{tn:", jsgm_str( $thumb->get_url() );
+                echo ",w:",$thsize[0],',h:',$thsize[1];
+    echo ",t:", jsgm_str( render_element_name($img) );
+    echo ",d:", jsgm_str( render_element_description($img) );
+    echo ",url:", jsgm_str( $page_url );
     echo "}";
   }

extensions/rv_gmaps/trunk/template/data_handler.js

@@ -212 +212 @@
 buildCurrentPictureHtml: function( marker )
 {
-        var imageDetail = marker.pwg.images[marker.currentImageIndex];
+        var imageDetail = marker.pwg.images[marker.currentImageIndex],
+                dpr = window.devicePixelRatio || 1,
+                w = Math.round(imageDetail.w/dpr),
+                h = Math.round(imageDetail.h/dpr);
+        
         var res = "";
-        res += '<div class="gmiw_imageTitle">' + imageDetail.name + "</div>";
+        res += '<div class="gmiw_imageTitle">' + imageDetail.t + "</div>";
         res +=
 '<div class="gmiw_imageContent">' +
 '<div class="gmiw_imageWrap">'+
-  '<a href="'+imageDetail.page_url+'">' +
-  '<img src="' + imageDetail.tn + '" alt="thumb" />'+
+  '<a href="'+imageDetail.url+'">' +
+  '<img src="' + imageDetail.tn + '" alt="thumb" width='+w+' height='+h+'>'+
 '</a></div>' +
-'<div class="gmiw_imageComment">' + imageDetail.comment + '</div>' +
+'<div class="gmiw_imageComment">' + imageDetail.d + '</div>' +
 '</div>';
         return res;

extensions/rv_gmaps/trunk/template/map.tpl

@@ -174 +174 @@
 
 <div id="titlebar">
-  <div class="titlebar_links" >
-    <span id="dataLoadStatus"></span>
-    <a id="aKml" href="" type="application/vnd.google-earth.kml+xml" class="gmnoprint"><img src="//maps.google.com/mapfiles/ms/view_as_kml.png" width="16" height="16" alt="kml"> <span>KML</span></a>
-    <a id="aLinkToThisPage" href="" class="gmnoprint"><img src="//maps.google.com/mapfiles/bar_icon_link.gif" alt="&lt;-&gt;" width="16" height="16"> <span>{'Link to this page'|@translate}</span></a>
+        <div class="titlebar_links">
+                <span id="dataLoadStatus"></span>
+                <a id="aKml" href="" type="application/vnd.google-earth.kml+xml" class="gmnoprint"><img src="//maps.google.com/mapfiles/ms/view_as_kml.png" width="16" height="16" alt="kml"><span class="hideable"> KML</span></a>
+                <a id="aLinkToThisPage" href="" class="gmnoprint"><img src="//maps.google.com/mapfiles/bar_icon_link.gif" alt="&lt;-&gt;" width="16" height="16"><span class="hideable"> {'Link to this page'|@translate}</span></a>
     <a id="aBlowup" href="" onclick="return PwgDataHandler.blowupUrl(this.href);" class="gmnoprint" title="{'show all photos around this location'|@translate}">
                         <img src="{$PLUGIN_ROOT_URL}/icons/pic_s.gif" alt="" title="{'show all photos around this location'|@translate}">

extensions/rv_gmaps/trunk/template/style.css

@@ -80 +80 @@
         min-width: 150px;
         width: 150px;
-        margin-right: 10px;
-        margin-left: 5px;
+        margin-right: 5px;
+        margin-left: 10px;
         font-weight: bold;
 }
@@ -139 +139 @@
 
 
+@media (max-width:980px){
+        #q {
+                max-width:200px; 
+        }
+        #titlebar {
+                height: 36px;
+        }
+
+        #map {
+                top: 36px;
+        }
+}
+
+@media (max-width:640px){
+        #q {
+                max-width: 150px;
+        }
+        .hideable {
+                display:none;
+        }
+}
+
+@media (max-width:360px){
+        #q {
+                display: none; 
+        }
+}