david
3482b736e4
git-svn-id: https://192.168.0.254/svn/Proyectos.EstudioJuridicoAlmagro_Web/trunk@3 c22fe52d-42d7-ba4f-95f7-33effcf65713
308 lines
11 KiB
JavaScript
308 lines
11 KiB
JavaScript
(function($, undefined) {
|
|
|
|
var down_factor, up_factor, down_factor_v, up_factor_v;
|
|
|
|
var max_slider_height = 800;
|
|
var min_slider_height = 100;
|
|
|
|
var sidebar_min_w = 150;
|
|
var sidebar_max_w = 400;
|
|
|
|
var manual_change = false;
|
|
|
|
$(function() {
|
|
|
|
var wrap = $('.wpv-layout-wrap');
|
|
|
|
if(wrap.length == 0) {
|
|
return false;
|
|
}
|
|
|
|
down_factor = wrap.width()/wrap.attr('data-pane'); // horizontal
|
|
up_factor = 1/down_factor; //horizontal
|
|
down_factor_v = down_factor/2; // vertical
|
|
up_factor_v = 1/down_factor_v; //vertical
|
|
|
|
var margin = Math.floor( 630*( 1 - wrap.attr('data-site') / wrap.attr('data-pane'))/2 );
|
|
var margin_min = Math.floor( 630*( 1 - wrap.attr('data-max') / wrap.attr('data-pane'))/2 );
|
|
var margin_max = Math.floor( 630*( 1 - wrap.attr('data-min') / wrap.attr('data-pane'))/2 );
|
|
var innerwest = Math.floor( down_factor * wrap.attr('data-left'));
|
|
var innereast = Math.floor( down_factor * wrap.attr('data-right'));
|
|
|
|
wrap.find('.margin-east, .margin-west').width(margin);
|
|
|
|
var is_outer_resizable = (margin_min != margin_max);
|
|
|
|
var outer = wrap.layout({
|
|
center__paneSelector: ".layout-inner-content",
|
|
east__paneSelector: ".margin-east",
|
|
west__paneSelector: ".margin-west",
|
|
closable: false,
|
|
resizable: true,
|
|
slidable: false,
|
|
resizeWhileDragging: true,
|
|
west__resizable: is_outer_resizable,
|
|
east__resizable: is_outer_resizable,
|
|
helperLimitClass: "resizer-dragging-limit",
|
|
east__resizerClass: is_outer_resizable ? 'wpv-resizer-east' : '',
|
|
west__resizerClass: is_outer_resizable ? 'wpv-resizer-west' : '',
|
|
east__spacing_open: 8,
|
|
west__spacing_open: 8,
|
|
east__size: margin,
|
|
west__size: margin,
|
|
east__minSize: margin_min,
|
|
west__minSize: margin_min,
|
|
east__maxSize: margin_max,
|
|
west__maxSize: margin_max,
|
|
west__onresize: function (pane, $pane, paneState) {
|
|
var width = paneState.innerWidth;
|
|
var realwidth = width * 2;
|
|
var east = wrap.find('.margin-east');
|
|
var west = wrap.find('.margin-west');
|
|
var resizer_west = wrap.find('.wpv-resizer-west');
|
|
var resizer_east = wrap.find('.wpv-resizer-east');
|
|
|
|
// This will fire in Firefox in strange times, make sure it's visible before doing anything
|
|
if(east.is(':visible')) {
|
|
east.width(width);
|
|
resizer_east.css('right', resizer_west.position().left);
|
|
update_dimensions();
|
|
wrap.find('.layout-header-wrapper, .footer-wrapper').css({width: '100%'});
|
|
}
|
|
},
|
|
east__onresize: function (pane, $pane, paneState) {
|
|
var width = paneState.innerWidth;
|
|
var realwidth = width * 2;
|
|
var east = wrap.find('.margin-east');
|
|
var west = wrap.find('.margin-west');
|
|
var resizer_west = wrap.find('.wpv-resizer-west');
|
|
var resizer_east = wrap.find('.wpv-resizer-east');
|
|
|
|
// This will fire in Firefox in strange times, make sure it's visible before doing anything
|
|
if(west.is(':visible')){
|
|
west.width(width);
|
|
resizer_west.css('left', resizer_east.css('right'));
|
|
update_dimensions();
|
|
wrap.find('.layout-header-wrapper, .footer-wrapper').css({width: '100%'});
|
|
}
|
|
}
|
|
});
|
|
|
|
wrap.css({
|
|
width: wrap.width()-4,
|
|
height: wrap.height()-4
|
|
});
|
|
|
|
var center = outer.panes.center.layout({
|
|
closable: false,
|
|
resizable: true,
|
|
slidable: false,
|
|
north__resizable: true,
|
|
south__resizable: false,
|
|
north__size: Math.round(down_factor_v * (Number(wrap.attr('data-header')) + Number(wrap.attr('data-slider'))))+50+16,
|
|
north__minSize: Math.round(down_factor_v*150) + 50,
|
|
north__maxSize: Math.round(down_factor_v*1100)+50,
|
|
south__size: 80,
|
|
resizeWhileDragging: true,
|
|
east__resizerClass: 'gutter',
|
|
west__resizerClass: 'gutter',
|
|
north__resizerClass: 'inner-gutter-horizontal',
|
|
east__minSize: Math.round(down_factor*sidebar_min_w),
|
|
west__minSize: Math.round(down_factor*sidebar_min_w),
|
|
east__maxSize: Math.round(down_factor*sidebar_max_w),
|
|
west__maxSize: Math.round(down_factor*sidebar_max_w),
|
|
east__spacing_open: 8,
|
|
west__spacing_open: 8,
|
|
north__spacing_open: 8,
|
|
east__size: innereast,
|
|
west__size: innerwest,
|
|
west__onresize: function (pane, $pane, paneState) {
|
|
update_dimensions();
|
|
},
|
|
east__onresize: function (pane, $pane, paneState) {
|
|
update_dimensions();
|
|
},
|
|
north__onresize: function (pane, $pane, paneState) {
|
|
center.options.north.minSize = 50 + Math.round(down_factor_v*min_slider_height) + $('.layout-header').height() + 16;
|
|
center.options.north.maxSize = 50 + Math.round(down_factor_v*max_slider_height) + $('.layout-header').height() + 16;
|
|
|
|
update_dimensions();
|
|
}
|
|
});
|
|
|
|
center.panes.south.css({width: wrap.width() - 2*margin}).layout({
|
|
closable: false,
|
|
resizable: true,
|
|
slidable: false,
|
|
resizeWhileDragging: true,
|
|
north__resizable: false,
|
|
center__paneSelector: '.footer-credits',
|
|
north__paneSelector: '.footer-widgets',
|
|
north__resizerClass: 'gutter-horizontal-inactive',
|
|
north__spacing_open: 6,
|
|
north__size: 40
|
|
});
|
|
|
|
var header_wrap = center.panes.north.css({width: wrap.width() - 2*margin}).layout({
|
|
closable: false,
|
|
resizable: true,
|
|
slidable: false,
|
|
resizeWhileDragging: true,
|
|
north__minSize: Math.ceil(down_factor_v*50),
|
|
north__maxSize: Math.floor(down_factor_v*300),
|
|
center__minHeight: Math.round(down_factor_v*min_slider_height),
|
|
center__maxHeight: Math.floor(down_factor_v*max_slider_height),
|
|
center__paneSelector: '.layout-slider',
|
|
north__paneSelector: '.layout-header',
|
|
south__paneSelector: '.layout-header-widgets',
|
|
north__resizerClass: 'gutter-horizontal',
|
|
south__resizerClass: 'gutter-horizontal-inactive',
|
|
south__resizable: false,
|
|
north__spacing_open: 8,
|
|
south__spacing_open: 8,
|
|
north__size: Math.floor(down_factor_v * wrap.attr('data-header')),
|
|
south__size: 50,
|
|
south__minSize: 50,
|
|
north__onresize_start: function(pane, $pane, paneState) {
|
|
$pane.data('orig_height', $pane.height());
|
|
},
|
|
north__onresize: function (pane, $pane, paneState) {
|
|
// we should resize some panes and resizers manually to get the desired effect
|
|
var delta_v = $pane.height() - $pane.data('orig_height');
|
|
|
|
wrap.find('.layout-header-wrapper').height(wrap.find('.layout-header-wrapper').height() + delta_v);
|
|
wrap.find('.left-sidebar, .center-width, .right-sidebar, .gutter-east, .gutter-west').height(wrap.find('.left-sidebar').height() - delta_v);
|
|
wrap.find('.left-sidebar, .center-width, .right-sidebar, .gutter-east, .gutter-west').css('top', Number(wrap.find('.left-sidebar').css('top').match(/\d+/)[0]) + delta_v);
|
|
wrap.find('.inner-gutter-horizontal').css('top', Number(wrap.find('.inner-gutter-horizontal').css('top').match(/\d+/)[0]) + delta_v);
|
|
|
|
center.options.north.minSize = 50 + Math.round(down_factor_v*min_slider_height) + $('.layout-header').height() + 16;
|
|
center.options.north.maxSize = 50 + Math.round(down_factor_v*max_slider_height) + $('.layout-header').height() + 16;
|
|
|
|
update_dimensions( 'slider' );
|
|
}
|
|
});
|
|
|
|
var update_dimensions = function( block_update ) {
|
|
var site = Math.round(wrap.find('.footer-wrapper').width() * up_factor);
|
|
var left_sidebar = Math.round(wrap.find('.left-sidebar').width() * up_factor);
|
|
var right_sidebar = Math.round(wrap.find('.right-sidebar').width() * up_factor);
|
|
var center_width = Math.round(wrap.find('.center-width').width() * up_factor);
|
|
var header = Math.round(wrap.find('.layout-header').height() * up_factor_v);
|
|
var slider = Math.round(wrap.find('.layout-slider').height() * up_factor_v);
|
|
|
|
wrap.find('.left-sidebar .size').text(left_sidebar + 'px');
|
|
wrap.find('.right-sidebar .size').text(right_sidebar + 'px');
|
|
wrap.find('.layout-header .size').text(header + 'px');
|
|
|
|
if(block_update != 'slider') {
|
|
wrap.find('.layout-slider .size').text(slider + 'px');
|
|
$('#header-slider-height').val(slider).change();
|
|
}
|
|
|
|
wrap.find('.center-width .size-none').text(site + 'px');
|
|
wrap.find('.center-width .size-both').text(center_width + 'px');
|
|
|
|
$('#content-width').val(site).change();
|
|
$('#left_sidebar_width').val(left_sidebar).change();
|
|
$('#right_sidebar_width').val(right_sidebar).change();
|
|
$('#header-height').val(header).change();
|
|
}
|
|
|
|
// toggles
|
|
|
|
$('.lo-toggle').each(function() {
|
|
var tr = WPV_LAYOUT_TRANSLATIONS;
|
|
$(this).html('<span class="enable">'+tr.enable+'</span> / <span class="disable">'+tr.disable+'</span>');
|
|
|
|
var enable = $(this).find('.enable');
|
|
var disable = $(this).find('.disable');
|
|
var checkbox = $('#'+$(this).attr('data-for'));
|
|
|
|
enable.click(function() {
|
|
$(this).addClass('active').siblings().removeClass('active');
|
|
$(this).closest('.ui-layout-pane').addClass('toggle-enabled').removeClass('toggle-disabled');
|
|
});
|
|
|
|
disable.click(function() {
|
|
$(this).addClass('active').siblings().removeClass('active');
|
|
$(this).closest('.ui-layout-pane').addClass('toggle-disabled').removeClass('toggle-enabled');
|
|
});
|
|
|
|
if(checkbox.length) {
|
|
enable.click(function() {
|
|
checkbox.attr('checked', true);
|
|
});
|
|
|
|
disable.click(function() {
|
|
checkbox.attr('checked', false);
|
|
});
|
|
|
|
if( checkbox.is(':checked') ) {
|
|
enable.click();
|
|
} else {
|
|
disable.click();
|
|
}
|
|
} else if($(this).attr('data-type') == 'body-sidebars-left') { // is there a nicer implementation?
|
|
var id="#default-body-layout";
|
|
|
|
enable.click(function() {
|
|
if($('.lo-toggle[data-type="body-sidebars-right"]').has('.enable.active').length) {
|
|
$(id+'left-right').attr('checked', true);
|
|
} else {
|
|
$(id+'left-only').attr('checked', true);
|
|
}
|
|
});
|
|
|
|
disable.click(function() {
|
|
if($('.lo-toggle[data-type="body-sidebars-right"]').has('.enable.active').length) {
|
|
$(id+'right-only').attr('checked', true);
|
|
} else {
|
|
$(id+'full').attr('checked', true);
|
|
}
|
|
});
|
|
} else if($(this).attr('data-type') == 'body-sidebars-right') {
|
|
|
|
var id="#default-body-layout";
|
|
|
|
enable.click(function() {
|
|
if($('.lo-toggle[data-type="body-sidebars-left"]').has('.enable.active').length) {
|
|
$(id+'left-right').attr('checked', true);
|
|
} else {
|
|
$(id+'right-only').attr('checked', true);
|
|
}
|
|
});
|
|
|
|
disable.click(function() {
|
|
if($('.lo-toggle[data-type="body-sidebars-left"]').has('.enable.active').length) {
|
|
$(id+'left-only').attr('checked', true);
|
|
} else {
|
|
$(id+'full').attr('checked', true);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
// initialize the lo-toggles for sidebars
|
|
(function() {
|
|
var id="#default-body-layout";
|
|
|
|
if($(id+'left-right').is(':checked')) {
|
|
$('[data-type="body-sidebars-left"] .enable').click();
|
|
$('[data-type="body-sidebars-right"] .enable').click();
|
|
} else if ($(id+'left-only').is(':checked')) {
|
|
$('[data-type="body-sidebars-left"] .enable').click();
|
|
$('[data-type="body-sidebars-right"] .disable').click();
|
|
} else if ($(id+'right-only').is(':checked')) {
|
|
$('[data-type="body-sidebars-left"] .disable').click();
|
|
$('[data-type="body-sidebars-right"] .enable').click();
|
|
} else {
|
|
$('[data-type="body-sidebars-left"] .disable').click();
|
|
$('[data-type="body-sidebars-right"] .disable').click();
|
|
}
|
|
})();
|
|
|
|
});
|
|
|
|
})(jQuery);
|