Move feature detection to html5_dnd.dart and utils to utils.dart

Also add the contains() helper method to utils.dart and use it whenever
svg elements could be involved.

Author: marcojakob

lib/html5_dnd.dart

@@ -6,19 +6,16 @@ library html5_dnd;
 
 import 'dart:html';
 import 'dart:async';
-import 'dart:collection';
 import 'dart:math' as math;
 import 'dart:svg' as svg;
 import 'package:meta/meta.dart';
 import 'package:logging/logging.dart';
 
-import 'src/css_utils.dart' as css;
-import 'src/html5_utils.dart' as html5;
+import 'src/utils.dart' as utils;
 
 import 'src/sortable/sortable.dart';
 export 'src/sortable/sortable.dart';
 
-
 part 'src/dnd/group.dart';
 part 'src/dnd/draggable.dart';
 part 'src/dnd/draggable_emulated.dart';
@@ -28,7 +25,6 @@ part 'src/touch/touch.dart';
 
 final _logger = new Logger("html5_dnd");
 
-
 /**
  * If this property is set to true, touch events are enabled on devices that 
  * support it. 
@@ -37,9 +33,65 @@ final _logger = new Logger("html5_dnd");
  */
 bool enableTouchEvents = true;
 
+
+// -------------------
+// Feature Detection
+// -------------------
+bool _usesTouchEvents;
+bool _supportsDraggable;
+bool _supportsSetDragImage;
+bool _isInternetExplorer;
+
 /** 
- * Return true if touch events are enabled and the current device supports it.
+ * Returns true if touch events are enabled and the current device supports it.
+ */
+bool usesTouchEvents() {
+  if (_usesTouchEvents == null) {
+    _usesTouchEvents = enableTouchEvents && TouchEvent.supported;
+    _logger.finest('Using touch events: $_usesTouchEvents.');
+  }
+  return _usesTouchEvents;
+}
+
+/**
+ * Returns true if the HTML5 Draggable Element is supported. 
+ * IE9 will return false.
+ */
+bool get supportsDraggable {
+  if (_supportsDraggable == null) {
+    _supportsDraggable = new Element.tag('span').draggable != null;
+    _logger.finest('Browser support for HTML5 draggable: $_supportsDraggable.');
+  }
+  return _supportsDraggable;
+}
+
+/**
+ * Returns true if the browser supports "setDragImage" of HTML5 Drag and Drop.
+ * IE9 and IE10 will return false.
+ */
+bool get supportsSetDragImage {
+  if (_supportsSetDragImage == null) {
+    // TODO: We should do feature detection instead of browser detection here
+    // but there currently is no way in Dart.
+    // TODO: Keep an eye on IE11.
+    
+    // Detect Internet Explorer (which does not support HTML5 setDragImage).
+    if (isInternetExplorer) {
+      _supportsSetDragImage = false;
+    } else {
+      _supportsSetDragImage = true;
+    }
+    _logger.finest('Browser support for HTML5 setDragImage: $_supportsSetDragImage.');
+  }
+  return _supportsSetDragImage;
+}
+
+/**
+ * Returns true if the current browser is Internet Explorer.
  */
-bool _useTouchEvents() {
-  return enableTouchEvents && TouchEvent.supported;
+bool get isInternetExplorer {
+  if (_isInternetExplorer == null) {
+    _isInternetExplorer = window.navigator.appName == 'Microsoft Internet Explorer';
+  }
+  return _isInternetExplorer;
 }

lib/src/css_utils.dart

@@ -111,7 +111,7 @@ class DraggableGroup extends Group {
     return _onDragEnd.stream;
   }
 
-  bool _emulateDraggable = false;
+  bool _browserRequiresDraggableEmulation = false;
 
   /**
    * Constructor to create a [DraggableGroup].
@@ -133,13 +133,13 @@ class DraggableGroup extends Group {
     // Must emulate if either browser does not support HTML5 draggable 
     // (IE9) or there is a custom drag image and browser does not support
     // setDragImage (IE10).
-    if(!html5.supportsDraggable 
-        || (dragImageFunction != null && !html5.supportsSetDragImage)) {
+    if(!supportsDraggable 
+        || (dragImageFunction != null && !supportsSetDragImage)) {
       _logger.finest('Browser does not (completely) support HTML5 draggable.');
-      _emulateDraggable = true;
+      _browserRequiresDraggableEmulation = true;
     } else {
       _logger.finest('Browser does support HTML5 draggable.');
-      _emulateDraggable = false;
+      _browserRequiresDraggableEmulation = false;
     }
   }
 
@@ -151,7 +151,7 @@ class DraggableGroup extends Group {
 
     List<StreamSubscription> subs = new List<StreamSubscription>();
 
-    if (_emulateDraggable || element is svg.SvgElement) {
+    if (_browserRequiresDraggableEmulation || element is svg.SvgElement) {
       _logger.finest('installing as emulated draggable');
       subs.addAll(_installEmulatedDraggable(element, this));
     } else {
@@ -160,7 +160,7 @@ class DraggableGroup extends Group {
     }
 
     // Install touch events if enabled and supported.
-    if (_useTouchEvents()) {
+    if (usesTouchEvents()) {
       _logger.finest('installing touch support');
       subs.addAll(_installTouchEvents(element, this));
     }
@@ -254,7 +254,7 @@ List<StreamSubscription> _installDraggable(Element element, DraggableGroup group
 
       // Remove all text selections. Selections can otherwise lead to strange
       // behaviour when present on dragStart.
-      html5.clearTextSelections();
+      utils.clearTextSelections();
 
       // Remove draggable attribute on mouse up (anywhere on document).
       StreamSubscription upSub;
@@ -411,7 +411,7 @@ class DragImage {
    */
   DragImage._forDraggable(Element draggable, Point mousePosition) {
     // Calc the mouse position relative to the draggable.
-    Point draggableOffset = css.pageOffset(draggable);
+    Point draggableOffset = utils.pageOffset(draggable);
     this.x = (mousePosition.x - draggableOffset.x).round(); 
     this.y = (mousePosition.y - draggableOffset.y).round(); 
 
@@ -442,7 +442,7 @@ class DragImage {
   void _addEmulatedDragImage(Element draggable) {
     _logger.finest('Adding emulated drag image.');
 
-    var parent = draggable.parentNode;
+    Node parent = draggable.parentNode;
 
     // Walk parents until we find a non-SVG element. This is to handle cases
     // where we're dragging a node within an SVG document.
@@ -477,14 +477,4 @@ class DragImage {
     element.style.top = '${(newMousePagePosition.y - this.y)}px';
     element.style.visibility = 'visible';
   }
-  
-  bool _contains(EventTarget target) {
-    // If the drag image is an SvgElement, we need to do contains() differently.
-    // IE9 does not support the contains() method on SVG elements.
-    return element is svg.SvgElement ? _svgContains(element, target) : element.contains(target);
-  }
-}
-
-bool _svgContains(Element element, EventTarget target) {
-  return (target == element) ? true : element.children.any((e) => _svgContains(e, target));
 }

lib/src/dnd/draggable.dart

@@ -59,7 +59,7 @@ List<StreamSubscription> _installEmulatedDraggable(Element element, DraggableGro
 
     // Text selections should not be a problem with emulated draggable, but it
     // seems better usability to remove text selection when dragging something.
-    html5.clearTextSelections();
+    utils.clearTextSelections();
 
     // Set the flag to prevent other widgets from inheriting the event
     _emulDragHandled = true;
@@ -296,7 +296,7 @@ void _restoreCursor() {
 EventTarget _getRealTarget(EventTarget target, Point mouseClientPosition) {
   EventTarget realTarget = target;
 
-  if (_emulDragImage.element == target || _emulDragImage._contains(target)) {
+  if (utils.contains(_emulDragImage.element, target)) {
     // Forward events on the drag image to element underneath.
     _emulDragImage.element.style.visibility = 'hidden';
     realTarget = document.elementFromPoint(mouseClientPosition.x, 

lib/src/dnd/draggable_emulated.dart

@@ -319,8 +319,7 @@ EventTarget _lastDragEnterTarget;
  *   mouse entered to.
  */
 bool _isMainEvent(Element mainElement, EventTarget relatedTarget) {
-  return (relatedTarget == null 
-      || (relatedTarget != mainElement && !mainElement.contains(relatedTarget)));
+  return relatedTarget == null || (!utils.contains(mainElement, relatedTarget));
 }
 
 /**

lib/src/dnd/dropzone.dart

@@ -93,14 +93,4 @@ List<StreamSubscription> _installEmulatedDropzone(Element element, DropzoneGroup
   }));
 
   return subs;
-}
-
-/**
- * Returns true if either [target1] is an ancestor of [target2] or 
- * [target2] is a an ancestor of [target1].
- */
-bool _areAncestors(EventTarget target1, EventTarget target2) {
-  if (target1 is! Element || target2 is! Element) return false;
-  
-  return target1.contains(target2) || target2.contains(target1);
 }