| 1 |
8 |
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">[ <a href="" onclick="img_popup('<% $name %>', <% $meta ? 1 : 0 %>); return false">Вставить картинку</a> ]</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> |
RSS Feed