Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

readded paging

  • Loading branch information...
commit 902fd451ce4fa8d0f93f32f269158e2df073adc3 1 parent 120576c
Tobias Bosch authored
View
7 Changelog.md
@@ -5,11 +5,10 @@ Changelog
-------------
- Update to angular 1.0 and jquery 1.7
- ng-app directive of angular is required
-- `$navigate` expression was changed to a filter (note: the `$navigate` service was untouched by this).
+- `$navigate` expression was changed to the `navigate` filter (note: the `$navigate` service was untouched by this).
+- `paged` expression was changed to the `paged` filter.
- removed `iff` expression as it was only used internally and is now no more needed.
-- removed `$.mobile.globalScope` Use angular's `$rootScope` service instead.
-- removed `ngm:fadein` directive, as it is not related to mobile
-- TODO: The paging will change, as angular no more allows us to enhance list-expressions. Probably using filters.
+- removed `$.mobile.globalScope` as it was only used internally. Use angular's `$rootScope` service instead.
- updated the build process
- removed custom build of jquery mobile, as no patches are needed any more to work
with angular 1.0.
View
71 README.md
@@ -15,7 +15,7 @@ E.g. the select tag is enhanced by jquery mobile,
and if someone changes it's value programmatically, the refresh-function needs to be called.
Fixes the jquery mobile widgets so that they are correctly removed form the dom,
-when angular removes them (e.g. in a `ng:repeat`).
+when angular removes them (e.g. in a `ng-repeat`).
Provides special enhancements useful for mobile applications.
@@ -90,12 +90,12 @@ Scopes
Every page of jquery mobile gets a separate scope. The `$digest` of the global scope only evaluates the currently active page,
so there is no performance interaction between pages.
-For communicating between the pages use the `ngm:shared-controller` directive (see below).
+For communicating between the pages use the `ngm-shared-controller` directive (see below).
Widgets, Directives and Services
-----------
-### Directive ngm:shared-controller="name1:Controller1,name2:Controller2, ..."
+### Directive ngm-shared-controller="name1:Controller1,name2:Controller2, ..."
Mobile pages are small, so often a usecase is split up into multiple pages.
To share common behaviour and state between those pages, this directive allows shared controllers.
@@ -106,24 +106,32 @@ If the controller is used on more than one page, the instance of the controller
Note that the shared controller have the full scope functionality, e.g. for dependecy injection
or using `$watch`.
-### Directive ngm:event="{event1:'handler1',event2:'handler2',...}"
+### Directive ngm-event="{event1:'handler1',event2:'handler2',...}"
General event handler that integrates with jquery events, and also with jquery mobile events.
The value of the attribute is json and defines the event - handler mapping.
-Usage: E.g. `<a href="#" ngm:event="{swiperight:'myFn()'}">`
+Usage: E.g. `<a href="#" ngm-event="{swiperight:'myFn()'}">`
-### Event-Directives `ngm:click`, `ngm:tap`,`ngm:taphold`,`ngm:swipe`,`ngm:swiperight`,`ngm:swipeleft`,`ngm:pagebeforeshow`,`ngm:pagebeforehide`,`ngm:pageshow`,`ngm:pagehide`
+### 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.
+using the `ngm-event` directive with the corresponding event name.
-Usage: E.g. `<a href="#" ngm:swipeleft="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.
-This is especially useful at places where we cannot insert an `ng:switch` into the dom. E.g. jquery mobile
+### Directive ngm-fadein
+For smooth fadings between `ngm-if` changes, there is also the directive `ngm-fadein`.
+This specifies that the display of the coresponding element
+should be shown via a transition lasting a defined amount of milliseconds (the value of the attribute).
+
+Usage: E.g. `<div ngm-fadein="700">asdf</div>`
+
+
+### Attribute Widget @ngm-if
+The attribute widget `@ngm-if` allows to add/remove an element to/from the dom, depending on an expression.
+This is especially useful at places where we cannot insert an `ng-switch` into the dom. E.g. jquery mobile
does not allow elements between an `ul` and an `li` element.
-Usage: E.g. `<div ngm:if="myFlag">asdfasdf</div>`
+Usage: E.g. `<div ngm-if="myFlag">asdfasdf</div>`
### Service $navigate('[transition]:pageId'[,activateFn][,activateFnParam1, ...])
Service to change the given page.
@@ -154,13 +162,13 @@ Default messages are:
- `$.mobile.loadingMessage`: for all other cases
-### Filter $navigate
+### Filter `navigate`: Navigation in Expressions
Every expression can now use the `$navigate` as a filter to define the navigation outside of the controlers
in the html pages. By this, the controllers stay independent of the navigation process and is reusable.
Syntax: `test | $activate: 'outcome1:target' : 'outcome2:target' : ...`
-Example: `<button ngm-click="doSomething() | $navigate : 'success:successPage' : 'failure:failurePage'">`
+Example: `<button ngm-click="doSomething() | navigate : 'success:successPage' : 'failure:failurePage'">`
This navigates to that target whose outcome equals
to the test. The special outcomes `success` is applied for any value for `test` that is not `false` (e.g. also `undefined`),
@@ -170,33 +178,40 @@ the `done` / `fail` callback of the promise. Also, the `success` outcome is mapp
and the `failure` outcome to the `fail` callback.
-### Paging for lists
+### Filter `paged`: Paging for lists
Lists can be paged in the sense that more entries can be additionally loaded. By "loading" we mean the
display of a sublist of a list that is already fully loaded in JavaScript. This is useful, as the main performance
problems result from DOM operations, which can be reduced with this paging mechanism.
-To implement this paging mechaism, we extend the angular array type with the folling function:
-`angular.Array.paged(array[,filterExpr[,orderByExpr]])`:
+To implement this paging mechanism, the angular filter `paged` was created.
+For displaying a page within a list, simply use:
+
+ list | paged:{pageSize: 12, filter: someFilter, orderBy: someOrder})
This returns the subarray of the given filtered and ordered array with the currently loaded pages.
-The default page size is defined by `$.mobile.defaultListPageSize`. It can be overwritten by the property `pageSize`
-on arrays. For the filtering and sorting see the `angular.Array.filter` and `angular.Array.orderBy`.
+For the `filter` and `orderBy` parameter see the builtin angular filters `filter` and `orderBy`.
+The parameters `pageSize`, `filter` and `orderBy` are optional and can be combined in any order.
+If the pageSize is omitted, the default page size is used. This is by default 10, and can be configured using
+
+ module(["ng"]).value('defaultListPageSize', 123);
+
+To show a button that loads the next page of the list, use the following syntax:
+
+ <a href="#" ngm-if="list | paged:'hasMore'" ngm-click="list | paged:'loadMore'">Load More</a>
-The resulting list provides the following functions:
-- `hasMorePages()`: Returns a boolean indicating if there are more pages that can be loaded.
-- `loadNextPage()`: Loads the next page from the list that was given to `angular.Array.paged`.
+The filter `paged|'hasMore'` returns a boolean indicating if all pages of the list have been loaded.
+The filter `paged|'loadMore'` loads the next page into the list.
-Note that this will cache the result of two calls until the next eval cycle or a change to the filter or orderBy arguments.
+Note that this will cache the result of the paging, filtering and sorting until something changes.
+By this, paging should work fine also for large lists.
-As angular instruments all lists in expressions automatically with the functions form the `angular.Array` namespace,
-the function `paged` can directly be used in all angular expressions, with a `$` as prefix.
The following example shows an example for a paged list for the data in the variable `myList`:
<ul data-role="listview">
- <li ng:repeat="item in list.$paged()">{{item}}</li>
- <li ngm:if="list.$paged().hasMorePages()">
- <a href="#" ngm:click="list.$paged().loadNextPage()">Load more</a>
+ <li ng-repeat="item in list | paged:{pageSize:10}">{{item}}</li>
+ <li ngm-if="list | paged:'hasMore'">
+ <a href="#" ngm-click="list | paged:'loadMore'">Load more</a>
</li>
</ul>
View
7 src/main/webapp/jqm-angular.jsp
@@ -24,8 +24,5 @@
<jsp:include page="jqmng/widgets/jqmSelectMenu.js"/>
<jsp:include page="jqmng/widgets/jqmSlider.js"/>
<jsp:include page="jqmng/widgets/pageCompile.js"/>
-/*
-<%-- TODO
-jsp:include page="jqmng/paging.js"
---%>
-*/
+<jsp:include page="jqmng/paging.js"/>
+<jsp:include page="jqmng/fadein.js"/>
View
16 src/main/webapp/jqmng/fadein.js
@@ -0,0 +1,16 @@
+jqmng.define('jqmng/fadein',['angular'], function(angular) {
+ /*
+ * Directive that fades in an element when angular
+ * uses it. Useful in templating when the underlying template changed.
+ */
+ angular.module(["ng"]).directive("ngmFadein", function() {
+ return {
+ compile: function(element) {
+ element.css({opacity:0.1});
+ return function(scope, element, attrs) {
+ element.animate({opacity:1.0}, parseInt(attrs.ngmFadein));
+ }
+ }
+ };
+ });
+});
View
14 src/main/webapp/jqmng/navigate.js
@@ -81,10 +81,8 @@ jqmng.define('jqmng/navigate', ['jquery', 'angular'], function($, angular) {
var mod = angular.module('ng');
- mod.provider('$navigate', function() {
- this.$get = function() {
- return navigate;
- }
+ mod.factory('$navigate', function() {
+ return navigate;
});
function getIndexInStack(pageId) {
@@ -108,7 +106,7 @@ jqmng.define('jqmng/navigate', ['jquery', 'angular'], function($, angular) {
}
}]);
- mod.filter('$navigate', ['$navigate', function($navigateService) {
+ mod.filter('navigate', ['$navigate', function($navigateService) {
return function(test) {
// parse the arguments...
var outcomes = {};
@@ -144,12 +142,6 @@ jqmng.define('jqmng/navigate', ['jquery', 'angular'], function($, angular) {
};
}]);
- /**
- * Helper function to put the navigation part out of the controller into the page.
- * @param scope
- */
-
-
return navigate;
});
View
287 src/main/webapp/jqmng/paging.js
@@ -1,165 +1,156 @@
-/**
- * Paging Support for lists.
- * Note that this will cache the result of two calls until the next eval cycle
- * or a change to the filter or orderBy arguments.
- * <p>
- * Operations on the result:
- * - hasMorePages: returns whether there are more pages that can be loaded via loadNextPage
- * - loadNextPage: Loads the next page of the list
- *
- * Usage:
- <li ng:repeat="l in list.$paged()">{{l}}</li>
- <li ngm:if="list.$paged().hasMorePages()">
- <a href="#" ngm:click="list.$paged().loadNextPage()">Load more</a>
- </li>
- */
-jqmng.define('jqmng/paging', ['jquery', 'angular', 'jqmng/globalScope'], function($, angular, globalScope) {
- /**
- * The default page size for all lists.
- * Can be overwritten using array.pageSize.
- */
- if (!$.mobile.defaultListPageSize) {
- $.mobile.defaultListPageSize = 10;
- }
-
- var globalEvalId = 0;
- globalScope.onCreate(function(scope) {
- scope.$onEval(-99999, function() {
- globalEvalId++;
- });
- });
+jqmng.define('jqmng/paging', ['jquery', 'angular'], function ($, angular) {
- var enhanceFunctions = {
- init : init,
- refresh : refresh,
- refreshIfNeeded : refreshIfNeeded,
- setFilter : setFilter,
- setOrderBy : setOrderBy,
- loadNextPage : loadNextPage,
- hasMorePages : hasMorePages,
- reset : reset
- };
+ function pagedListFilterFactory(defaultListPageSize, filterFilter, orderByFilter) {
- var usedProps = {
- pageSize: true,
- originalList: true,
- refreshNeeded: true,
- filter: true,
- orderBy: true,
- loadedCount: true,
- availableCount: true,
- evalId: true
- }
+ function createPagedList(list) {
+ var enhanceFunctions = {
+ refreshIfNeeded:refreshIfNeeded,
+ setFilter:setFilter,
+ setOrderBy:setOrderBy,
+ setPageSize:setPageSize,
+ loadNextPage:loadNextPage,
+ hasMorePages:hasMorePages,
+ reset:reset,
+ refreshCount:0
+ };
+ var pagedList = [];
+ var pageSize, originalList, originalListClone, refreshNeeded, filter, orderBy, loadedCount, availableCount;
- function createPagedList(list) {
- var res = [];
- for (var fnName in enhanceFunctions) {
- res[fnName] = enhanceFunctions[fnName];
- }
- res.init(list);
- var oldHasOwnProperty = res.hasOwnProperty;
- res.hasOwnProperty = function(propName) {
- if (propName in enhanceFunctions || propName in usedProps) {
- return false;
+ for (var fnName in enhanceFunctions) {
+ pagedList[fnName] = enhanceFunctions[fnName];
}
- return oldHasOwnProperty.apply(this, arguments);
- }
- return res;
- }
+ init(list);
+ var oldHasOwnProperty = pagedList.hasOwnProperty;
+ pagedList.hasOwnProperty = function (propName) {
+ if (propName in enhanceFunctions) {
+ return false;
+ }
+ return oldHasOwnProperty.apply(this, arguments);
+ };
+ return pagedList;
- function init(list) {
- if (list.pageSize) {
- this.pageSize = list.pageSize;
- } else {
- this.pageSize = $.mobile.defaultListPageSize;
- }
- this.originalList = list;
- this.refreshNeeded = true;
- this.reset();
- }
+ function init(list) {
+ setPageSize(-1);
+ originalList = list;
+ originalListClone = [];
+ refreshNeeded = true;
+ reset();
+ }
- function refresh() {
- var list = this.originalList;
- if (this.filter) {
- list = angular.Array.filter(list, this.filter);
- }
- if (this.orderBy) {
- list = angular.Array.orderBy(list, this.orderBy);
- }
- var loadedCount = this.loadedCount;
- if (loadedCount<this.pageSize) {
- loadedCount = this.pageSize;
- }
- if (loadedCount>list.length) {
- loadedCount = list.length;
- }
- this.loadedCount = loadedCount;
- this.availableCount = list.length;
- var newData = list.slice(0, loadedCount);
- var spliceArgs = [0, this.length].concat(newData);
- this.splice.apply(this, spliceArgs);
- }
+ function refresh() {
+ var list = originalList;
+ originalListClone = [].concat(list);
+ if (filter) {
+ list = filterFilter(list, filter);
+ }
+ if (orderBy) {
+ list = orderByFilter(list, orderBy);
+ }
+ if (loadedCount < pageSize) {
+ loadedCount = pageSize;
+ }
+ if (loadedCount > list.length) {
+ loadedCount = list.length;
+ }
+ availableCount = list.length;
+ var newData = list.slice(0, loadedCount);
+ var spliceArgs = [0, pagedList.length].concat(newData);
+ pagedList.splice.apply(pagedList, spliceArgs);
+ pagedList.refreshCount++;
+ }
- function refreshIfNeeded() {
- if (this.evalId != globalEvalId) {
- this.refreshNeeded = true;
- this.evalId = globalEvalId;
- }
- if (this.refreshNeeded) {
- this.refresh();
- this.refreshNeeded = false;
- }
- return this;
- }
+ function refreshIfNeeded() {
+ if (originalList.length != originalListClone.length) {
+ refreshNeeded = true;
+ } else {
+ for (var i = 0; i < originalList.length; i++) {
+ if (originalList[i] !== originalListClone[i]) {
+ refreshNeeded = true;
+ break;
+ }
+ }
+ }
+ if (refreshNeeded) {
+ refresh();
+ refreshNeeded = false;
+ }
+ return pagedList;
+ }
- function setFilter(filterExpr) {
- if (!angular.Object.equals(this.filter, filterExpr)) {
- this.filter = filterExpr;
- this.refreshNeeded = true;
- }
- }
+ function setPageSize(newPageSize) {
+ if (!newPageSize || newPageSize < 0) {
+ newPageSize = defaultListPageSize;
+ }
+ if (newPageSize !== pageSize) {
+ pageSize = newPageSize;
+ refreshNeeded = true;
+ }
+ }
- function setOrderBy(orderBy) {
- if (!angular.Object.equals(this.orderBy, orderBy)) {
- this.orderBy = orderBy;
- this.refreshNeeded = true;
- }
- }
+ function setFilter(newFilter) {
+ if (!angular.equals(filter, newFilter)) {
+ filter = newFilter;
+ refreshNeeded = true;
+ }
+ }
- function loadNextPage() {
- this.loadedCount = this.loadedCount + this.pageSize;
- this.refreshNeeded = true;
- }
+ function setOrderBy(newOrderBy) {
+ if (!angular.equals(orderBy, newOrderBy)) {
+ orderBy = newOrderBy;
+ refreshNeeded = true;
+ }
+ }
- function hasMorePages() {
- this.refreshIfNeeded();
- return this.loadedCount < this.availableCount;
- }
+ function loadNextPage() {
+ loadedCount = loadedCount + pageSize;
+ refreshNeeded = true;
+ }
- function reset() {
- this.loadedCount = 0;
- this.refreshNeeded = true;
- }
+ function hasMorePages() {
+ refreshIfNeeded();
+ return loadedCount < availableCount;
+ }
- /**
- * Returns the already loaded pages.
- * Also includes filtering (second argument) and ordering (third argument),
- * as the standard angular way does not work with paging.
- *
- * Does caching: Evaluates the filter and order expression only once in an eval cycle.
- * ATTENTION: There can only be one paged list per original list.
- */
- angular.Array.paged = function(list, filter, orderBy) {
- var pagedList = list.pagedList;
- if (!pagedList) {
- pagedList = createPagedList(list);
- list.pagedList = pagedList;
+ function reset() {
+ loadedCount = 0;
+ refreshNeeded = true;
+ }
}
- pagedList.setFilter(filter);
- pagedList.setOrderBy(orderBy);
- pagedList.refreshIfNeeded();
- return pagedList;
- };
+ return function (list, param) {
+ if (!list) {
+ return list;
+ }
+ var pagedList = list.pagedList;
+ if (typeof param === 'string') {
+ if (!pagedList) {
+ return;
+ }
+ // commands do not create a new paged list nor do they change the attributes of the list.
+ if (param === 'loadMore') {
+ pagedList.loadNextPage();
+ } else if (param === 'hasMore') {
+ return pagedList.hasMorePages();
+ }
+ return;
+ }
+ if (!pagedList) {
+ pagedList = createPagedList(list);
+ list.pagedList = pagedList;
+ }
+ if (param) {
+ pagedList.setPageSize(param.pageSize);
+ pagedList.setFilter(param.filter);
+ pagedList.setOrderBy(param.orderBy);
+ }
+ pagedList.refreshIfNeeded();
+ return pagedList;
+ };
+ }
+
+ pagedListFilterFactory.$inject = ['defaultListPageSize', 'filterFilter', 'orderByFilter'];
+ var mod = angular.module(['ng']);
+ mod.constant('defaultListPageSize', 10);
+ mod.filter('paged', pagedListFilterFactory);
});
View
2  src/main/webapp/jqmng/waitDialog.js
@@ -126,7 +126,7 @@ jqmng.define('jqmng/waitDialog', ['jquery'], function($) {
var mod = angular.module('ng');
var rootScope;
- mod.service('$waitDialog', ['$rootScope', function($rootScope) {
+ mod.factory('$waitDialog', ['$rootScope', function($rootScope) {
rootScope = $rootScope;
return res;
}]);
View
4 src/test/webapp/UnitSpecRunner.html
@@ -32,10 +32,8 @@
<script src="unit/usecaseSpec.js" type="text/javascript"></script>
<script src="unit/disabledHandlingSpec.js" type="text/javascript"></script>
<script src="unit/navigateSpec.js" type="text/javascript"></script>
-
- <!-- TODO
<script src="unit/arrayPagingSpec.js" type="text/javascript"></script>
- -->
+ <script src="unit/fadeinSpec.js" type="text/javascript"></script>
<script>
$(function(doc) {
View
19 src/test/webapp/devSnippetPage.html
@@ -19,22 +19,21 @@
<script>
MainController = function ($scope) {
- $scope.fill = function () {
- this.items = [1, 2];
+ var list = [];
+ for (var i=0; i<100; i++) {
+ list.push(i);
}
+ $scope.list = list;
}
</script>
</head>
<body>
-<div data-role="page" id="start">
+<div data-role="page" id="start" ng:controller="MainController">
<div data-role="content">
- <a href="#page2" data-role="button">Page2</a>
- </div>
-</div>
-
-<div data-role="page" id="page2">
- <div data-role="content">
- Hello
+ <ul data-role="listview">
+ <div ngm-fadein="1000" ngm-if="test">Hello</div>
+ <button ng-click="test=true">Show it</button>
+ </ul>
</div>
</div>
View
152 src/test/webapp/unit/arrayPagingSpec.js
@@ -2,191 +2,185 @@ jqmng.require([
'angular'
], function(angular) {
describe("arrayPaging", function() {
+ var pagedFilter, injector;
+ beforeEach(function() {
+ injector = angular.injector(["ng"]);
+ pagedFilter = injector.get("pagedFilter");
+ });
+
function normalize(l) {
return l.slice(0, l.length);
}
- it('should cache the result between two calls', function() {
+ it('should return undefined for undefined', function() {
+ expect(pagedFilter(undefined)).toBeUndefined();
+ });
+
+ it('should cache the array between two calls if nothing changed', function() {
var l = ['11','12','13','14','15'];
- l.pageSize = 2;
var orderByFn = function(v) {
return v
};
- var p1 = angular.Array.paged(l, '1', orderByFn);
- expect(normalize(p1)).toEqual(['11','12']);
- l.shift();
- var p2 = angular.Array.paged(l, '1', orderByFn);
+ var p1 = pagedFilter(l, { pageSize: 2, filter: '1', orderBy: orderByFn});
+ var p2 = pagedFilter(l, { pageSize: 2, filter: '1', orderBy: orderByFn});
expect(p1).toBe(p2);
- expect(normalize(p2)).toEqual(['11','12']);
+ expect(normalize(p1)).toEqual(['11','12']);
+ expect(p1.refreshCount).toBe(1);
});
- it('should refresh when the global scope evals', function() {
+ it('should refresh when the list changes', function() {
var l = [1,2,3,4,5];
- l.pageSize = 2;
- var p1 = angular.Array.paged(l);
+ var p1 = pagedFilter(l, { pageSize: 2 });
expect(normalize(p1)).toEqual([1,2]);
l.shift();
- $.mobile.globalScope().$digest();
- var p2 = angular.Array.paged(l);
- expect(p1).toBe(p2);
+ var p2 = pagedFilter(l, { pageSize: 2 });
expect(normalize(p2)).toEqual([2,3]);
});
it('should refresh when the filter changes', function() {
var l = ['1','12','123'];
- l.pageSize = 2;
- var p1 = angular.Array.paged(l);
+ var p1 = pagedFilter(l, { pageSize: 2 });
expect(normalize(p1)).toEqual(['1','12']);
- l.shift();
- var p2 = angular.Array.paged(l, '1');
+ var p2 = pagedFilter(l, { pageSize: 2, filter: '2' });
expect(p1).toBe(p2);
expect(normalize(p2)).toEqual(['12', '123']);
});
it('should refresh when the orderBy changes', function() {
var l = ['1','12','123'];
- l.pageSize = 2;
var orderByFn1 = function(v) {
return v
};
var orderByFn2 = function(v) {
return -v
};
- var p1 = angular.Array.paged(l, '1', orderByFn1);
+ var p1 = pagedFilter(l, { pageSize: 2, orderBy: orderByFn1 });
expect(normalize(p1)).toEqual(['1','12']);
l.shift();
- var p2 = angular.Array.paged(l, '1', orderByFn2);
+ var p2 = pagedFilter(l, { pageSize: 2, orderBy: orderByFn2 });
expect(p1).toBe(p2);
expect(normalize(p2)).toEqual(['123', '12']);
});
it('should use the default page size if no page size defined', function() {
var l = [-1,-2];
- for (var i = 0; i < $.mobile.defaultListPageSize; i++) {
+ var defaultPageSize = injector.get('defaultListPageSize');
+ expect(defaultPageSize).toBe(10);
+ for (var i = 0; i < defaultPageSize; i++) {
l.push(i);
}
- var pagedList = angular.Array.paged(l);
- expect(pagedList.length).toEqual($.mobile.defaultListPageSize);
- expect(normalize(pagedList)).toEqual(l.slice(0, $.mobile.defaultListPageSize));
+ var pagedList = pagedFilter(l);
+ expect(pagedList.length).toEqual(defaultPageSize);
+ expect(normalize(pagedList)).toEqual(l.slice(0, defaultPageSize));
});
it('should use the given page size if defined', function() {
var l = [1,2,3,4];
- l.pageSize = 2;
- var pagedList = angular.Array.paged(l);
- expect(pagedList.length).toEqual(l.pageSize);
- expect(normalize(pagedList)).toEqual(l.slice(0, l.pageSize));
+ var pageSize = 2;
+ var pagedList = pagedFilter(l, {pageSize: pageSize});
+ expect(pagedList.length).toEqual(pageSize);
+ expect(normalize(pagedList)).toEqual(l.slice(0, pageSize));
});
it('should show the first page by default', function() {
var l = [1,2,3,4];
- l.pageSize = 2;
- var pagedList = angular.Array.paged(l);
- expect(normalize(pagedList)).toEqual(l.slice(0, l.pageSize));
+ var pagedList = pagedFilter(l, {pageSize: 2});
+ expect(normalize(pagedList)).toEqual(l.slice(0, 2));
});
- it('should load the next page via loadNextPage', function() {
+ it('should load the next page via loadMore', function() {
var l = [1,2,3,4,5];
- l.pageSize = 2;
- var pagedList = angular.Array.paged(l);
- pagedList.loadNextPage(l);
- pagedList = angular.Array.paged(l);
+ var pagedList = pagedFilter(l, {pageSize: 2});
+ pagedFilter(l, "loadMore");
+ pagedList = pagedFilter(l, {pageSize: 2});
expect(normalize(pagedList)).toEqual(l.slice(0, 4));
});
it('should load an incomplete last page', function() {
var l = [1,2,3];
- l.pageSize = 2;
- var pagedList = angular.Array.paged(l);
+ var pagedList = pagedFilter(l, {pageSize: 2});
expect(normalize(pagedList)).toEqual(l.slice(0, 2));
- pagedList.loadNextPage();
- pagedList = angular.Array.paged(l);
+ pagedFilter(l, "loadMore");
+ pagedList = pagedFilter(l, {pageSize: 2});
expect(normalize(pagedList)).toEqual(l.slice(0, 3));
});
it('should load a complete last page', function() {
var l = [1,2,3,4];
- l.pageSize = 2;
- var pagedList = angular.Array.paged(l);
+ var pagedList = pagedFilter(l, {pageSize: 2});
expect(normalize(pagedList)).toEqual(l.slice(0, 2));
- pagedList.loadNextPage(l);
- pagedList = angular.Array.paged(l);
+ pagedFilter(l, "loadMore");
+ pagedList = pagedFilter(l, {pageSize: 2});
expect(normalize(pagedList)).toEqual(l.slice(0, 4));
});
- it('should not do anything when loadNextPage is called at the end of the list', function() {
+ it('should not do anything when loadMore is called at the end of the list', function() {
var l = [1,2];
- l.pageSize = 2;
- var pagedList = angular.Array.paged(l);
- pagedList.loadNextPage();
- pagedList = angular.Array.paged(l);
+ var pagedList = pagedFilter(l, {pageSize: 2});
+ pagedFilter(l, "loadMore");
+ pagedList = pagedFilter(l, {pageSize: 2});
expect(normalize(pagedList)).toEqual(l.slice(0, 2));
});
it('should have more pages when not at the end of the list', function() {
var l = [1,2,3,4];
- l.pageSize = 2;
- var pagedList = angular.Array.paged(l);
- expect(pagedList.hasMorePages(l)).toBeTruthy();
+ pagedFilter(l, {pageSize: 2});
+ expect(pagedFilter(l, "hasMore")).toBeTruthy();
});
it('should not have more pages when exactly at the end of the list', function() {
var l = [1,2];
- l.pageSize = 2;
- var pagedList = angular.Array.paged(l);
- expect(pagedList.hasMorePages(l)).toBeFalsy();
+ pagedFilter(l, {pageSize: 2});
+ expect(pagedFilter(l, "hasMore")).toBeFalsy();
});
it('should have more pages when exactly at the end-1 of the list', function() {
var l = [1,2,3];
- l.pageSize = 2;
- var pagedList = angular.Array.paged(l);
- expect(pagedList).toBeTruthy();
+ pagedFilter(l, {pageSize: 2});
+ expect(pagedFilter(l, "hasMore")).toBeTruthy();
});
it('should reduce the entry count permanently when the page shrinks', function() {
var l = ['1','12','123'];
- l.pageSize = 2;
- angular.Array.paged(l).loadNextPage(l);
- expect(normalize(angular.Array.paged(l, '1'))).toEqual(['1','12','123']);
- expect(normalize(angular.Array.paged(l, '2'))).toEqual(['12','123']);
- expect(normalize(angular.Array.paged(l, '1'))).toEqual(['1','12']);
+ pagedFilter(l, {pageSize: 2});
+ pagedFilter(l, "loadMore");
+ expect(normalize(pagedFilter(l, {pageSize: 2, filter: '1'}))).toEqual(['1','12','123']);
+ expect(normalize(pagedFilter(l, {pageSize: 2, filter: '2'}))).toEqual(['12','123']);
+ expect(normalize(pagedFilter(l, {pageSize: 2, filter: '1'}))).toEqual(['1','12']);
});
it('should reduce the entry count permanently to the page size when the page shrinks lower than the page size', function() {
var l = ['1','12','123'];
- l.pageSize = 2;
- angular.Array.paged(l).loadNextPage(l);
- expect(normalize(angular.Array.paged(l, '3'))).toEqual(['123']);
- expect(normalize(angular.Array.paged(l, '1'))).toEqual(['1','12']);
+ pagedFilter(l, {pageSize: 2});
+ pagedFilter(l, "loadMore");
+ expect(normalize(pagedFilter(l, {pageSize: 2, filter: '3'}))).toEqual(['123']);
+ expect(normalize(pagedFilter(l, {pageSize: 2, filter: '1'}))).toEqual(['1','12']);
});
- it('should page and filter with the second argument', function() {
+ it('should page and filter', function() {
var l = [1,2,2,2,2];
- l.pageSize = 2;
- expect(normalize(angular.Array.paged(l, '2'))).toEqual([2,2]);
- angular.Array.paged(l, '2').loadNextPage();
- expect(normalize(angular.Array.paged(l, '2'))).toEqual([2,2,2,2]);
+ expect(normalize(pagedFilter(l, {pageSize: 2, filter: '2'}))).toEqual([2,2]);
+ pagedFilter(l, {pageSize: 2, filter: '2'});
+ pagedFilter(l, "loadMore");
+ expect(normalize(pagedFilter(l, {pageSize: 2, filter: '2'}))).toEqual([2,2,2,2]);
});
- it('should page and sort with the second and third argument', function() {
+ it('should page and sort', function() {
var l = [1,2,3,4];
- l.pageSize = 2;
var filterFn = function() {
return true;
};
var orderByFn = function(v) {
return -v
};
- expect(normalize(angular.Array.paged(l, filterFn, orderByFn))).toEqual([4,3]);
- angular.Array.paged(l, filterFn, orderByFn).loadNextPage(l);
- expect(normalize(angular.Array.paged(l, filterFn, orderByFn))).toEqual([4,3,2,1]);
+ expect(normalize(pagedFilter(l, {pageSize: 2, filter: filterFn, orderBy :orderByFn}))).toEqual([4,3]);
+ pagedFilter(l, "loadMore");
+ expect(normalize(pagedFilter(l, {pageSize: 2, filter: filterFn, orderBy :orderByFn}))).toEqual([4,3,2,1]);
});
it('should only have numbers as own attributes', function() {
var l = [1];
- l.pageSize = 2;
- var pagedList = angular.Array.paged(l, 'true', 'true');
+ var pagedList = pagedFilter(l, {pageSize: 2, filter: 'true', orderBy: 'true'});
for (var x in pagedList) {
if (pagedList.hasOwnProperty(x)) {
expect(x).toEqual("0");
View
18 src/test/webapp/unit/fadeinSpec.js
@@ -0,0 +1,18 @@
+jqmng.require(["unit/testUtils"], function(utils) {
+
+ describe("fadein", function() {
+ var d;
+ it('should fade the element in in the given amount of time', function() {
+ runs(function() {
+ d = utils.compileInPage('<button id="mysel" ngm-fadein="100">Test</button>');
+ expect(parseFloat(d.element.css('opacity')-0.1)).toBeLessThan(0.001);
+ });
+ waits(100);
+ runs(function() {
+ expect(parseFloat(d.element.css('opacity')-1)).toBeLessThan(0.001);
+ });
+ });
+
+ });
+
+});
View
16 src/test/webapp/unit/navigateSpec.js
@@ -72,39 +72,39 @@ jqmng.require(['angular'], function(angular) {
}
});
it('should navigate to the success outcome if result is not false', function() {
- scope.$apply("undefined | $navigate:'success:page1':'failure:page2'");
+ scope.$apply("undefined | navigate:'success:page1':'failure:page2'");
expect(navigateSpy).toHaveBeenCalledWith('page1');
});
it('should navigate to the failure outcome if result is false', function() {
- scope.$apply("false|$navigate:'success:page1':'failure:page2'");
+ scope.$apply("false| navigate:'success:page1':'failure:page2'");
expect(navigateSpy).toHaveBeenCalledWith('page2');
});
it('should navigate to the given outcome', function() {
- scope.$apply("'myout' | $navigate:'success:page1': 'failure:page2' : 'myout:page3'");
+ scope.$apply("'myout' | navigate:'success:page1': 'failure:page2' : 'myout:page3'");
expect(navigateSpy).toHaveBeenCalledWith('page3');
});
it('should navigate to the success outcome if promise is resolved', function() {
deferred.resolve();
- scope.$apply("deferResult() | $navigate:'success:page1' : 'failure:page2'");
+ scope.$apply("deferResult() | navigate:'success:page1' : 'failure:page2'");
expect(navigateSpy).toHaveBeenCalledWith('page1');
});
it('should navigate to the failure outcome if promise is rejected', function() {
deferred.reject();
- scope.$apply("deferResult() | $navigate:'success:page1' : 'failure:page2'");
+ scope.$apply("deferResult() | navigate:'success:page1' : 'failure:page2'");
expect(navigateSpy).toHaveBeenCalledWith('page2');
});
it('should navigate to the given outcome of the resolved promise', function() {
deferred.resolve('myout');
- scope.$apply("deferResult() | $navigate: 'success:page1' : 'failure:page2' : 'myout:page3'");
+ scope.$apply("deferResult() | navigate: 'success:page1' : 'failure:page2' : 'myout:page3'");
expect(navigateSpy).toHaveBeenCalledWith('page3');
});
it('should navigate to the given outcome of the rejected promise', function() {
deferred.reject('myout');
- scope.$apply("deferResult() | $navigate: 'success:page1' : 'failure:page2': 'myout:page3'");
+ scope.$apply("deferResult() | navigate: 'success:page1' : 'failure:page2': 'myout:page3'");
expect(navigateSpy).toHaveBeenCalledWith('page3');
});
it('should navigate to the given outcome with the given transition', function() {
- scope.$apply("'myout' | $navigate: 'success:page1' : 'failure:page2' : 'myout:transition1:page3'");
+ scope.$apply("'myout' | navigate: 'success:page1' : 'failure:page2' : 'myout:transition1:page3'");
expect(navigateSpy).toHaveBeenCalledWith('transition1:page3');
});
Please sign in to comment.
Something went wrong with that request. Please try again.