MediaWiki:Common.js — различия между версиями
Designer (обсуждение | вклад) |
Coder (обсуждение | вклад) |
||
| (не показаны 63 промежуточные версии 3 участников) | |||
| Строка 5: | Строка 5: | ||
var maximumWidthTextWithWin1 = maximumWidthText - $(".block1").width() - $("#win1").width(); | var maximumWidthTextWithWin1 = maximumWidthText - $(".block1").width() - $("#win1").width(); | ||
var maximumWidthTextWithWin2 = maximumWidthText - $(".block1").width() - $("#win2").width(); | var maximumWidthTextWithWin2 = maximumWidthText - $(".block1").width() - $("#win2").width(); | ||
| − | var maxHeightBlock = | + | var maxHeightBlock = 0; |
| + | var maxHeightBlockb = 0; | ||
| + | var indent = document.body.offsetWidth - $('#aside1').offset().left - $('#aside1').width(); | ||
| + | $(function() { | ||
| + | $("#toc").css("display",'block'); | ||
| + | $("#toc").css("overflow",'scroll'); | ||
| + | |||
| + | }); | ||
| + | |||
$("#but1").click(function (event) { | $("#but1").click(function (event) { | ||
| Строка 19: | Строка 27: | ||
$("#win1").show('slow'); | $("#win1").show('slow'); | ||
$('#text').animate({ | $('#text').animate({ | ||
| − | width : maximumWidthTextWithWin1, | + | width : maximumWidthTextWithWin1}, |
| − | + | function(){ | |
| + | var ff= 0; | ||
| + | if (z - $(window).scrollTop() < 0) { | ||
| + | if (navigator.userAgent.search(/Firefox/) > -1) { | ||
| + | ff= 99; | ||
| + | } | ||
| + | scrl = 0; | ||
| + | posit = $("#block").position().top | ||
| + | posit2 = $("#toc").position().top | ||
| + | } else { | ||
| + | scrl = $(window).scrollTop(); | ||
| + | posit = $("#block").offset().top | ||
| + | posit2 = $("#toc").offset().top | ||
| + | } | ||
| + | var xx = document.body.offsetHeight -(posit+17) + scrl -ff; | ||
| + | var xxb = document.body.offsetHeight -(posit2+26); | ||
| + | $("#block").css("max-height",xx+'px'); | ||
| + | $("#toc").css("max-height",xxb+'px'); | ||
| + | maxHeightBlock = xx; | ||
| + | maxHeightBlockb = xxb; | ||
| + | } | ||
| + | ); | ||
if ($("#win2").is(':visible')) { | if ($("#win2").is(':visible')) { | ||
| Строка 28: | Строка 57: | ||
} | } | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
}); | }); | ||
| Строка 57: | Строка 80: | ||
} | } | ||
} | } | ||
| + | var ff = 0; | ||
| + | if (z - $(window).scrollTop() < 0) { | ||
| + | if (navigator.userAgent.search(/Firefox/) > -1) { | ||
| + | ff= 46; | ||
| + | } | ||
| + | |||
| + | scrl = 0; | ||
| + | pos = $("#block").position().top | ||
| + | pos2 = $("#toc").position().top | ||
| + | } else { | ||
| + | scrl = $(window).scrollTop(); | ||
| + | pos = $("#block").offset().top | ||
| + | pos2 = $("#toc").offset().top | ||
| + | } | ||
| + | var xx = document.body.offsetHeight -(pos+17) ; | ||
| + | var xxb = document.body.offsetHeight -(pos2+26) +scrl -ff; | ||
| + | $("#block").css("max-height",xx+'px'); | ||
| + | |||
| + | $("#toc").css("max-height",xxb+'px'); | ||
| + | maxHeightBlock = xx; | ||
| + | maxHeightBlockb = xxb; | ||
| + | |||
}); | }); | ||
| Строка 67: | Строка 112: | ||
document.body.addEventListener('scroll', Ascroll, false); // если у html и body высота равна 100% | document.body.addEventListener('scroll', Ascroll, false); // если у html и body высота равна 100% | ||
function Ascroll() { | function Ascroll() { | ||
| − | if (b == null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями | + | if (b === null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями |
var Sa = getComputedStyle(a, ''), s = ''; | var Sa = getComputedStyle(a, ''), s = ''; | ||
for (var i = 0; i < Sa.length; i++) { // перечислить стили CSS, которые нужно скопировать с родителя | for (var i = 0; i < Sa.length; i++) { // перечислить стили CSS, которые нужно скопировать с родителя | ||
| − | if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) { | + | if (Sa[i].indexOf('overflow') === 0 || Sa[i].indexOf('padding') === 0 || Sa[i].indexOf('border') === 0 || Sa[i].indexOf('outline') === 0 || Sa[i].indexOf('box-shadow') === 0 || Sa[i].indexOf('background') === 0) { |
s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; ' | s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; ' | ||
} | } | ||
| Строка 82: | Строка 127: | ||
b.appendChild(a.childNodes[1]); | b.appendChild(a.childNodes[1]); | ||
} | } | ||
| − | a.style.height = b.getBoundingClientRect().height + 'px'; // если под скользящим элементом есть другие блоки, можно своё значение | + | //a.style.height = b.getBoundingClientRect().height + 'px'; // если под скользящим элементом есть другие блоки, можно своё значение |
//a.style.height = '950px'; // если под скользящим элементом есть другие блоки, можно своё значение | //a.style.height = '950px'; // если под скользящим элементом есть другие блоки, можно своё значение | ||
| Строка 95: | Строка 140: | ||
//$("#aside1").offset({top:$(window).scrollTop()}); | //$("#aside1").offset({top:$(window).scrollTop()}); | ||
b.className = 'sticky'; | b.className = 'sticky'; | ||
| − | b.style.right = ' | + | |
| + | b.style.right = indent + 'px'; | ||
| + | |||
} else { | } else { | ||
//$("#aside1").offset({top:z}); | //$("#aside1").offset({top:z}); | ||
b.className = ''; | b.className = ''; | ||
} | } | ||
| + | var ff = 0; | ||
| + | var ff2 = 0; | ||
| + | if (z - $(window).scrollTop() < 0) { | ||
| + | pos = $("#block").position().top | ||
| + | pos2 = $("#toc").position().top | ||
| + | if (navigator.userAgent.search(/Firefox/) > -1) { | ||
| + | ff= 99; | ||
| + | ff2= 46; | ||
| + | } | ||
| + | } else { | ||
| + | pos = $("#block").offset().top | ||
| + | pos2 = $("#toc").offset().top | ||
| + | } | ||
| + | maxHeightBlock = document.body.offsetHeight -(pos+17); | ||
| + | maxHeightBlockb = document.body.offsetHeight -(pos2+26); | ||
| + | |||
var xx0 = z - $(window).scrollTop(); | var xx0 = z - $(window).scrollTop(); | ||
| − | if (xx0 < 0) { xx0 = | + | if (xx0 < 0) { xx0 = z;} |
| − | var xx = maxHeightBlock + z - xx0; | + | var xx = maxHeightBlock + z - xx0 - ff; |
| + | var xxb = maxHeightBlockb + z - xx0- ff2; | ||
xx = xx + 'px'; | xx = xx + 'px'; | ||
| − | $("#block").css("max-height",xx); | + | xxb = xxb + 'px'; |
| + | $("#block").css("max-height",xx); | ||
| + | $("#toc").css("max-height",xxb); | ||
} | } | ||
})() | })() | ||
| Строка 140: | Строка 206: | ||
.width( width ); | .width( width ); | ||
} | } | ||
| + | |||
| + | |||
} ); | } ); | ||
/* slide panel with 1 button */ | /* slide panel with 1 button */ | ||
Текущая версия на 08:50, 28 июня 2017
/**
* Slide panel with 2 buttons
*/
var maximumWidthText = $("#text").width();
var maximumWidthTextWithWin1 = maximumWidthText - $(".block1").width() - $("#win1").width();
var maximumWidthTextWithWin2 = maximumWidthText - $(".block1").width() - $("#win2").width();
var maxHeightBlock = 0;
var maxHeightBlockb = 0;
var indent = document.body.offsetWidth - $('#aside1').offset().left - $('#aside1').width();
$(function() {
$("#toc").css("display",'block');
$("#toc").css("overflow",'scroll');
});
$("#but1").click(function (event) {
if ($("#win1").is(':visible')) {
$("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );
$("#win1").hide('slow');
$('#text').animate({
width : maximumWidthText,
});
} else {
$("#but1").removeClass( "info_but" ).addClass( "info_but_pressed" );
$("#win1").show('slow');
$('#text').animate({
width : maximumWidthTextWithWin1},
function(){
var ff= 0;
if (z - $(window).scrollTop() < 0) {
if (navigator.userAgent.search(/Firefox/) > -1) {
ff= 99;
}
scrl = 0;
posit = $("#block").position().top
posit2 = $("#toc").position().top
} else {
scrl = $(window).scrollTop();
posit = $("#block").offset().top
posit2 = $("#toc").offset().top
}
var xx = document.body.offsetHeight -(posit+17) + scrl -ff;
var xxb = document.body.offsetHeight -(posit2+26);
$("#block").css("max-height",xx+'px');
$("#toc").css("max-height",xxb+'px');
maxHeightBlock = xx;
maxHeightBlockb = xxb;
}
);
if ($("#win2").is(':visible')) {
$("#win2").hide('slow');
$("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );
}
}
});
$("#but2").click(function (event) {
if ($("#win2").is(':visible')) {
$("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );
$("#win2").hide('slow');
$('#text').animate({
width : maximumWidthText,
});
} else {
$("#but2").removeClass( "toc_but" ).addClass( "toc_but_pressed" );
$("#win2").show('slow');
$('#text').animate({
width : maximumWidthTextWithWin2,
});
if ($("#win1").is(':visible')) {
$("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );
$("#win1").hide('slow');
}
}
var ff = 0;
if (z - $(window).scrollTop() < 0) {
if (navigator.userAgent.search(/Firefox/) > -1) {
ff= 46;
}
scrl = 0;
pos = $("#block").position().top
pos2 = $("#toc").position().top
} else {
scrl = $(window).scrollTop();
pos = $("#block").offset().top
pos2 = $("#toc").offset().top
}
var xx = document.body.offsetHeight -(pos+17) ;
var xxb = document.body.offsetHeight -(pos2+26) +scrl -ff;
$("#block").css("max-height",xx+'px');
$("#toc").css("max-height",xxb+'px');
maxHeightBlock = xx;
maxHeightBlockb = xxb;
});
var z = $("#aside1").offset().top;
(function(){ // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными
var a = document.querySelector('#aside1'), b = null; // селектор блока, который нужно закрепить
window.addEventListener('scroll', Ascroll, false);
document.body.addEventListener('scroll', Ascroll, false); // если у html и body высота равна 100%
function Ascroll() {
if (b === null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями
var Sa = getComputedStyle(a, ''), s = '';
for (var i = 0; i < Sa.length; i++) { // перечислить стили CSS, которые нужно скопировать с родителя
if (Sa[i].indexOf('overflow') === 0 || Sa[i].indexOf('padding') === 0 || Sa[i].indexOf('border') === 0 || Sa[i].indexOf('outline') === 0 || Sa[i].indexOf('box-shadow') === 0 || Sa[i].indexOf('background') === 0) {
s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '
}
}
b = document.createElement('div'); // создать потомка
var kk = a.offsetWidth;
b.style.cssText = s + ' box-sizing: border-box;';
a.insertBefore(b, a.firstChild); // поместить потомка в цепляющийся блок первым
var l = a.childNodes.length;
for (var i = 1; i < l; i++) { // переместить во вновь созданного потомка всех остальных потомков (итого: создан потомок-обёртка, внутри которого по прежнему работают скрипты)
b.appendChild(a.childNodes[1]);
}
//a.style.height = b.getBoundingClientRect().height + 'px'; // если под скользящим элементом есть другие блоки, можно своё значение
//a.style.height = '950px'; // если под скользящим элементом есть другие блоки, можно своё значение
a.style.padding = '0';
a.style.border = '0'; // если элементу присвоен padding или border
}
//$("#aside1").offset({top:z});
if (z - $(window).scrollTop() <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера
//$("#aside1").offset({top:$(window).scrollTop()});
b.className = 'sticky';
b.style.right = indent + 'px';
} else {
//$("#aside1").offset({top:z});
b.className = '';
}
var ff = 0;
var ff2 = 0;
if (z - $(window).scrollTop() < 0) {
pos = $("#block").position().top
pos2 = $("#toc").position().top
if (navigator.userAgent.search(/Firefox/) > -1) {
ff= 99;
ff2= 46;
}
} else {
pos = $("#block").offset().top
pos2 = $("#toc").offset().top
}
maxHeightBlock = document.body.offsetHeight -(pos+17);
maxHeightBlockb = document.body.offsetHeight -(pos2+26);
var xx0 = z - $(window).scrollTop();
if (xx0 < 0) { xx0 = z;}
var xx = maxHeightBlock + z - xx0 - ff;
var xxb = maxHeightBlockb + z - xx0- ff2;
xx = xx + 'px';
xxb = xxb + 'px';
$("#block").css("max-height",xx);
$("#toc").css("max-height",xxb);
}
})()
/* slide panel with 2 buttons */
/**
* Slide panel with 1 button
* @author mwjames
*/
$("#panel-tab").click( function (event) {
event.stopPropagation();
showIfNotVisible( "#panel-content" );
} );
function showIfNotVisible( element ) {
var width = $( '#panel' ).find( 'table').width() + 8;
if ( $(element).css( "width" ) == width + 'px' )
$(element).animate( { width: 0 }, 1500);
else
$(element).animate( { width: width }, 1500);
};
$( function() {
var element = $("#panel-content"),
status = element.attr( 'class' ),
width = element.find( 'table').width() + 8;
if ( status === 'close' ){
element
.width( width )
.animate( { width: 0 }, 1200);
} else {
element
.width( width );
}
} );
/* slide panel with 1 button */