From 700d0d78e5baec1e571448c515cdbe4700e904ea Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Fri, 5 Dec 2014 11:32:08 +0000 Subject: [PATCH] * Calendar: Add new feature to the calendar app, in order to be able to sort calendars in day and week views --- calendar/inc/class.calendar_uiviews.inc.php | 85 ++-- calendar/js/app.js | 479 +++++++++++--------- calendar/templates/default/app.css | 16 + calendar/templates/pixelegg/app.css | 54 +-- calendar/templates/pixelegg/app.less | 37 -- 5 files changed, 351 insertions(+), 320 deletions(-) diff --git a/calendar/inc/class.calendar_uiviews.inc.php b/calendar/inc/class.calendar_uiviews.inc.php index f3f98ddfb5..62b92ddea6 100644 --- a/calendar/inc/class.calendar_uiviews.inc.php +++ b/calendar/inc/class.calendar_uiviews.inc.php @@ -141,7 +141,7 @@ class calendar_uiviews extends calendar_ui /** * Constructor * - * @param array $set_states=null to manualy set / change one of the states, default NULL = use $_REQUEST + * @param array $set_states = null to manualy set / change one of the states, default NULL = use $_REQUEST */ function __construct($set_states=null) { @@ -283,7 +283,7 @@ class calendar_uiviews extends calendar_ui /** * Displays the planner view * - * @param boolean $home=false if true return content suitable for home-page + * @param boolean $home = false if true return content suitable for home-page */ function &planner($home=false) { @@ -367,7 +367,7 @@ class calendar_uiviews extends calendar_ui /** * Displays a multiple week-view * - * @param boolean $home=false if true return content suitable for home-page + * @param boolean $home = false if true return content suitable for home-page */ function &weekN($home=false) { @@ -382,7 +382,7 @@ class calendar_uiviews extends calendar_ui /** * Displays a year view * - * @param boolean $home=false if true return content suitable for home-page + * @param boolean $home = false if true return content suitable for home-page */ function &year($home=false) { @@ -613,8 +613,8 @@ class calendar_uiviews extends calendar_ui /** * Displays the monthview or a multiple week-view * - * @param int $weeks=0 number of weeks to show, if 0 (default) all weeks of one month are shown - * @param boolean $home=false if true return content suitable for home-page + * @param int $weeks = 0 number of weeks to show, if 0 (default) all weeks of one month are shown + * @param boolean $home = false if true return content suitable for home-page */ function &month($weeks=0,$home=false) { @@ -720,7 +720,7 @@ class calendar_uiviews extends calendar_ui * * @param int &$first timestamp 0h of first day of week containing the first of the current month * @param int &$last timestamp 23:59:59 of last day of week containg the last day of the current month - * @param int $day=1 should the alignment be based on the 1. of the month or an other date, eg. the 15. + * @param int $day = 1 should the alignment be based on the 1. of the month or an other date, eg. the 15. */ function _week_align_month(&$first,&$last,$day=1) { @@ -768,7 +768,7 @@ class calendar_uiviews extends calendar_ui /** * Four days view, everythings done by the week-view code ... * - * @param boolean $home=false if true return content suitable for home-page + * @param boolean $home = false if true return content suitable for home-page * @return string */ function day4($home=false) @@ -794,8 +794,8 @@ class calendar_uiviews extends calendar_ui /** * Displays the weekview, with 5 or 7 days * - * @param int $days=0 number of days to show, if 0 (default) the value from the URL or the prefs is used - * @param boolean $home=false if true return content suitable for home-page + * @param int $days = 0 number of days to show, if 0 (default) the value from the URL or the prefs is used + * @param boolean $home = false if true return content suitable for home-page */ function week($days=0,$home=false) { @@ -897,6 +897,7 @@ class calendar_uiviews extends calendar_ui $headerCounter = 0; foreach($this->_get_planner_users(false) as $uid => $label) { + $content .= '
'; $search_params['users'] = $uid; $content .= ''.$label."\n"; $content .= $this->close_button($uid); @@ -907,7 +908,9 @@ class calendar_uiviews extends calendar_ui { $content .= $navHeader; } + $content .= '
'; } + $content = '
'.$content.'
'; } $content = $navHeader.$content; @@ -926,7 +929,7 @@ class calendar_uiviews extends calendar_ui /** * Displays the dayview * - * @param boolean $home=false if true return content suitable for home-page + * @param boolean $home = false if true return content suitable for home-page */ function &day($home=false) { @@ -1169,7 +1172,7 @@ class calendar_uiviews extends calendar_ui * * @param int $start time in minutes * @param int $end time in minutes - * @param int $minimum=0 minimum height + * @param int $minimum = 0 minimum height * @return float height in percent */ function times2height($start,$end,$minimum=0) @@ -1188,12 +1191,12 @@ class calendar_uiviews extends calendar_ui * Uses the dayColWidget to display each day. * * @param $daysEvents array with subarrays of events for each day to show, day as YYYYMMDD as key - * @param int $granularity_m=30 granularity in minutes of the rows - * @param int $height=400 height of the widget - * @param string $indent='' string for correct indention - * @param string $title='' title of the time-grid - * @param int/array $owner=0 owner of the calendar (default 0 = $this->owner) or array with owner for each column - * @param boolean $last=true last timeGrid displayed, default true + * @param int $granularity_m = 30 granularity in minutes of the rows + * @param int $height = 400 height of the widget + * @param string $indent = '' string for correct indention + * @param string $title = '' title of the time-grid + * @param int/array $owner = 0 owner of the calendar (default 0 = $this->owner) or array with owner for each column + * @param boolean $last = true last timeGrid displayed, default true */ function &timeGridWidget($daysEvents,$granularity_m=30,$height=400,$indent='',$title='',$owner=0,$last=true) { @@ -1388,16 +1391,16 @@ class calendar_uiviews extends calendar_ui * @param int $pleft start of the widget * @param int $pwidth width of the widget * @param string $indent string for correct indention - * @param boolean/string $short_title=True should we add a label (weekday, day) with link to the day-view above each day or string with title - * @param boolean $on_off=false start with row_on or row_off, default false=row_off - * @param int $owner=0 if != 0 owner to add to the add-event link + * @param boolean/string $short_title = True should we add a label (weekday, day) with link to the day-view above each day or string with title + * @param boolean $on_off = false start with row_on or row_off, default false=row_off + * @param int $owner = 0 if != 0 owner to add to the add-event link */ function dayColWidget($day_ymd,$events,$pleft,$pwidth,$indent,$short_title=True,$on_off=False,$owner=0) { if ($this->debug > 1 || $this->debug==='dayColWidget') $this->bo->debug_message('uiviews::dayColWidget(%1,%2,left=%3,width=%4,)',False,$day_ymd,$events,$pleft,$pwidth); - $html = $indent.'
'."\n"; + $html = $indent.'
'."\n"; // Creation of the header-column with date, evtl. holiday-names and a matching background-color $ts = $this->bo->date2ts((string)$day_ymd); @@ -1525,8 +1528,8 @@ class calendar_uiviews extends calendar_ui * @param string $day_ymd date * @param string &$class class to use * @param string &$holidays commaseparted holidays or empty if none - * @param boolean $only_weekend=false show only the weekend in header-color, otherwise every second days is shown too - * @param boolean $show_bdays=true If available, also show birthdays (or hide Bdays) + * @param boolean $only_weekend = false show only the weekend in header-color, otherwise every second days is shown too + * @param boolean $show_bdays = true If available, also show birthdays (or hide Bdays) * Note that this is not the place to disable a preference. * If the preferences allow birthdays to be displayed, they are cached within the holidays structure. * This setting just suppressing the available data in the view. @@ -1631,8 +1634,8 @@ class calendar_uiviews extends calendar_ui * @param $width int width of the widget * @param string $indent string for correct indention * @param int $owner owner of the calendar the event is in - * @param boolean $return_array=false should an array with keys(tooltip,popup,html) be returned or the complete widget as string - * @param string $block='event_widget' template used the render the widget + * @param boolean $return_array = false should an array with keys(tooltip,popup,html) be returned or the complete widget as string + * @param string $block = 'event_widget' template used the render the widget * @param int $z_index is the z-index of the drag-drobable outer box of the event. * @return string/array */ @@ -2088,7 +2091,7 @@ class calendar_uiviews extends calendar_ui * @param mixed $start start-time of the grid * @param mixed $end end-time of the grid * @param string|int $by_cat rows by sub-categories of $by_cat (cat_id or 0 for upmost level) or by 'user' or 'month' - * @param string $indent='' string for correct indention + * @param string $indent = '' string for correct indention * @return string with widget */ function &plannerWidget(&$events,$start,$end,$by_cat=0,$indent='') @@ -2261,7 +2264,7 @@ class calendar_uiviews extends calendar_ui /** * get all users to display in the planner_by_user * - * @param boolean $enum_groups=true should groups be returned as there members (eg. planner) or not (day & week) + * @param boolean $enum_groups = true should groups be returned as there members (eg. planner) or not (day & week) * @return array with uid => label pairs, first all users alphabetically sorted, then all resources */ function _get_planner_users($enum_groups=true) @@ -2289,9 +2292,13 @@ class calendar_uiviews extends calendar_ui $users[$user] = $this->bo->participant_name($user); } } - asort($users); - asort($resources); - + // Only sort users in planner views + if ($enum_groups) + { + asort($users); + asort($resources); + } + return $users+$resources; } @@ -2348,7 +2355,7 @@ class calendar_uiviews extends calendar_ui * * @param int $start start-time (12h) of the scale * @param int $days number of days to display - * @param string $indent='' string for correct indention + * @param string $indent = '' string for correct indention * @return string with scale */ function plannerMonthScale($start,$days,$indent) @@ -2438,7 +2445,7 @@ class calendar_uiviews extends calendar_ui * * @param int $start start-time (12h) of the scale * @param int $days number of days to display - * @param string $indent='' string for correct indention + * @param string $indent = '' string for correct indention * @return string with scale */ function plannerWeekScale($start,$days,$indent) @@ -2483,7 +2490,7 @@ class calendar_uiviews extends calendar_ui * * @param int $start start-time (12h) of the scale * @param int $days number of days to display - * @param string $indent='' string for correct indention + * @param string $indent = '' string for correct indention * @return string with scale */ function plannerDayScale($start,$days,$indent) @@ -2607,7 +2614,7 @@ class calendar_uiviews extends calendar_ui * * @param int $start start-time (12h) of the scale * @param int $days number of days to display - * @param string $indent='' string for correct indention + * @param string $indent = '' string for correct indention * @return string with scale */ function plannerHourScale($start,$days,$indent) @@ -2652,7 +2659,7 @@ class calendar_uiviews extends calendar_ui * @param int $end end-time of the row * @param string $header user or category name for the row-header * @param string $class additional css class for the row - * @param string $indent='' string for correct indention + * @param string $indent = '' string for correct indention * @return string with widget */ function plannerRowWidget($events,$start,$end,$header,$class,$indent='') @@ -2709,7 +2716,7 @@ class calendar_uiviews extends calendar_ui * * @param int $start timestamp of start of row * @param int $days number of days in month of row - * @param string $indent='' + * @param string $indent = '' * @return string */ function yearlyPlannerMarkDays($start,$days,$indent='') @@ -2739,7 +2746,7 @@ class calendar_uiviews extends calendar_ui * @param array $events non-overlapping events to show * @param int $start start-time of the row * @param int $end end-time of the row - * @param string $indent='' string for correct indention + * @param string $indent = '' string for correct indention * @return string with widget */ function eventRowWidget($events,$start,$end,$indent='') diff --git a/calendar/js/app.js b/calendar/js/app.js index 87101d6df6..61fb440f69 100644 --- a/calendar/js/app.js +++ b/calendar/js/app.js @@ -225,209 +225,209 @@ app.classes.calendar = AppJS.extend( var that = this; //Draggable & Resizable selector - jQuery("div[id^='drag_']") - //draggable event handler - .draggable - ({ - stack: jQuery("div[id^='drag_']"), - revert: "invalid", - delay: 50, + var $drag = jQuery("div[id^='drag_']") + //draggable event handler + .draggable + ({ + stack: jQuery("div[id^='drag_']"), + revert: "invalid", + delay: 50, - cursorAt:{top:0,left:0}, - containment: ".egw_fw_content_browser_iframe", - scroll: true, - opacity: .6, - cursor: "move", + cursorAt:{top:0,left:0}, + containment: ".egw_fw_content_browser_iframe", + scroll: true, + opacity: .6, + cursor: "move", - /** - * Triggered when the dragging of calEvent stoped. - * - * @param {event} event - * @param {Object} ui - */ - stop: function(event, ui) - { - ui.helper.width(oldWidth); - ui.helper[0].innerHTML = oldInnerHTML; - }, + /** + * Triggered when the dragging of calEvent stoped. + * + * @param {event} event + * @param {Object} ui + */ + stop: function(event, ui) + { + ui.helper.width(oldWidth); + ui.helper[0].innerHTML = oldInnerHTML; + }, - /** - * Triggered while dragging a calEvent. - * - * @param {event} event - * @param {Object} ui - * - */ - drag:function(event, ui) - { - //that.dragEvent(); - }, - - /** - * Triggered when the dragging of calEvent started. - * - * @param {event} event - * @param {Object} ui - * - */ - start: function(event, ui) - { - oldInnerHTML = ui.helper[0].innerHTML; - oldWidth = ui.helper.width(); - ui.helper.width(jQuery("#calColumn").width()); - } - }) - - //Resizable event handler - .resizable - ({ - distance: 10, - - - /** - * Triggered when the resizable is created. - * - * @param {event} event - * @param {Object} ui - */ - create:function(event, ui) - { - var resizeHelper = event.target.getAttribute('data-resize').split("|")[3]; - if (resizeHelper == 'WD' || resizeHelper == 'WDS') - { - $j(this).resizable('destroy'); - } - }, - - /** - * Triggered at start of resizing a calEvent - * - * @param {event} event - * @param {Object} ui - */ - start:function(event, ui) - { - var resizeHelper = event.target.getAttribute('data-resize'); - var dataResize = resizeHelper.split("|"); - var time = dataResize[1].split(":"); - - this.dropStart = that.resizeHelper(ui.element[0].getBoundingClientRect().left,ui.element[0].getBoundingClientRect().top); - this.dropDate = dataResize[0]+"T"+time[0]+time[1]; - //$j(this).resizable("option","containment",".calendar_calDayCol"); - }, - - /** - * Triggered at the end of resizing the calEvent. - * - * @param {event} event - * @param {Object} ui - */ - stop:function(event, ui) - { - var eventFlag = event.target.getAttribute('data-resize').split("|")[3]; - var dropdate = that.cal_dnd_tZone_converter(this.dropDate); - var sT = parseInt((dropdate.split("T")[1].substr(0,2)* 60)) + parseInt(dropdate.split("T")[1].substr(2,2)); - if (this.dropEnd != 'undefined' && this.dropEnd) - { - var eT = parseInt(this.dropEnd.getAttribute('data-date').split("|")[1] * 60) + parseInt(this.dropEnd.getAttribute('data-date').split("|")[2]); - var newDuration = ((eT - sT)/60) * 3600; - that.dropEvent(this.getAttribute('id'),dropdate,newDuration,eventFlag); - } - }, - - /** - * Triggered during the resize, on the drag of the resize handler - * - * @param {event} event - * @param {Object} ui - */ - resize:function(event, ui) - { - this.dropEnd = that.resizeHelper(ui.element[0].getBoundingClientRect().left, - ui.element[0].getBoundingClientRect().top+ui.size.height); - - if (typeof this.dropEnd != 'undefined' && this.dropEnd) - { - if (this.dropEnd.getAttribute('id').match(/drop_/g)) + /** + * Triggered while dragging a calEvent. + * + * @param {event} event + * @param {Object} ui + * + */ + drag:function(event, ui) { - var dH = this.dropEnd.getAttribute('data-date').split("|")[1]; - var dM = this.dropEnd.getAttribute('data-date').split("|")[2]; + //that.dragEvent(); + }, + + /** + * Triggered when the dragging of calEvent started. + * + * @param {event} event + * @param {Object} ui + * + */ + start: function(event, ui) + { + oldInnerHTML = ui.helper[0].innerHTML; + oldWidth = ui.helper.width(); + ui.helper.width(jQuery("#calColumn").width()); } - var dataResize = event.target.getAttribute('data-resize').split("|"); - this.innerHTML = '
'+dH+':'+dM+'
'; - } - else - { - this.innerHTML = '
'; - } - } - }); + }) + + //Resizable event handler + .resizable + ({ + distance: 10, + + + /** + * Triggered when the resizable is created. + * + * @param {event} event + * @param {Object} ui + */ + create:function(event, ui) + { + var resizeHelper = event.target.getAttribute('data-resize').split("|")[3]; + if (resizeHelper == 'WD' || resizeHelper == 'WDS') + { + jQuery(this).resizable('destroy'); + } + }, + + /** + * Triggered at start of resizing a calEvent + * + * @param {event} event + * @param {Object} ui + */ + start:function(event, ui) + { + var resizeHelper = event.target.getAttribute('data-resize'); + var dataResize = resizeHelper.split("|"); + var time = dataResize[1].split(":"); + + this.dropStart = that.resizeHelper(ui.element[0].getBoundingClientRect().left,ui.element[0].getBoundingClientRect().top); + this.dropDate = dataResize[0]+"T"+time[0]+time[1]; + //$j(this).resizable("option","containment",".calendar_calDayCol"); + }, + + /** + * Triggered at the end of resizing the calEvent. + * + * @param {event} event + * @param {Object} ui + */ + stop:function(event, ui) + { + var eventFlag = event.target.getAttribute('data-resize').split("|")[3]; + var dropdate = that.cal_dnd_tZone_converter(this.dropDate); + var sT = parseInt((dropdate.split("T")[1].substr(0,2)* 60)) + parseInt(dropdate.split("T")[1].substr(2,2)); + if (this.dropEnd != 'undefined' && this.dropEnd) + { + var eT = parseInt(this.dropEnd.getAttribute('data-date').split("|")[1] * 60) + parseInt(this.dropEnd.getAttribute('data-date').split("|")[2]); + var newDuration = ((eT - sT)/60) * 3600; + that.dropEvent(this.getAttribute('id'),dropdate,newDuration,eventFlag); + } + }, + + /** + * Triggered during the resize, on the drag of the resize handler + * + * @param {event} event + * @param {Object} ui + */ + resize:function(event, ui) + { + this.dropEnd = that.resizeHelper(ui.element[0].getBoundingClientRect().left, + ui.element[0].getBoundingClientRect().top+ui.size.height); + + if (typeof this.dropEnd != 'undefined' && this.dropEnd) + { + if (this.dropEnd.getAttribute('id').match(/drop_/g)) + { + var dH = this.dropEnd.getAttribute('data-date').split("|")[1]; + var dM = this.dropEnd.getAttribute('data-date').split("|")[2]; + } + var dataResize = event.target.getAttribute('data-resize').split("|"); + this.innerHTML = '
'+dH+':'+dM+'
'; + } + else + { + this.innerHTML = '
'; + } + } + }); //Droppable selector - jQuery("div[id^='drop_']") - //Droppable event handler - .droppable - ({ - /** - * Make all draggable calEvents acceptable - * - */ - accept:function() - { - return true; - }, - tolerance:'pointer', + var $drop = jQuery("div[id^='drop_']") + //Droppable event handler + .droppable + ({ + /** + * Make all draggable calEvents acceptable + * + */ + accept:function() + { + return true; + }, + tolerance:'pointer', - /** - * Triggered when the calEvent dropped. - * - * @param {event} event - * @param {Object} ui - */ - drop:function(event, ui) - { - var dgId = ui.draggable[0].getAttribute('id'); - var dgOwner = dgId.substring(dgId.lastIndexOf("_C")+2,dgId.lastIndexOf("")); - var dpOwner = event.target.getAttribute('data-owner'); - var eventFlag = ui.draggable[0].getAttribute('data-resize').split("|")[3]; - if (dpOwner == null) dpOwner = dgOwner; - if (dpOwner == dgOwner ) - { - that.dropEvent(ui.draggable[0].id, event.target.getAttribute('id').substring(event.target.getAttribute('id').lastIndexOf("drop_")+5, event.target.getAttribute('id').lastIndexOf("_O")),null,eventFlag); - } - else - { - jQuery(ui.draggable).draggable("option","revert",true); - } + /** + * Triggered when the calEvent dropped. + * + * @param {event} event + * @param {Object} ui + */ + drop:function(event, ui) + { + var dgId = ui.draggable[0].getAttribute('id'); + var dgOwner = dgId.substring(dgId.lastIndexOf("_C")+2,dgId.lastIndexOf("")); + var dpOwner = event.target.getAttribute('data-owner'); + var eventFlag = ui.draggable[0].getAttribute('data-resize').split("|")[3]; + if (dpOwner == null) dpOwner = dgOwner; + if (dpOwner == dgOwner ) + { + that.dropEvent(ui.draggable[0].id, event.target.getAttribute('id').substring(event.target.getAttribute('id').lastIndexOf("drop_")+5, event.target.getAttribute('id').lastIndexOf("_O")),null,eventFlag); + } + else + { + jQuery(ui.draggable).draggable("option","revert",true); + } - }, + }, - /** - * Triggered when draggable calEvent is over a droppable calCell. - * - * @param {event} event - * @param {Object} ui - */ - over:function(event, ui) - { - var timeDemo = event.target.id.substring(event.target.id.lastIndexOf("T")+1,event.target.id.lastIndexOf("_O")); - var dgId = ui.draggable[0].getAttribute('id'); - var dgOwner = dgId.substring(dgId.lastIndexOf("_C")+2,dgId.lastIndexOf("")); - var dpOwner = event.target.getAttribute('data-owner'); - if (dpOwner == null) dpOwner = dgOwner; - if (dpOwner === dgOwner ) - { - ui.helper[0].innerHTML = '
'+timeDemo+'
'; - } - else - { - ui.helper[0].innerHTML = '
'; - } - } - }); + /** + * Triggered when draggable calEvent is over a droppable calCell. + * + * @param {event} event + * @param {Object} ui + */ + over:function(event, ui) + { + var timeDemo = event.target.id.substring(event.target.id.lastIndexOf("T")+1,event.target.id.lastIndexOf("_O")); + var dgId = ui.draggable[0].getAttribute('id'); + var dgOwner = dgId.substring(dgId.lastIndexOf("_C")+2,dgId.lastIndexOf("")); + var dpOwner = event.target.getAttribute('data-owner'); + if (dpOwner == null) dpOwner = dgOwner; + if (dpOwner === dgOwner ) + { + ui.helper[0].innerHTML = '
'+timeDemo+'
'; + } + else + { + ui.helper[0].innerHTML = '
'; + } + } + }); //jQuery Calendar Event selector - jQuery("body") + var $iframeBody = jQuery("body") //mouseover event handler for calendar tooltip .on("mouseover", "div[data-tooltip]",function(){ var $ttp = jQuery(this); @@ -530,16 +530,15 @@ app.classes.calendar = AppJS.extend( } } - var eventInfo = - { - date: timestamp[0], - hour: timestamp[1], - minute: timestamp[2] - }; + var eventInfo = { + date: timestamp[0], + hour: timestamp[1], + minute: timestamp[2] + }; if (typeof ownerId !='undefined' && ownerId != 0) { - $j(eventInfo).extend(eventInfo,{owner: ownerId}); + jQuery(eventInfo).extend(eventInfo,{owner: ownerId}); } that.egw.open(null, 'calendar', 'add', eventInfo , '_blank'); @@ -552,6 +551,74 @@ app.classes.calendar = AppJS.extend( that.egw.open_link(link,'_blank',windowSize); return false; }); + + //******************************** Calendar Sortable ************************ + // Calender current state + var state = this.getState(); + + if (state && state.view === "day" + && typeof state.owner != 'undefined' + && typeof state.owner == 'string' && state.owner.split(',').length > 1) + { + $iframeBody.find('#calendar_calDayCols') + .addClass('cal_is_sortable') + .css({"white-space":"nowrap"}) + .children().each(function(){ + // Change day view columns position in order to get sortable placeholder working + jQuery(this).css({position:"relative",display:"inline-block", left:"none"}); + }); + } + + $iframeBody.find('.cal_is_sortable').sortable ({ + cancel: "#divAppboxHeader, .calendar_calWeekNavHeader, .calendar_plannerHeader", + placeholder: "srotable_cal_wk_ph", + axis:"y", + revert: true, + helper:"clone", + create: function () + { + var $sortItem = jQuery(this); + var options = {}; + switch (state.view) + { + case "day": + options = { + placeholder:"srotable_cal_day_ph", + axis:"x" + }; + $sortItem.sortable('option', options); + break; + case "week": + options = { + placeholder:"srotable_cal_wk_ph", + axis:"y" + }; + $sortItem.sortable('option', options); + break; + default: + $sortItem.sortable('destroy'); + } + }, + start: function () + { + $drag.draggable('disable'); + $drop.droppable('disable'); + }, + stop: function () + { + $drag.draggable('enable'); + $drop.droppable('enable'); + }, + update: function () + { + if (state && typeof state.owner !== 'undefined') + { + var sortedArr = jQuery(this).sortable('toArray', {attribute:"data-sortable-id"}); + state.owner = sortedArr.join(','); + that.setState({state:state}); + } + } + }); }, /** @@ -564,16 +631,16 @@ app.classes.calendar = AppJS.extend( */ resizeHelper: function(_X,_Y) { - var drops = jQuery("div[id^='drop_']"); + var $drops = jQuery("div[id^='drop_']"); var top = Math.round(_Y); var left = Math.round(_X); - for (var i=0;i < drops.length;i++) + for (var i=0;i < $drops.length;i++) { - if (top >= Math.round(drops[i].getBoundingClientRect().top) - && top <= Math.round(drops[i].getBoundingClientRect().bottom) - && left >= Math.round(drops[i].getBoundingClientRect().left) - && left <= Math.round(drops[i].getBoundingClientRect().right)) - return drops[i]; + if (top >= Math.round($drops[i].getBoundingClientRect().top) + && top <= Math.round($drops[i].getBoundingClientRect().bottom) + && left >= Math.round($drops[i].getBoundingClientRect().left) + && left <= Math.round($drops[i].getBoundingClientRect().right)) + return $drops[i]; } return false; }, @@ -716,7 +783,7 @@ app.classes.calendar = AppJS.extend( var start = this.et2.getWidgetById('start'); var end = this.et2.getWidgetById('end'); var content = this.et2.getArrayMgr('content').data; - + if (typeof duration != 'undefined' && typeof end != 'undefined') { end.set_disabled(duration.get_value()!==''); diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css index 91bfc26327..f11463e51b 100644 --- a/calendar/templates/default/app.css +++ b/calendar/templates/default/app.css @@ -649,4 +649,20 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget img.calendar_print_button, img.calendar_print_appicon { height: 24px; width: 24px; +} + +/*Sortable views*/ +.srotable_cal_wk_ph { + border: 2px dashed gray; + height: 230px; + width: 99%; + background-color: #ece2f7; +} +.srotable_cal_day_ph { + position: relative; + width: 33.333333%; + height: 99%; + border: 2px dashed gray; + background-color: #ece2f7; + display: inline-block; } \ No newline at end of file diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css index 7e5b467e45..75afc82e7b 100755 --- a/calendar/templates/pixelegg/app.css +++ b/calendar/templates/pixelegg/app.css @@ -11,7 +11,7 @@ * @package calendar * @version $Id$ */ -/* $Id: app.css 48463 2014-09-04 13:37:46Z ralfbecker $ */ +/* $Id: app.css 49287 2014-11-04 15:34:51Z hnategh $ */ /*Media print classes*/ @media print { .th td, @@ -660,6 +660,21 @@ img.calendar_print_appicon { height: 24px; width: 24px; } +/*Sortable views*/ +.srotable_cal_wk_ph { + border: 2px dashed gray; + height: 230px; + width: 99%; + background-color: #ece2f7; +} +.srotable_cal_day_ph { + position: relative; + width: 33.333333%; + height: 99%; + border: 2px dashed gray; + background-color: #ece2f7; + display: inline-block; +} /*generell*/ .egw_fw_content_browser_iframe img[src$="svg"] { background-color: #828282 !important; @@ -1386,40 +1401,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget font-size: 8pt; text-align: left; } -/* contains (multiple) dayCol's - */ -.calendar_calDayCols, -.calendar_calDayCols12h, -.calendar_calDayColsNoGrid { - position: absolute; - top: 0px; - /* bottom: 0px; does NOT work in IE, IE needs height: 100%! */ - height: 100%; - left: 45px; - right: 0px; -} -/* 12h timeformat with am/pm - */ -.calendar_calDayCols12h { - left: 65px; -} -/* no time grid --> no time column - */ -.calendar_calDayColsNoTime { - left: 0px; -} -/* contains (multiple) eventCol's - */ -.calendar_calDayCol { - position: absolute; - top: 0px; - height: 100%; - /* set via inline style on runtime: - * left: - * width: - */ - border-left: 1px solid silver; -} /* Calendar Id # */ #calendar-edit_id:before { @@ -1452,9 +1433,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget .calendar_calGridHeader { border: none; } -.calendar_calDayColHeader img { - vertical-align: middle; -} /*header for the weekCol*/ .calendar_calWeekNavHeader, .calendar_calMonthNavHeader { diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less index 676f0967a8..6ca86eb698 100755 --- a/calendar/templates/pixelegg/app.less +++ b/calendar/templates/pixelegg/app.less @@ -848,39 +848,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget text-align: left; } -/* contains (multiple) dayCol's - */ -.calendar_calDayCols,.calendar_calDayCols12h,.calendar_calDayColsNoGrid{ - position: absolute; - top: 0px; - /* bottom: 0px; does NOT work in IE, IE needs height: 100%! */ - height: 100%; - left: 45px; - right: 0px; -} -/* 12h timeformat with am/pm - */ -.calendar_calDayCols12h{ - left: 65px; -} -/* no time grid --> no time column - */ -.calendar_calDayColsNoTime{ - left: 0px; -} - -/* contains (multiple) eventCol's - */ -.calendar_calDayCol{ - position: absolute; - top: 0px; - height: 100%; - /* set via inline style on runtime: - * left: - * width: - */ - border-left: 1px solid silver; -} /* Calendar Id # */ #calendar-edit_id:before { content:"#"} @@ -915,10 +882,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget .calendar_calGridHeader{ border: none; } -.calendar_calDayColHeader img { - vertical-align: middle; -} - /*header for the weekCol*/ .calendar_calWeekNavHeader,.calendar_calMonthNavHeader{