Line # Revision Author
1 3 ahitrov@rambler.ru %
2 % unless ($request->{images_staff_printed}) { # print that stuff only once per request ...
3 % $request->{images_staff_printed} = 1;
4 %
5 <style>
6 div.toolbar {
7 text-align: right;
8 height: 20px;
9 padding: 0 4px;
10 width:95%;
11 font-family: Arial;
12 font-size: 9pt
13 }
14 div.img_popup {
15 border: 1px solid <% $pr->{main_border_color} %>;
16 background: #fff;
17 font: 10px Arial;
18 text-align: center;
19 }
20 div.img_popup h1 {
21 font: 11px Tahoma, Arial;
22 margin: 0;
23 height: <% $pr->{title_h} %>px;
24 padding: 2px 4px;
25 background: <% $pr->{main_border_color} %>;
26 color: white;
27 font-weight: bold;
28 letter-spacing:1px;
29 }
30 div.img_popup div {
31 height: <% $pr->{h} + $pr->{img_padd}*2 %>;
32 }
33 div.img_popup img {
34 border: 0;
35 margin: <% $pr->{img_padd} %>px;
36 cursor: hand;
37 }
38 div.img_popup ul {
39 padding: 2px;
40 margin: 0;
41 margin-bottom: 0px;
42 height: <% $pr->{nav_h} %>;
43 }
44 div.img_popup ul li {
45 padding: 1px 4px;
46 margin: 0 3px;
47 display: inline;
48 border: 1px solid <% $pr->{nav_border_color} %>;
49 background: #fff;
50 cursor: hand;
51 }
52 div.img_popup ul li.a {
53 background: #ddd;
54 }
55 div.img_popup input {
56 margin: 0 5px 10px 5px;
57 height: <% $pr->{butt_h} %>;
58 width: 60px;
59 border: 1px solid <% $pr->{butt_border_color} %>;
60 background: #ddd;
61 }
62 </style>
63
64 <script>
65 function storeCaret(element) {
66 if (document.selection && document.selection.createRange) {
67 element.caretPos = document.selection.createRange().duplicate();
68 }
69 }
70
71 function insertText(text, el) {
72 if (el && el.caretPos) {
73 el.caretPos.text=text;
74 } else if (el && el.caretPos && el.selectionStart+1 && el.selectionEnd+1) {
75 el.value=el.value.substring(0,element.selectionStart)+text+el.value.substring(el.selectionEnd,el.value.length);
76 } else if (el) {
77 // in Mozilla and clones works only that...
78 el.value = text + el.value;
79 }
80 }
81
82 function img_popup(name, meta) {
83 // try to restore popup ...
84 var popup = document.getElementById("img_" +name);
85 if (popup) {
86 if (popup.style.display != 'none') {
87 hide_obj(popup);
88 } else {
89 show_obj(popup);
90 }
91 // or create new one ...
92 } else {
93 img_popup_create(name, meta);
94 }
95 }
96
97 function img_popup_create(name, meta) {
98 // current text field ...
99 var textarea = eval('document.form.' + name);
100
101 // create popup ...
102 var popup = document.createElement('div');
103 document.body.appendChild(popup);
104 popup.className = 'img_popup';
105 popup.setAttribute("id", "img_" + name);
106 var st = popup.style;
107
108 // allocate popup in text field area ...
109 var origin = textarea, p_top = 0, p_left = 0, p_width = 0, p_height = 0;
110 while (origin) {
111 p_top += origin.offsetTop;
112 p_left += origin.offsetLeft;
113 origin = origin.offsetParent;
114 }
115 // calculate coords ...
116 p_width = <% $pr->{w} + $pr->{img_padd}*2 + 2 %>;
117 p_height = <% $pr->{h} + $pr->{img_padd}*2 + 12 + $pr->{title_h} + $pr->{nav_h} + $pr->{butt_h} %>;
118 p_left += (textarea.offsetWidth - p_width)/2;
119 p_top += 20;
120
121 // apply coords ...
122 st.width = p_width + 'px';
123 st.height = p_height + 'px';
124 st.left = p_left + 'px';
125 st.position = 'absolute';
126 st.top = p_top + 'px';
127
128 // create content of popup ...
129
130 var img = eval('imgs_for_' + name);
131
132 var img_html = '<img id="img_src_' + name + '" src="' + img[0][0] + '" alt="' + img[0][4] + '" title="�������� ��� ��������">';
133
134 var html = '<h1>������� ��������</h1>' + '<div>' + img_html + '</div>' + '<ul>';
135 for (i=0;i<img.length;i++) {
136 html += '<li class="' + (i == 0 ? 'a' : '') + '" id="li_' + name + i + '"onclick="ch_img(this, \'' + name + '\', ' + i + ')">' + (i+1) + '</li>';
137 if (i == 7 || i == 15) {html += '</ul><ul>'}
138 }
139 html += '</ul><input type="button" id="insert_' + name + '" value="��������" title="�������� ��� ��������"><input type="button" id="cancel_' + name + '" value="������" title="������� ����"><input type="hidden" id="' + name + '_curr_img" value="0">';
140
141 // push content intop popup ...
142 popup.innerHTML = html;
143
144 // add iteractivity ...
145 var img_tag = document.getElementById("img_src_" + name);
146 var insert = document.getElementById("insert_" + name);
147 var cancel = document.getElementById("cancel_" + name);
148 add_handler(textarea, 'click', function () { hide_obj(popup) });
149 add_handler(cancel, 'click', function () { hide_obj(popup) });
150 add_handler(insert, 'click', function () { insert_img_code(name, textarea, meta); hide_obj(popup) });
151 add_handler(img_tag, 'click', function () { insert_img_code(name, textarea, meta); hide_obj(popup) });
152 }
153
154 function insert_img_code(name, textarea, meta) {
155 var img = eval('imgs_for_' + name);
156 var hidden = document.getElementById(name + '_curr_img');
157 if (hidden && textarea) {
158 var n = hidden.value; n = eval(n);
159 var text = meta ? '<img name="' + img[n][5] + '_' + eval(n+1) + '">' : '<img src="' + img[n][1] + '" width="' + img[n][2] + '" height="' + img[n][3] + '" alt="' + img[n][4] + '">';
160 insertText(text, textarea);
161 }
162 }
163
164 function add_handler(element, event_type, func) {
165 if (element.attachEvent) { // IE
166 element.attachEvent('on' + event_type, func);
167 } else if (element.addEventListener) { // W3C
168 element.addEventListener(event_type, func, false);
169 } else { // should not happen
170 element['on' + event_type] = func;
171 }
172 }
173
174 function show_obj(obj) {
175 obj.style.display = 'block'; obj.hidden = false;
176 }
177
178 function hide_obj(obj) {
179 obj.style.display = 'none'; obj.hidden = true;
180 }
181
182 function ch_img(li, name, n) {
183 var img = eval('imgs_for_' + name);
184 // unselect all image selectors ...
185 for (i=0;i<img.length;i++) {var l = document.getElementById('li_' + name + i); l.className = "";}
186 // select current selector ...
187 li.className = "a";
188 // change image ...
189 var i = document.getElementById("img_src_" + name); i.src = img[n][0]; i.alt = img[n][4];
190 // store current selected image ...
191 var hidden = eval(name + '_curr_img'); hidden.value = n;
192 }
193
194 </script>
195 %
196 % }
197 %
198 <script>
199 var imgs_for_<% $name %> = [<% join ", ", map {'["'.$_->mname.'", "'.$_->name.'", '.$_->w.', '.$_->h.', "'.$_->alt.'", "'.$_->{main_attr}.'"]'} @images %>];
200 </script>
201 <div class="toolbar">[&nbsp;<a href="" onclick="img_popup('<% $name %>', <% $meta ? 1 : 0 %>); return false">�������� ��������</a>&nbsp;]</div>
202 %
203 <%args>
204
205 $object => undef
206 $name => undef
207 $attrs => undef
208 $meta => undef
209
210 </%args>
211 <%init>
212
213 return unless ref $object;
214
215 # needed images ...
216 my %attrs = map {$_ => 1} ref $attrs eq 'ARRAY' ? @{$attrs} : ($attrs);
217
218 my @struct = grep {$attrs{$_->{attr}}} $object->structure;
219
220 my @images;
221 # get an images ...
222 for my $prop (@struct) {
223 if ($prop->{type} eq 'images') {
224 my @i = $object->get_pics($prop->{attr});
225 $_->{main_attr} = $prop->{attr} for @i;
226 push @images, @i;
227 } elsif ($prop->{type} eq 'image') {
228 my $i = $object->get_pic($prop->{attr}); next unless ref $i;
229 $i->{main_attr} = $prop->{attr};
230 push @images, $i;
231 }
232 }
233
234 return unless @images;
235
236 # max dimensions of image (for calculating popup size) ...
237 my ($w, $h);
238 for my $img (@images) {
239 $w = $img->mw if $img->mw > $w;
240 $h = $img->mh if $img->mh > $h;
241 }
242
243 # properties ...
244 my $pr = {
245 w => $w,
246 h => $h,
247 img_padd => 10,
248 title_h => 20,
249 nav_h => 30,
250 butt_h => 20,
251 main_border_color => '#777',
252 nav_border_color => '#aaa',
253 butt_border_color => '#999',
254 };
255
256 </%init>