popovers toggling

Evolveum · Sep 9, 2015 · ec508ea · ec508ea
1 parent 4a62589
commit ec508ea
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 57 deletions.
diff --git a/...min-gui/src/main/java/com/evolveum/midpoint/web/component/search/ObjectBrowserDialog.html b/...min-gui/src/main/java/com/evolveum/midpoint/web/component/search/ObjectBrowserDialog.html
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!--
+  ~ Copyright (c) 2010-2013 Evolveum
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+<wicket:panel xmlns:wicket="http://wicket.apache.org">
+    <div class="modal fade">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title">Modal title</h4>
+                </div>
+                <div class="modal-body">
+                    <p>One fine body&hellip;</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</wicket:panel>
diff --git a/...min-gui/src/main/java/com/evolveum/midpoint/web/component/search/ObjectBrowserDialog.java b/...min-gui/src/main/java/com/evolveum/midpoint/web/component/search/ObjectBrowserDialog.java
@@ -0,0 +1,16 @@
+package com.evolveum.midpoint.web.component.search;
+
+import com.evolveum.midpoint.web.component.util.SimplePanel;
+import org.apache.wicket.model.IModel;
+
+/**
+ * @author Viliam Repan (lazyman)
+ */
+public class ObjectBrowserDialog extends SimplePanel {
+
+    public ObjectBrowserDialog(String id, IModel model) {
+        super(id, model);
+    }
+
+    //todo implement
+}
diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchItemPanel.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchItemPanel.html
@@ -19,14 +19,14 @@
 <body>
 <wicket:panel>
     <a wicket:id="mainButton" class="btn btn-sm btn-default">
-        <span wicket:id="label">Family name: All, show body only</span>
+        <span wicket:id="label"/>
         &nbsp;
         <span class="caret"></span>
         &nbsp;
         <i wicket:id="deleteButton" class="fa fa-times-circle fa-lg text-danger"/>
     </a>
 
-    <div wicket:id="popover" class="popover fade bottom in">
+    <div wicket:id="popover" class="popover bottom">
         <div class="arrow"></div>
         <div class="popover-content" wicket:id="popoverBody">
             <div wicket:id="values">

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchItemPanel.java b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchItemPanel.java
@@ -224,13 +224,6 @@ public List<DisplayableValue> getObject() {
         };
     }
 
-    @Override
-    public void renderHead(IHeaderResponse response) {
-        super.renderHead(response);
-
-        response.render(OnDomReadyHeaderItem.forScript(initButtonJavascript()));
-    }
-
     private IModel<String> createLabelModel() {
         return new AbstractReadOnlyModel<String>() {
 
@@ -265,17 +258,6 @@ public String getObject() {
         };
     }
 
-    private String initButtonJavascript() {
-        StringBuilder sb = new StringBuilder();
-        String moreId = get(ID_MAIN_BUTTON).getMarkupId();
-        String popoverId = get(ID_POPOVER).getMarkupId();
-
-        sb.append("initSearchPopover('").append(moreId);
-        sb.append("','").append(popoverId).append("', 0);");
-
-        return sb.toString();
-    }
-
     private void updateItemPerformed(AjaxRequestTarget target) {
         SearchItem item = getModelObject();
         LOG.debug("Update item performed, item {} value is {}", item.getName(), item.getValues());
@@ -286,12 +268,18 @@ private void updateItemPerformed(AjaxRequestTarget target) {
     }
 
     private void closeEditPopoverPerformed(AjaxRequestTarget target) {
-        String popoverId = get(ID_POPOVER).getMarkupId();
-        target.appendJavaScript("$('#" + popoverId + "').toggle();");
+        togglePopover(target);
     }
 
     private void editPerformed(AjaxRequestTarget target) {
         LOG.debug("Edit performed");
+
+        togglePopover(target);
+    }
+
+    public void togglePopover(AjaxRequestTarget target) {
+        SearchPanel panel = findParent(SearchPanel.class);
+        panel.togglePopover(target, get(ID_MAIN_BUTTON), get(ID_POPOVER), 0);
     }
 
     private void deletePerformed(AjaxRequestTarget target) {

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchPanel.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchPanel.html
@@ -22,7 +22,7 @@
         </wicket:container>
 
         <div class="form-group">
-            <a wicket:id="more" href="#" class="btn btn-sm btn-default">
+            <a wicket:id="more" class="btn btn-sm btn-default">
                 <wicket:message key="SearchPanel.more"/>
                 &nbsp;
                 <span class="caret"></span>
@@ -36,7 +36,7 @@
         </div>
     </form>
 
-    <div wicket:id="popover" class="popover fade bottom in" style="display: none;">
+    <div wicket:id="popover" class="popover bottom" style="display: none;">
         <div class="arrow"></div>
         <div class="search-popover">
             <div class="more-input">

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchPanel.java b/gui/admin-gui/src/main/java/com/evolveum/midpoint/web/component/search/SearchPanel.java
@@ -11,11 +11,11 @@
 import com.evolveum.midpoint.web.component.util.VisibleEnableBehaviour;
 import com.evolveum.midpoint.web.page.PageBase;
 import org.apache.commons.lang.StringUtils;
+import org.apache.wicket.Component;
 import org.apache.wicket.ajax.AjaxRequestTarget;
 import org.apache.wicket.ajax.form.AjaxFormComponentUpdatingBehavior;
+import org.apache.wicket.ajax.markup.html.AjaxLink;
 import org.apache.wicket.ajax.markup.html.form.AjaxSubmitLink;
-import org.apache.wicket.markup.head.IHeaderResponse;
-import org.apache.wicket.markup.head.OnDomReadyHeaderItem;
 import org.apache.wicket.markup.html.WebMarkupContainer;
 import org.apache.wicket.markup.html.basic.Label;
 import org.apache.wicket.markup.html.form.CheckBox;
@@ -84,7 +84,15 @@ protected void populateItem(ListItem<SearchItem> item) {
         };
         form.add(items);
 
-        WebMarkupContainer more = new WebMarkupContainer(ID_MORE);
+        AjaxLink more = new AjaxLink(ID_MORE) {
+
+            @Override
+            public void onClick(AjaxRequestTarget target) {
+                Component button = SearchPanel.this.get(createComponentPath(ID_FORM, ID_MORE));
+                Component popover = SearchPanel.this.get(createComponentPath(ID_POPOVER));
+                togglePopover(target, button, popover, 14);
+            }
+        };
         more.setOutputMarkupId(true);
         form.add(more);
 
@@ -205,24 +213,6 @@ private List<Property> createPropertiesList() {
         return list;
     }
 
-    @Override
-    public void renderHead(IHeaderResponse response) {
-        super.renderHead(response);
-
-        response.render(OnDomReadyHeaderItem.forScript(initMoreButtonJavascript()));
-    }
-
-    private String initMoreButtonJavascript() {
-        StringBuilder sb = new StringBuilder();
-        String moreId = get(createComponentPath(ID_FORM, ID_MORE)).getMarkupId();
-        String popoverId = get(ID_POPOVER).getMarkupId();
-
-        sb.append("initSearchPopover('").append(moreId);
-        sb.append("','").append(popoverId).append("', 27);");
-
-        return sb.toString();
-    }
-
     private void addItemPerformed(AjaxRequestTarget target) {
         Search search = getModelObject();
 
@@ -256,9 +246,18 @@ void searchPerformed(AjaxRequestTarget target) {
 
     void refreshSearchForm(AjaxRequestTarget target) {
         target.add(get(ID_FORM), get(ID_POPOVER));
-        target.appendJavaScript(initMoreButtonJavascript());
     }
 
     public void searchPerformed(ObjectQuery query, AjaxRequestTarget target) {
     }
+
+    public void togglePopover(AjaxRequestTarget target, Component button, Component popover, int paddingRight) {
+        StringBuilder script = new StringBuilder();
+        script.append("toggleSearchPopover('");
+        script.append(button.getMarkupId()).append("','");
+        script.append(popover.getMarkupId()).append("',");
+        script.append(paddingRight).append(");");
+
+        target.appendJavaScript(script.toString());
+    }
 }
diff --git a/gui/admin-gui/src/main/webapp/js/midpoint/midpoint.js b/gui/admin-gui/src/main/webapp/js/midpoint/midpoint.js
@@ -150,21 +150,31 @@ function initPageSizePopover(buttonId, popoverId) {
  *
  * @param buttonId
  * @param popoverId
- * @param leftOffset value which will shift popover to the left from center bottom position against button
+ * @param paddingRight value which will shift popover to the left from center bottom position against button
  */
-function initSearchPopover(buttonId, popoverId, leftOffset) {
+function toggleSearchPopover(buttonId, popoverId, paddingRight) {
+    console.log("Called toggleSearchPopover with buttonId=" + buttonId + ",popoverId="
+        + popoverId + ",paddingRight=" + paddingRight);
+
     var button = $('#' + buttonId);
-    button.click(function () {
-        var popover = $('#' + popoverId);
+    var popover = $('#' + popoverId);
 
-        var position = button.position();
+    var popovers = button.parents('.search-form').find('.popover:visible').each(function () {
+        var id = $(this).attr('id');
+        console.log("Found popover with id=" + id);
+
+        if (id != popoverId) {
+            $(this).hide(200);
+        }
+    });
 
-        var left = position.left - (popover.outerWidth() - button.outerWidth()) / 2 - leftOffset;
-        var top = position.top + button.outerHeight();
+    var position = button.position();
 
-        popover.css("top", top);
-        popover.css("left", left);
+    var left = position.left - (popover.outerWidth() - button.outerWidth()) / 2 - paddingRight;
+    var top = position.top + button.outerHeight();
 
-        popover.toggle();
-    });
+    popover.css('top', top);
+    popover.css('left', left);
+
+    popover.toggle(200);
 }