...
41 | ```
42 |
43 | ## Manual watcher toggling
44 |
45 | In some cases you might want to disable or enable the watchers of some scope regardless of its position relative to the view port. This can be done easily by broadcasting an event to this scope (this will effect only scopes that have the `viewport-watch` directive on them):
46 |
47 | ```js
48 | scope.$broadcast('toggleWatchers', false); //turn off watchers
49 | scope.$broadcast('toggleWatchers', true); //turn watchers back on
50 | ```
51 |
52 | ## License
53 |
54 | The MIT License.
55 |
56 | See [LICENSE](https://github.com/shahata/angular-viewport-watch/blob/master/LICENSE)
57 |
--------------------------------------------------------------------------------
/angular-viewport-watch.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | (function() {
4 | viewportWatch.$inject = [ "scrollMonitor", "$timeout" ];
5 | function viewportWatch(scrollMonitor, $timeout) {
6 | var viewportUpdateTimeout;
7 | function debouncedViewportUpdate() {
8 | $timeout.cancel(viewportUpdateTimeout);
9 | viewportUpdateTimeout = $timeout(function() {
10 | scrollMonitor.update();
11 | }, 10);
12 | }
13 | return {
14 | restrict: "AE",
15 | link: function(scope, element, attr) {
16 | var elementWatcher = scrollMonitor.create(element, scope.$eval(attr.viewportWatch || "0"));
17 | function watchDuringDisable() {
18 | this.$$watchersBackup = this.$$watchersBackup || [];
19 | this.$$watchers = this.$$watchersBackup;
20 | var unwatch = this.constructor.prototype.$watch.apply(this, arguments);
21 | this.$$watchers = null;
22 | return unwatch;
23 | }
24 | function toggleWatchers(scope, enable) {
25 | var digest, current, next = scope;
26 | do {
27 | current = next;
28 | if (enable) {
29 | if (current.hasOwnProperty("$$watchersBackup")) {
30 | current.$$watchers = current.$$watchersBackup;
31 | delete current.$$watchersBackup;
32 | delete current.$watch;
33 | digest = !scope.$root.$$phase;
34 | }
35 | } else {
36 | if (!current.hasOwnProperty("$$watchersBackup")) {
37 | current.$$watchersBackup = current.$$watchers;
38 | current.$$watchers = null;
39 | current.$watch = watchDuringDisable;
40 | }
41 | }
42 | next = current.$$childHead;
43 | while (!next && current !== scope) {
44 | if (current.$$nextSibling) {
45 | next = current.$$nextSibling;
46 | } else {
47 | current = current.$parent;
48 | }
49 | }
50 | } while (next);
51 | if (digest) {
52 | scope.$digest();
53 | }
54 | }
55 | function disableDigest() {
56 | toggleWatchers(scope, false);
57 | }
58 | function enableDigest() {
59 | toggleWatchers(scope, true);
60 | }
61 | if (!elementWatcher.isInViewport) {
62 | scope.$evalAsync(disableDigest);
63 | debouncedViewportUpdate();
64 | }
65 | elementWatcher.enterViewport(enableDigest);
66 | elementWatcher.exitViewport(disableDigest);
67 | scope.$on("toggleWatchers", function(event, enable) {
68 | toggleWatchers(scope, enable);
69 | });
70 | scope.$on("$destroy", function() {
71 | elementWatcher.destroy();
72 | debouncedViewportUpdate();
73 | });
74 | }
75 | };
76 | }
77 | angular.module("angularViewportWatch", []).directive("viewportWatch", viewportWatch).value("scrollMonitor", window.scrollMonitor);
78 | })();
--------------------------------------------------------------------------------
/angular-viewport-watch.sublime-project:
--------------------------------------------------------------------------------
1 | {
2 | "folders":
3 | [
4 | {
5 | "path": ".",
6 | "folder_exclude_patterns": [".tmp", ".sass-cache", "dist", "maven", "coverage", "node_modules", ".bundle", "vendor"]
7 | }
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/app/images/svg-font-icons/wix-logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
17 |
20 | Watch Count:
21 | Digest Cycle Length:
22 |
23 |
29 |