- Fixing up the date and time picker UI a little to keep the input in a block

- Some work on the timepicker to keep its width and right alignment in check (still need to make right/left alignment on its target element an option)

--HG--
extra : convert_revision : svn%3A5ff7c347-ad56-4c35-b696-ccb81de16e03/trunk%4046087

src/Orchard.Web/Packages/Orchard.Blogs/Scripts/ui.timepickr.js

@@ -1,59 +1,59 @@
 /*
-  jQuery ui.timepickr - @VERSION
-  http://code.google.com/p/jquery-utils/
+jQuery ui.timepickr - @VERSION
+http://code.google.com/p/jquery-utils/
 
-  (c) Maxime Haineault <haineault@gmail.com> 
-  http://haineault.com
+(c) Maxime Haineault <haineault@gmail.com> 
+http://haineault.com
 
-  MIT License (http://www.opensource.org/licenses/mit-license.php
+MIT License (http://www.opensource.org/licenses/mit-license.php
 
-  Note: if you want the original experimental plugin checkout the rev 224 
+Note: if you want the original experimental plugin checkout the rev 224 
 
-  Dependencies
-  ------------
-  - jquery.utils.js
-  - jquery.strings.js
-  - jquery.ui.js
+Dependencies
+------------
+- jquery.utils.js
+- jquery.strings.js
+- jquery.ui.js
   
-*/
-
+*/
+
 (function($) {
 
     $.tpl('timepickr.menu', '<div class="ui-helper-reset ui-timepickr ui-widget ui-corner-all ui-widget-content" />'); //todo: (heskew) make the corner an option just like the items
     $.tpl('timepickr.row', '<ol class="ui-timepickr-row ui-helper-clearfix" />');
     $.tpl('timepickr.button', '<li class="{className:s}"><span class="ui-state-default">{label:s}</span></li>');
-
+
     $.widget('ui.timepickr', {
-        options: {
-            convention: 12, // 24, 12
-            trigger: 'focus',
-            format12: '{h:02.d}:{m:02.d} {z}',
-            format24: '{h:02.d}:{m:02.d}',
+        options: {
+            convention: 12, // 24, 12
+            trigger: 'focus',
+            format12: '{h:02.d}:{m:02.d} {z}',
+            format24: '{h:02.d}:{m:02.d}',
             hours: true,
             prefix: ['AM', 'PM'],
             suffix: ['AM', 'PM'],
-            prefixVal: false,
-            suffixVal: true,
-            rangeHour12: $.range(1, 13),
-            rangeHour24: [$.range(0, 12), $.range(12, 24)],
-            rangeMin: $.range(0, 60, 15),
-            rangeSec: $.range(0, 60, 15),
-            corners: 'all',
-            // plugins
-            core: true,
-            minutes: true,
-            seconds: false,
-            val: false,
-            updateLive: true,
-            resetOnBlur: true,
-            keyboardnav: true,
-            handle: false,
-            handleEvent: 'click'
-        },
-		
+            prefixVal: false,
+            suffixVal: true,
+            rangeHour12: $.range(1, 13),
+            rangeHour24: [$.range(0, 12), $.range(12, 24)],
+            rangeMin: $.range(0, 60, 15),
+            rangeSec: $.range(0, 60, 15),
+            corners: 'all',
+            // plugins
+            core: true,
+            minutes: true,
+            seconds: false,
+            val: false,
+            updateLive: true,
+            resetOnBlur: true,
+            keyboardnav: true,
+            handle: false,
+            handleEvent: 'click'
+        },
+
         plugins: {},
-        
-		_create: function() {
+
+        _create: function() {
             this._dom = {
                 menu: $.tpl('timepickr.menu'),
                 row: $.tpl('timepickr.menu')
@@ -84,7 +84,7 @@
             var ui = this;
             var btn = false;
             var row = $.tpl('timepickr.row').bind('mouseover', function() {
-                $(this).next().slideDown(200);
+                $(this).next().show();
             });
             $.each(range, function(idx, val) {
                 ui._createButton(val, format || false).appendTo(row);
@@ -115,27 +115,27 @@
 
         _getVal: function() {
             var ols = this._dom.menu.find('ol');
-            function get(unit) {
+            function g(unit) {
                 var u = ols.filter('.' + unit).find('.ui-state-hover:first').text();
                 return u || ols.filter('.' + unit + 'li:first span').text();
             }
             return {
-                h: get('hours'),
-                m: get('minutes'),
-                s: get('seconds'),
-                a: get('prefix'),
-                z: get('suffix'),
+                h: g('hours'),
+                m: g('minutes'),
+                s: g('seconds'),
+                a: g('prefix'),
+                z: g('suffix'),
                 f: this.options['format' + this.c],
                 c: this.c
             };
         },
 
         _formatVal: function(ival) {
-            var val = ival || this._getVal();
-			
-			if (!val.h) return;
-			
-			val.c = this.options.convention;
+            var val = ival || this._getVal();
+
+            if (!val.h) return;
+
+            val.c = this.options.convention;
             val.f = val.c === 12 && this.options.format12 || this.options.format24;
             return (new Time(val)).getTime();
         },
@@ -149,11 +149,25 @@
         },
         show: function() {
             this._trigger('show');
-            this._dom.menu.slideDown(200);; //todo: (heskew) make show effect an option
+            var pos = this.element.position();
+            var width = this.element.data('width');
+            var elementWidth = this.element.outerWidth();
+            var windowWidth = $(window).width() + $(window).scrollLeft();
+
+            if (width) {
+                this._dom.menu.css(
+                    'left',
+                    pos.left + elementWidth < windowWidth
+                        ? pos.left - width + elementWidth
+                        : windowWidth - width
+                    );
+            }
+
+            this._dom.menu.show(); //todo: (heskew) make show effect an option
         },
         hide: function() {
             this._trigger('hide');
-            this._dom.menu.slideUp(200);
+            this._dom.menu.hide();
         }
 
     });
@@ -167,7 +181,9 @@
         start: function(e, ui) {
             var menu = ui._dom.menu;
             var pos = ui.element.position();
-            menu.insertAfter(ui.element).css('left', pos.left - 225); //todo: (heskew) right-align better and have alignment an option
+
+            //render off screen, to be repositioned by show()
+            menu.insertAfter(ui.element).css('left', '-9999em');
 
             if (!$.boxModel) { // IE alignement fix
                 menu.css('margin-top', ui.element.height() + 8);
@@ -176,7 +192,7 @@
             ui.element
             .bind(ui.options.trigger, function() {
                 ui._dom.menu.find('ol:first').show();
-                ui._dom.menu.slideDown(200);
+                ui.show();
                 ui._trigger('focus');
                 if (ui.options.trigger != 'focus') {
                     ui.element.focus();
@@ -192,6 +208,23 @@
                 ui._trigger('refresh');
             });
         },
+        initialized: function(e, ui) {
+            var menuItems = ui._dom.menu.find('ol');
+            var pos = ui.element.position();
+
+            //load up
+            ui.show();
+            menuItems.show();
+
+            //store width(s)
+            ui.element.data('width', ui._dom.menu.outerWidth());
+            //fix the width
+            ui._dom.menu.width(ui._dom.menu.width());
+
+            //hide
+            menuItems.hide();
+            ui.hide();
+        },
         refresh: function(e, ui) {
             // Realign each menu layers
             ui._dom.menu.find('ol').each(function() {

src/Orchard.Web/Packages/Orchard.Blogs/Views/EditorTemplates/Parts/Blogs.BlogPost.Publish.ascx

@@ -22,6 +22,8 @@
     <div>
         <%=Html.RadioButton("Command", "PublishLater", Model.ScheduledPublishUtc != null, new { id = "Command_PublishLater" }) %>
         <label class="forcheckbox" for="Command_PublishLater"><%=_Encoded("Publish Later")%></label>
+    </div>
+    <div>
         <label class="forpicker" for="ScheduledPublishUtcDate"><%=_Encoded("Date")%></label>
         <%=Html.EditorFor(m => m.ScheduledPublishUtcDate)%>
         <label class="forpicker" for="ScheduledPublishUtcTime"><%=_Encoded("Time")%></label>
@@ -41,6 +43,6 @@
             .blur(function() { var $this = $(this); setTimeout(function() { if (!$this.val()) { $this.addClass("hinted").val($this.data("hint")) } }, 300) });
         }
     });
-    $("input#ScheduledPublishUtcDate").datepicker().focus(function() { $("#Command_PublishLater").attr("checked", "checked") });
+    $("input#ScheduledPublishUtcDate").datepicker({showAnim:""}).focus(function() { $("#Command_PublishLater").attr("checked", "checked") });
     $("input#ScheduledPublishUtcTime").timepickr().focus(function() { $("#Command_PublishLater").attr("checked", "checked") });
 })</script>

src/Orchard.Web/Packages/Orchard.Pages/Scripts/ui.timepickr.js

@@ -1,59 +1,59 @@
 /*
-  jQuery ui.timepickr - @VERSION
-  http://code.google.com/p/jquery-utils/
+jQuery ui.timepickr - @VERSION
+http://code.google.com/p/jquery-utils/
 
-  (c) Maxime Haineault <haineault@gmail.com> 
-  http://haineault.com
+(c) Maxime Haineault <haineault@gmail.com> 
+http://haineault.com
 
-  MIT License (http://www.opensource.org/licenses/mit-license.php
+MIT License (http://www.opensource.org/licenses/mit-license.php
 
-  Note: if you want the original experimental plugin checkout the rev 224 
+Note: if you want the original experimental plugin checkout the rev 224 
 
-  Dependencies
-  ------------
-  - jquery.utils.js
-  - jquery.strings.js
-  - jquery.ui.js
+Dependencies
+------------
+- jquery.utils.js
+- jquery.strings.js
+- jquery.ui.js
   
-*/
-
+*/
+
 (function($) {
 
     $.tpl('timepickr.menu', '<div class="ui-helper-reset ui-timepickr ui-widget ui-corner-all ui-widget-content" />'); //todo: (heskew) make the corner an option just like the items
     $.tpl('timepickr.row', '<ol class="ui-timepickr-row ui-helper-clearfix" />');
     $.tpl('timepickr.button', '<li class="{className:s}"><span class="ui-state-default">{label:s}</span></li>');
-
+
     $.widget('ui.timepickr', {
-        options: {
-            convention: 12, // 24, 12
-            trigger: 'focus',
-            format12: '{h:02.d}:{m:02.d} {z}',
-            format24: '{h:02.d}:{m:02.d}',
-            hours: true,
-            prefix: ['AM', 'PM'],
-            suffix: ['AM', 'PM'],
-            prefixVal: false,
-            suffixVal: true,
-            rangeHour12: $.range(1, 13),
-            rangeHour24: [$.range(0, 12), $.range(12, 24)],
-            rangeMin: $.range(0, 60, 15),
-            rangeSec: $.range(0, 60, 15),
-            corners: 'all',
-            // plugins
-            core: true,
-            minutes: true,
-            seconds: false,
-            val: false,
-            updateLive: true,
-            resetOnBlur: true,
-            keyboardnav: true,
-            handle: false,
-            handleEvent: 'click'
-        },
-		
+        options: {
+            convention: 12, // 24, 12
+            trigger: 'focus',
+            format12: '{h:02.d}:{m:02.d} {z}',
+            format24: '{h:02.d}:{m:02.d}',
+            hours: true,
+            prefix: ['AM', 'PM'],
+            suffix: ['AM', 'PM'],
+            prefixVal: false,
+            suffixVal: true,
+            rangeHour12: $.range(1, 13),
+            rangeHour24: [$.range(0, 12), $.range(12, 24)],
+            rangeMin: $.range(0, 60, 15),
+            rangeSec: $.range(0, 60, 15),
+            corners: 'all',
+            // plugins
+            core: true,
+            minutes: true,
+            seconds: false,
+            val: false,
+            updateLive: true,
+            resetOnBlur: true,
+            keyboardnav: true,
+            handle: false,
+            handleEvent: 'click'
+        },
+
         plugins: {},
-        
-		_create: function() {
+
+        _create: function() {
             this._dom = {
                 menu: $.tpl('timepickr.menu'),
                 row: $.tpl('timepickr.menu')
@@ -84,7 +84,7 @@
             var ui = this;
             var btn = false;
             var row = $.tpl('timepickr.row').bind('mouseover', function() {
-                $(this).next().slideDown(200);
+                $(this).next().show();
             });
             $.each(range, function(idx, val) {
                 ui._createButton(val, format || false).appendTo(row);
@@ -115,27 +115,27 @@
 
         _getVal: function() {
             var ols = this._dom.menu.find('ol');
-            function get(unit) {
+            function g(unit) {
                 var u = ols.filter('.' + unit).find('.ui-state-hover:first').text();
                 return u || ols.filter('.' + unit + 'li:first span').text();
             }
             return {
-                h: get('hours'),
-                m: get('minutes'),
-                s: get('seconds'),
-                a: get('prefix'),
-                z: get('suffix'),
+                h: g('hours'),
+                m: g('minutes'),
+                s: g('seconds'),
+                a: g('prefix'),
+                z: g('suffix'),
                 f: this.options['format' + this.c],
                 c: this.c
             };
         },
 
         _formatVal: function(ival) {
-            var val = ival || this._getVal();
-			
-			if (!val.h) return;
-			
-			val.c = this.options.convention;
+            var val = ival || this._getVal();
+
+            if (!val.h) return;
+
+            val.c = this.options.convention;
             val.f = val.c === 12 && this.options.format12 || this.options.format24;
             return (new Time(val)).getTime();
         },
@@ -149,11 +149,25 @@
         },
         show: function() {
             this._trigger('show');
-            this._dom.menu.slideDown(200);; //todo: (heskew) make show effect an option
+            var pos = this.element.position();
+            var width = this.element.data('width');
+            var elementWidth = this.element.outerWidth();
+            var windowWidth = $(window).width() + $(window).scrollLeft();
+
+            if (width) {
+                this._dom.menu.css(
+                    'left',
+                    pos.left + elementWidth < windowWidth
+                        ? pos.left - width + elementWidth
+                        : windowWidth - width
+                    );
+            }
+
+            this._dom.menu.show(); //todo: (heskew) make show effect an option
         },
         hide: function() {
             this._trigger('hide');
-            this._dom.menu.slideUp(200);
+            this._dom.menu.hide();
         }
 
     });
@@ -167,7 +181,9 @@
         start: function(e, ui) {
             var menu = ui._dom.menu;
             var pos = ui.element.position();
-            menu.insertAfter(ui.element).css('left', pos.left - 225); //todo: (heskew) right-align better and have alignment an option
+
+            //render off screen, to be repositioned by show()
+            menu.insertAfter(ui.element).css('left', '-9999em');
 
             if (!$.boxModel) { // IE alignement fix
                 menu.css('margin-top', ui.element.height() + 8);
@@ -176,7 +192,7 @@
             ui.element
             .bind(ui.options.trigger, function() {
                 ui._dom.menu.find('ol:first').show();
-                ui._dom.menu.slideDown(200);
+                ui.show();
                 ui._trigger('focus');
                 if (ui.options.trigger != 'focus') {
                     ui.element.focus();
@@ -192,6 +208,23 @@
                 ui._trigger('refresh');
             });
         },
+        initialized: function(e, ui) {
+            var menuItems = ui._dom.menu.find('ol');
+            var pos = ui.element.position();
+
+            //load up
+            ui.show();
+            menuItems.show();
+
+            //store width(s)
+            ui.element.data('width', ui._dom.menu.outerWidth());
+            //fix the width
+            ui._dom.menu.width(ui._dom.menu.width());
+
+            //hide
+            menuItems.hide();
+            ui.hide();
+        },
         refresh: function(e, ui) {
             // Realign each menu layers
             ui._dom.menu.find('ol').each(function() {

src/Orchard.Web/Packages/Orchard.Pages/Views/EditorTemplates/Parts/Pages.Page.Publish.ascx

@@ -23,6 +23,8 @@
     <div>
         <%=Html.RadioButton("Command", "PublishLater", Model.ScheduledPublishUtc != null, new { id = "Command_PublishLater" }) %>
         <label class="forcheckbox" for="Command_PublishLater"><%=_Encoded("Publish Later")%></label>
+    </div>
+    <div>
         <label class="forpicker" for="ScheduledPublishUtcDate"><%=_Encoded("Date")%></label>
         <%=Html.EditorFor(m => m.ScheduledPublishUtcDate)%>
         <label class="forpicker" for="ScheduledPublishUtcTime"><%=_Encoded("Time")%></label>
@@ -42,6 +44,6 @@
             .blur(function() { var $this = $(this); setTimeout(function() { if (!$this.val()) { $this.addClass("hinted").val($this.data("hint")) } }, 300) });
         }
     });
-    $("input#ScheduledPublishUtcDate").datepicker().focus(function() { $("#Command_PublishLater").attr("checked", "checked") });
+    $("input#ScheduledPublishUtcDate").datepicker({showAnim:""}).focus(function() { $("#Command_PublishLater").attr("checked", "checked") });
     $("input#ScheduledPublishUtcTime").timepickr().focus(function() { $("#Command_PublishLater").attr("checked", "checked") });
 })</script>