Permalink
Browse files

new event directives added

  • Loading branch information...
1 parent 3626ef0 commit 346a95430086b78f113a3f0babaf2da64ba280f2 Tobias Bosch committed Feb 1, 2012
Showing with 74 additions and 42 deletions.
  1. +3 −0 Changelog.md
  2. +4 −4 README.md
  3. +38 −15 src/main/webapp/jqmng/event.js
  4. +9 −13 src/test/webapp/devSnippetPage.html
  5. +20 −10 src/test/webapp/unit/eventSpec.js
View
@@ -6,6 +6,9 @@ Changelog
- Allow an object to be passed to `$navigate` service as first argument to leverage the full power
of jqm `changePage` function.
- ng:switch now works correctly.
+- Styling issues with links in lists were resolved
+- New event directives: `ngm:tap`,`ngm:taphold`,`ngm:swipe`,`ngm:swiperight`,`ngm:swipeleft`,`ngm:pagebeforeshow`,`ngm:pagebeforehide`,`ngm:pageshow`,`ngm:pagehide`
+
1.0.4
View
@@ -143,11 +143,11 @@ The value of the attribute is json and defines the event - handler mapping.
Usage: E.g. `<a href="#" ngm:event="{swiperight:'myFn()'}">`
-### Directive ngm:click="handler"
-Special click handler that integrates with jquery mobile's `vclick` event and by this also reacts to touches.
-Also see `ngm:event` for the general case of binding a handler to events.
+### Event-Directives `ngm:click`, `ngm:tap`,`ngm:taphold`,`ngm:swipe`,`ngm:swiperight`,`ngm:swipeleft`,`ngm:pagebeforeshow`,`ngm:pagebeforehide`,`ngm:pageshow`,`ngm:pagehide`
+For the mentioned events there are special directives to simplify the markup. Each of them is equivalent to
+using the `ngm:event` directive with the corresponding event name.
-Usage: E.g. `<a href="#" ngm:click="myFn()">`
+Usage: E.g. `<a href="#" ngm:swipeleft="myFn()">`
### Attribute Widget @ngm:if
The attribute widget `@ngm:if` allows to add/remove an element to/from the dom, depending on an expression.
@@ -4,7 +4,7 @@ define(['angular'], function(angular) {
* includes taps, mousedowns, ...
*/
angular.directive("ngm:click", function(expression, element) {
- return angular.directive('ngm:event')('{vclick:"' + expression+'"}', element);
+ return angular.directive('ngm:event')('{vclick:"' + expression + '"}', element);
});
/**
@@ -14,24 +14,47 @@ define(['angular'], function(angular) {
var eventHandlers = angular.fromJson(expression);
var linkFn = function($updateView, element) {
- var self = this;
for (var eventType in eventHandlers) {
- (function(eventType) {
- var handler = eventHandlers[eventType];
- element.bind(eventType, function(event) {
- var res = self.$tryEval(handler, element);
- $updateView();
- if (eventType.charAt(0)=='v') {
- // This is required to prevent a second
- // click event, see
- // https://github.com/jquery/jquery-mobile/issues/1787
- event.preventDefault();
- }
- });
- })(eventType);
+ registerEventHandler(this, $updateView, element, eventType, eventHandlers[eventType]);
}
};
linkFn.$inject = ['$updateView'];
return linkFn;
});
+
+ function registerEventHandler(scope, $updateView, element, eventType, handler) {
+ element.bind(eventType, function(event) {
+ var res = scope.$tryEval(handler, element);
+ $updateView();
+ if (eventType.charAt(0) == 'v') {
+ // This is required to prevent a second
+ // click event, see
+ // https://github.com/jquery/jquery-mobile/issues/1787
+ event.preventDefault();
+ }
+ });
+ }
+
+ function createEventDirective(directive, eventType) {
+ angular.directive('ngm:' + directive, function(eventHandler) {
+ var linkFn = function($updateView, element) {
+ registerEventHandler(this, $updateView, element, eventType, eventHandler);
+ };
+ linkFn.$inject = ['$updateView'];
+ return linkFn;
+ });
+ }
+
+ var eventDirectives = {taphold:'taphold',swipe:'swipe', swiperight:'swiperight',
+ swipeleft:'swipeleft',
+ pagebeforeshow:'pagebeforeshow',
+ pagebeforehide:'pagebeforehide',
+ pageshow:'pageshow',
+ pagehide:'pagehide',
+ click:'vclick'
+ };
+ for (var directive in eventDirectives) {
+ createEventDirective(directive, eventDirectives[directive])
+ }
+
});
@@ -21,24 +21,20 @@
</head>
<body>
-<div data-role="page" id="start" ng:init="data = {mylist:[1]}">
+<div data-role="page" id="start">
<div data-role="content">
- <ul data-role="listview" id="list">
- <li ng:repeat="l in data.mylist">
- <a href="#test2" ng:click="data.mylist=[1,2]">Test
- </a>
- </li>
- </ul>
- <ul data-role="listview" id="list2">
- <li>
- <a href="#test2" ng:click="data.mylist=[1,2]">Test
- </a>
- </li>
- </ul>
+ <div ngm:swipe="test=3">Page2</div>
+ Test: {{test}}
</div>
</div>
+<div data-role="page" id="page2">
+<div data-role="content">
+ Page2 3
+
+</div>
+</div>
</body>
</html>
@@ -1,14 +1,4 @@
define(['angular'], function(angular) {
- describe("ngmClick", function() {
- it('should eval the expression when vclick is fired', function() {
- var element = angular.element('<span ngm:click="clicked = true"</span>');
- var scope = angular.compile(element)();
- element.trigger('vclick');
- expect(scope.clicked).toEqual(true);
- });
-
- });
-
describe("ngm:event", function() {
it('should eval the expression when the event is fired', function() {
@@ -32,4 +22,24 @@ define(['angular'], function(angular) {
});
});
+ describe("event shortcuts", function() {
+ it("should eval the expression when the event is fired", function() {
+ var events = {taphold:'taphold',swipe:'swipe', swiperight:'swiperight',
+ swipeleft:'swipeleft',
+ pagebeforeshow:'pagebeforeshow',
+ pagebeforehide:'pagebeforehide',
+ pageshow:'pageshow',
+ pagehide:'pagehide',
+ click:'vclick'
+ };
+ for (var event in events) {
+ var element = angular.element('<span ngm:'+event+'="executed=true"></span>');
+ var scope = angular.compile(element)();
+ element.trigger(events[event]);
+ expect(scope.executed).toEqual(true);
+ }
+
+ });
+ });
+
});

0 comments on commit 346a954

Please sign in to comment.