diff options
author | Kishore Subramanian | 2012-03-19 14:14:29 -0700 |
---|---|---|
committer | Kishore Subramanian | 2012-03-19 14:14:29 -0700 |
commit | ec58642a7b31165890eb5bef7d95ce59dd0c34a0 (patch) | |
tree | 32640021d0362314ee5898626a0721feca814154 /node_modules/montage/ui/feed-reader | |
parent | 9d364be255900e9bde02c4b254d145ec41fc78fb (diff) | |
download | ninja-ec58642a7b31165890eb5bef7d95ce59dd0c34a0.tar.gz |
Changes to Map and FeedReader
- Added traffic property to Map
- Support for show/hide traffic in the example
- Changed FeedReader to use only one DIV. No longer uses Repetition
- Support multiple modes in the Feed reader - timed/animated
Diffstat (limited to 'node_modules/montage/ui/feed-reader')
3 files changed, 91 insertions, 84 deletions
diff --git a/node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.js b/node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.js index 3d97eec7..72c5023e 100644 --- a/node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.js +++ b/node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.js | |||
@@ -8,6 +8,14 @@ var Montage = require("montage").Montage, | |||
8 | 8 | ||
9 | exports.FeedEntry = Montage.create(Component, { | 9 | exports.FeedEntry = Montage.create(Component, { |
10 | 10 | ||
11 | entry: {value: null} | 11 | _entry: {value: null}, |
12 | entry: { | ||
13 | get: function() { | ||
14 | return this._entry; | ||
15 | }, | ||
16 | set: function(value) { | ||
17 | this._entry = value; | ||
18 | } | ||
19 | } | ||
12 | 20 | ||
13 | }); | 21 | }); |
diff --git a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html index 646fd01e..e5251e0a 100644 --- a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html +++ b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html | |||
@@ -23,17 +23,7 @@ | |||
23 | } | 23 | } |
24 | } | 24 | } |
25 | }, | 25 | }, |
26 | 26 | ||
27 | "repetition": { | ||
28 | "module": "montage/ui/repetition.reel", | ||
29 | "name": "Repetition", | ||
30 | "properties": { | ||
31 | "element": {"#": "entries"}, | ||
32 | "contentController": {"@": "entriesController"}, | ||
33 | "isSelectionEnabled": true, | ||
34 | "orientation": "vertical" | ||
35 | } | ||
36 | }, | ||
37 | "feedEntry": { | 27 | "feedEntry": { |
38 | "module": "montage/ui/feed-reader/feed-entry.reel", | 28 | "module": "montage/ui/feed-reader/feed-entry.reel", |
39 | "name": "FeedEntry", | 29 | "name": "FeedEntry", |
@@ -42,27 +32,19 @@ | |||
42 | }, | 32 | }, |
43 | "bindings": { | 33 | "bindings": { |
44 | "entry": { | 34 | "entry": { |
45 | "boundObject": {"@": "repetition"}, | 35 | "boundObject": {"@": "owner"}, |
46 | "boundObjectPropertyPath": "objectAtCurrentIteration", | 36 | "boundObjectPropertyPath": "activeFeedEntry", |
47 | "oneway": true | 37 | "oneway": true |
48 | } | 38 | } |
49 | } | 39 | } |
50 | }, | 40 | }, |
51 | 41 | ||
52 | "owner": { | 42 | "owner": { |
53 | "module": "montage/ui/feed-reader/feed-reader.reel", | 43 | "module": "montage/ui/feed-reader/feed-reader.reel", |
54 | "name": "FeedReader", | 44 | "name": "FeedReader", |
55 | "properties": { | 45 | "properties": { |
56 | "element": {"#": "feed-reader"}, | 46 | "element": {"#": "feed-reader"} |
57 | "repetition": {"@": "repetition"} | 47 | } |
58 | }, | ||
59 | "bindings": { | ||
60 | "items": { | ||
61 | "boundObject": {"@": "repetition"}, | ||
62 | "boundObjectPropertyPath": "objects", | ||
63 | "oneway": true | ||
64 | } | ||
65 | } | ||
66 | } | 48 | } |
67 | 49 | ||
68 | } | 50 | } |
@@ -74,16 +56,8 @@ | |||
74 | } | 56 | } |
75 | 57 | ||
76 | .feed-entry { | 58 | .feed-entry { |
77 | display: none; | ||
78 | } | ||
79 | |||
80 | .montage-hidden { | ||
81 | display: none; | ||
82 | } | 59 | } |
83 | 60 | ||
84 | .active { | ||
85 | display: block; | ||
86 | } | ||
87 | 61 | ||
88 | </style> | 62 | </style> |
89 | 63 | ||
diff --git a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js index d5c9ca17..8fd9ae22 100644 --- a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js +++ b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js | |||
@@ -42,92 +42,117 @@ exports.FeedReader = Montage.create(Component, { | |||
42 | }, | 42 | }, |
43 | 43 | ||
44 | // time in ms between slides | 44 | // time in ms between slides |
45 | interval: {value: 3000, distinct: true}, | 45 | interval: {value: 3, distinct: true}, |
46 | |||
47 | repetition: {enumerable: false, value: null}, | ||
48 | 46 | ||
49 | maxEntries: {value: 10, distinct: true}, | 47 | maxEntries: {value: 10, distinct: true}, |
50 | entries: {value: null}, | ||
51 | |||
52 | |||
53 | _startLoading: { | ||
54 | value: function() { | ||
55 | //Notifier.show('Loading ... please wait', null, {top: this.element.style.top, left: this.element.style.left + 20}); | ||
56 | } | ||
57 | }, | ||
58 | |||
59 | _stopLoading: { | ||
60 | value: function() { | ||
61 | //Notifier.hide(); | ||
62 | } | ||
63 | }, | ||
64 | 48 | ||
49 | entries: {value: null}, | ||
65 | 50 | ||
66 | feedEntryTimer: {enumerable: false, value: null}, | 51 | _feedDisplayMode: {value: null}, |
67 | _items: { | 52 | feedDisplayMode: { |
68 | value: null | ||
69 | }, | ||
70 | items: { | ||
71 | get: function() { | 53 | get: function() { |
72 | return this._items; | 54 | return this._feedDisplayMode; |
73 | }, | 55 | }, |
74 | set: function(value) { | 56 | set: function(value) { |
75 | this._items = value; | 57 | this._feedDisplayMode = value; |
76 | // reset the counter | ||
77 | console.log('got items'); | ||
78 | this.activeIndex = 0; | ||
79 | |||
80 | if(this.feedEntryTimer) { | ||
81 | window.clearInterval(this.feedEntryTimer); | ||
82 | } | ||
83 | var self = this, maxEntries = self.maxEntries; | ||
84 | |||
85 | this.feedEntryTimer = setInterval(function() { | ||
86 | var index = self.activeIndex + 1; | ||
87 | if(index > maxEntries) { | ||
88 | index = 0; | ||
89 | } | ||
90 | if(index < 0) { | ||
91 | index = 0; | ||
92 | } | ||
93 | self.activeIndex = index; | ||
94 | |||
95 | }, this.interval); | ||
96 | } | 58 | } |
97 | }, | 59 | }, |
98 | 60 | ||
61 | |||
62 | feedEntryTimer: {enumerable: false, value: null}, | ||
63 | |||
64 | |||
65 | activeFeedEntry: {value: null}, | ||
99 | _activeIndex: {value: null}, | 66 | _activeIndex: {value: null}, |
100 | activeIndex: { | 67 | activeIndex: { |
101 | get: function() { | 68 | get: function() { |
102 | return this._activeIndex || 0; | 69 | return this._activeIndex || 0; |
103 | }, | 70 | }, |
104 | set: function(value) { | 71 | set: function(index) { |
105 | this._activeIndex = value; | 72 | if(this.entries) { |
106 | this.repetition.activeIndexes = [value]; | 73 | var max = this.entries.length-1; |
74 | if(index > max) { | ||
75 | index = 0; | ||
76 | } | ||
77 | if(index < 0) { | ||
78 | index = 0; | ||
79 | } | ||
80 | this._activeIndex = index; | ||
81 | this.activeFeedEntry = this.entries[this._activeIndex]; | ||
82 | } else { | ||
83 | this._activeIndex = 0; | ||
84 | } | ||
107 | } |