Merge pull request #288 from mgazdzik/SegmentListFiltering

SegmentEditor new feature - new search field to filter segments by name. refs #5221 new icon fixes #5217
matomo-org · May 24, 2014 · 2b0fb57 · 2b0fb57
2 parents f5cb921 + e869c8b
commit 2b0fb57
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 4 deletions.
diff --git a/plugins/SegmentEditor/images/edit_segment.png b/plugins/SegmentEditor/images/edit_segment.png
diff --git a/plugins/SegmentEditor/javascripts/Segmentation.js b/plugins/SegmentEditor/javascripts/Segmentation.js
@@ -32,6 +32,8 @@ Segmentation = (function($) {
 
         self.timer = ""; // variable for further use in timing events
         self.searchAllowed = true;
+        self.filterTimer = "";
+        self.filterAllowed = true;
 
         self.availableMatches = [];
         self.availableMatches["metric"] = [];
@@ -234,7 +236,7 @@ Segmentation = (function($) {
                                 + injClass +' title="'+segment.name+'"><span class="segname">'
                                 + self.shortenSegmentName(segment.name)+'</span>';
                     if(self.segmentAccess == "write") {
-                        listHtml += '<span class="editSegment">['+ self.translations['General_Edit'].toLocaleLowerCase() +']</span>';
+                        listHtml += '<span class="editSegment"></span>';
                     }
                     listHtml += '</li>';
                 }
@@ -359,11 +361,40 @@ Segmentation = (function($) {
             doDragDropBindings();
         };
 
-        var bindEvents = function() {
+        var filterSegmentList = function (keyword) {
+            var curTitle;
+            clearFilterSegmentList();
+            $(self.target).find(" .filterNoResults").remove();
+
+            $(self.target).find(".segmentList li").each(function () {
+                curTitle = $(this).prop('title');
+                $(this).hide();
+                if (curTitle.toLowerCase().indexOf(keyword) !== -1) {
+                    $(this).show();
+                }
+            });
+
+            if ($(self.target).find(".segmentList li:visible").length == 0) {
+                $(self.target).find(".segmentList li:first")
+                    .before("<li class=\"filterNoResults grayed\">" + self.translations['General_SearchNoResults'] + "</li>");
+            }
+        }
+
+        var clearFilterSegmentList = function () {
+            $(self.target).find(" .filterNoResults").remove();
+            $(self.target).find(".segmentList li").each(function () {
+                $(this).show();
+            });
+        }
+
+        var bindEvents = function () {
             self.target.on('click', '.segmentationContainer', function (e) {
                 // hide all other modals connected with this widget
                 if (self.content.closest('.segmentEditorPanel').hasClass("visible")) {
-                    if ($(e.target).hasClass("jspDrag") === true) {
+                    if ($(e.target).hasClass("jspDrag") === true
+                        || $(e.target).hasClass("segmentFilterContainer") === true
+                        || $(e.target).parents().hasClass("segmentFilterContainer") === true
+                        || $(e.target).hasClass("filterNoResults")) {
                         e.stopPropagation();
                     } else {
                         self.jscroll.destroy();
@@ -373,7 +404,7 @@ Segmentation = (function($) {
                     // for each visible segmentationContainer -> trigger click event to close and kill scrollpane - very important !
                     closeAllOpenLists();
                     self.target.closest('.segmentEditorPanel').addClass('visible');
-
+                    self.target.find('.segmentFilter').val(self.translations['General_Search']).trigger('keyup');
                     self.jscroll = self.target.find(".segmentList").jScrollPane({
                         autoReinitialise: true,
                         showArrows:true
@@ -422,6 +453,42 @@ Segmentation = (function($) {
                 autoSuggestValues(this, persist);
             });
 
+            // attach event that will clear segment list filtering input after clicking x
+            self.target.on('click', ".segmentFilterContainer span", function (e) {
+                $(e.target).parent().find(".segmentFilter").val(self.translations['General_Search']).trigger('keyup');
+            });
+
+            self.target.on('blur', ".segmentFilter", function (e) {
+                if ($(e.target).parent().find(".segmentFilter").val() == "") {
+                    $(e.target).parent().find(".segmentFilter").val(self.translations['General_Search'])
+                }
+            });
+
+            self.target.on('click', ".segmentFilter", function (e) {
+                if ($(e.target).val() == self.translations['General_Search']) {
+                    $(e.target).val("");
+                }
+            });
+
+            self.target.on('keyup', ".segmentFilter", function (e) {
+                var search = $(e.currentTarget).val();
+                if (search == self.translations['General_Search']) {
+                    search = "";
+                }
+
+                if (search.length >= 2) {
+                    clearTimeout(self.filterTimer);
+                    self.filterAllowed = true;
+                    self.filterTimer = setTimeout(function () {
+                        filterSegmentList(search);
+                    }, 500);
+                }
+                else {
+                    self.filterTimer = false;
+                    clearFilterSegmentList();
+                }
+            });
+
             //
             // segment editor form events
             //

diff --git a/plugins/SegmentEditor/stylesheets/segmentation.less b/plugins/SegmentEditor/stylesheets/segmentation.less
@@ -494,6 +494,7 @@ div.scrollable {
   padding-top: 5px;
   display: none;
   float: left;
+  margin-bottom: 5px;
 }
 
 .segmentationContainer ul.submenu > li span.editSegment {
@@ -502,6 +503,9 @@ div.scrollable {
   text-align: center;
   margin-right:4px;
   font-weight: normal;
+  background: url(plugins/SegmentEditor/images/edit_segment.png) no-repeat;
+  width: 16px;
+  height: 16px;
 }
 
 .segmentEditorPanel.visible .segmentationContainer {
@@ -515,6 +519,36 @@ div.scrollable {
   list-style: none;
 }
 
+.segmentFilterContainer {
+  margin-left: -10px;
+  margin-right: -10px;
+  margin-bottom: 10px;
+}
+
+.segmentEditorPanel.visible .segmentFilterContainer > input[type="text"] {
+  font: 13px Verdana;
+  width: 100%;
+  padding: 0;
+  border: 1px solid #ccc;
+  border-width: 1px 0;
+  color: #999;
+  padding: 11px 32px 11px 12px;
+}
+
+.segmentEditorPanel.visible .segmentFilterContainer > span {
+  position: absolute;
+  width: 13px;
+  height: 13px;
+  right: 12px;
+  top: 16px;
+  cursor: pointer;
+  background: url(plugins/SegmentEditor/images/reset_search.png);
+}
+
+.segmentEditorPanel.visible .filterNoResults{
+  font-style: italic;
+}
+
 .segmentEditorPanel.visible .add_new_segment {
   display: block;
   background: url("plugins/SegmentEditor/images/dashboard_h_bg_hover.png") repeat-x scroll 0 0 #847b6d;
@@ -547,6 +581,11 @@ span.segmentationTitle {
   display: none;
 }
 
+.segmentList {
+  max-height:300px;
+  margin-top: 5px;
+}
+
 .segmentListContainer {
   overflow: hidden; /* Create a BFC */
 }

diff --git a/plugins/SegmentEditor/templates/_segmentSelector.twig b/plugins/SegmentEditor/templates/_segmentSelector.twig
@@ -2,6 +2,10 @@
     <div class="segmentationContainer listHtml">
         <span class="segmentationTitle"></span>
         <div class="dropdown-body">
+            <div class="segmentFilterContainer">
+                <input class="segmentFilter" type="text" value="{{ 'General_Search'|translate }}"/>
+                <span/>
+            </div>
             <ul class="submenu">
                 <li>{{ 'SegmentEditor_SelectSegmentOfVisitors'|translate }}
                     <div class="segmentList">