Squiz Matrix  4.12.2
 All Data Structures Namespaces Functions Variables Pages
content_type_image_edit_fns.inc
1 <?php
18 require_once SQ_CORE_PACKAGE_PATH.'/content_type/content_type_edit_fns.inc';
19 
31 class Content_Type_Image_Edit_Fns extends Content_Type_Edit_Fns
32 {
33 
34 
39  function __construct()
40  {
41  parent::__construct();
42 
43  }//end constructor
44 
45 
55  function paintBackend(&$asset, $prefix)
56  {
57  if ($asset->writeAccess('attributes')) {
58  $am =& $GLOBALS['SQ_SYSTEM']->am;
59  $current_link = $am->getLink($asset->id, SQ_LINK_NOTICE, '', FALSE, 'image_link');
60 
61  if (empty($current_link)) {
62  $current_link['minorid'] = '';
63  }
64 
65  $display_fields = $GLOBALS['SQ_SYSTEM']->getUserPrefs($asset->type(), 'SQ_CONTENT_TYPE_IMAGE_FIELDS');
66  $defaults = $GLOBALS['SQ_SYSTEM']->getUserPrefs($asset->type(), 'SQ_CONTENT_TYPE_IMAGE_DEFAULTS');
67  $current_settings = $asset->attr('display_settings');
68 
69  if (empty($current_settings)) {
70  $asset->setAttrValue('on_click', $defaults['on_click']);
71  $asset->saveAttributes();
72  }
73  unset($defaults['on_click']);
74  // Sets default values from the user prefs
75  foreach ($defaults as $id => $value) {
76  // This may need to be changed, so that if the defaults are changed, the values of each
77  // Image follow suit. At the moment this will set the defaults on the first edit.
78  if (!isset($current_settings[$id])) {
79  $current_settings[$id] = $value;
80  }
81  }
82  ?>
83  <script type="text/javascript" src="<?php echo sq_web_path('lib').'/js/JsHttpConnector.js' ?>"></script>
84  <script type="text/javascript">
85  <?php echo $prefix; ?>_alt_text = '';
86  <?php echo $prefix; ?>_width_text = '';
87  <?php echo $prefix; ?>_height_text = '';
88  <?php echo $prefix; ?>_proportion_width = 1;
89  <?php echo $prefix; ?>_proportion_height = 1;
90 
91  function <?php echo $prefix; ?>_populateImageInfo(responseText) {
92  var imageInfo = var_unserialise(responseText);
93 
94  <?php echo $prefix; ?>_alt_text = imageInfo['alt'];
95  <?php echo $prefix; ?>_width_text = imageInfo['width'];
96  <?php echo $prefix; ?>_height_text = imageInfo['height'];
97  <?php echo $prefix; ?>_proportion_width = imageInfo['height'] / imageInfo['width'];
98  <?php echo $prefix; ?>_proportion_height = imageInfo['width'] / imageInfo['height'];
99  return;
100  };
101 
102  function <?php echo $prefix; ?>setImageInfo(id)
103  {
104  // put a random no in the url to overcome any caching
105  var url = '<?php echo sq_web_path('root_url').'/'.SQ_CONF_BACKEND_SUFFIX; ?>/?SQ_BACKEND_PAGE=main&backend_section=am&am_section=edit_asset&assetid=' + escape(id) + '&asset_ei_screen=image_info&ignore_frames=1&t=' + Math.random() * 1000;
106  JsHttpConnector.submitRequest(url, <?php echo $prefix; ?>_populateImageInfo);
107  };
108 
109  function <?php echo $prefix; ?>_id_changed()
110  {
111  var preview = document.getElementById('<?php echo $prefix; ?>_preview');
112  var new_id = document.getElementById('<?php echo $prefix; ?>_image_selection[assetid]').value;
113  if (new_id == '' || new_id == '0') {
114  preview.innerHTML = 'No Image Selected';
115  return;
116  }
117  <?php echo $prefix; ?>setImageInfo(new_id);
118  preview.innerHTML = '<img id="<?php echo $prefix; ?>_prev_image" src="./?a=' + new_id + '" />';
119  <?php echo $prefix; ?>_fit_changed();
120 
121  }//end id_changed()
122 
123  function <?php echo $prefix; ?>_prop_changed(elt)
124  {
125  if (elt.checked == true) {
126  <?php echo $prefix; ?>_dimension_changed(true);
127  }
128 
129  }//end prop_changed()
130 
131  function <?php echo $prefix; ?>_dimension_changed(use_width)
132  {
133  var use_props = document.getElementById('<?php echo $prefix; ?>_proportions').checked;
134  var height = 0;
135  var width = 0;
136  if (use_props == true) {
137  if (use_width) {
138  width = document.getElementById('<?php echo $prefix; ?>_width').value;
139  if (width == '') {
140  width = '400';
141  document.getElementById('<?php echo $prefix; ?>_width').value = width;
142  }
143  height = Math.round(width * <?php echo $prefix; ?>_proportion_width);
144  document.getElementById('<?php echo $prefix; ?>_height').value = height;
145  } else {
146  height = document.getElementById('<?php echo $prefix; ?>_height').value;
147  if (height == '') {
148  height = '400';
149  document.getElementById('<?php echo $prefix; ?>_height').value = height;
150  }
151  width = Math.round(height * <?php echo $prefix; ?>_proportion_height);
152  document.getElementById('<?php echo $prefix; ?>_width').value = width;
153  }
154  } else {
155  width = document.getElementById('<?php echo $prefix; ?>_width').value;
156  width = (width == '') ? '400' : width;
157  height = document.getElementById('<?php echo $prefix; ?>_height').value;
158  height = (height == '') ? '400' : height;
159  }
160  var td = document.getElementById('<?php echo $prefix; ?>_preview');
161  td.style.width = width;
162  td.style.height = height;
163  <?php echo $prefix; ?>_fit_changed();
164  }
165 
166  function <?php echo $prefix; ?>_fit_changed()
167  {
168  var checked = document.getElementById('<?php echo $prefix; ?>_fit').checked;
169  image = document.getElementById('<?php echo $prefix; ?>_prev_image');
170  if (image == null) return;
171  if (checked == true) {
172  var td = document.getElementById('<?php echo $prefix; ?>_preview');
173  image.style.width = td.style.width;
174  image.style.height = td.style.height;
175  } else {
176  image.style.width = '';
177  image.style.height = '';
178  }
179  }
180 
181  function <?php echo $prefix; ?>_change_caption(mode)
182  {
183  var cap_box = document.getElementById('<?php echo $prefix; ?>_caption');
184  if (mode == 'original') {
185  cap_box.disabled = '';
186  } else {
187  cap_box.disabled = 'disabled';
188  }
189  }
190  </script>
191  <table>
192  <tr>
193  <td id="<?php echo $prefix; ?>_preview" style="width: <?php echo $current_settings['width']; ?>px; height: <?php echo $current_settings['height']; ?>px; border: 1px solid black; text-align: center; margin-left: auto; margin-right: auto;" colspan="2"></td>
194  </tr>
195  </table>
196  <table>
197  <tr>
198  <td class="sq-backend-table-header" style="width: 250px;">Image:</td>
199  <td class="sq-backend-table-cell" style="width: 100%;">
200  <?php
201  if ($asset->writeAccess('links')) {
202  asset_finder($prefix.'_image_selection', $current_link['minorid'], Array('image' => 'D', 'image_variety' => 'D'), 'sq_sidenav', FALSE, $prefix.'_id_changed');
203  }
204  ?>
205  </td>
206  </tr>
207  <tr <?php echo (!$display_fields['caption_options']) ? 'style="display:none;"' : ''; ?>>
208  <td class="sq-backend-table-header" style="width: 250px;"><?php echo translate('caption'); ?>:</td>
209  <td class="sq-backend-table-cell">
210  <?php radio_button($prefix.'_caption_options', '0', !$current_settings['use_caption_attr'], $prefix.'_change_caption(\'original\');'); ?>
211  <?php hidden_field($prefix.'_caption_hidden', $current_settings['caption']); ?>
212  <?php $disabled_val = $current_settings['use_caption_attr'] ? ' disabled="disabled"' : ''; ?>
213  <?php text_box($prefix.'_caption', $current_settings['caption'], '50', '0', FALSE, 'onchange="document.getElementById(\''.$prefix.'_caption_hidden\').value = document.getElementById(\''.$prefix.'_caption\').value;" '.$disabled_val); ?>
214  <?php radio_button($prefix.'_caption_options', '1', $current_settings['use_caption_attr'], $prefix.'_change_caption(\'alt\');'); ?>
215  <?php label('Use Image Caption Attribute', $prefix.'_caption[\'alt\']'); ?>
216  </td>
217  </tr>
218  <tr <?php echo (!$display_fields['caption_position']) ? 'style="display:none;"' : ''; ?>>
219  <td class="sq-backend-table-header">Caption Position:</td>
220  <td class="sq-backend-table-cell">
221  <?php radio_button($prefix.'_caption_position', 'top', $current_settings['caption_position'] == 'top', '', 'id="'.$prefix.'_cap_pos_top_id'); ?>
222  <?php label('Top', $prefix.'_cap_pos_top_id'); ?>
223  <?php radio_button($prefix.'_caption_position', 'bottom', $current_settings['caption_position'] == 'bottom', '', 'id="'.$prefix.'_cap_pos_bottom_id'); ?>
224  <?php label('Bottom', $prefix.'_cap_pos_bottom_id'); ?>
225  </td>
226  </tr>
227  <tr <?php echo (!$display_fields['dimension_options']) ? 'style="display:none;"' : ''; ?>>
228  <td class="sq-backend-table-header" style="width: 100px;">Dimensions</td>
229  <td class="sq-backend-table-cell">
230  Width: <?php text_box($prefix.'_width', $current_settings['width'], '4', '0', FALSE, 'onchange="'.$prefix.'_dimension_changed(true);"'); ?>px
231  &nbsp;&nbsp;Height: <?php text_box($prefix.'_height', $current_settings['height'], '4', '0', FALSE, 'onchange="'.$prefix.'_dimension_changed(false);"'); ?>px
232  &nbsp;&nbsp;<?php check_box($prefix.'_proportions', '1', $current_settings['constrain_proportions'], $prefix.'_prop_changed(this);'); ?>
233  <?php label('Constrain Proportions', $prefix.'_prop'); ?>
234  &nbsp;&nbsp;<?php check_box($prefix.'_fit', '1', $current_settings['fit_dimensions'], $prefix.'_fit_changed();'); ?>
235  <?php label('Shrink/Stretch to Dimensions', $prefix.'_fit'); ?>
236  </td>
237  </tr>
238  <tr <?php echo (!$display_fields['on_click']) ? 'style="display:none;"' : ''; ?>>
239  <td class="sq-backend-table-header">On Clicking:</td>
240  <td class="sq-backend-table-cell">
241  <?php
242  $onclick = $asset->getAttribute('on_click');
243  $onclick->paint($prefix);
244  ?>
245  </td>
246  </tr>
247  <tr <?php echo (!$display_fields['html_layout']) ? 'style="display:none;"' : ''; ?>>
248  <td class="sq-backend-table-header">HTML Layout:</td>
249  <td class="sq-backend-table-cell">
250  <?php radio_button($prefix.'_html_layout', 'table', $current_settings['html_layout'] == 'table', '', 'id="'.$prefix.'_html_layout_table_id'); ?>
251  <?php label('Table', $prefix.'_html_layout_table_id'); ?>
252  <?php radio_button($prefix.'_html_layout', 'div', $current_settings['html_layout'] == 'div', '', 'id="'.$prefix.'_html_layout_div_id'); ?>
253  <?php label('Div', $prefix.'_html_layout_div_id'); ?>
254  </td>
255  </tr>
256 
257  <?php
258  ?>
259  </table>
260  <script type="text/javascript">
261  <?php echo $prefix; ?>_id_changed();
262  </script>
263  <?php
264  }//end if
265  return TRUE;
266 
267  }//end paintBackend()
268 
269 
281  function processBackend($link, &$asset, $prefix)
282  {
283  if ($asset->writeAccess('attributes')) {
284  $am =& $GLOBALS['SQ_SYSTEM']->am;
285  $current_link = $am->getLink($asset->id, SQ_LINK_NOTICE, '', FALSE, 'image_link');
286 
287  // Process Image Link
288  $img_assetid = NULL;
289  if (isset($_POST[$prefix.'_image_selection']['assetid'])) {
290  $img_assetid = $_POST[$prefix.'_image_selection']['assetid'];
291  // imageid changed, delete existing
292  if (!empty($current_link) && $img_assetid != $current_link['minorid']) {
293  $am->deleteAssetLink($current_link['linkid']);
294  }
295  // new imageid, but no link or different link, create new link
296  if (!empty($img_assetid) &&
297  (!isset($current_link['minorid']) || $img_assetid != $current_link['minorid'])
298  ) {
299  $new_screen_id = $_POST[$prefix.'_image_selection']['assetid'];
300  if (!empty($new_screen_id) || ($new_screen_id != '0')) {
301  $image = $am->getAsset($new_screen_id);
302  $new_link_id = $asset->createLink($image, SQ_LINK_NOTICE, 'image_link');
303  $current_link = $am->getLinkById($new_link_id);
304  }
305  }
306  }
307 
308  // Process the attributes
309  $current_settings = $asset->attr('display_settings');
310  $current_settings['width'] = isset($_POST[$prefix.'_width']) ? $_POST[$prefix.'_width'] : '400';
311  $current_settings['height'] = isset($_POST[$prefix.'_height']) ? $_POST[$prefix.'_height'] : '400';
312  $current_settings['caption'] = isset($_POST[$prefix.'_caption_hidden']) ? $_POST[$prefix.'_caption_hidden'] : 'Caption';
313  $current_settings['fit_dimensions'] = isset($_POST[$prefix.'_fit']);
314  $current_settings['use_caption_attr'] = array_get_index($_POST, $prefix.'_caption_options', FALSE);
315  if (isset($_POST[$prefix.'_caption_position'])) {
316  $current_settings['caption_position'] = $_POST[$prefix.'_caption_position'];
317  } else {
318  $current_settings['caption_position'] = 'bottom';
319  }
320  if (isset($_POST[$prefix.'_html_layout'])) {
321  $current_settings['html_layout'] = $_POST[$prefix.'_html_layout'];
322  } else {
323  $current_settings['html_layout'] = 'table';
324  }
325  $current_settings['constrain_proportions'] = isset($_POST[$prefix.'_proportions']);
326 
327  $onclick = $asset->getAttribute('on_click');
328  $onclick->process($prefix);
329 
330  $on_click_option = $onclick->value;
331  $image_linked = FALSE;
332  if ($on_click_option == 'new_window' || $on_click_option == 'current_window') {
333  $image_linked = TRUE;
334  }
335 
336  $asset->setAttrValue('display_settings', $current_settings);
337  $asset->setAttrValue('on_click', $onclick->value);
338 
339  if (empty($current_link) || empty($img_assetid)) {
340  $asset->setAttrValue('html', NULL);
341  return TRUE;
342  }//end if
343 
344  $current_image = $am->getAsset($current_link['minorid']);
345  $image_width = ($current_settings['fit_dimensions'] == TRUE) ? 'width: '.$current_settings['width'].'px;' : '';
346  $image_height = ($current_settings['fit_dimensions'] == TRUE) ? 'height: '.$current_settings['height'].'px;' : '';
347  $image_alt = $current_image->name;
348  if ($current_image instanceof Image) {
349  // Its an image, no problems here
350  $image_alt = $current_image->attr('alt');
351  } else {
352  // Image Variety, so some work to be done to get alt
353  $real_image = $am->getAsset($current_image->_imageid);
354  $image_alt = $real_image->attr('alt');
355  }
356  $classes = $GLOBALS['SQ_SYSTEM']->getUserPrefs($asset->type(), 'SQ_CONTENT_TYPE_IMAGE_CLASSES');
357  $caption = ($current_settings['use_caption_attr'] == TRUE) ? $current_image->attr('caption') : $current_settings['caption'];
358  $preview_classes = $GLOBALS['SQ_SYSTEM']->getUserPrefs($asset->type(), 'SQ_CONTENT_TYPE_IMAGE_PREVIEW');
359  ob_start();
360  if ($on_click_option == 'inline') {
361  // Print out js for showing the popup preview
362  ?>
363  <div class="<?php echo $preview_classes['surrounding_container']; ?>" id="<?php echo $prefix; ?>_roll_preview" style="visibility: hidden; z-index: 5; position: absolute; left">
364  <?php
365  if ($current_settings['html_layout'] == 'table') {
366  ?>
367  <table class="<?php echo $preview_classes['preview_image_table']; ?>">
368  <tr>
369  <td class="<?php echo $preview_classes['close_preview_cell']; ?>" onclick="<?php echo $prefix; ?>_preview_close()" style="cursor: pointer;">
370  Close
371  </td>
372  </tr>
373  <tr>
374  <td class="<?php echo $preview_classes['image_table_cell']; ?>">
375  <img src="./?a=<?php echo $current_image->id; ?>" class="<?php echo $preview_classes['image_tag']; ?>" />
376  </td>
377  </tr>
378  </table>
379  <?php
380  } else {
381  ?>
382  <div class="<?php echo $preview_classes['close_preview_div']; ?>" onclick="<?php echo $prefix; ?>_preview_close()" style="cursor: pointer;">
383  Close
384  </div>
385  <div class="<?php echo $preview_classes['image_div']; ?>">
386  <img src="./?a=<?php echo $current_image->id; ?>" class="<?php echo $preview_classes['image_tag']; ?>" />
387  </div>
388  <?php
389  }
390  ?>
391  </div>
392 
393  <script type="text/javascript">
394  /* Functions for Image Content Type: <?php echo $current_image->name; ?> */
395 
396  function <?php echo $prefix; ?>_find_posX()
397  {
398  obj = document.getElementById('<?php echo $prefix; ?>_img');
399  var curleft = 0;
400  if (obj.offsetParent) {
401  while (obj.offsetParent) {
402  curleft += obj.offsetLeft
403  obj = obj.offsetParent;
404  }
405  } else if (obj.x) {
406  curleft += obj.x;
407  }
408  return curleft;
409  }
410 
411  function <?php echo $prefix; ?>_find_posY()
412  {
413  obj = document.getElementById('<?php echo $prefix; ?>_img');
414  var curtop = 0;
415  if (obj.offsetParent) {
416  while (obj.offsetParent) {
417  curtop += obj.offsetTop
418  obj = obj.offsetParent;
419  }
420  } else if (obj.y) {
421  curtop += obj.y;
422  }
423  return curtop;
424  }
425 
426  function <?php echo $prefix; ?>_preview(evt)
427  {
428  var div = document.getElementById('<?php echo $prefix; ?>_roll_preview');
429  if (div.style.visibility != 'hidden') return;
430  var posx = 0;
431  var posy = 0;
432  posx = <?php echo $prefix; ?>_find_posX();
433  posy = <?php echo $prefix; ?>_find_posY();
434  div.style.left = posx + 'px';
435  div.style.top = posy + 'px';
436  div.style.visibility = '';
437  }
438 
439  function <?php echo $prefix; ?>_preview_close()
440  {
441  var div = document.getElementById('<?php echo $prefix; ?>_roll_preview');
442  div.style.visibility = 'hidden';
443  }
444 
445  </script>
446  <?php
447  }//end if
448 
449  if ($current_settings['html_layout'] == 'table') {
450  ?>
451  <table class="<?php echo $classes['surrounding_container']; ?>">
452  <?php
453  if ($current_settings['caption_position'] == 'top') {
454  ?>
455  <tr><td class="<?php echo $classes['caption_table_cell']; ?>"><?php echo $caption?></td></tr>
456  <?php
457  }
458  ?>
459  <tr>
460  <td class="<?php echo $classes['image_table_cell']; ?>" style="width:<?php echo $current_settings['width']; ?>px; height: <?php echo $current_settings['height']; ?>px;">
461  <?php
462  if ($image_linked) {
463  ?>
464  <a href="./?a=<?php echo $current_image->id; ?>"
465  <?php
466  if ($on_click_option == 'new_window') {
467  echo 'target="blank"';
468  }
469  ?>
470  >
471  <?php
472  }
473  ?>
474  <img id="<?php echo $prefix; ?>_img" src="./?a=<?php echo $current_image->id; ?>" style="<?php echo $image_width.$image_height; ?>" class="<?php echo $classes['image_tag']; ?>" alt="<?php echo $image_alt; ?>"
475  <?php
476  // Add onclick events for inline previewing
477  if ($on_click_option == 'inline') {
478  echo 'onclick="return '.$prefix.'_preview(event);"';
479  }
480  ?>
481  />
482  <?php
483  if ($image_linked) {
484  ?>
485  </a>
486  <?php
487  }
488  ?>
489  </td>
490  </tr>
491  <?php
492  if ($current_settings['caption_position'] == 'bottom') {
493  ?>
494  <tr><td class="<?php echo $classes['caption_table_cell']; ?>"><?php echo $caption ?></td></tr>
495  <?php
496  }
497  ?>
498  </table>
499  <?php
500  } else {
501  // we are using div html layout
502  ?>
503  <?php
504  if ($current_settings['caption_position'] == 'top') {
505  ?>
506  <div class="<?php echo $classes['caption_div']; ?>"><?php echo $caption ?></div>
507  <?php
508  }
509  ?>
510  <div class="<?php echo $classes['image_div']; ?>" style="width:<?php echo $current_settings['width']; ?>px; height: <?php echo $current_settings['height']; ?>px;">
511  <?php
512  if ($image_linked) {
513  ?>
514  <a href="./?a=<?php echo $current_image->id; ?>"
515  <?php
516  if ($on_click_option == 'new_window') {
517  echo 'target="blank"';
518  }
519  ?>
520  >
521  <?php
522  }
523  ?>
524  <img id="<?php echo $prefix; ?>_img" src="./?a=<?php echo $current_image->id; ?>" style="<?php echo $image_width.$image_height; ?>" class="<?php echo $classes['image_tag']; ?>" alt="<?php echo $image_alt; ?>"
525  <?php
526  // Add onclick events for inline previewing
527  if ($on_click_option == 'inline') {
528  echo 'onclick="return '.$prefix.'_preview(event);"';
529  }
530  ?>
531  />
532  <?php
533  if ($image_linked) {
534  ?>
535  </a>
536  <?php
537  }
538  ?>
539  </div>
540  <?php
541  if ($current_settings['caption_position'] == 'bottom') {
542  ?>
543  <div class="<?php echo $classes['caption_div']; ?>"><?php echo $caption ?></div>
544  <?php
545  }
546  ?>
547  <?php
548  }//end else
549  $html = ob_get_contents();
550  ob_end_clean();
551  $asset->setAttrValue('html', $html);
552  }//end if
553 
554  return TRUE;
555 
556  }//end processBackend()
557 
558 
559 }//end class
560 
561 ?>