aboutsummaryrefslogtreecommitdiffstats
path: root/library/fullcalendar/fullcalendar.js
diff options
context:
space:
mode:
authorMario Vavti <mario@mariovavti.com>2016-06-16 11:22:08 +0200
committerMario Vavti <mario@mariovavti.com>2016-06-16 11:22:08 +0200
commit951bf5ec2e4ca73e3c517b5d83ee8b5508b9972a (patch)
tree16600860ba044d265f362fee1004d57eae86b9e8 /library/fullcalendar/fullcalendar.js
parentd457f11717da40f44d98eeba5b88e6f1e5636247 (diff)
downloadvolse-hubzilla-951bf5ec2e4ca73e3c517b5d83ee8b5508b9972a.tar.gz
volse-hubzilla-951bf5ec2e4ca73e3c517b5d83ee8b5508b9972a.tar.bz2
volse-hubzilla-951bf5ec2e4ca73e3c517b5d83ee8b5508b9972a.zip
update 3rd party lib fullcalendar to version 2.7.3
Diffstat (limited to 'library/fullcalendar/fullcalendar.js')
-rw-r--r--library/fullcalendar/fullcalendar.js1722
1 files changed, 1249 insertions, 473 deletions
diff --git a/library/fullcalendar/fullcalendar.js b/library/fullcalendar/fullcalendar.js
index d6042cc17..cbe67697d 100644
--- a/library/fullcalendar/fullcalendar.js
+++ b/library/fullcalendar/fullcalendar.js
@@ -1,7 +1,7 @@
/*!
- * FullCalendar v2.6.1
+ * FullCalendar v2.7.3
* Docs & License: http://fullcalendar.io/
- * (c) 2015 Adam Shaw
+ * (c) 2016 Adam Shaw
*/
(function(factory) {
@@ -19,8 +19,8 @@
;;
var FC = $.fullCalendar = {
- version: "2.6.1",
- internalApiVersion: 3
+ version: "2.7.3",
+ internalApiVersion: 4
};
var fcViews = FC.views = {};
@@ -262,29 +262,25 @@ function matchCellWidths(els) {
}
-// Turns a container element into a scroller if its contents is taller than the allotted height.
-// Returns true if the element is now a scroller, false otherwise.
-// NOTE: this method is best because it takes weird zooming dimensions into account
-function setPotentialScroller(containerEl, height) {
- containerEl.height(height).addClass('fc-scroller');
-
- // are scrollbars needed?
- if (containerEl[0].scrollHeight - 1 > containerEl[0].clientHeight) { // !!! -1 because IE is often off-by-one :(
- return true;
- }
-
- unsetScroller(containerEl); // undo
- return false;
-}
+// Given one element that resides inside another,
+// Subtracts the height of the inner element from the outer element.
+function subtractInnerElHeight(outerEl, innerEl) {
+ var both = outerEl.add(innerEl);
+ var diff;
+ // effin' IE8/9/10/11 sometimes returns 0 for dimensions. this weird hack was the only thing that worked
+ both.css({
+ position: 'relative', // cause a reflow, which will force fresh dimension recalculation
+ left: -1 // ensure reflow in case the el was already relative. negative is less likely to cause new scroll
+ });
+ diff = outerEl.outerHeight() - innerEl.outerHeight(); // grab the dimensions
+ both.css({ position: '', left: '' }); // undo hack
-// Takes an element that might have been a scroller, and turns it back into a normal element.
-function unsetScroller(containerEl) {
- containerEl.height('').removeClass('fc-scroller');
+ return diff;
}
-/* General DOM Utilities
+/* Element Geom Utilities
----------------------------------------------------------------------------------------------------------------------*/
FC.getOuterRect = getOuterRect;
@@ -309,26 +305,30 @@ function getScrollParent(el) {
// Queries the outer bounding area of a jQuery element.
// Returns a rectangle with absolute coordinates: left, right (exclusive), top, bottom (exclusive).
-function getOuterRect(el) {
+// Origin is optional.
+function getOuterRect(el, origin) {
var offset = el.offset();
+ var left = offset.left - (origin ? origin.left : 0);
+ var top = offset.top - (origin ? origin.top : 0);
return {
- left: offset.left,
- right: offset.left + el.outerWidth(),
- top: offset.top,
- bottom: offset.top + el.outerHeight()
+ left: left,
+ right: left + el.outerWidth(),
+ top: top,
+ bottom: top + el.outerHeight()
};
}
// Queries the area within the margin/border/scrollbars of a jQuery element. Does not go within the padding.
// Returns a rectangle with absolute coordinates: left, right (exclusive), top, bottom (exclusive).
+// Origin is optional.
// NOTE: should use clientLeft/clientTop, but very unreliable cross-browser.
-function getClientRect(el) {
+function getClientRect(el, origin) {
var offset = el.offset();
var scrollbarWidths = getScrollbarWidths(el);
- var left = offset.left + getCssFloat(el, 'border-left-width') + scrollbarWidths.left;
- var top = offset.top + getCssFloat(el, 'border-top-width') + scrollbarWidths.top;
+ var left = offset.left + getCssFloat(el, 'border-left-width') + scrollbarWidths.left - (origin ? origin.left : 0);
+ var top = offset.top + getCssFloat(el, 'border-top-width') + scrollbarWidths.top - (origin ? origin.top : 0);
return {
left: left,
@@ -341,10 +341,13 @@ function getClientRect(el) {
// Queries the area within the margin/border/padding of a jQuery element. Assumed not to have scrollbars.
// Returns a rectangle with absolute coordinates: left, right (exclusive), top, bottom (exclusive).
-function getContentRect(el) {
+// Origin is optional.
+function getContentRect(el, origin) {
var offset = el.offset(); // just outside of border, margin not included
- var left = offset.left + getCssFloat(el, 'border-left-width') + getCssFloat(el, 'padding-left');
- var top = offset.top + getCssFloat(el, 'border-top-width') + getCssFloat(el, 'padding-top');
+ var left = offset.left + getCssFloat(el, 'border-left-width') + getCssFloat(el, 'padding-left') -
+ (origin ? origin.left : 0);
+ var top = offset.top + getCssFloat(el, 'border-top-width') + getCssFloat(el, 'padding-top') -
+ (origin ? origin.top : 0);
return {
left: left,
@@ -414,13 +417,82 @@ function getCssFloat(el, prop) {
}
+/* Mouse / Touch Utilities
+----------------------------------------------------------------------------------------------------------------------*/
+
+FC.preventDefault = preventDefault;
+
+
// Returns a boolean whether this was a left mouse click and no ctrl key (which means right click on Mac)
function isPrimaryMouseButton(ev) {
return ev.which == 1 && !ev.ctrlKey;
}
-/* Geometry
+function getEvX(ev) {
+ if (ev.pageX !== undefined) {
+ return ev.pageX;
+ }
+ var touches = ev.originalEvent.touches;
+ if (touches) {
+ return touches[0].pageX;
+ }
+}
+
+
+function getEvY(ev) {
+ if (ev.pageY !== undefined) {
+ return ev.pageY;
+ }
+ var touches = ev.originalEvent.touches;
+ if (touches) {
+ return touches[0].pageY;
+ }
+}
+
+
+function getEvIsTouch(ev) {
+ return /^touch/.test(ev.type);
+}
+
+
+function preventSelection(el) {
+ el.addClass('fc-unselectable')
+ .on('selectstart', preventDefault);
+}
+
+
+// Stops a mouse/touch event from doing it's native browser action
+function preventDefault(ev) {
+ ev.preventDefault();
+}
+
+
+// attach a handler to get called when ANY scroll action happens on the page.
+// this was impossible to do with normal on/off because 'scroll' doesn't bubble.
+// http://stackoverflow.com/a/32954565/96342
+// returns `true` on success.
+function bindAnyScroll(handler) {
+ if (window.addEventListener) {
+ window.addEventListener('scroll', handler, true); // useCapture=true
+ return true;
+ }
+ return false;
+}
+
+
+// undoes bindAnyScroll. must pass in the original function.
+// returns `true` on success.
+function unbindAnyScroll(handler) {
+ if (window.removeEventListener) {
+ window.removeEventListener('scroll', handler, true); // useCapture=true
+ return true;
+ }
+ return false;
+}
+
+
+/* General Geometry Utils
----------------------------------------------------------------------------------------------------------------------*/
FC.intersectRects = intersectRects;
@@ -946,22 +1018,21 @@ function proxy(obj, methodName) {
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
-// N milliseconds.
+// N milliseconds. If `immediate` is passed, trigger the function on the
+// leading edge, instead of the trailing.
// https://github.com/jashkenas/underscore/blob/1.6.0/underscore.js#L714
-function debounce(func, wait) {
- var timeoutId;
- var args;
- var context;
- var timestamp; // of most recent call
+function debounce(func, wait, immediate) {
+ var timeout, args, context, timestamp, result;
+
var later = function() {
var last = +new Date() - timestamp;
- if (last < wait && last > 0) {
- timeoutId = setTimeout(later, wait - last);
+ if (last < wait) {
+ timeout = setTimeout(later, wait - last);
}
else {
- timeoutId = null;
- func.apply(context, args);
- if (!timeoutId) {
+ timeout = null;
+ if (!immediate) {
+ result = func.apply(context, args);
context = args = null;
}
}
@@ -971,9 +1042,15 @@ function debounce(func, wait) {
context = this;
args = arguments;
timestamp = +new Date();
- if (!timeoutId) {
- timeoutId = setTimeout(later, wait);
+ var callNow = immediate && !timeout;
+ if (!timeout) {
+ timeout = setTimeout(later, wait);
+ }
+ if (callNow) {
+ result = func.apply(context, args);
+ context = args = null;
}
+ return result;
};
}
@@ -1777,61 +1854,162 @@ function extendClass(superClass, members) {
function mixIntoClass(theClass, members) {
- copyOwnProps(members.prototype || members, theClass.prototype); // TODO: copyNativeMethods?
+ copyOwnProps(members, theClass.prototype); // TODO: copyNativeMethods?
}
;;
-var Emitter = FC.Emitter = Class.extend({
+var EmitterMixin = FC.EmitterMixin = {
+
+ // jQuery-ification via $(this) allows a non-DOM object to have
+ // the same event handling capabilities (including namespaces).
+
+
+ on: function(types, handler) {
- callbackHash: null,
+ // handlers are always called with an "event" object as their first param.
+ // sneak the `this` context and arguments into the extra parameter object
+ // and forward them on to the original handler.
+ var intercept = function(ev, extra) {
+ return handler.apply(
+ extra.context || this,
+ extra.args || []
+ );
+ };
+
+ // mimick jQuery's internal "proxy" system (risky, I know)
+ // causing all functions with the same .guid to appear to be the same.
+ // https://github.com/jquery/jquery/blob/2.2.4/src/core.js#L448
+ // this is needed for calling .off with the original non-intercept handler.
+ if (!handler.guid) {
+ handler.guid = $.guid++;
+ }
+ intercept.guid = handler.guid;
+ $(this).on(types, intercept);
- on: function(name, callback) {
- this.getCallbacks(name).add(callback);
return this; // for chaining
},
- off: function(name, callback) {
- this.getCallbacks(name).remove(callback);
+ off: function(types, handler) {
+ $(this).off(types, handler);
+
return this; // for chaining
},
- trigger: function(name) { // args...
- var args = Array.prototype.slice.call(arguments, 1);
+ trigger: function(types) {
+ var args = Array.prototype.slice.call(arguments, 1); // arguments after the first
- this.triggerWith(name, this, args);
+ // pass in "extra" info to the intercept
+ $(this).triggerHandler(types, { args: args });
return this; // for chaining
},
- triggerWith: function(name, context, args) {
- var callbacks = this.getCallbacks(name);
+ triggerWith: function(types, context, args) {
- callbacks.fireWith(context, args);
+ // `triggerHandler` is less reliant on the DOM compared to `trigger`.
+ // pass in "extra" info to the intercept.
+ $(this).triggerHandler(types, { context: context, args: args });
return this; // for chaining
- },
+ }
+};
- getCallbacks: function(name) {
- var callbacks;
+;;
- if (!this.callbackHash) {
- this.callbackHash = {};
- }
+/*
+Utility methods for easily listening to events on another object,
+and more importantly, easily unlistening from them.
+*/
+var ListenerMixin = FC.ListenerMixin = (function() {
+ var guid = 0;
+ var ListenerMixin = {
+
+ listenerId: null,
+
+ /*
+ Given an `other` object that has on/off methods, bind the given `callback` to an event by the given name.
+ The `callback` will be called with the `this` context of the object that .listenTo is being called on.
+ Can be called:
+ .listenTo(other, eventName, callback)
+ OR
+ .listenTo(other, {
+ eventName1: callback1,
+ eventName2: callback2
+ })
+ */
+ listenTo: function(other, arg, callback) {
+ if (typeof arg === 'object') { // given dictionary of callbacks
+ for (var eventName in arg) {
+ if (arg.hasOwnProperty(eventName)) {
+ this.listenTo(other, eventName, arg[eventName]);
+ }
+ }
+ }
+ else if (typeof arg === 'string') {
+ other.on(
+ arg + '.' + this.getListenerNamespace(), // use event namespacing to identify this object
+ $.proxy(callback, this) // always use `this` context
+ // the usually-undesired jQuery guid behavior doesn't matter,
+ // because we always unbind via namespace
+ );
+ }
+ },
+
+ /*
+ Causes the current object to stop listening to events on the `other` object.
+ `eventName` is optional. If omitted, will stop listening to ALL events on `other`.
+ */
+ stopListeningTo: function(other, eventName) {
+ other.off((eventName || '') + '.' + this.getListenerNamespace());
+ },
- callbacks = this.callbackHash[name];
- if (!callbacks) {
- callbacks = this.callbackHash[name] = $.Callbacks();
+ /*
+ Returns a string, unique to this object, to be used for event namespacing
+ */
+ getListenerNamespace: function() {
+ if (this.listenerId == null) {
+ this.listenerId = guid++;
+ }
+ return '_listener' + this.listenerId;
}
- return callbacks;
+ };
+ return ListenerMixin;
+})();
+;;
+
+// simple class for toggle a `isIgnoringMouse` flag on delay
+// initMouseIgnoring must first be called, with a millisecond delay setting.
+var MouseIgnorerMixin = {
+
+ isIgnoringMouse: false, // bool
+ delayUnignoreMouse: null, // method
+
+
+ initMouseIgnoring: function(delay) {
+ this.delayUnignoreMouse = debounce(proxy(this, 'unignoreMouse'), delay || 1000);
+ },
+
+
+ // temporarily ignore mouse actions on segments
+ tempIgnoreMouse: function() {
+ this.isIgnoringMouse = true;
+ this.delayUnignoreMouse();
+ },
+
+
+ // delayUnignoreMouse eventually calls this
+ unignoreMouse: function() {
+ this.isIgnoringMouse = false;
}
-});
+};
+
;;
/* A rectangular panel that is absolutely positioned over other content
@@ -1848,12 +2026,11 @@ Options:
- hide (callback)
*/
-var Popover = Class.extend({
+var Popover = Class.extend(ListenerMixin, {
isHidden: true,
options: null,
el: null, // the container element for the popover. generated by this object
- documentMousedownProxy: null, // document mousedown handler bound to `this`
margin: 10, // the space required between the popover and the edges of the scroll container
@@ -1907,7 +2084,7 @@ var Popover = Class.extend({
});
if (options.autoHide) {
- $(document).on('mousedown', this.documentMousedownProxy = proxy(this, 'documentMousedown'));
+ this.listenTo($(document), 'mousedown', this.documentMousedown);
}
},
@@ -1930,7 +2107,7 @@ var Popover = Class.extend({
this.el = null;
}
- $(document).off('mousedown', this.documentMousedownProxy);
+ this.stopListeningTo($(document), 'mousedown');
},
@@ -2243,257 +2420,421 @@ var CoordCache = FC.CoordCache = Class.extend({
----------------------------------------------------------------------------------------------------------------------*/
// TODO: use Emitter
-var DragListener = FC.DragListener = Class.extend({
+var DragListener = FC.DragListener = Class.extend(ListenerMixin, MouseIgnorerMixin, {
options: null,
- isListening: false,
- isDragging: false,
+ // for IE8 bug-fighting behavior
+ subjectEl: null,
+ subjectHref: null,
// coordinates of the initial mousedown
originX: null,
originY: null,
- // handler attached to the document, bound to the DragListener's `this`
- mousemoveProxy: null,
- mouseupProxy: null,
+ // the wrapping element that scrolls, or MIGHT scroll if there's overflow.
+ // TODO: do this for wrappers that have overflow:hidden as well.
+ scrollEl: null,
- // for IE8 bug-fighting behavior, for now
- subjectEl: null, // the element being draged. optional
- subjectHref: null,
+ isInteracting: false,
+ isDistanceSurpassed: false,
+ isDelayEnded: false,
+ isDragging: false,
+ isTouch: false,
- scrollEl: null,
- scrollBounds: null, // { top, bottom, left, right }
- scrollTopVel: null, // pixels per second
- scrollLeftVel: null, // pixels per second
- scrollIntervalId: null, // ID of setTimeout for scrolling animation loop
- scrollHandlerProxy: null, // this-scoped function for handling when scrollEl is scrolled
+ delay: null,
+ delayTimeoutId: null,
+ minDistance: null,
- scrollSensitivity: 30, // pixels from edge for scrolling to start
- scrollSpeed: 200, // pixels per second, at maximum speed
- scrollIntervalMs: 50, // millisecond wait between scroll increment
+ handleTouchScrollProxy: null, // calls handleTouchScroll, always bound to `this`
constructor: function(options) {
- options = options || {};
- this.options = options;
- this.subjectEl = options.subjectEl;
+ this.options = options || {};
+ this.handleTouchScrollProxy = proxy(this, 'handleTouchScroll');
+ this.initMouseIgnoring(500);
},
- // Call this when the user does a mousedown. Will probably lead to startListening
- mousedown: function(ev) {
- if (isPrimaryMouseButton(ev)) {
+ // Interaction (high-level)
+ // -----------------------------------------------------------------------------------------------------------------
+
+
+ startInteraction: function(ev, extraOptions) {
+ var isTouch = getEvIsTouch(ev);
+
+ if (ev.type === 'mousedown') {
+ if (this.isIgnoringMouse) {
+ return;
+ }
+ else if (!isPrimaryMouseButton(ev)) {
+ return;
+ }
+ else {
+ ev.preventDefault(); // prevents native selection in most browsers
+ }
+ }
+
+ if (!this.isInteracting) {
+
+ // process options
+ extraOptions = extraOptions || {};
+ this.delay = firstDefined(extraOptions.delay, this.options.delay, 0);
+ this.minDistance = firstDefined(extraOptions.distance, this.options.distance, 0);
+ this.subjectEl = this.options.subjectEl;
+
+ this.isInteracting = true;
+ this.isTouch = isTouch;
+ this.isDelayEnded = false;
+ this.isDistanceSurpassed = false;
- ev.preventDefault(); // prevents native selection in most browsers
+ this.originX = getEvX(ev);
+ this.originY = getEvY(ev);
+ this.scrollEl = getScrollParent($(ev.target));
- this.startListening(ev);
+ this.bindHandlers();
+ this.initAutoScroll();
+ this.handleInteractionStart(ev);
+ this.startDelay(ev);
- // start the drag immediately if there is no minimum distance for a drag start
- if (!this.options.distance) {
- this.startDrag(ev);
+ if (!this.minDistance) {
+ this.handleDistanceSurpassed(ev);
}
}
},
- // Call this to start tracking mouse movements
- startListening: function(ev) {
- var scrollParent;
+ handleInteractionStart: function(ev) {
+ this.trigger('interactionStart', ev);
+ },
- if (!this.isListening) {
- // grab scroll container and attach handler
- if (ev && this.options.scroll) {
- scrollParent = getScrollParent($(ev.target));
- if (!scrollParent.is(window) && !scrollParent.is(document)) {
- this.scrollEl = scrollParent;
+ endInteraction: function(ev, isCancelled) {
+ if (this.isInteracting) {
+ this.endDrag(ev);
- // scope to `this`, and use `debounce` to make sure rapid calls don't happen
- this.scrollHandlerProxy = debounce(proxy(this, 'scrollHandler'), 100);
- this.scrollEl.on('scroll', this.scrollHandlerProxy);
- }
+ if (this.delayTimeoutId) {
+ clearTimeout(this.delayTimeoutId);
+ this.delayTimeoutId = null;
}
- $(document)
- .on('mousemove', this.mousemoveProxy = proxy(this, 'mousemove'))
- .on('mouseup', this.mouseupProxy = proxy(this, 'mouseup'))
- .on('selectstart', this.preventDefault); // prevents native selection in IE<=8
+ this.destroyAutoScroll();
+ this.unbindHandlers();
+
+ this.isInteracting = false;
+ this.handleInteractionEnd(ev, isCancelled);
- if (ev) {
- this.originX = ev.pageX;
- this.originY = ev.pageY;
+ // a touchstart+touchend on the same element will result in the following addition simulated events:
+ // mouseover + mouseout + click
+ // let's ignore these bogus events
+ if (this.isTouch) {
+ this.tempIgnoreMouse();
}
- else {
- // if no starting information was given, origin will be the topleft corner of the screen.
- // if so, dx/dy in the future will be the absolute coordinates.
- this.originX = 0;
- this.originY = 0;
+ }
+ },
+
+
+ handleInteractionEnd: function(ev, isCancelled) {
+ this.trigger('interactionEnd', ev, isCancelled || false);
+ },
+
+
+ // Binding To DOM
+ // -----------------------------------------------------------------------------------------------------------------
+
+
+ bindHandlers: function() {
+ var _this = this;
+ var touchStartIgnores = 1;
+
+ if (this.isTouch) {
+ this.listenTo($(document), {
+ touchmove: this.handleTouchMove,
+ touchend: this.endInteraction,
+ touchcancel: this.endInteraction,
+
+ // Sometimes touchend doesn't fire
+ // (can't figure out why. touchcancel doesn't fire either. has to do with scrolling?)
+ // If another touchstart happens, we know it's bogus, so cancel the drag.
+ // touchend will continue to be broken until user does a shorttap/scroll, but this is best we can do.
+ touchstart: function(ev) {
+ if (touchStartIgnores) { // bindHandlers is called from within a touchstart,
+ touchStartIgnores--; // and we don't want this to fire immediately, so ignore.
+ }
+ else {
+ _this.endInteraction(ev, true); // isCancelled=true
+ }
+ }
+ });
+
+ // listen to ALL scroll actions on the page
+ if (
+ !bindAnyScroll(this.handleTouchScrollProxy) && // hopefully this works and short-circuits the rest
+ this.scrollEl // otherwise, attach a single handler to this
+ ) {
+ this.listenTo(this.scrollEl, 'scroll', this.handleTouchScroll);
}
+ }
+ else {
+ this.listenTo($(document), {
+ mousemove: this.handleMouseMove,
+ mouseup: this.endInteraction
+ });
+ }
- this.isListening = true;
- this.listenStart(ev);
+ this.listenTo($(document), {
+ selectstart: preventDefault, // don't allow selection while dragging
+ contextmenu: preventDefault // long taps would open menu on Chrome dev tools
+ });
+ },
+
+
+ unbindHandlers: function() {
+ this.stopListeningTo($(document));
+
+ // unbind scroll listening
+ unbindAnyScroll(this.handleTouchScrollProxy);
+ if (this.scrollEl) {
+ this.stopListeningTo(this.scrollEl, 'scroll');
+ }
+ },
+
+
+ // Drag (high-level)
+ // -----------------------------------------------------------------------------------------------------------------
+
+
+ // extraOptions ignored if drag already started
+ startDrag: function(ev, extraOptions) {
+ this.startInteraction(ev, extraOptions); // ensure interaction began
+
+ if (!this.isDragging) {
+ this.isDragging = true;
+ this.handleDragStart(ev);
}
},
- // Called when drag listening has started (but a real drag has not necessarily began)
- listenStart: function(ev) {
- this.trigger('listenStart', ev);
+ handleDragStart: function(ev) {
+ this.trigger('dragStart', ev);
+ this.initHrefHack();
},
- // Called when the user moves the mouse
- mousemove: function(ev) {
- var dx = ev.pageX - this.originX;
- var dy = ev.pageY - this.originY;
- var minDistance;
+ handleMove: function(ev) {
+ var dx = getEvX(ev) - this.originX;
+ var dy = getEvY(ev) - this.originY;
+ var minDistance = this.minDistance;
var distanceSq; // current distance from the origin, squared
- if (!this.isDragging) { // if not already dragging...
- // then start the drag if the minimum distance criteria is met
- minDistance = this.options.distance || 1;
+ if (!this.isDistanceSurpassed) {
distanceSq = dx * dx + dy * dy;
if (distanceSq >= minDistance * minDistance) { // use pythagorean theorem
- this.startDrag(ev);
+ this.handleDistanceSurpassed(ev);
}
}
if (this.isDragging) {
- this.drag(dx, dy, ev); // report a drag, even if this mousemove initiated the drag
+ this.handleDrag(dx, dy, ev);
}
},
- // Call this to initiate a legitimate drag.
- // This function is called internally from this class, but can also be called explicitly from outside
- startDrag: function(ev) {
+ // Called while the mouse is being moved and when we know a legitimate drag is taking place
+ handleDrag: function(dx, dy, ev) {
+ this.trigger('drag', dx, dy, ev);
+ this.updateAutoScroll(ev); // will possibly cause scrolling
+ },
- if (!this.isListening) { // startDrag must have manually initiated
- this.startListening();
- }
- if (!this.isDragging) {
- this.isDragging = true;
- this.dragStart(ev);
+ endDrag: function(ev) {
+ if (this.isDragging) {
+ this.isDragging = false;
+ this.handleDragEnd(ev);
}
},
- // Called when the actual drag has started (went beyond minDistance)
- dragStart: function(ev) {
- var subjectEl = this.subjectEl;
+ handleDragEnd: function(ev) {
+ this.trigger('dragEnd', ev);
+ this.destroyHrefHack();
+ },
- this.trigger('dragStart', ev);
- // remove a mousedown'd <a>'s href so it is not visited (IE8 bug)
- if ((this.subjectHref = subjectEl ? subjectEl.attr('href') : null)) {
- subjectEl.removeAttr('href');
+ // Delay
+ // -----------------------------------------------------------------------------------------------------------------
+
+
+ startDelay: function(initialEv) {
+ var _this = this;
+
+ if (this.delay) {
+ this.delayTimeoutId = setTimeout(function() {
+ _this.handleDelayEnd(initialEv);
+ }, this.delay);
+ }
+ else {
+ this.handleDelayEnd(initialEv);
}
},
- // Called while the mouse is being moved and when we know a legitimate drag is taking place
- drag: function(dx, dy, ev) {
- this.trigger('drag', dx, dy, ev);
- this.updateScroll(ev); // will possibly cause scrolling
+ handleDelayEnd: function(initialEv) {
+ this.isDelayEnded = true;
+
+ if (this.isDistanceSurpassed) {
+ this.startDrag(initialEv);
+ }
},
- // Called when the user does a mouseup
- mouseup: function(ev) {
- this.stopListening(ev);
+ // Distance
+ // -----------------------------------------------------------------------------------------------------------------
+
+
+ handleDistanceSurpassed: function(ev) {
+ this.isDistanceSurpassed = true;
+
+ if (this.isDelayEnded) {
+ this.startDrag(ev);
+ }
},
- // Called when the drag is over. Will not cause listening to stop however.
- // A concluding 'cellOut' event will NOT be triggered.
- stopDrag: function(ev) {
+ // Mouse / Touch
+ // -----------------------------------------------------------------------------------------------------------------
+
+
+ handleTouchMove: function(ev) {
+ // prevent inertia and touchmove-scrolling while dragging
if (this.isDragging) {
- this.stopScrolling();
- this.dragStop(ev);
- this.isDragging = false;
+ ev.preventDefault();
}
+
+ this.handleMove(ev);
},
- // Called when dragging has been stopped
- dragStop: function(ev) {
- var _this = this;
+ handleMouseMove: function(ev) {
+ this.handleMove(ev);
+ },
- this.trigger('dragStop', ev);
- // restore a mousedown'd <a>'s href (for IE8 bug)
- setTimeout(function() { // must be outside of the click's execution
- if (_this.subjectHref) {
- _this.subjectEl.attr('href', _this.subjectHref);
- }
- }, 0);
- },
+ // Scrolling (unrelated to auto-scroll)
+ // -----------------------------------------------------------------------------------------------------------------
- // Call this to stop listening to the user's mouse events
- stopListening: function(ev) {
- this.stopDrag(ev); // if there's a current drag, kill it
+ handleTouchScroll: function(ev) {
+ // if the drag is being initiated by touch, but a scroll happens before
+ // the drag-initiating delay is over, cancel the drag
+ if (!this.isDragging) {
+ this.endInteraction(ev, true); // isCancelled=true
+ }
+ },
- if (this.isListening) {
- // remove the scroll handler if there is a scrollEl
- if (this.scrollEl) {
- this.scrollEl.off('scroll', this.scrollHandlerProxy);
- this.scrollHandlerProxy = null;
- }
+ // <A> HREF Hack
+ // -----------------------------------------------------------------------------------------------------------------
- $(document)
- .off('mousemove', this.mousemoveProxy)
- .off('mouseup', this.mouseupProxy)
- .off('selectstart', this.preventDefault);
- this.mousemoveProxy = null;
- this.mouseupProxy = null;
+ initHrefHack: function() {
+ var subjectEl = this.subjectEl;
- this.isListening = false;
- this.listenStop(ev);
+ // remove a mousedown'd <a>'s href so it is not visited (IE8 bug)
+ if ((this.subjectHref = subjectEl ? subjectEl.attr('href') : null)) {
+ subjectEl.removeAttr('href');
}
},
- // Called when drag listening has stopped
- listenStop: function(ev) {
- this.trigger('listenStop', ev);
+ destroyHrefHack: function() {
+ var subjectEl = this.subjectEl;
+ var subjectHref = this.subjectHref;
+
+ // restore a mousedown'd <a>'s href (for IE8 bug)
+ setTimeout(function() { // must be outside of the click's execution
+ if (subjectHref) {
+ subjectEl.attr('href', subjectHref);
+ }
+ }, 0);
},
+ // Utils
+ // -----------------------------------------------------------------------------------------------------------------
+
+
// Triggers a callback. Calls a function in the option hash of the same name.
// Arguments beyond the first `name` are forwarded on.
trigger: function(name) {
if (this.options[name]) {
this.options[name].apply(this, Array.prototype.slice.call(arguments, 1));
}
- },
+ // makes _methods callable by event name. TODO: kill this
+ if (this['_' + name]) {
+ this['_' + name].apply(this, Array.prototype.slice.call(arguments, 1));
+ }
+ }
+
+
+});
+
+;;
+/*
+this.scrollEl is set in DragListener
+*/
+DragListener.mixin({
+ isAutoScroll: false,
- // Stops a given mouse event from doing it's native browser action. In our case, text selection.
- preventDefault: function(ev) {
- ev.preventDefault();
+ scrollBounds: null, // { top, bottom, left, right }
+ scrollTopVel: null, // pixels per second
+ scrollLeftVel: null, // pixels per second
+ scrollIntervalId: null, // ID of setTimeout for scrolling animation loop
+
+ // defaults
+ scrollSensitivity: 30, // pixels from edge for scrolling to start
+ scrollSpeed: 200, // pixels per second, at maximum speed
+ scrollIntervalMs: 50, // millisecond wait between scroll increment
+
+
+ initAutoScroll: function() {
+ var scrollEl = this.scrollEl;
+
+ this.isAutoScroll =
+ this.options.scroll &&
+ scrollEl &&
+ !scrollEl.is(window) &&
+ !scrollEl.is(document);
+
+ if (this.isAutoScroll) {
+ // debounce makes sure rapid calls don't happen
+ this.listenTo(scrollEl, 'scroll', debounce(this.handleDebouncedScroll, 100));
+ }
},
- /* Scrolling
- ------------------------------------------------------------------------------------------------------------------*/
+ destroyAutoScroll: function() {
+ this.endAutoScroll(); // kill any animation loop
+
+ // remove the scroll handler if there is a scrollEl
+ if (this.isAutoScroll) {
+ this.stopListeningTo(this.scrollEl, 'scroll'); // will probably get removed by unbindHandlers too :(
+ }
+ },
// Computes and stores the bounding rectangle of scrollEl
computeScrollBounds: function() {
- var el = this.scrollEl;
-
- this.scrollBounds = el ? getOuterRect(el) : null;
+ if (this.isAutoScroll) {
+ this.scrollBounds = getOuterRect(this.scrollEl);
// TODO: use getClientRect in future. but prevents auto scrolling when on top of scrollbars
+ }
},
// Called when the dragging is in progress and scrolling should be updated
- updateScroll: function(ev) {
+ updateAutoScroll: function(ev) {
var sensitivity = this.scrollSensitivity;
var bounds = this.scrollBounds;
var topCloseness, bottomCloseness;
@@ -2504,10 +2845,10 @@ var DragListener = FC.DragListener = Class.extend({
if (bounds) { // only scroll if scrollEl exists
// compute closeness to edges. valid range is from 0.0 - 1.0
- topCloseness = (sensitivity - (ev.pageY - bounds.top)) / sensitivity;
- bottomCloseness = (sensitivity - (bounds.bottom - ev.pageY)) / sensitivity;
- leftCloseness = (sensitivity - (ev.pageX - bounds.left)) / sensitivity;
- rightCloseness = (sensitivity - (bounds.right - ev.pageX)) / sensitivity;
+ topCloseness = (sensitivity - (getEvY(ev) - bounds.top)) / sensitivity;
+ bottomCloseness = (sensitivity - (bounds.bottom - getEvY(ev))) / sensitivity;
+ leftCloseness = (sensitivity - (getEvX(ev) - bounds.left)) / sensitivity;
+ rightCloseness = (sensitivity - (bounds.right - getEvX(ev))) / sensitivity;
// translate vertical closeness into velocity.
// mouse must be completely in bounds for velocity to happen.
@@ -2594,38 +2935,36 @@ var DragListener = FC.DragListener = Class.extend({
// if scrolled all the way, which causes the vels to be zero, stop the animation loop
if (!this.scrollTopVel && !this.scrollLeftVel) {
- this.stopScrolling();
+ this.endAutoScroll();
}
},
// Kills any existing scrolling animation loop
- stopScrolling: function() {
+ endAutoScroll: function() {
if (this.scrollIntervalId) {
clearInterval(this.scrollIntervalId);
this.scrollIntervalId = null;
- // when all done with scrolling, recompute positions since they probably changed
- this.scrollStop();
+ this.handleScrollEnd();
}
},
// Get called when the scrollEl is scrolled (NOTE: this is delayed via debounce)
- scrollHandler: function() {
+ handleDebouncedScroll: function() {
// recompute all coordinates, but *only* if this is *not* part of our scrolling animation
if (!this.scrollIntervalId) {
- this.scrollStop();
+ this.handleScrollEnd();
}
},
// Called when scrolling has stopped, whether through auto scroll, or the user scrolling
- scrollStop: function() {
+ handleScrollEnd: function() {
}
});
-
;;
/* Tracks mouse movements over a component and raises events about which hit the mouse is over.
@@ -2654,18 +2993,16 @@ var HitDragListener = DragListener.extend({
// Called when drag listening starts (but a real drag has not necessarily began).
// ev might be undefined if dragging was started manually.
- listenStart: function(ev) {
+ handleInteractionStart: function(ev) {
var subjectEl = this.subjectEl;
var subjectRect;
var origPoint;
var point;
- DragListener.prototype.listenStart.apply(this, arguments); // call the super-method
-
this.computeCoords();
if (ev) {
- origPoint = { left: ev.pageX, top: ev.pageY };
+ origPoint = { left: getEvX(ev), top: getEvY(ev) };
point = origPoint;
// constrain the point to bounds of the element being dragged
@@ -2695,61 +3032,64 @@ var HitDragListener = DragListener.extend({
this.origHit = null;
this.coordAdjust = null;
}
+
+ // call the super-method. do it after origHit has been computed
+ DragListener.prototype.handleInteractionStart.apply(this, arguments);
},
// Recomputes the drag-critical positions of elements
computeCoords: function() {
this.component.prepareHits();
- this.computeScrollBounds(); // why is this here???
+ this.computeScrollBounds(); // why is this here??????
},
// Called when the actual drag has started
- dragStart: function(ev) {
+ handleDragStart: function(ev) {
var hit;
- DragListener.prototype.dragStart.apply(this, arguments); // call the super-method
+ DragListener.prototype.handleDragStart.apply(this, arguments); // call the super-method
// might be different from this.origHit if the min-distance is large
- hit = this.queryHit(ev.pageX, ev.pageY);
+ hit = this.queryHit(getEvX(ev), getEvY(ev));
// report the initial hit the mouse is over
// especially important if no min-distance and drag starts immediately
if (hit) {
- this.hitOver(hit);
+ this.handleHitOver(hit);
}
},
// Called when the drag moves
- drag: function(dx, dy, ev) {
+ handleDrag: function(dx, dy, ev) {
var hit;
- DragListener.prototype.drag.apply(this, arguments); // call the super-method
+ DragListener.prototype.handleDrag.apply(this, arguments); // call the super-method
- hit = this.queryHit(ev.pageX, ev.pageY);
+ hit = this.queryHit(getEvX(ev), getEvY(ev));
if (!isHitsEqual(hit, this.hit)) { // a different hit than before?
if (this.hit) {
- this.hitOut();
+ this.handleHitOut();
}
if (hit) {
- this.hitOver(hit);
+ this.handleHitOver(hit);
}
}
},
// Called when dragging has been stopped
- dragStop: function() {
- this.hitDone();
- DragListener.prototype.dragStop.apply(this, arguments); // call the super-method
+ handleDragEnd: function() {
+ this.handleHitDone();
+ DragListener.prototype.handleDragEnd.apply(this, arguments); // call the super-method
},
// Called when a the mouse has just moved over a new hit
- hitOver: function(hit) {
+ handleHitOver: function(hit) {
var isOrig = isHitsEqual(hit, this.origHit);
this.hit = hit;
@@ -2759,26 +3099,26 @@ var HitDragListener = DragListener.extend({
// Called when the mouse has just moved out of a hit
- hitOut: function() {
+ handleHitOut: function() {
if (this.hit) {
this.trigger('hitOut', this.hit);
- this.hitDone();
+ this.handleHitDone();
this.hit = null;
}
},
// Called after a hitOut. Also called before a dragStop
- hitDone: function() {
+ handleHitDone: function() {
if (this.hit) {
this.trigger('hitDone', this.hit);
}
},
- // Called when drag listening has stopped
- listenStop: function() {
- DragListener.prototype.listenStop.apply(this, arguments); // call the super-method
+ // Called when the interaction ends, whether there was a real drag or not
+ handleInteractionEnd: function() {
+ DragListener.prototype.handleInteractionEnd.apply(this, arguments); // call the super-method
this.origHit = null;
this.hit = null;
@@ -2788,8 +3128,8 @@ var HitDragListener = DragListener.extend({
// Called when scrolling has stopped, whether through auto scroll, or the user scrolling
- scrollStop: function() {
- DragListener.prototype.scrollStop.apply(this, arguments); // call the super-method
+ handleScrollEnd: function() {
+ DragListener.prototype.handleScrollEnd.apply(this, arguments); // call the super-method
this.computeCoords(); // hits' absolute positions will be in new places. recompute
},
@@ -2844,7 +3184,7 @@ function isHitPropsWithin(subHit, superHit) {
/* Creates a clone of an element and lets it track the mouse as it moves
----------------------------------------------------------------------------------------------------------------------*/
-var MouseFollower = Class.extend({
+var MouseFollower = Class.extend(ListenerMixin, {
options: null,
@@ -2856,16 +3196,14 @@ var MouseFollower = Class.extend({
top0: null,
left0: null,
- // the initial position of the mouse
- mouseY0: null,
- mouseX0: null,
+ // the absolute coordinates of the initiating touch/mouse action
+ y0: null,
+ x0: null,
// the number of pixels the mouse has moved from its initial position
topDelta: null,
leftDelta: null,
- mousemoveProxy: null, // document mousemove handler, bound to the MouseFollower's `this`
-
isFollowing: false,
isHidden: false,
isAnimating: false, // doing the revert animation?
@@ -2882,8 +3220,8 @@ var MouseFollower = Class.extend({
if (!this.isFollowing) {
this.isFollowing = true;
- this.mouseY0 = ev.pageY;
- this.mouseX0 = ev.pageX;
+ this.y0 = getEvY(ev);
+ this.x0 = getEvX(ev);
this.topDelta = 0;
this.leftDelta = 0;
@@ -2891,7 +3229,12 @@ var MouseFollower = Class.extend({
this.updatePosition();
}
- $(document).on('mousemove', this.mousemoveProxy = proxy(this, 'mousemove'));
+ if (getEvIsTouch(ev)) {
+ this.listenTo($(document), 'touchmove', this.handleMove);
+ }
+ else {
+ this.listenTo($(document), 'mousemove', this.handleMove);
+ }
}
},
@@ -2916,7 +3259,7 @@ var MouseFollower = Class.extend({
if (this.isFollowing && !this.isAnimating) { // disallow more than one stop animation at a time
this.isFollowing = false;
- $(document).off('mousemove', this.mousemoveProxy);
+ this.stopListeningTo($(document));
if (shouldRevert && revertDuration && !this.isHidden) { // do a revert animation?
this.isAnimating = true;
@@ -2942,6 +3285,7 @@ var MouseFollower = Class.extend({
if (!el) {
this.sourceEl.width(); // hack to force IE8 to compute correct bounding box
el = this.el = this.sourceEl.clone()
+ .addClass(this.options.additionalClass || '')
.css({
position: 'absolute',
visibility: '', // in case original element was hidden (commonly through hideEvents())
@@ -2953,8 +3297,13 @@ var MouseFollower = Class.extend({
height: this.sourceEl.height(), // explicit width in case there was a 'bottom' value
opacity: this.options.opacity || '',
zIndex: this.options.zIndex
- })
- .appendTo(this.parentEl);
+ });
+
+ // we don't want long taps or any mouse interaction causing selection/menus.
+ // would use preventSelection(), but that prevents selectstart, causing problems.
+ el.addClass('fc-unselectable');
+
+ el.appendTo(this.parentEl);
}
return el;
@@ -2994,9 +3343,9 @@ var MouseFollower = Class.extend({
// Gets called when the user moves the mouse
- mousemove: function(ev) {
- this.topDelta = ev.pageY - this.mouseY0;
- this.leftDelta = ev.pageX - this.mouseX0;
+ handleMove: function(ev) {
+ this.topDelta = getEvY(ev) - this.y0;
+ this.leftDelta = getEvX(ev) - this.x0;
if (!this.isHidden) {
this.updatePosition();
@@ -3031,7 +3380,7 @@ var MouseFollower = Class.extend({
/* An abstract class comprised of a "grid" of areas that each represent a specific datetime
----------------------------------------------------------------------------------------------------------------------*/
-var Grid = FC.Grid = Class.extend({
+var Grid = FC.Grid = Class.extend(ListenerMixin, MouseIgnorerMixin, {
view: null, // a View object
isRTL: null, // shortcut to the view's isRTL option
@@ -3042,8 +3391,6 @@ var Grid = FC.Grid = Class.extend({
el: null, // the containing element
elsByFill: null, // a hash of jQuery element sets used for rendering each fill. Keyed by fill name.
- externalDragStartProxy: null, // binds the Grid's scope to externalDragStart (in DayGrid.events)
-
// derived from options
eventTimeFormat: null,
displayEventTime: null,
@@ -3056,13 +3403,19 @@ var Grid = FC.Grid = Class.extend({
// TODO: port isTimeScale into same system?
largeUnit: null,
+ dayDragListener: null,
+ segDragListener: null,
+ segResizeListener: null,
+ externalDragListener: null,
+
constructor: function(view) {
this.view = view;
this.isRTL = view.opt('isRTL');
-
this.elsByFill = {};
- this.externalDragStartProxy = proxy(this, 'externalDragStart');
+
+ this.dayDragListener = this.buildDayDragListener();
+ this.initMouseIgnoring();
},
@@ -3195,26 +3548,33 @@ var Grid = FC.Grid = Class.extend({
// Sets the container element that the grid should render inside of.
// Does other DOM-related initializations.
setElement: function(el) {
- var _this = this;
-
this.el = el;
+ preventSelection(el);
+
+ this.bindDayHandler('touchstart', this.dayTouchStart);
+ this.bindDayHandler('mousedown', this.dayMousedown);
+
+ // attach event-element-related handlers. in Grid.events
+ // same garbage collection note as above.
+ this.bindSegHandlers();
+
+ this.bindGlobalHandlers();
+ },
+
+
+ bindDayHandler: function(name, handler) {
+ var _this = this;
// attach a handler to the grid's root element.
// jQuery will take care of unregistering them when removeElement gets called.
- el.on('mousedown', function(ev) {
+ this.el.on(name, function(ev) {
if (
!$(ev.target).is('.fc-event-container *, .fc-more') && // not an an event element, or "more.." link
!$(ev.target).closest('.fc-popover').length // not on a popover (like the "more.." events one)
) {
- _this.dayMousedown(ev);
+ return handler.call(_this, ev);
}
});
-
- // attach event-element-related handlers. in Grid.events
- // same garbage collection note as above.
- this.bindSegHandlers();
-
- this.bindGlobalHandlers();
},
@@ -3222,6 +3582,7 @@ var Grid = FC.Grid = Class.extend({
// DOES NOT remove any content beforehand (doesn't clear events or call unrenderDates), unlike View
removeElement: function() {
this.unbindGlobalHandlers();
+ this.clearDragListeners();
this.el.remove();
@@ -3254,18 +3615,47 @@ var Grid = FC.Grid = Class.extend({
// Binds DOM handlers to elements that reside outside the grid, such as the document
bindGlobalHandlers: function() {
- $(document).on('dragstart sortstart', this.externalDragStartProxy); // jqui
+ this.listenTo($(document), {
+ dragstart: this.externalDragStart, // jqui
+ sortstart: this.externalDragStart // jqui
+ });
},
// Unbinds DOM handlers from elements that reside outside the grid
unbindGlobalHandlers: function() {
- $(document).off('dragstart sortstart', this.externalDragStartProxy); // jqui
+ this.stopListeningTo($(document));
},
// Process a mousedown on an element that represents a day. For day clicking and selecting.
dayMousedown: function(ev) {
+ if (!this.isIgnoringMouse) {
+ this.dayDragListener.startInteraction(ev, {
+ //distance: 5, // needs more work if we want dayClick to fire correctly
+ });
+ }
+ },
+
+
+ dayTouchStart: function(ev) {
+ var view = this.view;
+
+ // HACK to prevent a user's clickaway for unselecting a range or an event
+ // from causing a dayClick.
+ if (view.isSelected || view.selectedEvent) {
+ this.tempIgnoreMouse();
+ }
+
+ this.dayDragListener.startInteraction(ev, {
+ delay: this.view.opt('longPressDelay')
+ });
+ },
+
+
+ // Creates a listener that tracks the user's drag across day elements.
+ // For day clicking and selecting.
+ buildDayDragListener: function() {
var _this = this;
var view = this.view;
var isSelectable = view.opt('selectable');
@@ -3276,14 +3666,21 @@ var Grid = FC.Grid = Class.extend({
// if the drag ends on the same day, it is a 'dayClick'.
// if 'selectable' is enabled, this listener also detects selections.
var dragListener = new HitDragListener(this, {
- //distance: 5, // needs more work if we want dayClick to fire correctly
scroll: view.opt('dragScroll'),
+ interactionStart: function() {
+ dayClickHit = dragListener.origHit; // for dayClick, where no dragging happens
+ },
dragStart: function() {
view.unselect(); // since we could be rendering a new selection, we want to clear any old one
},
hitOver: function(hit, isOrig, origHit) {
if (origHit) { // click needs to have started on a hit
- dayClickHit = isOrig ? hit : null; // single-hit selection is a day click
+
+ // if user dragged to another cell at any point, it can no longer be a dayClick
+ if (!isOrig) {
+ dayClickHit = null;
+ }
+
if (isSelectable) {
selectionSpan = _this.computeSelection(
_this.getHitSpan(origHit),
@@ -3304,23 +3701,46 @@ var Grid = FC.Grid = Class.extend({
_this.unrenderSelection();
enableCursor();
},
- listenStop: function(ev) {
- if (dayClickHit) {
- view.triggerDayClick(
- _this.getHitSpan(dayClickHit),
- _this.getHitEl(dayClickHit),
- ev
- );
- }
- if (selectionSpan) {
- // the selection will already have been rendered. just report it
- view.reportSelection(selectionSpan, ev);
+ interactionEnd: function(ev, isCancelled) {
+ if (!isCancelled) {
+ if (
+ dayClickHit &&
+ !_this.isIgnoringMouse // see hack in dayTouchStart
+ ) {
+ view.triggerDayClick(
+ _this.getHitSpan(dayClickHit),
+ _this.getHitEl(dayClickHit),
+ ev
+ );
+ }
+ if (selectionSpan) {
+ // the selection will already have been rendered. just report it
+ view.reportSelection(selectionSpan, ev);
+ }
+ enableCursor();
}
- enableCursor();
}
});
- dragListener.mousedown(ev); // start listening, which will eventually initiate a dragStart
+ return dragListener;
+ },
+
+
+ // Kills all in-progress dragging.
+ // Useful for when public API methods that result in re-rendering are invoked during a drag.
+ // Also useful for when touch devices misbehave and don't fire their touchend.
+ clearDragListeners: function() {
+ this.dayDragListener.endInteraction();
+
+ if (this.segDragListener) {
+ this.segDragListener.endInteraction(); // will clear this.segDragListener
+ }
+ if (this.segResizeListener) {
+ this.segResizeListener.endInteraction(); // will clear this.segResizeListener
+ }
+ if (this.externalDragListener) {
+ this.externalDragListener.endInteraction(); // will clear this.externalDragListener
+ }
},
@@ -3330,10 +3750,11 @@ var Grid = FC.Grid = Class.extend({
// Renders a mock event at the given event location, which contains zoned start/end properties.
+ // Returns all mock event elements.
renderEventLocationHelper: function(eventLocation, sourceSeg) {
var fakeEvent = this.fabricateHelperEvent(eventLocation, sourceSeg);
- this.renderHelper(fakeEvent, sourceSeg); // do the actual rendering
+ return this.renderHelper(fakeEvent, sourceSeg); // do the actual rendering
},
@@ -3361,6 +3782,7 @@ var Grid = FC.Grid = Class.extend({
// Renders a mock event. Given zoned event date properties.
+ // Must return all mock event elements.
renderHelper: function(eventLocation, sourceSeg) {
// subclasses must implement
},
@@ -3640,7 +4062,8 @@ Grid.mixin({
// Unrenders all events currently rendered on the grid
unrenderEvents: function() {
- this.triggerSegMouseout(); // trigger an eventMouseout if user's mouse is over an event
+ this.handleSegMouseout(); // trigger an eventMouseout if user's mouse is over an event
+ this.clearDragListeners();
this.unrenderFgSegs();
this.unrenderBgSegs();
@@ -3768,48 +4191,44 @@ Grid.mixin({
// Attaches event-element-related handlers to the container element and leverage bubbling
bindSegHandlers: function() {
+ this.bindSegHandler('touchstart', this.handleSegTouchStart);
+ this.bindSegHandler('touchend', this.handleSegTouchEnd);
+ this.bindSegHandler('mouseenter', this.handleSegMouseover);
+ this.bindSegHandler('mouseleave', this.handleSegMouseout);
+ this.bindSegHandler('mousedown', this.handleSegMousedown);
+ this.bindSegHandler('click', this.handleSegClick);
+ },
+
+
+ // Executes a handler for any a user-interaction on a segment.
+ // Handler gets called with (seg, ev), and with the `this` context of the Grid
+ bindSegHandler: function(name, handler) {
var _this = this;
- var view = this.view;
- $.each(
- {
- mouseenter: function(seg, ev) {
- _this.triggerSegMouseover(seg, ev);
- },
- mouseleave: function(seg, ev) {
- _this.triggerSegMouseout(seg, ev);
- },
- click: function(seg, ev) {
- return view.trigger('eventClick', this, seg.event, ev); // can return `false` to cancel
- },
- mousedown: function(seg, ev) {
- if ($(ev.target).is('.fc-resizer') && view.isEventResizable(seg.event)) {
- _this.segResizeMousedown(seg, ev, $(ev.target).is('.fc-start-resizer'));
- }
- else if (view.isEventDraggable(seg.event)) {
- _this.segDragMousedown(seg, ev);
- }
- }
- },
- function(name, func) {
- // attach the handler to the container element and only listen for real event elements via bubbling
- _this.el.on(name, '.fc-event-container > *', function(ev) {
- var seg = $(this).data('fc-seg'); // grab segment data. put there by View::renderEvents
-
- // only call the handlers if there is not a drag/resize in progress
- if (seg && !_this.isDraggingSeg && !_this.isResizingSeg) {
- return func.call(this, seg, ev); // `this` will be the event element
- }
- });
+ this.el.on(name, '.fc-event-container > *', function(ev) {
+ var seg = $(this).data('fc-seg'); // grab segment data. put there by View::renderEvents
+
+ // only call the handlers if there is not a drag/resize in progress
+ if (seg && !_this.isDraggingSeg && !_this.isResizingSeg) {
+ return handler.call(_this, seg, ev); // context will be the Grid
}
- );
+ });
+ },
+
+
+ handleSegClick: function(seg, ev) {
+ return this.view.trigger('eventClick', seg.el[0], seg.event, ev); // can return `false` to cancel
},
// Updates internal state and triggers handlers for when an event element is moused over
- triggerSegMouseover: function(seg, ev) {
- if (!this.mousedOverSeg) {
+ handleSegMouseover: function(seg, ev) {
+ if (
+ !this.isIgnoringMouse &&
+ !this.mousedOverSeg
+ ) {
this.mousedOverSeg = seg;
+ seg.el.addClass('fc-allow-mouse-resize');
this.view.trigger('eventMouseover', seg.el[0], seg.event, ev);
}
},
@@ -3817,56 +4236,132 @@ Grid.mixin({
// Updates internal state and triggers handlers for when an event element is moused out.
// Can be given no arguments, in which case it will mouseout the segment that was previously moused over.
- triggerSegMouseout: function(seg, ev) {
+ handleSegMouseout: function(seg, ev) {
ev = ev || {}; // if given no args, make a mock mouse event
if (this.mousedOverSeg) {
seg = seg || this.mousedOverSeg; // if given no args, use the currently moused-over segment
this.mousedOverSeg = null;
+ seg.el.removeClass('fc-allow-mouse-resize');
this.view.trigger('eventMouseout', seg.el[0], seg.event, ev);
}
},
+ handleSegMousedown: function(seg, ev) {
+ var isResizing = this.startSegResize(seg, ev, { distance: 5 });
+
+ if (!isResizing && this.view.isEventDraggable(seg.event)) {
+ this.buildSegDragListener(seg)
+ .startInteraction(ev, {
+ distance: 5
+ });
+ }
+ },
+
+
+ handleSegTouchStart: function(seg, ev) {
+ var view = this.view;
+ var event = seg.event;
+ var isSelected = view.isEventSelected(event);
+ var isDraggable = view.isEventDraggable(event);
+ var isResizable = view.isEventResizable(event);
+ var isResizing = false;
+ var dragListener;
+
+ if (isSelected && isResizable) {
+ // only allow resizing of the event is selected
+ isResizing = this.startSegResize(seg, ev);
+ }
+
+ if (!isResizing && (isDraggable || isResizable)) { // allowed to be selected?
+
+ dragListener = isDraggable ?
+ this.buildSegDragListener(seg) :
+ this.buildSegSelectListener(seg); // seg isn't draggable, but still needs to be selected
+
+ dragListener.startInteraction(ev, { // won't start if already started
+ delay: isSelected ? 0 : this.view.opt('longPressDelay') // do delay if not already selected
+ });
+ }
+
+ // a long tap simulates a mouseover. ignore this bogus mouseover.
+ this.tempIgnoreMouse();
+ },
+
+
+ handleSegTouchEnd: function(seg, ev) {
+ // touchstart+touchend = click, which simulates a mouseover.
+ // ignore this bogus mouseover.
+ this.tempIgnoreMouse();
+ },
+
+
+ // returns boolean whether resizing actually started or not.
+ // assumes the seg allows resizing.
+ // `dragOptions` are optional.
+ startSegResize: function(seg, ev, dragOptions) {
+ if ($(ev.target).is('.fc-resizer')) {
+ this.buildSegResizeListener(seg, $(ev.target).is('.fc-start-resizer'))
+ .startInteraction(ev, dragOptions);
+ return true;
+ }
+ return false;
+ },
+
+
+
/* Event Dragging
------------------------------------------------------------------------------------------------------------------*/
- // Called when the user does a mousedown on an event, which might lead to dragging.
+ // Builds a listener that will track user-dragging on an event segment.
// Generic enough to work with any type of Grid.
- segDragMousedown: function(seg, ev) {
+ // Has side effect of setting/unsetting `segDragListener`
+ buildSegDragListener: function(seg) {
var _this = this;
var view = this.view;
var calendar = view.calendar;
var el = seg.el;
var event = seg.event;
+ var isDragging;
+ var mouseFollower; // A clone of the original element that will move with the mouse
var dropLocation; // zoned event date properties
- // A clone of the original element that will move with the mouse
- var mouseFollower = new MouseFollower(seg.el, {
- parentEl: view.el,
- opacity: view.opt('dragOpacity'),
- revertDuration: view.opt('dragRevertDuration'),
- zIndex: 2 // one above the .fc-view
- });
+ if (this.segDragListener) {
+ return this.segDragListener;
+ }
// Tracks mouse movement over the *view's* coordinate map. Allows dragging and dropping between subcomponents
// of the view.
- var dragListener = new HitDragListener(view, {
- distance: 5,
+ var dragListener = this.segDragListener = new HitDragListener(view, {
scroll: view.opt('dragScroll'),
subjectEl: el,
subjectCenter: true,
- listenStart: function(ev) {
+ interactionStart: function(ev) {
+ isDragging = false;
+ mouseFollower = new MouseFollower(seg.el, {
+ additionalClass: 'fc-dragging',
+ parentEl: view.el,
+ opacity: dragListener.isTouch ? null : view.opt('dragOpacity'),
+ revertDuration: view.opt('dragRevertDuration'),
+ zIndex: 2 // one above the .fc-view
+ });
mouseFollower.hide(); // don't show until we know this is a real drag
mouseFollower.start(ev);
},
dragStart: function(ev) {
- _this.triggerSegMouseout(seg, ev); // ensure a mouseout on the manipulated event has been reported
+ if (dragListener.isTouch && !view.isEventSelected(event)) {
+ // if not previously selected, will fire after a delay. then, select the event
+ view.selectEvent(event);
+ }
+ isDragging = true;
+ _this.handleSegMouseout(seg, ev); // ensure a mouseout on the manipulated event has been reported
_this.segDragStart(seg, ev);
view.hideEvent(event); // hide all event segments. our mouseFollower will take over
},
hitOver: function(hit, isOrig, origHit) {
+ var dragHelperEls;
// starting hit could be forced (DayGrid.limit)
if (seg.hit) {
@@ -3886,7 +4381,13 @@ Grid.mixin({
}
// if a valid drop location, have the subclass render a visual indication
- if (dropLocation && view.renderDrag(dropLocation, seg)) {
+ if (dropLocation && (dragHelperEls = view.renderDrag(dropLocation, seg))) {
+
+ dragHelperEls.addClass('fc-dragging');
+ if (!dragListener.isTouch) {
+ _this.applyDragOpacity(dragHelperEls);
+ }
+
mouseFollower.hide(); // if the subclass is already using a mock event "helper", hide our own
}
else {
@@ -3902,27 +4403,54 @@ Grid.mixin({
mouseFollower.show(); // show in case we are moving out of all hits
dropLocation = null;
},
- hitDone: function() { // Called after a hitOut OR before a dragStop
+ hitDone: function() { // Called after a hitOut OR before a dragEnd
enableCursor();
},
- dragStop: function(ev) {
+ interactionEnd: function(ev) {
// do revert animation if hasn't changed. calls a callback when finished (whether animation or not)
mouseFollower.stop(!dropLocation, function() {
- view.unrenderDrag();
- view.showEvent(event);
- _this.segDragStop(seg, ev);
-
+ if (isDragging) {
+ view.unrenderDrag();
+ view.showEvent(event);
+ _this.segDragStop(seg, ev);
+ }
if (dropLocation) {
view.reportEventDrop(event, dropLocation, this.largeUnit, el, ev);
}
});
+ _this.segDragListener = null;
+ }
+ });
+
+ return dragListener;
+ },
+
+
+ // seg isn't draggable, but let's use a generic DragListener
+ // simply for the delay, so it can be selected.
+ // Has side effect of setting/unsetting `segDragListener`
+ buildSegSelectListener: function(seg) {
+ var _this = this;
+ var view = this.view;
+ var event = seg.event;
+
+ if (this.segDragListener) {
+ return this.segDragListener;
+ }
+
+ var dragListener = this.segDragListener = new DragListener({
+ dragStart: function(ev) {
+ if (dragListener.isTouch && !view.isEventSelected(event)) {
+ // if not previously selected, will fire after a delay. then, select the event
+ view.selectEvent(event);
+ }
},
- listenStop: function() {
- mouseFollower.stop(); // put in listenStop in case there was a mousedown but the drag never started
+ interactionEnd: function(ev) {
+ _this.segDragListener = null;
}
});
- dragListener.mousedown(ev); // start listening, which will eventually lead to a dragStart
+ return dragListener;
},
@@ -4038,8 +4566,8 @@ Grid.mixin({
var dropLocation; // a null value signals an unsuccessful drag
// listener that tracks mouse movement over date-associated pixel regions
- var dragListener = new HitDragListener(this, {
- listenStart: function() {
+ var dragListener = _this.externalDragListener = new HitDragListener(this, {
+ interactionStart: function() {
_this.isDraggingExternal = true;
},
hitOver: function(hit) {
@@ -4063,17 +4591,16 @@ Grid.mixin({
hitOut: function() {
dropLocation = null; // signal unsuccessful
},
- hitDone: function() { // Called after a hitOut OR before a dragStop
+ hitDone: function() { // Called after a hitOut OR before a dragEnd
enableCursor();
_this.unrenderDrag();
},
- dragStop: function() {
+ interactionEnd: function(ev) {
if (dropLocation) { // element was dropped on a valid hit
_this.view.reportExternalDrop(meta, dropLocation, el, ev, ui);
}
- },
- listenStop: function() {
_this.isDraggingExternal = false;
+ _this.externalDragListener = null;
}
});
@@ -4114,6 +4641,7 @@ Grid.mixin({
// `dropLocation` contains hypothetical start/end/allDay values the event would have if dropped. end can be null.
// `seg` is the internal segment object that is being dragged. If dragging an external element, `seg` is null.
// A truthy returned value indicates this method has rendered a helper element.
+ // Must return elements used for any mock events.
renderDrag: function(dropLocation, seg) {
// subclasses must implement
},
@@ -4129,24 +4657,28 @@ Grid.mixin({
------------------------------------------------------------------------------------------------------------------*/
- // Called when the user does a mousedown on an event's resizer, which might lead to resizing.
+ // Creates a listener that tracks the user as they resize an event segment.
// Generic enough to work with any type of Grid.
- segResizeMousedown: function(seg, ev, isStart) {
+ buildSegResizeListener: function(seg, isStart) {
var _this = this;
var view = this.view;
var calendar = view.calendar;
var el = seg.el;
var event = seg.event;
var eventEnd = calendar.getEventEnd(event);
+ var isDragging;
var resizeLocation; // zoned event date properties. falsy if invalid resize
// Tracks mouse movement over the *grid's* coordinate map
- var dragListener = new HitDragListener(this, {
- distance: 5,
+ var dragListener = this.segResizeListener = new HitDragListener(this, {
scroll: view.opt('dragScroll'),
subjectEl: el,
+ interactionStart: function() {
+ isDragging = false;
+ },
dragStart: function(ev) {
- _this.triggerSegMouseout(seg, ev); // ensure a mouseout on the manipulated event has been reported
+ isDragging = true;
+ _this.handleSegMouseout(seg, ev); // ensure a mouseout on the manipulated event has been reported
_this.segResizeStart(seg, ev);
},
hitOver: function(hit, isOrig, origHit) {
@@ -4181,16 +4713,18 @@ Grid.mixin({
view.showEvent(event);
enableCursor();
},
- dragStop: function(ev) {
- _this.segResizeStop(seg, ev);
-
+ interactionEnd: function(ev) {
+ if (isDragging) {
+ _this.segResizeStop(seg, ev);
+ }
if (resizeLocation) { // valid date to resize to?
view.reportEventResize(event, resizeLocation, this.largeUnit, el, ev);
}
+ _this.segResizeListener = null;
}
});
- dragListener.mousedown(ev); // start listening, which will eventually lead to a dragStart
+ return dragListener;
},
@@ -4267,6 +4801,7 @@ Grid.mixin({
// Renders a visual indication of an event being resized.
// `range` has the updated dates of the event. `seg` is the original segment object involved in the drag.
+ // Must return elements used for any mock events.
renderEventResize: function(range, seg) {
// subclasses must implement
},
@@ -4312,6 +4847,7 @@ Grid.mixin({
// Generic utility for generating the HTML classNames for an event segment's element
getSegClasses: function(seg, isDraggable, isResizable) {
+ var view = this.view;
var event = seg.event;
var classes = [
'fc-event',
@@ -4329,6 +4865,11 @@ Grid.mixin({
classes.push('fc-resizable');
}
+ // event is currently selected? attach a className.
+ if (view.isEventSelected(event)) {
+ classes.push('fc-selected');
+ }
+
return classes;
},
@@ -5311,10 +5852,7 @@ var DayGrid = FC.DayGrid = Grid.extend(DayTableMixin, {
// if a segment from the same calendar but another component is being dragged, render a helper event
if (seg && !seg.el.closest(this.el).length) {
- this.renderEventLocationHelper(eventLocation, seg);
- this.applyDragOpacity(this.helperEls);
-
- return true; // a helper has been rendered
+ return this.renderEventLocationHelper(eventLocation, seg); // returns mock event elements
}
},
@@ -5333,7 +5871,7 @@ var DayGrid = FC.DayGrid = Grid.extend(DayTableMixin, {
// Renders a visual indication of an event being resized
renderEventResize: function(eventLocation, seg) {
this.renderHighlight(this.eventToSpan(eventLocation));
- this.renderEventLocationHelper(eventLocation, seg);
+ return this.renderEventLocationHelper(eventLocation, seg); // returns mock event elements
},
@@ -5379,7 +5917,9 @@ var DayGrid = FC.DayGrid = Grid.extend(DayTableMixin, {
helperNodes.push(skeletonEl[0]);
});
- this.helperEls = $(helperNodes); // array -> jQuery set
+ return ( // must return the elements rendered
+ this.helperEls = $(helperNodes) // array -> jQuery set
+ );
},
@@ -6165,6 +6705,7 @@ var TimeGrid = FC.TimeGrid = Grid.extend(DayTableMixin, {
labelInterval: null, // duration of how often a label should be displayed for a slot
colEls: null, // cells elements in the day-row background
+ slatContainerEl: null, // div that wraps all the slat rows
slatEls: null, // elements running horizontally across all columns
nowIndicatorEls: null,
@@ -6184,7 +6725,8 @@ var TimeGrid = FC.TimeGrid = Grid.extend(DayTableMixin, {
renderDates: function() {
this.el.html(this.renderHtml());
this.colEls = this.el.find('.fc-day');
- this.slatEls = this.el.find('.fc-slats tr');
+ this.slatContainerEl = this.el.find('.fc-slats');
+ this.slatEls = this.slatContainerEl.find('tr');
this.colCoordCache = new CoordCache({
els: this.colEls,
@@ -6463,6 +7005,11 @@ var TimeGrid = FC.TimeGrid = Grid.extend(DayTableMixin, {
},
+ getTotalSlatHeight: function() {
+ return this.slatContainerEl.outerHeight();
+ },
+
+
// Computes the top coordinate, relative to the bounds of the grid, of the given date.
// A `startOfDayDate` must be given for avoiding ambiguity over how to treat midnight.
computeDateTop: function(date, startOfDayDate) {
@@ -6511,13 +7058,10 @@ var TimeGrid = FC.TimeGrid = Grid.extend(DayTableMixin, {
renderDrag: function(eventLocation, seg) {
if (seg) { // if there is event information for this drag, render a helper event
- this.renderEventLocationHelper(eventLocation, seg);
- for (var i = 0; i < this.helperSegs.length; i++) {
- this.applyDragOpacity(this.helperSegs[i].el);
- }
-
- return true; // signal that a helper has been rendered
+ // returns mock event elements
+ // signal that a helper has been rendered
+ return this.renderEventLocationHelper(eventLocation, seg);
}
else {
// otherwise, just render a highlight
@@ -6539,7 +7083,7 @@ var TimeGrid = FC.TimeGrid = Grid.extend(DayTableMixin, {
// Renders a visual indication of an event being resized
renderEventResize: function(eventLocation, seg) {
- this.renderEventLocationHelper(eventLocation, seg);
+ return this.renderEventLocationHelper(eventLocation, seg); // returns mock event elements
},
@@ -6555,7 +7099,7 @@ var TimeGrid = FC.TimeGrid = Grid.extend(DayTableMixin, {
// Renders a mock "helper" event. `sourceSeg` is the original segment object and might be null (an external drag)
renderHelper: function(event, sourceSeg) {
- this.renderHelperSegs(this.eventToSegs(event), sourceSeg);
+ return this.renderHelperSegs(this.eventToSegs(event), sourceSeg); // returns mock event elements
},
@@ -6749,6 +7293,7 @@ TimeGrid.mixin({
renderHelperSegs: function(segs, sourceSeg) {
+ var helperEls = [];
var i, seg;
var sourceEl;
@@ -6766,9 +7311,12 @@ TimeGrid.mixin({
'margin-right': sourceEl.css('margin-right')
});
}
+ helperEls.push(seg.el[0]);
}
this.helperSegs = segs;
+
+ return $(helperEls); // must return rendered helpers
},
@@ -7279,7 +7827,7 @@ function isSlotSegCollision(seg1, seg2) {
/* An abstract class from which other views inherit from
----------------------------------------------------------------------------------------------------------------------*/
-var View = FC.View = Class.extend({
+var View = FC.View = Class.extend(EmitterMixin, ListenerMixin, {
type: null, // subclass' view name (string)
name: null, // deprecated. use `type` instead
@@ -7306,13 +7854,10 @@ var View = FC.View = Class.extend({
isRTL: false,
isSelected: false, // boolean whether a range of time is user-selected or not
+ selectedEvent: null,
eventOrderSpecs: null, // criteria for ordering events when they have same date/time
- // subclasses can optionally use a scroll container
- scrollerEl: null, // the element that will most likely scroll when content is too tall
- scrollTop: null, // cached vertical scroll value
-
// classNames styled by jqui themes
widgetHeaderClass: null,
widgetContentClass: null,
@@ -7322,9 +7867,6 @@ var View = FC.View = Class.extend({
nextDayThreshold: null,
isHiddenDayHash: null,
- // document handlers, bound to `this` object
- documentMousedownProxy: null, // TODO: doesn't work with touch
-
// now indicator
isNowIndicatorRendered: null,
initialNowDate: null, // result first getNow call
@@ -7347,8 +7889,6 @@ var View = FC.View = Class.extend({
this.eventOrderSpecs = parseFieldSpecs(this.opt('eventOrder'));
- this.documentMousedownProxy = proxy(this, 'documentMousedown');
-
this.initialize();
},
@@ -7674,13 +8214,14 @@ var View = FC.View = Class.extend({
// Binds DOM handlers to elements that reside outside the view container, such as the document
bindGlobalHandlers: function() {
- $(document).on('mousedown', this.documentMousedownProxy);
+ this.listenTo($(document), 'mousedown', this.handleDocumentMousedown);
+ this.listenTo($(document), 'touchstart', this.processUnselect);
},
// Unbinds DOM handlers from elements that reside outside the view container
unbindGlobalHandlers: function() {
- $(document).off('mousedown', this.documentMousedownProxy);
+ this.stopListeningTo($(document));
},
@@ -7848,27 +8389,6 @@ var View = FC.View = Class.extend({
------------------------------------------------------------------------------------------------------------------*/
- // Given the total height of the view, return the number of pixels that should be used for the scroller.
- // Utility for subclasses.
- computeScrollerHeight: function(totalHeight) {
- var scrollerEl = this.scrollerEl;
- var both;
- var otherHeight; // cumulative height of everything that is not the scrollerEl in the view (header+borders)
-
- both = this.el.add(scrollerEl);
-
- // fuckin IE8/9/10/11 sometimes returns 0 for dimensions. this weird hack was the only thing that worked
- both.css({
- position: 'relative', // cause a reflow, which will force fresh dimension recalculation
- left: -1 // ensure reflow in case the el was already relative. negative is less likely to cause new scroll
- });
- otherHeight = this.el.outerHeight() - scrollerEl.height(); // grab the dimensions
- both.css({ position: '', left: '' }); // undo hack
-
- return totalHeight - otherHeight;
- },
-
-
// Computes the initial pre-configured scroll state prior to allowing the user to change it.
// Given the scroll state from the previous rendering. If first time rendering, given null.
computeInitialScroll: function(previousScrollState) {
@@ -7878,17 +8398,13 @@ var View = FC.View = Class.extend({
// Retrieves the view's current natural scroll state. Can return an arbitrary format.
queryScroll: function() {
- if (this.scrollerEl) {
- return this.scrollerEl.scrollTop(); // operates on scrollerEl by default
- }
+ // subclasses must implement
},
// Sets the view's scroll state. Will accept the same format computeInitialScroll and queryScroll produce.
setScroll: function(scrollState) {
- if (this.scrollerEl) {
- return this.scrollerEl.scrollTop(scrollState); // operates on scrollerEl by default
- }
+ // subclasses must implement
},
@@ -8103,7 +8619,8 @@ var View = FC.View = Class.extend({
// Renders a visual indication of a event or external-element drag over the given drop zone.
- // If an external-element, seg will be `null`
+ // If an external-element, seg will be `null`.
+ // Must return elements used for any mock events.
renderDrag: function(dropLocation, seg) {
// subclasses must implement
},
@@ -8166,7 +8683,7 @@ var View = FC.View = Class.extend({
},
- /* Selection
+ /* Selection (time range)
------------------------------------------------------------------------------------------------------------------*/
@@ -8224,13 +8741,62 @@ var View = FC.View = Class.extend({
},
- // Handler for unselecting when the user clicks something and the 'unselectAuto' setting is on
- documentMousedown: function(ev) {
- var ignore;
+ /* Event Selection
+ ------------------------------------------------------------------------------------------------------------------*/
+
+
+ selectEvent: function(event) {
+ if (!this.selectedEvent || this.selectedEvent !== event) {
+ this.unselectEvent();
+ this.renderedEventSegEach(function(seg) {
+ seg.el.addClass('fc-selected');
+ }, event);
+ this.selectedEvent = event;
+ }
+ },
+
+
+ unselectEvent: function() {
+ if (this.selectedEvent) {
+ this.renderedEventSegEach(function(seg) {
+ seg.el.removeClass('fc-selected');
+ }, this.selectedEvent);
+ this.selectedEvent = null;
+ }
+ },
- // is there a selection, and has the user made a proper left click?
- if (this.isSelected && this.opt('unselectAuto') && isPrimaryMouseButton(ev)) {
+ isEventSelected: function(event) {
+ // event references might change on refetchEvents(), while selectedEvent doesn't,
+ // so compare IDs
+ return this.selectedEvent && this.selectedEvent._id === event._id;
+ },
+
+
+ /* Mouse / Touch Unselecting (time range & event unselection)
+ ------------------------------------------------------------------------------------------------------------------*/
+ // TODO: move consistently to down/start or up/end?
+ // TODO: don't kill previous selection if touch scrolling
+
+
+ handleDocumentMousedown: function(ev) {
+ if (isPrimaryMouseButton(ev)) {
+ this.processUnselect(ev);
+ }
+ },
+
+
+ processUnselect: function(ev) {
+ this.processRangeUnselect(ev);
+ this.processEventUnselect(ev);
+ },
+
+
+ processRangeUnselect: function(ev) {
+ var ignore;
+
+ // is there a time-range selection?
+ if (this.isSelected && this.opt('unselectAuto')) {
// only unselect if the clicked element is not identical to or inside of an 'unselectCancel' element
ignore = this.opt('unselectCancel');
if (!ignore || !$(ev.target).closest(ignore).length) {
@@ -8240,6 +8806,15 @@ var View = FC.View = Class.extend({
},
+ processEventUnselect: function(ev) {
+ if (this.selectedEvent) {
+ if (!$(ev.target).closest('.fc-selected').length) {
+ this.unselectEvent();
+ }
+ }
+ },
+
+
/* Day Click
------------------------------------------------------------------------------------------------------------------*/
@@ -8354,6 +8929,127 @@ var View = FC.View = Class.extend({
;;
+/*
+Embodies a div that has potential scrollbars
+*/
+var Scroller = FC.Scroller = Class.extend({
+
+ el: null, // the guaranteed outer element
+ scrollEl: null, // the element with the scrollbars
+ overflowX: null,
+ overflowY: null,
+
+
+ constructor: function(options) {
+ options = options || {};
+ this.overflowX = options.overflowX || options.overflow || 'auto';
+ this.overflowY = options.overflowY || options.overflow || 'auto';
+ },
+
+
+ render: function() {
+ this.el = this.renderEl();
+ this.applyOverflow();
+ },
+
+
+ renderEl: function() {
+ return (this.scrollEl = $('<div class="fc-scroller"></div>'));
+ },
+
+
+ // sets to natural height, unlocks overflow
+ clear: function() {
+ this.setHeight('auto');
+ this.applyOverflow();
+ },
+
+
+ destroy: function() {
+ this.el.remove();
+ },
+
+
+ // Overflow
+ // -----------------------------------------------------------------------------------------------------------------
+
+
+ applyOverflow: function() {
+ this.scrollEl.css({
+ 'overflow-x': this.overflowX,
+ 'overflow-y': this.overflowY
+ });
+ },
+
+
+ // Causes any 'auto' overflow values to resolves to 'scroll' or 'hidden'.
+ // Useful for preserving scrollbar widths regardless of future resizes.
+ // Can pass in scrollbarWidths for optimization.
+ lockOverflow: function(scrollbarWidths) {
+ var overflowX = this.overflowX;
+ var overflowY = this.overflowY;
+
+ scrollbarWidths = scrollbarWidths || this.getScrollbarWidths();
+
+ if (overflowX === 'auto') {
+ overflowX = (
+ scrollbarWidths.top || scrollbarWidths.bottom || // horizontal scrollbars?
+ // OR scrolling pane with massless scrollbars?
+ this.scrollEl[0].scrollWidth - 1 > this.scrollEl[0].clientWidth
+ // subtract 1 because of IE off-by-one issue
+ ) ? 'scroll' : 'hidden';
+ }
+
+ if (overflowY === 'auto') {
+ overflowY = (
+ scrollbarWidths.left || scrollbarWidths.right || // vertical scrollbars?
+ // OR scrolling pane with massless scrollbars?
+ this.scrollEl[0].scrollHeight - 1 > this.scrollEl[0].clientHeight
+ // subtract 1 because of IE off-by-one issue
+ ) ? 'scroll' : 'hidden';
+ }
+
+ this.scrollEl.css({ 'overflow-x': overflowX, 'overflow-y': overflowY });
+ },
+
+
+ // Getters / Setters
+ // -----------------------------------------------------------------------------------------------------------------
+
+
+ setHeight: function(height) {
+ this.scrollEl.height(height);
+ },
+
+
+ getScrollTop: function() {
+ return this.scrollEl.scrollTop();
+ },
+
+
+ setScrollTop: function(top) {
+ this.scrollEl.scrollTop(top);
+ },
+
+
+ getClientWidth: function() {
+ return this.scrollEl[0].clientWidth;
+ },
+
+
+ getClientHeight: function() {
+ return this.scrollEl[0].clientHeight;
+ },
+
+
+ getScrollbarWidths: function() {
+ return getScrollbarWidths(this.scrollEl);
+ }
+
+});
+
+;;
+
var Calendar = FC.Calendar = Class.extend({
dirDefaults: null, // option defaults related to LTR or RTL
@@ -8608,7 +9304,7 @@ var Calendar = FC.Calendar = Class.extend({
});
-Calendar.mixin(Emitter);
+Calendar.mixin(EmitterMixin);
function Calendar_constructor(element, overrides) {
@@ -9369,7 +10065,9 @@ Calendar.defaults = {
dayPopoverFormat: 'LL',
handleWindowResize: true,
- windowResizeDelay: 200 // milliseconds before an updateSize happens
+ windowResizeDelay: 200, // milliseconds before an updateSize happens
+
+ longPressDelay: 1000
};
@@ -10368,6 +11066,8 @@ function EventManager(options) { // assumed to be a calendar
assignDatesToEvent(start, end, allDay, out);
}
+ t.normalizeEvent(out); // hook for external use. a prototype method
+
return out;
}
@@ -10900,6 +11600,12 @@ function EventManager(options) { // assumed to be a calendar
}
+// hook for external libs to manipulate event properties upon creation.
+// should manipulate the event in-place.
+Calendar.prototype.normalizeEvent = function(event) {
+};
+
+
// Returns a list of events that the given event should be compared against when being considered for a move to
// the specified span. Attached to the Calendar's prototype because EventManager is a mixin for a Calendar.
Calendar.prototype.getPeerEvents = function(span, event) {
@@ -10937,6 +11643,8 @@ function backupEventDates(event) {
var BasicView = FC.BasicView = View.extend({
+ scroller: null,
+
dayGridClass: DayGrid, // class the dayGrid will be instantiated from (overridable by subclasses)
dayGrid: null, // the main subcomponent that does most of the heavy lifting
@@ -10951,6 +11659,11 @@ var BasicView = FC.BasicView = View.extend({
initialize: function() {
this.dayGrid = this.instantiateDayGrid();
+
+ this.scroller = new Scroller({
+ overflowX: 'hidden',
+ overflowY: 'auto'
+ });
},
@@ -11003,9 +11716,12 @@ var BasicView = FC.BasicView = View.extend({
this.el.addClass('fc-basic-view').html(this.renderSkeletonHtml());
this.renderHead();
- this.scrollerEl = this.el.find('.fc-day-grid-container');
+ this.scroller.render();
+ var dayGridContainerEl = this.scroller.el.addClass('fc-day-grid-container');
+ var dayGridEl = $('<div class="fc-day-grid" />').appendTo(dayGridContainerEl);
+ this.el.find('.fc-body > tr > td').append(dayGridContainerEl);
- this.dayGrid.setElement(this.el.find('.fc-day-grid'));
+ this.dayGrid.setElement(dayGridEl);
this.dayGrid.renderDates(this.hasRigidRows());
},
@@ -11024,6 +11740,7 @@ var BasicView = FC.BasicView = View.extend({
unrenderDates: function() {
this.dayGrid.unrenderDates();
this.dayGrid.removeElement();
+ this.scroller.destroy();
},
@@ -11044,11 +11761,7 @@ var BasicView = FC.BasicView = View.extend({
'</thead>' +
'<tbody class="fc-body">' +
'<tr>' +
- '<td class="' + this.widgetContentClass + '">' +
- '<div class="fc-day-grid-container">' +
- '<div class="fc-day-grid"/>' +
- '</div>' +
- '</td>' +
+ '<td class="' + this.widgetContentClass + '"></td>' +
'</tr>' +
'</tbody>' +
'</table>';
@@ -11091,9 +11804,10 @@ var BasicView = FC.BasicView = View.extend({
setHeight: function(totalHeight, isAuto) {
var eventLimit = this.opt('eventLimit');
var scrollerHeight;
+ var scrollbarWidths;
// reset all heights to be natural
- unsetScroller(this.scrollerEl);
+ this.scroller.clear();
uncompensateScroll(this.headRowEl);
this.dayGrid.removeSegPopover(); // kill the "more" popover if displayed
@@ -11103,6 +11817,8 @@ var BasicView = FC.BasicView = View.extend({
this.dayGrid.limitRows(eventLimit); // limit the levels first so the height can redistribute after
}
+ // distribute the height to the rows
+ // (totalHeight is a "recommended" value if isAuto)
scrollerHeight = this.computeScrollerHeight(totalHeight);
this.setGridHeight(scrollerHeight, isAuto);
@@ -11111,17 +11827,33 @@ var BasicView = FC.BasicView = View.extend({
this.dayGrid.limitRows(eventLimit); // limit the levels after the grid's row heights have been set
}
- if (!isAuto && setPotentialScroller(this.scrollerEl, scrollerHeight)) { // using scrollbars?
+ if (!isAuto) { // should we force dimensions of the scroll container?
- compensateScroll(this.headRowEl, getScrollbarWidths(this.scrollerEl));
+ this.scroller.setHeight(scrollerHeight);
+ scrollbarWidths = this.scroller.getScrollbarWidths();
- // doing the scrollbar compensation might have created text overflow which created more height. redo
- scrollerHeight = this.computeScrollerHeight(totalHeight);
- this.scrollerEl.height(scrollerHeight);
+ if (scrollbarWidths.left || scrollbarWidths.right) { // using scrollbars?
+
+ compensateScroll(this.headRowEl, scrollbarWidths);
+
+ // doing the scrollbar compensation might have created text overflow which created more height. redo
+ scrollerHeight = this.computeScrollerHeight(totalHeight);
+ this.scroller.setHeight(scrollerHeight);
+ }
+
+ // guarantees the same scrollbar widths
+ this.scroller.lockOverflow(scrollbarWidths);
}
},
+ // given a desired total height of the view, returns what the height of the scroller should be
+ computeScrollerHeight: function(totalHeight) {
+ return totalHeight -
+ subtractInnerElHeight(this.el, this.scroller.el); // everything that's NOT the scroller
+ },
+
+
// Sets the height of just the DayGrid component in this view
setGridHeight: function(height, isAuto) {
if (isAuto) {
@@ -11133,6 +11865,20 @@ var BasicView = FC.BasicView = View.extend({
},
+ /* Scroll
+ ------------------------------------------------------------------------------------------------------------------*/
+
+
+ queryScroll: function() {
+ return this.scroller.getScrollTop();
+ },
+
+
+ setScroll: function(top) {
+ this.scroller.setScrollTop(top);
+ },
+
+
/* Hit Areas
------------------------------------------------------------------------------------------------------------------*/
// forward all hit-related method calls to dayGrid
@@ -11368,6 +12114,8 @@ fcViews.month = {
var AgendaView = FC.AgendaView = View.extend({
+ scroller: null,
+
timeGridClass: TimeGrid, // class used to instantiate the timeGrid. subclasses can override
timeGrid: null, // the main time-grid subcomponent of this view
@@ -11377,11 +12125,10 @@ var AgendaView = FC.AgendaView = View.extend({
axisWidth: null, // the width of the time axis running down the side
headContainerEl: null, // div that hold's the timeGrid's rendered date header
- noScrollRowEls: null, // set of fake row elements that must compensate when scrollerEl has scrollbars
+ noScrollRowEls: null, // set of fake row elements that must compensate when scroller has scrollbars
// when the time-grid isn't tall enough to occupy the given height, we render an <hr> underneath
bottomRuleEl: null,
- bottomRuleHeight: null,
initialize: function() {
@@ -11390,6 +12137,11 @@ var AgendaView = FC.AgendaView = View.extend({
if (this.opt('allDaySlot')) { // should we display the "all-day" area?
this.dayGrid = this.instantiateDayGrid(); // the all-day subcomponent of this view
}
+
+ this.scroller = new Scroller({
+ overflowX: 'hidden',
+ overflowY: 'auto'
+ });
},
@@ -11430,10 +12182,12 @@ var AgendaView = FC.AgendaView = View.extend({
this.el.addClass('fc-agenda-view').html(this.renderSkeletonHtml());
this.renderHead();
- // the element that wraps the time-grid that will probably scroll
- this.scrollerEl = this.el.find('.fc-time-grid-container');
+ this.scroller.render();
+ var timeGridWrapEl = this.scroller.el.addClass('fc-time-grid-container');
+ var timeGridEl = $('<div class="fc-time-grid" />').appendTo(timeGridWrapEl);
+ this.el.find('.fc-body > tr > td').append(timeGridWrapEl);
- this.timeGrid.setElement(this.el.find('.fc-time-grid'));
+ this.timeGrid.setElement(timeGridEl);
this.timeGrid.renderDates();
// the <hr> that sometimes displays under the time-grid
@@ -11470,6 +12224,8 @@ var AgendaView = FC.AgendaView = View.extend({
this.dayGrid.unrenderDates();
this.dayGrid.removeElement();
}
+
+ this.scroller.destroy();
},
@@ -11491,9 +12247,6 @@ var AgendaView = FC.AgendaView = View.extend({
'<hr class="fc-divider ' + this.widgetHeaderClass + '"/>' :
''
) +
- '<div class="fc-time-grid-container">' +
- '<div class="fc-time-grid"/>' +
- '</div>' +
'</td>' +
'</tr>' +
'</tbody>' +
@@ -11573,16 +12326,11 @@ var AgendaView = FC.AgendaView = View.extend({
setHeight: function(totalHeight, isAuto) {
var eventLimit;
var scrollerHeight;
-
- if (this.bottomRuleHeight === null) {
- // calculate the height of the rule the very first time
- this.bottomRuleHeight = this.bottomRuleEl.outerHeight();
- }
- this.bottomRuleEl.hide(); // .show() will be called later if this <hr> is necessary
+ var scrollbarWidths;
// reset all dimensions back to the original state
- this.scrollerEl.css('overflow', '');
- unsetScroller(this.scrollerEl);
+ this.bottomRuleEl.hide(); // .show() will be called later if this <hr> is necessary
+ this.scroller.clear(); // sets height to 'auto' and clears overflow
uncompensateScroll(this.noScrollRowEls);
// limit number of events in the all-day area
@@ -11598,28 +12346,46 @@ var AgendaView = FC.AgendaView = View.extend({
}
}
- if (!isAuto) { // should we force dimensions of the scroll container, or let the contents be natural height?
+ if (!isAuto) { // should we force dimensions of the scroll container?
scrollerHeight = this.computeScrollerHeight(totalHeight);
- if (setPotentialScroller(this.scrollerEl, scrollerHeight)) { // using scrollbars?
+ this.scroller.setHeight(scrollerHeight);
+ scrollbarWidths = this.scroller.getScrollbarWidths();
+
+ if (scrollbarWidths.left || scrollbarWidths.right) { // using scrollbars?
// make the all-day and header rows lines up
- compensateScroll(this.noScrollRowEls, getScrollbarWidths(this.scrollerEl));
+ compensateScroll(this.noScrollRowEls, scrollbarWidths);
// the scrollbar compensation might have changed text flow, which might affect height, so recalculate
// and reapply the desired height to the scroller.
scrollerHeight = this.computeScrollerHeight(totalHeight);
- this.scrollerEl.height(scrollerHeight);
+ this.scroller.setHeight(scrollerHeight);
}
- else { // no scrollbars
- // still, force a height and display the bottom rule (marks the end of day)
- this.scrollerEl.height(scrollerHeight).css('overflow', 'hidden'); // in case <hr> goes outside
+
+ // guarantees the same scrollbar widths
+ this.scroller.lockOverflow(scrollbarWidths);
+
+ // if there's any space below the slats, show the horizontal rule.
+ // this won't cause any new overflow, because lockOverflow already called.
+ if (this.timeGrid.getTotalSlatHeight() < scrollerHeight) {
this.bottomRuleEl.show();
}
}
},
+ // given a desired total height of the view, returns what the height of the scroller should be
+ computeScrollerHeight: function(totalHeight) {
+ return totalHeight -
+ subtractInnerElHeight(this.el, this.scroller.el); // everything that's NOT the scroller
+ },
+
+
+ /* Scroll
+ ------------------------------------------------------------------------------------------------------------------*/
+
+
// Computes the initial pre-configured scroll state prior to allowing the user to change it
computeInitialScroll: function() {
var scrollTime = moment.duration(this.opt('scrollTime'));
@@ -11636,6 +12402,16 @@ var AgendaView = FC.AgendaView = View.extend({
},
+ queryScroll: function() {
+ return this.scroller.getScrollTop();
+ },
+
+
+ setScroll: function(top) {
+ this.scroller.setScrollTop(top);
+ },
+
+
/* Hit Areas
------------------------------------------------------------------------------------------------------------------*/
// forward all hit-related method calls to the grids (dayGrid might not be defined)