Revision: 2078
http://mrbs.svn.sourceforge.net/mrbs/?rev=2078&view=rev
Author: cimorrison
Date: 2011-10-12 10:21:10 +0000 (Wed, 12 Oct 2011)
Log Message:
-----------
Allowed bookings to be resized. Still need to stop them overlapping existing
bookings and they are not yet linked up to the backend (no change is made to
the database on resize)
Modified Paths:
--------------
mrbs/branches/draggable_bookings/web/Themes/default/header.inc
mrbs/branches/draggable_bookings/web/mrbs.css.php
Modified: mrbs/branches/draggable_bookings/web/Themes/default/header.inc
===================================================================
--- mrbs/branches/draggable_bookings/web/Themes/default/header.inc
2011-10-12 08:34:45 UTC (rev 2077)
+++ mrbs/branches/draggable_bookings/web/Themes/default/header.inc
2011-10-12 10:21:10 UTC (rev 2078)
@@ -78,6 +78,7 @@
global $default_duration_all_day;
global $select_options;
global $ajax_refresh_rate;
+ global $main_table_cell_border_width;
$page = basename($PHP_SELF, ".php");
$user = getUserName();
@@ -1236,7 +1237,216 @@
<?php
}
+ // DAY.PHP, WEEK.PHP, MONTH.PHP
+ // Draggable bookings
+ if (in_array($page, array('day', 'week', 'month')))
+ {
+ ?>
+ if (!lteIE6)
+ {
+ var table = $('table.dwm_main');
+ var tableCoordsX = [];
+ var tableCoordsY = [];
+ table.find('thead tr:first-child th').each(function() {
+ tableCoordsX.push(Math.round($(this).offset().left) + <?php echo
$main_table_cell_border_width ?>);
+ });
+ table.find('tr').not('.multiple_booking tr').each(function() {
+ tableCoordsY.push(Math.round($(this).offset().top) + <?php echo
$main_table_cell_border_width ?>);
+ });
+ <?php
+ // Get all the booking cells, excluding (a) the row labels columns, (b)
any empty
+ // cells and (c) any cells to do with multiple bookings
+ ?>
+ table.find('td').not('.row_labels, .new, .multiple_booking,
.multiple_booking td')
+ .each(function() {
+
+ <?php
+ // Snap the side with X or Y coordinate coord in the direction
specified
+ // (can be 'left', 'right', 'top' or 'bottom'). If force is true,
then the
+ // side is snapped regardless of where it is.
+ //
+ // We have to provide our own snapToGrid function instead of using
the grid
+ // option in the jQuery UI resize widget because our table may not
have uniform
+ // row heights and column widths - so we can't specify a grid in
terms of a simple
+ // array as required by the resize widget.
+ ?>
+ function snapToGrid(ui, coord, direction, force)
+ {
+ var snapGap = (force) ? 100000: 20; <?php // px ?>
+
+ aCoords = ((direction=='left') || (direction=='right')) ?
tableCoordsX : tableCoordsY;
+ for (var i=0; i<(aCoords.length - 1); i++)
+ {
+ var topLeft = aCoords[i];
+ var bottomRight = aCoords[i+1];
+ if ((coord>topLeft) && (coord<bottomRight))
+ {
+ var gap = bottomRight - topLeft;
+ var gapTopLeft = Math.round(coord - topLeft);
+ var gapBottomRight = Math.round(bottomRight - coord);
+ if ((gapTopLeft <= gap/2) && (gapTopLeft < snapGap))
+ {
+ switch (direction)
+ {
+ case 'left':
+ divClone.offset({top: divClone.offset().top, left:
topLeft});
+ divClone.width(divClone.width() + gapTopLeft);
+ break;
+ case 'right':
+ divClone.width(divClone.width() - gapTopLeft);
+ break;
+ case 'top':
+ divClone.offset({top: topLeft, left:
divClone.offset().left});
+ divClone.height(divClone.height() + gapTopLeft);
+ break;
+ case 'bottom':
+ divClone.height(divClone.height() - gapTopLeft);
+ break;
+ }
+ return;
+ }
+ else if ((gapBottomRight <= gap/2) && (gapBottomRight <
snapGap))
+ {
+ switch (direction)
+ {
+ case 'left':
+ divClone.offset({top: divClone.offset().top, left:
bottomRight});
+ divClone.width(divClone.width() - gapBottomRight);
+ break;
+ case 'right':
+ divClone.width(divClone.width() + gapBottomRight);
+ break;
+ case 'top':
+ divClone.offset({top: bottomRight, left:
divClone.offset().left});
+ divClone.height(divClone.height() - gapBottomRight);
+ break;
+ case 'bottom':
+ divClone.height(divClone.height() + gapBottomRight);
+ break;
+ }
+ return;
+ }
+ }
+ } <?php // for ?>
+ } <?php // snapToGrid() ?>
+
+
+ <?php
+ // resize event callback function
+ ?>
+ var divResize = function (event, ui)
+ {
+
+ if (divResize.origin === undefined)
+ {
+ divResize.origin = $(this).offset();
+ divResize.lastPosition = $.extend({}, divClone.position());
+ divResize.lastSize = {width: divClone.width(),
+ height: divClone.height()};
+ }
+ <?php
+ // Check to see if any of the four sides of the div have moved
since the last time
+ // and if so, see if they've got close enough to the next
boundary that we can snap
+ // them to the grid
+ ?>
+
+ <?php // left edge ?>
+ if (divClone.position().left != divResize.lastPosition.left)
+ {
+ snapToGrid(ui, divResize.origin.left +
divClone.position().left, 'left');
+ }
+ <?php // right edge ?>
+ if ((divClone.position().left + ui.size.width) !=
(divResize.lastPosition.left + divResize.lastSize.width))
+ {
+ snapToGrid(ui, divResize.origin.left +
divClone.position().left + divClone.width(), 'right');
+ }
+ <?php // top edge ?>
+ if (divClone.position().top != divResize.lastPosition.top)
+ {
+ snapToGrid(ui, divResize.origin.top + divClone.position().top,
'top');
+ }
+ <?php // bottom edge ?>
+ if ((divClone.position().top + divClone.height()) !=
(divResize.lastPosition.top + divResize.lastSize.height))
+ {
+ snapToGrid(ui, divResize.origin.top + divClone.position().top
+ divClone.height(), 'bottom');
+ }
+
+ divResize.lastPosition = $.extend({}, divClone.position());
+ divResize.lastSize = {width: divClone.width(),
+ height: divClone.height()};
+
+ } <?php // divResize ?>
+
+
+ <?php
+ // callback function called when the resize starts
+ ?>
+ var divResizeStart = function (event, ui)
+ {
+ <?php
+ // Add a wrapper so that we can disable the highlighting when we
are
+ // resizing (the flickering is a bit annoying)
+ ?>
+ $('table.dwm_main').wrap('<div class="resizing"></div>');
+ <?php
+ // Add an outline to the original booking so that we can see
where it
+ // was. The width and height are 2 pixels short of the
original to allow
+ // for a 1 pixel border all round.
+ ?>
+ $('<div class="outline"></div>')
+ .width(divClone.width() - 2)
+ .height(divClone.height() - 2)
+ .offset(divClone.offset())
+ .appendTo($('div.resizing'));
+ } <?php // divResizeStop ?>
+
+
+ <?php
+ // callback function called when the resize stops
+ ?>
+ var divResizeStop = function (event, ui)
+ {
+ <?php
+ // Snap the edges to the grid, regardless of where they are.
+ ?>
+ snapToGrid(ui, divResize.origin.left + divClone.position().left,
'left', true);
+ snapToGrid(ui, divResize.origin.left + divClone.position().left
+ divClone.width(), 'right', true);
+ snapToGrid(ui, divResize.origin.top + divClone.position().top,
'top', true);
+ snapToGrid(ui, divResize.origin.top + divClone.position().top +
divClone.height(), 'bottom', true);
+ <?php // Remove the outline ?>
+ $('div.outline').remove();
+ <?php // Remove the resizing wrapper so that highlighting comes
back on ?>
+ $('table.dwm_main').unwrap();
+ } <?php // divResizeStop ?>
+
+
+ var divBooking = $(this).children('div');
+ var divClone = divBooking.clone();
+ divBooking.css('visibility', 'hidden');
+ divClone.css('z-index', '500')
+ .css('position', 'absolute')
+ .css('top', '0')
+ .css('left', '0')
+ .css('background-color', $(this).css('background-color'))
+ .css('max-height', 'none')
+ .width($(this).width())
+ .height($(this).height())
+ .resizable({handles: 'all',
+ //helper: 'ui-resizable-helper',
+ resize: divResize,
+ start: divResizeStart,
+ stop: divResizeStop})
+ .appendTo($(this));
+ $(this).css('background-color', 'transparent')
+ .wrapInner('<div style="position: relative"><\/div>');
+ });
+ }
+ <?php
+ }
+
+
+
// DAY.PHP, WEEK.PHP, MONTH.PHP
// If we're running IE6 or below then we need to make bookable slots
clickable
// and respond to a mouse hovering over them (IE6 only supports the :hover
pseudo
Modified: mrbs/branches/draggable_bookings/web/mrbs.css.php
===================================================================
--- mrbs/branches/draggable_bookings/web/mrbs.css.php 2011-10-12 08:34:45 UTC
(rev 2077)
+++ mrbs/branches/draggable_bookings/web/mrbs.css.php 2011-10-12 10:21:10 UTC
(rev 2078)
@@ -271,7 +271,7 @@
.dwm_main td.row_labels {background-color: <?php echo
$main_table_labels_back_color ?>; white-space: nowrap} /* used for the row
labels column */
.row_labels a:link {color: <?php echo $anchor_link_color_header ?>;
text-decoration: none; font-weight: normal}
.row_labels a:visited {color: <?php echo $anchor_visited_color_header ?>;
text-decoration: none; font-weight: normal}
-.row_labels a:hover {color: <?php echo $anchor_hover_color_header ?>;
text-decoration:underline; font-weight: normal}
+.row_labels a:hover {color: <?php echo $anchor_hover_color_header ?>;
text-decoration: underline; font-weight: normal}
<?php
// HIGHLIGHTING: Set styles for the highlighted cells under the cursor (the
time/period cell and the current cell)
@@ -282,7 +282,6 @@
.dwm_main td:hover.new, .dwm_main td.new_hover {background-color: <?php echo
$row_highlight_color ?>}
.dwm_main tr:hover td.row_labels, .dwm_main td.row_labels_hover
{background-color: <?php echo $row_highlight_color ?>; color: <?php echo
$standard_font_color ?>}
.dwm_main#month_main td:hover.valid, .dwm_main#month_main td.valid_hover
{background-color: <?php echo $row_highlight_color ?>}
-
<?php
// would be nicer to use color: inherit in the four rules below, but inherit
is not supported by IE until IE8.
// inherit would mean that (1) you didn't have to specify the colour again and
(2) you needn't use the tbody selector to
@@ -291,8 +290,30 @@
.dwm_main tbody tr:hover a:link, td.row_labels_hover a:link {color:
<?php echo $anchor_link_color ?>}
.dwm_main tbody tr:hover a:visited, td.row_labels_hover a:visited {color:
<?php echo $anchor_link_color ?>}
+<?php // Disable the highlighting when we're in resize mode ?>
+.resizing .dwm_main tr.even_row td:hover.new {background-color: <?php echo
$row_even_color ?>}
+.resizing .dwm_main tr.odd_row td:hover.new {background-color: <?php echo
$row_odd_color ?>}
+.resizing .dwm_main tr:hover td.row_labels {background-color: <?php echo
$main_table_labels_back_color ?>; color: <?php echo $anchor_link_color_header
?>}
+.resizing .row_labels a:hover {text-decoration: none}
+.resizing .dwm_main tbody tr:hover td.row_labels a:link {color: <?php echo
$anchor_link_color_header ?>}
+.resizing .dwm_main tbody tr:hover td.row_labels a:visited {color: <?php echo
$anchor_link_color_header ?>}
+.dwm_main .ui-resizable-handle {z-index: 1000}
+.dwm_main .ui-resizable-n {top: -1px}
+.dwm_main .ui-resizable-e {right: -1px}
+.dwm_main .ui-resizable-s {bottom: -1px}
+.dwm_main .ui-resizable-w {left: -1px}
+.dwm_main .ui-resizable-sw {bottom: -1px; left: -1px}
+.dwm_main .ui-resizable-ne {top: -1px; right: -1px}
+.dwm_main .ui-resizable-nw {top: -1px; left: -1px}
+div.outline {
+ position: absolute;
+ border: 1px dotted <?php echo $header_back_color ?>;
+ z-index: 700;
+}
+
+
<?php
/* SLOTS CLASSES
This was sent by the SourceForge.net collaborative development platform, the
world's largest Open Source development site.
------------------------------------------------------------------------------
All the data continuously generated in your IT infrastructure contains a
definitive record of customers, application performance, security
threats, fraudulent activity and more. Splunk takes this data and makes
sense of it. Business sense. IT sense. Common sense.
http://p.sf.net/sfu/splunk-d2d-oct
_______________________________________________
Mrbs-commits mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/mrbs-commits
