martin-g commented on a change in pull request #361: WICKET-6666 initial
checkin of new ModalDialog
URL: https://github.com/apache/wicket/pull/361#discussion_r283632622
##########
File path:
wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/modal/ModalDialog.js
##########
@@ -0,0 +1,424 @@
+/*
+ *
+ * FEATURES
+ * - When modal is closed focus is restored to the element that had it before
the modal was opened
+ * - Focus is trapped inside the modal when using tab/shift-tab
+ * - Focus is set on the first focusable element in the modal when it is opened
+ * - On Escape or click outside the modal a button with class x-modal-close
will be clicked
+ * - Secondary close buttons can be added and marked with
x-modal-close-secondary. Clicking these buttons forwards the
+ * click to the primary x-modal-close button
+ * - Aria support
+ * - Various aria attributes added to the modal making it behave as a dialog
to screen readers
+ * - aria-labelledby will be added if the modal content contains an element
with x-modal-title class
+ * - adia-describedby will be added if the modal content contains an element
with x-modal-description class
+ *
+ * ENTRY POINTS
+ * - window.wicket.modal.open: function(element, options)
+ * - element: string|dom|jquery - dom element that will be body of modal
+ * - options: object, see description below
+ * - window.wicket.modal.close: function(element)
+ * - element: string|dom|jquery - dom element that was specified as body of
modal
+ *
+ * OPTIONS
+ * validate: boolean
+ * - when modal is opened several checks will be performed
+ * - error when modal content does not contain an element with x-modal-close
class
+ * - warning when modal content does not contain an element with
modal-description class
+ * - error when modal does not contain any focusable elements
+ * console: object
+ * - an object used for reporting validation errors
+ * - must have error(object...) method
+ * - must have warn(object...) method
+ *
+ * ROADMAP
+ * - Set max height of content as 80% of screen, also provide option later
+ * - Open full screen on small screens - css fix only via media queries?
+ * - Support for simultaneously opened modals - testing to make sure it works
ok or do we need to implement stack tracking
+ *
+ */
+;
+(function($, window, document, console, undefined) {
+ 'use strict';
+
+ if (window.wicket && window.wicket.modal) {
+ return;
+ }
+
+ var DATA_KEY = "modal-dialog-data";
+ var OVERLAY_SELECTOR = ".modal-dialog-overlay";
+ var CONTAINER_SELECTOR = ".modal-dialog";
+ var SCROLL_SELECTOR=".modal-dialog-scroll-area";
+ var CONTENT_SELECTOR = ".modal-dialog-content";
+ var CLOSE_SELECTOR = ".x-modal-close";
+ var SECONDARY_CLOSE_SELECTOR = ".x-modal-close-secondary";
+
+ //
+ // UTILITY METHODS
+ //
+
+ /** Retreives id of the element, creates one if none */
+ var getOrCreateIdCounter = 0;
+ function getOrCreateId(element) {
Review comment:
if `element` is a jQuery object then let's name it `$element` to make it
more clear.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
With regards,
Apache Git Services
