Skip to content

Commit 71ca20e

Browse files
mcasimirmcasimir
committed
fixed exception with insertRule
1 parent 8298d85 commit 71ca20e

File tree

3 files changed

+199
-133
lines changed

3 files changed

+199
-133
lines changed

‎dist/js/mobile-angular-ui.gestures.js‎

Lines changed: 99 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -6,69 +6,102 @@
66
'mobile-angular-ui.gestures.transform'
77
])
88

9-
//
10-
// $drag
11-
//
12-
// A provider to create touch & drag components.
13-
//
14-
// $drag Service wraps ngTouch $swipe to extend its behavior moving one or more
15-
// target element throug css transform according to the $swipe coords thus creating
16-
// a drag effect.
17-
//
18-
// $drag interface is similar to $swipe:
19-
//
20-
// app.controller('MyController', function($drag, $element){
21-
// $drag.bind($element, {
22-
// start: function(coords, cancel, markers, e){},
23-
// move: function(coords, cancel, markers, e){},
24-
// end: function(coords, cancel, markers, e){},
25-
// cancel: function(coords, markers, e){},
26-
// transform: function(x, y, transform) {},
27-
// adaptTransform: function(x, y, transform) {},
28-
// constraint: fn or {top: y1, left: x1, bottom: y2, right: x2}
29-
// });
30-
// });
31-
//
32-
// Main differences from $swipe are:
33-
// - coords param take into account css transform so you can easily detect collision with other elements.
34-
// - start, move, end callback receive a cancel funcion that can be used to cancel the motion and reset
35-
// the transform.
36-
// - you can configure the transform behavior passing a transform function to options.
37-
// - you can constraint the motion through the constraint option (setting relative movement limits)
38-
// or through the track option (setting absolute coords);
39-
// - you can setup collision markers being watched and passed to callbacks.
40-
//
41-
// Example (drag to dismiss):
42-
// $drag.bind(e, {
43-
// move: function(c, cancel, markers){
44-
// if(c.left > markers.m1.left) {
45-
// e.addClass('willBeDeleted');
46-
// } else {
47-
// e.removeClass('willBeDeleted');
48-
// }
49-
// },
50-
// end: function(coords, cancel){
51-
// if(c.left > markers.m1.left) {
52-
// e.addClass('deleting');
53-
// delete($scope.myModel).then(function(){
54-
// e.remove();
55-
// }, function(){
56-
// cancel();
57-
// });
58-
// } else {
59-
// cancel();
60-
// }
61-
// },
62-
// cancel: function(){
63-
// e.removeClass('willBeDeleted');
64-
// e.removeClass('deleting');
65-
// },
66-
// constraint: {
67-
// minX: 0,
68-
// minY: 0,
69-
// maxY: 0
70-
// },
71-
// });
9+
// `$drag` Service wraps `$swipe` to extend its behavior moving target element through css transform according to the `$swipe` coords thus creating
10+
// a drag effect.
11+
12+
// $drag interface is very close to `$swipe`:
13+
14+
// app.controller('MyController', function($drag, $element){
15+
// var unbindDrag = $drag.bind($element, {
16+
// // drag callbacks
17+
// // - rect is the current result of getBoundingClientRect() for bound element
18+
// // - cancelFn issue a "touchcancel" on element
19+
// // - resetFn restore the initial transform
20+
// // - undoFn undoes the current movement
21+
// // - swipeCoords are the coordinates exposed by the underlying $swipe service
22+
// start: function(rect, cancelFn, resetFn, swipeCoords){},
23+
// move: function(rect, cancelFn, resetFn, swipeCoords){},
24+
// end: function(rect, undoFn, resetFn, swipeCoords) {};
25+
// cancel: function(rect, resetFn){},
26+
27+
// // constraints for the movement
28+
// // you can use a "static" object of the form:
29+
// // {top: .., lelf: .., bottom: .., rigth: ..}
30+
// // or pass a function that is called on each movement
31+
// // and return it in a dynamic way.
32+
// // This is useful if you have to constraint drag movement while bounduaries are
33+
// // changing over time.
34+
35+
// constraint: function(){ return {top: y1, left: x1, bottom: y2, right: x2}; }, // or just {top: y1, left: x1, bottom: y2, right: x2}
36+
37+
// // instantiates the Trasform according to touch movement (defaults to `t.translate(dx, dy);`)
38+
// // dx, dy are the distances of movement for x and y axis after constraints are applyied
39+
// transform: function(transform, dx, dy, currSwipeX, currSwipeY, startSwipeX, startSwipeY) {},
40+
41+
// // changes the Transform before is applied to element (useful to add something like easing or accelleration)
42+
// adaptTransform: function(transform, dx, dy, currSwipeX, currSwipeY, startSwipeX, startSwipeY) {}
43+
44+
// });
45+
46+
// // This is automatically called when element is disposed so it is not necessary
47+
// // that you call this manually but if you have to detatch $drag service before
48+
// // this you could just call:
49+
// unbindDrag();
50+
// });
51+
52+
// Main differences with `$swipe` are:
53+
// - bound elements will move following swipe direction automatically
54+
// - coords param take into account css transform so you can easily detect collision with other elements.
55+
// - start, move, end callback receive a cancel funcion that can be used to cancel the motion and reset
56+
// the transform.
57+
// - you can configure the transform behavior passing a transform function to options.
58+
// - you can constraint the motion through the constraint option (setting relative movement limits)
59+
60+
// Example (drag to dismiss):
61+
62+
// app.directive('dragToDismiss', function($drag, $parse, $timeout){
63+
// return {
64+
// restrict: 'A',
65+
// compile: function(elem, attrs) {
66+
// var dismissFn = $parse(attrs.dragToDismiss);
67+
// return function(scope, elem, attrs){
68+
// var dismiss = false;
69+
70+
// $drag.bind(elem, {
71+
// constraint: {
72+
// minX: 0,
73+
// minY: 0,
74+
// maxY: 0
75+
// },
76+
// move: function(c) {
77+
// if( c.left >= c.width / 4) {
78+
// dismiss = true;
79+
// elem.addClass('dismiss');
80+
// } else {
81+
// dismiss = false;
82+
// elem.removeClass('dismiss');
83+
// }
84+
// },
85+
// cancel: function(){
86+
// elem.removeClass('dismiss');
87+
// },
88+
// end: function(c, undo, reset) {
89+
// if (dismiss) {
90+
// elem.addClass('dismitted');
91+
// $timeout(function() {
92+
// scope.$apply(function() {
93+
// dismissFn(scope);
94+
// });
95+
// }, 400);
96+
// } else {
97+
// reset();
98+
// }
99+
// }
100+
// });
101+
// };
102+
// }
103+
// };
104+
// });
72105

73106
.provider('$drag', function() {
74107
this.$get = ['$swipe', '$document', 'Transform', function($swipe, $document, Transform) {
@@ -78,11 +111,11 @@
78111
document.head.appendChild(style);
79112
var sheet = style.sheet;
80113
// Makes z-index 99999
81-
sheet.insertRule('html .ui-drag-move{z-index: 99999 !important;}');
114+
sheet.insertRule('html .ui-drag-move{z-index: 99999 !important;}', 0);
82115
// Disable transitions
83-
sheet.insertRule('html .ui-drag-move{-webkit-transition: none !important;-moz-transition: none !important;-o-transition: none !important;-ms-transition: none !important;transition: none !important;}');
116+
sheet.insertRule('html .ui-drag-move{-webkit-transition: none !important;-moz-transition: none !important;-o-transition: none !important;-ms-transition: none !important;transition: none !important;}', 0);
84117
// Makes text unselectable
85-
sheet.insertRule('html .ui-drag-move, html .ui-drag-move *{-webkit-touch-callout: none !important;-webkit-user-select: none !important;-khtml-user-select: none !important;-moz-user-select: none !important;-ms-user-select: none !important;user-select: none !important;}');
118+
sheet.insertRule('html .ui-drag-move, html .ui-drag-move *{-webkit-touch-callout: none !important;-webkit-user-select: none !important;-khtml-user-select: none !important;-moz-user-select: none !important;-ms-user-select: none !important;user-select: none !important;}', 0);
86119

87120
return {
88121
Transform: Transform,

0 commit comments

Comments
 (0)