diff options
| -rw-r--r-- | inc/media.php | 279 | ||||
| -rw-r--r-- | lib/scripts/media.js | 29 | ||||
| -rw-r--r-- | lib/tpl/default/mediamanager.css | 33 |
3 files changed, 288 insertions, 53 deletions
diff --git a/inc/media.php b/inc/media.php index 138eb26c2..5e12ac8a6 100644 --- a/inc/media.php +++ b/inc/media.php @@ -725,9 +725,15 @@ function media_tab_view($image, $ns, $auth=null, $rev=false) { echo '</div>'; echo '<div class="scroll-container">'; - $meta = new JpegMeta(mediaFN($image, $rev)); - media_preview($image, $auth, $rev, $meta); - media_details($image, $auth, $rev, $meta); + if ($image && $auth >= AUTH_READ) { + $meta = new JpegMeta(mediaFN($image, $rev)); + media_preview($image, $auth, $rev, $meta); + media_preview_buttons($image, $auth, $rev); + media_details($image, $auth, $rev, $meta); + + } else { + echo '<div class="nothing">'.$lang['media_perm_read'].'</div>'; + } echo '</div>'; } @@ -787,12 +793,37 @@ function media_tab_history($image, $ns, $auth=null) { */ function media_preview($image, $auth, $rev=false, $meta=false) { global $lang; - if (!$image) return ''; - if ($auth < AUTH_READ) { - echo '<div class="nothing">'.$lang['media_perm_read'].'</div>'.NL; - return ''; + + echo '<div class="mediamanager-preview">'; + + $size = media_image_preview_size($image, $rev, $meta); + + if ($size) { + $more = ''; + if ($rev) { + $more = "rev=$rev"; + } else { + $t = @filemtime(mediaFN($image)); + $more = "t=$t"; + } + + $more .= '&w='.$size[0].'&h='.$size[1]; + + $src = ml($image, $more); + echo '<img src="'.$src.'" alt="" width="99%" style="max-width: '.$size[0].'px;" />'; } + echo '</div>'; +} + +/** + * Prints mediafile action buttons + * + * @author Kate Arzamastseva <pshns@ukr.net> + */ +function media_preview_buttons($image, $auth, $rev=false) { + global $lang; + echo '<div class="mediamanager-preview">'; $more = ''; @@ -804,40 +835,29 @@ function media_preview($image, $auth, $rev=false, $meta=false) { } $link = ml($image,$more,true,'&'); - if (preg_match("/\.(jpe?g|gif|png)$/", $image)) { - $info = getimagesize(mediaFN($image, $rev)); - $w = (int) $info[0]; - $h = (int) $info[1]; - - $size = 500; - if($meta && ($w > $size || $h > $size)){ - $ratio = $meta->getResizeRatio($size, $size); - $w = floor($w * $ratio); - $h = floor($h * $ratio); - $more .= "&h=$h&w=$w"; - } - - $src = ml($image, $more); - echo '<img src="'.$src.'" alt="" width="99%" style="max-width: '.$w.'px;" /><br /><br />'; - } - + // view original file button $form = new Doku_Form(array('action'=>$link, 'target'=>'_blank')); $form->addElement(form_makeButton('submit','',$lang['mediaview'])); $form->printForm(); - // delete button if($auth >= AUTH_DELETE && !$rev){ + + // delete button $form = new Doku_Form(array('id' => 'mediamanager__btn_delete', 'action'=>media_managerURL(array('delete' => $image), '&'))); $form->addElement(form_makeButton('submit','',$lang['btn_delete'])); $form->printForm(); + // upload new version button $form = new Doku_Form(array('id' => 'mediamanager__btn_update', 'action'=>media_managerURL(array('image' => $image, 'mediado' => 'update'), '&'))); $form->addElement(form_makeButton('submit','',$lang['media_update'])); $form->printForm(); } + if($auth >= AUTH_DELETE && $rev){ + + // restore button $form = new Doku_Form(array('id' => 'mediamanager__btn_restore', 'action'=>media_managerURL(array('image' => $image), '&'))); $form->addHidden('mediado','restore'); @@ -845,22 +865,19 @@ function media_preview($image, $auth, $rev=false, $meta=false) { $form->addElement(form_makeButton('submit','',$lang['media_restore'])); $form->printForm(); } + echo '</div>'; } /** - * Prints mediafile tags + * Returns mediafile tags * * @author Kate Arzamastseva <pshns@ukr.net> + * @param JpegMeta $meta + * @return array */ -function media_details($image, $auth, $rev=false, $meta=false) { - global $lang, $config_cascade; - - if (!$image) return ''; - if ($auth < AUTH_READ) { - echo '<div class="nothing">'.$lang['media_perm_read'].'</div>'.NL; - return ''; - } +function media_file_tags($meta) { + global $config_cascade; // load the field descriptions static $fields = null; @@ -871,19 +888,39 @@ function media_details($image, $auth, $rev=false, $meta=false) { } } - if (!$meta) $meta = new JpegMeta(mediaFN($image, $rev)); + $tags = array(); - echo '<dl class="img_tags">'; foreach($fields as $key => $tag){ $t = array(); if (!empty($tag[0])) $t = array($tag[0]); if(is_array($tag[3])) $t = array_merge($t,$tag[3]); - $value = media_getTag($t, $meta, '-'); - $value = cleanText($value); - echo '<dt>'.$lang[$tag[1]].':</dt><dd>'; - if ($tag[2] == 'date') echo dformat($value); - else echo hsc($value); - echo '</dd>'; + $value = media_getTag($t, $meta); + $tags[] = array('tag' => $tag, 'value' => $value); + } + + return $tags; +} + +/** + * Prints mediafile tags + * + * @author Kate Arzamastseva <pshns@ukr.net> + */ +function media_details($image, $auth, $rev=false, $meta=false) { + global $lang; + + if (!$meta) $meta = new JpegMeta(mediaFN($image, $rev)); + $tags = media_file_tags($meta); + + echo '<dl class="img_tags">'; + foreach($tags as $tag){ + if ($tag['value']) { + $value = cleanText($tag['value']); + echo '<dt>'.$lang[$tag['tag'][1]].':</dt><dd>'; + if ($tag['tag'][2] == 'date') echo dformat($value); + else echo hsc($value); + echo '</dd>'; + } } echo '</dl>'; } @@ -970,20 +1007,156 @@ function _media_image_diff($data) { * @author Kate Arzamastseva <pshns@ukr.net> */ function media_image_diff($image, $l_rev, $r_rev, $ns, $auth){ - $l_meta = new JpegMeta(mediaFN($image, $l_rev)); - $r_meta = new JpegMeta(mediaFN($image, $r_rev)); + global $lang, $config_cascade; - echo '<ul class="mediamanager-table-50"><li><div>'; + echo '<ul class="mediamanager-table-50">'; + + echo '<li>'; media_preview($image, $auth, $l_rev, $l_meta); - echo '</div></li>'; - echo '<li><div>'; + echo '</li>'; + + echo '<li>'; media_preview($image, $auth, $r_rev, $r_meta); - echo '</div></li><li><div>'; - media_details($image, $auth, $l_rev, $l_meta); - echo '</div></li>'; - echo '<li><div>'; - media_details($image, $auth, $r_rev, $r_meta); - echo '</div></li></ul>'; + echo '</li>'; + + echo '<li>'; + media_preview_buttons($image, $auth, $l_rev); + echo '</li>'; + + echo '<li>'; + media_preview_buttons($image, $auth, $r_rev); + echo '</li>'; + + $l_meta = new JpegMeta(mediaFN($image, $l_rev)); + $r_meta = new JpegMeta(mediaFN($image, $r_rev)); + + $l_tags = media_file_tags($l_meta); + $r_tags = media_file_tags($r_meta); + foreach ($l_tags as $key => $l_tag) { + if ($l_tag['value'] != $r_tags[$key]['value']) { + $r_tags[$key]['class'] = 'highlighted'; + $l_tags[$key]['class'] = 'highlighted'; + } else if (!$l_tag['value'] || !$r_tags[$key]['value']) { + unset($r_tags[$key]); + unset($l_tags[$key]); + } + } + + foreach(array($l_tags,$r_tags) as $tags){ + echo '<li><div>'; + + echo '<dl class="img_tags">'; + foreach($tags as $tag){ + $value = cleanText($tag['value']); + if (!$value) $value = '-'; + echo '<dt>'.$lang[$tag['tag'][1]].':</dt>'; + echo '<dd class="'.$tag['class'].'" >'; + if ($tag['tag'][2] == 'date') echo dformat($value); + else echo hsc($value); + echo '</dd>'; + } + echo '</dl>'; + + echo '</div></li>'; + } + + echo '</ul>'; + + media_image_diff_opacity($image, $l_rev, $r_rev, $l_meta); + media_image_diff_portions($image, $l_rev, $r_rev, $l_meta); +} + +/** + * Returns image width and height for mediamanager preview panel + * + * @author Kate Arzamastseva <pshns@ukr.net> + * @param string $image + * @param int $rev + * @param JpegMeta $meta + * @return array + */ +function media_image_preview_size($image, $rev, $meta) { + if (!preg_match("/\.(jpe?g|gif|png)$/", $image)) return false; + + $info = getimagesize(mediaFN($image, $rev)); + $w = (int) $info[0]; + $h = (int) $info[1]; + + $size = 500; + if($meta && ($w > $size || $h > $size)){ + $ratio = $meta->getResizeRatio($size, $size); + $w = floor($w * $ratio); + $h = floor($h * $ratio); + } + return array($w, $h); +} + +/** + * Prints two images side by side + * and slider to change the opacity + * of one of the images + * + * @author Kate Arzamastseva <pshns@ukr.net> + * @param string $image + * @param int $l_rev + * @param int $r_rev + * @param JpegMeta $meta + */ +function media_image_diff_opacity($image, $l_rev, $r_rev, $meta) { + $l_size = media_image_preview_size($image, $l_rev, $meta); + $r_size = media_image_preview_size($image, $r_rev, $meta); + + if (!$l_size || !$r_size || $l_size != $r_size || $l_size[0] < 30) return ''; + + echo '<div class="mediamanager-preview">'; + + $l_more = 'rev='.$l_rev.'&h='.$l_size[1].'&w='.$l_size[0]; + $r_more = 'rev='.$r_rev.'&h='.$l_size[1].'&w='.$l_size[0]; + + $l_src = ml($image, $l_more); + $r_src = ml($image, $r_more); + + echo '<div id="mediamanager__diff_opacity_image1" style="background-image: url(\''.$l_src.'\'); max-width: '.$l_size[0].'px; height: '.$l_size[1].'px; " >'; + echo '<div id="mediamanager__diff_opacity_image2" style="background-image: url(\''.$r_src.'\'); max-width: '.$l_size[0].'px; height: '.$l_size[1].'px; " >'; + echo '</div>'; + echo '</div>'; + + echo '<div id="mediamanager__opacity_slider" style="max-width: '.($l_size[0]-20).'px;" ></div>'; + echo '</div>'; +} + +/** + * Prints two images side by side + * and slider to change the width + * of one of the images + * + * @author Kate Arzamastseva <pshns@ukr.net> + * @param string $image + * @param int $l_rev + * @param int $r_rev + * @param JpegMeta $meta + */ +function media_image_diff_portions($image, $l_rev, $r_rev, $meta) { + $l_size = media_image_preview_size($image, $l_rev, $meta); + $r_size = media_image_preview_size($image, $r_rev, $meta); + + if (!$l_size || !$r_size || $l_size != $r_size || $l_size[0] < 30) return ''; + + echo '<div class="mediamanager-preview">'; + + $l_more = 'rev='.$l_rev.'&h='.$l_size[1].'&w='.$l_size[0]; + $r_more = 'rev='.$r_rev.'&h='.$l_size[1].'&w='.$l_size[0]; + + $l_src = ml($image, $l_more); + $r_src = ml($image, $r_more); + + echo '<div id="mediamanager__diff_portions_image1" style="background-image: url(\''.$l_src.'\'); max-width: '.$l_size[0].'px; height: '.$l_size[1].'px; " >'; + echo '<div id="mediamanager__diff_portions_image2" style="background-image: url(\''.$r_src.'\'); max-width: '.$l_size[0].'px; height: '.$l_size[1].'px; " >'; + echo '</div>'; + echo '</div>'; + + echo '<div id="mediamanager__portions_slider" style="max-width: '.($l_size[0]-20).'px;" ></div>'; + echo '</div>'; } /** diff --git a/lib/scripts/media.js b/lib/scripts/media.js index 777eb4825..8500166dc 100644 --- a/lib/scripts/media.js +++ b/lib/scripts/media.js @@ -369,6 +369,9 @@ var dw_mediamanager = { dw_mediamanager.prepare_content($content); dw_mediamanager.updatehide(); dw_mediamanager.update_resizable(0); + dw_mediamanager.opacity_slider(); + dw_mediamanager.portions_slider(); + }, 'html' ); @@ -398,6 +401,30 @@ var dw_mediamanager = { }); }, + opacity_slider: function () { + var $slider = jQuery( "#mediamanager__opacity_slider" ); + $slider.slider(); + $slider.slider("option", "min", 0); + $slider.slider("option", "max", 0.999); + $slider.slider("option", "step", 0.001); + $slider.slider("option", "value", 0.5); + $slider.bind("slide", function(event, ui) { + jQuery('#mediamanager__diff_opacity_image2').css({ opacity: $slider.slider("option", "value")}); + }); + }, + + portions_slider: function () { + var $slider = jQuery( "#mediamanager__portions_slider" ); + $slider.slider(); + $slider.slider("option", "min", 0); + $slider.slider("option", "max", 100); + $slider.slider("option", "step", 1); + $slider.slider("option", "value", 50); + $slider.bind("slide", function(event, ui) { + jQuery('#mediamanager__diff_portions_image2').css({ width: $slider.slider("option", "value")+'%'}); + }); + }, + prepare_content: function ($content) { // hide syntax example $content.find('div.example:visible').hide(); @@ -680,6 +707,8 @@ function hasFlash(version){ jQuery(document).ready(function() { dw_mediamanager.update_resizable(1); + dw_mediamanager.opacity_slider(); + dw_mediamanager.portions_slider(); }); jQuery(dw_mediamanager.init); diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css index df2b961b6..6c4b64d3e 100644 --- a/lib/tpl/default/mediamanager.css +++ b/lib/tpl/default/mediamanager.css @@ -263,6 +263,7 @@ form.meta textarea.edit { } .mediamanager-preview { + text-align: center; margin-bottom: 5px; } @@ -282,3 +283,35 @@ form.meta textarea.edit { .background-container .icon { margin-right: 5px; } + +.mediamanager dl.img_tags dd.highlighted{ + background-color: __highlight__; +} + +#mediamanager__diff_opacity_image1, +#mediamanager__diff_portions_image1 { + width: 99%; + position: relative; +} + +#mediamanager__diff_opacity_image2 { + width: 100%; + position: absolute; + top: 0; + left: 0; + opacity: 0.5; +} + +#mediamanager__diff_portions_image2 { + width: 50%; + position: absolute; + top: 0; + left: 0; + border-right: 1px solid red; +} + +#mediamanager__opacity_slider, +#mediamanager__portions_slider { + margin: 10px; + width: 99%; +} |