SegmentEditor new feature - allows to filter by name defined filter. helps when you have many segments with similar name

1 files changed, 71 insertions, 4 deletions

diff --git a/plugins/SegmentEditor/javascripts/Segmentation.js b/plugins/SegmentEditor/javascripts/Segmentation.js
index 352eef552e..a907d60454 100644
--- 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
             //