ClockPicker add dialog support

primefaces-extensions · Feb 1, 2024 · 9e77cd3 · 9e77cd3
1 parent ec7849a
commit 9e77cd3
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 5 deletions.
diff --git a/core/src/main/java/org/primefaces/extensions/component/clockpicker/ClockPicker.java b/core/src/main/java/org/primefaces/extensions/component/clockpicker/ClockPicker.java
@@ -68,7 +68,8 @@ protected enum PropertyKeys {
         onafterhourselect,
         onafterampmselect,
         onbeforedone,
-        onafterdone
+        onafterdone,
+        appendTo
     }
 
     public ClockPicker() {
@@ -240,6 +241,14 @@ public boolean isShowOnButton() {
         return !"focus".equals(getShowOn());
     }
 
+    public String getAppendTo() {
+        return (String) getStateHelper().eval(PropertyKeys.appendTo, "@(body)");
+    }
+
+    public void setAppendTo(String appendTo) {
+        getStateHelper().put(PropertyKeys.appendTo, appendTo);
+    }
+
     public Locale calculateLocale(FacesContext fc) {
         if (appropriateLocale == null) {
             appropriateLocale = LocaleUtils.resolveLocale(fc, getLocale(), getClientId(fc));

diff --git a/core/src/main/java/org/primefaces/extensions/component/clockpicker/ClockPickerRenderer.java b/core/src/main/java/org/primefaces/extensions/component/clockpicker/ClockPickerRenderer.java
@@ -35,6 +35,7 @@
 import javax.faces.convert.Converter;
 import javax.faces.convert.ConverterException;
 
+import org.primefaces.expression.SearchExpressionUtils;
 import org.primefaces.extensions.util.Attrs;
 import org.primefaces.renderkit.InputRenderer;
 import org.primefaces.util.HTML;
@@ -138,6 +139,7 @@ private void encodeScript(final FacesContext context, final ClockPicker clockPic
 
         final WidgetBuilder wb = getWidgetBuilder(context);
         wb.init("ExtClockPicker", clockPicker);
+        wb.attr("appendTo", SearchExpressionUtils.resolveClientId(clockPicker.getAppendTo(), clockPicker));
         wb.attr("placement", clockPicker.getPlacement(), "bottom");
         wb.attr("align", clockPicker.getAlign(), "left");
         wb.attr("autoclose", clockPicker.isAutoClose(), false);

diff --git a/.../src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/0-clockpicker.js b/.../src/main/resources/META-INF/resources/primefaces-extensions/clockpicker/0-clockpicker.js
@@ -366,7 +366,8 @@
 		pmtext: 'PM',    // PM text
 		autoclose: false,    // auto close when minute is selected
 		twelvehour: false, // change to 12 hour AM/PM clock from 24 hour
-		vibrate: true        // vibrate the device when dragging clock hand
+		vibrate: true,        // vibrate the device when dragging clock hand
+		appendTo: $(document.body), // object to append popover
 	};
 
 	// Show or hide popover
@@ -383,10 +384,15 @@
 			height = element.outerHeight(),
 			placement = this.options.placement,
 			align = this.options.align,
+			appendToOffset = this.options.appendTo.offset(),
 			styles = {};
 
 		popover.show();
 
+		// Remove the referential offset
+		offset.left -= appendToOffset.left;
+		offset.top -= appendToOffset.top;
+
 		// Place the popover
 		switch (placement) {
 			case 'bottom':
@@ -438,8 +444,8 @@
 
 		// Initialize
 		if (! this.isAppended) {
-			// Append popover to body
-			$body = $(document.body).append(this.popover);
+			// Append popover to body or appendTo
+			$body = this.options.appendTo.append(this.popover);
 			this.isAppended = true;
 		}
 

diff --git a/...in/resources/META-INF/resources/primefaces-extensions/clockpicker/1-clockpicker-widget.js b/...in/resources/META-INF/resources/primefaces-extensions/clockpicker/1-clockpicker-widget.js
@@ -14,11 +14,18 @@ PrimeFaces.widget.ExtClockPicker = PrimeFaces.widget.BaseWidget.extend({
         this.jqId = PrimeFaces.escapeClientId(cfg.id);
         this.container = $(this.jqId);
         this.jqEl = this.jqId + '_input';
-        this.input = $(this.jqEl);
         this.jq = $(this.jqEl);
         this.cfg.donetext = PrimeFaces.getAriaLabel('close') || 'Close';
+        this.cfg.appendTo = PrimeFaces.utils.resolveDynamicOverlayContainer(this);
 
+        // setup input
+        this.input = $(this.jqEl);
         PrimeFaces.skinInput(this.input);
+
+        // check if being used in dialog and set the parent
+        this.setupDialogSupport();
+
+        // create the clock picker
         this.clockpicker = this.createClockPicker();
 
         // pfs metadata
@@ -40,6 +47,17 @@ PrimeFaces.widget.ExtClockPicker = PrimeFaces.widget.BaseWidget.extend({
         this.remove();
     },
 
+    /**
+     * Sets up support for using the overlay color picker within an overlay dialog.
+     * @private
+     */
+    setupDialogSupport: function() {
+        var dialog = this.input[0].closest('.ui-dialog');
+        if (dialog) {
+            this.cfg.appendTo = $(PrimeFaces.escapeClientId(dialog.id));
+        }
+    },
+
     /**
      * Creates the clock picker and sets up events.
      * @returns {JQuery} the clock picker

diff --git a/...se/src/main/java/org/primefaces/extensions/showcase/controller/ClockPickerController.java b/...se/src/main/java/org/primefaces/extensions/showcase/controller/ClockPickerController.java
@@ -43,11 +43,13 @@ public class ClockPickerController implements Serializable {
 
     private LocalTime time;
     private LocalTime time2;
+    private LocalTime time3;
 
     public ClockPickerController() {
         // Initialize time to 8:15 AM
         time = LocalTime.of(8, 15);
         time2 = LocalTime.of(9, 28);
+        time3 = LocalTime.of(13, 44);
     }
 
     public void showTime1() {
@@ -72,6 +74,15 @@ public void showTime2() {
         }
     }
 
+    public void showTime3() {
+        if (time3 != null) {
+            addMessage(FacesMessage.SEVERITY_INFO, "Info Message", String.format("Ajax Event: %s", time3));
+        }
+        else {
+            addMessage(FacesMessage.SEVERITY_ERROR, "Error Message", "Time is not selected.");
+        }
+    }
+
     private void addMessage(FacesMessage.Severity severity, String summary, String detail) {
         FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(severity, summary, detail));
     }
@@ -92,4 +103,12 @@ public void setTime2(LocalTime time2) {
         this.time2 = time2;
     }
 
+    public LocalTime getTime3() {
+        return time3;
+    }
+
+    public void setTime3(LocalTime time3) {
+        this.time3 = time3;
+    }
+
 }
diff --git a/showcase/src/main/webapp/sections/clockpicker/example-basicUsage.xhtml b/showcase/src/main/webapp/sections/clockpicker/example-basicUsage.xhtml
@@ -19,6 +19,15 @@
         <p:ajax listener="#{clockPickerController.showTime2}" />
     </pe:clockpicker>
 
+    <p>Open In Dialog</p>
+    <p:commandButton value="Open Dialog" type="button" icon="pi pi-external-link" onclick="PF('dlg1').show()"/>
+    <p:dialog header="ClockPicker" widgetVar="dlg1" height="350" width="350" showEffect="fade" closeOnEscape="true">
+        <pe:clockpicker id="dlgClockPicker" widgetVar="dialogClockPickerWidget" autoClose="false" value="#{clockPickerController.time3}" showOn="button">
+            <p:ajax listener="#{clockPickerController.showTime3}" />
+        </pe:clockpicker>
+    </p:dialog>
+
+
 </h:panelGroup>
 
 <p:commandButton type="button" value="Disable clock pickers" styleClass="mt-2 mr-2"