Changesets can be listed by changeset number.
The Git repository is here.
- Revision:
- 381
- Log:
Radiant is now packaged as a Gem - see Changeset #373, Changeset #374,
Changeset #375, Changeset #376, Changeset #377, Changeset #378,
Changeset #379 and Changeset #380. The application part of Radiant is
now mostly empty; it exists to provide a structure which hooks into the
gem and which provides a framework for extensions. Included in this big
changeset are all the deletions, additions and changes needed to go from
the old ROOL customised Radiant to a new ROOL customised Radiant, which
includes several custom extensions adapted from the old Radiant
modifications and requires Radiant 0.9.1 to be installed as a gem.
- Author:
- rool
- Date:
- Mon Mar 21 14:01:18 +0000 2011
- Size:
- 8663 Bytes
1 | /* |
2 | * status.js |
3 | * |
4 | * dependencies: prototype.js, effects.js, lowpro.js |
5 | * |
6 | * -------------------------------------------------------------------------- |
7 | * |
8 | * Allows you to display a status message when submiting a form. To use, |
9 | * simply add the following to application.js: |
10 | * |
11 | * Event.addBehavior({'form': Status.FormBehavior()}); |
12 | * |
13 | * And then add an "onsubmit_status" to each form that you want to display |
14 | * a status message on submit for: |
15 | * |
16 | * <form onsubmit_status="Saving changes" ...> |
17 | * |
18 | * Some code taken from popup.js. |
19 | * |
20 | * For more information, see: |
21 | * |
22 | * http://wiseheartdesign.com/articles/2009/12/16/statusjs-work-well-with-messages/ |
23 | * |
24 | * -------------------------------------------------------------------------- |
25 | * |
26 | * Copyright (c) 2008-2009, John W. Long |
27 | * Portions copyright (c) 2008, Five Points Solutions, Inc. |
28 | * |
29 | * Permission is hereby granted, free of charge, to any person obtaining a |
30 | * copy of this software and associated documentation files (the "Software"), |
31 | * to deal in the Software without restriction, including without limitation |
32 | * the rights to use, copy, modify, merge, publish, distribute, sublicense, |
33 | * and/or sell copies of the Software, and to permit persons to whom the |
34 | * Software is furnished to do so, subject to the following conditions: |
35 | * |
36 | * The above copyright notice and this permission notice shall be included in |
37 | * all copies or substantial portions of the Software. |
38 | * |
39 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
40 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
41 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL |
42 | * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
43 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING |
44 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER |
45 | * DEALINGS IN THE SOFTWARE. |
46 | * |
47 | */ |
48 | |
49 | var Status = { |
50 | CornerThickness: 12, |
51 | SpinnerImage: '/images/status_spinner.gif', |
52 | SpinnerImageWidth: 32, |
53 | SpinnerImageHeight: 33, |
54 | BackgroundImage: '/images/status_background.png', |
55 | TopLeftImage: '/images/status_top_left.png', |
56 | TopRightImage: '/images/status_top_right.png', |
57 | BottomLeftImage: '/images/status_bottom_left.png', |
58 | BottomRightImage: '/images/status_bottom_right.png', |
59 | MessageFontFamily: '"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif', |
60 | MessageFontSize: '14px', |
61 | MessageColor: '#e5e5e5', |
62 | Modal: false, |
63 | ModalOverlayColor: 'white', |
64 | ModalOverlayOpacity: 0.4 |
65 | }; |
66 | |
67 | Status.window = function() { |
68 | if (!this.statusWindow) this.statusWindow = new Status.Window(); |
69 | return this.statusWindow; |
70 | } |
71 | |
72 | Status.BackgroundImages = function() { |
73 | return $A([ |
74 | Status.SpinnerImage, |
75 | Status.BackgroundImage, |
76 | Status.TopLeftImage, |
77 | Status.TopRightImage, |
78 | Status.BottomLeftImage, |
79 | Status.BottomRightImage |
80 | ]); |
81 | } |
82 | |
83 | Status.preloadImages = function() { |
84 | if (!Status.imagesPreloaded) { |
85 | Status.BackgroundImages().each(function(src) { |
86 | var image = new Image(); |
87 | image.src = src; |
88 | }); |
89 | Status.preloadedImages = true; |
90 | } |
91 | } |
92 | |
93 | Status.FormBehavior = Behavior.create({ |
94 | initialize: function() { |
95 | var attr = this.element.attributes['data-onsubmit_status'] |
96 | if (attr) this.status = attr.value; |
97 | if (this.status) this.element.observe('submit', function() { showStatus(this.status) }.bind(this)); |
98 | } |
99 | }); |
100 | |
101 | Status.LinkBehavior = Behavior.create({ |
102 | initialize: function() { |
103 | var attr = this.element.attributes['data-onclick_status'] |
104 | if (attr) this.status = attr.value; |
105 | if (this.status) this.element.observe('click', function() { showStatus(this.status) }.bind(this)); |
106 | } |
107 | }); |
108 | |
109 | Status.Window = Class.create({ |
110 | initialize: function() { |
111 | Status.preloadImages(); |
112 | this.buildWindow(); |
113 | }, |
114 | |
115 | buildWindow: function() { |
116 | this.element = $table({'class': 'status_window', style: 'display: none; position: absolute; border-collapse: collapse; padding: 0px; margin: 0px; z-index: 10000'}); |
117 | var tbody = $tbody(); |
118 | this.element.insert(tbody) |
119 | |
120 | var top_row = $tr(); |
121 | top_row.insert($td({style: 'background: url(' + Status.TopLeftImage + '); height: ' + Status.CornerThickness + 'px; width: ' + Status.CornerThickness + 'px; padding: 0px'})); |
122 | top_row.insert($td({style: 'background: url(' + Status.BackgroundImage + '); height: ' + Status.CornerThickness + 'px; padding: 0px'})) |
123 | top_row.insert($td({style: 'background: url(' + Status.TopRightImage + '); height: ' + Status.CornerThickness + 'px; width: ' + Status.CornerThickness + 'px; padding: 0px'})); |
124 | tbody.insert(top_row); |
125 | |
126 | var content_row = $tr(); |
127 | content_row.insert($td({style: 'background: url(' + Status.BackgroundImage + '); width: ' + Status.CornerThickness + 'px; padding: 0px'}, '')); |
128 | this.content = $td({'class': 'status_content', style: 'background: url(' + Status.BackgroundImage + '); padding: 0px ' + Status.CornerThickness + 'px'}); |
129 | content_row.insert(this.content); |
130 | content_row.insert($td({style: 'background: url(' + Status.BackgroundImage + '); width: ' + Status.CornerThickness + 'px; padding: 0px'}, '')); |
131 | tbody.insert(content_row); |
132 | |
133 | var bottom_row = $tr(); |
134 | bottom_row.insert($td({style: 'background: url(' + Status.BottomLeftImage + '); height: ' + Status.CornerThickness + 'px; width: ' + Status.CornerThickness + 'px; padding: 0px'})); |
135 | bottom_row.insert($td({style: 'background: url(' + Status.BackgroundImage + '); height: ' + Status.CornerThickness + 'px; padding: 0px'})) |
136 | bottom_row.insert($td({style: 'background: url(' + Status.BottomRightImage + '); height: ' + Status.CornerThickness + 'px; width: ' + Status.CornerThickness + 'px; padding: 0px'})); |
137 | tbody.insert(bottom_row); |
138 | |
139 | this.spinner = $img({src: Status.SpinnerImage, width: Status.SpinnerImageWidth, height: Status.SpinnerImageHeight, alt: ''}); |
140 | this.status = $div({'class': 'status_message', style: 'color: ' + Status.MessageColor + '; font-family: ' + Status.MessageFontFamily + '; font-size: ' + Status.MessageFontSize}); |
141 | |
142 | var table = $table({border: 0, cellpadding: 0, cellspacing: 0, style: 'table-layout: auto'}, |
143 | $tbody( |
144 | $tr( |
145 | $td({style: 'width: ' + Status.SpinnerImageWidth + 'px'}, this.spinner), |
146 | $td({style: 'padding-left: ' + Status.CornerThickness + 'px'}, this.status) |
147 | ) |
148 | ) |
149 | ); |
150 | this.content.insert(table); |
151 | |
152 | var body = $$('body').first(); |
153 | body.insert(this.element); |
154 | }, |
155 | |
156 | setStatus: function(value) { |
157 | this.status.update(value) |
158 | }, |
159 | |
160 | getStatus: function() { |
161 | return this.status.innerHTML(); |
162 | }, |
163 | |
164 | show: function(modal) { |
165 | this.centerWindowInView(); |
166 | if (modal || Status.Modal) this._showModalOverlay(); |
167 | this.element.show(); |
168 | }, |
169 | |
170 | hide: function() { |
171 | this._hideModalOverlay(); |
172 | this.element.hide(); |
173 | }, |
174 | |
175 | toggle: function() { |
176 | if (this.visible()) { |
177 | this.hide(); |
178 | } else { |
179 | this.show(); |
180 | } |
181 | }, |
182 | |
183 | visible: function() { |
184 | return this.element.visible(); |
185 | }, |
186 | |
187 | centerWindowInView: function() { |
188 | var offsets = document.viewport.getScrollOffsets(); |
189 | this.element.setStyle({ |
190 | left: parseInt(offsets.left + (document.viewport.getWidth() - this.element.getWidth()) / 2) + 'px', |
191 | top: parseInt(offsets.top + (document.viewport.getHeight() - this.element.getHeight()) / 2.2) + 'px' |
192 | }); |
193 | }, |
194 | |
195 | _showModalOverlay: function() { |
196 | if (!this.overlay) { |
197 | this.overlay = $div({style: 'position: absolute; background-color: ' + Status.ModalOverlayColor + '; top: 0px; left: 0px; z-index: 100;'}); |
198 | this.overlay.setStyle('position: fixed'); |
199 | this.overlay.setOpacity(Status.ModalOverlayOpacity); |
200 | document.body.insert(this.overlay); |
201 | } |
202 | this.overlay.setStyle('height: ' + document.viewport.getHeight() + 'px; width: ' + document.viewport.getWidth() + 'px;'); |
203 | this.overlay.show(); |
204 | }, |
205 | |
206 | _hideModalOverlay: function() { |
207 | if (this.overlay) this.overlay.hide(); |
208 | } |
209 | }); |
210 | |
211 | Event.observe(document, 'dom:loaded', function() { |
212 | Status.preloadImages(); |
213 | }); |
214 | |
215 | // Sets the status to string |
216 | function setStatus(string) { |
217 | Status.window().setStatus(string); |
218 | if (Status.window().visible()) Status.window().centerWindowInView(); |
219 | } |
220 | |
221 | // Sets the status to string and shows the status window. If modal is passed |
222 | // as true a white transparent div that covers the entire page is positioned |
223 | // under the status window causing a diming effect and preventing stray mouse |
224 | // clicks. |
225 | function showStatus(string, modal) { |
226 | setStatus(string); |
227 | Status.window().show(modal); |
228 | } |
229 | |
230 | // Hides the status window |
231 | function hideStatus() { |
232 | Status.window().hide(); |
233 | } |