mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-12 04:23:19 +00:00
Fix JS code style
This commit is contained in:
Romain Neutron
@@ -1,249 +1,249 @@
|
||||
(function( $ ){
|
||||
|
||||
var methods = {
|
||||
init : function( options ) {
|
||||
var settings = {
|
||||
'zoomable' : false,
|
||||
'display_full_screen' : false
|
||||
};
|
||||
return this.each(function() {
|
||||
var methods = {
|
||||
init : function( options ) {
|
||||
var settings = {
|
||||
'zoomable' : false,
|
||||
'display_full_screen' : false
|
||||
};
|
||||
return this.each(function() {
|
||||
|
||||
var $this = $(this), data = $(this).data('image_enhance');
|
||||
var $this = $(this), data = $(this).data('image_enhance');
|
||||
|
||||
if ( ! data )
|
||||
{
|
||||
if ( options ) {
|
||||
$.extend( settings, options );
|
||||
}
|
||||
if ( ! data )
|
||||
{
|
||||
if ( options ) {
|
||||
$.extend( settings, options );
|
||||
}
|
||||
|
||||
var wrapper = $('.thumb_wrapper', $(this));
|
||||
var $image =$('img', $this);
|
||||
var wrapper = $('.thumb_wrapper', $(this));
|
||||
var $image =$('img', $this);
|
||||
|
||||
wrapper.css('position','relative');
|
||||
wrapper.css('position','relative');
|
||||
|
||||
reset_position($this);
|
||||
reset_position($this);
|
||||
|
||||
if(settings.display_full_screen)
|
||||
{
|
||||
$image.parent()
|
||||
.append('<div class="image_enhance_titlebar" style="display:none;">\n\
|
||||
if(settings.display_full_screen)
|
||||
{
|
||||
$image.parent()
|
||||
.append('<div class="image_enhance_titlebar" style="display:none;">\n\
|
||||
<div class="image_enhance_title_options"><span class="full"><img src="/skins/icons/fullscreen.gif" /></span></div>\n\
|
||||
<div class="image_enhance_title_bg"></div></div>');
|
||||
|
||||
var $titlebar = $('.image_enhance_titlebar',$this);
|
||||
var $titlebar = $('.image_enhance_titlebar',$this);
|
||||
|
||||
$('.image_enhance_title_bg',$titlebar).css('opacity',0.5);
|
||||
$('.image_enhance_title_bg',$titlebar).css('opacity',0.5);
|
||||
|
||||
$image.parent()
|
||||
.bind('mouseover.image_enhance', function(){
|
||||
$titlebar.stop().show().animate({
|
||||
'height':28
|
||||
}, 150);
|
||||
})
|
||||
.bind('mouseout.image_enhance', function(){
|
||||
$titlebar.stop().animate({
|
||||
'height':0
|
||||
}, 150, function(){
|
||||
$titlebar.hide()
|
||||
});
|
||||
});
|
||||
$image.parent()
|
||||
.bind('mouseover.image_enhance', function(){
|
||||
$titlebar.stop().show().animate({
|
||||
'height':28
|
||||
}, 150);
|
||||
})
|
||||
.bind('mouseout.image_enhance', function(){
|
||||
$titlebar.stop().animate({
|
||||
'height':0
|
||||
}, 150, function(){
|
||||
$titlebar.hide()
|
||||
});
|
||||
});
|
||||
|
||||
$('.image_enhance_titlebar .full', wrapper).bind('click.image_enhance', function(){
|
||||
$('body').append('<div class="image_enhance_theatre">\n\
|
||||
$('.image_enhance_titlebar .full', wrapper).bind('click.image_enhance', function(){
|
||||
$('body').append('<div class="image_enhance_theatre">\n\
|
||||
\n\
|
||||
<div class="image_enhance_theatre_closer_wrapper"><span class="closer">close</span></div>\n\
|
||||
<img style="width:'+image_width+'px;height:'+image_height+'" src="'+$image.attr('src')+'"/>\n\
|
||||
</div>');
|
||||
|
||||
var $theatre = $('.image_enhance_theatre');
|
||||
var $theatre_img = $('img', $theatre);
|
||||
$(window).bind('resize.image_enhance dblclick.image_enhance',function(event){
|
||||
var $theatre = $('.image_enhance_theatre');
|
||||
var $theatre_img = $('img', $theatre);
|
||||
$(window).bind('resize.image_enhance dblclick.image_enhance',function(event){
|
||||
|
||||
if(event.type == 'dblclick')
|
||||
{
|
||||
$theatre_img.removeClass('zoomed');
|
||||
if(event.type == 'dblclick')
|
||||
{
|
||||
$theatre_img.removeClass('zoomed');
|
||||
}
|
||||
else
|
||||
{
|
||||
if($theatre_img.hasClass('zoomed'))
|
||||
return;
|
||||
}
|
||||
var datas = calculate_sizes($(this).width(), $(this).height(), image_width, image_height, 80);
|
||||
|
||||
$theatre_img.width(datas.width).height(datas.height).css('top',datas.top).css('left',datas.left);
|
||||
})
|
||||
$(window).trigger('resize.image_enhance');
|
||||
$('.closer', $theatre).bind('click.image_enhance', function(){
|
||||
$theatre.remove();
|
||||
});
|
||||
|
||||
if(typeof $theatre.disableSelection !== 'function' && window.console)
|
||||
console.error('enhanced image require jquery UI\'s disableSelection');
|
||||
$('img', $theatre).disableSelection();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if(settings.zoomable)
|
||||
{
|
||||
if(typeof $image.draggable !== 'function' && window.console)
|
||||
console.error('zoomable require jquery UI\'s draggable');
|
||||
|
||||
if($image.attr('ondragstart'))
|
||||
{
|
||||
$image.removeAttr('ondragstart');
|
||||
}
|
||||
$image.draggable();
|
||||
$image.css({
|
||||
'max-width':'none',
|
||||
'max-height':'none'
|
||||
});
|
||||
|
||||
var image_width = parseInt($('input[name="width"]', $this).val());
|
||||
var image_height = parseInt($('input[name="height"]', $this).val());
|
||||
var ratio = image_width / image_height;
|
||||
|
||||
$this.bind('mousewheel',function(event, delta){
|
||||
$image.addClass('zoomed');
|
||||
if(delta > 0)
|
||||
{
|
||||
event.stopPropagation();
|
||||
zoomPreview(true, ratio, $image, $(this));
|
||||
}
|
||||
else
|
||||
{
|
||||
event.stopPropagation();
|
||||
zoomPreview(false, ratio, $image, $(this));
|
||||
}
|
||||
return false;
|
||||
}).bind('dblclick', function(event){
|
||||
reset_position($this);
|
||||
});
|
||||
}
|
||||
|
||||
$(this).data('image_enhance', {
|
||||
width:image_width,
|
||||
height:image_height
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
if($theatre_img.hasClass('zoomed'))
|
||||
return;
|
||||
}
|
||||
var datas = calculate_sizes($(this).width(), $(this).height(), image_width, image_height, 80);
|
||||
|
||||
$theatre_img.width(datas.width).height(datas.height).css('top',datas.top).css('left',datas.left);
|
||||
})
|
||||
$(window).trigger('resize.image_enhance');
|
||||
$('.closer', $theatre).bind('click.image_enhance', function(){
|
||||
$theatre.remove();
|
||||
});
|
||||
|
||||
if(typeof $theatre.disableSelection !== 'function' && window.console)
|
||||
console.error('enhanced image require jquery UI\'s disableSelection');
|
||||
$('img', $theatre).disableSelection();
|
||||
});
|
||||
}
|
||||
},
|
||||
destroy : function( ) {
|
||||
return this.each(function() {
|
||||
$(this).data('image_enhance', null);
|
||||
$('.image_enhance_titlebar, .image_enhance_theatre',this).remove();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function zoomPreview(bool, ratio, $img, $container)
|
||||
{
|
||||
if($img.length === 0)
|
||||
return;
|
||||
|
||||
if(settings.zoomable)
|
||||
{
|
||||
if(typeof $image.draggable !== 'function' && window.console)
|
||||
console.error('zoomable require jquery UI\'s draggable');
|
||||
var t1 = parseInt($img.css('top'));
|
||||
var l1 = parseInt($img.css('left'));
|
||||
var w1 = $img.width();
|
||||
var h1 = $img.height();
|
||||
|
||||
if($image.attr('ondragstart'))
|
||||
{
|
||||
$image.removeAttr('ondragstart');
|
||||
var w2,t2;
|
||||
|
||||
if(bool)
|
||||
{
|
||||
if((w1 * 1.08) < 32767) {
|
||||
w2 = w1 * 1.08;
|
||||
} else {
|
||||
w2 = w1;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if((w1 / 1.08) > 20) {
|
||||
w2 = w1 / 1.08;
|
||||
} else {
|
||||
w2 = w1;
|
||||
}
|
||||
$image.draggable();
|
||||
$image.css({
|
||||
'max-width':'none',
|
||||
'max-height':'none'
|
||||
});
|
||||
|
||||
var image_width = parseInt($('input[name="width"]', $this).val());
|
||||
var image_height = parseInt($('input[name="height"]', $this).val());
|
||||
var ratio = image_width / image_height;
|
||||
|
||||
$this.bind('mousewheel',function(event, delta){
|
||||
$image.addClass('zoomed');
|
||||
if(delta > 0)
|
||||
{
|
||||
event.stopPropagation();
|
||||
zoomPreview(true, ratio, $image, $(this));
|
||||
}
|
||||
else
|
||||
{
|
||||
event.stopPropagation();
|
||||
zoomPreview(false, ratio, $image, $(this));
|
||||
}
|
||||
return false;
|
||||
}).bind('dblclick', function(event){
|
||||
reset_position($this);
|
||||
});
|
||||
}
|
||||
|
||||
$(this).data('image_enhance', {
|
||||
width:image_width,
|
||||
height:image_height
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
destroy : function( ) {
|
||||
return this.each(function() {
|
||||
$(this).data('image_enhance', null);
|
||||
$('.image_enhance_titlebar, .image_enhance_theatre',this).remove();
|
||||
});
|
||||
var datas = $(this).data('image_enhance');
|
||||
|
||||
h2 = Math.round(w2 / ratio);
|
||||
w2 = Math.round(w2);
|
||||
|
||||
t2 = Math.round(t1 - (h2 - h1) / 2)+'px';
|
||||
var l2 = Math.round(l1 - (w2 - w1) / 2)+'px';
|
||||
|
||||
var wPreview = $container.width()/2;
|
||||
var hPreview = $container.height()/2;
|
||||
|
||||
var nt = Math.round((h2 / h1) * (t1 - hPreview) + hPreview);
|
||||
var nl = Math.round(((w2 / w1) * (l1 - wPreview)) + wPreview);
|
||||
|
||||
$img.css({
|
||||
left: nl,
|
||||
top: nt
|
||||
}).width(w2).height(h2);
|
||||
}
|
||||
};
|
||||
|
||||
function zoomPreview(bool, ratio, $img, $container)
|
||||
{
|
||||
if($img.length === 0)
|
||||
return;
|
||||
|
||||
var t1 = parseInt($img.css('top'));
|
||||
var l1 = parseInt($img.css('left'));
|
||||
var w1 = $img.width();
|
||||
var h1 = $img.height();
|
||||
|
||||
var w2,t2;
|
||||
|
||||
if(bool)
|
||||
function calculate_sizes(window_width, window_height,image_width, image_height, border)
|
||||
{
|
||||
if((w1 * 1.08) < 32767) {
|
||||
w2 = w1 * 1.08;
|
||||
} else {
|
||||
w2 = w1;
|
||||
}
|
||||
if(typeof border !== 'number')
|
||||
border = 0;
|
||||
|
||||
var width, height;
|
||||
var ratio_display = window_width / window_height;
|
||||
var ratio_image = image_width / image_height;
|
||||
|
||||
if(ratio_image > ratio_display)
|
||||
{
|
||||
width = window_width - border;
|
||||
height = Math.round(width / ratio_image);
|
||||
}
|
||||
else
|
||||
{
|
||||
height = window_height - border;
|
||||
width = Math.round(height * ratio_image);
|
||||
}
|
||||
|
||||
var top = Math.round((window_height - height) / 2);
|
||||
var left = Math.round((window_width - width )/2);
|
||||
|
||||
return {
|
||||
top:top,
|
||||
left:left,
|
||||
width:width,
|
||||
height:height
|
||||
};
|
||||
}
|
||||
else
|
||||
|
||||
function reset_position($this)
|
||||
{
|
||||
if((w1 / 1.08) > 20) {
|
||||
w2 = w1 / 1.08;
|
||||
} else {
|
||||
w2 = w1;
|
||||
}
|
||||
var display_width = $this.width();
|
||||
var display_height = $this.height();
|
||||
var image_width = parseInt($('input[name="width"]', $this).val());
|
||||
var image_height = parseInt($('input[name="height"]', $this).val());
|
||||
|
||||
var datas = calculate_sizes(display_width, display_height, image_width, image_height);
|
||||
var $image =$('img', $this);
|
||||
|
||||
var top = Math.round((display_height - datas.height) / 2)+'px';
|
||||
var left = Math.round((display_width - datas.width) / 2)+'px';
|
||||
|
||||
$image.width(datas.width).height(datas.height).css({top:top, left:left});
|
||||
return;
|
||||
}
|
||||
|
||||
var datas = $(this).data('image_enhance');
|
||||
$.fn.image_enhance = function(method) {
|
||||
|
||||
h2 = Math.round(w2 / ratio);
|
||||
w2 = Math.round(w2);
|
||||
if ( methods[method] ) {
|
||||
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
||||
} else if ( typeof method === 'object' || ! method ) {
|
||||
return methods.init.apply( this, arguments );
|
||||
} else {
|
||||
$.error( 'Method ' + method + ' does not exist on jQuery.image_enhance' );
|
||||
}
|
||||
|
||||
t2 = Math.round(t1 - (h2 - h1) / 2)+'px';
|
||||
var l2 = Math.round(l1 - (w2 - w1) / 2)+'px';
|
||||
|
||||
var wPreview = $container.width()/2;
|
||||
var hPreview = $container.height()/2;
|
||||
|
||||
var nt = Math.round((h2 / h1) * (t1 - hPreview) + hPreview);
|
||||
var nl = Math.round(((w2 / w1) * (l1 - wPreview)) + wPreview);
|
||||
|
||||
$img.css({
|
||||
left: nl,
|
||||
top: nt
|
||||
}).width(w2).height(h2);
|
||||
}
|
||||
|
||||
function calculate_sizes(window_width, window_height,image_width, image_height, border)
|
||||
{
|
||||
if(typeof border !== 'number')
|
||||
border = 0;
|
||||
|
||||
var width, height;
|
||||
var ratio_display = window_width / window_height;
|
||||
var ratio_image = image_width / image_height;
|
||||
|
||||
if(ratio_image > ratio_display)
|
||||
{
|
||||
width = window_width - border;
|
||||
height = Math.round(width / ratio_image);
|
||||
}
|
||||
else
|
||||
{
|
||||
height = window_height - border;
|
||||
width = Math.round(height * ratio_image);
|
||||
}
|
||||
|
||||
var top = Math.round((window_height - height) / 2);
|
||||
var left = Math.round((window_width - width )/2);
|
||||
|
||||
return {
|
||||
top:top,
|
||||
left:left,
|
||||
width:width,
|
||||
height:height
|
||||
};
|
||||
}
|
||||
|
||||
function reset_position($this)
|
||||
{
|
||||
var display_width = $this.width();
|
||||
var display_height = $this.height();
|
||||
var image_width = parseInt($('input[name="width"]', $this).val());
|
||||
var image_height = parseInt($('input[name="height"]', $this).val());
|
||||
|
||||
var datas = calculate_sizes(display_width, display_height, image_width, image_height);
|
||||
var $image =$('img', $this);
|
||||
|
||||
var top = Math.round((display_height - datas.height) / 2)+'px';
|
||||
var left = Math.round((display_width - datas.width) / 2)+'px';
|
||||
|
||||
$image.width(datas.width).height(datas.height).css({top:top, left:left});
|
||||
return;
|
||||
}
|
||||
|
||||
$.fn.image_enhance = function(method) {
|
||||
|
||||
if ( methods[method] ) {
|
||||
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
||||
} else if ( typeof method === 'object' || ! method ) {
|
||||
return methods.init.apply( this, arguments );
|
||||
} else {
|
||||
$.error( 'Method ' + method + ' does not exist on jQuery.image_enhance' );
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
})( jQuery );
|
||||
|
||||
Reference in New Issue
Block a user