diff options
Diffstat (limited to 'lib/scripts/media.js')
| -rw-r--r-- | lib/scripts/media.js | 465 |
1 files changed, 458 insertions, 7 deletions
diff --git a/lib/scripts/media.js b/lib/scripts/media.js index 1402ad4bf..f4064efd5 100644 --- a/lib/scripts/media.js +++ b/lib/scripts/media.js @@ -22,6 +22,12 @@ var dw_mediamanager = { size: false, forbidden_opts: {}, + // File list view type + view: false, + + layout_width: 0, + layout_height: 0, + init: function () { var $content, $tree; $content = jQuery('#media__content'); @@ -38,7 +44,8 @@ var dw_mediamanager = { .delegate('a.select', 'click', dw_mediamanager.select) // Attach deletion confirmation dialog to the delete buttons .delegate('#media__content a.btn_media_delete', 'click', - dw_mediamanager.confirmattach); + dw_mediamanager.confirmattach) + .delegate('#mediamanager__done_form', 'submit', dw_mediamanager.list); $tree.dw_tree({toggle_selector: 'img', load_data: function (show_sublist, $clicky) { @@ -59,6 +66,43 @@ var dw_mediamanager = { (opening ? 'minus' : 'plus') + '.gif'); }}); $tree.delegate('a', 'click', dw_mediamanager.list); + + dw_mediamanager.set_filelist_view(dw_mediamanager.view, false); + jQuery('#mediamanager__form_sort').find('input[type=submit]').hide(); + dw_mediamanager.image_diff(); + dw_mediamanager.init_ajax_uploader(); + + // changing opened tab in the file list panel + jQuery('#mediamanager__layout_list').delegate('#mediamanager__tabs_files a', 'click', dw_mediamanager.list) + // changing type of the file list view + .delegate('#mediamanager__tabs_list a', 'click', dw_mediamanager.list_view) + // loading file details + .delegate('#mediamanager__file_list a', 'click', dw_mediamanager.details) + // search form + .delegate('#dw__mediasearch', 'submit', dw_mediamanager.list) + // "upload as" field autofill + .delegate('#upload__file', 'change', dw_mediamanager.suggest) + // sort type selection + .delegate('#mediamanager__form_sort select', 'change', dw_mediamanager.list) + // uploaded images + .delegate('.qq-upload-file a', 'click', dw_mediamanager.details); + + // changing opened tab in the file details panel + jQuery('#mediamanager__layout_detail').delegate('#mediamanager__tabs_details a', 'click', dw_mediamanager.details) + // "update new version" button + .delegate('#mediamanager__btn_update', 'submit', dw_mediamanager.list) + // revisions form + .delegate('#page__revisions', 'submit', dw_mediamanager.details) + .delegate('#page__revisions a', 'click', dw_mediamanager.details) + // meta edit form + .delegate('#mediamanager__save_meta', 'submit', dw_mediamanager.details) + // delete button + .delegate('#mediamanager__btn_delete', 'submit', dw_mediamanager.details) + // "restore this version" button + .delegate('#mediamanager__btn_restore', 'submit', dw_mediamanager.details) + // less/more recent buttons in media revisions form + .delegate('.btn_newer, .btn_older', 'submit', dw_mediamanager.details); + }, /** @@ -201,6 +245,9 @@ var dw_mediamanager = { $file = jQuery(this); $name = jQuery('#upload__name'); + + if ($name.val() != '') return; + if(!$file.length || !$name.length) { return; } @@ -218,33 +265,431 @@ var dw_mediamanager = { * @author Pierre Spring <pierre.spring@caillou.ch> */ list: function (event) { - var $link, $content; + var $link, $content, params; + $link = jQuery(this); event.preventDefault(); jQuery('div.success, div.info, div.error, div.notify').remove(); - $link = jQuery(this); - $content = jQuery('#media__content'); - $content.html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />'); + if (document.getElementById('media__content')) { + //popup + $content = jQuery('#media__content'); + } else { + //fullscreen media manager + $content = jQuery('#mediamanager__layout_list'); + + if ($link.hasClass('idx_dir')) { + //changing namespace + jQuery('#mediamanager__layout_detail').empty(); + jQuery('#media__tree .selected').each(function(){ + jQuery(this).removeClass('selected'); + }); + $link.addClass('selected'); + } + } + + params = ''; + + if ($link[0].search) { + params = $link[0].search.substr(1)+'&call=medialist'; + } else if ($link[0].action) { + params = dw_mediamanager.form_params($link)+'&call=medialist'; + } else if ($link.parents('form')) { + params = dw_mediamanager.form_params($link.parents('form'))+'&call=medialist'; + + if ($link.parents('form')[0].id == 'mediamanager__form_sort') { + DokuCookie.setValue('sort', $link[0].value); + params += '&q=' + jQuery('#mediamanager__sort_textfield').val(); + params += '&mediado=searchlist'; + } + } // fetch the subtree + dw_mediamanager.update_content($content, params); + + if (document.getElementById('media__content')) { + //popup + $content = jQuery('#media__content'); + $content.html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />'); + } else { + //fullscreen media manager + jQuery('.scroll-container', $content).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />'); + } + }, + + /** + * Returns form parameters + * + * @author Kate Arzamastseva <pshns@ukr.net> + */ + form_params: function ($form) { + if (!$form.length) return; + var elements = $form.serialize(); + var action = ''; + var i = $form[0].action.indexOf('?'); + if (i >= 0) action = $form[0].action.substr(i+1); + return elements+'&'+action; + }, + + /** + * Changes view of media files list + * + * @author Kate Arzamastseva <pshns@ukr.net> + */ + list_view: function (event) { + var $link, $content; + $link = jQuery(this); + + event.preventDefault(); + + $content = jQuery('#mediamanager__file_list'); + + if ($link[0].id == 'mediamanager__link_thumbs') { + dw_mediamanager.set_filelist_view('thumbs', true); + + } else if ($link[0].id == 'mediamanager__link_list') { + dw_mediamanager.set_filelist_view('list', true); + } + }, + + set_filelist_view: function (type, cookies) { + var $content = jQuery('#mediamanager__file_list'); + if (!type) type = DokuCookie.getValue('view'); + + if (type == 'thumbs') { + $content.removeClass('mediamanager-list'); + $content.addClass('mediamanager-thumbs'); + if (cookies) DokuCookie.setValue('view', 'thumbs'); + dw_mediamanager.view = 'thumbs'; + + } else if (type == 'list') { + $content.removeClass('mediamanager-thumbs'); + $content.addClass('mediamanager-list'); + if (cookies) DokuCookie.setValue('view', 'list'); + dw_mediamanager.view = 'list'; + } + }, + + /** + * Lists the content of the right column (image details) using AJAX + * + * @author Kate Arzamastseva <pshns@ukr.net> + */ + details: function (event) { + var $link, $content, params, update_list; + $link = jQuery(this); + + event.preventDefault(); + + jQuery('div.success, div.info, div.error, div.notify').remove(); + + if ($link[0].id == 'mediamanager__btn_delete' && !confirm(LANG['del_confirm'])) return false; + if ($link[0].id == 'mediamanager__btn_restore' && !confirm(LANG['restore_confirm'])) return false; + + $content = jQuery('#mediamanager__layout_detail'); + params = ''; + + if ($link[0].search) { + params = $link[0].search.substr(1)+'&call=mediadetails'; + } else if ($link[0].action) { + params = dw_mediamanager.form_params($link)+'&call=mediadetails'; + } else if ($link.parents('form')) { + params = dw_mediamanager.form_params($link.parents('form'))+'&call=mediadetails'; + } + + update_list = ($link[0].id == 'mediamanager__btn_delete' || $link[0].id == 'mediamanager__btn_restore'); + dw_mediamanager.update_content($content, params, update_list); + + if (jQuery('.scroll-container', $content).length) { + jQuery('.scroll-container', $content).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />'); + } else { + jQuery($content).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />'); + } + }, + + update_content: function ($content, params, update_list) { jQuery.post( DOKU_BASE + 'lib/exe/ajax.php', - $link[0].search.substr(1)+'&call=medialist', + params, function (data) { + jQuery('.ui-resizable').each(function(){ + jQuery(this).resizable('destroy'); + }); + $content.html(data); + dw_mediamanager.prepare_content($content); dw_mediamanager.updatehide(); + + dw_mediamanager.update_resizable(); + dw_behaviour.revisionBoxHandler(); + jQuery('#mediamanager__form_sort').find('input[type=submit]').hide(); + dw_mediamanager.set_filelist_view(dw_mediamanager.view, false); + dw_mediamanager.image_diff(); + dw_mediamanager.init_ajax_uploader(); + + if (update_list) { + var $link1, $content1, params1; + $link1 = jQuery('a.files'); + params1 = $link1[0].search.substr(1)+'&call=medialist'; + $content1 = jQuery('#mediamanager__layout_list'); + dw_mediamanager.update_content($content1, params1); + jQuery('.scroll-container', $content1).html('<img src="' + DOKU_BASE + 'lib/images/loading.gif" alt="..." class="load" />'); + } }, 'html' ); }, + window_resize: function () { + if (jQuery('#mediamanager__layout').width() == dw_mediamanager.layout_width) { + return; + } + + dw_mediamanager.layout_width = jQuery('#mediamanager__layout').width(); + $r = jQuery("#mediamanager__layout .layout-resizable, #mediamanager__layout .layout"); + + var w = 0, wSum = 0, mCount = 0, mArray = []; + $r.each(function() { + w = jQuery(this).width(); + if (w == parseFloat(jQuery(this).css("min-width"))) { + wSum += w; + } else { + mArray[mCount] = jQuery(this); + mCount++; + } + }); + + if (mCount > 0) { + var width = (0.95 * jQuery('#mediamanager__layout').width() - wSum - 30); + wSum = 0; + for(var i = 0; i < mArray.length; i++) { + wSum += mArray[i].width(); + } + for(var i = 0; i < mArray.length; i++) { + w = mArray[i].width(); + w = 100*w / wSum; + mArray[i].width(width*w/100); + } + } + + $r.each(function() { + w = jQuery(this).width(); + w = (100 * w / jQuery('#mediamanager__layout').width()); + w += "%"; + jQuery(this).width(w); + }); + + var windowHeight = jQuery(window).height(); + var height = windowHeight - 300; + if (layout_height < height) { + layout_height = height; + jQuery('#mediamanager__layout .scroll-container').each(function (i) { + jQuery(this).height(height); + }); + $resizable.each(function() { + jQuery(this).height(height+100); + }); + } + + dw_mediamanager.opacity_slider(); + dw_mediamanager.portions_slider(); + }, + + /** + * Updates mediamanager layout + * + * @author Kate Arzamastseva <pshns@ukr.net> + */ + update_resizable: function () { + $resizable = jQuery("#mediamanager__layout .layout-resizable"); + + $resizable.resizable({ handles: 'e' , + resize: function(event, ui){ + var w = 0; + $resizable.each(function() { + w += jQuery(this).width(); + }); + wSum = w + parseFloat(jQuery('#mediamanager__layout_detail').css("min-width")); + + // max width of resizable column + var maxWidth = 0.95 * jQuery('#mediamanager__layout').width() - wSum + jQuery(this).width() - 30; + $resizable.resizable( "option", "maxWidth", maxWidth ); + + // percentage width of the first two columns + var wLeft = ( 100*(w+30) / jQuery('#mediamanager__layout').width() ); + + // width of the third column + var wRight = 95-wLeft; + wRight += "%"; + jQuery('#mediamanager__layout_detail').width(wRight); + + $resizable.each(function() { + w = jQuery(this).width(); + w = (100 * w / jQuery('#mediamanager__layout').width()); + w += "%"; + jQuery(this).width(w); + }); + + dw_mediamanager.opacity_slider(); + dw_mediamanager.portions_slider(); + } + }); + + var windowHeight = jQuery(window).height(); + var height = windowHeight - 300; + layout_height = height; + jQuery('#mediamanager__layout .scroll-container').each(function (i) { + jQuery(this).height(height); + }); + $resizable.each(function() { + jQuery(this).height(height+100); + }); + }, + + /** + * Prints 'select' for image difference representation type + * + * @author Kate Arzamastseva <pshns@ukr.net> + */ + image_diff: function () { + if (jQuery('#mediamanager__difftype').length) return; + + $form = jQuery('#mediamanager__form_diffview'); + if (!$form.length) return; + + $label = jQuery(document.createElement('label')); + $label.append('<span>'+LANG.media_diff+'</span>'); + $select = jQuery(document.createElement('select')) + .attr('id', 'mediamanager__difftype') + .attr('name', 'difftype') + .change(dw_mediamanager.change_diff_type); + $select.append(new Option(LANG.media_diff_both, "both")); + $select.append(new Option(LANG.media_diff_opacity, "opacity")); + $select.append(new Option(LANG.media_diff_portions, "portions")); + $label.append($select); + $form.append($label); + + // for IE + var select = document.getElementById('mediamanager__difftype'); + select.options[0].text = LANG.media_diff_both; + select.options[1].text = LANG.media_diff_opacity; + select.options[2].text = LANG.media_diff_portions; + }, + + /** + * Handles selection of image difference representation type + * + * @author Kate Arzamastseva <pshns@ukr.net> + */ + change_diff_type: function () { + $select = jQuery('#mediamanager__difftype'); + $content = jQuery('#mediamanager__diff'); + + params = dw_mediamanager.form_params($select.parents('form'))+'&call=mediadiff'; + jQuery.post( + DOKU_BASE + 'lib/exe/ajax.php', + params, + function (data) { + $content.html(data); + dw_mediamanager.portions_slider(); + dw_mediamanager.opacity_slider(); + }, + 'html' + ); + }, + + /** + * Sets options for opacity diff slider + * + * @author Kate Arzamastseva <pshns@ukr.net> + */ + opacity_slider: function () { + var $slider = jQuery( "#mediamanager__opacity_slider" ); + if (!$slider.length) return; + + var $image = jQuery('#mediamanager__diff_opacity_image1 img'); + if (!$image.length) return; + $slider.width($image.width()-20); + + $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")}); + }); + }, + + /** + * Sets options for red line diff slider + * + * @author Kate Arzamastseva <pshns@ukr.net> + */ + portions_slider: function () { + var $image1 = jQuery('#mediamanager__diff_portions_image1 img'); + var $image2 = jQuery('#mediamanager__diff_portions_image2 img'); + if (!$image1.length || !$image2.length) return; + + var $div = jQuery("#mediamanager__diff_layout"); + if (!$div.length) return; + + $div.width('100%'); + $image2.parent().width('97%'); + $image1.width('100%'); + $image2.width('100%'); + + if ($image1.width() < $div.width()) { + $div.width($image1.width()); + } + + $image2.parent().width('50%'); + $image2.width($image1.width()); + $image1.width($image1.width()); + + var $slider = jQuery("#mediamanager__portions_slider"); + if (!$slider.length) return; + $slider.width($image1.width()-20); + + $slider.slider(); + $slider.slider("option", "min", 0); + $slider.slider("option", "max", 97); + $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")+'%'}); + }); + }, + + params_toarray: function (str) { + var vars = [], hash; + var hashes = str.split('&'); + for(var i = 0; i < hashes.length; i++) { + hash = hashes[i].split('='); + vars[hash[0]] = hash[1]; + } + return vars; + }, + + init_ajax_uploader: function () { + if (!jQuery('#mediamanager__uploader').length) return; + if (jQuery('.qq-upload-list').length) return; + + var params = dw_mediamanager.form_params(jQuery('#dw__upload'))+'&call=mediaupload'; + params = dw_mediamanager.params_toarray(params); + + var uploader = new qq.FileUploaderExtended({ + element: document.getElementById('mediamanager__uploader'), + action: DOKU_BASE + 'lib/exe/ajax.php', + params: params + }); + }, + prepare_content: function ($content) { // hide syntax example $content.find('div.example:visible').hide(); - dw_mediamanager.initFlashUpload(); }, /** @@ -521,4 +966,10 @@ function hasFlash(version){ return ver >= version; } +jQuery(document).ready(function() { + dw_mediamanager.update_resizable(); + dw_mediamanager.layout_width = jQuery("#mediamanager__layout").width(); + jQuery(window).resize(dw_mediamanager.window_resize); +}); + jQuery(dw_mediamanager.init); |