Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added testing example, fixed syntax error and added duration parameter.

  • Loading branch information...
commit ce2996a2faae390ff170e2aa83dc8c2ae3752118 1 parent 2e4ecba
@rafalwrzeszcz rafalwrzeszcz authored
Showing with 75 additions and 7 deletions.
  1. +12 −6 src/ui/controls/dialog.js
  2. +63 −1 test/functional/controls_dialog.html
View
18 src/ui/controls/dialog.js
@@ -202,10 +202,13 @@
/**
* S2,UI.Dialog#center() -> this
+ * S2,UI.Dialog#center(duration) -> this
*
* Moves window to the center of viewport.
+ *
+ * Parameter is optional and describes effect speed.
**/
- center: function() {
+ center: function(duration) {
// Find the middle of the viewport.
var vSize = document.viewport.getDimensions();
var dialog = this.element, layout = dialog.getLayout();
@@ -220,7 +223,7 @@
position.left += offsets.left;
position.top += offsets.top;
- this.moveTo(position.left, position.top);
+ this.moveTo(position.left, position.top, duration);
return this;
},
@@ -244,7 +247,7 @@
$(document.body).insert(this);
this.element.show();
- this.center();
+ this.center(0);
this.focusables = UI.findFocusables(this.element);
@@ -416,7 +419,7 @@
* while doing bringToFront().
**/
alwaysOnTop: function(alwaysOnTop) {
- if (alwaysOnTop === undefined || alwaysOnTop) ) {
+ if (alwaysOnTop === undefined || alwaysOnTop) {
this.element.addClassName('alwaysOnTop');
// make it working from now
this.bringToFront();
@@ -438,11 +441,14 @@
/**
* S2.UI.Dialog#moveTo(left, top) -> this
+ * S2.UI.Dialog#moveTo(left, top, duration) -> this
*
* Moves window to given position.
+ *
+ * Thirt parameter is optional and describes effect speed.
**/
- moveTo: function(left, top) {
- this.element.morph('left:' + left + 'px;top:' + top + 'px', { duration: .7 } );
+ moveTo: function(left, top, duration) {
+ this.element.morph('left:' + left + 'px;top:' + top + 'px', { duration: duration === undefined ? .7 : duration } );
return this;
}
});
View
64 test/functional/controls_dialog.html
@@ -143,7 +143,7 @@
<!-- DIALOG 2 -->
- <h2>Dialog with custom content & buttons</h2>
+ <h2>Dialog with custom content &amp; buttons</h2>
<div class="ui-widget ui-button-container">
@@ -200,5 +200,67 @@
</ul>
</div> <!-- .description -->
+
+ <!-- DIALOG 3 -->
+ <h2>Dialog display management</h2>
+
+ <div class="ui-widget ui-button-container">
+
+ <button id="dialog_link3">Open Dialog</button>
+
+ <script type="text/javascript">
+ new S2.UI.Button('dialog_link3', {
+ icons: { primary: 'ui-icon-newwin' }
+ });
+
+ $('dialog_link3').observe('click', function(event) {
+ event.stop();
+ var dialog;
+
+ var switcher = (new Element("label"))
+ .insert(
+ new Element("input", {type: "checkbox"})
+ .observe("click", function() {
+ dialog.alwaysOnTop(this.checked);
+ } )
+ )
+ .insert(" always on top");
+
+ dialog = new S2.UI.Dialog({
+ modal: false,
+ buttons: [
+ {
+ label: 'Center me',
+ action: function(instance) {
+ instance.center();
+ }
+ },
+ {
+ label: 'Move me to 10x10',
+ action: function(instance) {
+ instance.moveTo(10, 10);
+ }
+ }
+ ],
+ content: (new Element('div'))
+ .insert(switcher)
+ });
+ dialog.open();
+ });
+ </script>
+
+ </div> <!-- .ui-widget -->
+
+ <div class="description">
+ <p>A non-modal dialog, that you can use as a simple window.</p>
+
+ <ul>
+ <li>You can set <strong>alwaysOnTop</strong> with <code>.alwaysOnTop()</code>, so it will not be covered by other windows.</li>
+ <li>You can bring dialog on top of display stack (except <strong>alwaysOnTop</strong> fallged dialogs) by clicking in a region of a dialog (also programaticaly using <code>.bringToFront()</code> method).</li>
+ <li>You can move dialog programaticaly using <code>.moveTo(x, y)</code>.</li>
+ <li>You can center dialog on a screen programaticaly using <code>.center()</code>.</li>
+ </ul>
+ </div> <!-- .description -->
+
</body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.