Refs #3089, added behavior for click on 'view more information' that …

…loads more visits into the visit list. Notes: - Fixed bug in reinitialise() of jquery.jscrollpane.js.
matomo-org · Aug 12, 2013 · 93e2098 · 93e2098
1 parent 954c66c
commit 93e2098
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 22 deletions.
diff --git a/libs/jquery/jquery.jscrollpane.js b/libs/jquery/jquery.jscrollpane.js
@@ -129,10 +129,10 @@
                     maintainAtBottom = settings.stickToBottom && isCloseToBottom();
                     maintainAtRight = settings.stickToRight && isCloseToRight();
 
-                    hasContainingSpaceChanged = elem.innerWidth() + originalPaddingTotalWidth != paneWidth || elem.outerHeight() != paneHeight;
+                    hasContainingSpaceChanged = elem.innerWidth() != paneWidth - originalPaddingTotalWidth || elem.outerHeight() != paneHeight;
 
                     if (hasContainingSpaceChanged) {
-                        paneWidth = elem.innerWidth() + originalPaddingTotalWidth;
+                        paneWidth = elem.innerWidth();
                         paneHeight = elem.innerHeight();
                         container.css({
                             width: paneWidth + 'px',

diff --git a/plugins/Live/Controller.php b/plugins/Live/Controller.php
@@ -157,14 +157,31 @@ public function getSingleVisitSummary()
         echo $view->render();
     }
 
+    public function getVisitList()
+    {
+        $view = new View('@Live/getVisitList.twig');
+        $view->idSite = Common::getRequestVar('idSite', null, 'int');
+        $view->startCounter = Common::getRequestVar('filter_offset', 1, 'int');
+        $view->visits = Request::processRequest('Live.getLastVisitsDetails', array(
+            'segment' => self::getSegmentWithVisitorId(),
+            'filter_limit' => API::VISITOR_PROFILE_MAX_VISITS_TO_SHOW,
+            'disable_generic_filters' => 1
+        ));
+        echo $view->render();
+    }
+
     private function getUserCountryMapForVisitorProfile()
+    {
+        $params = array('fetch' => true, 'segment' => self::getSegmentWithVisitorId());
+        return FrontController::getInstance()->fetchDispatch('UserCountryMap', 'visitorMap', $params); // TODO: check if plugin is enabled?
+    }
+
+    private static function getSegmentWithVisitorId()
     {
         $segment = Request::getRawSegmentFromRequest();
         if (!empty($segment)) {
             $segment .= ';';
         }
-
-        $params = array('fetch' => true, 'segment' => $segment . 'visitorId==' . Common::getRequestVar('idVisitor'));
-        return FrontController::getInstance()->fetchDispatch('UserCountryMap', 'visitorMap', $params); // TODO: check if plugin is enabled?
+        return $segment . 'visitorId==' . Common::getRequestVar('idVisitor');
     }
 }
diff --git a/plugins/Live/stylesheets/visitor_profile.less b/plugins/Live/stylesheets/visitor_profile.less
@@ -375,7 +375,7 @@
     height:25px;
     width:546px;
     position:absolute;
-    bottom:54px;
+    bottom:0;
     right:28px;
     background:url(../images/visitor_profile_gradient.png) repeat-x;
 }
@@ -420,4 +420,31 @@ span.visitor-profile-goal-name {
 .visitor-profile-avatar .loadingPiwik {
     padding:0;
     margin:0;
+}
+
+.visitor-profile-visits-info {
+    position: relative;
+}
+
+.visitor-profile-visits-info > .loadingPiwik {
+    position: absolute;
+    top: 0;
+    left: 2px;
+    width: 545px;
+    height: unit(@visitor_profile_2nd_row_2nd_col_total_height - 16, px);
+    background-color: rgba(0,0,0,0.3);
+    z-index: 2;
+
+    > div {
+        display:table-cell;
+        vertical-align:middle;
+        text-align:center;
+
+        > div {
+            display:inline-block;
+            color:white;
+            background-color: rgba(0,0,0,0.7);
+            padding: 4px 8px;
+        }
+    }
 }
diff --git a/plugins/Live/templates/getVisitList.twig b/plugins/Live/templates/getVisitList.twig
@@ -0,0 +1,13 @@
+{% for visitInfo in visits.getRows() %}
+<li><h2 class="visitor-profile-visit-title" data-idvisit="{{ visitInfo.getColumn('idVisit') }}">{{ 'General_Visit'|translate }} #{{ startCounter }}</h2><span>&nbsp;- ({{ visitInfo.getColumn('visitDurationPretty')|raw }})</span><span class="visitor-profile-date">{{ visitInfo.getColumn('serverDatePrettyFirstAction') }}</span>
+    <ol class="visitor-profile-actions">
+        {% include "@Live/_actionsList.twig" with {'actionDetails': visitInfo.getColumn('actionDetails'),
+                                                   'javascriptVariablesToSet': {
+                                                        'filterEcommerce': false,
+                                                        'idSite': idSite
+                                                    },
+                                                    'overrideLinkStyle': false} %}
+    </ol>
+</li>
+{% set startCounter = startCounter + 1 %}
+{% endfor %}
diff --git a/plugins/Live/templates/getVisitorProfilePopup.twig b/plugins/Live/templates/getVisitorProfilePopup.twig
@@ -1,4 +1,4 @@
-<div class="visitor-profile">
+<div class="visitor-profile" data-visitor-id="{{ visitorData.lastVisits.getFirstRow().getColumn('visitorId') }}">
     <a href class="visitor-profile-close"></a>
     <div class="visitor-profile-info">
         <div>
@@ -63,27 +63,23 @@
                     </div>
                 </div>
             </div>
-            <div>
+            <div class="visitor-profile-visits-info">
                 <div class="visitor-profile-pages-visited">
-                    <h1>{{ 'Live_VisitedPages'|translate }}<a href>{{ 'General_SeeAll'|translate }}</a></h1>
+                    <h1>{{ 'Live_VisitedPages'|translate }}</h1>
                 </div>
                 <div class="visitor-profile-visits-container">
                     <ol class="visitor-profile-visits">
-                        {% for visitInfo in visitorData.lastVisits.getRows() %}
-                        <li><h2 class="visitor-profile-visit-title" data-idvisit="{{ visitInfo.getColumn('idVisit') }}">{{ 'General_Visit'|translate }} #{{ loop.index }}</h2><span>&nbsp;- ({{ visitInfo.getColumn('visitDurationPretty')|raw }})</span><span class="visitor-profile-date">{{ visitInfo.getColumn('serverDatePrettyFirstAction') }}</span>
-                            <ol class="visitor-profile-actions">
-                                {% include "@Live/_actionsList.twig" with {'actionDetails': visitInfo.getColumn('actionDetails'),
-                                                                           'javascriptVariablesToSet': {
-                                                                                'filterEcommerce': false,
-                                                                                'idSite': idSite
-                                                                            },
-                                                                            'overrideLinkStyle': false} %}
-                            </ol>
-                        </li>
-                        {% endfor %}
+                        {% include "@Live/getVisitList.twig" with {'visits': visitorData.lastVisits, 'startCounter': 1} %}
                     </ol>
                     <br/>
                 </div>
+                <div class="loadingPiwik" style='display:none'>
+                    <div>
+                        <div>
+                            <img src="plugins/Zeitgeist/images/loading-blue.gif"/> {{ 'General_LoadingData'|translate }}
+                        </div>
+                    </div>
+                </div>
                 <div class="visitor-profile-fog"></div>
             </div>
         </div>
@@ -108,7 +104,35 @@ $(function() {
 
     $('.visitor-profile-pages-visited,.visitor-profile-more-info').click(function (e) {
         e.preventDefault();
-        alert('STUB');
+
+        var loading = $('.visitor-profile-visits-info > .loadingPiwik');
+        loading.css('display', 'table');
+
+        var ajax = new ajaxHelper();
+        ajax.addParams({
+            module: 'Live',
+            action: 'getVisitList',
+            period: 'range',
+            date: piwik.minDateYear + '-01-01' + ',today',
+            idVisitor: $(this).closest('.visitor-profile').attr('data-visitor-id'),
+            filter_offset: $('.visitor-profile-visits>li').length
+        }, 'GET');
+        ajax.setCallback(function (response) {
+            loading.css('display', 'none');
+
+            var jsp = $('.visitor-profile-visits-container').data('jsp');
+            if (response == '') {
+                jsp.scrollToElement($('.visitor-profile-visits>li:last-child').children().last(), false, true);
+            } else {
+                response = $(response);
+                $('.visitor-profile-visits').append(response);
+                jsp.reinitialise();
+                jsp.scrollToElement(response[0], true, true);
+            }
+        });
+        ajax.setFormat('html');
+        ajax.send();
+
         return false;
     });