root / ui / static / snf / js / views.js @ 8c923194
History | View | Annotate | Download (6.9 kB)
1 | 8d08f18a | Kostas Papadimitriou | ;(function(root){
|
---|---|---|---|
2 | 8d08f18a | Kostas Papadimitriou | |
3 | 8d08f18a | Kostas Papadimitriou | // root
|
4 | 8d08f18a | Kostas Papadimitriou | var root = root;
|
5 | 8d08f18a | Kostas Papadimitriou | |
6 | 8d08f18a | Kostas Papadimitriou | // setup namepsaces
|
7 | 8d08f18a | Kostas Papadimitriou | var snf = root.synnefo = root.synnefo || {};
|
8 | 8d08f18a | Kostas Papadimitriou | var models = snf.models = snf.models || {}
|
9 | 8d08f18a | Kostas Papadimitriou | var storage = snf.storage = snf.storage || {};
|
10 | 8d08f18a | Kostas Papadimitriou | var views = snf.views = snf.views || {}
|
11 | 8d08f18a | Kostas Papadimitriou | var util = snf.util = snf.util || {}
|
12 | 8d08f18a | Kostas Papadimitriou | |
13 | 8d08f18a | Kostas Papadimitriou | // shortcuts
|
14 | 8d08f18a | Kostas Papadimitriou | var bb = root.Backbone;
|
15 | 8d08f18a | Kostas Papadimitriou | |
16 | 8d08f18a | Kostas Papadimitriou | // logging
|
17 | 8d08f18a | Kostas Papadimitriou | var logger = new snf.logging.logger("SNF-VIEWS"); |
18 | 8d08f18a | Kostas Papadimitriou | var debug = _.bind(logger.debug, logger);
|
19 | 8d08f18a | Kostas Papadimitriou | |
20 | 8d08f18a | Kostas Papadimitriou | // Base view object
|
21 | 8d08f18a | Kostas Papadimitriou | views.View = bb.View.extend({ |
22 | 8d08f18a | Kostas Papadimitriou | // the main element of the view
|
23 | 8d08f18a | Kostas Papadimitriou | // view delegates show, visible, hide etc to this element
|
24 | 8d08f18a | Kostas Papadimitriou | view_id: false, |
25 | 8d08f18a | Kostas Papadimitriou | |
26 | 8d08f18a | Kostas Papadimitriou | el: 'body', |
27 | 8d08f18a | Kostas Papadimitriou | data_from: false, |
28 | 8d08f18a | Kostas Papadimitriou | selectors: {},
|
29 | 8d08f18a | Kostas Papadimitriou | |
30 | 8d08f18a | Kostas Papadimitriou | initialize: function() { |
31 | 8d08f18a | Kostas Papadimitriou | this.log = new snf.logging.logger("SNF-VIEWS:" + this.view_id); |
32 | 8d08f18a | Kostas Papadimitriou | }, |
33 | 122850c5 | Kostas Papadimitriou | |
34 | 8d08f18a | Kostas Papadimitriou | // is the view visible ?
|
35 | 8d08f18a | Kostas Papadimitriou | visible: function(){ |
36 | 8d08f18a | Kostas Papadimitriou | return $(this.el).is(":visible"); |
37 | 8d08f18a | Kostas Papadimitriou | }, |
38 | 8d08f18a | Kostas Papadimitriou | |
39 | 8d08f18a | Kostas Papadimitriou | // hide view
|
40 | 8d08f18a | Kostas Papadimitriou | hide: function() { |
41 | 8d08f18a | Kostas Papadimitriou | if (!this.visible()) { return this }; |
42 | 8d08f18a | Kostas Papadimitriou | return $(this.el).hide(); |
43 | 8d08f18a | Kostas Papadimitriou | }, |
44 | 8d08f18a | Kostas Papadimitriou | |
45 | 8d08f18a | Kostas Papadimitriou | // show view
|
46 | 8d08f18a | Kostas Papadimitriou | show: function() { |
47 | 8d08f18a | Kostas Papadimitriou | if (this.visible()) { return this }; |
48 | 8d08f18a | Kostas Papadimitriou | $(this.el).show(); |
49 | 8d08f18a | Kostas Papadimitriou | if (this.show_view) { this.show_view.apply(this, arguments)}; |
50 | 8d08f18a | Kostas Papadimitriou | }, |
51 | 8d08f18a | Kostas Papadimitriou | |
52 | 8d08f18a | Kostas Papadimitriou | sel: function(id) { |
53 | 8d08f18a | Kostas Papadimitriou | return this.$(this.selectors[id]); |
54 | 8d08f18a | Kostas Papadimitriou | }, |
55 | 8d08f18a | Kostas Papadimitriou | |
56 | 8d08f18a | Kostas Papadimitriou | // animations
|
57 | 8d08f18a | Kostas Papadimitriou | fadeIn: function(time, callback) { |
58 | 8d08f18a | Kostas Papadimitriou | $(this.el).fadeIn(time, callback); |
59 | 8d08f18a | Kostas Papadimitriou | return this.show(); |
60 | 8d08f18a | Kostas Papadimitriou | }, |
61 | 8d08f18a | Kostas Papadimitriou | |
62 | 8d08f18a | Kostas Papadimitriou | fadeOut: function(time, callback) { |
63 | 8d08f18a | Kostas Papadimitriou | $(this.el).fadeOut(time, callback); |
64 | 8d08f18a | Kostas Papadimitriou | return this.hide(); |
65 | 8d08f18a | Kostas Papadimitriou | } |
66 | 8d08f18a | Kostas Papadimitriou | }); |
67 | 8d08f18a | Kostas Papadimitriou | |
68 | 8d08f18a | Kostas Papadimitriou | |
69 | 8d08f18a | Kostas Papadimitriou | // overlays registry
|
70 | 8d08f18a | Kostas Papadimitriou | views._overlay_index = []; |
71 | 8d08f18a | Kostas Papadimitriou | |
72 | 8d08f18a | Kostas Papadimitriou | // overlay view helper
|
73 | 8d08f18a | Kostas Papadimitriou | views.Overlay = views.View.extend({ |
74 | 8d08f18a | Kostas Papadimitriou | view_id: 'overlay', |
75 | 8d08f18a | Kostas Papadimitriou | tpl_selector: '#generic-overlay-tpl', |
76 | 8d08f18a | Kostas Papadimitriou | css_class: 'overlay', |
77 | 8d08f18a | Kostas Papadimitriou | oneInstance: true, |
78 | 8d08f18a | Kostas Papadimitriou | fixed: false, |
79 | 8d08f18a | Kostas Papadimitriou | |
80 | 8d08f18a | Kostas Papadimitriou | |
81 | 8d08f18a | Kostas Papadimitriou | initialize: function(options, selector) { |
82 | 8d08f18a | Kostas Papadimitriou | this.defaults = {
|
83 | 8d08f18a | Kostas Papadimitriou | load: false, |
84 | 8d08f18a | Kostas Papadimitriou | closeOnClick: false, |
85 | 8d08f18a | Kostas Papadimitriou | mask: {
|
86 | 8d08f18a | Kostas Papadimitriou | color: "#444", |
87 | 8d08f18a | Kostas Papadimitriou | loadSpeed: 200, |
88 | 8d08f18a | Kostas Papadimitriou | opacity: 0.7 |
89 | 8d08f18a | Kostas Papadimitriou | } |
90 | 8d08f18a | Kostas Papadimitriou | } |
91 | 8d08f18a | Kostas Papadimitriou | |
92 | 8d08f18a | Kostas Papadimitriou | this.tpl_selector = selector || this.tpl_selector; |
93 | 8d08f18a | Kostas Papadimitriou | views.Overlay.__super__.initialize.apply(this);
|
94 | 8d08f18a | Kostas Papadimitriou | views._overlay_index.push(this);
|
95 | 8d08f18a | Kostas Papadimitriou | |
96 | 8d08f18a | Kostas Papadimitriou | this.options = _.extend(this.defaults, options); |
97 | 8d08f18a | Kostas Papadimitriou | this.options.clone = this.options.clone == undefined ? true : this.options.clonde; |
98 | 8d08f18a | Kostas Papadimitriou | this.options.fixed = this.fixed; |
99 | 8d08f18a | Kostas Papadimitriou | |
100 | 8d08f18a | Kostas Papadimitriou | this.options.onOpen = this.options.onOpen || function() {}; |
101 | 8d08f18a | Kostas Papadimitriou | this.options.onClose = this.options.onClose || function() {}; |
102 | 8d08f18a | Kostas Papadimitriou | this.options.beforeOpen = this.options.beforeOpen || function() {}; |
103 | 8d08f18a | Kostas Papadimitriou | this.options.beforeClose = this.options.beforeClose || function() {}; |
104 | 8d08f18a | Kostas Papadimitriou | this.el = this.create_element(); |
105 | 8d08f18a | Kostas Papadimitriou | this.el.hide();
|
106 | 8d08f18a | Kostas Papadimitriou | |
107 | 8d08f18a | Kostas Papadimitriou | var ajax_params = _.clone(this.options); |
108 | 8d08f18a | Kostas Papadimitriou | |
109 | 8d08f18a | Kostas Papadimitriou | ajax_params.onBeforeLoad = _.bind(this._beforeOpen, this); |
110 | 8d08f18a | Kostas Papadimitriou | ajax_params.onLoad = _.bind(this._onOpen, this); |
111 | 8d08f18a | Kostas Papadimitriou | ajax_params.onBeforeClose = _.bind(this._beforeClose, this); |
112 | 8d08f18a | Kostas Papadimitriou | ajax_params.onClose = _.bind(this._onClose, this); |
113 | 8d08f18a | Kostas Papadimitriou | ajax_params.oneInstance = this.oneInstance;
|
114 | 8d08f18a | Kostas Papadimitriou | // create overlay
|
115 | 8d08f18a | Kostas Papadimitriou | // TODO: does this return overlay object ?? (to avoid the next code line)
|
116 | 8d08f18a | Kostas Papadimitriou | $(this.el).overlay(ajax_params); |
117 | 8d08f18a | Kostas Papadimitriou | |
118 | 8d08f18a | Kostas Papadimitriou | this.overlay = $(this.el).overlay(); |
119 | 8d08f18a | Kostas Papadimitriou | this.append_css = this.options ? this.options.css_class ? this.options.css_class : "" : ""; |
120 | 8d08f18a | Kostas Papadimitriou | return this; |
121 | 8d08f18a | Kostas Papadimitriou | }, |
122 | 8d08f18a | Kostas Papadimitriou | |
123 | 8d08f18a | Kostas Papadimitriou | create_element: function() { |
124 | 8d08f18a | Kostas Papadimitriou | var el = undefined; |
125 | 8d08f18a | Kostas Papadimitriou | if (this.options.clone) { |
126 | 8d08f18a | Kostas Papadimitriou | el = $(this.tpl_selector).clone(); |
127 | 8d08f18a | Kostas Papadimitriou | } else {
|
128 | 8d08f18a | Kostas Papadimitriou | el = $(this.tpl_selector); |
129 | 8d08f18a | Kostas Papadimitriou | } |
130 | 8d08f18a | Kostas Papadimitriou | |
131 | 8d08f18a | Kostas Papadimitriou | // append content
|
132 | 8d08f18a | Kostas Papadimitriou | if (this.content_selector) { |
133 | 8d08f18a | Kostas Papadimitriou | var content = $(this.content_selector).clone(); |
134 | 8d08f18a | Kostas Papadimitriou | content.addClass("content");
|
135 | 8d08f18a | Kostas Papadimitriou | |
136 | 8d08f18a | Kostas Papadimitriou | if ($(el).find(".content").length) { |
137 | 8d08f18a | Kostas Papadimitriou | $(el).find(".content").replaceWith(content); |
138 | 8d08f18a | Kostas Papadimitriou | } |
139 | 8d08f18a | Kostas Papadimitriou | content.removeClass("hidden");
|
140 | 8d08f18a | Kostas Papadimitriou | } |
141 | 8d08f18a | Kostas Papadimitriou | |
142 | 8d08f18a | Kostas Papadimitriou | if (this.overlay_id) { |
143 | 8d08f18a | Kostas Papadimitriou | } |
144 | 8d08f18a | Kostas Papadimitriou | |
145 | 8d08f18a | Kostas Papadimitriou | $(el).addClass("overlay"); |
146 | 8d08f18a | Kostas Papadimitriou | if (this.css_class) { |
147 | 8d08f18a | Kostas Papadimitriou | $(el).addClass(this.css_class); |
148 | 8d08f18a | Kostas Papadimitriou | } |
149 | 8d08f18a | Kostas Papadimitriou | |
150 | 8d08f18a | Kostas Papadimitriou | if (this.options.clone) { |
151 | 8d08f18a | Kostas Papadimitriou | $("body").append(el); |
152 | 8d08f18a | Kostas Papadimitriou | } |
153 | 8d08f18a | Kostas Papadimitriou | |
154 | 8d08f18a | Kostas Papadimitriou | return el;
|
155 | 8d08f18a | Kostas Papadimitriou | }, |
156 | 8d08f18a | Kostas Papadimitriou | |
157 | 8d08f18a | Kostas Papadimitriou | set_title: function(title) { |
158 | 8d08f18a | Kostas Papadimitriou | if (title || this.title) { |
159 | 8d08f18a | Kostas Papadimitriou | $(this.el).find(".header .title").html(title || this.title) |
160 | 8d08f18a | Kostas Papadimitriou | } |
161 | 8d08f18a | Kostas Papadimitriou | }, |
162 | 8d08f18a | Kostas Papadimitriou | |
163 | 8d08f18a | Kostas Papadimitriou | set_subtitle: function(subtitle) { |
164 | 8d08f18a | Kostas Papadimitriou | if (subtitle || this.subtitle) { |
165 | 8d08f18a | Kostas Papadimitriou | $(this.el).find(".header .subtitle").html(subtitle || this.subtitle) |
166 | 8d08f18a | Kostas Papadimitriou | } |
167 | 8d08f18a | Kostas Papadimitriou | }, |
168 | 8d08f18a | Kostas Papadimitriou | |
169 | 8d08f18a | Kostas Papadimitriou | _beforeOpen: function() { |
170 | 8d08f18a | Kostas Papadimitriou | if (this.append_css) { |
171 | 8d08f18a | Kostas Papadimitriou | $(this.el).addClass(this.append_css); |
172 | 8d08f18a | Kostas Papadimitriou | } |
173 | 8d08f18a | Kostas Papadimitriou | |
174 | 8d08f18a | Kostas Papadimitriou | this.set_title();
|
175 | 8d08f18a | Kostas Papadimitriou | this.set_subtitle();
|
176 | 8d08f18a | Kostas Papadimitriou | |
177 | 8d08f18a | Kostas Papadimitriou | this.beforeOpen.apply(this, arguments); |
178 | 8d08f18a | Kostas Papadimitriou | this.options.beforeOpen.apply(this, arguments); |
179 | 8d08f18a | Kostas Papadimitriou | }, |
180 | 8d08f18a | Kostas Papadimitriou | |
181 | 8d08f18a | Kostas Papadimitriou | _onOpen: function() { |
182 | 8d08f18a | Kostas Papadimitriou | if ($(this.el).find(".closeme").length) { |
183 | 8d08f18a | Kostas Papadimitriou | $(this.el).find(".closeme").click(_.bind(function(){ |
184 | 8d08f18a | Kostas Papadimitriou | this.hide();
|
185 | 8d08f18a | Kostas Papadimitriou | }, this))
|
186 | 8d08f18a | Kostas Papadimitriou | } |
187 | 8d08f18a | Kostas Papadimitriou | this.onOpen.apply(this, arguments); |
188 | 8d08f18a | Kostas Papadimitriou | this.options.onOpen.apply(this, arguments); |
189 | 8d08f18a | Kostas Papadimitriou | }, |
190 | 8d08f18a | Kostas Papadimitriou | |
191 | 8d08f18a | Kostas Papadimitriou | _beforeClose: function() { |
192 | 8d08f18a | Kostas Papadimitriou | this.beforeClose.apply(this, arguments); |
193 | 8d08f18a | Kostas Papadimitriou | this.options.beforeClose.apply(this, arguments); |
194 | 8d08f18a | Kostas Papadimitriou | }, |
195 | 8d08f18a | Kostas Papadimitriou | |
196 | 8d08f18a | Kostas Papadimitriou | _onClose: function() { |
197 | 8d08f18a | Kostas Papadimitriou | if (this.append_css) { |
198 | 8d08f18a | Kostas Papadimitriou | $(this.el).removeClass(this.append_css); |
199 | 8d08f18a | Kostas Papadimitriou | } |
200 | 8d08f18a | Kostas Papadimitriou | this.onClose.apply(this, arguments); |
201 | 8d08f18a | Kostas Papadimitriou | this.options.onClose.apply(this, arguments); |
202 | 8d08f18a | Kostas Papadimitriou | }, |
203 | 8d08f18a | Kostas Papadimitriou | |
204 | 8d08f18a | Kostas Papadimitriou | beforeOpen: function () {}, |
205 | 8d08f18a | Kostas Papadimitriou | onOpen: function () {}, |
206 | 8d08f18a | Kostas Papadimitriou | beforeClose: function () {}, |
207 | 8d08f18a | Kostas Papadimitriou | onClose: function () {}, |
208 | 8d08f18a | Kostas Papadimitriou | |
209 | 8d08f18a | Kostas Papadimitriou | show: function() { |
210 | 8d08f18a | Kostas Papadimitriou | var hidden = false; |
211 | 8d08f18a | Kostas Papadimitriou | _.each(views._overlay_index, function(ovr){
|
212 | 8d08f18a | Kostas Papadimitriou | if (ovr == this) { return }; |
213 | 8d08f18a | Kostas Papadimitriou | if (ovr.visible()) {
|
214 | 8d08f18a | Kostas Papadimitriou | hidden = true;
|
215 | 8d08f18a | Kostas Papadimitriou | ovr.hide(); |
216 | 8d08f18a | Kostas Papadimitriou | } |
217 | 8d08f18a | Kostas Papadimitriou | }) |
218 | 8d08f18a | Kostas Papadimitriou | |
219 | 8d08f18a | Kostas Papadimitriou | if (hidden) {
|
220 | 8d08f18a | Kostas Papadimitriou | delay = 300;
|
221 | 8d08f18a | Kostas Papadimitriou | } else {
|
222 | 8d08f18a | Kostas Papadimitriou | delay = 0;
|
223 | 8d08f18a | Kostas Papadimitriou | } |
224 | 8d08f18a | Kostas Papadimitriou | |
225 | 8d08f18a | Kostas Papadimitriou | window.setTimeout(_.bind(function(){ this.overlay.load() }, this), delay) |
226 | 8d08f18a | Kostas Papadimitriou | return this; |
227 | 8d08f18a | Kostas Papadimitriou | }, |
228 | 8d08f18a | Kostas Papadimitriou | |
229 | 8d08f18a | Kostas Papadimitriou | hide: function() { |
230 | 8d08f18a | Kostas Papadimitriou | this.overlay.close();
|
231 | 8d08f18a | Kostas Papadimitriou | return this; |
232 | 8d08f18a | Kostas Papadimitriou | } |
233 | 8d08f18a | Kostas Papadimitriou | }); |
234 | 8d08f18a | Kostas Papadimitriou | |
235 | 8d08f18a | Kostas Papadimitriou | })(this); |