Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

S2.UI.DIalog improvements #29

Open
wants to merge 11 commits into from

1 participant

@rafalwrzeszcz

Implemented various additional methods:

  • moveTo(x, y[, duration]) - moves dialog to given position.
  • center([duration]) - it's _position() method renamed for public API.
  • alwaysOnTop([flag]) - makes dialog window staying always over other dialogs.
  • bringToFront() - brings dialog window on top of display stack (except windows with alwaysOnTop flag set).

Unfortunately my XHTML fix is in my master, it is already in different pull request.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
3  src/ui/controls/button.js
@@ -231,7 +231,8 @@
var span = new Element('span', { 'class': 'ui-button-text' });
// Even an empty text element (e.g., for icon-only buttons) needs to
// have at least one character of text to force proper alignment.
- span.update(text || " ");
+ // Be careful - UTF-8 character here!
+ span.update(text || " ");
return span;
},
View
92 src/ui/controls/dialog.js
@@ -160,6 +160,8 @@
keypress: this.keypress.bind(this)
};
+ // brings window on top when it's region is clicked
+ this.element.on('click', this.bringToFront.bind(this) );
},
toElement: function() {
@@ -198,7 +200,15 @@
this.element.insert(this.buttonPane);
},
- _position: function() {
+ /**
+ * 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(duration) {
// Find the middle of the viewport.
var vSize = document.viewport.getDimensions();
var dialog = this.element, layout = dialog.getLayout();
@@ -213,10 +223,8 @@
position.left += offsets.left;
position.top += offsets.top;
- this.element.setStyle({
- left: position.left + 'px',
- top: position.top + 'px'
- });
+ this.moveTo(position.left, position.top, duration);
+ return this;
},
/**
@@ -239,7 +247,7 @@
$(document.body).insert(this);
this.element.show();
- this._position();
+ this.center(0);
this.focusables = UI.findFocusables(this.element);
@@ -370,6 +378,78 @@
(function() { next.focus(); }).defer();
}
}
+ },
+
+ /**
+ * S2.UI.Dialog#bringToFront() -> this
+ *
+ * Brings dialog on top of display stack.
+ *
+ * This method ignores elements, that has class ".alwaysOnTop".
+ **/
+ bringToFront: function() {
+ var zIndex = parseInt( this.element.getStyle('zIndex') || 2);
+
+ // searches for the gighest zIndex value
+ // alwaysOnTop - class reserved for further "alwaysOnTop" feature
+ $$('body *:not(.alwaysOnTop)').each( function(element) {
+ var position = element.getStyle('position');
+ if (element !== this.element && (position == 'absolute' || position == 'fixed')) {
+ var value = parseInt( element.getStyle('zIndex') );
+ if ( !isNaN(value) && value >= zIndex) {
+ zIndex = value + 1;
+ }
+ }
+ }.bind(this) );
+
+ // puts window one step higher then current most top.
+ this.element.setStyle( { zIndex: zIndex } );
+
+ return this;
+ },
+
+ /**
+ * S2.UI.Dialog#alwaysOnTop() -> this
+ * S2.UI.Dialog#alwaysOnTop(flat) -> this
+ *
+ * Makes window staying always on top (or removes flag if false
+ * is passed).
+ *
+ * It means other windows won't calculate this window's zIndex
+ * while doing bringToFront().
+ **/
+ alwaysOnTop: function(alwaysOnTop) {
+ if (alwaysOnTop === undefined || alwaysOnTop) {
+ this.element.addClassName('alwaysOnTop');
+ // make it working from now
+ this.bringToFront();
+ } else {
+ this.element.removeClassName('alwaysOnTop');
+ }
+
+ return this;
+ },
+
+ /**
+ * S2.UI.Dialog#isAlwaysOnTop() -> Boolean
+ *
+ * Checks if window has alwaysOnTop flag set.
+ **/
+ isAlwaysOnTop: function() {
+ return this.element.hasClassName('alwaysOnTop');
+ },
+
+ /**
+ * 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, 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>
Something went wrong with that request. Please try again.