lsm/Orchard
1
0
Fork 0
mirror of https://github.com/OrchardCMS/Orchard.git synced 2025-09-23 12:53:33 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
skewed
2010-01-29 09:30:18 +00:00
parent 95c927f9f4
commit e81becb6ed
4 changed files with 187 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/Orchard.Web/Packages/Orchard.Blogs/Scripts/ui.timepickr.js
View File

@@ -1,59 +1,59 @@
/* /*
jQuery ui.timepickr - @VERSION jQuery ui.timepickr - @VERSION
http://code.google.com/p/jquery-utils/ http://code.google.com/p/jquery-utils/
(c) Maxime Haineault <haineault@gmail.com> (c) Maxime Haineault <haineault@gmail.com>
http://haineault.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 Dependencies
------------ ------------
- jquery.utils.js - jquery.utils.js
- jquery.strings.js - jquery.strings.js
- jquery.ui.js - jquery.ui.js
*/ */
(function($) { (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.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.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>'); $.tpl('timepickr.button', '<li class="{className:s}"><span class="ui-state-default">{label:s}</span></li>');
$.widget('ui.timepickr', { $.widget('ui.timepickr', {
options: { options: {
convention: 12, // 24, 12 convention: 12, // 24, 12
trigger: 'focus', trigger: 'focus',
format12: '{h:02.d}:{m:02.d} {z}', format12: '{h:02.d}:{m:02.d} {z}',
format24: '{h:02.d}:{m:02.d}', format24: '{h:02.d}:{m:02.d}',
hours: true, hours: true,
prefix: ['AM', 'PM'], prefix: ['AM', 'PM'],
suffix: ['AM', 'PM'], suffix: ['AM', 'PM'],
prefixVal: false, prefixVal: false,
suffixVal: true, suffixVal: true,
rangeHour12: $.range(1, 13), rangeHour12: $.range(1, 13),
rangeHour24: [$.range(0, 12), $.range(12, 24)], rangeHour24: [$.range(0, 12), $.range(12, 24)],
rangeMin: $.range(0, 60, 15), rangeMin: $.range(0, 60, 15),
rangeSec: $.range(0, 60, 15), rangeSec: $.range(0, 60, 15),
corners: 'all', corners: 'all',
// plugins // plugins
core: true, core: true,
minutes: true, minutes: true,
seconds: false, seconds: false,
val: false, val: false,
updateLive: true, updateLive: true,
resetOnBlur: true, resetOnBlur: true,
keyboardnav: true, keyboardnav: true,
handle: false, handle: false,
handleEvent: 'click' handleEvent: 'click'
}, },
plugins: {}, plugins: {},
_create: function() { _create: function() {
this._dom = { this._dom = {
menu: $.tpl('timepickr.menu'), menu: $.tpl('timepickr.menu'),
row: $.tpl('timepickr.menu') row: $.tpl('timepickr.menu')
@@ -84,7 +84,7 @@
var ui = this; var ui = this;
var btn = false; var btn = false;
var row = $.tpl('timepickr.row').bind('mouseover', function() { var row = $.tpl('timepickr.row').bind('mouseover', function() {
$(this).next().slideDown(200); $(this).next().show();
}); });
$.each(range, function(idx, val) { $.each(range, function(idx, val) {
ui._createButton(val, format || false).appendTo(row); ui._createButton(val, format || false).appendTo(row);
@@ -115,27 +115,27 @@
_getVal: function() { _getVal: function() {
var ols = this._dom.menu.find('ol'); var ols = this._dom.menu.find('ol');
function get(unit) { function g(unit) {
var u = ols.filter('.' + unit).find('.ui-state-hover:first').text(); var u = ols.filter('.' + unit).find('.ui-state-hover:first').text();
return u || ols.filter('.' + unit + 'li:first span').text(); return u || ols.filter('.' + unit + 'li:first span').text();
} }
return { return {
h: get('hours'), h: g('hours'),
m: get('minutes'), m: g('minutes'),
s: get('seconds'), s: g('seconds'),
a: get('prefix'), a: g('prefix'),
z: get('suffix'), z: g('suffix'),
f: this.options['format' + this.c], f: this.options['format' + this.c],
c: this.c c: this.c
}; };
}, },
_formatVal: function(ival) { _formatVal: function(ival) {
var val = ival || this._getVal(); var val = ival || this._getVal();
if (!val.h) return; if (!val.h) return;
val.c = this.options.convention; val.c = this.options.convention;
val.f = val.c === 12 && this.options.format12 || this.options.format24; val.f = val.c === 12 && this.options.format12 || this.options.format24;
return (new Time(val)).getTime(); return (new Time(val)).getTime();
}, },
@@ -149,11 +149,25 @@
}, },
show: function() { show: function() {
this._trigger('show'); 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() { hide: function() {
this._trigger('hide'); this._trigger('hide');
this._dom.menu.slideUp(200); this._dom.menu.hide();
} }
}); });
@@ -167,7 +181,9 @@
start: function(e, ui) { start: function(e, ui) {
var menu = ui._dom.menu; var menu = ui._dom.menu;
var pos = ui.element.position(); 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 if (!$.boxModel) { // IE alignement fix
menu.css('margin-top', ui.element.height() + 8); menu.css('margin-top', ui.element.height() + 8);
@@ -176,7 +192,7 @@
ui.element ui.element
.bind(ui.options.trigger, function() { .bind(ui.options.trigger, function() {
ui._dom.menu.find('ol:first').show(); ui._dom.menu.find('ol:first').show();
ui._dom.menu.slideDown(200); ui.show();
ui._trigger('focus'); ui._trigger('focus');
if (ui.options.trigger != 'focus') { if (ui.options.trigger != 'focus') {
ui.element.focus(); ui.element.focus();
@@ -192,6 +208,23 @@
ui._trigger('refresh'); 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) { refresh: function(e, ui) {
// Realign each menu layers // Realign each menu layers
ui._dom.menu.find('ol').each(function() { ui._dom.menu.find('ol').each(function() {

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

@@ -22,6 +22,8 @@
<div> <div>
<%=Html.RadioButton("Command", "PublishLater", Model.ScheduledPublishUtc != null, new { id = "Command_PublishLater" }) %> <%=Html.RadioButton("Command", "PublishLater", Model.ScheduledPublishUtc != null, new { id = "Command_PublishLater" }) %>
<label class="forcheckbox" for="Command_PublishLater"><%=_Encoded("Publish Later")%></label> <label class="forcheckbox" for="Command_PublishLater"><%=_Encoded("Publish Later")%></label>
</div>
<div>
<label class="forpicker" for="ScheduledPublishUtcDate"><%=_Encoded("Date")%></label> <label class="forpicker" for="ScheduledPublishUtcDate"><%=_Encoded("Date")%></label>
<%=Html.EditorFor(m => m.ScheduledPublishUtcDate)%> <%=Html.EditorFor(m => m.ScheduledPublishUtcDate)%>
<label class="forpicker" for="ScheduledPublishUtcTime"><%=_Encoded("Time")%></label> <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) }); .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") }); $("input#ScheduledPublishUtcTime").timepickr().focus(function() { $("#Command_PublishLater").attr("checked", "checked") });
})</script> })</script>

151
src/Orchard.Web/Packages/Orchard.Pages/Scripts/ui.timepickr.js
View File

@@ -1,59 +1,59 @@
/* /*
jQuery ui.timepickr - @VERSION jQuery ui.timepickr - @VERSION
http://code.google.com/p/jquery-utils/ http://code.google.com/p/jquery-utils/
(c) Maxime Haineault <haineault@gmail.com> (c) Maxime Haineault <haineault@gmail.com>
http://haineault.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 Dependencies
------------ ------------
- jquery.utils.js - jquery.utils.js
- jquery.strings.js - jquery.strings.js
- jquery.ui.js - jquery.ui.js
*/ */
(function($) { (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.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.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>'); $.tpl('timepickr.button', '<li class="{className:s}"><span class="ui-state-default">{label:s}</span></li>');
$.widget('ui.timepickr', { $.widget('ui.timepickr', {
options: { options: {
convention: 12, // 24, 12 convention: 12, // 24, 12
trigger: 'focus', trigger: 'focus',
format12: '{h:02.d}:{m:02.d} {z}', format12: '{h:02.d}:{m:02.d} {z}',
format24: '{h:02.d}:{m:02.d}', format24: '{h:02.d}:{m:02.d}',
hours: true, hours: true,
prefix: ['AM', 'PM'], prefix: ['AM', 'PM'],
suffix: ['AM', 'PM'], suffix: ['AM', 'PM'],
prefixVal: false, prefixVal: false,
suffixVal: true, suffixVal: true,
rangeHour12: $.range(1, 13), rangeHour12: $.range(1, 13),
rangeHour24: [$.range(0, 12), $.range(12, 24)], rangeHour24: [$.range(0, 12), $.range(12, 24)],
rangeMin: $.range(0, 60, 15), rangeMin: $.range(0, 60, 15),
rangeSec: $.range(0, 60, 15), rangeSec: $.range(0, 60, 15),
corners: 'all', corners: 'all',
// plugins // plugins
core: true, core: true,
minutes: true, minutes: true,
seconds: false, seconds: false,
val: false, val: false,
updateLive: true, updateLive: true,
resetOnBlur: true, resetOnBlur: true,
keyboardnav: true, keyboardnav: true,
handle: false, handle: false,
handleEvent: 'click' handleEvent: 'click'
}, },
plugins: {}, plugins: {},
_create: function() { _create: function() {
this._dom = { this._dom = {
menu: $.tpl('timepickr.menu'), menu: $.tpl('timepickr.menu'),
row: $.tpl('timepickr.menu') row: $.tpl('timepickr.menu')
@@ -84,7 +84,7 @@
var ui = this; var ui = this;
var btn = false; var btn = false;
var row = $.tpl('timepickr.row').bind('mouseover', function() { var row = $.tpl('timepickr.row').bind('mouseover', function() {
$(this).next().slideDown(200); $(this).next().show();
}); });
$.each(range, function(idx, val) { $.each(range, function(idx, val) {
ui._createButton(val, format || false).appendTo(row); ui._createButton(val, format || false).appendTo(row);
@@ -115,27 +115,27 @@
_getVal: function() { _getVal: function() {
var ols = this._dom.menu.find('ol'); var ols = this._dom.menu.find('ol');
function get(unit) { function g(unit) {
var u = ols.filter('.' + unit).find('.ui-state-hover:first').text(); var u = ols.filter('.' + unit).find('.ui-state-hover:first').text();
return u || ols.filter('.' + unit + 'li:first span').text(); return u || ols.filter('.' + unit + 'li:first span').text();
} }
return { return {
h: get('hours'), h: g('hours'),
m: get('minutes'), m: g('minutes'),
s: get('seconds'), s: g('seconds'),
a: get('prefix'), a: g('prefix'),
z: get('suffix'), z: g('suffix'),
f: this.options['format' + this.c], f: this.options['format' + this.c],
c: this.c c: this.c
}; };
}, },
_formatVal: function(ival) { _formatVal: function(ival) {
var val = ival || this._getVal(); var val = ival || this._getVal();
if (!val.h) return; if (!val.h) return;
val.c = this.options.convention; val.c = this.options.convention;
val.f = val.c === 12 && this.options.format12 || this.options.format24; val.f = val.c === 12 && this.options.format12 || this.options.format24;
return (new Time(val)).getTime(); return (new Time(val)).getTime();
}, },
@@ -149,11 +149,25 @@
}, },
show: function() { show: function() {
this._trigger('show'); 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() { hide: function() {
this._trigger('hide'); this._trigger('hide');
this._dom.menu.slideUp(200); this._dom.menu.hide();
} }
}); });
@@ -167,7 +181,9 @@
start: function(e, ui) { start: function(e, ui) {
var menu = ui._dom.menu; var menu = ui._dom.menu;
var pos = ui.element.position(); 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 if (!$.boxModel) { // IE alignement fix
menu.css('margin-top', ui.element.height() + 8); menu.css('margin-top', ui.element.height() + 8);
@@ -176,7 +192,7 @@
ui.element ui.element
.bind(ui.options.trigger, function() { .bind(ui.options.trigger, function() {
ui._dom.menu.find('ol:first').show(); ui._dom.menu.find('ol:first').show();
ui._dom.menu.slideDown(200); ui.show();
ui._trigger('focus'); ui._trigger('focus');
if (ui.options.trigger != 'focus') { if (ui.options.trigger != 'focus') {
ui.element.focus(); ui.element.focus();
@@ -192,6 +208,23 @@
ui._trigger('refresh'); 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) { refresh: function(e, ui) {
// Realign each menu layers // Realign each menu layers
ui._dom.menu.find('ol').each(function() { ui._dom.menu.find('ol').each(function() {

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

@@ -23,6 +23,8 @@
<div> <div>
<%=Html.RadioButton("Command", "PublishLater", Model.ScheduledPublishUtc != null, new { id = "Command_PublishLater" }) %> <%=Html.RadioButton("Command", "PublishLater", Model.ScheduledPublishUtc != null, new { id = "Command_PublishLater" }) %>
<label class="forcheckbox" for="Command_PublishLater"><%=_Encoded("Publish Later")%></label> <label class="forcheckbox" for="Command_PublishLater"><%=_Encoded("Publish Later")%></label>
</div>
<div>
<label class="forpicker" for="ScheduledPublishUtcDate"><%=_Encoded("Date")%></label> <label class="forpicker" for="ScheduledPublishUtcDate"><%=_Encoded("Date")%></label>
<%=Html.EditorFor(m => m.ScheduledPublishUtcDate)%> <%=Html.EditorFor(m => m.ScheduledPublishUtcDate)%>
<label class="forpicker" for="ScheduledPublishUtcTime"><%=_Encoded("Time")%></label> <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) }); .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") }); $("input#ScheduledPublishUtcTime").timepickr().focus(function() { $("#Command_PublishLater").attr("checked", "checked") });
})</script> })</script>